P
CUI v1.20.1177
This component is used when the Change Tracker plugin detected changes of values in a form. It serves as a confirmation before closing or clearing the view.
<div id="save-changes-modal-demo" v-on:submit.prevent="javascript:void(0)">
<form id="save-changes-modal-demo-form">
<pcui_text_field id="floating-label-plain"
v-model="firstName"
layout="floating-label"
label="First name">
</pcui_text_field>
<pcui_text_field id="floating-label-plain"
v-model="lastName"
layout="floating-label"
label="Last name">
</pcui_text_field>
<div class="ui selection dropdown" id="gender-dropdown">
<input type="hidden" name="gender" v-model="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
<div class="item" data-value="3">Rather not say
</div>
</div>
</div>
<div class="checkbox-main-container">
<div class="ui checkbox checkbox-default">
<input id="checkbox-default" type="checkbox">
<label class="checkbox-label-default">I'm a checkbox</label>
</div>
</div>
<button type="button" id="btn-save" class="ui button button-solid success-btn"
v-bind:class="{'disabled' : !hasChange}"
v-on:click="saveFunction">
<span>Save</span>
</button>
<button type="button" id="btn-save" class="ui button button-default"
v-on:click="resetForm">
<span>Clear</span>
</button>
</form>
<pcui_save_changes_modal ref="save-changes-modal"
v-bind:btn-save-function="saveFunction"
v-bind:btn-dont-save-function="dontSaveFunction">
</pcui_save_changes_modal>
</div>
var saveChangesModalDemo = new Vue({
el: '#save-changes-modal-demo',
name: 'Save Changes Modal Demo',
data: {
hasChange: false,
firstName: null,
lastName: null,
gender: null
},
mounted: function(){
$('#save-changes-modal-demo .menu .item').tab();
},
components: {
pcui_save_changes_modal: PCUISaveChangesModalComponent,
pcui_text_field: PCUIFixedLabelTextFieldComponent,
pcui_radio_slider: PCUIRadioSliderComponent
},
methods: {
saveFunction: function () {
console.log('SAVE FUNCTION TEST');
},
dontSaveFunction: function () {
var self = this;
document.getElementById("save-changes-modal-demo-form").reset();
$('#gender-dropdown').dropdown('clear');
self.firstName = '';
self.lastName = '';
self.gender = '';
self.$refs['save-changes-modal'].closeModal();
self.hasChange = false;
},
onSubmit: function () {
var self = this;
},
resetForm: function () {
var self = this;
if (self.hasChange) {
self.$refs['save-changes-modal'].openModal();
}
}
}
});
initChangeTracker({
id: "#save-changes-modal-demo",
callbackFunction: function () {
saveChangesModalDemo.hasChange = true;
}
});
$('.ui.dropdown').dropdown({
"clearable": true
});
var PCUISaveChangesModalComponent = Vue.component(
'pcui-save-changes-modal',
{
data: function () {
return {
isAnimating: true,
isShown: false
};
},
props: {
btnSaveFunction: {
default: function () { }
},
btnDontSaveFunction: {
default: function () { }
}
},
methods: {
openModal: function () {
var self = this;
self.isAnimating = true;
setTimeout(function () {
self.isShown = true;
}, 10);
},
closeModal: function () {
var self = this;
self.isAnimating = true;
setTimeout(function () {
self.isAnimating = false;
self.isShown = false;
}, 100);
},
save: function () {
this.btnSaveFunction();
},
dontSave: function () {
this.btnDontSaveFunction();
}
},
template: '\
<div class="animated save-changes-modal-main-container" \
v-bind:class="{\'fadeIn\': isAnimating, \'fadeOut\': !isAnimating}" \
v-show="isShown" \
v-cloak>\
<div class="modal-container"> \
<div class="modal-title-container">\
Do you want to save your changes?\
</div>\
<div class="modal-bodytext-container\
</div>\
<div class="modal-footer-container">\
<div class="modal-buttons-container">\
<div class="modal-button\
<button type="button" id="btn-save" class="ui button button-solid success-btn" \
v-on:click="save">\
<span>Save</span>\
</button>\
</div>\
<div class="modal-button">\
<button type="button" id="btn-save" class="ui button button-default" \
v-on:click="dontSave">\
<span>Don\'t save</span>\
</button>\
</div>\
<div class="modal-button">\
<button type="button" id="btn-save" class="ui button button-default" \
v-on:click="closeModal">\
<span>Cancel</span>\
</button>\
</div>\
</div>\
</div>\
</div>\
</div>\
'
}
);