60 lines
2.1 KiB
JavaScript
60 lines
2.1 KiB
JavaScript
( async function(){
|
|
|
|
|
|
Vue.component('process-item',{
|
|
props: ['index','process'],
|
|
methods: {
|
|
removeProcess : function ( e ) {
|
|
e.preventDefault();
|
|
this.$emit('remove-process-item', this.index );
|
|
}
|
|
},
|
|
template : `
|
|
<div class="row">
|
|
<input hidden="hidden" v-bind:name="'processes[' + index + '].id'" v-bind:value="process.id" >
|
|
<div class="col-sm-3 form-group">
|
|
<label>Name</label>
|
|
<input class="form-control" v-bind:name="'processes[' + index + '].title'" v-model="process.title" required>
|
|
</div>
|
|
<div class="col-sm-6 form-group">
|
|
<label>Notes</label>
|
|
<input class="form-control" v-bind:name="'processes[' + index + '].notes'" v-model="process.notes">
|
|
</div>
|
|
<div class="col-sm-1 form-group" v-if="process.id == null || process.id == 0 " v-on:click="removeProcess">
|
|
<label class="d-block"> </label>
|
|
<a href="#" title="Remove" class="btn btn-light text-left">
|
|
<i class="bi bi-trash"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
`
|
|
});
|
|
|
|
|
|
let app = new Vue({
|
|
el: '#processApp',
|
|
data : {
|
|
processWrapper : {},
|
|
processes : []
|
|
},
|
|
methods : {
|
|
addNewProcess : function (e){
|
|
e.preventDefault();
|
|
this.processes.push({
|
|
'id' : 0,
|
|
'title' : '',
|
|
'notes' : ''
|
|
})
|
|
},
|
|
removeProcess : function( index ){
|
|
this.processes.splice( index, 1 );
|
|
}
|
|
|
|
},
|
|
mounted : function () {
|
|
this.processWrapper = window.ctp.processWrapper;
|
|
this.processes = this.processWrapper.processes;
|
|
}
|
|
});
|
|
|
|
})(jQuery); |