Skip to content

Commit 2198bf1

Browse files
Merge pull request #5925 from Countly/SER-2215
feat: [SER-2215] Adding disable feature to dialog box buttons
2 parents 3badc0a + 8f6825c commit 2198bf1

File tree

1 file changed

+17
-8
lines changed
  • frontend/express/public/javascripts/countly/vue/components

1 file changed

+17
-8
lines changed

frontend/express/public/javascripts/countly/vue/components/dialog.js

+17-8
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,10 @@
4848
title: {type: String, required: true},
4949
saveButtonLabel: {type: String, required: false, default: CV.i18n("common.save")},
5050
saveButtonVisibility: {type: Boolean, required: false, default: true},
51+
saveButtonDisabled: {type: Boolean, required: false, default: false},
5152
cancelButtonLabel: {type: String, required: false, default: CV.i18n("common.cancel")},
5253
cancelButtonVisibility: {type: Boolean, required: false, default: true},
54+
cancelButtonDisabled: {type: Boolean, required: false, default: false},
5355
dialogType: {type: String, required: false, default: "success"},
5456
testId: {type: String, default: 'cly-vue-confirm-dialog-test-id', required: false},
5557
alignCenter: {type: Boolean, default: true}
@@ -76,9 +78,12 @@
7678
},
7779
customClass: function() {
7880
return this.alignCenter ? "el-dialog--centered" : "";
79-
}
81+
},
8082
},
8183
methods: {
84+
buttonStyle: function(disabled) {
85+
return disabled ? { opacity: 0.5 } : {};
86+
},
8287
confirmClicked: function() {
8388
this.$emit("confirm");
8489
},
@@ -91,12 +96,16 @@
9196
<template v-for="(_, name) in forwardedSlots" v-slot:[name]="slotData">\
9297
<slot :name="name"/>\
9398
</template>\
94-
<template v-slot:footer><div class="cly-vue-formdialog__buttons is-single-step bu-is-justify-content-flex-end bu-is-flex">\
95-
<el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-cancel-button\'" @click="cancelClicked" type="secondary" v-if="cancelButtonVisibility">{{cancelLabel}}</el-button>\
96-
<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>\
97-
<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>\
98-
<el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-danger-button\'" @click="confirmClicked" type="danger" v-else-if="saveButtonVisibility" >{{saveLabel}}</el-button>\
99-
</div></template>\
99+
<template v-slot:footer>\
100+
<slot name="footer">\
101+
<div class="cly-vue-formdialog__buttons is-single-step bu-is-justify-content-flex-end bu-is-flex">\
102+
<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>\
103+
<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>\
104+
<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>\
105+
<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>\
106+
</div>\
107+
</slot>\
108+
</template>\
100109
</el-dialog>'
101110
}));
102111

@@ -261,4 +270,4 @@
261270
countlyVue.mixins.hasFormDialogs = hasFormDialogsMixin;
262271

263272

264-
}(window.countlyVue = window.countlyVue || {}));
273+
}(window.countlyVue = window.countlyVue || {}));

0 commit comments

Comments
 (0)