myprojplanet_vite/src/views/ecommerce/cash/cash.vue

<template>
  <q-page>
    <div class="text-center">
      <q-spinner
        v-if="!loadpage"
        color="primary"
        size="3em"
        :thickness="2"
      />
    </div>
    <div
      v-if="loadpage"
      class="panel"
    >
      <div>
        <div class="text-center">
          <CSelectUserActive></CSelectUserActive>
          <q-btn-toggle
            v-model="cosa"
            push
            :size="tools.isMobile() ? '0.75rem' : '1rem'"
            rounded
            glossy
            dense
            toggle-color="purple"
            :options="[
              {
                value: shared_consts.PROD.TUTTI,
                slot: 'tutti',
              },
              {
                value: shared_consts.PROD.BOTTEGA,
                slot: 'bottega',
              },
              {
                value: shared_consts.PROD.GAS,
                slot: 'gas',
              },
            ]"
          >
            <template v-slot:tutti>
              <div class="row items-center no-wrap">
                <div class="text-center">
                  {{ t('ecomm.tutti') }}
                </div>
                <q-icon
                  right
                  name="fas fa-user-friends"
                />
              </div>
            </template>

            <template v-slot:gas>
              <div class="row items-center no-wrap">
                <div class="text-center">
                  {{ t('gas.ordina_sul_gas') }}
                  <br />
                  {{
                    t('gas.x_prodotti_gas', {
                      qta: productStore.getNumQtaGas(),
                    })
                  }}
                </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">
                  {{ t('gas.bottega') }}
                  <br />
                  {{
                    t('gas.x_prodotti_bottega', {
                      qta: productStore.getNumQtaBottega(),
                    })
                  }}
                </div>
                <q-icon
                  right
                  name="fas fa-store"
                />
              </div>
            </template>
          </q-btn-toggle>
        </div>
      </div>
      <div class="container">
        <div
          class="column text-center q-mx-auto q-py-sm q-mb-sm"
          style="width: 350px; max-width: 100%"
        >
          <q-input
            filled
            stack-label
            rounded
            :dense="tools.isMobile() ? true : false"
            :label="t('ecomm.code_o_text_search')"
            v-model="search"
            debounce="500"
            class="q-ml-md"
          >
            <template v-slot:append>
              <q-icon name="search" />
            </template>
          </q-input>
        </div>
        <div
          class="row q-gutter-xs justify-center q-mx-auto"
        >
          <div
            v-for="(reccat, index) in getCatProds()"
            :key="index"
          >
            <q-btn
              :push="cat === reccat.value"
              dense
              :size="tools.isMobile() ? '0.70rem' : '1rem'"
              :icon="reccat.icon ? reccat.icon : undefined"
              :color="
                cat === reccat.value ? 'primary' : undefined
              "
              :text-color="
                cat === reccat.value ? 'white' : 'black'
              "
              rounded
              :label="reccat.label"
              @click="cat = reccat.value"
            >
            </q-btn>
          </div>
        </div>
        <div class="text-center q-py-sm prod_trov">
          {{
            t('ecomm.prodotti_trovati', {
              qta: arrProducts.length,
              qtatot:
                productStore.getNumProdTot() > 0
                  ? ` ${t('ecomm.su')} ${productStore.getNumProdTot()}`
                  : '',
            })
          }}
        </div>
        <div class="row justify-around">
          <div
            class="q-pa-xs row items-start"
            v-for="(product, index) in getArrProducts"
            :key="index"
          >
            <CProductCard
              :id="product._id"
              :complete="false"
              :cosa="cosa"
            />
          </div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script lang="ts" src="./cash.ts"></script>

<style lang="scss" scoped>
@import './cash';
</style>