- Creazione pagina Home logout

- Nuovo Gasordine
- Visualizzazione GAS / BOTTEGA

src/views/ecommerce/productsList/productsList.ts

@@ -9,6 +9,7 @@ import { toolsext } from '@store/Modules/toolsext'
 import { useQuasar } from 'quasar'
 import { costanti } from '@costanti'
 
+import { shared_consts } from '@/common/shared_vuejs'
 import { CProductCard } from '@src/components/CProductCard'
 import { IProduct } from '@src/model'
 
@@ -27,12 +28,14 @@ export default defineComponent({
 
     const search = ref('')
 
+    const cosa = ref(shared_consts.PROD.GAS)
+
     function mounted() {
       // Inizializza
       productStore.loadProducts()
     }
     function getProducts() {
-      let arrprod = productStore.getProducts()
+      let arrprod = productStore.getProducts(cosa.value)
       if (!search.value) {
         return arrprod
       }
@@ -54,6 +57,8 @@ export default defineComponent({
       toolsext,
       getProducts,
       search,
+      cosa,
+      shared_consts,
     }
   }
 })

src/views/ecommerce/productsList/productsList.vue

@@ -1,29 +1,43 @@
 <template>
   <q-page>
     <div class="panel">
+      <div>
+        <div class="q-gutter-md text-center q-mb-md">
+          <q-btn-toggle v-model="cosa" push rounded glossy toggle-color="purple" :options="[
+            { value: shared_consts.PROD.GAS, slot: 'gas' },
+            { value: shared_consts.PROD.BOTTEGA, slot: 'bottega' },
+          ]">
+            <template v-slot:gas>
+              <div class="row items-center no-wrap">
+                <div class="text-center">
+                  Ordina sul GAS
+                </div>
+                <q-icon right name="fas fa-user-friends" />
+              </div>
+            </template>
+
+            <template v-slot:bottega>
+              <div class="row items-center no-wrap">
+                <div class="text-center">
+                  Vai alla Bottega
+                </div>
+                <q-icon right name="fas fa-store" />
+              </div>
+            </template>
+
+          </q-btn-toggle>
+        </div>
+      </div>
       <div class="container">
-        <div
-          class="q-gutter-y-md column text-center q-mx-auto"
-          style="width: 350px; max-width: 100%"
-        >
-          <q-input
-            filled
-            stack-label
-            :label="$t('ecomm.code_o_text_search')"
-            v-model="search"
-            class="q-ml-md"
-          >
+        <div class="q-gutter-y-md column text-center q-mx-auto" style="width: 350px; max-width: 100%">
+          <q-input filled stack-label :label="$t('ecomm.code_o_text_search')" v-model="search" class="q-ml-md">
             <template v-slot:append>
               <q-icon name="search" />
             </template>
           </q-input>
         </div>
         <div class="row">
-          <div
-            class="q-pa-md row items-start q-gutter-md"
-            v-for="(product, index) in getProducts()"
-            :key="index"
-          >
+          <div class="q-pa-md row items-start q-gutter-md" v-for="(product, index) in getProducts()" :key="index">
             <CProductCard :code="product.code" :complete="false" />
           </div>
         </div>