Replace vue-sweetalert2 with vue-material dialogs

src/frontend/src/assets/locales/en.json

@@ -150,8 +150,10 @@
     "customerList": "Customer List",
     "deferredDebt": "Deferred Debt",
     "deferredPayment": "Deferred Payment",
-    "deleteAgent": "Delete Agent | Agent Deleted Successfully | Agent Updated Successfully |  I confirm that {name} will be deleted",
     "deleteAgentCommission": "Delete Agent Commission | I confirm that {commissionName} will be deleted ",
+    "deleteAgentConfirm": "I confirm that {name} will be deleted",
+    "deleteAgentSuccess": "Agent Deleted Successfully",
+    "deleteAgentTitle": "Delete Agent",
     "deleteAppliance": "Delete Appliance",
     "deleteAssetType": "Delete Asset Type | Asset Type Deleted Successfully | Are you sure to delete the asset type ? | Asset Type Updated Successfully",
     "deleteCustomer": "Delete Customer | Customer Deleted Successfully",
@@ -360,6 +362,7 @@
     "transactionReference": "Transaction Reference",
     "untraceableTransaction": "Untraceable transaction",
     "updateAddress": "Update Address",
+    "updateAgentSuccess": "Agent Updated Successfully",
     "userForOutsourcing": "User for Outsourcing",
     "userId": "User ID",
     "userList": "User List",
@@ -483,6 +486,7 @@
     "no": "No",
     "notice": "Notice",
     "offline": "Offline",
+    "ok": "OK",
     "online": "Online",
     "open": "Open | Opened",
     "outgoing": "Outgoing",

src/frontend/src/modules/Agent/AgentDetail.vue

@@ -6,6 +6,19 @@
     button-icon="delete"
     @widgetAction="confirmDelete"
   >
+    <div>
+      <confirmation-box
+        ref="deleteDialog"
+        :title="$t('phrases.deleteAgentTitle')"
+        :message="$t('phrases.deleteAgentSuccess')"
+        :show-checkbox="true"
+        :checkbox-label="
+          $t('phrases.deleteAgentConfirm', { name: agent.name + agent.surname })
+        "
+        :confirm-text="$tc('words.confirm')"
+        :cancel-text="$tc('words.cancel')"
+      />
+    </div>
     <md-card>
       <md-card-content>
         <div class="md-layout md-gutter" v-if="!editAgent">
@@ -186,11 +199,11 @@ import { AgentService } from "@/services/AgentService"
 import { AgentCommissionService } from "@/services/AgentCommissionService"
 import { EventBus } from "@/shared/eventbus"
 import { notify } from "@/mixins/notify"
