refs #6334 refresh

src/pages/Claim/Card/ClaimLines.vue

@@ -6,9 +6,8 @@ import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
 import { useArrayData } from 'composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import CrudModel from 'components/CrudModel.vue';
 import FetchData from 'components/FetchData.vue';
-import VnConfirm from 'components/ui/VnConfirm.vue';
 
 import { toDate, toCurrency, toPercentage } from 'filters/index';
 import VnDiscount from 'components/common/vnDiscount.vue';
@@ -17,6 +16,7 @@ import ClaimLinesImport from './ClaimLinesImport.vue';
 const quasar = useQuasar();
 const route = useRoute();
 const { t } = useI18n();
+
 const stateStore = useStateStore();
 const arrayData = useArrayData('ClaimLines');
 const store = arrayData.store;
@@ -36,16 +36,17 @@ const linesFilter = {
     },
 };
 
+const claimLinesForm = ref();
 const claim = ref(null);
 async function onFetchClaim(data) {
     claim.value = data;
-
     fetchMana();
 }
 
-const amount = ref(0);
+const amount = ref();
-const amountClaimed = ref(0);
+const amountClaimed = ref();
 async function onFetch(rows) {
+    if (!rows || !rows.length) return;
     amount.value = rows.reduce(
         (acumulator, { sale }) => acumulator + sale.price * sale.quantity,
         0
@@ -141,60 +142,23 @@ function onUpdateDiscount(response) {
     });
 }
 
-async function confirmRemove() {
-    const rows = selected.value;
-    const count = rows.length;
-
-    if (count === 0) {
-        return quasar.notify({
-            message: 'You must select at least one row',
-            type: 'warning',
-        });
-    }
-
-    quasar
-        .dialog({
-            component: VnConfirm,
-            componentProps: {
-                title: t('Delete claimed sales'),
-                message: t('You are about to remove {count} rows', count, { count }),
-                data: { rows },
-                promise: remove,
-            },
-        })
-        .onOk(() => {
-            for (const row of rows) {
-                const orgData = store.data;
-                const index = orgData.findIndex((item) => item.id === row.id);
-                store.data.splice(index, 1);
-                selected.value = [];
-            }
-        });
-}
-
-async function remove({ rows }) {
-    if (!rows.length) return;
-    const body = { deletes: rows.map((row) => row.id) };
-    await axios.post(`ClaimBeginnings/crud`, body);
-    quasar.notify({
-        type: 'positive',
-        message: t('globals.rowRemoved'),
-    });
-}
-
 function showImportDialog() {
     quasar
         .dialog({
             component: ClaimLinesImport,
+            componentProps: {
+                ticketId: claim.value.ticketFk,
+            },
         })
-        .onOk(() => arrayData.refresh());
+        .onOk(() => claimLinesForm.value.reload());
+}
+function isSubToolbarShown() {
+    return amount.value && amountClaimed;
 }
 </script>
 <template>
-    <QPageSticky position="top" :offset="[0, 0]" expand>
+    <Teleport to="#st-data" v-if="isSubToolbarShown()">
-        <QToolbar class="bg-dark text-white">
+        <QToolbar>
-            <QToolbarTitle> {{ t('Claimed lines') }} </QToolbarTitle>
-            <QSpace />
             <div class="row q-gutter-md">
                 <div>
                     {{ t('Amount') }}
@@ -211,7 +175,7 @@ function showImportDialog() {
                 </div>
             </div>
         </QToolbar>
-    </QPageSticky>
+    </Teleport>
 
     <FetchData
         :url="`Claims/${route.params.id}`"
@@ -221,11 +185,16 @@ function showImportDialog() {
     />
     <div class="column items-center">
         <div class="list">
-            <VnPaginate
+            <CrudModel
                 data-key="ClaimLines"
+                ref="claimLinesForm"
                 :url="`Claims/${route.params.id}/lines`"
+                save-url="ClaimBeginnings/crud"
                 :filter="linesFilter"
                 @on-fetch="onFetch"
+                v-model:selected="selected"
+                :default-save="false"
+                :default-reset="false"
                 auto-load
             >
                 <template #body="{ rows }">
@@ -361,46 +330,12 @@ function showImportDialog() {
                         </template>
                     </QTable>
                 </template>
-            </VnPaginate>
+            </CrudModel>
         </div>
     </div>
 
-    <Teleport
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
-        v-if="stateStore.isHeaderMounted() && !$q.screen.lt.sm"
+        <QBtn fab color="primary" icon="add" @click="showImportDialog()" />
-        to="#actions-prepend"
-    >
-        <div class="row q-gutter-x-sm">
-            <QBtn
-                v-if="selected.length > 0"
-                @click="confirmRemove"
-                icon="delete"
-                color="primary"
-                flat
-                dense
-                rounded
-            >
-                <QTooltip bottom> {{ t('globals.remove') }} </QTooltip>
-            </QBtn>
-            <QBtn @click="showImportDialog" icon="add" color="primary" flat dense rounded>
-                <QTooltip bottom> {{ t('globals.add') }} </QTooltip>
-            </QBtn>
-            <QSeparator vertical />
-        </div>
-    </Teleport>
-    <!-- v-if="quasar.platform.is.mobile" -->
-    <QPageSticky v-if="$q.screen.lt.sm" position="bottom" :offset="[0, 0]" expand>
-        <QToolbar class="bg-primary text-white q-pa-none">
-            <QTabs class="full-width" align="justify" inline-label narrow-indicator>
-                <QTab @click="showImportDialog" icon="add" :label="t('globals.add')" />
-                <QSeparator vertical inset />
-                <QTab
-                    @click="confirmRemove"
-                    icon="delete"
-                    :label="t('globals.remove')"
-                    :disable="selected.length === 0"
-                />
-            </QTabs>
-        </QToolbar>
     </QPageSticky>
 </template>
 
@@ -421,7 +356,6 @@ en:
         You are about to remove <strong>{count}</strong> row |
         You are about to remove  <strong>{count}</strong> rows'
 es:
-    Claimed lines: Líneas reclamadas
     Delivered: Entregado
     Quantity: Cantidad
     Claimed: Reclamada