feat: refs #7274 show total on rightMenu

src/pages/Customer/Card/CustomerGreuges.vue

@@ -1,20 +1,17 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
-
 import { QBtn } from 'quasar';
-
+import { useStateStore } from 'src/stores/useStateStore';
 import { toCurrency } from 'src/filters';
 import { toDateTimeFormat } from 'src/filters/date';
-
 import FetchData from 'components/FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const { t } = useI18n();
 const route = useRoute();
-const router = useRouter();
+const stateStore = computed(() => useStateStore());
-
 const rows = ref([]);
 const totalAmount = ref(0);
 
@@ -105,28 +102,40 @@ const columns = computed(() => [
 
 const setRows = (data) => {
     rows.value = data;
-    totalAmount.value = data.reduce((accumulator, currentValue) => {
+    totalAmount.value = data.reduce((acc, { amount = 0 }) => acc + amount, 0);
-        return accumulator + currentValue.amount;
-    }, 0);
-};
-
-const toCustomerGreugeCreate = () => {
-    router.push({ name: 'CustomerGreugeCreate' });
 };
 </script>
 
 <template>
     <FetchData :filter="filter" @on-fetch="setRows" auto-load url="greuges" />
-
+    <template v-if="stateStore.isHeaderMounted()">
-    <div class="full-width flex justify-center">
+        <Teleport to="#actions-append">
-        <QPage class="card-width q-pa-lg">
+            <div class="row q-gutter-x-sm">
-            <QCard class="full-width q-pa-sm" v-if="totalAmount">
+                <QBtn
-                <h6 class="flex justify-end q-my-lg q-pr-lg">
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="300" show-if-above>
+        <QCard class="full-width q-pa-sm">
+            <h6 class="flex justify-end q-my-lg q-pr-lg" v-if="totalAmount">
                 <span class="color-vn-label q-mr-md">{{ t('Total') }}:</span>
                 {{ toCurrency(totalAmount) }}
             </h6>
+            <QSkeleton v-else type="QInput" square />
         </QCard>
-
+    </QDrawer>
+    <div class="full-width flex justify-center">
+        <QPage class="card-width q-pa-lg">
             <QCard class="q-pa-sm q-mt-md">
                 <QTable
                     :columns="columns"
@@ -164,7 +173,7 @@ const toCustomerGreugeCreate = () => {
     </div>
 
     <QPageSticky :offset="[18, 18]">
-        <QBtn @click.stop="toCustomerGreugeCreate()" color="primary" fab icon="add" />
+        <QBtn color="primary" fab icon="add" :to="{ name: 'CustomerGreugeCreate' }" />
         <QTooltip>
             {{ t('New greuge') }}
         </QTooltip>