-
+import ConfirmationBox from "@/shared/ConfirmationBox.vue"
 export default {
   name: "AgentDetail",
   mixins: [notify],
-  components: { Widget },
+  components: { Widget, ConfirmationBox },
   data() {
     return {
       agentService: new AgentService(),
@@ -233,38 +246,17 @@ export default {
         this.alertNotify("error", e.message)
       }
     },
-    confirmDelete() {
-      this.$swal({
-        type: "question",
-        title: this.$tc("phrases.deleteAgent"),
-        width: "35%",
-        confirmButtonText: this.$tc("words.confirm"),
-        showCancelButton: true,
-        cancelButtonText: this.$tc("words.cancel"),
-        focusCancel: true,
-        html:
-          '<div style="text-align: left; padding-left: 5rem" class="checkbox">' +
-          "  <label>" +
-          '    <input type="checkbox" name="confirmation" id="confirmation" >' +
-          this.$tc("phrases.deleteAgent", 3, {
-            name: this.agent.name + this.agent.surname,
-          }) +
-          "  </label>" +
-          "</div>",
-      }).then((result) => {
-        let answer = document.getElementById("confirmation").checked
-        if ("value" in result) {
-          if (answer) {
-            this.deleteAgent()
-          }
-        }
-      })
+    async confirmDelete() {
+      const result = await this.$refs.deleteDialog.show()
+      if (result.confirmed && result.checked) {
+        await this.deleteAgent()
+      }
     },
     async updateAgent() {
       try {
         this.loading = true
         await this.agentService.updateAgent(this.agent)
-        this.alertNotify("success", this.$tc("phrases.deleteAgent", 2))
+        this.alertNotify("success", this.$t("phrases.updateAgentSuccess"))
         this.loading = false
         this.editAgent = false
       } catch (e) {
@@ -275,9 +267,10 @@ export default {
     async deleteAgent() {
       try {
         await this.agentService.deleteAgent(this.agent)
-        this.alertNotify("success", this.$tc("phrases.deleteAgent", 1))
+        this.alertNotify("success", this.$t("phrases.deleteAgentSuccess"))
         window.history.back()
       } catch (e) {
+        console.log(e)
         this.alertNotify("error", e.message)
       }
     },

src/frontend/src/modules/Agent/Commission/AgentCommissionList.vue

@@ -10,6 +10,20 @@
       color="green"
       :subscriber="subscriber"
     >
+      <div>
+        <confirmation-box
+          ref="deleteDialog"
+          :title="$tc('phrases.deleteAgentCommission')"
+          :show-checkbox="true"
+          :checkbox-label="
+            $tc('phrases.deleteAgentCommission', 2, {
+              commissionName: commission?.name || '',
+            })
+          "
+          :confirm-text="$tc('words.confirm')"
+          :cancel-text="$tc('words.cancel')"
+        />
+      </div>
       <md-progress-bar md-mode="indeterminate" v-if="loading" />
 
       <md-table md-sort="id" md-sort-order="asc">
@@ -166,15 +180,19 @@
     </widget>
   </div>
 </template>
+
 <script>
 import Widget from "../../../shared/widget"
 import { EventBus } from "@/shared/eventbus"
 import { AgentCommissionService } from "@/services/AgentCommissionService"
 import NewCommission from "../Commission/NewCommission"
 import { notify } from "@/mixins/notify"
+import ConfirmationBox from "@/shared/ConfirmationBox.vue"
+
 export default {
   name: "AgentCommissionList",
   mixins: [notify],
+  components: { Widget, NewCommission, ConfirmationBox },
   data() {
     return {
       subscriber: "agent-commission-list",
@@ -190,12 +208,9 @@ export default {
       tableName: "Agent Commission Types",
       editCommission: null,
       loading: false,
+      commission: null, // Define the commission property
     }
   },
-  components: {
-    Widget,
-    NewCommission,
-  },
   mounted() {
     this.getAgentCommissions()
     EventBus.$on("commissionAdded", this.closeNewCommission)
@@ -240,34 +255,13 @@ export default {
         this.alertNotify("error", e.message)
       }
     },
-    async confirmDelete(commission) {
-      this.$swal({
-        type: "question",
-        title: this.$tc("phrases.deleteAgentCommission"),
-        width: "35%",
-        confirmButtonText: this.$tc("words.confirm"),
-        showCancelButton: true,
-        cancelButtonText: this.$tc("words.cancel"),
-        focusCancel: true,
-        html:
-          '<div style="text-align: left; padding-left: 5rem" class="checkbox">' +
-          "  <label>" +
-          '    <input type="checkbox" name="confirmation" id="confirmation" >' +
-          this.$tc("phrases.deleteAgentCommission", 2, {
-            commissionName: commission.name,
-          }) +
-          "  </label>" +
-          "</div>",
-      }).then((result) => {
-        let answer = document.getElementById("confirmation").checked
-        if ("value" in result) {
-          if (answer) {
-            this.deleteCommission(commission.id)
-          }
-        }
-      })
+    async confirmDelete(item) {
+      this.commission = item // Set the commission property
+      const result = await this.$refs.deleteDialog.show()
+      if (result.confirmed && result.checked) {
+        await this.deleteCommission(item.id)
+      }
     },
-
     async deleteCommission(commissionId) {
       try {
         this.loading = true
@@ -283,4 +277,5 @@ export default {
   },
 }
 </script>
+
 <style scoped></style>

src/frontend/src/shared/ConfirmationBox.vue

@@ -1,41 +1,107 @@
 <template>
-  <div></div>
+  <md-dialog :md-active.sync="showDialog">
+    <md-dialog-title>{{ title }}</md-dialog-title>
+
+    <md-dialog-content>
+      <p>{{ message }}</p>
+
+      <!-- Password Input Field (Conditional) -->
+      <md-field v-if="inputType">
+        <label>{{ inputType === "password" ? "Password" : "Input" }}</label>
+        <md-input v-model="inputValue" :type="inputType"></md-input>
+      </md-field>
+
+      <!-- Checkbox (Conditional) -->
+      <div v-if="showCheckbox" class="md-layout md-alignment-center-left">
+        <md-checkbox v-model="isChecked">{{ checkboxLabel }}</md-checkbox>
+      </div>
+    </md-dialog-content>
+
+    <md-dialog-actions>
+      <md-button class="md-accent" @click="onCancel">
+        {{ cancelText }}
+      </md-button>
+      <md-button
+        class="md-primary"
+        @click="onConfirm"
+        :disabled="showCheckbox && !isChecked"
+      >
+        {{ confirmText }}
+      </md-button>
+    </md-dialog-actions>
+  </md-dialog>
 </template>
 
 <script>
-import { EventBus } from "./eventbus"
-
 export default {
   name: "ConfirmationBox",
   props: {
     title: {
+      type: String,
       required: true,
+    },
+    message: {
+      type: String,
+      default: "",
+    },
+    showCheckbox: {
+      type: Boolean,
+      default: false,
+    },
+    checkboxLabel: {
       type: String,
+      default: "",
+    },
+    confirmText: {
+      type: String,
+      default: "Confirm",
+    },
+    cancelText: {
+      type: String,
+      default: "Cancel",
+    },
+    inputType: {
+      type: String,
+      default: "", // Can be 'password', 'text', or empty
     },
   },
   data() {
-    return {}
-  },
-  created() {
-    EventBus.$on("show.confirm", this.showConfirmation)
+    return {
+      showDialog: false,
+      isChecked: false,
+      inputValue: "", // To store the input value
+      resolvePromise: null,
+    }
   },
   methods: {
-    showConfirmation(data = null) {
-      this.$swal({
-        type: "question",
-        title: this.title,
-        text: "Are you sure to do this action?",
-        showCancelButton: true,
-        confirmButtonText: "I'm sure",
-        cancelButtonText: "Cancel",
-      }).then((result) => {
-        if (result.value) {
-          this.$emit("confirmed", data)
-        }
+    show() {
+      this.showDialog = true
+      this.isChecked = false
+      this.inputValue = "" // Reset input value when dialog is shown
+      return new Promise((resolve) => {
+        this.resolvePromise = resolve
       })
     },
+    onConfirm() {
+      this.showDialog = false
+      if (this.resolvePromise) {
+        this.resolvePromise({
+          confirmed: true,
+          checked: this.isChecked,
+          inputValue: this.inputValue, // Pass the input value back
+        })
+      }
+    },
+    onCancel() {
+      this.showDialog = false
+      if (this.resolvePromise) {
+        this.resolvePromise({
+          confirmed: false,
+          checked: this.isChecked,
+          inputValue: this.inputValue, // Pass the input value back
+        })
+      }
+    },
   },
 }
 </script>
-
-<style scoped></style>