From 3610d97cec511f425ef237214358bce3c30e42d4 Mon Sep 17 00:00:00 2001
From: "zeinab.ashrafi" <ashrafisokout@gmail.com>
Date: Sat, 17 May 2025 14:26:47 +0330
Subject: [PATCH] fix : title page test result

---
 src/components/core/Modal.vue   |   2 +-
 src/components/core/Toolbar.vue |   3 +-
 src/router/paths.js             |   2 +-
 src/views/TestResult/List.vue   | 666 +++++++++++++++-----------------
 4 files changed, 320 insertions(+), 353 deletions(-)

diff --git a/src/components/core/Modal.vue b/src/components/core/Modal.vue
index 2df3102..f332005 100644
--- a/src/components/core/Modal.vue
+++ b/src/components/core/Modal.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <modal-base :show="getCurrentModal" :width="getModalProperties.width ? getModalProperties.width + '%': '70%'" @close="closeModal">
-            <component :is="getCurrentModal" v-bind="getModalProperties"></component>
+            <component :is="getCurrentModal" v-bind="getModalProperties"/>
         </modal-base>
     </div>
 </template>
diff --git a/src/components/core/Toolbar.vue b/src/components/core/Toolbar.vue
index 75a5054..38cc48e 100644
--- a/src/components/core/Toolbar.vue
+++ b/src/components/core/Toolbar.vue
@@ -95,7 +95,8 @@ export default {
     watch: {
         '$route'(val) {
             // this.title = val.name
-            this.title = val.name.replace(/([A-Z])/g, ' $1').trim() !== 'Dashboard' ? val.name.replace(/([A-Z])/g, ' $1').trim() : 'home'
+            // this.title = val.name.replace(/([A-Z])/g, ' $1').trim() !== 'Dashboard' ? val.name.replace(/([A-Z])/g, ' $1').trim() : 'home'
+            this.title = val.meta.title.split('|')[0].trim();
         }
     },
 
diff --git a/src/router/paths.js b/src/router/paths.js
index e4331e2..f5f357c 100644
--- a/src/router/paths.js
+++ b/src/router/paths.js
@@ -169,7 +169,7 @@ export default [
         name: 'NotVerifyTestResult',
         view: 'TestResult/List',
         meta: {
-            title: 'Verify Test Resul | CSSD Dashboard'
+            title: 'Verify Test Result | CSSD Dashboard'
         }
     },
     {
diff --git a/src/views/TestResult/List.vue b/src/views/TestResult/List.vue
index 57a1f5e..cac9133 100644
--- a/src/views/TestResult/List.vue
+++ b/src/views/TestResult/List.vue
@@ -1,399 +1,365 @@
 <template>
-    <div class>
-        <v-container fluid>
-            <material-card class color="black" title="All Test Result" text>
-                <v-layout align-center wrap class="px-3">
-                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
-                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
-                        <v-text-field class="pt-3 pr-3" v-model="filter.device_id" label="ID"
-                                      color="black"/>
-                    </v-flex>
-                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
-                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
-                        <v-autocomplete :items="deviceLabels" item-text="name" item-value="id"
-                                        v-model="filter.device_label" label="ID Label" color="black" class="pt-3 pr-3"
-                                        :clearable="true"/>
-                    </v-flex>
-                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
-                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
-                        <v-autocomplete class="pt-3 pr-3" v-model="filter.testType_id" label="TestType Name"
-                                        color="black" :items="testTypes" item-text="name" item-value="id"/>
-                    </v-flex>
-                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
-                        <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
-                        <v-autocomplete class="pt-3 pr-3" v-model="filter.medicalCenter_id" label="Hospital"
-                                        color="black" :items="medicalCenters" item-text="name" item-value="id"
-                                        :clearable="true"/>
-                    </v-flex>
-                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
-                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
-                        <v-text-field class="pt-3 pr-3" v-model="filter.user_name" label="User Name"
-                                      color="black"/>
-                    </v-flex>
-                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
-                        <v-icon class="far fa-calendar-alt mr-2"/>
-                        <v-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition"
-                                offset-y
-                                v-model="fromMenu" style="width: 100%">
-                            <v-text-field class="pt-3 pr-3" required slot="activator" label="FromDate"
-                                          v-model="filter.fromPicker" color="black"/>
-                            <v-date-picker color="pink" no-title v-model="filter.fromPicker"
-                                           :date-format="date => new Date(date).toDateString()"/>
-                        </v-menu>
-                    </v-flex>
-                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter" style="display: flex;align-items: center;">
-                        <v-icon class="far fa-calendar-alt mr-2"/>
-                        <v-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition"
-                                offset-y
-                                v-model="upToMenu" style="width: 100%">
-                            <v-text-field class="pt-3 pr-3" required slot="activator" label="UpToDate" color="black"
-                                          v-model="filter.upToPicker"/>
-                            <v-date-picker color="pink" no-title v-model="filter.upToPicker"
-                                           :date-format="date => new Date(date).toDateString()"/>
-                        </v-menu>
-                    </v-flex>
-                    <v-spacer/>
-                    <v-flex xs12 sm6 md6 lg12 xl3 class="WM-Align-R">
-                        <v-tooltip bottom open-on-hover>
-                            <template v-slot:activator="{ on, attrs }">
-                                <v-btn v-bind="attrs" v-on="on"
-                                       color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2"
-                                       @click="load(null, null)">
-                                    <v-icon class="black--text caption">fas fa-search</v-icon>
-                                </v-btn>
-                            </template>
-                            <span>Filter</span>
-                        </v-tooltip>
+  <v-container fluid>
+    <material-card class color="black" title="All Test Result" text>
+      <v-layout align-center wrap class="px-3">
+        <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
+          <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
+          <v-text-field class="pt-3 pr-3" v-model="filter.device_id" label="ID"
+                        color="black"/>
+        </v-flex>
+        <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
+          <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
+          <v-autocomplete :items="deviceLabels" item-text="name" item-value="id"
+                          v-model="filter.device_label" label="ID Label" color="black" class="pt-3 pr-3"
+                          :clearable="true"/>
+        </v-flex>
+        <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
+          <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
+          <v-autocomplete class="pt-3 pr-3" v-model="filter.testType_id" label="TestType Name"
+                          color="black" :items="testTypes" item-text="name" item-value="id"/>
+        </v-flex>
+        <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
+          <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
+          <v-autocomplete class="pt-3 pr-3" v-model="filter.medicalCenter_id" label="Hospital"
+                          color="black" :items="medicalCenters" item-text="name" item-value="id"
+                          :clearable="true"/>
+        </v-flex>
+        <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
+          <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
+          <v-text-field class="pt-3 pr-3" v-model="filter.user_name" label="User Name"
+                        color="black"/>
+        </v-flex>
+        <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
+          <v-icon class="far fa-calendar-alt mr-2"/>
+          <v-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition"
+                  offset-y
+                  v-model="fromMenu" style="width: 100%">
+            <v-text-field class="pt-3 pr-3" required slot="activator" label="FromDate"
+                          v-model="filter.fromPicker" color="black"/>
+            <v-date-picker color="pink" no-title v-model="filter.fromPicker"
+                           :date-format="date => new Date(date).toDateString()"/>
+          </v-menu>
+        </v-flex>
+        <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter" style="display: flex;align-items: center;">
+          <v-icon class="far fa-calendar-alt mr-2"/>
+          <v-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition"
+                  offset-y
+                  v-model="upToMenu" style="width: 100%">
+            <v-text-field class="pt-3 pr-3" required slot="activator" label="UpToDate" color="black"
+                          v-model="filter.upToPicker"/>
+            <v-date-picker color="pink" no-title v-model="filter.upToPicker"
+                           :date-format="date => new Date(date).toDateString()"/>
+          </v-menu>
+        </v-flex>
+        <v-spacer/>
+        <v-flex xs12 sm6 md6 lg12 xl3 class="WM-Align-R">
+          <v-tooltip bottom open-on-hover>
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn v-bind="attrs" v-on="on"
+                     color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2"
+                     @click="load(null, null)">
+                <v-icon class="black--text caption">fas fa-search</v-icon>
+              </v-btn>
+            </template>
+            <span>Filter</span>
+          </v-tooltip>
 
-                        <router-link :to="{ name: 'SubmitTestResult' }">
-                            <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
-                                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
-                                <span class="white--text">Add</span>
-                            </v-btn>
-                        </router-link>
-                    </v-flex>
-                </v-layout>
-                <v-layout class="px-3 my-3">
-                    <v-divider/>
-                </v-layout>
-                <v-layout align-center wrap class="px-3 my-2">
-                    <v-flex md12>
-                        <v-data-table :headers="headers" :items="items" hide-actions>
-                            <template slot="headerCell" slot-scope="{ header }">
+          <router-link :to="{ name: 'SubmitTestResult' }">
+            <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
+              <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+              <span class="white--text">Add</span>
+            </v-btn>
+          </router-link>
+        </v-flex>
+      </v-layout>
+      <v-layout class="px-3 my-3">
+        <v-divider/>
+      </v-layout>
+      <v-layout align-center wrap class="px-3 my-2">
+        <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"
                                       style="border-radius: 5px;"
                                       v-text="header.text"/>
-                            </template>
-                            <template slot="items" slot-scope="{ item }">
-                                <td class="title font-weight-light">{{ item.id }}</td>
-                                <td class="title font-weight-light">
-                                    {{ item.test_type ? item.test_type.name : 'Archived Test' }}
-                                </td>
-                                <td class="title font-weight-light">{{ item.user.medical_center.name }}</td>
-                                <td class="title font-weight-light">{{ item.user.name }}</td>
-                                <td class="title font-weight-light">
+            </template>
+            <template slot="items" slot-scope="{ item }">
+              <td class="title font-weight-light">{{ item.id }}</td>
+              <td class="title font-weight-light">
+                {{ item.test_type ? item.test_type.name : 'Archived Test' }}
+              </td>
+              <td class="title font-weight-light">{{ item.user.medical_center.name }}</td>
+              <td class="title font-weight-light">{{ item.user.name }}</td>
+              <td class="title font-weight-light">
                                     <span v-if="item.result == 'Reject'" class="ResultMsg Reject">
                                         {{ item.result }}
                                     </span>
-                                    <span v-else-if="item.result == 'Accept'" class="ResultMsg Accept">
+                <span v-else-if="item.result == 'Accept'" class="ResultMsg Accept">
                                         {{ item.result }}
                                     </span>
-                                </td>
-                                <td class="headline font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
-                                <td class="title font-weight-light text-center">
+              </td>
+              <td class="headline font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
+              <td class="title font-weight-light text-center">
                                     <span v-if="item.verified == 'NotVerified'" class="NotVerified">
                                         <v-icon class="caption fa fa-times NotVerified"/>
                                     </span>
-                                    <span v-if="item.verified == 'Verified'" class="">
+                <span v-if="item.verified == 'Verified'" class="">
                                         <v-icon class="caption fa fa-check Verified"/>
                                     </span>
-                                    <!-- {{ item.verified }} -->
-                                </td>
-                                <td class="text-xs-right FlexBtn justify-self-end">
-                                    <v-tooltip bottom open-on-hover>
-                                        <template v-slot:activator="{ on, attrs }">
-                                            <v-btn color="light-gray" class="mr-2" @click="show(item.id)" v-bind="attrs"
-                                                   v-on="on">
-                                                <v-icon class="black--text mr-1 caption">fas fa-eye</v-icon>
-                                                <span>Show</span>
-                                            </v-btn>
-                                        </template>
-                                        <span>Show</span>
-                                    </v-tooltip>
-                                    <v-tooltip bottom open-on-hover>
-                                        <template v-slot:activator="{ on, attrs }">
-                                            <v-btn color="light-gray" class="mr-2"
-                                                   @click="generateBarcode(item.id, 'TestResult')" v-bind="attrs"
-                                                   v-on="on">
-                                                <v-icon class="black--text mr-1 caption">fa fa-bars</v-icon>
-                                                <span>generate Barcode</span>
-                                            </v-btn>
-                                        </template>
-                                        <span>generate Barcode</span>
-                                    </v-tooltip>
-                                    <v-tooltip bottom open-on-hover>
-                                        <template v-slot:activator="{ on, attrs }">
-                                            <!-- v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" -->
-                                            <router-link class="LinkBtn"
-                                                         v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')"
-                                                         :to="{ name: 'EditTestResult', params: { testResult: item.id } }">
-                                                <v-btn color="black" class="mr-2" v-bind="attrs" v-on="on">
-                                                    <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
-                                                    <span>Edit</span>
-                                                </v-btn>
-                                            </router-link>
-                                        </template>
-                                        <span>Edit</span>
-                                    </v-tooltip>
-                                    <v-tooltip bottom open-on-hover>
-                                        <template v-slot:activator="{ on, attrs }">
-                                            <!-- v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" -->
-                                            <v-btn color="red" class="WM-ActionButton" @click="removeModal(item.id)"
-                                                   v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')"
-                                                   v-bind="attrs" v-on="on">
-                                                <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
-                                                <span>Remove</span>
-                                            </v-btn>
-                                        </template>
-                                        <span>Remove</span>
-                                    </v-tooltip>
-                                </td>
-                            </template>
-                        </v-data-table>
-                    </v-flex>
-                </v-layout>
-                <v-divider/>
-                <div class="text-xs-center mt-2" v-if="lastPage > 1">
-                    <v-pagination color="black" v-model="currentPage" :length="lastPage"
-                                  :total-visible="6"/>
-                </div>
-                <v-layout row wrap align-center justify-center class="px-3">
-                    <router-link to="/dashboard">
-                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-                            <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
-                            <span class="black--text">Back</span>
-                        </v-btn>
+                <!-- {{ item.verified }} -->
+              </td>
+              <td class="text-xs-right FlexBtn justify-self-end">
+                <v-tooltip bottom open-on-hover>
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-btn color="light-gray" class="mr-2" @click="show(item.id)" v-bind="attrs"
+                           v-on="on">
+                      <v-icon class="black--text mr-1 caption">fas fa-eye</v-icon>
+                      <span>Show</span>
+                    </v-btn>
+                  </template>
+                  <span>Show</span>
+                </v-tooltip>
+                <v-tooltip bottom open-on-hover>
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-btn color="light-gray" class="mr-2"
+                           @click="generateBarcode(item.id, 'TestResult')" v-bind="attrs"
+                           v-on="on">
+                      <v-icon class="black--text mr-1 caption">fa fa-bars</v-icon>
+                      <span>generate Barcode</span>
+                    </v-btn>
+                  </template>
+                  <span>generate Barcode</span>
+                </v-tooltip>
+                <v-tooltip bottom open-on-hover>
+                  <template v-slot:activator="{ on, attrs }">
+                    <!-- v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" -->
+                    <router-link class="LinkBtn"
+                                 v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')"
+                                 :to="{ name: 'EditTestResult', params: { testResult: item.id } }">
+                      <v-btn color="black" class="mr-2" v-bind="attrs" v-on="on">
+                        <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
+                        <span>Edit</span>
+                      </v-btn>
                     </router-link>
-                    <v-spacer/>
-                </v-layout>
-            </material-card>
-        </v-container>
-    </div>
+                  </template>
+                  <span>Edit</span>
+                </v-tooltip>
+                <v-tooltip bottom open-on-hover>
+                  <template v-slot:activator="{ on, attrs }">
+                    <!-- v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" -->
+                    <v-btn color="red" class="WM-ActionButton" @click="removeModal(item.id)"
+                           v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')"
+                           v-bind="attrs" v-on="on">
+                      <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
+                      <span>Remove</span>
+                    </v-btn>
+                  </template>
+                  <span>Remove</span>
+                </v-tooltip>
+              </td>
+            </template>
+          </v-data-table>
+        </v-flex>
+      </v-layout>
+      <v-divider/>
+      <div class="text-xs-center mt-2" v-if="lastPage > 1">
+        <v-pagination color="black" v-model="currentPage" :length="lastPage"
+                      :total-visible="6"/>
+      </div>
+      <v-layout row wrap align-center justify-center class="px-3">
+        <router-link to="/dashboard">
+          <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+            <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-spacer/>
+      </v-layout>
+    </material-card>
+  </v-container>
 </template>
 
 <script>
 import {
-    ApiService
+  ApiService
 } from "@/services";
 import {
-    urls
+  urls
 } from "@/config/urls";
 import {
-    mapMutations,
-    mapGetters
+  mapMutations,
+  mapGetters
 } from "vuex";
 
 export default {
-    metaInfo() {
-        return {
-            title: this.$route.meta.title,
-            meta: this.$route.meta.metaTags || []
-        }
-    },
-    data: () => ({
-        headers: [
-            {sortable: false, text: "ID", value: "name"},
-            {sortable: false, text: "Test Type", value: "TestType"},
-            {sortable: false, text: "Hospital", value: "Hospital"},
-            {sortable: false, text: "User", value: "Users"},
-            {sortable: false, text: "Result", value: "result", width: '5%'},
-            {sortable: false, text: "Date", value: "date"},
-            {sortable: false, text: "Verify", value: "verify", width: '5%'},
-            {sortable: false, text: "Action", value: "action", align: "center",}
-        ],
-        filter: {
-            device_id: '',
-            testType_id: '',
-            medicalCenter_id: '',
-            user_name: '',
-            fromPicker: '',
-            upToPicker: '',
-            device_label: ''
-        },
-        fromMenu: '',
-        upToMenu: '',
-        items: [],
-        currentPage: 1,
-        lastPage: 1,
-        testTypes: [],
-        medicalCenters: [],
-        deviceLabels: [
-            {name: "Washer ID", id: "Washer ID"},
-            {name: "Autoclave ID", id: "Autoclave ID"},
-            {name: "Sterilizer ID", id: "Sterilizer ID"},
-            {name: "Seal Machine ID", id: "Seal Machine ID"},
-            {name: "Patiant ID", id: "Patiant ID"},
-            {name: "Set/Pack ID", id: "Set/Pack ID"},
-            {name: "Medical Device ID", id: "Medical Device ID"},
-            {name: "OR ID", id: "OR ID"},
-            {name: "Personal ID", id: "Personal ID"},
-            {name: "Instrument ID", id: "Instrument ID"},
-            {name: "Basket ID", id: "Basket ID"},
-            {name: "Implant ID", id: "Implant ID"},
-        ]
-    }),
-    created() {
-        this.fillSelectFilter();
-        if (this.$route.name == "NotVerifyTestResult") {
-            this.load(1, "NotVerified");
-        } else {
-            this.load();
-        }
-    },
-    methods: {
-        ...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
-        async load(page = 1, verified = null) {
-            let filter = '?';
-            for (const key in this.filter) {
-                if (this.filter.hasOwnProperty(key)) {
-                    filter += `${key}=${this.filter[key]}&`;
-                }
-            }
-            if (verified) {
-                filter += `verified=${verified}&`;
-            }
-            filter += (page) ? `page=${page}` : `page=1`;
-            const result = await ApiService.get(urls.listTestResult(filter));
-            if (result && result.status == 200) {
-                const {data, meta} = result.data;
-                this.items = data;
-                this.currentPage = meta.current_page;
-                this.lastPage = meta.last_page;
-            }
-        },
-        async show(id) {
-            const result = await ApiService.get(urls.showTestResult(id));
-            if (result && result.status == 200) {
-                this.changeCurrentModal({
-                    modal: "modal-testresult-show",
-                    properties: {
-                        result
-                    }
-                });
-            }
-        },
-        removeModal(id) {
-            this.changeCurrentModal({
-                modal: "modal-user-confirmation",
-                properties: {width: '30'},
-                success: async () => {
-                    const result = await ApiService.delete(urls.removeTestResult(id));
-                    if (result && result.status == 200) {
-                        for (const key in this.items) {
-                            if (this.items.hasOwnProperty(key) && this.items[key].id == id) {
-                                this.items.splice(key, 1);
-                            }
-                        }
-                    }
-                    this.closeModal();
-                },
-            });
-        },
-        async fillSelectFilter() {
-            const result = await ApiService.get(urls.listFilterItemsTestResult);
-            if (result && result.status == 200) {
-                this.medicalCenters = result.data.data.MedicalCenters;
-                this.testTypes = result.data.data.TestTypes;
-            }
-        },
-        async generateBarcode(id, type) {
-            const result = await ApiService.post(urls.Barcode(id, type));
-            if (result && result.status == 200) {
-                this.changeCurrentModal({
-                    modal: "modal-barcode-barcode",
-                    properties: {
-                        result
-                    }
-                });
-            }
-        }
-    },
-    computed: {
-        ...mapGetters("modal", ["getModalResult"])
-    },
-    watch: {
-        currentPage(page) {
-            if (this.$route.name == "NotVerifyTestResult") {
-                this.load(page, "NotVerified,None");
-            } else {
-                this.load(page);
-            }
-
-        },
-        getModalResult(testResult) {
-            for (const key in this.items) {
-                if (this.items.hasOwnProperty(key) && this.items[key].id == testResult.id) {
-                    this.items[key].verified = testResult.verified;
-                }
-            }
-        }
+  metaInfo() {
+    return {
+      title: this.$route.meta.title,
+      meta: this.$route.meta.metaTags || []
     }
+  },
+  data: () => ({
+    headers: [
+      {sortable: false, text: "ID", value: "name"},
+      {sortable: false, text: "Test Type", value: "TestType"},
+      {sortable: false, text: "Hospital", value: "Hospital"},
+      {sortable: false, text: "User", value: "Users"},
+      {sortable: false, text: "Result", value: "result", width: '5%'},
+      {sortable: false, text: "Date", value: "date"},
+      {sortable: false, text: "Verify", value: "verify", width: '5%'},
+      {sortable: false, text: "Action", value: "action", align: "center",}
+    ],
+    filter: {
+      device_id: '',
+      testType_id: '',
+      medicalCenter_id: '',
+      user_name: '',
+      fromPicker: '',
+      upToPicker: '',
+      device_label: ''
+    },
+    fromMenu: '',
+    upToMenu: '',
+    items: [],
+    currentPage: 1,
+    lastPage: 1,
+    testTypes: [],
+    medicalCenters: [],
+    deviceLabels: [
+      {name: "Washer ID", id: "Washer ID"},
+      {name: "Autoclave ID", id: "Autoclave ID"},
+      {name: "Sterilizer ID", id: "Sterilizer ID"},
+      {name: "Seal Machine ID", id: "Seal Machine ID"},
+      {name: "Patiant ID", id: "Patiant ID"},
+      {name: "Set/Pack ID", id: "Set/Pack ID"},
+      {name: "Medical Device ID", id: "Medical Device ID"},
+      {name: "OR ID", id: "OR ID"},
+      {name: "Personal ID", id: "Personal ID"},
+      {name: "Instrument ID", id: "Instrument ID"},
+      {name: "Basket ID", id: "Basket ID"},
+      {name: "Implant ID", id: "Implant ID"},
+    ]
+  }),
+  created() {
+    this.fillSelectFilter();
+    if (this.$route.name == "NotVerifyTestResult") {
+      this.load(1, "NotVerified");
+    } else {
+      this.load();
+    }
+  },
+  methods: {
+    ...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
+    async load(page = 1, verified = null) {
+      let filter = '?';
+      for (const key in this.filter) {
+        if (this.filter.hasOwnProperty(key)) {
+          filter += `${key}=${this.filter[key]}&`;
+        }
+      }
+      if (verified) {
+        filter += `verified=${verified}&`;
+      }
+      filter += (page) ? `page=${page}` : `page=1`;
+      const result = await ApiService.get(urls.listTestResult(filter));
+      if (result && result.status === 200) {
+        const {data, meta} = result.data;
+        this.items = data;
+        this.currentPage = meta.current_page;
+        this.lastPage = meta.last_page;
+      }
+    },
+    async show(id) {
+      const result = await ApiService.get(urls.showTestResult(id));
+      if (result && result.status === 200) {
+        this.changeCurrentModal({
+          modal: "modal-testresult-show",
+          properties: {
+            result
+          }
+        });
+      }
+    },
+    removeModal(id) {
+      this.changeCurrentModal({
+        modal: "modal-user-confirmation",
+        properties: {width: '30'},
+        success: async () => {
+          const result = await ApiService.delete(urls.removeTestResult(id));
+          if (result && result.status === 200) {
+            for (const key in this.items) {
+              if (this.items.hasOwnProperty(key) && this.items[key].id === id) {
+                this.items.splice(key, 1);
+              }
+            }
+          }
+          this.closeModal();
+        },
+      });
+    },
+    async fillSelectFilter() {
+      const result = await ApiService.get(urls.listFilterItemsTestResult);
+      if (result && result.status === 200) {
+        this.medicalCenters = result.data.data.MedicalCenters;
+        this.testTypes = result.data.data.TestTypes;
+      }
+    },
+    async generateBarcode(id, type) {
+      const result = await ApiService.post(urls.Barcode(id, type));
+      if (result && result.status === 200) {
+        this.changeCurrentModal({
+          modal: "modal-barcode-barcode",
+          properties: {
+            result
+          }
+        });
+      }
+    }
+  },
+  computed: {
+    ...mapGetters("modal", ["getModalResult"])
+  },
+  watch: {
+    currentPage(page) {
+      if (this.$route.name == "NotVerifyTestResult") {
+        this.load(page, "NotVerified,None");
+      } else {
+        this.load(page);
+      }
+
+    },
+    getModalResult(testResult) {
+      for (const key in this.items) {
+        if (this.items.hasOwnProperty(key) && this.items[key].id === testResult.id) {
+          this.items[key].verified = testResult.verified;
+        }
+      }
+    }
+  }
 };
 </script>
 
 <style>
 .v-btn--floating {
-    padding: 0 !important;
+  padding: 0 !important;
 }
 
 .theme--light.v-btn.v-btn--flat {
-    color: rgba(0, 0, 0, .87) !important;
+  color: rgba(0, 0, 0, .87) !important;
 }
 
 .v-btn--floating,
 .v-btn--icon:before {
-    border-radius: 50% !important;
+  border-radius: 50% !important;
 }
 
 /* --------------------------------------------------------
                         Tables :: Begin
 -------------------------------------------------------- */
 @media screen and (max-width: 1536px) {
-    .v-card .title {
-        font-size: 0.9rem !important;
-    }
+  .v-card .title {
+    font-size: 0.9rem !important;
+  }
 
 }
-
-/* .FlexBtn {
-    display: flex;
-    flex-wrap: nowrap;
-    padding: 10px 8px !important;
-}
-td.FlexBtn .theme--light.v-btn {
-    padding: 21px 20px;
-}
-td.FlexBtn a.LinkBtn .theme--light.v-btn  {
-    padding: 12px 10px;
-}
-@media screen and (max-width:1536px) {
-.FlexBtn {
-    padding: 30px 8px !important;
-}
-td.FlexBtn span {
-    display: none;
-}
-td.FlexBtn .theme--light.v-btn {
-    min-width: 30px;
-    padding: 15px 10px;
-    margin-right: 1 !important;
-
-}
-td.FlexBtn a.LinkBtn .theme--light.v-btn  {
-    padding: 9px 10px;
-}
-td.FlexBtn .theme--light.v-icon {
-    margin-right: 0 !important;
-}
-} */
 </style>