From cd432cfd59eec8b103ffc0ea9f00038ed008ca8b Mon Sep 17 00:00:00 2001
From: "zeinab.ashrafi" <ashrafisokout@gmail.com>
Date: Tue, 11 Mar 2025 13:17:35 +0330
Subject: [PATCH] fix : drawer list

---
 src/components/core/Drawer.vue     |   8 +-
 src/components/core/Toolbar.vue    | 296 ++++++++++++-----------------
 src/services/global/api.service.js |   3 +-
 src/views/Dashboard.vue            | 204 ++++++++++++++------
 4 files changed, 278 insertions(+), 233 deletions(-)

diff --git a/src/components/core/Drawer.vue b/src/components/core/Drawer.vue
index 756a7dc..2badfb6 100644
--- a/src/components/core/Drawer.vue
+++ b/src/components/core/Drawer.vue
@@ -80,11 +80,17 @@ export default {
         icon: 'description',
         text: 'All Test Result'
       },
+      {
+        to: { name: 'ManageMedicalCenter' },
+        icon: 'far fa-building',
+        text: 'Manage Medical Center',
+        role: 'Admin',
+      },
       {
         to: { name: 'ManageUsers' },
         icon: 'far fa-address-book',
         text: 'Manage Users',
-        role: 'Admin|Supervisor',
+        role: 'Admin',
       },
       {
         to: { name: 'ListTestType' },
diff --git a/src/components/core/Toolbar.vue b/src/components/core/Toolbar.vue
index 552fed1..0868077 100644
--- a/src/components/core/Toolbar.vue
+++ b/src/components/core/Toolbar.vue
@@ -1,196 +1,150 @@
 <template>
-  <v-toolbar
-    id="core-toolbar"
+    <v-toolbar id="core-toolbar" flat prominent style="background: #eee;">
+        <div class="v-toolbar-title">
+            <v-toolbar-title class="tertiary--text font-weight-light">
+                <v-btn v-if="responsive" class="default v-btn--simple" dark icon @click.stop="onClickBtn">
+                    <v-icon>mdi-view-list</v-icon>
+                </v-btn>
+                {{ title }}
+            </v-toolbar-title>
+        </div>
 
-    flat
-    prominent
-    style="background: #eee;"
-  >
-    <div class="v-toolbar-title">
-      <v-toolbar-title
-        class="tertiary--text font-weight-light"
-      >
-        <v-btn
-          v-if="responsive"
-          class="default v-btn--simple"
-          dark
-          icon
-          @click.stop="onClickBtn"
-        >
-          <v-icon>mdi-view-list</v-icon>
-        </v-btn>
-        {{ title }}
-      </v-toolbar-title>
-    </div>
+        <v-spacer/>
+        <v-toolbar-items>
+            <v-flex align-center layout py-2>
+                <!-- <v-text-field
+                  v-if="responsiveInput"
+                  class="mr-4 mt-2 purple-input"
+                  label="Search..."
+                  hide-details
+                  color="purple"
+                /> -->
+                <v-menu :close-on-content-click="false" :nudge-width="200" offset-x>
+                    <template v-slot:activator="{ on }">
+                        <v-icon v-ripple class="toolbar-items" v-on="on" color="tertiary">mdi-account</v-icon>
+                    </template>
 
-    <v-spacer />
-    <v-toolbar-items>
-      <v-flex
-        align-center
-        layout
-        py-2
-      >
-        <!-- <v-text-field
-          v-if="responsiveInput"
-          class="mr-4 mt-2 purple-input"
-          label="Search..."
-          hide-details
-          color="purple"
-        /> -->
-        <v-menu
-      :close-on-content-click="false"
-      :nudge-width="200"
-      offset-x
-    >
-      <template v-slot:activator="{ on }">
+                    <v-card>
+                        <v-list>
+                            <v-list-tile avatar>
+                                <!-- <v-list-tile-avatar>
+                                  <img src="https://cdn.vuetifyjs.com/images/john.jpg" :alt="name">
+                                </v-list-tile-avatar> -->
 
-          <v-icon
-          v-ripple
-          class="toolbar-items"
-          v-on="on"
-          color="tertiary">
-          mdi-account
-          </v-icon>
+                                <v-list-tile-content>
+                                    <v-list-tile-title>{{ name }}</v-list-tile-title>
+                                    <v-list-tile-sub-title>{{ cell_number }}</v-list-tile-sub-title>
+                                </v-list-tile-content>
+                            </v-list-tile>
+                        </v-list>
 
-      </template>
+                        <v-divider/>
 
-      <v-card>
-        <v-list>
-          <v-list-tile avatar>
-            <!-- <v-list-tile-avatar>
-              <img src="https://cdn.vuetifyjs.com/images/john.jpg" :alt="name">
-            </v-list-tile-avatar> -->
+                        <v-list>
+                            <router-link class="toolbar-items" :to="{name: 'MyInfo'}">
+                                <v-list-tile>
+                                    <v-list-tile-title class="black--text">My Info</v-list-tile-title>
+                                </v-list-tile>
+                            </router-link>
 
-            <v-list-tile-content>
-              <v-list-tile-title>{{ name }}</v-list-tile-title>
-              <v-list-tile-sub-title>{{ cell_number }}</v-list-tile-sub-title>
-            </v-list-tile-content>
-          </v-list-tile>
-        </v-list>
+                            <router-link class="toolbar-items" :to="{name: 'Tickets'}">
+                                <v-list-tile>
+                                    <v-list-tile-title class="black--text">My Ticket</v-list-tile-title>
+                                </v-list-tile>
+                            </router-link>
+                        </v-list>
+                    </v-card>
+                </v-menu>
 
-        <v-divider></v-divider>
+                <v-menu bottom left content-class="dropdown-menu" offset-y transition="slide-y-transition">
+                    <v-card>
+                        <v-list dense>
+                            <v-list-tile v-for="notification in notifications" :key="notification"
+                                         @click="onClick">
+                                <v-list-tile-title v-text="notification"/>
+                            </v-list-tile>
+                        </v-list>
+                    </v-card>
+                </v-menu>
 
-        <v-list>
-          <router-link
-          class="toolbar-items"
-          :to="{name: 'MyInfo'}"
-        >
-          <v-list-tile >
-            <v-list-tile-title class="black--text" >My Info</v-list-tile-title>
-          </v-list-tile>
-        </router-link>
-
-
-          <router-link
-          class="toolbar-items"
-          :to="{name: 'Tickets'}"
-        >
-          <v-list-tile >
-            <v-list-tile-title class="black--text" >My Ticket</v-list-tile-title>
-          </v-list-tile>
-        </router-link>
-        </v-list>
-      </v-card>
-    </v-menu>
-
-        <v-menu
-          bottom
-          left
-          content-class="dropdown-menu"
-          offset-y
-          transition="slide-y-transition">
-          <v-card>
-            <v-list dense>
-              <v-list-tile
-                v-for="notification in notifications"
-                :key="notification"
-                @click="onClick"
-              >
-                <v-list-tile-title
-                  v-text="notification"
-                />
-              </v-list-tile>
-            </v-list>
-          </v-card>
-        </v-menu>
-
-        <v-badge  class="toolbar-items Pointer" @click.native="submitLogout" >
-          <v-icon color="tertiary">input</v-icon>
-        </v-badge>
-      </v-flex>
-    </v-toolbar-items>
-  </v-toolbar>
+                <v-badge class="toolbar-items Pointer" @click.native="submitLogout">
+                    <v-icon color="tertiary">input</v-icon>
+                </v-badge>
+            </v-flex>
+        </v-toolbar-items>
+    </v-toolbar>
 </template>
 
 <script>
 
 import {
-  mapMutations, mapActions
+    mapMutations, mapActions
 } from 'vuex'
 
 export default {
-  data: () => ({
-    notifications: [
-      'Mike, John responded to your email',
-      'You have 5 new tasks',
-      'You\'re now a friend with Andrew',
-      'Another Notification',
-      'Another One'
-    ],
-    title: null,
-    responsive: false,
-    responsiveInput: false,
-    name: '',
-    cell_number: '',
-  }),
+    data: () => ({
+        notifications: [
+            'Mike, John responded to your email',
+            'You have 5 new tasks',
+            'You\'re now a friend with Andrew',
+            'Another Notification',
+            'Another One'
+        ],
+        title: null,
+        responsive: false,
+        responsiveInput: false,
+        name: '',
+        cell_number: '',
+    }),
 
-  watch: {
-    '$route' (val) {
-      // this.title = val.name
-      this.title = val.name.replace(/([A-Z])/g, ' $1').trim()
+    watch: {
+        '$route'(val) {
+            // this.title = val.name
+            this.title = val.name.replace(/([A-Z])/g, ' $1').trim()
+        }
+    },
+
+    mounted() {
+        this.onResponsiveInverted();
+        window.addEventListener('resize', this.onResponsiveInverted);
+        this.cell_number = this.$store.state.user.cell_number;
+        this.name = this.$store.state.user.name;
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.onResponsiveInverted)
+    },
+
+    methods: {
+        ...mapMutations('app', ['setDrawer', 'toggleDrawer']),
+        ...mapActions('auth', ['logout']),
+        onClickBtn() {
+            this.setDrawer(!this.$store.state.app.drawer)
+        },
+        submitLogout() {
+            this.logout();
+        },
+        onClick() {
+            //
+        },
+        onResponsiveInverted() {
+            if (window.innerWidth < 991) {
+                this.responsive = true
+                this.responsiveInput = false
+            } else {
+                this.responsive = false
+                this.responsiveInput = true
+            }
+        }
     }
-  },
-
-  mounted () {
-    this.onResponsiveInverted();
-    window.addEventListener('resize', this.onResponsiveInverted);
-    this.cell_number = this.$store.state.user.cell_number;
-    this.name = this.$store.state.user.name;
-  },
-  beforeDestroy () {
-    window.removeEventListener('resize', this.onResponsiveInverted)
-  },
-
-  methods: {
-    ...mapMutations('app', ['setDrawer', 'toggleDrawer']),
-    ...mapActions('auth', ['logout']),
-    onClickBtn () {
-      this.setDrawer(!this.$store.state.app.drawer)
-    },
-    submitLogout () {
-      this.logout();
-    },
-    onClick () {
-      //
-    },
-    onResponsiveInverted () {
-      if (window.innerWidth < 991) {
-        this.responsive = true
-        this.responsiveInput = false
-      } else {
-        this.responsive = false
-        this.responsiveInput = true
-      }
-    }
-  }
 }
 </script>
 
 <style>
-  #core-toolbar a {
+#core-toolbar a {
     text-decoration: none;
-  }
-  .Pointer {
-      cursor: pointer;
-  }
+}
+
+.Pointer {
+    cursor: pointer;
+}
 </style>
