From 569a32a03143b83c3780f5895a04ce790d465454 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=B1nar=20Gen=C3=A7?= <gncpin@hotmail.com>
Date: Thu, 9 Jan 2025 13:49:14 +0300
Subject: [PATCH 1/2] feat: [SER-2215] Adding disable feature to dialog box
 buttons

---
 .../countly/vue/components/dialog.js          | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/express/public/javascripts/countly/vue/components/dialog.js b/frontend/express/public/javascripts/countly/vue/components/dialog.js
index ec3ac7d59e9..17d4e322afc 100644
--- a/frontend/express/public/javascripts/countly/vue/components/dialog.js
+++ b/frontend/express/public/javascripts/countly/vue/components/dialog.js
@@ -48,8 +48,10 @@
             title: {type: String, required: true},
             saveButtonLabel: {type: String, required: false, default: CV.i18n("common.save")},
             saveButtonVisibility: {type: Boolean, required: false, default: true},
+            saveButtonDisabled: {type: Boolean, required: false, default: false},
             cancelButtonLabel: {type: String, required: false, default: CV.i18n("common.cancel")},
             cancelButtonVisibility: {type: Boolean, required: false, default: true},
+            cancelButtonDisabled: {type: Boolean, required: false, default: false},
             dialogType: {type: String, required: false, default: "success"},
             testId: {type: String, default: 'cly-vue-confirm-dialog-test-id', required: false},
             alignCenter: {type: Boolean, default: true}
@@ -76,6 +78,17 @@
             },
             customClass: function() {
                 return this.alignCenter ? "el-dialog--centered" : "";
+            },
+            isButtonDisabled: function() {
+                return {
+                    save: this.saveButtonDisabled,
+                    cancel: this.cancelButtonDisabled
+                };
+            },
+            buttonStyle: function() {
+                return function(disabled) {
+                    return disabled ? { opacity: 0.5 } : {};
+                };
             }
         },
         methods: {
@@ -92,10 +105,10 @@
                             <slot :name="name"/>\
                         </template>\
 						<template v-slot:footer><div class="cly-vue-formdialog__buttons is-single-step bu-is-justify-content-flex-end bu-is-flex">\
-							<el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-cancel-button\'" @click="cancelClicked"  type="secondary" v-if="cancelButtonVisibility">{{cancelLabel}}</el-button>\
-							<el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-save-button\'" @click="confirmClicked" type="success" v-if="confirmStyle==\'success\' && saveButtonVisibility" >{{saveLabel}}</el-button>\
-                            <el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-warning-button\'" @click="confirmClicked" type="warning" v-else-if="confirmStyle==\'warning\' && saveButtonVisibility" >{{saveLabel}}</el-button>\
-							<el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-danger-button\'" @click="confirmClicked" type="danger" v-else-if="saveButtonVisibility" >{{saveLabel}}</el-button>\
+							<el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-cancel-button\'" @click="cancelClicked"  type="secondary" :disabled="isButtonDisabled.cancel" :style="buttonStyle(isButtonDisabled.cancel)" v-if="cancelButtonVisibility">{{cancelLabel}}</el-button>\
+							<el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-save-button\'" @click="confirmClicked" type="success" :disabled="isButtonDisabled.save" :style="buttonStyle(isButtonDisabled.save)" v-if="confirmStyle==\'success\' && saveButtonVisibility" >{{saveLabel}}</el-button>\
+                            <el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-warning-button\'" @click="confirmClicked" type="warning" :disabled="isButtonDisabled.save" :style="buttonStyle(isButtonDisabled.save)" v-else-if="confirmStyle==\'warning\' && saveButtonVisibility" >{{saveLabel}}</el-button>\
+							<el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-danger-button\'" @click="confirmClicked" type="danger" :disabled="isButtonDisabled.save" :style="buttonStyle(isButtonDisabled.save)" v-else-if="saveButtonVisibility" >{{saveLabel}}</el-button>\
 						</div></template>\
                     </el-dialog>'
     }));

From 8f6825c85a6341bf5b01108d53fbb388e8969fc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=B1nar=20Gen=C3=A7?= <gncpin@hotmail.com>
Date: Mon, 20 Jan 2025 14:57:51 +0300
Subject: [PATCH 2/2] fix: code review

