Customer contacts view
This commit is contained in:
parent
86199d8197
commit
f1f0f9fffb
|
|
@ -1,123 +1,54 @@
|
|||
<script setup>
|
||||
import { onBeforeMount, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
import useNotify from 'src/composables/useNotify';
|
||||
|
||||
import CrudModel from 'components/CrudModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const { notify } = useNotify();
|
||||
const { t } = useI18n();
|
||||
|
||||
const isLoading = ref(false);
|
||||
let notes = ref([]);
|
||||
let deletes = ref([]);
|
||||
const customerContactsRef = ref(null);
|
||||
|
||||
onBeforeMount(() => {
|
||||
getData();
|
||||
onMounted(() => {
|
||||
if (customerContactsRef.value) customerContactsRef.value.reload();
|
||||
});
|
||||
|
||||
const getData = async () => {
|
||||
const filter = {
|
||||
fields: ['id', 'name', 'phone', 'clientFk'],
|
||||
where: { clientFk: route.params.id },
|
||||
};
|
||||
const { data } = await axios.get('ClientContacts', {
|
||||
params: { filter: JSON.stringify(filter) },
|
||||
});
|
||||
notes.value.length = 0;
|
||||
data.forEach((element) => {
|
||||
element.isNew = false;
|
||||
addNote(element);
|
||||
});
|
||||
};
|
||||
|
||||
const addNote = ({ id, name, phone, isNew }) => {
|
||||
notes.value.push({
|
||||
id,
|
||||
$isNew: isNew,
|
||||
name,
|
||||
phone,
|
||||
$oldData: null,
|
||||
$orgIndex: null,
|
||||
clientFk: Number(route.params.id),
|
||||
});
|
||||
};
|
||||
|
||||
const deleteNote = (note, index) => {
|
||||
deletes.value.push(note.id);
|
||||
notes.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const onSubmit = async () => {
|
||||
isLoading.value = true;
|
||||
let payload = {};
|
||||
const creates = notes.value.filter((element) => element.$isNew);
|
||||
if (creates.length) {
|
||||
payload.creates = creates;
|
||||
}
|
||||
if (deletes.value.length) {
|
||||
payload.deletes = deletes.value;
|
||||
}
|
||||
try {
|
||||
await axios.post('ClientContacts/crud', payload);
|
||||
notes.value = [];
|
||||
deletes.value = [];
|
||||
notify('globals.dataCreated', 'positive');
|
||||
await getData();
|
||||
} catch (error) {
|
||||
notify('errors.create', 'negative');
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="#st-actions">
|
||||
<QBtn
|
||||
:disabled="isLoading"
|
||||
:label="t('globals.save')"
|
||||
:loading="isLoading"
|
||||
@click="onSubmit"
|
||||
color="primary"
|
||||
icon="save"
|
||||
/>
|
||||
</Teleport>
|
||||
|
||||
<QCard class="q-pa-lg">
|
||||
<QCardSection>
|
||||
<QForm>
|
||||
<CrudModel
|
||||
data-key="CustomerContacts"
|
||||
url="ClientContacts"
|
||||
model="CustomerContacts"
|
||||
:filter="{
|
||||
fields: ['id', 'name', 'phone', 'clientFk'],
|
||||
where: { clientFk: route.params.id },
|
||||
}"
|
||||
ref="customerContactsRef"
|
||||
:default-remove="false"
|
||||
:data-required="{ clientFk: route.params.id }"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QCard class="q-pa-md">
|
||||
<VnRow
|
||||
v-for="(row, index) in rows"
|
||||
:key="index"
|
||||
class="row q-gutter-md q-mb-md"
|
||||
v-for="(note, index) in notes"
|
||||
>
|
||||
<div class="col">
|
||||
<VnInput :label="t('Name')" clearable v-model="note.name" />
|
||||
<VnInput :label="t('Name')" v-model="row.name" />
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('Phone')"
|
||||
clearable
|
||||
type="number"
|
||||
v-model="note.phone"
|
||||
/>
|
||||
<VnInput :label="t('Phone')" v-model="row.phone" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="col-1 row justify-center items-center">
|
||||
<QIcon
|
||||
@click.stop="deleteNote(note, index)"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
name="delete"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
@click="customerContactsRef.remove([row])"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Remove contact') }}
|
||||
|
|
@ -125,33 +56,28 @@ const onSubmit = async () => {
|
|||
</QIcon>
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
<QIcon
|
||||
@click.stop="addNote({ name: '', phone: '', isNew: true })"
|
||||
class="cursor-pointer add-icon q-mt-lg"
|
||||
name="add"
|
||||
size="sm"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Add contact') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</QForm>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
<VnRow>
|
||||
<QIcon
|
||||
name="add"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
@click="customerContactsRef.insert()"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Add contact') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</VnRow>
|
||||
</QCard>
|
||||
</template>
|
||||
</CrudModel>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-icon {
|
||||
background-color: $primary;
|
||||
border-radius: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Name: Nombre
|
||||
Phone: Teléfono
|
||||
Remove contact: Eliminar contacto
|
||||
Remove contact: Quitar contacto
|
||||
Add contact: Añadir contacto
|
||||
</i18n>
|
||||
|
|
|
|||
Loading…
Reference in New Issue