diff --git a/src/services/global/api.service.js b/src/services/global/api.service.js
index a74b61c..4e3ee67 100644
--- a/src/services/global/api.service.js
+++ b/src/services/global/api.service.js
@@ -99,7 +99,6 @@ const ApiService = {
 export default ApiService
 export { ApiService }
 
-/*
 axios.interceptors.request.use(request => {
     console.log("🔵 API Request:", request.method.toUpperCase(), request.url);
     console.log("🔹 Headers:", request.headers);
@@ -118,4 +117,4 @@ axios.interceptors.response.use(response => {
 }, error => {
     console.error("🔴 API Error:", error.response ? error.response.data : error);
     return Promise.reject(error);
-});*/
+});
\ No newline at end of file
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index ac96dde..3d26f2e 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,74 +1,160 @@
 <template>
-  <v-container fluid>
+    <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>
+        <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>
+            </v-layout>
+        </material-card>
 
+        <material-card v-if="$hasRole('Supervisor')" 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>
 
-    <material-card v-if="$hasRole('Admin|Supervisor')" 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>
 
-      </v-layout>
-    </material-card>
+        <material-card v-if="$hasRole('User')" 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>
 
-    <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-layout>
-    </material-card>
-
-  </v-container>
+    </v-container>
 </template>
 
 <script>
