|
48 | 48 | title: {type: String, required: true},
|
49 | 49 | saveButtonLabel: {type: String, required: false, default: CV.i18n("common.save")},
|
50 | 50 | saveButtonVisibility: {type: Boolean, required: false, default: true},
|
| 51 | + saveButtonDisabled: {type: Boolean, required: false, default: false}, |
51 | 52 | cancelButtonLabel: {type: String, required: false, default: CV.i18n("common.cancel")},
|
52 | 53 | cancelButtonVisibility: {type: Boolean, required: false, default: true},
|
| 54 | + cancelButtonDisabled: {type: Boolean, required: false, default: false}, |
53 | 55 | dialogType: {type: String, required: false, default: "success"},
|
54 | 56 | testId: {type: String, default: 'cly-vue-confirm-dialog-test-id', required: false},
|
55 | 57 | alignCenter: {type: Boolean, default: true}
|
|
76 | 78 | },
|
77 | 79 | customClass: function() {
|
78 | 80 | return this.alignCenter ? "el-dialog--centered" : "";
|
| 81 | + }, |
| 82 | + isButtonDisabled: function() { |
| 83 | + return { |
| 84 | + save: this.saveButtonDisabled, |
| 85 | + cancel: this.cancelButtonDisabled |
| 86 | + }; |
| 87 | + }, |
| 88 | + buttonStyle: function() { |
| 89 | + return function(disabled) { |
| 90 | + return disabled ? { opacity: 0.5 } : {}; |
| 91 | + }; |
79 | 92 | }
|
80 | 93 | },
|
81 | 94 | methods: {
|
|
92 | 105 | <slot :name="name"/>\
|
93 | 106 | </template>\
|
94 | 107 | <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>\ |
| 108 | + <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>\ |
| 109 | + <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>\ |
| 110 | + <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>\ |
| 111 | + <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>\ |
99 | 112 | </div></template>\
|
100 | 113 | </el-dialog>'
|
101 | 114 | }));
|
|
0 commit comments