- 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/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()"
          />