cssd-front/src/views/Dashboard.vue

<template>
    <v-container fluid class="dashboard">

        <material-card class="" v-if="$hasRole('Admin')" color="black" title="Admin Dashboard" 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" style="height: 100%;display: grid;">
                            <material-cards :title="AdminCard.title" :icon="AdminCard.icon" :svg="AdminCard.svg"
                                            :image="AdminCard.image" :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('Admin|Supervisor')" color="black" title="Supervisor Dashboard" 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" style="height: 100%;display:grid;">
                            <material-cards :title="SupervisorCard.title" :icon="SupervisorCard.icon"
                                            :color="SupervisorCard.color" :svg="SupervisorCard.svg"
                                            :image="SupervisorCard.image" :text="SupervisorCard.text"
                                            :aligntext="SupervisorCard.aligntext" :alignimg="SupervisorCard.alignimg"/>
                        </router-link>
                    </v-flex>
                </template>
            </v-layout>
        </material-card>

        <material-card v-if="$hasRole('Admin|Supervisor|User')" color="black" title="User Dashboard" 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" style="height: 100%;display:grid;">
                            <material-cards :title="UsersCard.title" :icon="UsersCard.icon" :color="UsersCard.color"
                                            :text="UsersCard.text" :aligntext="UsersCard.aligntext" :svg="UsersCard.svg"
                                            :image="UsersCard.image" :alignimg="UsersCard.alignimg"/>
                        </router-link>
                    </v-flex>
                </template>
            </v-layout>
        </material-card>

    </v-container>
</template>

