diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/popup_dialog.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/popup_dialog.vue | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/popup_dialog.vue b/app/assets/javascripts/vue_shared/components/popup_dialog.vue new file mode 100644 index 00000000000..f63125e4d81 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/popup_dialog.vue @@ -0,0 +1,67 @@ +<script> +const PopupDialog = { + name: 'popup-dialog', + + props: { + open: Boolean, + title: String, + body: String, + kind: { + type: String, + default: 'primary', + }, + closeButtonLabel: { + type: String, + default: 'Cancel', + }, + primaryButtonLabel: { + type: String, + default: 'Save changes', + }, + }, + + computed: { + typeOfClass() { + const className = `btn-${this.kind}`; + let returnObj = {}; + returnObj[className] = true; + return returnObj; + } + }, + + methods: { + close() { + this.$emit('toggle', false); + }, + + yesClick() { + this.$emit('submit', true); + }, + + noClick() { + this.$emit('submit', false); + } + } +}; + +export default PopupDialog; +</script> +<template> +<div class="modal popup-dialog" tabindex="-1" v-show="open" role="dialog"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" @click="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> + <h4 class="modal-title">{{this.title}}</h4> + </div> + <div class="modal-body"> + <p>{{this.body}}</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal" @click="noClick">{{closeButtonLabel}}</button> + <button type="button" class="btn" :class="typeOfClass" @click="yesClick">{{primaryButtonLabel}}</button> + </div> + </div> + </div> +</div> +</template>
\ No newline at end of file |