refactor: replace custom CRM with Monica fork
Some checks failed
Build & Push Monica Image to Gitea Registry / build-and-push (push) Failing after 9s
Some checks failed
Build & Push Monica Image to Gitea Registry / build-and-push (push) Failing after 9s
This commit is contained in:
Kroonk
425
resources/js/components/people/Addresses.vue
Normal file
425
resources/js/components/people/Addresses.vue
Normal file
@@ -0,0 +1,425 @@
|
||||
<template>
|
||||
<div class="sidebar-box" :class="[ editMode ? 'edit' : '' ]">
|
||||
<div class="w-100 dt">
|
||||
<div class="sidebar-box-title">
|
||||
<h3>
|
||||
{{ $t('people.contact_address_title') }}
|
||||
</h3>
|
||||
</div>
|
||||
<div v-if="contactAddresses.length > 0" class="dtc" :class="[ dirltr ? 'tr' : 'tl' ]">
|
||||
<a v-if="!editMode" class="pointer" href="" @click.prevent="editMode = true">
|
||||
{{ $t('app.edit') }}
|
||||
</a>
|
||||
<a v-else class="pointer" href="" @click.prevent="toggleEditExcept(-1); resetState();">
|
||||
{{ $t('app.done') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EMPTY BOX - DISPLAY ADD BUTTON -->
|
||||
<p v-if="contactAddresses.length === 0 && !addMode" class="mb0">
|
||||
<a class="pointer" href="" @click.prevent="toggleAdd">
|
||||
{{ $t('app.add') }}
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<!-- LIST OF ADDRESSES -->
|
||||
<ul v-if="contactAddresses.length > 0">
|
||||
<li v-for="(contactAddress, i) in contactAddresses" :key="contactAddress.id" class="mb2">
|
||||
<div v-show="!contactAddress.edit" class="w-100 dt">
|
||||
<div class="dtc">
|
||||
<em class="f6 light-silver fa fa-globe pr2"></em>
|
||||
|
||||
<a v-if="!editMode" :href="contactAddress.googleMapAddress" target="_blank" rel="noopener noreferrer">
|
||||
{{ contactAddress.address }}
|
||||
</a>
|
||||
<span v-else>
|
||||
{{ contactAddress.address }}
|
||||
</span>
|
||||
|
||||
<span v-if="contactAddress.name" class="light-silver">
|
||||
({{ contactAddress.name }})
|
||||
</span>
|
||||
|
||||
<span v-if="!contactAddress.address">
|
||||
<a v-if="contactAddress.latitude" :href="contactAddress.googleMapAddressLatitude" target="_blank" rel="noopener noreferrer">
|
||||
({{ contactAddress.latitude }}, {{ contactAddress.longitude }})
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<div v-if="editMode" class="fr">
|
||||
<em class="fa fa-pencil-square-o pointer pr2" @click="toggleEdit(contactAddress)"></em>
|
||||
<em class="fa fa-trash-o pointer" @click="trash(contactAddress)"></em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EDIT BOX -->
|
||||
<div v-show="contactAddress.edit" class="w-100">
|
||||
<form class="measure center" @keyup.enter="update(contactAddress)">
|
||||
<div class="mt3">
|
||||
<form-input
|
||||
:id="'name' + i"
|
||||
v-model="updateForm.name"
|
||||
:title="$t('people.contact_address_form_name')"
|
||||
input-type="text"
|
||||
:required="false"
|
||||
:iclass="'pa2 db w-100'"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt3">
|
||||
<form-input
|
||||
:id="'street' + i"
|
||||
v-model="updateForm.street"
|
||||
:title="$t('people.contact_address_form_street')"
|
||||
input-type="text"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt3">
|
||||
<form-input
|
||||
:id="'city' + i"
|
||||
v-model="updateForm.city"
|
||||
:title="$t('people.contact_address_form_city')"
|
||||
input-type="text"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt3">
|
||||
<form-input
|
||||
:id="'province' + i"
|
||||
v-model="updateForm.province"
|
||||
:title="$t('people.contact_address_form_province')"
|
||||
input-type="text"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt3">
|
||||
<form-input
|
||||
:id="'postal_code' + i"
|
||||
v-model="updateForm.postal_code"
|
||||
:title="$t('people.contact_address_form_postal_code')"
|
||||
input-type="text"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt3">
|
||||
<form-select
|
||||
:id="'name' + i"
|
||||
v-model="updateForm.country"
|
||||
:title="$t('people.contact_address_form_country')"
|
||||
:options="countries"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt3">
|
||||
<form-input
|
||||
:id="'latitude' + i"
|
||||
v-model="updateForm.latitude"
|
||||
:title="$t('people.contact_address_form_latitude')"
|
||||
input-type="number"
|
||||
step="0.0000001"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt3">
|
||||
<form-input
|
||||
:id="'longitude' + i"
|
||||
v-model="updateForm.longitude"
|
||||
:title="$t('people.contact_address_form_longitude')"
|
||||
input-type="number"
|
||||
step="0.0000001"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="lh-copy mt3">
|
||||
<a class="btn btn-primary" href="" @click.prevent="update(contactAddress)">
|
||||
{{ $t('app.save') }}
|
||||
</a>
|
||||
<a class="btn" href="" @click.prevent="toggleEdit(contactAddress)">
|
||||
{{ $t('app.cancel') }}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- ADD BUTTON ONLY WHEN EDIT MODE IS AVAILABLE -->
|
||||
<li v-if="editMode && !addMode">
|
||||
<a class="pointer" href="" @click.prevent="toggleAdd">
|
||||
{{ $t('app.add') }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- ADD NEW ADDRESS -->
|
||||
<div v-if="addMode">
|
||||
<form class="measure center" @keyup.enter="store">
|
||||
<div class="mt3">
|
||||
<form-input
|
||||
id="name"
|
||||
v-model="createForm.name"
|
||||
:title="$t('people.contact_address_form_name')"
|
||||
input-type="text"
|
||||
:required="false"
|
||||
:iclass="'pa2 db w-100'"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt3">
|
||||
<form-input
|
||||
id="street"
|
||||
v-model="createForm.street"
|
||||
:title="$t('people.contact_address_form_street')"
|
||||
input-type="text"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt3">
|
||||
<form-input
|
||||
id="city"
|
||||
v-model="createForm.city"
|
||||
:title="$t('people.contact_address_form_city')"
|
||||
input-type="text"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt3">
|
||||
<form-input
|
||||
id="province"
|
||||
v-model="createForm.province"
|
||||
:title="$t('people.contact_address_form_province')"
|
||||
input-type="text"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt3">
|
||||
<form-input
|
||||
id="postal_code"
|
||||
v-model="createForm.postal_code"
|
||||
:title="$t('people.contact_address_form_postal_code')"
|
||||
input-type="text"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt3">
|
||||
<form-select
|
||||
id="name"
|
||||
v-model="createForm.country"
|
||||
:title="$t('people.contact_address_form_country')"
|
||||
:options="countries"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt3">
|
||||
<form-input
|
||||
id="latitude"
|
||||
v-model="createForm.latitude"
|
||||
:title="$t('people.contact_address_form_latitude')"
|
||||
input-type="number"
|
||||
step="0.0000001"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt3">
|
||||
<form-input
|
||||
id="longitude"
|
||||
v-model="createForm.longitude"
|
||||
:title="$t('people.contact_address_form_longitude')"
|
||||
input-type="number"
|
||||
step="0.0000001"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="lh-copy mt3">
|
||||
<a class="btn btn-primary" href="" @click.prevent="store">
|
||||
{{ $t('app.add') }}
|
||||
</a>
|
||||
<a class="btn" href="" @click.prevent="resetState">
|
||||
{{ $t('app.cancel') }}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
props: {
|
||||
hash: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
contactAddresses: [],
|
||||
countries: [],
|
||||
|
||||
editMode: false,
|
||||
addMode: false,
|
||||
|
||||
createForm: {
|
||||
name: '',
|
||||
street: '',
|
||||
city: '',
|
||||
province: '',
|
||||
postal_code: '',
|
||||
country: '',
|
||||
latitude: 0,
|
||||
longitude: 0,
|
||||
},
|
||||
|
||||
updateForm: {
|
||||
id: '',
|
||||
name: '',
|
||||
street: '',
|
||||
city: '',
|
||||
province: '',
|
||||
postal_code: '',
|
||||
country: '',
|
||||
latitude: 0,
|
||||
longitude: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
dirltr() {
|
||||
return this.$root.htmldir === 'ltr';
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.prepareComponent();
|
||||
},
|
||||
|
||||
methods: {
|
||||
prepareComponent() {
|
||||
this.getAddresses();
|
||||
this.getCountries();
|
||||
},
|
||||
|
||||
getAddresses() {
|
||||
axios.get('people/' + this.hash + '/addresses')
|
||||
.then(response => {
|
||||
this.contactAddresses = response.data;
|
||||
});
|
||||
},
|
||||
|
||||
getCountries() {
|
||||
axios.get('countries')
|
||||
.then(response => {
|
||||
this.countries = _.map(response.data, function(country) {
|
||||
return {
|
||||
id: country.id,
|
||||
name: country.country
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
reinitialize() {
|
||||
this.createForm.name = '';
|
||||
this.createForm.street = '';
|
||||
this.createForm.city = '';
|
||||
this.createForm.province = '';
|
||||
this.createForm.postal_code = '';
|
||||
this.createForm.country = '';
|
||||
this.createForm.latitude = '';
|
||||
this.createForm.longitude = '';
|
||||
},
|
||||
|
||||
resetState() {
|
||||
this.editMode = false;
|
||||
this.addMode = false;
|
||||
},
|
||||
|
||||
toggleAdd() {
|
||||
this.addMode = true;
|
||||
this.editMode = true;
|
||||
this.reinitialize();
|
||||
},
|
||||
|
||||
toggleEdit(contactAddress) {
|
||||
this.addMode = false;
|
||||
this.toggleEditExcept(contactAddress.id);
|
||||
Vue.set(contactAddress, 'edit', !contactAddress.edit);
|
||||
this.updateForm.id = contactAddress.id;
|
||||
this.updateForm.name = contactAddress.name;
|
||||
this.updateForm.street = contactAddress.street;
|
||||
this.updateForm.city = contactAddress.city;
|
||||
this.updateForm.province = contactAddress.province;
|
||||
this.updateForm.postal_code = contactAddress.postal_code;
|
||||
this.updateForm.country = contactAddress.country;
|
||||
this.updateForm.latitude = contactAddress.latitude;
|
||||
this.updateForm.longitude = contactAddress.longitude;
|
||||
},
|
||||
|
||||
toggleEditExcept(contactAddressId) {
|
||||
_.forEach(_.filter(this.contactAddresses, function (a) {
|
||||
return a.id !== contactAddressId;}
|
||||
), function (a) {
|
||||
Vue.set(a, 'edit', false);
|
||||
});
|
||||
},
|
||||
|
||||
store() {
|
||||
var vm = this;
|
||||
this.persistClient(
|
||||
'post', 'people/' + this.hash + '/addresses',
|
||||
this.createForm
|
||||
).then(response => {
|
||||
vm.contactAddresses.push(response.data);
|
||||
});
|
||||
|
||||
this.addMode = false;
|
||||
},
|
||||
|
||||
update(contactAddress) {
|
||||
var vm = this;
|
||||
Vue.set(contactAddress, 'edit', !contactAddress.edit);
|
||||
this.persistClient(
|
||||
'put', 'people/' + this.hash + '/addresses/' + contactAddress.id,
|
||||
this.updateForm
|
||||
).then(response => {
|
||||
Vue.set(vm.contactAddresses, vm.contactAddresses.indexOf(vm.contactAddresses.find(item => item.id === response.data.id)), response.data);
|
||||
});
|
||||
},
|
||||
|
||||
trash(contactAddress) {
|
||||
var vm = this;
|
||||
this.updateForm.id = contactAddress.id;
|
||||
|
||||
this.persistClient(
|
||||
'delete', 'people/' + this.hash + '/addresses/' + contactAddress.id,
|
||||
this.updateForm
|
||||
).then(response => {
|
||||
if (response.data.deleted === true) {
|
||||
vm.contactAddresses.splice(vm.contactAddresses.indexOf(vm.contactAddresses.find(item => item.id === response.data.id)), 1);
|
||||
}
|
||||
});
|
||||
|
||||
if (this.contactAddresses.length <= 1) {
|
||||
this.editMode = false;
|
||||
}
|
||||
},
|
||||
|
||||
persistClient(method, uri, form) {
|
||||
form.errors = {};
|
||||
|
||||
return axios[method](uri, form)
|
||||
.catch(error => {
|
||||
if (typeof error.response.data === 'object') {
|
||||
form.errors = _.flatten(_.toArray(error.response.data));
|
||||
} else {
|
||||
form.errors = [this.$t('app.error_try_again')];
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user