<script>
// import { UserService } from '@/services';
export default {
    metaInfo() {
        return {
            title: this.$route.meta.title,
            meta: this.$route.meta.metaTags || []
        }
    },
    data() {
        return {
            AdminCards: [
                {
                    title: 'Manage Users',
                    text: 'You can Manage the users information',
                    // image: '/img/Static/Dashboard/manageusers.png',
                    color: 'WM-LightGray-BG',
                    route: {name: 'ManageUsers'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-left',
                    column: 'xs12 md6 sm6',
                    role: 'Admin|Supervisor'
                },
                {
                    title: 'Manage Medical Center',
                    text: 'You can edit the medical center information',
                    // image: '/img/Static/Dashboard/settings.png',
                    color: 'WM-LightGray-BG',
                    route: {name: 'ManageMedicalCenter'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-right',
                    column: 'xs12 md6 sm6',
                    role: 'Admin'
                },
                {
                    title: 'List Test Type',
                    text: 'You can simply add your test type',
                    // image: '/img/Static/Dashboard/result.png',
                    color: 'WM-LightGray-BG',
                    route: {name: 'ListTestType'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-ce',
                    column: 'xs12 md12 sm12',
                    role: 'Admin'
                }
            ],
            SupervisorCards: [
                {
                    title: 'Manage Users',
                    text: 'You can Manage the users information',
                    // image: '/img/Static/Dashboard/manageusers.png',
                    color: 'WM-LightGray-BG',
                    route: {name: 'ManageUsers'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-left',
                    column: 'xs12 md6 sm6',
                    role: 'Admin|Supervisor'
                },
                {
                    title: 'Test to Verify',
                    text: 'You can simply verify your own medical center test result in this section of website',
                    // image: '/img/Static/Dashboard/verify.png',
                    color: 'WM-LightGray-BG',
                    route: {name: 'NotVerifyTestResult'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-left',
                    column: 'xs12 md6 sm6',
                    role: 'Admin|Supervisor'
                },
            ],
            UsersCards: [
                {
                    title: 'My Info',
                    text: 'You can easily edit your registration information',
                    // image: '/img/Static/Dashboard/info.png',
                    color: 'WM-LightGray-BG',
                    route: {name: 'MyInfo'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-right',
                    column: 'xs12 md12 sm12',
                    role: 'Admin|Supervisor|User'
                },
                {
                    title: 'All Test Result',
                    text: 'You can see all user tests and own tests',
                    // image: '/img/Static/Dashboard/alltest.png',
                    color: 'WM-LightGray-BG',
                    route: {name: 'AllResultTest'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-right',
                    column: 'xs12 md8 sm8',
                    role: 'Admin|Supervisor|User'
                },
                {
                    title: `<span class="WM-Font-14 WM-LetterSpacing-5">Add A </span><br/><span class="WM-Font-14 WM-LetterSpacing-5">Test Result</span>`,
                    svg: `  <svg width="30" height="30" viewBox="0 0 777 777" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_93_57)">
                                <path d="M17.5938 388.5H759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M388.5 17.5938V759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
                            </g>
                            <defs>
                                <clipPath id="clip0_93_57">
                                    <rect width="777" height="777" fill="white"/>
                                </clipPath>
                            </defs>
                        </svg>`,
                    color: 'black text-white',
                    route: {name: 'SubmitTestResult'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-left',
                    column: 'xs12 md4 sm4',
                    role: 'Admin|Supervisor|User'
                },
                {
                    title: 'MY Items',
                    text: 'items that you posses',
                    // image: '/img/Static/Dashboard/alltest.png',
                    color: 'WM-LightGray-BG',
                    route: {name: 'MyItem'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-right',
                    column: 'xs12 md4 sm4',
                    role: 'Admin|Supervisor|User'
                },
                {
                    title: 'All Items',
                    text: 'all existing items in your medical center ',
                    // image: '/img/Static/Dashboard/alltest.png',
                    color: 'WM-LightGray-BG',
                    route: {name: 'AllItem'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-right',
                    column: 'xs12 md4 sm4',
                    role: 'Admin|Supervisor|User'
                },
                {
                    title: `<span class="WM-Font-14 WM-LetterSpacing-5">Add new </span><br/><span class="WM-Font-14 WM-LetterSpacing-5">item</span>`,
                    svg: `  <svg width="30" height="30" viewBox="0 0 777 777" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_93_57)">
                                <path d="M17.5938 388.5H759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M388.5 17.5938V759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
                            </g>
                            <defs>
                                <clipPath id="clip0_93_57">
                                    <rect width="777" height="777" fill="white"/>
                                </clipPath>
                            </defs>
                        </svg>`,
                    color: 'WM-CyanGradient-BG text-white',
                    route: {name: 'AddItem'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-left',
                    column: 'xs12 md4 sm4',
                    role: 'Admin|Supervisor|User'
                },
                {
                    title: 'MY package',
                    text: 'packages that you posses',
                    // image: '/img/Static/Dashboard/alltest.png',
                    color: 'WM-LightGray-BG',
                    route: {name: 'MyItem'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-right',
                    column: 'xs12 md4 sm4',
                    role: 'Admin|Supervisor|User'
                },
                {
                    title: 'All package',
                    text: 'all existing packages in your medical center  ',
                    // image: '/img/Static/Dashboard/alltest.png',
                    color: 'WM-LightGray-BG',
                    route: {name: 'AllItem'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-right',
                    column: 'xs12 md4 sm4',
                    role: 'Admin|Supervisor|User'
                },
                {
                    title: `<span class="WM-Font-14 WM-LetterSpacing-5">Add new </span><br/><span class="WM-Font-14 WM-LetterSpacing-5">Package</span>`,
                    svg: `  <svg width="30" height="30" viewBox="0 0 777 777" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_93_57)">
                                <path d="M17.5938 388.5H759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M388.5 17.5938V759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
                            </g>
                            <defs>
                                <clipPath id="clip0_93_57">
                                    <rect width="777" height="777" fill="white"/>
                                </clipPath>
                            </defs>
                        </svg>`,
                    color: 'WM-DeepBlueGradient-BG text-white',
                    route: {name: 'AddPackage'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-left',
                    column: 'xs12 md4 sm4',
                    role: 'Admin|Supervisor|User'
                },

                {
                    title: 'All labels',
                    text: 'All active labels in your medical center',
                    // image: '/img/Static/Dashboard/alltest.png',
                    color: 'WM-LightGray-BG',
                    route: {name: 'AllResultTest'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-right',
                    column: 'xs12 md8 sm8',
                    role: 'Admin|Supervisor|User'
                },
                {
                    title: `<span class="WM-Font-14 WM-LetterSpacing-5">Add new </span><br/><span class="WM-Font-14 WM-LetterSpacing-5"> label</span>`,
                    svg: `  <svg width="30" height="30" viewBox="0 0 777 777" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_93_57)">
                                <path d="M17.5938 388.5H759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M388.5 17.5938V759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
                            </g>
                            <defs>
                                <clipPath id="clip0_93_57">
                                    <rect width="777" height="777" fill="white"/>
                                </clipPath>
                            </defs>
                        </svg>`,
                    color: 'WM-PurpleGradient-BG text-white',
                    route: {name: 'AddLabel'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-left',
                    column: 'xs12 md4 sm4',
                    role: 'Admin|Supervisor|User'
                },

                {
                    title: 'All cycles',
                    text: 'All active cycles in your medical center',
                    // image: '/img/Static/Dashboard/alltest.png',
                    color: 'WM-LightGray-BG',
                    route: {name: 'AllResultTest'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-right',
                    column: 'xs12 md8 sm8',
                    role: 'Admin|Supervisor|User'
                },
                {
                    title: `<span class="WM-Font-14 WM-LetterSpacing-5">Add new </span><br/><span class="WM-Font-14 WM-LetterSpacing-5">cycle</span>`,
                    svg: `  <svg width="30" height="30" viewBox="0 0 777 777" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_93_57)">
                                <path d="M17.5938 388.5H759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M388.5 17.5938V759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
                            </g>
                            <defs>
                                <clipPath id="clip0_93_57">
                                    <rect width="777" height="777" fill="white"/>
                                </clipPath>
                            </defs>
                        </svg>`,
                    color: 'WM-RedGradient-BG text-white',
                    route: {name: 'AddCycle'},
                    aligntext: 'text-md-left',
                    alignimg: 'text-md-left',
                    column: 'xs12 md4 sm4',
                    role: 'Admin|Supervisor|User'
                },
            ],
        }
    },
}
</script>