From 32e8bb910fa535bc49313476442e76ea88eb30bd Mon Sep 17 00:00:00 2001
From: "zeinab.ashrafi" <ashrafisokout@gmail.com>
Date: Mon, 21 Apr 2025 14:27:47 +0330
Subject: [PATCH] fix : update delete confirmation modal and test result style

---
 src/components/modal/delete/Delete.vue     | 57 ---------------------
 src/components/modal/testresult/Show.vue   | 51 ++++++++-----------
 src/components/modal/user/Confirmation.vue | 14 ++++--
 src/views/Cycle/List.vue                   | 31 ++++++------
 src/views/Item/List.vue                    | 31 ++++++------
 src/views/Label/List.vue                   | 30 +++++------
 src/views/MedicalCenter/List.vue           | 10 ----
 src/views/MyItem/List.vue                  | 31 ++++++------
 src/views/MyPackage/List.vue               | 31 ++++++------
 src/views/Package/List.vue                 | 33 ++++++------
 src/views/TestResult/AddEdit.vue           |  8 +--
 src/views/TestResult/List.vue              | 31 ++++++------
 src/views/User/List.vue                    | 58 +++++-----------------
 13 files changed, 149 insertions(+), 267 deletions(-)
 delete mode 100644 src/components/modal/delete/Delete.vue

diff --git a/src/components/modal/delete/Delete.vue b/src/components/modal/delete/Delete.vue
deleted file mode 100644
index 9ca3b90..0000000
--- a/src/components/modal/delete/Delete.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <v-container grid-list-xs>
-        <material-card color="black" :title="modalProps.title">
-            <v-layout id="printMe" align-left justify-left wrap class="px-3 my-3">
-                <div class="WM-Align-L">
-                    {{ modalProps.message }}
-                </div>
-            </v-layout>
-
-            <v-card-actions>
-                <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" @click="handleCancel">
-                    <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
-                    <span class="black--text">Close</span>
-                </v-btn>
-
-                <v-spacer/>
-
-                <v-btn class="WM-CyanBlueGradient-BG" @click="handleConfirm" style="padding: 10px 60px">
-                    <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
-                    <span class="white--text">Confirm</span>
-                </v-btn>
-            </v-card-actions>
-        </material-card>
-    </v-container>
-</template>
-
-<script>
-import {mapGetters, mapMutations} from "vuex";
-
-export default {
-    computed: {
-        ...mapGetters("modal", ["getModalProperties"]),
-        modalProps() {
-            return {
-                title: this.getModalProperties.title || "Confirm deletion",
-                message: this.getModalProperties.message ||
-                        "Are you sure you want to delete the item? \n There will be no way to undo it.",
-                onConfirm: this.getModalProperties.success || (() => {
-                }),
-                onCancel: this.getModalProperties.close || (() => {
-                })
-            };
-        }
-    },
-    methods: {
-        ...mapMutations("modal", ["closeModal"]),
-        async handleConfirm() {
-            await this.modalProps.onConfirm();
-            this.closeModal();
-        },
-        async handleCancel() {
-            await this.modalProps.onCancel();
-            this.closeModal();
-        }
-    }
-};
-</script>
diff --git a/src/components/modal/testresult/Show.vue b/src/components/modal/testresult/Show.vue
index e44539b..da283ba 100644
--- a/src/components/modal/testresult/Show.vue
+++ b/src/components/modal/testresult/Show.vue
@@ -15,55 +15,46 @@
                                 {{ data.device_id }}
                                 </span>
                     </v-flex> -->
-                    <v-flex xs12 sm12 md6 lg4 >
+                    <v-flex xs12 sm12 md6 lg4 class="py-1">
                         <span class="subtitle-1">ID :</span>
                         <span class="title font-weight-bold ml-1" style="letter-spacing:0 !important">
                             {{ data.id }}
                         </span>
                     </v-flex>
-                    <v-flex xs12 sm12 md6 lg4 >
+                    <v-flex xs12 sm12 md6 lg4 class="py-1">
                         <span class="subtitle-1">Result :</span>
