|
|
@@ -5,7 +5,7 @@
|
|
|
<b-form-group :label="labels.title"
|
|
|
label-for="distributor_title">
|
|
|
<b-form-input id="distributor_title"
|
|
|
- v-model="distributor.title"
|
|
|
+ v-model="distributorLocal.title"
|
|
|
required
|
|
|
:placeholder="labels.titlePlaceholder">
|
|
|
</b-form-input>
|
|
|
@@ -14,7 +14,7 @@
|
|
|
<b-form-group :label="labels.notes"
|
|
|
label-for="distributor_notes">
|
|
|
<b-form-textarea id="distributor_notes"
|
|
|
- v-model="distributor.notes"
|
|
|
+ v-model="distributorLocal.notes"
|
|
|
:placeholder="labels.notesPlaceholder"
|
|
|
:rows="3"
|
|
|
:max-rows="6">
|
|
|
@@ -23,7 +23,7 @@
|
|
|
<!-- Contacts Fields -->
|
|
|
<b-form-group :label="labels.contacts">
|
|
|
<!-- If there are any contacts -->
|
|
|
- <b-table v-if="names" :items="contacts" :fields="names">
|
|
|
+ <b-table v-if="names" :items="contacts" :fields="names" class="contacts-list">
|
|
|
<template slot="actions" slot-scope="row">
|
|
|
<b-button size="sm" @click.stop="onDelete(row.item)" class="mr-1">
|
|
|
{{labels.delete}}
|
|
|
@@ -31,25 +31,78 @@
|
|
|
</template>
|
|
|
</b-table>
|
|
|
<!-- Inline contacts form -->
|
|
|
- <b-form inline v-for="(contact, key) in distributor.contacts" :key="contact.id">
|
|
|
- <b-input class="mb-3 mr-sm-3"
|
|
|
- v-model="contact.name"
|
|
|
- :placeholder="labels.name" />
|
|
|
+ <b-form inline v-for="(contact, key) in distributorLocal.contacts" :key="contact.id">
|
|
|
+ <b-container>
|
|
|
+ <b-row>
|
|
|
+ <b-input-group class="col mb-3">
|
|
|
+ <b-input v-model="contact.name"
|
|
|
+ :placeholder="labels.name" />
|
|
|
+ </b-input-group>
|
|
|
+
|
|
|
+ <b-input-group class="col mb-3">
|
|
|
+ <b-input v-model="contact.email"
|
|
|
+ type="email"
|
|
|
+ :placeholder="labels.email" />
|
|
|
+ </b-input-group>
|
|
|
|
|
|
- <b-input class="mb-3 mr-sm-3"
|
|
|
- v-model="contact.email"
|
|
|
- type="email"
|
|
|
- :placeholder="labels.email" />
|
|
|
+ <b-input-group class="col mb-3">
|
|
|
+ <b-input v-model="contact.phone"
|
|
|
+ :placeholder="labels.phone"/>
|
|
|
+ </b-input-group>
|
|
|
|
|
|
- <b-input class="mb-3 mr-sm-3"
|
|
|
- v-model="contact.phone"
|
|
|
- :placeholder="labels.phone"/>
|
|
|
-
|
|
|
- <b-button @click.stop="onDelete(key)" class="mb-3 mr-sm-3" variant="danger">{{labels.delete}}</b-button>
|
|
|
-
|
|
|
+ <b-input-group class="col mb-3 col-sm-2">
|
|
|
+ <b-button @click.stop="onDelete(key)"
|
|
|
+ size="sm"
|
|
|
+ v-b-tooltip.hover :title="labels.delete"
|
|
|
+ variant="danger">
|
|
|
+ <i class="far fa-trash-alt"></i>
|
|
|
+ </b-button>
|
|
|
+ </b-input-group>
|
|
|
+ </b-row>
|
|
|
+ </b-container>
|
|
|
+
|
|
|
</b-form>
|
|
|
|
|
|
<b-form-group>
|
|
|
+ <!-- Inline New contact -->
|
|
|
+ <b-form inline v-if="newContact.show">
|
|
|
+ <b-container>
|
|
|
+ <b-row>
|
|
|
+ <b-input-group class="col mb-3">
|
|
|
+ <b-input v-model="newContact.name"
|
|
|
+ :placeholder="labels.name" />
|
|
|
+ </b-input-group>
|
|
|
+
|
|
|
+ <b-input-group class="col mb-3">
|
|
|
+ <b-input v-model="newContact.email"
|
|
|
+ type="email"
|
|
|
+ :placeholder="labels.email" />
|
|
|
+ </b-input-group>
|
|
|
+
|
|
|
+ <b-input-group class="col mb-3">
|
|
|
+ <b-input v-model="newContact.phone"
|
|
|
+ :placeholder="labels.phone"/>
|
|
|
+ </b-input-group>
|
|
|
+ <!-- Saving new contact -->
|
|
|
+ <b-input-group class="col mb-3 col-sm-2">
|
|
|
+ <b-button @click.stop="onSaveContact()"
|
|
|
+ size="sm"
|
|
|
+ class="mr-3"
|
|
|
+ v-b-tooltip.hover :title="labels.save"
|
|
|
+ variant="success">
|
|
|
+ <i class="far fa-save"></i>
|
|
|
+ </b-button>
|
|
|
+ <!-- Cancel adding contact -->
|
|
|
+ <b-button @click.stop="onCancelSaveContact()"
|
|
|
+ size="sm"
|
|
|
+ v-b-tooltip.hover :title="labels.cancel"
|
|
|
+ variant="danger">
|
|
|
+ {{labels.cancel}}
|
|
|
+ </b-button>
|
|
|
+ </b-input-group>
|
|
|
+ </b-row>
|
|
|
+ </b-container>
|
|
|
+ </b-form>
|
|
|
<b-button @click.stop="onAddContact()" class="mb-12 mr-sm-12" variant="primary">{{labels.add}}</b-button>
|
|
|
</b-form-group>
|
|
|
|
|
|
@@ -80,17 +133,24 @@ export default {
|
|
|
title: 'Title:',
|
|
|
notes: 'Notes:',
|
|
|
contacts: 'Contacts:',
|
|
|
- delete: 'Delete',
|
|
|
+ delete: 'Delete contact',
|
|
|
submit: 'Save',
|
|
|
cancel: 'Cancel',
|
|
|
titlePlaceholder: 'Enter title',
|
|
|
notesPlaceholder: 'Enter something',
|
|
|
add: 'Add Contact',
|
|
|
+ save: 'Save',
|
|
|
name: 'Name',
|
|
|
email: 'Email',
|
|
|
phone: 'Phone',
|
|
|
},
|
|
|
- backup: {},
|
|
|
+ newContact: {
|
|
|
+ show: false,
|
|
|
+ name: '',
|
|
|
+ email: '',
|
|
|
+ phone: '',
|
|
|
+ },
|
|
|
+ distributorLocal: {},
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -98,28 +158,14 @@ export default {
|
|
|
contacts: types.GET_CONTACTS,
|
|
|
names: types.GET_CONTACT_FIELDS,
|
|
|
}),
|
|
|
- distributor: {
|
|
|
- get() {
|
|
|
- return this.$store.getters['distributor/GET_DISTRIBUTOR'](this.id)
|
|
|
- },
|
|
|
- set(val) {
|
|
|
- //Placeholder
|
|
|
- },
|
|
|
+ distributor() {
|
|
|
+ return this.$store.getters['distributor/GET_DISTRIBUTOR'](this.id)
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
- distributor: {
|
|
|
- handler(val){
|
|
|
- this.saveDistributor({
|
|
|
- id: val.id,
|
|
|
- distributor: val
|
|
|
- });
|
|
|
- },
|
|
|
- deep: true
|
|
|
- },
|
|
|
- id(newId, oldId) {
|
|
|
- if (newId !== oldId) {
|
|
|
- this.backup = cloneDeep(this.distributor);
|
|
|
+ id(newId) {
|
|
|
+ if (newId) {
|
|
|
+ this.distributorLocal = cloneDeep(this.distributor);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -128,29 +174,56 @@ export default {
|
|
|
saveDistributor: types.SET_DISTRIBUTOR,
|
|
|
}),
|
|
|
onSubmit (ev) {
|
|
|
- // No need to save as all should already be saved
|
|
|
+ this.saveDistributor({
|
|
|
+ id: this.distributorLocal.id,
|
|
|
+ distributor: this.distributorLocal
|
|
|
+ });
|
|
|
this.$root.$emit('bv::hide::modal', 'distributor_modal_form');
|
|
|
},
|
|
|
onAddContact () {
|
|
|
- console.log('add');
|
|
|
+ this.newContact.show = true;
|
|
|
+ },
|
|
|
+ onSaveContact() {
|
|
|
+ this.distributorLocal.contacts.push(this.newContact);
|
|
|
+ this.newContact.show = false;
|
|
|
+ },
|
|
|
+ onCancelSaveContact() {
|
|
|
+ this.newContact.show = false;
|
|
|
},
|
|
|
onDelete(item) {
|
|
|
- console.log('delete', item);
|
|
|
+ this.distributorLocal.contacts.splice(item);
|
|
|
},
|
|
|
onCancel() {
|
|
|
- //Reset the changes
|
|
|
- this.saveDistributor({
|
|
|
- id: this.backup.id,
|
|
|
- distributor: this.backup
|
|
|
- });
|
|
|
this.$root.$emit('bv::hide::modal', 'distributor_modal_form');
|
|
|
}
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.localCopy = cloneDeep(this.distributor);
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
#distributor-form{
|
|
|
text-align: left;
|
|
|
+ .col-form-label {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 1.1em;
|
|
|
+ }
|
|
|
+ .contacts-list {
|
|
|
+ tr {
|
|
|
+ & th {
|
|
|
+ width: 25%;
|
|
|
+ &:last-child {
|
|
|
+ width: 18%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-inline {
|
|
|
+ .input-group {
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
