From 98dd8ec0ca20e8cde70bad05ab0f5ef267419c23 Mon Sep 17 00:00:00 2001
From: Paolo Arena <paolo.arena77@gmail.com>
Date: Fri, 27 Dec 2019 20:36:37 +0100
Subject: [PATCH] - Gallery: added deleting images.

---
 src/components/CGallery/CGallery.scss |  47 ++++++++
 src/components/CGallery/CGallery.ts   | 158 ++++++++++++++++++++++++++
 src/components/CGallery/CGallery.vue  |  97 ++++++++++++++++
 src/components/CGallery/index.ts      |   1 +
 4 files changed, 303 insertions(+)
 create mode 100644 src/components/CGallery/CGallery.scss
 create mode 100644 src/components/CGallery/CGallery.ts
 create mode 100644 src/components/CGallery/CGallery.vue
 create mode 100644 src/components/CGallery/index.ts

diff --git a/src/components/CGallery/CGallery.scss b/src/components/CGallery/CGallery.scss
new file mode 100644
index 0000000..02d3a55
--- /dev/null
+++ b/src/components/CGallery/CGallery.scss
@@ -0,0 +1,47 @@
+$heightBtn: 100%;
+$grayshadow: #555;
+
+.text-subtitle-gallery {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+  .text-subtitle-gallery {
+    font-size: 1rem;
+  }
+}
+
+.myimg {
+  border-radius: 10px !important;
+  height: 200px;
+}
+
+.myimg-view {
+  border-radius: 5px !important;
+  height: 80px;
+}
+
+.q-img {
+  &__image {
+    border-radius: 10px !important;
+  }
+}
+
+.my-card-gallery {
+  width: 100%;
+  max-width: 300px;
+  min-width: 200px;
+  padding: 1rem 1rem;
+  height: 350px;
+}
+
+.my-card-gallery-view {
+  width: 100px;
+  height: 100px;
+  padding: 0.5rem 0.5rem;
+}
diff --git a/src/components/CGallery/CGallery.ts b/src/components/CGallery/CGallery.ts
new file mode 100644
index 0000000..d2d7b32
--- /dev/null
+++ b/src/components/CGallery/CGallery.ts
@@ -0,0 +1,158 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { IGallery, IImgGallery } from '../../model/GlobalStore'
+import { CMyPage } from '../CMyPage'
+import GlobalModule from '../../store/Modules/GlobalStore'
+import { GlobalStore } from '../../store/Modules'
+
+@Component({
+  name: 'CGallery',
+  components: { CMyPage }
+})
+
+export default class CGallery extends Vue {
+  @Prop({ required: true }) public edit: boolean
+  @Prop({ required: true }) public gall: IGallery
+  @Prop({ required: true }) public listimages: IImgGallery[]
+
+  get tools() {
+    return tools
+  }
+
+  get getlistimages() {
+    if (this.listimages)
+      return this.listimages.sort((a, b) => a.order - b.order)
+    else
+      return null
+  }
+
+  public onDragStart(e) {
+    console.log('onDragStart')
+    e.dataTransfer.setData('text', e.target.id)
+    e.dataTransfer.dropEffect = 'move'
+  }
+
+  public onDragEnter(e) {
+    // don't drop on other draggables
+    if (e.target.draggable !== true) {
+      e.target.classList.add('drag-enter')
+    }
+  }
+
+  public onDragLeave(e) {
+    e.target.classList.remove('drag-enter')
+  }
+
+  public onDragOver(e) {
+    e.preventDefault()
+  }
+
+  public onDrop(e) {
+    console.log('onDrop', e)
+    e.preventDefault()
+
+    // don't drop on other draggables
+    if (e.target.draggable === true) {
+      return
+    }
+
+    const draggedId = e.dataTransfer.getData('text')
+    const draggedEl = document.getElementById(draggedId)
+    console.log('draggedId', draggedId, 'draggedEl', draggedEl)
+
+    // check if original parent node
+    if (draggedEl.parentNode === e.target) {
+      e.target.classList.remove('drag-enter')
+      return
+    }
+
+    const myindex = this.listimages.findIndex((rec) => rec._id === draggedId)
+    const myrec = this.listimages[myindex]
+    let myrecprec = null
+    if (myindex > 0)
+      myrecprec = this.listimages[myindex - 1]
+
+    console.log('myrec', myrec, 'myrecprec', myrecprec, 'ord1', myrec.order, 'ordprec', myrecprec.order)
+
+    if (myrecprec) {
+      let diff = (myrec.order - myrecprec.order) / 2
+      if (diff <= 0)
+        diff++
+      myrec.order = myrecprec.order + diff
+    } else {
+      myrec.order = (myrec.order - 1)
+    }
+
+    console.log('myrec.order', myrec.order)
+
+    // make the exchange
+    // draggedEl.parentNode.removeChild(draggedEl)
+    // e.target.appendChild(draggedEl)
+    e.target.classList.remove('drag-enter')
+
+    this.save()
+  }
+
+  get getclass() {
+    return (this.edit) ? 'my-card-gallery' : 'my-card-gallery-view' + ' text-center'
+  }
+  get getclimg() {
+    return (this.edit) ? 'myimg' : 'myimg-view'
+  }
+
+  get getlastord() {
+    let myord = 0
+    for (const file of this.listimages) {
+      if (file.order > myord)
+        myord = file.order
+    }
+
+    return myord + 10
+  }
+
+  public uploaded(info) {
+    console.log(info)
+    for (const file of info.files) {
+      this.listimages.push({ imagefile: file.name, order: this.getlastord  })
+    }
+
+    this.save()
+  }
+
+  public deleted(rec) {
+    console.table(this.listimages)
+
+    const index = this.listimages.findIndex((elem) => elem.imagefile === rec.imagefile)
+    if (index > -1) {
+      this.listimages.splice(index, 1)
+    }
+
+    // this.listimages = this.listimages.pop((elem) => elem.imagefile !== rec.imagefile)
+
+    console.table(this.listimages)
+
+    this.save()
+  }
+
+  public getfullname(rec) {
+    return 'statics/upload/' + this.gall.directory + `/` + rec.imagefile
+  }
+
+  public async deleteFile(rec) {
+    const filename = this.getfullname(rec)
+
+    // Delete File on server:
+    const ris = await GlobalStore.actions.DeleteFile({filename})
+    if (ris)
+      this.deleted(rec)
+
+  }
+
+  public save() {
+    this.$emit('showandsave', this.listimages)
+  }
+
+}
diff --git a/src/components/CGallery/CGallery.vue b/src/components/CGallery/CGallery.vue
new file mode 100644
index 0000000..4e21605
--- /dev/null
+++ b/src/components/CGallery/CGallery.vue
@@ -0,0 +1,97 @@
+<template>
+  <!--<div class="q-pa-md items-start " style="display: inline-flex; width: 800px;"> -->
+  <div>
+    <div v-if="!edit">
+      <div v-for="(mygallery, index) in listimages" :key="index" v-if="index === 0">
+        <div class="q-pa-md q-gutter-md">
+          <q-card :class="getclass">
+            <q-img :src="`statics/upload/` + gall.directory + `/` + mygallery.imagefile" :class="getclimg"
+                   :alt="mygallery.alt">
+              <div class="absolute-bottom text-shadow">
+                {{listimages.length}} immagini
+              </div>
+            </q-img>
+          </q-card>
+        </div>
+      </div>
+    </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="true"
+                    @dragstart="onDragStart"
+                    @drop="onDrop"
+            >
+
+              <q-img :src="`statics/upload/` + gall.directory + `/` + mygallery.imagefile"
+                     :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>
+
+              <!--Order: {{mygallery.order}} -->
+              <q-input v-model="mygallery.alt"
+                       label="Alt"
+                       dense
+                       @keyup.enter.stop
+                       @input="save"
+                       debounce="1000"
+                       autofocus>
+              </q-input>
+
+              <q-input v-model="mygallery.description"
+                       dense
+                       label="Description"
+                       @keyup.enter.stop
+                       @input="save"
+                       debounce="1000"
+                       autofocus>
+              </q-input>
+
+              <q-card-actions align="center">
+                <q-btn 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="Aggiungi Immagine"
+              accept=".jpg, image/*"
+              :url="tools.geturlupload()+`/` + gall.directory"
+              :headers="tools.getheaders()"
+              :max-file-size="2000000"
+              multiple
+              auto-upload
+              hide-upload-btn
+              no-thumbnails
+              @uploaded="uploaded"
+              style="width: 208px"
+            ></q-uploader>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CGallery.ts">
+</script>
+
+<style lang="scss" scoped>
+  @import './CGallery.scss';
+</style>
diff --git a/src/components/CGallery/index.ts b/src/components/CGallery/index.ts
new file mode 100644
index 0000000..a76ec4e
--- /dev/null
+++ b/src/components/CGallery/index.ts
@@ -0,0 +1 @@
+export {default as CGallery} from './CGallery.vue'