cssd-back/resources/js/vue/views/Dashboard.vue

<template>
  <v-container fluid>

    <material-card class=""
      v-if="$hasRole('Admin')"
      color="black"
      title="Admin"
      text="">
      <v-layout row wrap >
        <template v-for="(AdminCard, Key ) in AdminCards">
        <v-flex v-if="!AdminCard.role || $hasRole(AdminCard.role)" :class="[AdminCard.column , 'pa-2']" :key="Key">
          <router-link :to="AdminCard.route">
            <material-cards
              :title="AdminCard.title"
              :icon="AdminCard.icon"
              :color="AdminCard.color"
              :text="AdminCard.text"
              :aligntext="AdminCard.aligntext"
              :alignimg="AdminCard.alignimg"
             />
          </router-link>
        </v-flex>
        </template>

      </v-layout>
    </material-card>


    <material-card
      v-if="$hasRole('Supervisor|Admin')"
      color="black"
      title="Supervisor"
      text=""
    >
      <v-layout row wrap >
        <template v-for="(SupervisorCard, Key ) in SupervisorCards">
        <v-flex v-if="!SupervisorCard.role || $hasRole(SupervisorCard.role)" :class="[SupervisorCard.column , 'pa-2']" :key="Key">
          <router-link :to="SupervisorCard.route">
            <material-cards
              :title="SupervisorCard.title"
              :icon="SupervisorCard.icon"
              :color="SupervisorCard.color"
              :text="SupervisorCard.text"
              :aligntext="SupervisorCard.aligntext"
              :alignimg="SupervisorCard.alignimg"
             />
          </router-link>
        </v-flex>
        </template>

      </v-layout>
    </material-card>

    <material-card
      color="black"
      title="User"
      text=""
    >
      <v-layout row wrap >
        <template v-for="(UsersCard, Key ) in UsersCards">
        <v-flex v-if="!UsersCard.role || $hasRole(UsersCard.role)" :class="[UsersCard.column , 'pa-2']" :key="Key">
          <router-link :to="UsersCard.route">
            <material-cards
              :title="UsersCard.title"
              :icon="UsersCard.icon"
              :color="UsersCard.color"
              :text="UsersCard.text"
              :aligntext="UsersCard.aligntext"
              :alignimg="UsersCard.alignimg"
             />
          </router-link>
        </v-flex>
        </template>

      </v-layout>
    </material-card>

  </v-container>
</template>

<script>
export default {
 data() {
     return {
         AdminCards :[
             {title:'Manage Users', text:'You can Manage the users information',icon:'/img/Static/Dashboard/manageusers.png',color:'WM-YellowPinkGradient-BG',route:{name: 'ManageUsers'},aligntext:'text-md-center',alignimg:'text-md-left',column:'xs12 md12 sm12', role: 'Admin|Supervisor'},
             {title:'Manage Medical Center', text:'You can edit the medical center information',icon:'/img/Static/Dashboard/settings.png',color:'WM-MuskGradient-BG',route:{name: 'ManageMedicalCenter'},aligntext:'text-md-left',alignimg:'text-md-right',column:'xs12 md7 sm7', role: 'Admin'},
             {title:'List Test Type', text:'You can simply add your test type',icon:'/img/Static/Dashboard/result.png',color:'WM-GreyGradient-BG',route:{name: 'ListTestType'},aligntext:'text-md-left',alignimg:'text-md-right',column:'xs12 md5 sm5', role: 'Admin'}
         ],
         SupervisorCards :[
             {title:'Manage Users', text:'You can Manage the users information',icon:'/img/Static/Dashboard/manageusers.png',color:'WM-YellowPinkGradient-BG',route:{name: 'ManageUsers'},aligntext:'text-md-center',alignimg:'text-md-left',column:'xs12 md12 sm12', role: 'Admin|Supervisor'},
             {title:'Test to Verify', text:'You can simply verify your own medical center test result in this section of website',icon:'/img/Static/Dashboard/verify.png',color:'WM-PinkGradient-BG',route:{name: 'NotVerifyTestResult'},aligntext:'text-md-center',alignimg:'text-md-left',column:'xs12 md12 sm12', role: 'Admin|Supervisor'},
         ],
         UsersCards :[
             {title:'My Info', text:'You can easily edit your registration information',icon:'/img/Static/Dashboard/info.png',color:'WM-OrangeGradient-BG',route:{name: 'MyInfo'},aligntext:'text-md-left',alignimg:'text-md-right', column:'xs12 md6 sm6'},
             {title:'All Test Result', text:'You can see all user tests and own tests',icon:'/img/Static/Dashboard/alltest.png',color:'WM-GreenGradient-BG',route:{name: 'AllResultTest'},aligntext:'text-md-left',alignimg:'text-md-right',column:'xs12 md6 sm6'},
             {title:'Add a Test Result', text:'You can add the test result',icon:'/img/Static/Dashboard/addtest.png',color:'WM-YellowPinkGradient-BG',route:{name: 'SubmitTestResult'},aligntext:'text-md-center',alignimg:'text-md-left',column:'xs12 md12 sm12'},
         ],
     }
 }
}
</script>
<style lang="scss">

</style>