fix : update delete confirmation modal and test result style

src/components/modal/delete/Delete.vue

@@ -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>

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 size="20"
-                                <v-icon class="caption fa fa-times NotVerified"/>
+                                :class="['caption fa ml-2', data.result == 'Reject'?'NotVerified':( data.result == 'Accept'?'Verified':'')]">
-                            </span>
+                            {{ data.result == 'Reject' ? 'fa-times' : (data.result == 'Accept' ? 'fa-check':'') }}
-                        <span v-if="data.result == 'Accept'" class="">
+                        </v-icon>
-                                <v-icon class="caption fa fa-check Verified"/>
-                            </span>
                         <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> -->
+                        <v-icon size="20"
-                        <!-- <span
+                                :class="['caption fa ml-2', data.verified == 'NotVerified'?'NotVerified':(data.verified == 'Verified'? 'Verified' : '')]">
-                            class="title font-weight-bold ml-1"
+                            {{ data.verified == 'NotVerified' ? 'fa-times' :(data.verified == 'Verified' ? 'fa-check':'') }}
-                            style="letter-spacing:0 !important"
+                        </v-icon>
-                        >{{ 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>
                         <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>

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-btn @click="changeRole" class="WM-RedGradient-BG" style="padding:10px 60px">
-                                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                                <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>

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,15 +216,9 @@ export default {
         },
         removeModal(id) {
             this.changeCurrentModal({
-                modal: "modal-delete-delete",
+                modal: "modal-user-confirmation",
-                properties: {
+                properties: {width: '30'},
-                    success: () => {
+                success: async () => {
-                        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) {
@@ -233,6 +227,9 @@ export default {
                             }
                         }
                     }
+                    this.closeModal();
+                },
+            });
         },
         async loadMedicalCenters() {
             const result = await ApiService.get(urls.listFilterItemsTestResult);

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,15 +228,9 @@ export default {
         },
         removeModal(id) {
             this.changeCurrentModal({
-                modal: "modal-delete-delete",
+                modal: "modal-user-confirmation",
-                properties: {
+                properties: {width: '30'},
-                    success: () => {
+                success: async () => {
-                        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) {
@@ -245,6 +239,9 @@ export default {
                             }
                         }
                     }
+                    this.closeModal();
+                },
+            });
         },
         async loadMedicalCenters() {
             const result = await ApiService.get(urls.listFilterItemsTestResult);

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,15 +215,9 @@ export default {
         },
         removeModal(id) {
             this.changeCurrentModal({
-                modal: "modal-delete-delete",
+                modal: "modal-user-confirmation",
-                properties: {
+                properties: {width: '30'},
-                    success: () => {
+                success: async () => {
-                        this.remove(id);
-                    },
-                }
-            });
-        },
-        async remove(id) {
                     const result = await ApiService.delete(urls.removeLabel(id));
                     if (result && result.status == 200) {
                         for (const key in this.items) {
@@ -232,6 +226,12 @@ export default {
                             }
                         }
                     }
+                    this.closeModal();
+                },
+            });
+        },
+        async remove(id) {
+
         },
         async generateBarcode(code, type) {
             const result = await ApiService.post(urls.Barcode(code, type));

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'},

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,15 +247,9 @@ export default {
         },
         removeModal(id) {
             this.changeCurrentModal({
-                modal: "modal-delete-delete",
+                modal: "modal-user-confirmation",
-                properties: {
+                properties: {width: '30'},
-                    success: () => {
+                success: async () => {
-                        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) {
@@ -264,6 +258,9 @@ export default {
                             }
                         }
                     }
+                    this.closeModal();
+                },
+            });
         },
         async loadMedicalCenters() {
             const result = await ApiService.get(urls.listFilterItemsTestResult);

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,15 +218,9 @@ export default {
         },
         removeModal(id) {
             this.changeCurrentModal({
-                modal: "modal-delete-delete",
+                modal: "modal-user-confirmation",
-                properties: {
+                properties: {width: '30'},
-                    success: () => {
+                success: async () => {
-                        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) {
@@ -235,6 +229,9 @@ export default {
                             }
                         }
                     }
+                    this.closeModal();
+                },
+            });
         },
         async generateBarcode(id, type) {
             const result = await ApiService.post(urls.Barcode(id, type));

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,17 +221,11 @@ export default {
                 });
             }
         },
-        removeModal(id) {
+        removeModal(testResultId) {
             this.changeCurrentModal({
-                modal: "modal-delete-delete",
+                modal: "modal-user-confirmation",
-                properties: {
+                properties: {width: '30'},
-                    success: () => {
+                success: async () => {
-                        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) {
@@ -240,6 +234,9 @@ export default {
                             }
                         }
                     }
+                    this.closeModal();
+                },
+            });
         },
         async generateBarcode(id, type) {
             const result = await ApiService.post(urls.Barcode(id, type));

src/views/TestResult/AddEdit.vue

@@ -52,8 +52,7 @@
                         />
                     </v-flex> -->
                     <v-flex xs12 sm2 md2>
-                        <v-menu
+                        <v-menu lazy style="z-index: 12;"
-                                lazy
                                 :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: "",

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,15 +313,9 @@ export default {
         },
         removeModal(id) {
             this.changeCurrentModal({
-                modal: "modal-delete-delete",
+                modal: "modal-user-confirmation",
-                properties: {
+                properties: {width: '30'},
-                    success: () => {
+                success: async () => {
-                        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) {
@@ -330,6 +324,9 @@ export default {
                             }
                         }
                     }
+                    this.closeModal();
+                },
+            });
         },
         async fillSelectFilter() {
             const result = await ApiService.get(urls.listFilterItemsTestResult);

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">
+                            <td class="title font-weight-light">{{ item.name }}</td>
-                                {{ item.name }}
+                            <td class="title font-weight-light">{{ item.cell_number }}</td>
-                                <br>
+                            <td class="title font-weight-light">
-                                <span class="WM-Font-14">{{ item.cell_number }}</span>
+                                <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: false, text: "Operator", value: "name",width:'25%'},
-                sortable: true,
+            {sortable: false, text: "Cell Number", value: "cell number"},
-                text: "Operator",
+            {sortable: false, text: "Date", value: "date" ,width:'20%'},
-                value: "name"
+            {sortable: false, text: "Role", value: "role"},
-            },
+            {sortable: false, text: "Hospital", value: "hospital"},
-            {
+            {sortable: false, text: "Action", value: "action", align: "right",}
-                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",
-            }
         ],
         filter: {
             name: "",
@@ -237,23 +216,10 @@ export default {
                 properties: {user}
             });
         },
-        removeModal(id) {
+        removeModal(userId) {
-            this.changeCurrentModal({
-                modal: "modal-delete-delete",
-                properties: {
-                    success: () => {
-                        this.remove(id);
-                    },
-                }
-            });
-        },
-        async remove(userId) {
             this.changeCurrentModal({
                 modal: "modal-user-confirmation",
-                properties: {
+                properties: {userId, width: '30'},
-                    userId,
-                    width: '30'
-                },
                 success: async () => {
                     const result = await ApiService.delete(urls.deleteUser(userId));
                     this.closeModal();