-                        <span v-if="data.result == 'Reject'" class="NotVerified" style="vertical-align: text-bottom;">
-                                <v-icon class="caption fa fa-times NotVerified"/>
-                            </span>
-                        <span v-if="data.result == 'Accept'" class="">
-                                <v-icon class="caption fa fa-check Verified"/>
-                            </span>
+                        <v-icon size="20"
+                                :class="['caption fa ml-2', data.result == 'Reject'?'NotVerified':( data.result == 'Accept'?'Verified':'')]">
+                            {{ data.result == 'Reject' ? 'fa-times' : (data.result == 'Accept' ? 'fa-check':'') }}
+                        </v-icon>
                         <span class="title font-weight-bold ml-1" style="letter-spacing:0 !important">
                             {{ data.result }}
                         </span>
                     </v-flex>
-                    <v-flex xs12 sm12 md6 lg4 >
+                    <v-flex xs12 sm12 md6 lg4 class="py-1">
                         <span class="subtitle-1">verify :</span>
-                        <!-- <v-icon class="pink--text ml-2 caption">fas fa-times</v-icon> -->
-                        <!-- <span
-                            class="title font-weight-bold ml-1"
-                            style="letter-spacing:0 !important"
-                        >{{ data.verified }}</span> -->
-                        <span v-if="data.verified == 'NotVerified'" class="NotVerified">
-                                <v-icon class="caption fa fa-times NotVerified"/>
-                            </span>
-                        <span v-if="data.verified == 'Verified'" class="">
-                                <v-icon class="caption fa fa-check Verified"/>
-                            </span>
+                        <v-icon size="20"
+                                :class="['caption fa ml-2', data.verified == 'NotVerified'?'NotVerified':(data.verified == 'Verified'? 'Verified' : '')]">
+                            {{ data.verified == 'NotVerified' ? 'fa-times' :(data.verified == 'Verified' ? 'fa-check':'') }}
+                        </v-icon>
                         <span class="title font-weight-bold ml-1" style="letter-spacing:0 !important">
                             {{ data.verified }}
                         </span>
                     </v-flex>
-                    <v-flex xs12 sm12 md6 lg4 >
+                    <v-flex xs12 sm12 md6 lg4 class="py-1">
                         <span class="subtitle-1">Register User :</span>
                         <span class="title font-weight-bold ml-2"
                               style="letter-spacing:0 !important">
                                 {{ data.user.name }}
                             </span>
                     </v-flex>
-                    <v-flex xs12 sm12 md6 lg4 >
+                    <v-flex xs12 sm12 md6 lg4 class="py-1">
                         <span class="subtitle-1">Date :</span>
                         <span class="title font-weight-bold ml-2" style="letter-spacing:0 !important">
                                 {{ $d(new Date(data.created_at), 'long') }}
                             </span>
                     </v-flex>
-                    <v-flex xs12 sm12 md6 lg4 >
+                    <v-flex xs12 sm12 md6 lg4 class="py-1">
                         <span class="subtitle-1">Medical Center :</span>
                         <span class="title font-weight-bold ml-2" style="letter-spacing:0 !important">
                                 {{ data.user.medical_center.name }}
@@ -78,14 +69,14 @@
                 </v-flex>
                 <v-layout row wrap class="ml-4">
                     <template v-if="data.inputs">
-                        <v-flex xs3 md3 sm3 v-for="(inputData, keyInputs) in data.inputs" :key="keyInputs">
+                        <v-flex xs12 sm12 md6 lg4 class="py-1" v-for="(inputData, keyInputs) in data.inputs" :key="keyInputs">
                             <span class="subtitle-1">{{ keyInputs }} :</span>
                             <span class="title font-weight-bold ml-2"
                                   style="letter-spacing:0 !important">{{ inputData }}</span>
                         </v-flex>
                     </template>
                     <template v-if="data.options">
-                        <v-flex xs3 md3 sm3 v-for="(optionData, keyOptions) in data.options" :key="keyOptions">
+                        <v-flex xs12 sm12 md6 lg4 class="py-1" v-for="(optionData, keyOptions) in data.options" :key="keyOptions">
                             <span class="subtitle-1">{{ keyOptions }} :</span>
                             <span
                                     style="letter-spacing:0 !important"
