refs #6618 component Cards

src/components/ui/VnSubToolBar.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useStateStore } from 'stores/useStateStore';
+const stateStore = useStateStore();
+
+onMounted(() => {
+    stateStore.toggleSubToolbar();
+});
+
+onUnmounted(() => {
+    stateStore.toggleSubToolbar();
+});
+</script>
+
+<template>
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+</template>

src/components/ui/vnSubToolBar.vue

@@ -1,32 +0,0 @@
-<script setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { defineStore } from 'pinia';
-
-const useStateStore = defineStore('stateStore', () => {
-    const subToolbar = ref(false);
-
-    function toggleSubToolbar() {
-        subToolbar.value = !subToolbar.value;
-    }
-
-    return {
-        toggleSubToolbar,
-    };
-});
-
-onMounted(() => {
-    useStateStore();
-});
-
-onUnmounted(() => {
-    useStateStore();
-});
-</script>
-
-<template>
-    <QToolbar class="bg-vn-dark justify-end">
-        <div id="st-data"></div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
-</template>

src/pages/Claim/Card/ClaimCard.vue

@@ -7,8 +7,8 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import ClaimDescriptor from './ClaimDescriptor.vue';
+import VnSubToolBar from 'src/components/ui/VnSubToolBar.vue';
 
-import { onMounted, onUnmounted } from 'vue';
 const stateStore = useStateStore();
 const { t } = useI18n();
 const route = useRoute();
@@ -22,18 +22,6 @@ const $props = defineProps({
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-
-onMounted(() => {
-    console.log('MOUNTED', stateStore.isSubToolbarShown());
-    stateStore.toggleSubToolbar();
-    console.log('MOUNTED', stateStore.isSubToolbarShown());
-});
-
-onUnmounted(() => {
-    console.log('MOUNTED', stateStore.isSubToolbarShown());
-    stateStore.toggleSubToolbar();
-    console.log('MOUNTED', stateStore.isSubToolbarShown());
-});
 </script>
 <template>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
@@ -53,11 +41,7 @@ onUnmounted(() => {
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
+            <VnSubToolBar />
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>

src/pages/Claim/Card/ClaimLines.vue

@@ -12,14 +12,12 @@ import FetchData from 'components/FetchData.vue';
 import { toDate, toCurrency, toPercentage } from 'filters/index';
 import VnDiscount from 'components/common/vnDiscount.vue';
 import ClaimLinesImport from './ClaimLinesImport.vue';
-import VnSubToolBar from 'src/components/ui/vnSubToolBar.vue';
 
 const quasar = useQuasar();
 const route = useRoute();
 const { t } = useI18n();
 
 const stateStore = useStateStore();
-const subToolbarLoaded = computed(() => stateStore.isSubToolbarShown());
 const arrayData = useArrayData('ClaimLines');
 const store = arrayData.store;
 
@@ -48,14 +46,17 @@ async function onFetchClaim(data) {
 const amount = ref();
 const amountClaimed = ref();
 async function onFetch(rows) {
+    amount.value = 0;
+    amountClaimed.value = 0;
     if (!rows || !rows.length) return;
+
     amount.value = rows.reduce(
-        (acumulator, { sale }) => acumulator + sale.price * sale.quantity,
+        (accumulator, { sale }) => accumulator + sale.price * sale.quantity,
         0
     );
 
     amountClaimed.value = rows.reduce(
-        (acumulator, line) => acumulator + line.sale.price * line.quantity,
+        (accumulator, line) => accumulator + line.sale.price * line.quantity,
         0
     );
 }
@@ -154,30 +155,9 @@ function showImportDialog() {
         })
         .onOk(() => claimLinesForm.value.reload());
 }
-function isSubToolbarShown() {
-    return amount.value && amountClaimed;
-}
 </script>
 <template>
-    {{ subToolbarLoaded }}
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-    <VnSubToolBar>
-        <div class="row q-gutter-md">
-            <div>
-                {{ t('Amount') }}
-                <QChip :dense="$q.screen.lt.sm">
-                    {{ toCurrency(amount) }}
-                </QChip>
-            </div>
-            <QSeparator dark vertical />
-            <div>
-                {{ t('Amount Claimed') }}
-                <QChip color="positive" :dense="$q.screen.lt.sm">
-                    {{ toCurrency(amountClaimed) }}
-                </QChip>
-            </div>
-        </div>
-    </VnSubToolBar>
-    <!-- <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
         <QToolbar>
             <div class="row q-gutter-md">
                 <div>
@@ -195,7 +175,7 @@ function isSubToolbarShown() {
                 </div>
             </div>
         </QToolbar>
-    </Teleport> -->
+    </Teleport>
 
     <FetchData
         :url="`Claims/${route.params.id}`"
@@ -212,6 +192,7 @@ function isSubToolbarShown() {
                 save-url="ClaimBeginnings/crud"
                 :filter="linesFilter"
                 @on-fetch="onFetch"
+                @save-changes="onFetch"
                 v-model:selected="selected"
                 :default-save="false"
                 :default-reset="false"

src/pages/Customer/Card/CustomerCard.vue

@@ -10,12 +10,6 @@ import { onMounted } from 'vue';
 const stateStore = useStateStore();
 const route = useRoute();
 const { t } = useI18n();
-
-onMounted(() => {
-    console.log('MOUNTED', stateStore.isSubToolbarShown());
-    stateStore.toggleSubToolbar();
-    console.log('MOUNTED', stateStore.isSubToolbarShown());
-});
 </script>
 <template>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">

src/pages/InvoiceOut/Card/InvoiceOutCard.vue

@@ -4,6 +4,7 @@ import { useStateStore } from 'stores/useStateStore';
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import VnSubToolBar from 'src/components/ui/VnSubToolBar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -26,12 +27,7 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
+            <VnSubToolBar />
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
-            <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Shelving/Card/ShelvingForm.vue

@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
+import VnSubToolBar from 'src/components/ui/VnSubToolBar.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -15,7 +16,7 @@ const defaultInitialData = {
     priority: 0,
     code: null,
     isRecyclable: false,
-}
+};
 
 const parkingFilter = { fields: ['id', 'code'] };
 const parkingList = ref([]);
@@ -58,11 +59,7 @@ const shelvingFilter = {
 };
 </script>
 <template>
-    <QToolbar class="bg-vn-dark justify-end">
+    <VnSubToolBar />
-        <div id="st-data"></div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
     <FetchData
         url="Parkings"
         :filter="parkingFilter"