From 3342c259f4dc0af8e30190c486691abde64ec19a Mon Sep 17 00:00:00 2001
From: "zeinab.ashrafi" <ashrafisokout@gmail.com>
Date: Thu, 22 May 2025 10:21:53 +0330
Subject: [PATCH] feat ticket to list

---
 src/components/core/Drawer.vue             | 248 +++++++--------
 src/components/modal/ticket/NewMessage.vue |   4 +-
 src/views/Tickets/List.vue                 | 342 ++++++++++-----------
 3 files changed, 289 insertions(+), 305 deletions(-)

diff --git a/src/components/core/Drawer.vue b/src/components/core/Drawer.vue
index 39df9a1..8b98b86 100644
--- a/src/components/core/Drawer.vue
+++ b/src/components/core/Drawer.vue
@@ -1,150 +1,150 @@
 <template>
-    <v-navigation-drawer id="app-drawer" v-model="inputValue" class="black" app absolute dark floating persistent
-                         mobile-break-point="991" width="260">
-        <v-img :src="image" height="100%">
-            <v-layout class="fill-height px-3" tag="v-list" column>
-                <v-list-tile avatar class="px-3 pt-4">
-                    <v-list-tile-title class="title ">
-                        <p class="user-name mb-0">{{ $store.state.user.name }}</p>
-                        <p class="hospital-name mb-0">{{ $store.state.user.medical_center?.name }}</p>
-                        <v-chip small class="user-role mx-0" color="#323232" text-color="#dcdcdc">
-                            {{ $store.state.roles[0] }}
-                        </v-chip>
-                    </v-list-tile-title>
-                </v-list-tile>
-                <v-divider class="mb-1"/>
-                <v-list-tile v-if="responsive">
-                    <v-text-field class="purple-input search-input" label="Search..." color="purple"/>
-                </v-list-tile>
-                <template v-for="(link, i) in links">
+  <v-navigation-drawer id="app-drawer" v-model="inputValue" absolute app class="black" dark floating mobile-break-point="991"
+                       persistent width="260">
+    <v-img :src="image" height="100%">
+      <v-layout class="fill-height px-3" column tag="v-list">
+        <v-list-tile avatar class="px-3 pt-4">
+          <v-list-tile-title class="title ">
+            <p class="user-name mb-0">{{ $store.state.user.name }}</p>
+            <p class="hospital-name mb-0">{{ $store.state.user.medical_center?.name }}</p>
+            <v-chip class="user-role mx-0" color="#323232" small text-color="#dcdcdc">
+              {{ $store.state.roles[0] }}
+            </v-chip>
+          </v-list-tile-title>
+        </v-list-tile>
+        <v-divider class="mb-1"/>
+        <v-list-tile v-if="responsive">
+          <v-text-field class="purple-input search-input" color="purple" label="Search..."/>
+        </v-list-tile>
+        <template v-for="(link, i) in links">
 
