feat: remove future itemFixedPrices

src/pages/Item/ItemFixedPrice.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { onMounted, ref, reactive, computed, onUnmounted, watch, nextTick } from 'vue';
+import { onMounted, ref, reactive, onUnmounted, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
@@ -21,7 +22,9 @@ import axios from 'axios';
 import { useArrayData } from 'composables/useArrayData';
 import { isLower, isBigger } from 'src/filters/date.js';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import { QCheckbox } from 'quasar';
 
+const checked = ref(false);
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
@@ -302,7 +305,7 @@ async function saveOnRowChange(_, row) {
 }
 const tableRef = ref();
 function checkLastVisibleRow() {
-    const tableBody = tableRef.value.$el.querySelector('tbody.q-virtual-scroll__content');
+    const tableBody = tableRef.value.$el.querySelector('tbody');
     if (!tableBody) return;
     const rows = tableBody.querySelectorAll('tr');
     let lastVisibleRow = null;
@@ -351,7 +354,7 @@ const addRow = () => {
     });
 };
 function highlightNewRow(index) {
-    const tableBody = tableRef.value.$el.querySelector('tbody.q-virtual-scroll__content');
+    const tableBody = tableRef.value.$el.querySelector('tbody');
     const row = tableBody.querySelectorAll('tr')[index];
     if (row) {
         row.classList.add('highlight');
@@ -365,11 +368,15 @@ const openEditTableCellDialog = () => {
 };
 async function showBadDates() {
     try {
-        const { data } = await axios.get('FixedPrices/filter', {
+        if (!checked.value) fixedPrices.value = fixedPricesOriginalData.value;
-            params: {
+        else {
-                showBadDates: true,
+            const { data } = await axios.get('FixedPrices/filter', {
-            },
+                params: {
-        });
+                    showBadDates: checked.value,
+                },
+            });
+            fixedPrices.value = data;
+        }
     } catch (error) {
         console.error(error);
     }
@@ -388,6 +395,16 @@ const onWarehousesFetched = (data) => {
     warehouseField.attrs.options = data;
 };
 
+const removeFuturePrice = async () => {
+    try {
+        rowsSelected.value.forEach(({ id }) => {
+            const rowIndex = fixedPrices.value.findIndex((r) => r.id === id);
+            removePrice(id, rowIndex);
+        });
+    } catch (err) {
+        console.error('Error removing price', err);
+    }
+};
 const removePrice = async (id, rowIndex) => {
     try {
         await axios.delete(`FixedPrices/${id}`);
@@ -399,10 +416,6 @@ const removePrice = async (id, rowIndex) => {
     }
 };
 
-function onScroll({ to, ref }) {
-    console.log(to, ref);
-}
-
 const updateMinPrice = async (value, props) => {
     // El checkbox hasMinPrice se encuentra en la misma columna que el input hasMinPrice
     // Por lo tanto le mandamos otro objeto con las mismas propiedades pero con el campo 'field' cambiado
@@ -438,12 +451,20 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             />
         </template>
     </RightMenu>
+    <VnSubToolbar>
+        <template #st-data>
+            <QCheckbox
+                size="sm"
+                v-model="checked"
+                :label="t(`Show future items`)"
+                @update:model-value="showBadDates"
+            >
+            </QCheckbox>
+        </template>
+    </VnSubToolbar>
     <QPage class="column items-center q-pa-md">
-        {{ rowsSelected }}
         <QTable
             ref="tableRef"
-            @virtual-scroll="onScroll"
-            virtual-scroll
             dense
             :rows="fixedPrices"
             :columns="columns"
@@ -454,7 +475,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             class="full-width q-mt-md"
             :no-data-label="t('globals.noResults')"
             @row-click="saveOnRowChange"
-            :virtual-scroll-item-size="48"
         >
             <template #top-row="{ cols }">
                 <QTr>
@@ -489,6 +509,19 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                                 {{ t('Add fixed price') }}
                             </QTooltip>
                         </QIcon>
+                        <!-- <QIcon
+                                v-if="!(checked && rowsSelected.length > 0)"
+                            v-else-if="tableRef?.rows?.length > 0"
+                            @click.stop="removeFuturePrice()"
+                            class="fill-icon-on-hover"
+                            color="primary"
+                            name="delete"
+                            size="sm"
+                        >
+                            <QTooltip>
+                                {{ t('Add fixed price') }}
+                            </QTooltip>
+                        </QIcon>-->
                     </QTh>
                     <QTh
                         v-for="col in props.cols"
@@ -593,7 +626,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         :show-event="false"
                         v-model="props.row.started"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
-                        :options="(date) => date > props.row.ended"
                         v-bind="
                             isBigger(props.row.started)
                                 ? {
@@ -611,7 +643,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         style="max-width: 125px"
                         :show-event="false"
                         v-model="props.row.ended"
-                        :options="isLower(props.row.started)"
                         v-on="getRowUpdateInputEvents(props, false, 'date')"
                         v-bind="
                             isLower(props.row.started)
@@ -673,24 +704,38 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QTd>
             </template>
         </QTable>
-        <QPageSticky :offset="[20, 20]">
+        <QPageSticky :offset="[20, 0]">
-            <QBtn @click="showBadDates()" color="primary" fab icon="edit" />
-            <QTooltip>
-                {{ t('Edit fixed price(s)') }}
-            </QTooltip>
-        </QPageSticky>
-        <QPageSticky :offset="[20, -20]">
             <QBtn @click="addRow()" color="primary" fab icon="add" />
             <QTooltip>
                 {{ t('Add') }}
             </QTooltip>
         </QPageSticky>
-        <QPageSticky v-if="rowsSelected.length" :offset="[20, 20]">
+        <QPageSticky v-if="rowsSelected.length" :offset="[20, 60]">
             <QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
             <QTooltip>
                 {{ t('Edit fixed price(s)') }}
             </QTooltip>
         </QPageSticky>
+        <QPageSticky
+            :offset="[20, 120]"
+            v-if="tableRef?.rows?.length > 0 && checked && rowsSelected.length > 0"
+        >
+            <QBtn
+                color="primary"
+                fab
+                icon="delete"
+                @click.stop="
+                    openConfirmationModal(
+                        t('This row will be removed'),
+                        t('Do you want to clone this item?'),
+                        () => removeFuturePrice()
+                    )
+                "
+            />
+            <QTooltip>
+                {{ t('Add') }}
+            </QTooltip>
+        </QPageSticky>
         <QDialog ref="editTableCellDialogRef">
             <EditTableCellValueForm
                 edit-url="FixedPrices/editFixedPrice"
@@ -712,27 +757,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 }
 /* height or max-height is important */
 
-.q-table__top,
-.q-table__bottom,
-tbody tr:first-child td {
-    /* bg color is important for th; just specify one */
-    background-color: #00b4ff;
-}
-thead tr th {
-    position: sticky;
-    z-index: 1;
-}
-thead tr:first-child th {
-    top: 0;
-}
-
-/* this is when the loading indicator appears */
-
-/* prevent scrolling behind sticky top row on focus */
-tbody
-    /* height of all previous header rows */ {
-    scroll-margin-top: 148px;
-}
 tbody tr.highlight .q-td {
     animation: highlight-animation 4s ease-in-out;
 }