-import { UserService } from '@/services';
+// import { UserService } from '@/services';
 export default {
-  data() {
-    return {
-      AdminCards: [
-        { title: 'Manage Users', text: 'You can Manage the users information', icon: '/img/Static/Dashboard/manageusers.png', color: 'WM-LightGreenGradient-BG', route: { name: 'ManageUsers' }, aligntext: 'text-md-left', 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-ce', 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-LightGreenGradient-BG', route: { name: 'ManageUsers' }, aligntext: 'text-md-left', 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-left', 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-YellowGradient-BG', route: { name: 'SubmitTestResult' }, aligntext: 'text-md-left', alignimg: 'text-md-left', column: 'xs12 md12 sm12' },
-      ],
-    }
-  },
+    data() {
+        return {
+            AdminCards: [
+                {
+                    title: 'Manage Users',
+                    text: 'You can Manage the users information',
+                    icon: '/img/Static/Dashboard/manageusers.png',
+                    color: 'WM-LightGreenGradient-BG',
+                    route: {name: 'ManageUsers'},
+                    aligntext: 'text-md-left',
+                    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-ce',
+                    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-LightGreenGradient-BG',
+                    route: {name: 'ManageUsers'},
+                    aligntext: 'text-md-left',
+                    alignimg: 'text-md-left',
+                    column: 'xs12 md12 sm12',
+                    role: '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-left',
+                    alignimg: 'text-md-left',
+                    column: 'xs12 md12 sm12',
+                    role: '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',
+                    role: 'User'
+                },
+                {
+                    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',
+                    role: 'User'
+                },
+                {
+                    title: 'Add a Test Result',
+                    text: 'You can add the test result',
+                    icon: '/img/Static/Dashboard/addtest.png',
+                    color: 'WM-YellowGradient-BG',
+                    route: {name: 'SubmitTestResult'},
+                    aligntext: 'text-md-left',
+                    alignimg: 'text-md-left',
+                    column: 'xs12 md12 sm12',
+                    role: 'User'
+                },
+            ],
+        }
+    },
 }
 </script>
 <style lang="scss"></style>