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

<template>
  <q-page>
    <CTitleBanner title="Ordini"></CTitleBanner>
    <div 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"
          :rows="getOrdersCart()"
        >
          <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 === 'items'" caption>
                        <div
                          v-for="(item, index) of props.row.items"
                          :key="index"
                        >
                          <div v-if="!!item.order.product">
                            {{ item.order.product.name }} ({{
                              item.order.quantity
                            }})<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 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">
                &nbsp; n. {{ props.row.numorder }}
              </q-td>
              <q-td key="nameSurname" :props="props">
                {{ props.row.nameSurname }}
              </q-td>
              <q-td key="created_at" :props="props">
                {{ tools.getstrDateTime(props.row.created_at) }}
                <span v-if="taborders === shared_consts.OrderStat.COMPLETATI">
                  <br />Completato il:<br />{{
                    tools.getstrDateTime(props.row.completed_at)
                  }}
                </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.product">
                    {{ item.order.product.name }} ({{
                      item.order.quantity
                    }})<br />
                  </div>
                </div>
              </q-td>
              <q-td key="totalPrice" :props="props">
                {{ props.row.totalPrice }} €
              </q-td>
              <q-td key="status" :props="props">
                <span :class="props.row.status">{{
                  shared_consts.getStatusStr(props.row.status)
                }}</span>
                <div v-if="props.row.evaso" class="ordstat">
                  {{ tools.getstrDateTime(props.row.date_evaso) }}:
                  <span class="ordstat">{{ $t('ecomm.spedito') }}</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.pagato" class="ordstat">
                  {{ tools.getstrDateTime(props.row.date_pagato) }}:
                  <span class="ordstat">{{ $t('ecomm.pagato') }}</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.completed">
                  {{ tools.getstrDateTime(props.row.date_completed) }}:
                  <span class="ordstat">{{ $t('ecomm.completed') }}</span>
                </div>
              </q-td>
              <q-td key="comandi" :props="props">
                <div v-if="tools.isManager()" 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>