myprojplanet_vite/src/views/ecommerce/orderInfo/orderInfo.vue

<template>
  <q-page>
    <CTitleBanner title="Ordini"></CTitleBanner>
    <q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />

    <div class="q-gutter-md text-center">
          <q-btn-toggle
            v-model="cosa"
            push
            rounded
            glossy
            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('gas.tutti') }}
                  <br />
                  {{ t('gas.x_prodotti_gas', { qta: productStore.getNumQtaGas()+productStore.getNumQtaBottega() }) }}
                </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 v-if="endload" class="panel">
      <q-tabs v-model="taborders" inline-label class="text-blue">
        <span v-for="(stat, index) of shared_consts.OrderStat" :key="index">
          <q-tab
            v-if="arrnumstatus[stat.value] > 0"
            :class="stat.color"
            :name="stat.value"
            :icon="stat.icon"
            :label="`(` + arrnumstatus[stat.value] + `) ` + stat.label"
          />
        </span>
      </q-tabs>

      <div class="q-pa-sm">
        <q-table
          :grid="$q.screen.lt.sm"
          :hide-header="$q.screen.lt.sm"
          :columns="columns"
          row-key="numorder"
          :pagination="initialPagination"
          :rows="getOrdersCartWithTotals()"
        >
          <template v-if="$q.screen.lt.sm" v-slot:item="props">
            <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
              <q-card class="my-card-shadow yes_shadow">
                <q-list dense>
                  <q-item v-for="col in getCols(props)" :key="col.name">
                    <q-item-section>
                      <q-item-label>{{ col.label }}</q-item-label>
                    </q-item-section>
                    <q-item-section side>
                      <q-item-label v-if="col.name === 'created_at'" caption
                        >{{ tools.getstrDateTime(col.value) }}
                      </q-item-label>
                      <q-item-label
                        v-else-if="col.name === 'nameSurname'"
                        caption
                      >
                        <span v-if="props.row.user">
                          <span
                            :class="
                              props.row.user.name !== 'TOTALI' ? '' : 'totali'
                            "
                            >{{ tools.getNomeUtenteByRecUser(props.row.user) }}
                          </span></span
                        >
                      </q-item-label>
                      <q-item-label v-else-if="col.name === 'items'" caption>
                        <div
                          v-for="(item, index) of props.row.items"
                          :key="index"
                        >
                          <div
                            v-if="!!item && item.order && item.order.product && item.order.product.productInfo"
                          >
                            {{ item.order.product.productInfo.name }} ({{
                              productStore.getQuantityByOrder(t, item.order)
                            }})<br />
                          </div>
                        </div>
                      </q-item-label>
                      <q-item-label
                        v-else-if="col.name === 'totalPrice'"
                        caption
                      >
                        {{ props.row.totalPrice }} €
                      </q-item-label>
                      <q-item-label v-else-if="col.name === 'status'" caption>
                        {{ shared_consts.getStatusStr(props.row.status) }}
                      </q-item-label>
                      <q-item-label v-else-if="col.name === 'comandi'" caption>
                        <div
                          v-if="
                            tools.isManager() &&
                            props.row.user.name !== 'TOTALI'
                          "
                          class="q-pa-sm"
                        >
                          <q-btn-dropdown rounded dense label="Azioni">
                            <q-list class="text-primary">
                              <q-item
                                v-for="(
                                  cmd, index
                                ) of shared_consts.OrderCmdStr"
                                :key="index"
                                clickable
                                v-close-popup
                                @click="clickFunz(props.row, cmd.value)"
                              >
                                <q-item-section avatar>
                                  <q-avatar
                                    :icon="cmd.icon"
                                    :color="cmd.color"
                                    text-color="white"
                                  />
                                </q-item-section>
                                <q-item-section>
                                  <q-item-label>{{ cmd.label }}</q-item-label>
                                </q-item-section>
                              </q-item>
                            </q-list>
                          </q-btn-dropdown>
                        </div>
                      </q-item-label>
                      <q-item-label v-else caption>{{
                        col.value
                      }}</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-card>
            </div>
          </template>
          <template v-else v-slot:body="props">
            <q-tr :props="props">
              <q-td key="numorder" :props="props">
                <span v-if="props.row.numorder">
                  &nbsp; n. {{ props.row.numorder }}</span
                >
              </q-td>
              <q-td key="nameSurname" :props="props">
                <span v-if="props.row.user">
                  <span
                    :class="props.row.user.name !== 'TOTALI' ? '' : 'totali'"
                    >{{ tools.getNomeUtenteByRecUser(props.row.user) }}
                  </span></span
                >
              </q-td>
              <q-td key="created_at" :props="props">
                {{ tools.getstrDateTime(props.row.created_at) }}
                <span v-if="taborders === shared_consts.OrderStat.COMPLETATI">
                  <br />Consegnato il:<br />{{
                    tools.getstrDateTime(props.row.date_consegnato)
                  }}
                </span>
              </q-td>
              <q-td key="items" :props="props">
                <div v-for="(item, index) of props.row.items" :key="index">
                  <div v-if="!!item.order && item.order.product && item.order.product.productInfo">
                    {{ item.order.product.productInfo.name }} ({{
                      productStore.getQuantityByOrder($t, item.order)
                    }})<br />
                  </div>
                </div>
                <div v-if="props.row.note" class="note">
                  Note: {{ props.row.note }}
                </div>
              </q-td>
              <q-td key="totalPrice" :props="props">
                <span :class="props.row.user.name !== 'TOTALI' ? '' : 'totali'"
                  >{{ props.row.totalPrice }} €</span
                >
              </q-td>
              <q-td key="status" :props="props">
                <span :class="props.row.status">{{
                  shared_consts.getStatusStr(props.row.status)
                }}</span>
                <br />
                <div v-if="props.row.evaso" class="ordstat">
                  {{ tools.getstrDateTime(props.row.date_evaso) }}:
                  <span class="ordstat evaso">{{ $t('ecomm.evaso') }}</span>
                </div>
                <div v-if="props.row.pagato" class="ordstat">
                  {{ tools.getstrDateTime(props.row.date_pagato) }}:
                  <span class="ordstat">{{ $t('ecomm.pagato') }}</span>
                </div>
                <div v-if="props.row.consegnato" class="ordstat">
                  {{ tools.getstrDateTime(props.row.date_consegnato) }}:
                  <span class="ordstat">{{ $t('ecomm.consegnato') }}</span>
                </div>
                <div v-if="props.row.spedito">
                  {{ tools.getstrDateTime(props.row.date_spedito) }}:
                  <span class="ordstat">{{ $t('ecomm.spedito') }}</span>
                </div>
                <div v-if="props.row.ricevuto">
                  {{ tools.getstrDateTime(props.row.date_ricevuto) }}:
                  <span class="ordstat">{{ $t('ecomm.ricevuto') }}</span>
                </div>
              </q-td>
              <q-td key="comandi" :props="props">
                <div
                  v-if="tools.isManager() && props.row.user.name !== 'TOTALI'"
                  class="q-pa-sm"
                >
                  <q-btn-dropdown rounded dense label="Azioni">
                    <q-list class="text-primary">
                      <q-item
                        v-for="(cmd, index) of shared_consts.OrderCmdStr"
                        :key="index"
                        clickable
                        v-close-popup
                        @click="clickFunz(props.row, cmd.value)"
                      >
                        <q-item-section avatar>
                          <q-avatar
                            :icon="cmd.icon"
                            :color="cmd.color"
                            text-color="white"
                          />
                        </q-item-section>
                        <q-item-section>
                          <q-item-label>{{ cmd.label }}</q-item-label>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-btn-dropdown>
                </div>
              </q-td>
            </q-tr>
          </template>
        </q-table>
      </div>

      <!--
      <div v-for="(ordercart, index) in getOrdersCart" :key="index">

        <div>
          {{ ordercart.numorder }}<br>
        </div>

        <div class="container">
          <div class="q-pa-sm col items-start q-gutter-xs" v-for="(itemorder, index) in ordercart.items" :key="index">

            <CSingleCart :order="itemorder.order" :showall="true" :nomodif="true"/>
          </div>
        </div>
        <q-separator></q-separator>
        <div class="col-6 q-mr-sm" style="text-align: right">
          <span class="text-grey q-mr-xs">Totale:</span> <span
          class="text-subtitle1 q-mr-sm ">€ {{ ordercart.totalPrice.toFixed(2) }}</span>
        </div>

        <q-input v-model="ordercart.note" style="max-width: 400px;" label="Note aggiuntive:"
                 filled dense
                 debounce="1000"
                 autogrow
                 @input="change_field(ordercart.id, 'note')">
        </q-input>

        <br>
      </div>
      -->
    </div>
  </q-page>
</template>

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

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