Customer contacts view

src/pages/Customer/Card/CustomerContacts.vue

@@ -1,123 +1,54 @@
 <script setup>
-import { onBeforeMount, ref } from 'vue';
+import { ref, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 
-import axios from 'axios';
+import CrudModel from 'components/CrudModel.vue';
-
-import useNotify from 'src/composables/useNotify';
-
 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);
+const customerContactsRef = ref(null);
-let notes = ref([]);
-let deletes = ref([]);
 
-onBeforeMount(() => {
+onMounted(() => {
-    getData();
+    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">
+    <CrudModel
-        <QBtn
+        data-key="CustomerContacts"
-            :disabled="isLoading"
+        url="ClientContacts"
-            :label="t('globals.save')"
+        model="CustomerContacts"
-            :loading="isLoading"
+        :filter="{
-            @click="onSubmit"
+            fields: ['id', 'name', 'phone', 'clientFk'],
-            color="primary"
+            where: { clientFk: route.params.id },
-            icon="save"
+        }"
-        />
+        ref="customerContactsRef"
-    </Teleport>
+        :default-remove="false"
-
+        :data-required="{ clientFk: route.params.id }"
-    <QCard class="q-pa-lg">
+    >
-        <QCardSection>
+        <template #body="{ rows }">
-            <QForm>
+            <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
+                        <VnInput :label="t('Phone')" v-model="row.phone" />
-                            :label="t('Phone')"
-                            clearable
-                            type="number"
-                            v-model="note.phone"
-                        />
                     </div>
-
+                    <div class="col-1 row justify-center items-center">
-                    <div class="flex 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>
-
+                <VnRow>
-                <QIcon
+                    <QIcon
-                    @click.stop="addNote({ name: '', phone: '', isNew: true })"
+                        name="add"
-                    class="cursor-pointer add-icon q-mt-lg"
+                        size="sm"
-                    name="add"
+                        class="cursor-pointer"
-                    size="sm"
+                        color="primary"
-                >
+                        @click="customerContactsRef.insert()"
-                    <QTooltip>
+                    >
-                        {{ t('Add contact') }}
+                        <QTooltip>
-                    </QTooltip>
+                            {{ t('Add contact') }}
-                </QIcon>
+                        </QTooltip>
-            </QForm>
+                    </QIcon>
-        </QCardSection>
+                </VnRow>
-    </QCard>
+            </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>