Entries several changes

2024-02-02 12:45:29 -03:00 · 2024-02-02 12:45:29 -03:00 · ba45f71a42
parent bb1ddf5900
commit ba45f71a42
5 changed files with 199 additions and 20 deletions
--- a/src/components/EditTableCellValueForm.vue
+++ b/src/components/EditTableCellValueForm.vue
@ -0,0 +1,146 @@
+<script setup>
+import { ref, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const emit = defineEmits(['onDataSaved']);
+
+const $props = defineProps({
+    rows: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const { t } = useI18n();
+const { notify } = useNotify();
+
+const fieldsOptions = [
+    { field: 'packing', label: t('entry.latestBuys.packing') },
+    { field: 'grouping', label: t('entry.latestBuys.grouping') },
+    { field: 'packageValue', label: t('entry.latestBuys.packageValue') },
+    { field: 'weight', label: t('entry.latestBuys.weight') },
+    { field: 'description', label: t('entry.latestBuys.description') },
+    { field: 'size', label: t('entry.latestBuys.size') },
+    { field: 'weightByPiece', label: t('entry.latestBuys.weightByPiece') },
+    { field: 'packingOut', label: t('entry.latestBuys.packingOut') },
+    { field: 'landing', label: t('entry.latestBuys.landing') },
+];
+
+const formData = reactive({
+    field: null,
+    newValue: null,
+});
+
+const closeButton = ref(null);
+const isLoading = ref(false);
+
+const onDataSaved = () => {
+    notify('globals.dataSaved', 'positive');
+    emit('onDataSaved');
+    closeForm();
+};
+
+const submitData = async () => {
+    try {
+        isLoading.value = true;
+        const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk }));
+        console.log('submit:: ');
+        const payload = {
+            field: formData.field,
+            newValue: formData.newValue,
+            lines: rowsToEdit,
+        };
+
+        await axios.post('Buys/editLatestBuys', payload);
+        onDataSaved();
+        isLoading.value = false;
+    } catch (err) {
+        console.error('Error submitting table cell edit');
+    }
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+</script>
+
+<template>
+    <QForm @submit="submitData()" class="all-pointer-events">
+        <QCard class="q-pa-lg">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="sm" />
+            </span>
+            <h1 class="title">
+                {{
+                    t('editBuyTitle', {
+                        buysAmount: rows.length,
+                    })
+                }}
+            </h1>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Field to edit')"
+                        :options="fieldsOptions"
+                        hide-selected
+                        option-label="label"
+                        option-value="field"
+                        v-model="formData.field"
+                    />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Value')" v-model="formData.newValue" />
+                </div>
+            </VnRow>
+            <div class="q-mt-lg row justify-end">
+                <QBtn
+                    :label="t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
+                <QBtn
+                    :label="t('globals.cancel')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    v-close-popup
+                />
+            </div>
+        </QCard>
+    </QForm>
+</template>
+
+<style lang="scss" scoped>
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+</style>
+
+<i18n>
+    en:
+        editBuyTitle: Edit {buysAmount} buy(s)
+    es:
+        editBuyTitle: Editar {buysAmount} compra(s)
+        Field to edit: Campo a editar
+        Value: Valor
+    </i18n>
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { onMounted, onUnmounted, computed, ref, watch } from 'vue';
+import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useState } from 'src/composables/useState';
@ -67,7 +67,13 @@ defineExpose({
    save,
 });