@@ -130,13 +121,13 @@
                     <!-- <LightBox :media="data.images.map(img => ({thumb: img.path, src: img.path}))" style="width: 20%"></LightBox> -->
                     <v-flex xs6 md2 sm2 v-for="(file, key) in data.files" :key="key">
                         <template v-if="file.file_type == 'document'">
-                            <a target="_blank" :href="'/'+file.path">
+                            <a target="_blank" :href="'/'+file.thumbnail">
                                 <v-icon class="mr-2 caption">fas fa-check</v-icon>
                                 {{ file.file_name }}</a>
                         </template>
 
                         <template v-else>
-                            <img :src="'/'+file.path" style="width: 100%"/>
+                            <img :src="file.thumbnail" style="width: 100%"/>
                         </template>
                     </v-flex>
                 </v-layout>
@@ -151,12 +142,14 @@
                 </v-btn>
 
                 <v-spacer/>
-                <v-btn class="WM-CyanBlueGradient-BG"  v-if="data.verified == 'None' || (data.verified == 'NotVerified' && $hasRole('Admin'))"
+                <v-btn class="WM-CyanBlueGradient-BG"
+                       v-if="data.verified == 'None' || (data.verified == 'NotVerified' && $hasRole('Admin'))"
                        @click="verify(data.id, 'Verified')" style="padding:10px 60px">
                     <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
                     <span class="white--text">Verify</span>
                 </v-btn>
-                <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"  v-if="data.verified == 'None' || (data.verified == 'Verified' && $hasRole('Admin'))"
+                <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
+                       v-if="data.verified == 'None' || (data.verified == 'Verified' && $hasRole('Admin'))"
                        @click="verify(data.id, 'NotVerified')">
                     <v-icon class="black--text mr-2 caption">fas fa-check</v-icon>
                     <span class="black--text">UnVerify</span>
diff --git a/src/components/modal/user/Confirmation.vue b/src/components/modal/user/Confirmation.vue
index bebb7ad..34022be 100644
--- a/src/components/modal/user/Confirmation.vue
+++ b/src/components/modal/user/Confirmation.vue
@@ -2,7 +2,9 @@
     <v-form>
         <v-container grid-list-xs fluid>
             <material-card class color="black" title="Confirmation">
-                <div class="text-center"> Are you sure?</div>
+                <p class="text-center text-20"> Are you sure?</p>
+                <p class="text-center text-12">There will be no way to undo it.</p>
+
                 <v-layout row wrap>
                     <v-layout align-center justify-center wrap class="px-5 mt-2">
                         <v-flex xs12 sm6 md6 class="text-center">
@@ -12,8 +14,8 @@
                             </v-btn>
                         </v-flex>
                         <v-flex xs12 sm6 md6 class="text-center">
-                            <v-btn @click="changeRole" class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
-                                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                            <v-btn @click="changeRole" class="WM-RedGradient-BG" style="padding:10px 60px">
+                                <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
                                 <span class="white--text">Confirm</span>
                             </v-btn>
                         </v-flex>