-                    <v-list-tile v-if="!link.role || $hasRole(link.role)" :key="i" :to="link.to" :active-class="color"
-                                 avatar
-                                 class="v-list-item ">
-                        <!--                        <v-list-tile-action>-->
-                        <!--                            <v-icon>{{ link.icon }}</v-icon>-->
-                        <!--                        </v-list-tile-action>-->
-                        <v-list-tile-title v-text="link.text"/>
-                    </v-list-tile>
-                    <v-divider class="my-1" v-if="(!link.role || $hasRole(link.role)) && link.line"/>
-                </template>
-            </v-layout>
-        </v-img>
-    </v-navigation-drawer>
+          <v-list-tile v-if="!link.role || $hasRole(link.role)" :key="i" :active-class="color" :to="link.to"
+                       avatar
+                       class="v-list-item ">
+            <!--                        <v-list-tile-action>-->
+            <!--                            <v-icon>{{ link.icon }}</v-icon>-->
+            <!--                        </v-list-tile-action>-->
+            <v-list-tile-title v-text="link.text"/>
+          </v-list-tile>
+          <v-divider v-if="(!link.role || $hasRole(link.role)) && link.line" class="my-1"/>
+        </template>
+      </v-layout>
+    </v-img>
+  </v-navigation-drawer>
 </template>
 
 <script>
 // Utilities
 import {
-    mapMutations,
-    mapState
+  mapMutations,
+  mapState
 } from 'vuex'
 
 export default {
-    data: () => ({
-        logo: './img/vuetifylogo.png',
-        links: [
-            {to: {name: 'Dashboard'}, icon: 'mdi-view-dashboard', text: 'Dashboard'},
-            {to: {name: 'MyInfo'}, icon: 'mdi-account', text: 'My Info',},
-            {to: {name: 'SubmitTestResult'}, icon: 'fas fa-vial', text: 'Add a Test Result'},
-            {to: {name: 'AllResultTest'}, icon: 'description', text: 'Test Results', line: true},
-            {to: {name: 'AllItem'}, icon: 'far fa-clone', text: 'Items',},
-            {to: {name: 'MyItem'}, icon: 'far fa-clone', text: 'My Items', line: true},
-            {to: {name: 'AllPackage'}, icon: 'fas fa-archive', text: 'Packages',},
-            {to: {name: 'MyPackage'}, icon: 'far fa-clone', text: 'My Packages', line: true},
-            {to: {name: 'AllLabels'}, icon: 'fas fa-inbox', text: 'Labels',},
-            {to: {name: 'AllCycle'}, icon: 'cached', text: 'Cycles', line: true},
-            {to: {name: 'ManageMedicalCenter'}, icon: 'far fa-building', text: 'Medical Center', role: 'Admin',},
-            {to: {name: 'ManageUsers'}, icon: 'far fa-address-book', text: 'Users', role: 'Admin|Supervisor',},
-            {to: {name: 'ListTestType'}, icon: 'fas fa-vial', text: 'Manage Test Type', role: 'Admin',},
-            /*        { to: {name: 'Statistics'}, icon: 'fas fa-chart-bar', text: 'Statistics', },
-                    {  to: {name: 'Tickets'},  icon: 'style',  text: 'Tickets', },*/
-        ],
-        responsive: false
-    }),
-    computed: {
-        ...mapState('app', ['image', 'color']),
-        inputValue: {
-            get() {
-                return this.$store.state.app.drawer
-            },
-            set(val) {
-                this.setDrawer(val)
-            }
-        },
-        items() {
-            return this.$t('Layout.View.items')
-        }
+  data: () => ({
+    logo: './img/vuetifylogo.png',
+    links: [
+      {to: {name: 'Dashboard'}, icon: 'mdi-view-dashboard', text: 'Dashboard'},
+      {to: {name: 'MyInfo'}, icon: 'mdi-account', text: 'My Info',},
+      {to: {name: 'SubmitTestResult'}, icon: 'fas fa-vial', text: 'Add a Test Result'},
+      {to: {name: 'AllResultTest'}, icon: 'description', text: 'Test Results', line: true},
+      {to: {name: 'AllItem'}, icon: 'far fa-clone', text: 'Items',},
+      {to: {name: 'MyItem'}, icon: 'far fa-clone', text: 'My Items', line: true},
+      {to: {name: 'AllPackage'}, icon: 'fas fa-archive', text: 'Packages',},
+      {to: {name: 'MyPackage'}, icon: 'far fa-clone', text: 'My Packages', line: true},
+      {to: {name: 'AllLabels'}, icon: 'fas fa-inbox', text: 'Labels',},
+      {to: {name: 'AllCycle'}, icon: 'cached', text: 'Cycles', line: true},
+      {to: {name: 'ManageMedicalCenter'}, icon: 'far fa-building', text: 'Medical Center', role: 'Admin',},
+      {to: {name: 'ManageUsers'}, icon: 'far fa-address-book', text: 'Users', role: 'Admin|Supervisor',},
+      {to: {name: 'ListTestType'}, icon: 'fas fa-vial', text: 'Manage Test Type', role: 'Admin',},
+      // {to: {name: 'Statistics'}, icon: 'fas fa-chart-bar', text: 'Statistics',},
+      {to: {name: 'Tickets'}, icon: 'style', text: 'Tickets',},
+    ],
+    responsive: false
+  }),
+  computed: {
+    ...mapState('app', ['image', 'color']),
+    inputValue: {
+      get() {
+        return this.$store.state.app.drawer
+      },
+      set(val) {
+        this.setDrawer(val)
+      }
     },
-    mounted() {
-        this.onResponsiveInverted()
-        window.addEventListener('resize', this.onResponsiveInverted)
-    },
-    beforeDestroy() {
-        window.removeEventListener('resize', this.onResponsiveInverted)
-    },
-    methods: {
-        ...mapMutations('app', ['setDrawer', 'toggleDrawer']),
-        onResponsiveInverted() {
-            if (window.innerWidth < 991) {
-                this.responsive = true
-            } else {
-                this.responsive = false
-            }
-        }
+    items() {
+      return this.$t('Layout.View.items')
     }
+  },
+  mounted() {
+    this.onResponsiveInverted()
+    window.addEventListener('resize', this.onResponsiveInverted)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.onResponsiveInverted)
+  },
+  methods: {
+    ...mapMutations('app', ['setDrawer', 'toggleDrawer']),
+    onResponsiveInverted() {
+      if (window.innerWidth < 991) {
+        this.responsive = true
+      } else {
+        this.responsive = false
+      }
+    }
+  }
 }
 </script>
 
 <style lang="scss">
 #app-drawer {
-    .title {
-        .user-name {
-            line-height: 22px;
-            font-size: 18px !important;
-        }
-
-        .hospital-name {
-            line-height: 20px;
-            font-family: 'Montserrat-Light';
-            color: #c6c6c6;
-        }
-
-        .v-chip.user-role {
-            border-radius: 4px;
-            height: 20px !important;
-            line-height: 20px;
-            font-size: 12px;
-            letter-spacing: 1px;
-        }
+  .title {
+    .user-name {
+      line-height: 22px;
+      font-size: 18px !important;
     }
 
-    .v-list .v-list-item {
-        .v-list__tile {
-            padding-top: 0;
-            padding-bottom: 0;
-            border-radius: 5px;
-
-            .v-list__tile__title {
-                font-family: 'Montserrat-light';
-                color: #e9e9e9;
-                //letter-spacing: 1px !important;
-            }
-        }
-
-        .v-list__tile.v-list__tile--active .v-list__tile__title {
-            color: #000;
-        }
+    .hospital-name {
+      line-height: 20px;
+      font-family: 'Montserrat-Light';
+      color: #c6c6c6;
     }
 
-    .v-list .v-list-item:not(:nth-child(3)) {
-        margin: 5px 15px;
+    .v-chip.user-role {
+      border-radius: 4px;
+      height: 20px !important;
+      line-height: 20px;
+      font-size: 12px;
+      letter-spacing: 1px;
+    }
+  }
+
+  .v-list .v-list-item {
+    .v-list__tile {
+      padding-top: 0;
+      padding-bottom: 0;
+      border-radius: 5px;
+
+      .v-list__tile__title {
+        font-family: 'Montserrat-light';
+        color: #e9e9e9;
+        //letter-spacing: 1px !important;
+      }
     }
 
-    .search-input {
-        margin-bottom: 30px !important;
-        padding-left: 15px;
-        padding-right: 15px;
+    .v-list__tile.v-list__tile--active .v-list__tile__title {
+      color: #000;
     }
+  }
+
+  .v-list .v-list-item:not(:nth-child(3)) {
+    margin: 5px 15px;
+  }
+
+  .search-input {
+    margin-bottom: 30px !important;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
 }
 </style>
diff --git a/src/components/modal/ticket/NewMessage.vue b/src/components/modal/ticket/NewMessage.vue
index 8d99430..a6ffbb7 100644
--- a/src/components/modal/ticket/NewMessage.vue
+++ b/src/components/modal/ticket/NewMessage.vue
@@ -15,7 +15,7 @@
                             persistent-hint
                             prepend-icon="fas fa-search"
                             color="black"
-                        ></v-autocomplete>
+                        />
                     </v-flex>
                 </v-layout>
                 <ticket-send-message :user-id="user_id" />
@@ -52,7 +52,7 @@ export default {
                 }
             }
         }
-    }
+    },
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/Tickets/List.vue b/src/views/Tickets/List.vue
index 8f0558b..48eaa0f 100644
--- a/src/views/Tickets/List.vue
+++ b/src/views/Tickets/List.vue
@@ -1,215 +1,199 @@
 <template>
-    <v-container fluid>
-        <material-card class color="black" title="My Recent ChatList" text>
-            <v-toolbar flat color="white">
-                <v-toolbar-title></v-toolbar-title>
-                <v-divider class="mx-2" inset vertical></v-divider>
-                <v-spacer></v-spacer>
-                <v-btn color="black" @click="newmessage" class="WM-ActionButton mb-2 mr-4">
-                    <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
-                    <span>New Message</span>
-                </v-btn>
-            </v-toolbar>
-            <v-layout class="px-4 my-3">
-                <v-divider></v-divider>
-            </v-layout>
-            <v-layout align-center justify-center wrap class="px-5 mt-3">
-                <v-flex md12>
-                    <v-data-table :headers="headers" :items="items" hide-actions>
-                        <template slot="headerCell" slot-scope="{ header }">
+  <v-container fluid>
+    <material-card class color="black" text title="My Recent ChatList">
+      <v-toolbar color="white" flat>
+        <v-toolbar-title></v-toolbar-title>
+        <v-divider class="mx-2" inset vertical></v-divider>
+        <v-spacer/>
+        <v-btn class="WM-ActionButton mb-2 mr-4" color="black" @click="newmessage">
+          <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+          <span>New Message</span>
+        </v-btn>
+      </v-toolbar>
+      <v-layout class="px-4 my-3">
+        <v-divider/>
+      </v-layout>
+      <v-layout align-center class="px-5 mt-3" justify-center wrap>
+        <v-flex md12>
+          <v-data-table :headers="headers" :items="items" hide-actions>
+            <template slot="headerCell" slot-scope="{ header }">
                             <span
                                 class="subheading font-weight-light text-white text--darken-3"
                                 v-text="header.text"
                             />
-                        </template>
-                        <template slot="items" slot-scope="{ item }">
-                            <td
-                                class="headline font-weight-light WM-NoLetterSpacing"
-                            >{{ item.name }}</td>
-                            <td class="title font-weight-light">
+            </template>
+            <template slot="items" slot-scope="{ item }">
+              <td class="headline font-weight-light WM-NoLetterSpacing">{{ item.name }}</td>
+              <td class="title font-weight-light">
                                 <span class="Chip">
                                     <span class="Count Content">{{ item.messages_count }} count</span>
                                 </span>
-                            </td>
-                            <td class="title font-weight-light">
+              </td>
+              <td class="title font-weight-light">
                                 <span class="Chip">
                                     <span class="Unread Content">{{ item.unread_messages_count }} unread</span>
                                 </span>
-                            </td>
-                            <td class="text-xs-left FlexBtn justify-self-end">
-                                <v-tooltip bottom open-on-hover>
-                                <template v-slot:activator="{ on, attrs }">
-                                <v-btn
-                                    color="cyan"
-                                    @click="showmessages(item.id)"
-                                    class="WM-ActionButton"
-                                    v-bind="attrs"
-                                    v-on="on"
-                                >
-                                    <v-icon class="white--text mr-2 caption">fas fa-eye</v-icon>
-                                    <span>Show Message</span>
-                                </v-btn>
-                                </template>
-                                <span>Show Message</span>
-                                </v-tooltip>
-                                <v-tooltip bottom open-on-hover>
-                                <template v-slot:activator="{ on, attrs }">
-                                <v-btn
-                                    color="pink"
-                                    @click="remove(item.id)"
-                                    class="WM-ActionButton"
-                                    v-bind="attrs"
-                                    v-on="on"
-                                >
-                                    <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
-                                    <span>delete</span>
-                                </v-btn>
-                                </template>
-                                <span>delete</span>
-                                </v-tooltip>
-                            </td>
-                        </template>
-                    </v-data-table>
-                </v-flex>
-            </v-layout>
-            <v-divider></v-divider>
-            <div class="text-xs-center" v-if="lastPage > 1">
-                <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
-            </div>
-            <v-layout row wrap align-center justify-center class="mt-3">
-                <router-link :to="{name: 'Dashboard'}">
-                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
-                        <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
-                        <span class="black--text">Back</span>
+              </td>
+              <td class="text-xs-left FlexBtn justify-self-end">
+                <v-tooltip bottom open-on-hover>
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-btn
+                        class="WM-ActionButton"
+                        color="cyan"
+                        v-bind="attrs"
+                        @click="showmessages(item.id)"
+                        v-on="on">
+                      <v-icon class="white--text mr-2 caption">fas fa-eye</v-icon>
+                      <span>Show Message</span>
                     </v-btn>
-                </router-link>
-            </v-layout>
-        </material-card>
-    </v-container>
+                  </template>
+                  <span>Show Message</span>
+                </v-tooltip>
+                <v-tooltip bottom open-on-hover>
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-btn
+                        class="WM-ActionButton"
+                        color="pink"
+                        v-bind="attrs"
+                        @click="remove(item.id)"
+                        v-on="on">
+                      <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
+                      <span>delete</span>
+                    </v-btn>
+                  </template>
+                  <span>delete</span>
+                </v-tooltip>
+              </td>
+            </template>
+          </v-data-table>
+        </v-flex>
+      </v-layout>
+      <v-divider/>
+      <div v-if="lastPage > 1" class="text-xs-center">
+        <v-pagination v-model="currentPage" :length="lastPage" :total-visible="6" color="black"></v-pagination>
+      </div>
+      <v-layout align-center class="mt-3" justify-center row wrap>
+        <router-link :to="{name: 'Dashboard'}">
+          <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
+            <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+            <span class="black--text">Back</span>
+          </v-btn>
+        </router-link>
+      </v-layout>
+    </material-card>
+  </v-container>
 </template>
 
 <script>
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
-import { mapMutations, mapGetters } from "vuex";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+import {mapMutations, mapGetters} from "vuex";
+
 export default {
-    data: () => ({
-        headers: [
-            {
-                sortable: false,
-                text: "Name",
-                value: "name"
-            },
-            {
-                sortable: false,
-                text: "Count Messages",
-                value: "operator"
-            },
-            {
-                sortable: false,
-                text: "Unread Message",
-                value: "operator"
-            },
-            {
-                sortable: false,
-                text: "Action",
-                value: "action",
-                align: "left",
-            }
-        ],
-        filter: {
-            name: ""
-        },
-        items: [],
-        refresh: "",
-        currentPage: 1,
-        lastPage: 1
-    }),
-    created() {
-        this.load();
+  data: () => ({
+    headers: [
+      {sortable: false, text: "Name", value: "name"},
+      {sortable: false, text: "Count Messages", value: "operator"},
+      {sortable: false, text: "Unread Message", value: "operator"},
+      {sortable: false, text: "Action", value: "action", align: "left",}
+    ],
+    filter: {
+      name: ""
     },
-    methods: {
-        async load(page = 1) {
-            const result = await ApiService.get(urls.listMessages(page));
-            if (result && result.data.data) {
-                this.items = result.data.data.data;
-                this.currentPage = result.data.data.current_page;
-                this.lastPage = result.data.data.last_page;
-            }
-        },
-        ...mapMutations("modal", ["changeCurrentModal"]),
-        newmessage() {
-            this.changeCurrentModal({ modal: "modal-ticket-new-message" });
-        },
-        showmessages(user_id) {
-            this.changeCurrentModal({
-                modal: "modal-ticket-show-messages",
-                properties: { user_id: user_id }
-            });
-        },
-        async remove(user_id) {
-            const result = await ApiService.delete(
-                urls.removeUserMessage(user_id)
-            );
-            if (result && result.status == 200) {
-                for (const key in this.items) {
-                    if (
-                        this.items.hasOwnProperty(key) &&
-                        this.items[key].id == user_id
-                    ) {
-                        this.items.splice(key, 1);
-                    }
-                }
-            }
-        }
+    items: [],
+    refresh: "",
+    currentPage: 1,
+    lastPage: 1
+  }),
+  created() {
+    this.load();
+  },
+  methods: {
+    async load(page = 1) {
+      const result = await ApiService.get(urls.listMessages(page));
+      if (result && result.data.data) {
+        this.items = result.data.data.data;
+        this.currentPage = result.data.data.current_page;
+        this.lastPage = result.data.data.last_page;
+      }
     },
-    computed: {
-        ...mapGetters("modal", ["getModalResult"])
+    ...mapMutations("modal", ["changeCurrentModal"]),
+    newmessage() {
+      this.changeCurrentModal({modal: "modal-ticket-new-message"});
     },
-    watch: {
-        currentPage(page) {
-            this.load(page);
-        },
-        getModalResult() {
-            this.load();
+    showmessages(user_id) {
+      this.changeCurrentModal({
+        modal: "modal-ticket-show-messages",
+        properties: {user_id: user_id}
+      });
+    },
+    async remove(user_id) {
+      const result = await ApiService.delete(
+          urls.removeUserMessage(user_id)
+      );
+      if (result && result.status == 200) {
+        for (const key in this.items) {
+          if (
+              this.items.hasOwnProperty(key) &&
+              this.items[key].id == user_id
+          ) {
+            this.items.splice(key, 1);
+          }
         }
+      }
     }
+  },
+  computed: {
+    ...mapGetters("modal", ["getModalResult"])
+  },
+  watch: {
+    currentPage(page) {
+      this.load(page);
+    },
+    getModalResult() {
+      this.load();
+    }
+  }
 };
 </script>
 
 <style lang="css" scoped>
 .WM-ActionButton {
-    padding: 8px 22px;
+  padding: 8px 22px;
 }
+
 .Chip {
-    align-items: center;
-    border-radius: 28px;
-    display: inline-flex;
-    font-size: 13px;
-    margin: 4px;
-    outline: none;
-    position: relative;
-    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-    vertical-align: middle;
-    height: 24px;
-    color: #000;
+  align-items: center;
+  border-radius: 28px;
+  display: inline-flex;
+  font-size: 13px;
+  margin: 4px;
+  outline: none;
+  position: relative;
+  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+  vertical-align: middle;
+  height: 24px;
+  color: #000;
 }
+
 .Chip .Content {
-    align-items: center;
-    border-radius: 24px;
-    cursor: default;
-    display: inline-flex;
-    height: 32px;
-    justify-content: space-between;
-    padding: 0 12px;
-    vertical-align: middle;
-    white-space: nowrap;
-    z-index: 1;
+  align-items: center;
+  border-radius: 24px;
+  cursor: default;
+  display: inline-flex;
+  height: 32px;
+  justify-content: space-between;
+  padding: 0 12px;
+  vertical-align: middle;
+  white-space: nowrap;
+  z-index: 1;
 }
+
 .Chip .Content.Count {
-    background-color: #b2dfdb;
+  background-color: #b2dfdb;
 }
+
 .Chip .Content.Unread {
-    background-color: #ffcdd2;
+  background-color: #ffcdd2;
 }
 </style>