implement alert and confirm modal

e926cb25 · NGUYEN HOANG SON · 4447a725 · e926cb25 · e926cb25 · e926cb25
Commit e926cb25 authored Nov 15, 2022 by NGUYEN HOANG SON
7 changed files
--- a/abweb/common/html/confirmModal.html
+++ b/abweb/common/html/confirmModal.html
+<button type="button" id="showConfirmModalButton" class="btn btn-sm btn-tertiary d-none" data-toggle="modal" data-target="#confirm-modal"></button>
 <div class="modal fade" id="confirm-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">

--- a/abweb/common/js/common.js
+++ b/abweb/common/js/common.js
@@ -45,6 +45,97 @@ COMMON.closeLoading = function () {
 };
 /**
+ * show confirm modal with yes, no buttons
+ * @param {Object} data - Object with {title, message, confirmYes, confirmNo}
+ * @param {callback} confirmCallback - The callback that handles the confirm button clicked
+ */
+COMMON.showConfirmModal = function (data, confirmCallback) {
+    if (data) {
+        let title = '';
+        if (data.title) {
+            title = data.title;
+        }
+        $('#confirm-modal .modal-title').text(title);
+        let message = '';
+        if (data.message) {
+            message = data.message;
+        }
+        $('#confirm-modal #msgModel').text(message);
+        if (data.confirmYes) {
+            $('#confirm-modal #confirmYes').text(data.confirmYes);
+            $('#confirm-modal #confirmYes').removeClass('d-none');
+            $('#confirm-modal #confirmYes').off('click');//remove all old click handlers
+            $('#confirm-modal #confirmYes').click(function() {
+                $('#confirm-modal .close').click();
+                if (confirmCallback) {
+                    confirmCallback();
+                }
+            });
+        } else {
+            $('#confirm-modal #confirmYes').addClass('d-none');
+        }
+        if (data.confirmNo) {
+            $('#confirm-modal #confirmNo').text(data.confirmNo);
+            $('#confirm-modal #confirmNo').removeClass('d-none');
+        } else {
+            $('#confirm-modal #confirmNo').addClass('d-none');
+        }
+    }
+    $('#showConfirmModalButton').click();
+};
+/**
+ * Show confirm modal with defaults: title, yes, no
+ * @param {string} messageCode 
+ * @param {callback} confirmCallback - The callback that handles the confirm button clicked
+ * @param {Object} options - Object with {title, message, confirmYes, confirmNo}
+ */
+COMMON.showConfirm = function (messageCode, confirmCallback, options = {}) {
+    const defaultParams = {
+        titleCode: 'confirmation',
+        confirmYesCode: 'confirmYes',
+        confirmNoCode: 'confirmNo'
+    }
+    const params = Object.assign(options, defaultParams);
+    let message = '';
+    if (messageCode) {
+        message = I18N.i18nText(messageCode);
+    } else if (params.message) {
+        message = params.message;
+    }
+    COMMON.showConfirmModal({
+        message: message,
+        title: I18N.i18nText(params.titleCode),
+        confirmYes: I18N.i18nText(params.confirmYesCode),
+        confirmNo: I18N.i18nText(params.confirmNoCode)
+    }, confirmCallback);
+};
+/**
+ * show alert message by confirm modal html
+ * @param {String} messageCode 
+ * @param {Object} options - Data Options {message, titleCode, confirmNoCode}
+ */
+COMMON.showAlert = function (messageCode, options = {}) {
+    const defaultParams = {
+        titleCode: 'confirmation',
+        confirmNoCode: 'confirmNo'
+    }
+    const params = Object.assign(options, defaultParams);
+    let message = '';
+    if (messageCode) {
+        message = I18N.i18nText(messageCode);
+    } else if (params.message) {
+        message = params.message;
+    }
+    COMMON.showConfirmModal({
+        message: message,
+        title: I18N.i18nText(params.titleCode),
+        confirmNo: I18N.i18nText(params.confirmNoCode)
+    });
+};
+/**
 * show alert
 *
 * @param {String} msgCode

--- a/abweb/common/json/lang/lang-en.json
+++ b/abweb/common/json/lang/lang-en.json
@@ -117,5 +117,6 @@
 "reportForm": "Report",
 "periodicInspectionPeriod": "Periodic Inspection Period",
 "msgSendPushMessageSuccess":"we sent a push message",
-"error": "Error"
+"error": "Error",
+"msgSendPushMessageConfirm": "Do you want to send message?"
 }
\ No newline at end of file
--- a/abweb/common/json/lang/lang-ja.json
+++ b/abweb/common/json/lang/lang-ja.json
@@ -115,5 +115,6 @@
 "reportForm": "報告",
 "periodicInspectionPeriod": "定期点検期間",
 "msgSendPushMessageSuccess":"プッシュメッセージ送信しました。",
-"error": "エラー"
+"error": "エラー",
+"msgSendPushMessageConfirm": "Do you want to send message?"
 }
\ No newline at end of file
--- a/abweb/common/json/lang/lang-ko.json
+++ b/abweb/common/json/lang/lang-ko.json
@@ -114,5 +114,6 @@
 "reportForm": "보고서",
 "periodicInspectionPeriod": "정기점검기간",
 "msgSendPushMessageSuccess":"푸시메시지를 보냈습니다.",
-"error": "에러"
+"error": "에러",
+"msgSendPushMessageConfirm": "Do you want to send message?"
 }
\ No newline at end of file
--- a/abweb/html/sendMessage.html
+++ b/abweb/html/sendMessage.html
@@ -91,6 +91,7 @@
    <!-- select template modal -->
    <div id="includeTemplateModal"></div>
+    <div id="includeConfirmModal"></div>
    <script type="text/javascript" src="../common/js/app.js"></script>
    <script src="../common/js/event.js?__UPDATEID__"></script>
 </body>

--- a/abweb/js/sendMessage/sendMessage.js
+++ b/abweb/js/sendMessage/sendMessage.js
@@ -39,21 +39,21 @@ SendMessage.getCurrentSendType = function () {
 SendMessage.checkValidation = function () {
    const message = SendMessage.getCurrentMessageContent();
    if (!ValidationUtil.CheckRequiredForText(message)) {
-        alert(I18N.i18nText('msgContentRequired'));
+        COMMON.showAlert('msgContentRequired');
        return false;
    }
    if (!ValidationUtil.CheckMaxLengthForByte(message, SendMessage.contentMaxLength)) {
-        alert(COMMON.format(I18N.i18nText('msgContentInvalidLength'), SendMessage.contentMaxLength));
+        COMMON.showAlert(null, {message: COMMON.format(I18N.i18nText('msgContentInvalidLength'), SendMessage.contentMaxLength)});
        return false;
    }
    const operationId = SendMessage.getCurrentOperationId();
    if (!ValidationUtil.IsNumber(operationId)) {
-        alert(I18N.i18nText('msgOperationRequired'));
+        COMMON.showAlert('msgOperationRequired');
        return false;
    }
    const sendType = SendMessage.getCurrentSendType();
    if (!ValidationUtil.IsNumber(sendType)) {
-        alert(I18N.i18nText('msgSendTypeRequired'));
+        COMMON.showAlert('msgSendTypeRequired');
        return false;
    }
    return true;
@@ -69,7 +69,9 @@ SendMessage.onClickSend = function () {
    const message = SendMessage.getCurrentMessageContent();
    const operationId = SendMessage.getCurrentOperationId();
    const sendType = SendMessage.getCurrentSendType();
-    SendMessage.postMessage(message, operationId, sendType);
+    COMMON.showConfirm('msgSendPushMessageConfirm', function() {
+        SendMessage.postMessage(message, operationId, sendType);
+    });
 };
 /**
@@ -92,7 +94,7 @@ SendMessage.postMessage = function (message, operationId, sendType) {
        false,
        function (json) {
            COMMON.closeLoading();
-            alert(I18N.i18nText('msgSendPushMessageSuccess'));
+            COMMON.showAlert('msgSendPushMessageSuccess');
        },
        function () {
            console.log('SendMessage.postMessage error');
@@ -126,13 +128,14 @@ SendMessage.init = function () {
    //Check if user is logged in
    COMMON.checkAuth(false);
    TEMPLATE.loadHeader('#includedHeader');
+    TEMPLATE.loadConfirmModal('#includeConfirmModal');
    const navs = [
        {
            titleLang: 'dashboard',
            href: 'dashboard.html',
        },
        {
-            titleLang: 'sendMessageTitle',
+            titleLang: 'sendMessage',
        },
    ];
    TEMPLATE.loadMainNavsTitle('#includedMainTitle', 'sendMessage', navs, null);