+const componentIsRendered = ref(false);
+
 onMounted(async () => {
+    nextTick(() => {
+        componentIsRendered.value = true;
+    });
+
    // Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
    if ($props.formInitialData && !$props.autoLoad) {
        state.set($props.model, $props.formInitialData);
@ -205,7 +211,10 @@ watch(formUrl, async () => {
            </QCard>
        </QForm>
    </div>
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+    <Teleport
+        to="#st-actions"
+        v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
+    >
        <div v-if="$props.defaultActions">
            <QBtnGroup push class="q-gutter-x-sm">
                <slot name="moreActions" />
--- a/src/pages/Entry/EntryLatestBuys.vue
+++ b/src/pages/Entry/EntryLatestBuys.vue
@ -1,22 +1,27 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';

 import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import EntryDescriptorProxy from './Card/EntryDescriptorProxy.vue';
 import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
+import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';

 import { useStateStore } from 'stores/useStateStore';
 import { toDate, toCurrency } from 'src/filters';
 import { useSession } from 'composables/useSession';
 import { dashIfEmpty } from 'src/filters';

+const router = useRouter();
 const session = useSession();
 const token = session.getToken();
 const stateStore = useStateStore();
 const { t } = useI18n();

+const rowsFetchDataRef = ref(null);
+const editTableCellDialogRef = ref(null);
 const visibleColumns = ref([]);
 const allColumnNames = ref([]);
 const rows = ref([]);
@ -204,10 +209,20 @@ const columns = computed(() => [
    },
 ]);

-const openEditRowField = () => {
+const openEditTableCellDialog = () => {
+    editTableCellDialogRef.value.show();
    console.log('open edit row form: ', rowsSelected.value);
 };

+const onEditCellDataSaved = async () => {
+    rowsSelected.value = [];
+    await rowsFetchDataRef.value.fetch();
+};
+
+const redirectToEntryBuys = (entryFk) => {
+    router.push({ name: 'EntryBuys', params: { id: entryFk } });
+};
+
 onMounted(async () => {
    stateStore.rightDrawer = true;
    const filteredColumns = columns.value.filter((col) => col.name !== 'picture');
@ -217,6 +232,7 @@ onMounted(async () => {

 <template>
    <FetchData
+        ref="rowsFetchDataRef"
        url="Buys/latestBuysFilter"
        :filter="{ order: 'itemFk DESC', limit: 20 }"
        @on-fetch="(data) => (rows = data)"
@ -250,6 +266,7 @@ onMounted(async () => {
            class="full-width q-mt-md"
            :visible-columns="visibleColumns"
            v-model:selected="rowsSelected"
+            @row-click="(_, row) => redirectToEntryBuys(row.entryFk)"
        >
            <template #body-cell-picture="{ row }">
                <QTd>
@ -264,7 +281,7 @@ onMounted(async () => {
                </QTd>
            </template>
            <template #body-cell-itemFk="{ row }">
-                <QTd>
+                <QTd @click.stop="">
                    <QBtn flat color="blue">
                        {{ row.itemFk }}
                    </QBtn>
@ -276,7 +293,7 @@ onMounted(async () => {
                </QTd>
            </template>
            <template #body-cell-entryFk="{ row }">
-                <QTd>
+                <QTd @click.stop="">
                    <QBtn flat color="blue">
                        <EntryDescriptorProxy :id="row.entryFk" />
                        {{ row.entryFk }}
@ -302,12 +319,18 @@ onMounted(async () => {
                </QTd>
            </template>
        </QTable>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn @click="openEditRowField()" color="primary" fab icon="edit" />
+        <QPageSticky v-if="rowsSelected.length > 0" :offset="[20, 20]">
+            <QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
            <QTooltip>
                {{ t('Edit buy(s)') }}
            </QTooltip>
        </QPageSticky>
+        <QDialog ref="editTableCellDialogRef">
+            <EditTableCellValueForm
+                :rows="rowsSelected"
+                @on-data-saved="onEditCellDataSaved()"
+            />
+        </QDialog>
    </QPage>
 </template>

--- a/src/pages/Entry/EntryList.vue
+++ b/src/pages/Entry/EntryList.vue
@ -9,7 +9,6 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import EntrySummaryDialog from './Card/EntrySummaryDialog.vue';
 import EntryFilter from './EntryFilter.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';

 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
@ -42,16 +41,6 @@ onMounted(async () => {
 </script>

 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="EntryList"
-                url="Entries/filter"
-                :label="t('Search entries')"
-                :info="t('You can search by entry reference')"
-            />
-        </Teleport>
-    </template>
    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
        <QScrollArea class="fit text-grey-8">
            <EntryFilter data-key="EntryList" />
@ -141,8 +130,6 @@ onMounted(async () => {

 <i18n>
 es:
-    Search entries: Buscar entradas
-    You can search by entry reference: Puedes buscar por referencia de la entrada
    Inventory entry: Es inventario
    Virtual entry: Es una redada
 </i18n>
--- a/src/pages/Entry/EntryMain.vue
+++ b/src/pages/Entry/EntryMain.vue
@ -1,12 +1,26 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+
 import LeftMenu from 'src/components/LeftMenu.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';

 import { useStateStore } from 'stores/useStateStore';

 const stateStore = useStateStore();
+const { t } = useI18n();
 </script>

 <template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="EntryList"
+                url="Entries/filter"
+                :label="t('Search entries')"
+                :info="t('You can search by entry reference')"
+            />
+        </Teleport>
+    </template>
    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
        <QScrollArea class="fit text-grey-8">
            <LeftMenu />