- piuchebuono: possiblità di modificare l'immagine dalla scheda direttamente

- migliorata di poco la grafica dell'immagine.
2024-10-02 23:26:52 +02:00
parent e29de7e0f6
commit d09f4831cf
53 changed files with 1736 additions and 124 deletions
--- a/src/common/shared_vuejs.ts
+++ b/src/common/shared_vuejs.ts
@@ -328,6 +328,7 @@ export const shared_consts = {
  TABLES_DIRECTORY_A_PARTE: ['mygroups'],
  TABLES_WITH_ADMINS: ['mygroups', 'circuits'],
  TABLES_DIRECTORY_SINGLE_IMG: ['circuits'],
+  TABLES_IMAGEFILE_SINGOLO: ['productInfos'],

  TABLES_VISU_MAP: 'attivitas',

@@ -2198,6 +2199,8 @@ export const shared_consts = {
    MOBI: 106,
    PDF: 107,
    STREAMING: 108,
+
+    PRODUCT: 1000,
  },

  VERSIONI_PRODOTTO: [
--- a/src/components/CCatalogoCard/CCatalogoCard.vue
+++ b/src/components/CCatalogoCard/CCatalogoCard.vue
@@ -45,8 +45,8 @@
        >
          <q-img
            :src="
-              myproduct.productInfo.img
-                ? `` + myproduct.productInfo.img
+              myproduct.productInfo.imagefile
+                ? `` + myproduct.productInfo.imagefile
                : myproduct.productInfo.image_link
            "
            :alt="myproduct.productInfo.name"
@@ -543,8 +543,8 @@
      >
        <q-img
          :src="
-            myproduct.productInfo.img
-              ? `` + myproduct.productInfo.img
+            myproduct.productInfo.imagefile
+              ? `` + myproduct.productInfo.imagefile
              : myproduct.productInfo.image_link
          "
          :alt="myproduct.productInfo.name"
--- a/src/components/CMyCardService/CMyCardService.vue
+++ b/src/components/CMyCardService/CMyCardService.vue
@@ -34,7 +34,7 @@
                v-if="myrec.photos.length > 0"
                :imgGallery="myrec.photos"
                :directory="
-                  'upload/' + tools.getDirectoryGall(myrec, table, '')
+                  costanti.DIR_UPLOAD + tools.getDirectoryGall(myrec, table, '')
                "
              >
              </CGalleryImages>
--- a/src/components/CMyElem/CMyElem.vue
+++ b/src/components/CMyElem/CMyElem.vue
@@ -325,7 +325,7 @@
                :key="index"
                :name="index"
                :img-src="
-                  getsrcbyimg(`upload/pages/` + myel.path + `/` + rec.imagefile)
+                  getsrcbyimg(costanti.DIR_UPLOAD + `pages/` + myel.path + `/` + rec.imagefile)
                "
                :alt="rec.alt"
                class="carousel_slide"
--- a/src/components/CMyValueDb/CMyValueDb.ts
+++ b/src/components/CMyValueDb/CMyValueDb.ts
@@ -128,6 +128,11 @@ export default defineComponent({
      required: false,
      default: '',
    },
+    path: {
+      type: String,
+      required: false,
+      default: '',
+    },
    pickup: {
      type: Boolean,
      required: false,
--- a/src/components/CMyValueDb/CMyValueDb.vue
+++ b/src/components/CMyValueDb/CMyValueDb.vue
@@ -71,6 +71,7 @@
          minuteinterval="1"
          @showandsave="showandsave"
          @save="save"
+          :path="path"
        >
        </CMyPopupEdit>
      </div>
--- a/src/components/CProductCard/CProductCard.scss
+++ b/src/components/CProductCard/CProductCard.scss
@@ -12,6 +12,7 @@

 .prod_price {
  font-size: 1.25rem;
+
  @media (max-width: 718px) {
    font-size: 1.15rem;
  }
@@ -20,14 +21,16 @@

 .prod_disp {
  font-size: 1.2rem;
+
  @media (max-width: 718px) {
    font-size: 1rem;
  }
 }


-.prod_preorder{
+.prod_preorder {
  font-size: 1.2rem;
+
  @media (max-width: 718px) {
    font-size: 1rem;
  }
@@ -53,22 +56,25 @@
  font-size: 0.75rem;
  color: gray;
 }
+
 .subcat {
  font-size: 1rem;
+
  @media (max-width: 718px) {
    font-size: 0.85rem;
  }
 }
+
 .subcat_color {
  color: green;
 }

-.label-qta{
+.label-qta {
  font-size: 1.15rem;
  font-weight: bold;
 }

-.countdown_scadenza{
+.countdown_scadenza {
  font-size: 1.15rem;
  font-weight: bold;
 }
@@ -77,8 +83,9 @@
  font-style: italic;
 }

-.icone_prod{
+.icone_prod {
  font-size: 1.25rem;
+
  @media (max-width: 718px) {
    font-size: 1.15rem;
  }
@@ -106,37 +113,49 @@
  max-height: 100%;
 }

-.titolo_prod{
-  cursor: pointer; 
+.titolo_prod {
+  cursor: pointer;
 }

 .image-section {
  justify-content: center;
 }

-.card_titolo_prod{
+.card_titolo_prod {
  text-align: center;
  padding: 4px 4px 4px 4px;
  height: 70px;
 }

 .image-container {
-  width: 300px; 
-  height: 300px; 
+  width: 316px;
+  height: 316px;
  position: relative;
-  overflow: hidden;
+  overflow: auto;
+
  @media (max-width: 718px) {
-    width: 200px; 
-    height: 200px; 
-    }
+    width: 200px;
+    height: 200px;
+  }
+  
 }

 .img-pic {
-  width: 100%;
-  height: 100%;
+  width: 98%;
+  height: 98%;
  object-fit: cover;
+  padding: 0px;
+  border-radius: 15px;
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  z-index: 2;
 }

-.q-card__section--vert{
-  padding: 4px;
+.img-pic:hover {
+  transform: scale(1.5);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25), 0 8px 30px rgba(0, 0, 0, 0.22);
 }
+
+.q-card__section--vert {
+  padding: 4px;
+}
--- a/src/components/CProductCard/CProductCard.ts
+++ b/src/components/CProductCard/CProductCard.ts
@@ -7,6 +7,7 @@ import { useQuasar } from 'quasar'
 import { CTitleBanner } from '../CTitleBanner'
 import { CCardState } from '../CCardState'
 import { CCopyBtn } from '../CCopyBtn'
+import { CMyFieldRec } from '../CMyFieldRec'
 import { CMyValueDb } from '../CMyValueDb'

 import { func_tools, toolsext } from '@store/Modules/toolsext'
@@ -49,7 +50,7 @@ export default defineComponent({
      default: false,
    },
  },
-  components: { CTitleBanner, CCardState, CCopyBtn, CMyValueDb, VuePdfApp },
+  components: { CTitleBanner, CCardState, CCopyBtn, CMyFieldRec, CMyValueDb, VuePdfApp },
  setup(props, { emit }) {
    const $q = useQuasar()
    const { t } = useI18n()
@@ -429,8 +430,8 @@ export default defineComponent({
        return false;
      }

-      const { img, image_link } = myproduct.value.productInfo;
-      return ((!!img && img !== '') || (!!image_link && image_link !== ''))
+      const { imagefile, image_link } = myproduct.value.productInfo;
+      return ((!!imagefile && imagefile !== '') || (!!image_link && image_link !== ''))
    }

    onMounted(mounted)
--- a/src/components/CProductCard/CProductCard.vue
+++ b/src/components/CProductCard/CProductCard.vue
@@ -28,7 +28,11 @@
      <q-card-section horizontal :class="'image-section'">
        <div v-if="hasImage()" :class="hasImage() ? 'image-container' : ''">
          <q-img
-            :src="myproduct.productInfo.img ? `` + myproduct.productInfo.img : myproduct.productInfo.image_link"
+            :src="
+              myproduct.productInfo.imagefile
+                ? tools.getFullFileNameByImageFile(myproduct.productInfo.imagefile, 'productInfos')
+                : myproduct.productInfo.image_link
+            "
            :alt="myproduct.productInfo.name"
            class="cursor-pointer img-pic"
            @click="
@@ -41,10 +45,11 @@
            color="primary"
            round
            icon="fas fa-eye"
+            
            class="absolute semi-transparent"
            size="md"
            @click="toggleFullScreen"
-            style="bottom: -10px; right: 0px; transform: translateY(-50%)"
+            style="bottom: -10px; right: 0px; transform: translateY(-50%); z-index: 2"
          />
        </div>

@@ -120,6 +125,7 @@
            :clickable="tools.isManager()"
            @click="
              tools.isManager() &&
+              !editOn &&
              myproduct.QuantitaOrdinateInAttesa &&
              myproduct.QuantitaOrdinateInAttesa > 0
                ? visuListDisponibili()
@@ -217,8 +223,17 @@
          <div class="product_code">
            &nbsp; {{ t('ecomm.codice') }}: {{ myproduct.productInfo.code }}
          </div>
-          <div v-if="myproduct.productInfo.subcatprods && myproduct.productInfo.subcatprods.length > 0" class="subcat">
-            <span style="color: #333333;">{{ t('ecomm.subcat') }}:</span> <span class="subcat_color">{{ myproduct.productInfo.subcatprods[0].name }}</span>
+          <div
+            v-if="
+              myproduct.productInfo.subcatprods &&
+              myproduct.productInfo.subcatprods.length > 0
+            "
+            class="subcat"
+          >
+            <span style="color: #333333">{{ t('ecomm.subcat') }}:</span>
+            <span class="subcat_color">{{
+              myproduct.productInfo.subcatprods[0].name
+            }}</span>
          </div>
        </div>
      </q-card-section>
@@ -302,9 +317,7 @@
          </div>
        </div>
      </q-card-section>
-      <q-card-section
-        v-if="complete && myproduct.producer"
-      >
+      <q-card-section v-if="complete && myproduct.producer">
        <div v-if="myproduct.producer.city">
          <div class="text-grey text-title row items-center q-mt-sm">
            <q-icon name="map" class="q-mr-xs" />
@@ -349,12 +362,53 @@
                :type="costanti.FieldType.string"
              >
              </CMyValueDb>
-              <div v-if="!editOn" v-html="myproduct.productInfo.note">
-              </div>
+              <div v-if="!editOn" v-html="myproduct.productInfo.note"></div>
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-card-section>
+      <q-card-section
+        v-if="
+          editOn &&
+          (!!myproduct.productInfo.imagefile || myproduct.productInfo.imagefile === '')
+        "
+      >
+        <div class="text-center">
+          <div class="col">
+            <strong>Scegli l'Immagine:</strong>
+          </div>
+
+          <div class="row justify-center">
+            <CMyValueDb
+              v-if="editOn"
+              :editOn="editOn"
+              :title="t('products.imagefile')"
+              table="productinfos"
+              :id="myproduct.productInfo._id"
+              :rec="myproduct.productInfo"
+              mykey="imagefile"
+              debounce="1000"
+              :save="updateproductmodif()"
+              :type="costanti.FieldType.image"
+            >
+            </CMyValueDb>
+          </div>
+          {{ myproduct.productInfo.imagefile }}
+        </div>
+
+        <!--<CMyFieldRec
+          title="Immagine:"
+          table="myelems"
+          :id="myproduct.productInfo._id"
+          :rec="myproduct.productInfo"
+          field="imagefile"
+          @update:model-value="modifElem"
+          :canEdit="true"
+          :canModify="true"
+          :fieldtype="costanti.FieldType.image"
+        >
+        </CMyFieldRec>-->
+      </q-card-section>
      <q-card-section v-if="isOrdGas()">
        <q-item
          v-if="
@@ -367,6 +421,7 @@
          :clickable="tools.isManager()"
          @click="
            tools.isManager() &&
+            !editOn &&
            myproduct.QuantitaPrenotateInAttesa &&
            myproduct.QuantitaPrenotateInAttesa > 0
              ? visuListBookable()
@@ -511,7 +566,8 @@
            <q-item-label class="subtit_prod text-blue text-bold">
              <span v-if="getpercqtaraggiunta() >= 1">{{
                t('ecomm.offerta_gas_raggiunta', {
-                  qta: myproduct.qtyToReachForGas * myproduct.productInfo.weight,
+                  qta:
+                    myproduct.qtyToReachForGas * myproduct.productInfo.weight,
                  unit: tools.getUnitsMeasure(
                    myproduct.productInfo.unit,
                    true,
@@ -521,7 +577,8 @@
              }}</span>
              <span v-else>{{
                t('ecomm.offerta_gas', {
-                  qta: myproduct.qtyToReachForGas * myproduct.productInfo.weight,
+                  qta:
+                    myproduct.qtyToReachForGas * myproduct.productInfo.weight,
                  unit: tools.getUnitsMeasure(
                    myproduct.productInfo.unit,
                    true,
@@ -562,8 +619,12 @@
              <span class="prod_disp">
                {{
                  t('ecomm.bookedGASQtyOrdered_str', {
-                    qta: (myproduct.bookableGASBloccatiQty + myproduct.QuantitaPrenotateInAttesa) * myproduct.productInfo.weight,
-                    qtatot: myproduct.qtyToReachForGas * myproduct.productInfo.weight,
+                    qta:
+                      (myproduct.bookableGASBloccatiQty +
+                        myproduct.QuantitaPrenotateInAttesa) *
+                      myproduct.productInfo.weight,
+                    qtatot:
+                      myproduct.qtyToReachForGas * myproduct.productInfo.weight,
                  })
                }}
                <q-linear-progress size="10px" :value="getpercqtaraggiunta()" />
@@ -643,7 +704,7 @@
            </q-item-label>
          </q-item-section>
        </q-item>
-        
+
        <q-item
          v-if="
            myproduct.gasordine &&
@@ -923,8 +984,11 @@
    </q-dialog>

    <q-dialog
-      v-if="true && 
-        myproduct && myproduct.productInfo && myproduct.productInfo.link_scheda
+      v-if="
+        true &&
+        myproduct &&
+        myproduct.productInfo &&
+        myproduct.productInfo.link_scheda
      "
      v-model="apriSchedaPDF"
      maximized
@@ -958,8 +1022,11 @@
    </q-dialog>

    <q-dialog
-      v-if="false &&
-        myproduct && myproduct.productInfo && myproduct.productInfo.link_scheda
+      v-if="
+        false &&
+        myproduct &&
+        myproduct.productInfo &&
+        myproduct.productInfo.link_scheda
      "
      v-model="apriSchedaPDF"
      fullscreen
@@ -980,7 +1047,7 @@
      <q-card-section>
        <vue-pdf-app
          :pdf="myproduct.productInfo.link_scheda"
-          style="height: 100vh;"
+          style="height: 100vh"
        ></vue-pdf-app>
      </q-card-section>
    </q-dialog>
@@ -998,7 +1065,11 @@
        @click="toggleFullScreen"
      >
        <q-img
-          :src="myproduct.productInfo.img ? `` + myproduct.productInfo.img : myproduct.productInfo.image_link"
+          :src="
+            myproduct.productInfo.imagefile
+              ? tools.getFullFileNameByImageFile(myproduct.productInfo.imagefile, 'productInfos')
+              : myproduct.productInfo.image_link
+          "
          :alt="myproduct.productInfo.name"
          :fit="tools.isMobile() ? 'fill' : 'cover'"
          class="fullscreen-image"
--- a/src/components/CSingleCart/CSingleCart.vue
+++ b/src/components/CSingleCart/CSingleCart.vue
@@ -10,9 +10,9 @@
            v-if="
              order.product &&
              order.product.productInfo &&
-              order.product.productInfo.img
+              order.product.productInfo.imagefile
            "
-            :src="`` + order.product.productInfo.img"
+            :src="`` + order.product.productInfo.imagefile"
            :alt="order.product.productInfo.name"
            :class="myimgclass()"
          />
--- a/src/model/Products.ts
+++ b/src/model/Products.ts
@@ -22,7 +22,7 @@ export interface IProductInfo {
  stars?: number
  date?: Date
  icon?: string
-  img?: string
+  imagefile?: string
  img2?: string
  img3?: string
  img4?: string
--- a/src/store/Modules/costanti.ts
+++ b/src/store/Modules/costanti.ts
@@ -307,7 +307,7 @@ export const costanti = {
  VISUTABLE_USER_TABCIRCUIT: -5,
  VISUTABLE_GROUP_CIRCUIT: -6,

-  DIR_UPLOAD: 'upload/', // upload/
+  DIR_UPLOAD: 'upload/',

  FRIENDS: 1,
  ASK_TRUST: 2,
--- a/src/store/Modules/fieldsTable.ts
+++ b/src/store/Modules/fieldsTable.ts
@@ -2220,7 +2220,7 @@ export const colTableProductInfos = [
  AddCol({ name: 'name', label_trans: 'products.name' }),
  AddCol({ name: 'description', label_trans: 'products.description', fieldtype: costanti.FieldType.html }),
  AddCol({ name: 'icon', label_trans: 'products.icon' }),
-  AddCol({ name: 'img', label_trans: 'products.img', fieldtype: costanti.FieldType.image_and_filename, path: 'upload/products/' }),
+  AddCol({ name: 'imagefile', label_trans: 'products.img', fieldtype: costanti.FieldType.image_and_filename, path: costanti.DIR_UPLOAD + 'products/' }),
  AddCol({
    name: 'department',
    label_trans: 'products.department',
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -7340,18 +7340,25 @@ export const tools = {
    // console.log('arrimage', arrimage)

    if (shared_consts.TABLES_DIRECTORY_A_PARTE.includes(table)) {
-      return `upload/${table}/` + groupname + '/' + arrimage[0].imagefile
+      return costanti.DIR_UPLOAD + `${table}/` + groupname + '/' + arrimage[0].imagefile
    } else if (shared_consts.TABLES_DIRECTORY_SINGLE_IMG.includes(table)) {
-      return `upload/${table}/` + groupname + '/' + arrimage[0].imagefile
+      return costanti.DIR_UPLOAD + `${table}/` + groupname + '/' + arrimage[0].imagefile
    } else {
      // console.log('username', username, 'table', table)
      if (arrimage && arrimage.length > 0) {
-        return `upload/profile/${username}/${table}/` + arrimage[0].imagefile
+        return costanti.DIR_UPLOAD + `profile/${username}/${table}/` + arrimage[0].imagefile
      } else {
        return ''
      }
    }
  },
+  getFullFileNameByImageFile(imagefile: string, table: string) {
+    // console.log('arrimage', arrimage)
+
+    if (shared_consts.TABLES_IMAGEFILE_SINGOLO.includes(table)) {
+      return costanti.DIR_UPLOAD + `products/` + imagefile    
+    }
+  },
  canModifyThisRec(rec: any, tablesel: string) {
    // console.log('rec', rec)

@@ -7921,7 +7928,7 @@ export const tools = {
  },

  getImgFileByFilename(elem: IMyElem, filename: string) {
-    return 'upload/pages/' + elem.path + '/' + filename
+    return costanti.DIR_UPLOAD + 'pages/' + elem.path + '/' + filename
  },

  getImgFileByElem(elem: IMyElem, reccard?: IMyCard) {
@@ -7938,13 +7945,13 @@ export const tools = {
            addtourl = '?v=' + reccard.vers_img
          }

-          return 'upload/pages/' + elem.path + '/' + reccard.imagefile + addtourl
+          return costanti.DIR_UPLOAD + 'pages/' + elem.path + '/' + reccard.imagefile + addtourl
        } else
          return ''
      } else if (elem.type === shared_consts.ELEMTYPE.IMAGE) {
-        return 'upload/pages/' + elem.path + '/' + elem.container + addtourl
+        return costanti.DIR_UPLOAD + 'pages/' + elem.path + '/' + elem.container + addtourl
      } else {
-        return 'upload/pages/' + elem.path + '/' + elem.image + addtourl
+        return costanti.DIR_UPLOAD + 'pages/' + elem.path + '/' + elem.image + addtourl
      }
    }
  },
--- a/src/views/admin/dbop/dbop.vue
+++ b/src/views/admin/dbop/dbop.vue
@@ -533,6 +533,11 @@
        color="primary"
        @click="EseguiFunz('correggiProductTypes', '', '')"
      ></q-btn>
+      <br /><q-btn
+        label="Sostituisci i 'img' in 'imagefile"
+        color="primary"
+        @click="EseguiFunz('replaceProductImgToImageFile', '', '')"
+      ></q-btn>
      <br />
    </div>
    <div class="row">
--- a/src/views/user/myservice/myservice.vue
+++ b/src/views/user/myservice/myservice.vue
@@ -17,30 +17,6 @@
      <CCheckIfIsLogged></CCheckIfIsLogged>
    </div>

-    <!--
-    <div class="q-ma-sm q-gutter-sm q-pa-xs">
-      <div v-if="!!myskill.note" v-html="myskill.note"></div>
-
-      <div v-for="(photo, index) in myskill.photos" :key="index">
-        <div v-if="!!photo.imagefile" class="text-center">
-
-          <q-img :src="'upload/profile/'+myskill.username+'/myskills/'+photo.imagefile" class="img"></q-img>
-        </div>
-      </div>
-
-      <div class="row justify-evenly">
-        <CSkill
-          :table="table"
-          :filtercustom="filtroutente"
-          :visuinpage="true"
-        >
-
-        </CSkill>
-      </div>
-
-    </div>
-    -->
-
    <br />
    <br />
  </CMyPage>