From 8cf14929e30754bcb1ff1f80c87d07d97bb23604 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Wed, 27 Mar 2024 08:52:31 -0500
Subject: [PATCH] Se implementa nuevo componente para la gestion de notas

---
 src/pages/Worker/Card/WorkerNotes.vue         | 108 ++++--------------
 .../Worker/components/WorkerNoteCreate.vue    |  99 ----------------
 2 files changed, 24 insertions(+), 183 deletions(-)
 delete mode 100644 src/pages/Worker/components/WorkerNoteCreate.vue

diff --git a/src/pages/Worker/Card/WorkerNotes.vue b/src/pages/Worker/Card/WorkerNotes.vue
index 07761c697..6c74aefa0 100644
--- a/src/pages/Worker/Card/WorkerNotes.vue
+++ b/src/pages/Worker/Card/WorkerNotes.vue
@@ -1,98 +1,38 @@
 <script setup>
-import { onBeforeMount, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 
-import axios from 'axios';
-import { date } from 'quasar';
+import VnNotes from 'src/components/ui/VnNotes.vue';
 
-const { t } = useI18n();
 const route = useRoute();
-const router = useRouter();
-
-const rows = ref([]);
 
 const filter = {
     order: 'created DESC',
-    where: { workerFk: null },
-    include: { relation: 'user' },
+    where: { workerFk: route.params.id },
+    include: {
+        relation: 'worker',
+        scope: {
+            fields: ['id', 'firstName', 'lastName'],
+            include: {
+                relation: 'user',
+                scope: {
+                    fields: ['id', 'nickname'],
+                },
+            },
+        },
+    },
 };
 
-onBeforeMount(() => {
-    getData(route.params.id);
-});
-
-watch(
-    () => route.params.id,
-    (newValue) => {
-        getData(newValue);
-    }
-);
-
-const getData = async (id) => {
-    filter.where.workerFk = id;
-    try {
-        const { data } = await axios.get('WorkerObservations', {
-            params: { filter: JSON.stringify(filter) },
-        });
-        rows.value = data;
-    } catch (error) {
-        console.error(error);
-    }
-};
-
-const toWorkerNoteCreate = () => {
-    router.push({ name: 'WorkerNoteCreate' });
+const body = {
+    workerFk: route.params.id,
 };
 </script>
 
 <template>
-    <div class="full-width flex justify-center">
-        <QCard class="full-width q-pa-lg" v-if="rows.length">
-            <div>
-                <QCard
-                    v-for="(item, index) in rows"
-                    :key="index"
-                    :class="{
-                        'q-pa-md': true,
-                        'q-rounded': true,
-                        'custom-border': true,
-                        'q-mb-md': index < rows.length - 1,
-                    }"
-                >
-                    <div class="flex justify-end">
-                        <p class="color-vn-label q-mb-none">
-                            {{ date.formatDate(item?.created, 'DD-MM-YYYY HH:mm') }}
-                        </p>
-                    </div>
-                    <h6 class="q-mt-none q-mb-none">{{ item.text }}</h6>
-                </QCard>
-            </div>
-        </QCard>
-        <div v-else>
-            <h5 class="flex justify-center color-vn-label">
-                {{ t('globals.noResults') }}
-            </h5>
-        </div>
-    </div>
-
-    <QPageSticky :offset="[18, 18]">
-        <QBtn @click.stop="toWorkerNoteCreate()" color="primary" fab icon="add" />
-        <QTooltip>
-            {{ t('New note') }}
-        </QTooltip>
-    </QPageSticky>
+    <VnNotes
+        style="overflow-y: auto"
+        :add-note="{ type: Boolean, default: true }"
+        url="WorkerObservations"
+        :filter="filter"
+        :body="body"
+    />
 </template>
-
-<style lang="scss">
-.custom-border {
-    border: 2px solid var(--vn-light-gray);
-    border-radius: 10px;
-    padding: 10px;
-}
-</style>
-
-<i18n>
-es:
-    New note: Nueva nota
-</i18n>
diff --git a/src/pages/Worker/components/WorkerNoteCreate.vue b/src/pages/Worker/components/WorkerNoteCreate.vue
deleted file mode 100644
index 7e4c1f48c..000000000
--- a/src/pages/Worker/components/WorkerNoteCreate.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-
-import axios from 'axios';
-
-import useNotify from 'src/composables/useNotify';
-
-import VnRow from 'components/ui/VnRow.vue';
-
-const { notify } = useNotify();
-const { t } = useI18n();
-const route = useRoute();
-const router = useRouter();
-
-const isLoading = ref(false);
-const text = ref('');
-
-const hasChanged = computed(() => {
-    return text.value !== '';
-});
-
-const onSubmit = async () => {
-    isLoading.value = true;
-
-    const payload = {
-        text: text.value,
-        workerFk: Number(route.params.id),
-    };
-    try {
-        await axios.post('WorkerObservations', payload);
-        text.value = null;
-        notify('globals.dataSaved', 'positive');
-        toWorkerNotes();
-    } catch (error) {
-        notify(error.error, 'negative');
-    } finally {
-        isLoading.value = false;
-    }
-};
-
-const toWorkerNotes = () => {
-    router.push({
-        name: 'WorkerNotes',
-        params: {
-            id: route.params.id,
-        },
-    });
-};
-</script>
-
-<template>
-    <Teleport to="#st-actions">
-        <QBtnGroup push class="q-gutter-x-sm">
-            <QBtn
-                :disabled="isLoading"
-                :label="t('globals.cancel')"
-                :loading="isLoading"
-                @click="toWorkerNotes"
-                color="primary"
-                flat
-                icon="close"
-            />
-            <QBtn
-                :disabled="!hasChanged"
-                :label="t('globals.save')"
-                :loading="isLoading"
-                @click="onSubmit"
-                color="primary"
-                icon="save"
-            />
-        </QBtnGroup>
-    </Teleport>
-
-    <div class="full-width flex justify-center">
-        <QCard class="card-width q-pa-lg">
-            <QCardSection>
-                <QForm>
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput
-                                :label="t('Note')"
-                                autofocus
-                                type="textarea"
-                                v-model="text"
-                            />
-                        </div>
-                    </VnRow>
-                </QForm>
-            </QCardSection>
-        </QCard>
-    </div>
-</template>
-
-<i18n>
-es:
-    Note: Nota
-</i18n>