From 4637053ab2c8ad387daa0dbe977de67fd3ceaa20 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 6 Mar 2024 09:35:01 +0100
Subject: [PATCH] refs #6336 feat: useCardSize

---
 src/composables/useCardSize.js               | 7 +++++++
 src/pages/Claim/Card/ClaimCard.vue           | 3 ++-
 src/pages/Customer/Card/CustomerCard.vue     | 3 ++-
 src/pages/Entry/Card/EntryCard.vue           | 3 ++-
 src/pages/InvoiceIn/Card/InvoiceInCard.vue   | 3 ++-
 src/pages/InvoiceOut/Card/InvoiceOutCard.vue | 3 ++-
 src/pages/Item/Card/ItemCard.vue             | 3 ++-
 src/pages/Supplier/Card/SupplierCard.vue     | 3 ++-
 src/pages/Ticket/Card/TicketCard.vue         | 3 ++-
 src/pages/Travel/Card/TravelCard.vue         | 3 ++-
 src/pages/Wagon/Card/WagonCard.vue           | 3 ++-
 src/pages/Worker/Card/WorkerCard.vue         | 3 ++-
 12 files changed, 29 insertions(+), 11 deletions(-)
 create mode 100644 src/composables/useCardSize.js

diff --git a/src/composables/useCardSize.js b/src/composables/useCardSize.js
new file mode 100644
index 000000000..ef514db19
--- /dev/null
+++ b/src/composables/useCardSize.js
@@ -0,0 +1,7 @@
+import { useQuasar } from 'quasar';
+
+export default function() {
+    const quasar = useQuasar();
+   return quasar.screen.gt.xs ? 'q-pa-md': 'q-pa-xs';
+
+}
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 249337c49..78eec9e8d 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -5,6 +5,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import ClaimDescriptor from './ClaimDescriptor.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -28,7 +29,7 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index a35036284..9da9eb21d 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -6,6 +6,7 @@ import CustomerDescriptor from './CustomerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const route = useRoute();
@@ -30,7 +31,7 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Entry/Card/EntryCard.vue b/src/pages/Entry/Card/EntryCard.vue
index eea0b3b6b..5a2bef186 100644
--- a/src/pages/Entry/Card/EntryCard.vue
+++ b/src/pages/Entry/Card/EntryCard.vue
@@ -7,6 +7,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import EntryDescriptor from './EntryDescriptor.vue';
 
 import { useStateStore } from 'stores/useStateStore';
+import useCardSize from 'src/composables/useCardSize';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -33,7 +34,7 @@ const stateStore = useStateStore();
         <QPage>
             <VnSubToolbar />
 
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
index c0e36e589..0de31c183 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInCard.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
@@ -8,6 +8,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { onMounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -74,7 +75,7 @@ watch(
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index fe6649fb1..6844df2dd 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -5,6 +5,7 @@ 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';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -28,7 +29,7 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Item/Card/ItemCard.vue b/src/pages/Item/Card/ItemCard.vue
index 5ca20d6f3..3b3750b2a 100644
--- a/src/pages/Item/Card/ItemCard.vue
+++ b/src/pages/Item/Card/ItemCard.vue
@@ -4,6 +4,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import ItemDescriptor from './ItemDescriptor.vue';
 
 import { useStateStore } from 'stores/useStateStore';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 </script>
@@ -19,7 +20,7 @@ const stateStore = useStateStore();
         <QPage>
             <VnSubToolbar />
 
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Supplier/Card/SupplierCard.vue b/src/pages/Supplier/Card/SupplierCard.vue
index 74b2dfb4c..fdf1d785a 100644
--- a/src/pages/Supplier/Card/SupplierCard.vue
+++ b/src/pages/Supplier/Card/SupplierCard.vue
@@ -5,6 +5,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import SupplierDescriptor from './SupplierDescriptor.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -30,7 +31,7 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 568cf6440..0d5d3803e 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -5,6 +5,7 @@ import TicketDescriptor from './TicketDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -29,7 +30,7 @@ const { t } = useI18n();
         <QPage>
             <VnSubToolbar />
 
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Travel/Card/TravelCard.vue b/src/pages/Travel/Card/TravelCard.vue
index 76bf74c6a..e6c7b7e28 100644
--- a/src/pages/Travel/Card/TravelCard.vue
+++ b/src/pages/Travel/Card/TravelCard.vue
@@ -3,6 +3,7 @@ import { useStateStore } from 'stores/useStateStore';
 import TravelDescriptor from './TravelDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 </script>
@@ -17,7 +18,7 @@ const stateStore = useStateStore();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Wagon/Card/WagonCard.vue b/src/pages/Wagon/Card/WagonCard.vue
index ba4517777..5ac18fb47 100644
--- a/src/pages/Wagon/Card/WagonCard.vue
+++ b/src/pages/Wagon/Card/WagonCard.vue
@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute } from 'vue-router';
 import LeftMenu from 'components/LeftMenu.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const route = useRoute();
@@ -17,7 +18,7 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index 3b31f9064..0d62dcfc1 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -5,6 +5,7 @@ import WorkerDescriptor from './WorkerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -29,7 +30,7 @@ const { t } = useI18n();
         <QPage>
             <VnSubToolbar />
 
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>