myprojplanet_vite/src/components/CMyRecCatalog/CMyRecCatalog.vue

<template>
  <div class="q-pa-sm row items-start q-gutter-sm">
    <q-card
      v-if="myrec"
      flat
      bordered
      :style="`width: ` + opt.widthcard + `; height: 540px;`"
    >
      <!--<q-skeleton
        v-if="!myrec.foto_collana"
        type="QAvatar"
        :width="opt.widthcard"
        :height="opt.heightcard"
      />-->
      <q-img
        :width="opt.widthcard"
        @click="apriInfo = true"
        :height="opt.heightcard"
        class="clickable-image"
        :src="
          tools.getFullFileName(
            [myrec.foto_collana],
            table,
            myrec.username,
            myrec._id
          )
        "
      >
        <template v-slot:error>
          <div class="absolute-full flex flex-center text-white">
            immagine non impostata
          </div>
        </template>
        <div class="text-h6 absolute-bottom text-left">
          {{ myrec.title }}
        </div>
      </q-img>

      <q-card-section>
        <div
          v-if="!myrec.foto_collana"
          class="q-mt-sm q-mb-xs"
          style="font-size: 1.15rem"
        >
          {{ myrec.title }}
        </div>
        <div class="text-caption text-h7 text-grey">
          <q-icon name="fas fa-user" /> Referente:
          <span
            v-if="myrec.referenti && myrec.referenti.length > 0"
            :class="
              `text-bold ` + myrec.referenti && myrec.referenti.length > 0
                ? 'text-blue'
                : 'text-red'
            "
          >
            {{ myrec.referenti ? myrec.referenti.join(', ') : '' }}
          </span>
          <span v-else>
            <span class="text-red">[Nessuno]</span>
          </span>
        </div>
        <div v-if="collanestr" class="text-caption text-h7 text-grey">
          <q-icon name="fas fa-book" /> Collana:
          <span class="text-blue">{{ collanestr }}</span>
        </div>
        <div v-if="editorestr" class="text-caption text-h7 text-grey">
          <q-icon name="fas fa-book-open" /> Editore:
          <span class="text-blue">{{ editorestr }}</span>
        </div>
        <div v-if="!esiste_descrintro" class="text-caption text-h7 text-grey">
          <q-icon name="fas fa-pencil-alt" /> Testo descrittivo:
          <span :style="`color: ` + (esiste_descrintro ? 'green' : 'red')">{{
            esiste_descrintro ? 'Presente' : 'Mancante'
          }}</span>
        </div>
        <div
          v-if="!myrec.img_bordata?.imagefile"
          class="text-caption text-h7 text-grey"
        >
          <q-icon name="fas fa-image" /> Sfondo:
          <span
            :style="
              `color: ` + (myrec.img_bordata?.imagefile ? 'green' : 'red')
            "
            >{{ esiste_descrintro ? 'Presente' : 'Mancante' }}</span
          >
        </div>
        <div
          v-if="!myrec.img_intro?.imagefile"
          class="text-caption text-h7 text-grey"
        >
          <q-icon name="fas fa-image" /> Copertina:
          <span
            :style="`color: ` + (myrec.img_intro?.imagefile ? 'green' : 'red')"
            >{{ esiste_descrintro ? 'Presente' : 'Mancante' }}</span
          >
        </div>
        <div v-if="myrec.pdf_generato" class="text-caption text-h7 text-blue">
          <q-icon name="fas fa-book" /> -
          <a :href="myrec.pdf_generato" target="_blank">PDF Generato</a> 
          (Data: {{tools.getstrDate(myrec.data_generato)}})
        </div>
        <div v-if="myrec.pdf_online" class="text-caption text-h7 text-blue">
          <q-icon name="fas fa-book" /> -
          <a :href="myrec.pdf_online" target="_blank">PDF ONLINE</a> 
          (Data: {{tools.getstrDate(myrec.data_online)}})
        </div>
        <!--<div class="text-overline text-orange-9">{{collanestr}}</div>-->
      </q-card-section>

      <q-card-actions>
        <div class="row justify-center">
          <q-fab
            color="primary"
            icon="fas fa-caret-down"
            label="Menu"
            direction="up"
            flat
            dense
          >
            <q-fab-action
              v-if="tools.canModifyThisRec(myrec, table) || editOn"
              @click="cmdExt(costanti.CMD_DELETE, myrec._id, null)"
              color="negative"
              :label="$t('reg.elimina')"
              icon="fas fa-trash-alt"
            />
            <q-fab-action
              v-if="tools.canModifyThisRec(myrec, table) || editOn"
              @click="cmdExt(costanti.CMD_CLONE, myrec._id, null)"
              color="accent"
              :label="$t('event.duplicate')"
              icon="fas fa-copy"
            />
            <q-fab-action
              color="positive"
              label="Gestisci"
              icon="fas fa-book-open"
              @click="naviga(pagina_collegata)"
            />
            <q-fab-action
              v-if="tools.canModifyThisRec(myrec, table) || editOn"
              @click="cmdExt(costanti.CMD_MODIFY, myrec._id, null)"
              color="primary"
              :label="$t('reg.edit')"
              icon="fas fa-pencil-alt"
            />
          </q-fab>
          <q-btn
            flat
            color="primary"
            label="Info"
            icon="fas fa-info"
            @click="apriInfo = true"
          />
          <q-btn
            flat
            :color="statecolor"
            label="PDF"
            icon="fas fa-book"
            :disable="!myrec.pdf_generato"
            @click="naviga(myrec.pdf_generato)"
          />
        </div>
      </q-card-actions>
    </q-card>
  </div>

  <q-dialog v-model="apriInfo">
    <q-card>
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title>
          {{ myrec.title }}
        </q-toolbar-title>
        <q-btn
          flat
          round
          color="white"
          label="CHIUDI"
          icon="close"
          v-close-popup
        ></q-btn>
      </q-toolbar>
      <q-card-section>
        <div class="row justify-center q-ma-sm q-pa-sm">
          <div style="width: 300px" class="q-ma-sm">
            <CLabel
              :value="
                myrec.referenti && myrec.referenti.length > 0
                  ? myrec.referenti.join(', ')
                  : '[Non Assegnato]'
              "
              label="Referente/i:"
              :color="
                myrec.referenti && myrec.referenti.length > 0
                  ? 'text-blue'
                  : 'text-red'
              "
            />
          </div>
          <div style="width: 300px" class="q-ma-sm">
            <CLabel v-if="collanestr" :value="collanestr" label="Collana/e:" />
          </div>
          <div style="width: 300px" class="q-ma-sm">
            <CLabel
              class_text="text-bold"
              :value="esiste_descrintro ? 'PRESENTE ' : 'MANCANTE !'"
              label="Testo descrittivo"
              :color="esiste_descrintro ? 'green' : 'red'"
            />
          </div>
          <div style="width: 300px" class="q-ma-sm">
            <CLabel
              :value="myrec.pdf_generato || 'ancora non è stato generato'"
              label="PDF generato"
              :color="myrec.pdf_generato ? 'green' : 'red'"
              :copy="true"
            />
            <CLabel
              :value="myrec.pdf_online || 'ancora non è andato ONLINE'"
              label="PDF On-Line Ufficiale"
              :color="myrec.pdf_online ? 'green' : 'red'"
              :copy="true"
            />
          </div>
        </div>
      </q-card-section>
    </q-card>
    <q-card-actions align="center">
      <q-btn color="primary" label="Chiudi" @click="apriInfo = false" />
    </q-card-actions>
  </q-dialog>
</template>
<script lang="ts" src="./CMyRecCatalog.ts">
</script>

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