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>

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" />

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>
 

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>

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 />