Merge pull request #557 from bcgov/release/v1.16.0

Release/v1.16.0
bcgov · Mar 21, 2024 · a48e508 · a48e508
2 parents 4f85661 + aa9c38c
commit a48e508
Show file tree

Hide file tree

Showing 16 changed files with 1,210 additions and 131 deletions.
diff --git a/frontend/src/assets/css/global.css b/frontend/src/assets/css/global.css
@@ -44,8 +44,9 @@
   width: 90% !important;
 }
 
-.text-warning{
-  color:#FCBA19 !important;
+.form-validation-message.text-warning{
+  color:#ce9608 !important;
+  font-weight: bold;
 }
 .nav-link{
   cursor: pointer;

diff --git a/frontend/src/components/DisplayModal.vue b/frontend/src/components/DisplayModal.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="display-modal" v-if="showModal">
     <b-card :header="header" class="modal-body">
-      <slot name="body"> Hello World </slot>
+      <slot name="body"> No body specified </slot>
       <template #footer>
         <slot name="footer"></slot>
         <!-- <b-btn

diff --git a/frontend/src/components/DisplayTable.vue b/frontend/src/components/DisplayTable.vue
@@ -111,6 +111,8 @@
         </b-card-text>
       </b-card>
     </b-row>
+    <slot name="create"></slot>
+
     <b-table
       v-if="items && items.length"
       :responsive="responsive"
@@ -184,15 +186,60 @@
       <template v-for="(_, slotName) of $scopedSlots" v-slot:[slotName]="scope">
         <slot :name="slotName" v-bind="scope" />
       </template>
+      <!-- DELETE TEMPLATE - -->
       <template v-slot:cell(delete)="{ item }">
         <b-btn
-          v-if="deleteMode && item[disableDeletefield] != disableDeleteIfValue"
-          variant="danger"
+          v-if="
+            deleteOptions &&
+            item[deleteOptions.disableDeletefield] !=
+              deleteOptions.disableDeleteIfValue
+          "
+          :variant="!useIconButtons ? 'danger' : 'outline-danger'"
+          :pill="!!useIconButtons"
           size="sm"
-          @click="deleteItem(item)"
+          @click="
+            deleteOptions && deleteOptions.deleteConfirm
+              ? (showDeleteModal[item[this.id]] = true)
+              : deleteItem(item)
+          "
         >
-          {{ deleteLabel ? deleteLabel : "Delete" }}
+          <div v-if="!useIconButtons">
+            Delete{{ deleteOptions ? " " + deleteOptions.deleteLabel : "" }}
+          </div>
+          <i v-else class="fa-solid fa-trash-can"></i>
         </b-btn>
+        <DisplayModal
+          :header="
+            'Delete' + (deleteOptions ? ' ' + deleteOptions.deleteLabel : '')
+          "
+          :showModal="showDeleteModal[item[this.id]]"
+        >
+          <template v-slot:body>
+            <slot name="delete-msg" v-bind="item"> Confirm Delete </slot>
+          </template>
+
+          <template v-slot:footer>
+            <b-btn
+              variant="outline-primary"
+              class="float-left"
+              size="xs"
+              @click="showDeleteModal = {}"
+              >Cancel</b-btn
+            >
+            <b-btn
+              variant="danger"
+              class="float-right"
+              size="xs"
+              :disabled="
+                deleteOptions && deleteOptions.disableDeleteBtn
+                  ? deleteOptions.disableDeleteBtn
+                  : false
+              "
+              @click="deleteItem(item)"
+              >DELETE</b-btn
+            >
+          </template>
+        </DisplayModal>
       </template>
     </b-table>
 
@@ -221,6 +268,7 @@ import { useAppStore } from "../store/modules/app.js";
 import { useBatchProcessingStore } from "../store/modules/batchprocessing.js";
 import { useStudentStore } from "../store/modules/student.js";
 import { mapState } from "pinia";
+import DisplayModal from "@/components/DisplayModal.vue";
 export default {
   name: "DisplayTable",
   props: [
@@ -229,11 +277,13 @@ export default {
     "title",
     "fields",
     "id",
-    "create",
     "update",
     "delete",
     "store",
+    "deleteOptions",
     "deleteLabel",
+    "deleteConfirm",
+    "useIconButtons",
     "disableDeletefield",
     "disableDeleteIfValue",
     "slots",
@@ -244,6 +294,9 @@ export default {
     "sortByField",
     "sortDesc",
   ],
+  components: {
+    DisplayModal: DisplayModal,
+  },
   onMounted() {
     // Set the initial number of items
     // this.totalRows = this.items.length;
@@ -260,6 +313,7 @@ export default {
       createAllowed: false,
       editMode: false,
       deleteMode: true,
+      showDeleteModal: {},
       addMode: false,
       itemToAdd: [],
       showConfirm: false,
@@ -337,12 +391,16 @@ export default {
     deleteItem(item) {
       const itemRaw = toRaw(item);
       const store = this.stores[this.store];
-      const id = toRaw(item).id;
+      const itemId = itemRaw[this.id];
       if (store) {
-        store[this.delete](id);
+        store[this.delete](itemId);
       } else {
         console.error("Store not found.");
       }
+      //close modal if delete confirm enabled
+      if (this.deleteOptions?.deleteConfirm) {
+        this.showDeleteModal = {};
+      }
     },
     onFiltered(filteredItems) {
       // Trigger pagination to update the number of buttons/pages due to filtering
@@ -356,6 +414,11 @@ export default {
 };
 </script>
 <style scoped>
+/* removes bootstrap vue outline on icon btn */
+button.btn-outline-danger.rounded-pill {
+  border: none;
+}
+
 @media (min-width: 992px) {
   .col-lg-4.table-filter {
     position: absolute;