From fe78de0c4761772593a3e714c69894f36651e696 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 5 Aug 2024 11:49:06 +0200
Subject: [PATCH] refs #7283 fixedPrices

---
 src/pages/Item/ItemFixedPrice.vue | 325 +++++++-----------------------
 1 file changed, 70 insertions(+), 255 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 2ecd1f21b..41f2bac2f 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { onMounted, ref, reactive, computed, onUnmounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-
+import { toDate } from 'src/filters';
 import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -10,7 +10,7 @@ import VnInputDate from 'src/components/common/VnInputDate.vue';
 import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
 import ItemFixedPriceFilter from './ItemFixedPriceFilter.vue';
 import ItemDescriptorProxy from './Card/ItemDescriptorProxy.vue';
-
+import VnTable from 'components/VnTable/VnTable.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { dashIfEmpty } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
@@ -27,7 +27,7 @@ const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
 const state = useState();
 const { notify } = useNotify();
-
+const tableRef = ref();
 const editTableCellDialogRef = ref(null);
 const user = state.getUser();
 const fixedPrices = ref([]);
@@ -111,86 +111,81 @@ const defaultColumnAttrs = {
 const columns = computed(() => [
     {
         label: t('item.fixedPrice.itemId'),
-        name: 'itemId',
-        field: 'itemFk',
-        ...defaultColumnAttrs,
-        columnFilter: {
-            ...defaultColumnFilter,
+        name: 'itemFk',
+        align: 'left',
+        isId: true,
+        chip: {
+            condition: () => true,
         },
     },
     {
         label: t('globals.description'),
-        field: 'name',
         name: 'description',
-        ...defaultColumnAttrs,
-        columnFilter: {
-            ...defaultColumnFilter,
-        },
+        align: 'left',
+        create: true,
     },
     {
         label: t('item.fixedPrice.groupingPrice'),
-        field: 'rate2',
-        name: 'groupingPrice',
-        ...defaultColumnAttrs,
-        columnFilter: {
-            ...defaultColumnFilter,
-        },
-        format: (val) => toCurrency(val),
+        name: 'rate2',
+        align: 'left',
+        create: true,
     },
     {
         label: t('item.fixedPrice.packingPrice'),
-        field: 'rate3',
-        name: 'packingPrice',
-        ...defaultColumnAttrs,
-        columnFilter: {
-            ...defaultColumnFilter,
-        },
-        format: (val) => dashIfEmpty(val),
+        name: 'rate3',
+        align: 'left',
+        create: true,
     },
 
     {
         label: t('item.fixedPrice.minPrice'),
-        field: 'minPrice',
         name: 'minPrice',
-        ...defaultColumnAttrs,
-        columnFilter: {
-            ...defaultColumnFilter,
-        },
+        align: 'left',
+        create: true,
     },
     {
         label: t('item.fixedPrice.started'),
-        field: 'started',
         name: 'started',
-        ...defaultColumnAttrs,
-        columnFilter: null,
+        align: 'left',
+        create: true,
+        format: (row) => toDate(row.started),
     },
     {
         label: t('item.fixedPrice.ended'),
-        field: 'ended',
         name: 'ended',
-        ...defaultColumnAttrs,
-        columnFilter: null,
+        align: 'left',
+        create: true,
+        format: (row) => toDate(row.ended),
     },
-
     {
         label: t('item.fixedPrice.warehouse'),
-        field: 'warehouseFk',
-        name: 'warehouse',
-        ...defaultColumnAttrs,
+        name: 'warehouseFk',
         columnFilter: {
-            component: VnSelect,
-            type: 'select',
-            filterValue: null,
-            event: getColumnInputEvents,
+            component: 'select',
             attrs: {
-                options: warehousesOptions.value,
-                'option-value': 'id',
-                'option-label': 'name',
-                dense: true,
+                url: 'Warehouses',
+                optionValue: 'id',
+                optionLabel: 'name',
             },
         },
+        component: 'select',
+        attrs: {
+            url: 'Warehouses',
+            fields: ['id', 'name'],
+        },
+        disable: false,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Delete'),
+                icon: 'delete',
+            },
+        ],
     },
-    { name: 'deleteAction', align: 'center' },
 ]);
 
 const editTableFieldsOptions = [
@@ -364,212 +359,32 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
-    <FetchData
-        url="Warehouses"
-        :filter="{ order: ['name'] }"
+    <VnTable
+        ref="tableRef"
+        data-key="ItemFixedPrices"
+        url="FixedPrices/filter"
+        :create="{
+            urlCreate: 'PriceFixed',
+            title: 'Create Item',
+            onDataSaved: () => tableRef.redirect(),
+            formInitialData: {},
+        }"
+        order="id ASC"
+        :columns="columns"
         auto-load
-        @on-fetch="(data) => onWarehousesFetched(data)"
-    />
-    <RightMenu>
-        <template #right-panel>
-            <ItemFixedPriceFilter
-                data-key="ItemFixedPrices"
-                :warehouses-options="warehousesOptions"
-            />
+        :is-editable="false"
+        :use-model="true"
+    >
+        <template #column-description="{ row }">
+            <div class="row column full-width justify-between items-start">
+                {{ row?.description }}
+                <div v-if="row?.description" class="subName">
+                    {{ row?.subName.toUpperCase() }}
+                </div>
+            </div>
+            <FetchedTags :item="row" :max-length="6" />
         </template>
-    </RightMenu>
-    <QPage class="column items-center q-pa-md">
-        <QTable
-            :rows="fixedPrices"
-            :columns="columns"
-            row-key="id"
-            selection="multiple"
-            v-model:selected="rowsSelected"
-            :pagination="{ rowsPerPage: 0 }"
-            class="full-width q-mt-md"
-            :no-data-label="t('globals.noResults')"
-        >
-            <template #top-row="{ cols }">
-                <QTr>
-                    <QTd />
-                    <QTd
-                        v-for="(col, index) in cols"
-                        :key="index"
-                        style="max-width: 100px"
-                    >
-                        <component
-                            :is="col.columnFilter.component"
-                            v-if="col.columnFilter"
-                            v-model="col.columnFilter.filterValue"
-                            v-bind="col.columnFilter.attrs"
-                            v-on="col.columnFilter.event(col)"
-                            dense
-                        />
-                    </QTd>
-                </QTr>
-            </template>
-
-            <template #body-cell-itemId="props">
-                <QTd>
-                    <VnSelect
-                        url="Items/withName"
-                        hide-selected
-                        option-label="id"
-                        option-value="id"
-                        v-model="props.row.itemFk"
-                        v-on="getRowUpdateInputEvents(props, true, 'select')"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
-                                    <QItemLabel caption>{{ scope.opt?.name }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
-                </QTd>
-            </template>
-            <template #body-cell-description="{ row }">
-                <QTd class="col">
-                    <span class="link">
-                        {{ row.name }}
-                    </span>
-                    <ItemDescriptorProxy :id="row.itemFk" />
-                    <FetchedTags :item="row" :max-length="6" />
-                </QTd>
-            </template>
-            <template #body-cell-groupingPrice="props">
-                <QTd class="col">
-                    <VnInput
-                        v-model.number="props.row.rate2"
-                        v-on="getRowUpdateInputEvents(props)"
-                    >
-                        <template #append>€</template>
-                    </VnInput>
-                </QTd>
-            </template>
-            <template #body-cell-packingPrice="props">
-                <QTd class="col">
-                    <VnInput
-                        v-model.number="props.row.rate3"
-                        v-on="getRowUpdateInputEvents(props)"
-                    >
-                        <template #append>€</template>
-                    </VnInput>
-                </QTd>
-            </template>
-            <template #body-cell-minPrice="props">
-                <QTd class="col">
-                    <div class="row">
-                        <QCheckbox
-                            class="col"
-                            :model-value="props.row.hasMinPrice"
-                            @update:model-value="updateMinPrice($event, props)"
-                            :false-value="0"
-                            :true-value="1"
-                            :toggle-indeterminate="false"
-                        />
-                        <VnInput
-                            class="col"
-                            :disable="!props.row.hasMinPrice"
-                            v-model.number="props.row.minPrice"
-                            v-on="getRowUpdateInputEvents(props)"
-                            type="number"
-                        />
-                    </div>
-                </QTd>
-            </template>
-            <template #body-cell-started="props">
-                <QTd class="col" style="min-width: 160px">
-                    <VnInputDate
-                        v-model="props.row.started"
-                        v-on="getRowUpdateInputEvents(props, false, 'date')"
-                        v-bind="
-                            isBigger(props.row.started)
-                                ? { 'bg-color': 'warning', 'is-outlined': true }
-                                : {}
-                        "
-                    />
-                </QTd>
-            </template>
-            <template #body-cell-ended="props">
-                <QTd class="col" style="min-width: 150px">
-                    <VnInputDate
-                        v-model="props.row.ended"
-                        v-on="getRowUpdateInputEvents(props, false, 'date')"
-                        v-bind="
-                            isLower(props.row.ended)
-                                ? { 'bg-color': 'warning', 'is-outlined': true }
-                                : {}
-                        "
-                    />
-                </QTd>
-            </template>
-            <template #body-cell-warehouse="props">
-                <QTd class="col">
-                    <VnSelect
-                        :options="warehousesOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="props.row.warehouseFk"
-                        v-on="getRowUpdateInputEvents(props, false, 'select')"
-                    />
-                </QTd>
-            </template>
-            <template #body-cell-deleteAction="{ row, rowIndex }">
-                <QTd class="col">
-                    <QIcon
-                        name="delete"
-                        size="sm"
-                        class="cursor-pointer fill-icon-on-hover"
-                        color="primary"
-                        @click.stop="
-                            openConfirmationModal(
-                                t('This row will be removed'),
-                                t('Do you want to clone this item?'),
-                                () => removePrice(row.id, rowIndex)
-                            )
-                        "
-                    >
-                        <QTooltip class="text-no-wrap">
-                            {{ t('Delete') }}
-                        </QTooltip>
-                    </QIcon>
-                </QTd>
-            </template>
-            <template #bottom-row>
-                <QTd align="center">
-                    <QIcon
-                        @click.stop="addRow()"
-                        class="fill-icon-on-hover"
-                        color="primary"
-                        name="add_circle"
-                        size="sm"
-                    >
-                        <QTooltip>
-                            {{ t('Add fixed price') }}
-                        </QTooltip>
-                    </QIcon>
-                </QTd>
-            </template>
-        </QTable>
-        <QPageSticky v-if="rowsSelected.length" :offset="[20, 20]">
-            <QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
-            <QTooltip>
-                {{ t('Edit fixed price(s)') }}
-            </QTooltip>
-        </QPageSticky>
-        <QDialog ref="editTableCellDialogRef">
-            <EditTableCellValueForm
-                edit-url="FixedPrices/editFixedPrice"
-                :rows="rowsSelected"
-                :fields-options="editTableFieldsOptions"
-                @on-data-saved="onEditCellDataSaved()"
-            />
-        </QDialog>
-    </QPage>
+    </VnTable>
 </template>
 
 <i18n>