@@ -42,4 +44,10 @@ export default {
 .text-center {
     text-align: center;
 }
+.text-20{
+    font-size: 20px !important;
+}
+.text-12{
+    font-size: 12px !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/Cycle/List.vue b/src/views/Cycle/List.vue
index 00a77af..9f9ec73 100644
--- a/src/views/Cycle/List.vue
+++ b/src/views/Cycle/List.vue
@@ -176,7 +176,7 @@ export default {
         this.load();
     },
     methods: {
-        ...mapMutations("modal", ["changeCurrentModal"]),
+        ...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
         async load(page = 1) {
             let filter = '?';
             for (const key in this.filter) {
@@ -216,23 +216,20 @@ export default {
         },
         removeModal(id) {
             this.changeCurrentModal({
-                modal: "modal-delete-delete",
-                properties: {
-                    success: () => {
-                        this.remove(id);
-                    },
-                }
-            });
-        },
-        async remove(id) {
-            const result = await ApiService.delete(urls.removeCycle(id));
-            if (result && result.status == 200) {
-                for (const key in this.packages) {
-                    if (this.packages.hasOwnProperty(key) && this.packages[key].id == id) {
-                        this.packages.splice(key, 1);
+                modal: "modal-user-confirmation",
+                properties: {width: '30'},
+                success: async () => {
+                    const result = await ApiService.delete(urls.removeCycle(id));
+                    if (result && result.status == 200) {
+                        for (const key in this.packages) {
+                            if (this.packages.hasOwnProperty(key) && this.packages[key].id == id) {
+                                this.packages.splice(key, 1);
+                            }
+                        }
                     }
-                }
-            }
+                    this.closeModal();
+                },
+            });
         },
         async loadMedicalCenters() {
             const result = await ApiService.get(urls.listFilterItemsTestResult);
diff --git a/src/views/Item/List.vue b/src/views/Item/List.vue
index 61df1c4..9c4f921 100644
--- a/src/views/Item/List.vue
+++ b/src/views/Item/List.vue
@@ -191,7 +191,7 @@ export default {
         this.load();
     },
     methods: {
-        ...mapMutations("modal", ["changeCurrentModal"]),
+        ...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
         async load(page = 1) {
             let filter = '?';
             for (const key in this.filter) {
@@ -228,23 +228,20 @@ export default {
         },
         removeModal(id) {
             this.changeCurrentModal({
-                modal: "modal-delete-delete",
-                properties: {
-                    success: () => {
-                        this.remove(id);
-                    },
-                }
-            });
-        },
-        async remove(id) {
-            const result = await ApiService.delete(urls.removeItem(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);
+                modal: "modal-user-confirmation",
+                properties: {width: '30'},
+                success: async () => {
+                    const result = await ApiService.delete(urls.removeItem(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 loadMedicalCenters() {
             const result = await ApiService.get(urls.listFilterItemsTestResult);
diff --git a/src/views/Label/List.vue b/src/views/Label/List.vue
index 72dd69a..f645327 100644
--- a/src/views/Label/List.vue
+++ b/src/views/Label/List.vue
@@ -174,7 +174,7 @@ export default {
         this.load();
     },
     methods: {
-        ...mapMutations("modal", ["changeCurrentModal"]),
+        ...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
         async load(page = 1) {
             let filter = "?";
             for (const key in this.filter) {
@@ -215,23 +215,23 @@ export default {
         },
         removeModal(id) {
             this.changeCurrentModal({
-                modal: "modal-delete-delete",
-                properties: {
-                    success: () => {
-                        this.remove(id);
-                    },
-                }
+                modal: "modal-user-confirmation",
+                properties: {width: '30'},
+                success: async () => {
+                    const result = await ApiService.delete(urls.removeLabel(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 remove(id) {
-            const result = await ApiService.delete(urls.removeLabel(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);
-                    }
-                }
-            }
+
         },
         async generateBarcode(code, type) {
             const result = await ApiService.post(urls.Barcode(code, type));
diff --git a/src/views/MedicalCenter/List.vue b/src/views/MedicalCenter/List.vue
index b25f615..4bd4ed5 100644
--- a/src/views/MedicalCenter/List.vue
+++ b/src/views/MedicalCenter/List.vue
@@ -130,16 +130,6 @@ export default {
             this.lastPage = result.data.data.last_page;
         },
         removeModal(id) {
-            this.changeCurrentModal({
-                modal: "modal-delete-delete",
-                properties: {
-                    success: () => {
-                        this.remove(id);
-                    },
-                }
-            });
-        },
-        async remove(id) {
             this.changeCurrentModal({
                 modal: "modal-user-confirmation",
                 properties: {width: '30'},
diff --git a/src/views/MyItem/List.vue b/src/views/MyItem/List.vue
index 912f7d2..1310ddf 100644
--- a/src/views/MyItem/List.vue
+++ b/src/views/MyItem/List.vue
@@ -211,7 +211,7 @@ export default {
     },
     methods: {
         ...mapMutations('myItems', ["SET_FILTER"]),
-        ...mapMutations("modal", ["changeCurrentModal"]),
+        ...mapMutations("modal", ["changeCurrentModal",'closeModal']),
         ...mapActions('myItems', ['loadMyItem', 'removeItem', 'showItem', 'generateBarcode']),
         onFilterClick() {
             this.loadMyItem();
@@ -247,23 +247,20 @@ export default {
         },
         removeModal(id) {
             this.changeCurrentModal({
-                modal: "modal-delete-delete",
-                properties: {
-                    success: () => {
-                        this.remove(id);
-                    },
-                }
-            });
-        },
-        async remove(id) {
-            const result = await ApiService.delete(urls.removeItem(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);
+                modal: "modal-user-confirmation",
+                properties: {width: '30'},
+                success: async () => {
+                    const result = await ApiService.delete(urls.removeItem(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 loadMedicalCenters() {
             const result = await ApiService.get(urls.listFilterItemsTestResult);
diff --git a/src/views/MyPackage/List.vue b/src/views/MyPackage/List.vue
index eeaa93c..d640a6d 100644
--- a/src/views/MyPackage/List.vue
+++ b/src/views/MyPackage/List.vue
@@ -189,7 +189,7 @@ export default {
         this.load();
     },
     methods: {
-        ...mapMutations("modal", ["changeCurrentModal"]),
+        ...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
         async load(page = 1) {
             let filter = '?';
             for (const key in this.filter) {
@@ -218,23 +218,20 @@ export default {
         },
         removeModal(id) {
             this.changeCurrentModal({
-                modal: "modal-delete-delete",
-                properties: {
-                    success: () => {
-                        this.remove(id);
-                    },
-                }
-            });
-        },
-        async remove(id) {
-            const result = await ApiService.delete(urls.removePackage(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);
+                modal: "modal-user-confirmation",
+                properties: {width: '30'},
+                success: async () => {
+                    const result = await ApiService.delete(urls.removePackage(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 generateBarcode(id, type) {
             const result = await ApiService.post(urls.Barcode(id, type));
diff --git a/src/views/Package/List.vue b/src/views/Package/List.vue
index d665c10..6b03e95 100644
--- a/src/views/Package/List.vue
+++ b/src/views/Package/List.vue
@@ -192,7 +192,7 @@ export default {
         this.load();
     },
     methods: {
-        ...mapMutations("modal", ["changeCurrentModal"]),
+        ...mapMutations("modal", ["changeCurrentModal",'closeModal']),
         async load(page = 1) {
             let filter = '?';
             for (const key in this.filter) {
@@ -221,25 +221,22 @@ export default {
                 });
             }
         },
-        removeModal(id) {
+        removeModal(testResultId) {
             this.changeCurrentModal({
-                modal: "modal-delete-delete",
-                properties: {
-                    success: () => {
-                        this.remove(id);
-                    },
-                }
-            });
-        },
-        async remove(testResultId) {
-            const result = await ApiService.delete(urls.removePackage(testResultId));
-            if (result && result.status == 200) {
-                for (const key in this.items) {
-                    if (this.items.hasOwnProperty(key) && this.items[key].id == testResultId) {
-                        this.items.splice(key, 1);
+                modal: "modal-user-confirmation",
+                properties: {width: '30'},
+                success: async () => {
+                    const result = await ApiService.delete(urls.removePackage(testResultId));
+                    if (result && result.status == 200) {
+                        for (const key in this.items) {
+                            if (this.items.hasOwnProperty(key) && this.items[key].id == testResultId) {
+                                this.items.splice(key, 1);
+                            }
+                        }
                     }
-                }
-            }
+                    this.closeModal();
+                },
+            });
         },
         async generateBarcode(id, type) {
             const result = await ApiService.post(urls.Barcode(id, type));
diff --git a/src/views/TestResult/AddEdit.vue b/src/views/TestResult/AddEdit.vue
index efd697e..ca36be5 100644
--- a/src/views/TestResult/AddEdit.vue
+++ b/src/views/TestResult/AddEdit.vue
@@ -52,8 +52,7 @@
                         />
                     </v-flex> -->
                     <v-flex xs12 sm2 md2>
-                        <v-menu
-                                lazy
+                        <v-menu lazy style="z-index: 12;"
                                 :close-on-content-click="true"
                                 transition="v-scale-transition"
                                 offset-y
@@ -67,7 +66,7 @@
                                           v-model="formData.date"
                                           color="black"/>
                             <v-date-picker
-                                    min="2020-01-01"
+                                    :min="today"
                                     color="pink"
                                     no-title
                                     v-model="formData.date"
@@ -423,6 +422,7 @@ export default {
         'wm-Dropzone': Dropzone,
     },
     data: () => ({
+        today : new Date().toISOString().substr(0, 10),
         galleryDataLoaded: false,
         galleries: [],
         file_batch_id: Math.floor(Math.random() * 9000000000) + 1000000000,
@@ -442,7 +442,7 @@ export default {
             result: "Reject",
             img: null,
             test_type_id: "",
-            date: "2020-01-01"
+            date: new Date().toISOString().substr(0, 10),
         },
         images: [],
         menu: "",
diff --git a/src/views/TestResult/List.vue b/src/views/TestResult/List.vue
index 3daaa77..cd723c4 100644
--- a/src/views/TestResult/List.vue
+++ b/src/views/TestResult/List.vue
@@ -280,7 +280,7 @@ export default {
         }
     },
     methods: {
-        ...mapMutations("modal", ["changeCurrentModal"]),
+        ...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
         async load(page = 1, verified = null) {
             let filter = '?';
             for (const key in this.filter) {
@@ -313,23 +313,20 @@ export default {
         },
         removeModal(id) {
             this.changeCurrentModal({
-                modal: "modal-delete-delete",
-                properties: {
-                    success: () => {
-                        this.remove(id);
-                    },
-                }
-            });
-        },
-        async remove(id) {
-            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);
+                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);
diff --git a/src/views/User/List.vue b/src/views/User/List.vue
index 1c276c8..f88e087 100644
--- a/src/views/User/List.vue
+++ b/src/views/User/List.vue
@@ -63,12 +63,11 @@
                             <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">
-                                {{ item.name }}
-                                <br>
-                                <span class="WM-Font-14">{{ item.cell_number }}</span>
+                            <td class="title font-weight-light">{{ item.name }}</td>
+                            <td class="title font-weight-light">{{ item.cell_number }}</td>
+                            <td class="title font-weight-light">
+                                <span class="WM-Font-14">{{ $d(new Date(item.created_at), 'long') }}</span>
                             </td>
-                            <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
                             <td class="title font-weight-light">
                                 <span v-for="(role, key) in item.roles" :key="key">{{ role.name }}</span>
                             </td>
@@ -153,32 +152,12 @@ export default {
     },
     data: () => ({
         headers: [
-            {
-                sortable: true,
-                text: "Operator",
-                value: "name"
-            },
-            {
-                sortable: false,
-                text: "Date",
-                value: "date"
-            },
-            {
-                sortable: false,
-                text: "Role",
-                value: "role"
-            },
-            {
-                sortable: true,
-                text: "Hospital",
-                value: "hospital"
-            },
-            {
-                sortable: false,
-                text: "Action",
-                value: "action",
-                align: "right",
-            }
+            {sortable: false, text: "Operator", value: "name",width:'25%'},
+            {sortable: false, text: "Cell Number", value: "cell number"},
+            {sortable: false, text: "Date", value: "date" ,width:'20%'},
+            {sortable: false, text: "Role", value: "role"},
+            {sortable: false, text: "Hospital", value: "hospital"},
+            {sortable: false, text: "Action", value: "action", align: "right",}
         ],
         filter: {
             name: "",
@@ -237,23 +216,10 @@ export default {
                 properties: {user}
             });
         },
-        removeModal(id) {
-            this.changeCurrentModal({
-                modal: "modal-delete-delete",
-                properties: {
-                    success: () => {
-                        this.remove(id);
-                    },
-                }
-            });
-        },
-        async remove(userId) {
+        removeModal(userId) {
             this.changeCurrentModal({
                 modal: "modal-user-confirmation",
-                properties: {
-                    userId,
-                    width: '30'
-                },
+                properties: {userId, width: '30'},
                 success: async () => {
                     const result = await ApiService.delete(urls.deleteUser(userId));
                     this.closeModal();