myprojplanet_vite/src/components/CGallery/CGallery.vue

<template>
  <!--<div class="q-pa-md items-start " style="display: inline-flex; width: 800px;"> -->

  <div v-if="!edit">
    <div class="q-pa-xs">
      <q-card v-if="isListImgValid" :class="getclass()" @click="apri">
        <div v-for="(mygallery, index) in getlistimages()" :key="index">
          <div v-if="index === 0">
            <q-img
              :src="tools.getsrcimg(mygallery, getrealdirectory())"
              :class="getclimg()"
              :alt="mygallery.alt"
            >
              <div
                v-if="getnumimages() > 1"
                class="absolute-bottom text-shadow no-padding"
              >
                ({{ getnumimages() }})
              </div>
            </q-img>
          </div>
        </div>
      </q-card>
      <div v-else-if="!isInModif && !isListImgValid && imagebak">
        <q-card
          v-if="imagebak !== costanti.NESSUN_IMMAGINE"
          :class="getclass()"
          @click="ImgFullScreen(mygallery)"
        >
          <q-img :src="imagebak" :class="getclimg()"> </q-img>
        </q-card>
      </div>
      <div v-else>
        <q-card :class="getclass()" @click="apri">
          <q-img src="images/noimg.png" :class="getclimg()" alt="no image">
          </q-img>
        </q-card>
      </div>
      <q-btn
        v-if="isInModif"
        color="primary"
        @click="apri"
        icon="fas fa-file-upload"
        :label="$t('gallery.load_image')"
      >
      </q-btn>
    </div>
  </div>
  <div v-else>
    <div v-if="!isListImgValid">
      <q-btn
        flat
        round
        color="blue"
        icon="fas fa-tools"
        size="md"
        @click="apri"
      ></q-btn>
    </div>
    <div v-else>
      <div class="row">
        <!--<q-draggable-rows
                v-model="order">-->

        <div v-for="(mygallery, index) in getlistimages()" :key="index">
          <div
            class="q-pa-sm q-gutter-sm"
            @dragenter="onDragEnter"
            @dragleave="onDragLeave"
            @dragover="onDragOver"
          >
            <q-card
              :id="mygallery._id"
              :class="getclass()"
              :draggable="canModify"
              @dragstart="onDragStart"
              @drop="onDrop"
            >
              <q-img
                :src="tools.getsrcimg(mygallery, getrealdirectory())"
                :class="getclimg()"
                :alt="mygallery.alt"
              >
                <div class="absolute-bottom text-shadow">
                  <!-- <div class="text-h6 text-trans">{{ mygallery.description }} </div> -->
                  <div class="text-subtitle-carica text-trans">
                    {{ mygallery.description }}
                  </div>
                </div>
              </q-img>

              <q-field v-if="canModify" stack-label dense label="Nome File">
                <template v-slot:control>
                  <div class="self-center full-width no-outline" tabindex="0">
                    {{ mygallery.imagefile }}
                  </div>
                </template>
              </q-field>

              <q-input
                v-if="canModify"
                v-model="mygallery.description"
                dense
                :label="$t('proj.longdescr')"
                @keyup.enter.stop
                @update:model-value="save"
                debounce="1000"
                autofocus
              >
              </q-input>

              <q-card-actions align="center">
                <q-btn
                  v-if="canModify"
                  flat
                  round
                  color="blue"
                  icon="fas fa-copy"
                  size="sm"
                  @click="copytoclipboard(mygallery)"
                ></q-btn>
                <q-btn
                  v-if="canModify"
                  flat
                  round
                  color="red"
                  icon="fas fa-trash-alt"
                  size="sm"
                  @click="deleteFile(mygallery)"
                ></q-btn>
              </q-card-actions>
            </q-card>
          </div>
        </div>
        <div class="q-pa-sm">
          <div
            v-if="edit"
            class="q-gutter-sm"
            style="max-height: 200px; width: 208px"
          >
            <q-uploader
              :label="
                single &&
                gallerylist.length > 0 &&
                gallerylist[0].imagefile !== ''
                  ? 'Sostituisci Immagine'
                  : 'Aggiungi Immagine'
              "
              accept="image/*"
              :url="getUrl()"
              :headers="tools.getheaders()"
              :max-file-size="3000000"
              :multiple="!single"
              auto-upload
              hide-upload-btn
              no-thumbnails
              @uploaded="uploaded"
              @rejected="onRejected"
              style="width: 208px"
            ></q-uploader>
          </div>
        </div>
      </div>
    </div>
  </div>
  <q-dialog
    v-model="displayGall"
    persistent
    :maximized="maximizedToggle"
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card>
      <q-bar class="bg-primary text-white">
        <q-space />

        <q-btn
          dense
          flat
          icon="minimize"
          @click="maximizedToggle = false"
          :disable="!maximizedToggle"
        >
          <q-tooltip
            v-if="maximizedToggle"
            :class="
              ($q.dark.isActive ? `bg-black` : `bg-white`) + ` text-primary`
            "
            >Minimize</q-tooltip
          >
        </q-btn>
        <q-btn
          dense
          flat
          icon="crop_square"
          @click="maximizedToggle = true"
          :disable="maximizedToggle"
        >
          <q-tooltip
            v-if="!maximizedToggle"
            :class="
              ($q.dark.isActive ? `bg-black` : `bg-white`) + ` text-primary`
            "
            >Maximize</q-tooltip
          >
        </q-btn>
        <q-btn dense flat icon="close" v-close-popup>
          <q-tooltip
            :class="
              ($q.dark.isActive ? `bg-black` : `bg-white`) + ` text-primary`
            "
            >{{ t('dialog.close') }}</q-tooltip
          >
        </q-btn>
      </q-bar>

      <q-card-section>
        <div class="text-h6">{{ title }}</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        <div class="row">
          <div v-for="(mygallery, index) in getlistimages()" :key="index">
            <div
              class="q-pa-sm barwidth"
              @dragenter="onDragEnter"
              @dragleave="onDragLeave"
              @dragover="onDragOver"
            >
              <q-bar class="bg-primary text-white">
                <q-btn flat round dense icon="menu" class="q-mr-sm" />
                <q-btn
                  v-if="canModify"
                  flat
                  round
                  icon="fas fa-copy"
                  size="sm"
                  @click="copytoclipboard(mygallery)"
                ></q-btn>
                <div>Foto {{ index + 1 }}</div>
                <q-space></q-space>
                <q-btn
                  v-if="canModify"
                  flat
                  round
                  color="red"
                  icon="fas fa-trash-alt"
                  @click="deleteFile(mygallery)"
                ></q-btn>
              </q-bar>

              <q-card
                :id="mygallery._id"
                :class="getclass()"
                :data-ind="index"
                :draggable="canModify"
                @dragstart="onDragStart"
                @drop="onDrop"
              >
                <q-img
                  :src="tools.getsrcimg(mygallery, getrealdirectory())"
                  :class="getclimg()"
                  @click="ImgFullScreen(mygallery)"
                  :alt="mygallery.alt"
                >
                  <div
                    v-if="mygallery.description"
                    class="absolute-bottom text-shadow"
                  >
                    <!-- <div class="text-h6 text-trans">{{ mygallery.description }} </div> -->
                    <div class="text-subtitle-carica text-trans">
                      {{ mygallery.description }}
                    </div>
                  </div>
                </q-img>
                <q-card-section>
                  <q-field v-if="canModify" stack-label dense label="Nome File">
                    <template v-slot:control>
                      <div
                        class="self-center full-width no-outline"
                        tabindex="0"
                      >
                        {{ mygallery.imagefile }}
                      </div>
                    </template>
                  </q-field>
                  <q-input
                    v-if="canModify"
                    v-model="mygallery.description"
                    dense
                    :label="$t('proj.longdescr')"
                    @keyup.enter.stop
                    @update:model-value="save"
                    debounce="1000"
                    autofocus
                  >
                  </q-input>
                </q-card-section>
              </q-card>
            </div>
          </div>
          <div v-if="canModify" class="q-pa-sm">
            <div class="q-gutter-sm" style="max-height: 200px; width: 208px">
              <q-uploader
                label="Aggiungi Immagine"
                accept="image/*"
                :url="getUrl()"
                :headers="tools.getheaders()"
                :max-file-size="40000000"
                multiple
                auto-upload
                hide-upload-btn
                no-thumbnails
                @uploaded="uploaded"
                @rejected="onRejected"
                style="width: 208px"
              ></q-uploader>
            </div>
          </div>
          <div v-if="!isInModif && !isListImgValid && imagebak">
            <q-card :class="getclass()" @click="ImgFullScreen(mygallery)">
              <q-img :src="imagebak" :class="getclimg()"> </q-img>
            </q-card>
          </div>
        </div>

        <q-card-actions align="right">
          <q-btn
            v-if="canModify"
            flat
            label="Annulla"
            color="primary"
            v-close-popup
          />
          <q-btn
            v-if="canModify"
            label="salva"
            color="primary"
            v-close-popup
            @click="save"
          />
          <q-btn
            v-if="!canModify"
            label="Chiudi"
            color="primary"
            v-close-popup
          />
        </q-card-actions>
      </q-card-section>
    </q-card>
  </q-dialog>
  <q-dialog
    v-model="fullscreen"
    :maximized="false"
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card class="my-card">
      <q-img
        v-if="fullscreensrc"
        alt="fullscreen"
        :src="fullscreensrc"
        @click="fullscreen = false"
      ></q-img>
    </q-card>
  </q-dialog>
</template>

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

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