---
 .../countly/vue/components/dialog.js          | 32 ++++++++-----------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/frontend/express/public/javascripts/countly/vue/components/dialog.js b/frontend/express/public/javascripts/countly/vue/components/dialog.js
index 17d4e322afc..dd97fb47bb1 100644
--- a/frontend/express/public/javascripts/countly/vue/components/dialog.js
+++ b/frontend/express/public/javascripts/countly/vue/components/dialog.js
@@ -79,19 +79,11 @@
             customClass: function() {
                 return this.alignCenter ? "el-dialog--centered" : "";
             },
-            isButtonDisabled: function() {
-                return {
-                    save: this.saveButtonDisabled,
-                    cancel: this.cancelButtonDisabled
-                };
-            },
-            buttonStyle: function() {
-                return function(disabled) {
-                    return disabled ? { opacity: 0.5 } : {};
-                };
-            }
         },
         methods: {
+            buttonStyle: function(disabled) {
+                return disabled ? { opacity: 0.5 } : {};
+            },
             confirmClicked: function() {
                 this.$emit("confirm");
             },
@@ -104,12 +96,16 @@
                         <template v-for="(_, name) in forwardedSlots" v-slot:[name]="slotData">\
                             <slot :name="name"/>\
                         </template>\
-						<template v-slot:footer><div class="cly-vue-formdialog__buttons is-single-step bu-is-justify-content-flex-end bu-is-flex">\
-							<el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-cancel-button\'" @click="cancelClicked"  type="secondary" :disabled="isButtonDisabled.cancel" :style="buttonStyle(isButtonDisabled.cancel)" v-if="cancelButtonVisibility">{{cancelLabel}}</el-button>\
-							<el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-save-button\'" @click="confirmClicked" type="success" :disabled="isButtonDisabled.save" :style="buttonStyle(isButtonDisabled.save)" v-if="confirmStyle==\'success\' && saveButtonVisibility" >{{saveLabel}}</el-button>\
-                            <el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-warning-button\'" @click="confirmClicked" type="warning" :disabled="isButtonDisabled.save" :style="buttonStyle(isButtonDisabled.save)" v-else-if="confirmStyle==\'warning\' && saveButtonVisibility" >{{saveLabel}}</el-button>\
-							<el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-danger-button\'" @click="confirmClicked" type="danger" :disabled="isButtonDisabled.save" :style="buttonStyle(isButtonDisabled.save)" v-else-if="saveButtonVisibility" >{{saveLabel}}</el-button>\
-						</div></template>\
+						<template v-slot:footer>\
+                            <slot name="footer">\
+                                <div class="cly-vue-formdialog__buttons is-single-step bu-is-justify-content-flex-end bu-is-flex">\
+                                    <el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-cancel-button\'" @click="cancelClicked"  type="secondary" :disabled="cancelButtonDisabled" :style="buttonStyle(cancelButtonDisabled)" v-if="cancelButtonVisibility">{{cancelLabel}}</el-button>\
+                                    <el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-save-button\'" @click="confirmClicked" type="success" :disabled="saveButtonDisabled" :style="buttonStyle(saveButtonDisabled)" v-if="confirmStyle==\'success\' && saveButtonVisibility" >{{saveLabel}}</el-button>\
+                                    <el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-warning-button\'" @click="confirmClicked" type="warning" :disabled="saveButtonDisabled" :style="buttonStyle(saveButtonDisabled)" v-else-if="confirmStyle==\'warning\' && saveButtonVisibility" >{{saveLabel}}</el-button>\
+                                    <el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-danger-button\'" @click="confirmClicked" type="danger" :disabled="saveButtonDisabled" :style="buttonStyle(saveButtonDisabled)" v-else-if="saveButtonVisibility" >{{saveLabel}}</el-button>\
+                                </div>\
+                            </slot>\
+                        </template>\
                     </el-dialog>'
     }));
 
@@ -274,4 +270,4 @@
     countlyVue.mixins.hasFormDialogs = hasFormDialogsMixin;
 
 
-}(window.countlyVue = window.countlyVue || {}));
+}(window.countlyVue = window.countlyVue || {}));
\ No newline at end of file