- inserito il componente per scegliere il colore e la trasparenza, dello sfondo della pagina introduttiva

- corretto i margini del testo e la dimensione del font.

src/components/CMyPopupEdit/CMyPopupEdit.ts

@@ -17,6 +17,7 @@ import { CInput } from '../CInput'
 import { CMyEditor } from '../CMyEditor'
 import { CMyEditorAI } from '../CMyEditorAI'
 import { CGallery } from '../CGallery'
+import { CPickColor } from '../CPickColor'
 import { CSelectImage } from '../CSelectImage'
 import { CAccomodation } from '../CAccomodation'
 import { tools } from '@tools'
@@ -222,6 +223,7 @@ export default defineComponent({
   components: {
     CMyChipList, CDateTime, CDate, CMyToggleList, CMySelect, CMyEditor, CGallery, CMyEditorAI,
     CCurrencyValue, CLabel, CAccomodation, CSelectImage, CMapEditAddressByCoord, CInput,
+    CPickColor,
   },
   setup(props, { emit }) {
     const $q = useQuasar()
@@ -236,14 +238,20 @@ export default defineComponent({
     const visuhtml = ref(false)
     const showeditor = ref(false)
 
+    const hoverPreview = ref(false)
+
     const myImgGall = ref([{}] as IImgGallery[])
 
     const $router = useRouter()
 
     const loaded = ref(false)
 
+    const myColor = ref('#FF00AA55'); // Colore con trasparenza iniziale
+
     const popupEditRef = ref(null)
 
+    const colorPicker = ref(null);
+
     const addstrrequired = ref('')
 
     const col = ref(<IColGridTable>{
@@ -982,6 +990,10 @@ export default defineComponent({
       changevalRec(payload);
     }
 
+    function openColorPicker() {
+      // Apre la finestra del picker
+      colorPicker.value.openDialog();
+    }
 
     return {
       myvalue,
@@ -1030,6 +1042,10 @@ export default defineComponent({
       copyToClipboard,
       updateValidazione,
       handleShowAndSave,
+      openColorPicker,
+      colorPicker,
+      myColor,
+      hoverPreview,
     }
   }
 })

src/components/CMyPopupEdit/CMyPopupEdit.vue

@@ -4,7 +4,11 @@
       v-if="
         tools.checkIfShowField(
           col,
-          insertMode ? tools.TIPOVIS_NEW_RECORD : isInModif ? tools.TIPOVIS_EDIT_RECORD : tools.TIPOVIS_SHOW_RECORD,
+          insertMode
+            ? tools.TIPOVIS_NEW_RECORD
+            : isInModif
+              ? tools.TIPOVIS_EDIT_RECORD
+              : tools.TIPOVIS_SHOW_RECORD,
           visulabel,
           myvalue
         )
@@ -32,7 +36,8 @@
                 v-model="myvalue"
                 :label="title"
                 :disable="
-                  (disable && col.name !== 'profile.saw_zoom_presentation') || (!isInModif && !canModify && !canEdit)
+                  (disable && col.name !== 'profile.saw_zoom_presentation') ||
+                  (!isInModif && !canModify && !canEdit)
                 "
                 @update:model-value="Savedb"
               ></q-toggle>
@@ -79,7 +84,8 @@
               <span
                 v-if="
                   col.extrafield &&
-                  (col.tipovisu !== costanti.TipoVisu.LINK || (col.tipovisu === costanti.TipoVisu.LINK && myvalue))
+                  (col.tipovisu !== costanti.TipoVisu.LINK ||
+                    (col.tipovisu === costanti.TipoVisu.LINK && myvalue))
                 "
               >
                 <span class="extrafield">{{ t(col.extrafield) }}</span>
@@ -103,19 +109,28 @@
               v-else-if="
                 !col.extrafield ||
                 (col.extrafield &&
-                  (col.tipovisu !== costanti.TipoVisu.LINK || (col.tipovisu === costanti.TipoVisu.LINK && myvalue)))
+                  (col.tipovisu !== costanti.TipoVisu.LINK ||
+                    (col.tipovisu === costanti.TipoVisu.LINK && myvalue)))
               "
               class="q-ma-xs chip_shadow"
             >
               <div
-                v-if="(col.tipovisu === costanti.TipoVisu.LINK || col.tipovisu === costanti.TipoVisu.NONE) && myvalue"
+                v-if="
+                  (col.tipovisu === costanti.TipoVisu.LINK ||
+                    col.tipovisu === costanti.TipoVisu.NONE) &&
+                  myvalue
+                "
                 class="full-width"
               >
                 <q-item
                   clickable
                   v-ripple
                   @click="
-                    gotoPage(col.link ? col.link.replace(col.name, myvalue) : `/my/username`.replace(col.name, myvalue))
+                    gotoPage(
+                      col.link
+                        ? col.link.replace(col.name, myvalue)
+                        : `/my/username`.replace(col.name, myvalue)
+                    )
                   "
                 >
                   <q-item-section avatar>
@@ -143,7 +158,9 @@
                   </q-item-section>
                   <q-item-section class="">
                     <q-item-label>{{ tools.getNameToShow(row, col) }}</q-item-label>
-                    <q-item-label caption>{{ tools.getUserNameOnlyIfToShow(row, col) }}</q-item-label>
+                    <q-item-label caption>{{
+                      tools.getUserNameOnlyIfToShow(row, col)
+                    }}</q-item-label>
                     <q-item-label
                       v-if="row.profile && row.profile.resid_province"
                       style="text-align: right"
@@ -207,8 +224,16 @@
                   class="q-ma-md q-pa-sm"
                   :color="myvalue === costanti.OP_ANDOR.OP_AND ? 'red' : 'green'"
                   text-color="white"
-                  :icon="myvalue === costanti.OP_ANDOR.OP_AND ? 'fas fa-filter' : 'fas fa-sliders-h'"
+                  :icon="
-                  :label="myvalue === costanti.OP_ANDOR.OP_AND ? $t('dialog.conditionAND') : $t('dialog.conditionOR')"
+                    myvalue === costanti.OP_ANDOR.OP_AND
+                      ? 'fas fa-filter'
+                      : 'fas fa-sliders-h'
+                  "
+                  :label="
+                    myvalue === costanti.OP_ANDOR.OP_AND
+                      ? $t('dialog.conditionAND')
+                      : $t('dialog.conditionOR')
+                  "
                 ></q-chip>
               </span>
             </div>
@@ -217,7 +242,7 @@
             <div v-if="myvalue">
               <div>
                 <q-chip
-                dense
+                  dense
                   class="q-ma-xs q-pa-xs"
                   :color="
                     myvalue?.esito === costanti.VALIDATO.SI
@@ -244,7 +269,10 @@
                 ></q-chip>
               </div>
               <div v-if="myvalue?.username">
-                <span>(Utente: {{ myvalue.username }} - in Data: {{ tools.getstrDateTime(myvalue.data) }})</span>
+                <span
+                  >(Utente: {{ myvalue.username }} - in Data:
+                  {{ tools.getstrDateTime(myvalue.data) }})</span
+                >
               </div>
 
               <div v-if="myvalue?.note">
@@ -253,7 +281,61 @@
             </div>
           </div>
 
-          <div v-else-if="col.fieldtype === costanti.FieldType.string || col.fieldtype === costanti.FieldType.crypted">
+          <div
+            v-else-if="col.fieldtype === costanti.FieldType.pickcolor"
+            class="row items-center q-gutter-md"
+          >
+            <div
+              class="q-pa-md q-card shadow-1"
+              style="min-width: 350px; max-width: 400px"
+            >
+              <!-- Etichetta -->
+              <p class="q-pt-none q-mb-md text-h6">
+                {{ col.visulabel ? addstrrequired + t(col.label_trans) : col.label }}:
+              </p>
+
+              <!-- Selezione del colore -->
+              <div class="q-mb-md row">
+                <!-- Visualizzazione colore selezionato -->
+                <div
+                  class="color-preview"
+                  :style="{
+                    backgroundColor: tools.getColorWithTransparency(myvalue),
+                    width: '100px',
+                    height: '100px',
+                    borderRadius: '8px',
+                    border: '2px solid #ccc',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }"
+                  @mouseover="hoverPreview = true"
+                  @mouseleave="hoverPreview = false"
+                  :class="{ 'shadow-2': hoverPreview }"
+                  @click="openColorPicker"
+                >
+                  <span style="font-size: 14px">{{ myvalue }}</span>
+                </div>
+
+
+              </div>
+
+              <!-- Componente di selezione del colore -->
+              <CPickColor
+                v-if="canEdit || isInModif"
+                ref="colorPicker"
+                v-model="myvalue"
+                @update:model-value="changevalRec"
+              />
+            </div>
+          </div>
+
+          <div
+            v-else-if="
+              col.fieldtype === costanti.FieldType.string ||
+              col.fieldtype === costanti.FieldType.crypted
+            "
+          >
             <div
               v-if="isInModif"
               :class="{ flex: !isInModif, 'q-mb-sm': true }"
@@ -302,7 +384,11 @@
                 color="white"
                 text-color="blue"
                 :icon="`img:` + userStore.getImgUserByUsername(myvalue)"
-                :to="col.link ? col.link.replace(col.name, myvalue) : `/my/username`.replace(col.name, myvalue)"
+                :to="
+                  col.link
+                    ? col.link.replace(col.name, myvalue)
+                    : `/my/username`.replace(col.name, myvalue)
+                "
                 :label="myvalue"
               >
               </q-btn>
@@ -357,13 +443,22 @@
               @update:model-value="changeValRecCoordAddr"
             ></CMapEditAddressByCoord>
           </div>
-          <div v-else-if="col.fieldtype === costanti.FieldType.number || col.fieldtype === costanti.FieldType.currency">
+          <div
+            v-else-if="
+              col.fieldtype === costanti.FieldType.number ||
+              col.fieldtype === costanti.FieldType.currency
+            "
+          >
             <div v-if="canEdit || isInModif">
               <div>
                 <CInput
                   v-model="myvalue"
                   :label="
-                    col.visulabel ? t(col.label_trans) : visulabel ? addstrrequired + t(col.label_trans) : undefined
+                    col.visulabel
+                      ? t(col.label_trans)
+                      : visulabel
+                        ? addstrrequired + t(col.label_trans)
+                        : undefined
                   "
                   :dense="dense"
                   @savedb="Savedb"
@@ -404,7 +499,11 @@
               <CInput
                 v-model="myvalue"
                 :label="
-                  col.visulabel ? t(col.label_trans) : visulabel ? addstrrequired + t(col.label_trans) : undefined
+                  col.visulabel
+                    ? t(col.label_trans)
+                    : visulabel
+                      ? addstrrequired + t(col.label_trans)
+                      : undefined
                 "
                 :dense="dense"
                 @savedb="changevalRec"
@@ -460,10 +559,18 @@
                 {{ t(col.label_trans ? col.label_trans : '') }}
               </span>
               <CGallery
-                :imagebak="col.showpicprofile_ifnotset ? userStore.getImgByProfile(row['profile'], true) : ''"
+                :imagebak="
+                  col.showpicprofile_ifnotset
+                    ? userStore.getImgByProfile(row['profile'], true)
+                    : ''
+                "
                 :title="tools.getTitleGall(table)"
                 :directory="tools.getDirectoryGall(myrow, table, mypath)"
-                :imgGall="myvalue && myvalue.imagefile ? [myvalue] : [{ imagefile: myvalue, vers_img: 1 }]"
+                :imgGall="
+                  myvalue && myvalue.imagefile
+                    ? [myvalue]
+                    : [{ imagefile: myvalue, vers_img: 1 }]
+                "
                 :edit="isviewfield()"
                 :canModify="canModify"
                 :isInModif="isInModif"
@@ -524,10 +631,18 @@
               >
               </q-input>
               <CGallery
-                :imagebak="col.showpicprofile_ifnotset ? userStore.getImgByProfile(row['profile'], true) : ''"
+                :imagebak="
+                  col.showpicprofile_ifnotset
+                    ? userStore.getImgByProfile(row['profile'], true)
+                    : ''
+                "
                 :title="tools.getTitleGall(table)"
                 :directory="tools.getDirectoryGall(myrow, table, mypath)"
-                :imgGall="myvalue && myvalue.imagefile ? [myvalue] : [{ imagefile: myvalue, vers_img: 1 }]"
+                :imgGall="
+                  myvalue && myvalue.imagefile
+                    ? [myvalue]
+                    : [{ imagefile: myvalue, vers_img: 1 }]
+                "
                 :edit="isviewfield()"
                 :canModify="canModify"
                 :isInModif="isInModif"
@@ -581,7 +696,11 @@
               {{ t('reg.photo') }}
               <CSelectImage
                 v-bind="$attrs"
-                :imagebak="col.showpicprofile_ifnotset ? userStore.getImgByProfile(row['profile'], true) : ''"
+                :imagebak="
+                  col.showpicprofile_ifnotset
+                    ? userStore.getImgByProfile(row['profile'], true)
+                    : ''
+                "
                 :title="tools.getTitleGall(table)"
                 :directory="tools.getDirectoryGall(myrow, table, mypath)"
                 :imgGall="myvalue && myvalue.imagefile ? [myvalue.imagefile] : [myvalue]"
@@ -648,7 +767,14 @@
                 :pickup="pickup"
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
-                :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+                :options="
+                  globalStore.getTableJoinByName(
+                    col.jointable,
+                    col.addall,
+                    col.addnone,
+                    col.filter
+                  )
+                "
                 :useinput="false"
                 :addstrrequired="addstrrequired"
               >
@@ -674,7 +800,14 @@
                 :pickup="pickup"
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
-                :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+                :options="
+                  globalStore.getTableJoinByName(
+                    col.jointable,
+                    col.addall,
+                    col.addnone,
+                    col.filter
+                  )
+                "
                 :useinput="false"
                 :addstrrequired="addstrrequired"
               >
@@ -737,10 +870,19 @@
           </div>
           <div v-else-if="col.fieldtype === costanti.FieldType.binary">
             <div v-if="isInModif">
-              <span v-if="insertMode"> {{ col.label ? col.label : t(col.label_trans) }}: </span>
+              <span v-if="insertMode">
+                {{ col.label ? col.label : t(col.label_trans) }}:
+              </span>
               <CMyToggleList
                 :label="col.titlepopupedit ? col.titlepopupedit : undefined"
-                :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+                :options="
+                  globalStore.getTableJoinByName(
+                    col.jointable,
+                    col.addall,
+                    col.addnone,
+                    col.filter
+                  )
+                "
                 v-model:value="myvalue"
                 @update:value="changevalRec"
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
@@ -754,7 +896,14 @@
                 :type="costanti.FieldType.binary"
                 :value="myvalue"
                 @update:value="changevalRec"
-                :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+                :options="
+                  globalStore.getTableJoinByName(
+                    col.jointable,
+                    col.addall,
+                    col.addnone,
+                    col.filter
+                  )
+                "
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
                 :opticon="fieldsTable.getIconByTable(col.jointable)"
@@ -771,7 +920,9 @@
                 :row="row"
                 :multiple="true"
                 :withToggle="true"
-                :label="col.label ? col.label : col?.label_trans ? t(col?.label_trans) : ''"
+                :label="
+                  col.label ? col.label : col?.label_trans ? t(col?.label_trans) : ''
+                "
                 :filter_table="col.filter_table"
                 :filter_field="col.filter_field"
                 :value_extra="value_extra"
@@ -784,7 +935,14 @@
                 color="primary"
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
-                :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+                :options="
+                  globalStore.getTableJoinByName(
+                    col.jointable,
+                    col.addall,
+                    col.addnone,
+                    col.filter
+                  )
+                "
                 :sola_lettura="!isInModif"
                 :useinput="col.allowNewValue"
                 :newvaluefunc="addNewValue"
@@ -831,7 +989,14 @@
                 :label="title"
                 @update:value="changevalRec"
                 :value="myvalue"
-                :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+                :options="
+                  globalStore.getTableJoinByName(
+                    col.jointable,
+                    col.addall,
+                    col.addnone,
+                    col.filter
+                  )
+                "
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
                 :opticon="fieldsTable.getIconByTable(col.jointable)"
@@ -863,12 +1028,20 @@
               v-model="myvalue"
               type="toggle"
               @update:model-value="changevalRec"
-              :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+              :options="
+                globalStore.getTableJoinByName(
+                  col.jointable,
+                  col.addall,
+                  col.addnone,
+                  col.filter
+                )
+              "
             ></q-option-group>
           </div>
           <div
             v-else-if="
-              col.fieldtype === costanti.FieldType.select || col.fieldtype === costanti.FieldType.select_by_server
+              col.fieldtype === costanti.FieldType.select ||
+              col.fieldtype === costanti.FieldType.select_by_server
             "
           >
             <div v-if="isInModif">
@@ -879,7 +1052,9 @@
                 :label="col.label ? col.label : t(col.label_trans)"
                 v-model:value="myvalue"
                 :pickup="col.fieldtype === costanti.FieldType.select_by_server"
-                :tablesel="col.fieldtype === costanti.FieldType.select_by_server ? tablesel : ''"
+                :tablesel="
+                  col.fieldtype === costanti.FieldType.select_by_server ? tablesel : ''
+                "
                 @update:value="changevalRec"
                 @update:model-value="Savedb"
                 :newvaluefunc="addNewValue"
@@ -889,7 +1064,14 @@
                 :value_extra="value_extra"
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
-                :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+                :options="
+                  globalStore.getTableJoinByName(
+                    col.jointable,
+                    col.addall,
+                    col.addnone,
+                    col.filter
+                  )
+                "
                 :useinput="col.allowNewValue"
                 :addstrrequired="addstrrequired"
                 :dense="dense"
@@ -915,7 +1097,14 @@
                 :labelifblank="canEdit ? 'Selezionare' : ''"
                 :filter_table="col.filter_table"
                 :filter_field="col.filter_field"
-                :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+                :options="
+                  globalStore.getTableJoinByName(
+                    col.jointable,
+                    col.addall,
+                    col.addnone,
+                    col.filter
+                  )
+                "
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
                 :opticon="fieldsTable.getIconByTable(col.jointable)"
@@ -944,7 +1133,14 @@
               color="primary"
               :optval="fieldsTable.getKeyByTable(col.jointable)"
               :optlab="fieldsTable.getLabelByTable(col.jointable)"
-              :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+              :options="
+                globalStore.getTableJoinByName(
+                  col.jointable,
+                  col.addall,
+                  col.addnone,
+                  col.filter
+                )
+              "
               :sola_lettura="!isInModif"
               :useinput="isInModif"
               :addstrrequired="addstrrequired"
@@ -952,7 +1148,12 @@
             >
             </CMySelect>
           </div>
-          <div v-else-if="col.fieldtype === costanti.FieldType.star5 || col.fieldtype === costanti.FieldType.star3">
+          <div
+            v-else-if="
+              col.fieldtype === costanti.FieldType.star5 ||
+              col.fieldtype === costanti.FieldType.star3
+            "
+          >
             <div v-if="isInModif">
               <CMySelect
                 :type_out="col.field_outtype"
@@ -966,7 +1167,14 @@
                 :value_extra="value_extra"
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
-                :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+                :options="
+                  globalStore.getTableJoinByName(
+                    col.jointable,
+                    col.addall,
+                    col.addnone,
+                    col.filter
+                  )
+                "
                 :useinput="false"
                 :addstrrequired="addstrrequired"
                 :dense="dense"
@@ -1122,7 +1330,11 @@
             ref="popupEditRef"
             v-if="!isInModif && canEdit && noPopupeditByCol(col)"
             v-model="myvalue"
-            :disable="col.disable || disable || col.fieldtype === costanti.FieldType.image_and_filename"
+            :disable="
+              col.disable ||
+              disable ||
+              col.fieldtype === costanti.FieldType.image_and_filename
+            "
             :readonly="col.disable || disable"
             :title="title ? title : col.titlepopupedit"
             buttons
@@ -1147,13 +1359,23 @@
                 v-model="scope.value"
                 :label="t('dialog.condition')"
                 :options="[
-                  { label: 'Filtra se Tutti i criteri sono veri (AND)', value: costanti.OP_ANDOR.OP_AND },
+                  {
-                  { label: 'Filtra se almeno uno dei criteri è vero (OR)', value: costanti.OP_ANDOR.OP_OR },
+                    label: 'Filtra se Tutti i criteri sono veri (AND)',
+                    value: costanti.OP_ANDOR.OP_AND,
+                  },
+                  {
+                    label: 'Filtra se almeno uno dei criteri è vero (OR)',
+                    value: costanti.OP_ANDOR.OP_OR,
+                  },
                 ]"
                 emit-value
                 map-options
                 :color="scope.value === costanti.OP_ANDOR.OP_AND ? 'red' : 'green'"
-                :icon="scope.value === costanti.OP_ANDOR.OP_AND ? 'fas fa-filter' : 'fas fa-sliders-h'"
+                :icon="
+                  scope.value === costanti.OP_ANDOR.OP_AND
+                    ? 'fas fa-filter'
+                    : 'fas fa-sliders-h'
+                "
                 @update:model-value="changevalRec"
               >
               </q-select>
@@ -1164,7 +1386,9 @@
                   v-model="scope.value.esito"
                   type="radio"
                   :icon="
-                    [costanti.VALIDATO.NO, costanti.VALIDATO.TO_RESOLV].includes(myvalue.esito)
+                    [costanti.VALIDATO.NO, costanti.VALIDATO.TO_RESOLV].includes(
+                      myvalue.esito
+                    )
                       ? 'fas fa-question-circle'
                       : 'fas fa-check-circle'
                   "
@@ -1194,7 +1418,10 @@
               </div>
             </div>
             <div
-              v-else-if="col.fieldtype === costanti.FieldType.string || col.fieldtype === costanti.FieldType.crypted"
+              v-else-if="
+                col.fieldtype === costanti.FieldType.string ||
+                col.fieldtype === costanti.FieldType.crypted
+              "
             >
               <q-input
                 v-bind="$attrs"
@@ -1225,7 +1452,13 @@
               >
                 <CMyEditorAI
                   v-model:value="scope.value"
-                  :title="col.visulabel ? t(col.label_trans) : visulabel ? addstrrequired + col.label : undefined"
+                  :title="
+                    col.visulabel
+                      ? t(col.label_trans)
+                      : visulabel
+                        ? addstrrequired + col.label
+                        : undefined
+                  "
                   @keyup.enter.stop
                   :showButtons="false"
                   :canModify="canModify"
@@ -1244,7 +1477,13 @@
                   debounce="1000"
                   :maxlength="col.maxlength ? col.maxlength : undefined"
                   autofocus
-                  :label="col.visulabel ? t(col.label_trans) : visulabel ? addstrrequired + col.label : undefined"
+                  :label="
+                    col.visulabel
+                      ? t(col.label_trans)
+                      : visulabel
+                        ? addstrrequired + col.label
+                        : undefined
+                  "
                 >
                 </q-input>
               </div>
@@ -1312,25 +1551,39 @@
             </div>
             <div
               v-else-if="
-                col.fieldtype === costanti.FieldType.select || col.fieldtype === costanti.FieldType.select_by_server
+                col.fieldtype === costanti.FieldType.select ||
+                col.fieldtype === costanti.FieldType.select_by_server
               "
             >
               <CMySelect
                 :type_out="col.field_outtype"
                 :col="col"
                 :row="row"
-                :label="col.label ? col.label : col.label_trans ? t(col.label_trans) : undefined"
+                :label="
+                  col.label ? col.label : col.label_trans ? t(col.label_trans) : undefined
+                "
                 v-model:value="scope.value"
                 :pickup="col.fieldtype === costanti.FieldType.select_by_server"
                 :addnone="col?.addnone"
-                :tablesel="col.fieldtype === costanti.FieldType.select_by_server ? tablesel : undefined"
+                :tablesel="
+                  col.fieldtype === costanti.FieldType.select_by_server
+                    ? tablesel
+                    : undefined
+                "
                 :filter_table="col.filter_table"
                 :filter_field="col.filter_field"
                 :value_extra="value_extra"
                 :newvaluefunc="addNewValue"
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
-                :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+                :options="
+                  globalStore.getTableJoinByName(
+                    col.jointable,
+                    col.addall,
+                    col.addnone,
+                    col.filter
+                  )
+                "
                 :useinput="col.allowNewValue"
                 :addstrrequired="addstrrequired"
                 :dense="dense"
@@ -1358,7 +1611,14 @@
                 color="primary"
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
-                :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+                :options="
+                  globalStore.getTableJoinByName(
+                    col.jointable,
+                    col.addall,
+                    col.addnone,
+                    col.filter
+                  )
+                "
                 :useinput="true"
                 :addstrrequired="addstrrequired"
                 :dense="dense"
@@ -1384,7 +1644,14 @@
                 color="primary"
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
-                :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+                :options="
+                  globalStore.getTableJoinByName(
+                    col.jointable,
+                    col.addall,
+                    col.addnone,
+                    col.filter
+                  )
+                "
                 :sola_lettura="!isInModif"
                 :useinput="col.allowNewValue"
                 :newvaluefunc="addNewValue"
@@ -1503,7 +1770,11 @@
             </div>
             <div v-else-if="col.fieldtype === costanti.FieldType.onlydate">
               <CDateTime
-                :label="col.label ? addstrrequired + col.label : addstrrequired + t(col.label_trans)"
+                :label="
+                  col.label
+                    ? addstrrequired + col.label
+                    : addstrrequired + t(col.label_trans)
+                "
                 :class="{ 'cursor-pointer': canEdit }"
                 :valueDate="myvalue"
                 v-model:value="myvalue"
@@ -1519,7 +1790,14 @@
             <div v-else-if="col.fieldtype === costanti.FieldType.binary">
               <CMyToggleList
                 :label="col.titlepopupedit ? col.titlepopupedit : undefined"
-                :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+                :options="
+                  globalStore.getTableJoinByName(
+                    col.jointable,
+                    col.addall,
+                    col.addnone,
+                    col.filter
+                  )
+                "
                 v-model:value="scope.value"
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
@@ -1539,7 +1817,12 @@
               >
               </q-input>
             </div>
-            <div v-else-if="col.fieldtype === costanti.FieldType.star5 || col.fieldtype === costanti.FieldType.star3">
+            <div
+              v-else-if="
+                col.fieldtype === costanti.FieldType.star5 ||
+                col.fieldtype === costanti.FieldType.star3
+              "
+            >
               <CMySelect
                 :type_out="col.field_outtype"
                 :col="col"
@@ -1548,7 +1831,14 @@
                 v-model:value="scope.value"
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
-                :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.addnone, col.filter)"
+                :options="
+                  globalStore.getTableJoinByName(
+                    col.jointable,
+                    col.addall,
+                    col.addnone,
+                    col.filter
+                  )
+                "
                 :useinput="false"
                 :addstrrequired="addstrrequired"
               >
@@ -1591,10 +1881,18 @@
                 >
                 </q-input>
                 <CGallery
-                  :imagebak="col.showpicprofile_ifnotset ? userStore.getImgByProfile(row['profile'], true) : ''"
+                  :imagebak="
+                    col.showpicprofile_ifnotset
+                      ? userStore.getImgByProfile(row['profile'], true)
+                      : ''
+                  "
                   :title="tools.getTitleGall(table)"
                   :directory="tools.getDirectoryGall(myrow, table, mypath)"
-                  :imgGall="myvalue && myvalue.imagefile ? [myvalue] : [{ imagefile: myvalue, vers_img: 1 }]"
+                  :imgGall="
+                    myvalue && myvalue.imagefile
+                      ? [myvalue]
+                      : [{ imagefile: myvalue, vers_img: 1 }]
+                  "
                   :edit="isviewfield()"
                   :canModify="canModify"
                   :isInModif="isInModif"

src/components/CPickColor/CPickColor.scss

@@ -0,0 +1,3 @@
+.q-dialog {
+  min-width: 350px;
+}

src/components/CPickColor/CPickColor.ts

@@ -0,0 +1,101 @@
+import type { PropType } from 'vue';
+import {
+  defineComponent,
+  ref,
+  toRef,
+  computed,
+  watch,
+  onMounted,
+  reactive,
+  onBeforeUnmount,
+} from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useUserStore } from '@store/UserStore';
+import { useGlobalStore } from '@store/globalStore';
+import { useQuasar } from 'quasar';
+
+import { func_tools, toolsext } from '@store/Modules/toolsext';
+
+import type { IGasordine, IOrder, IOrderCart, IProduct } from '@src/model';
+import { tools } from '@tools';
+import { useProducts } from '@store/Products';
+
+import { shared_consts } from '@src/common/shared_vuejs';
+import { useRouter } from 'vue-router';
+
+import { costanti } from '@costanti';
+
+export default defineComponent({
+  name: 'CPickColor',
+  props: {
+    modelValue: {
+      type: String,
+      default: '#000000FF',
+    },
+  },
+  emits: ['update:modelValue'],
+  components: {},
+  setup(props, { emit }) {
+    const $q = useQuasar();
+    const { t } = useI18n();
+
+    const showDialog = ref(false); // Stato della finestra di dialogo
+    const selectedColor = ref(props.modelValue.substring(0, 7)); // Colore (senza trasparenza)
+    const opacity = ref(Math.round(parseInt(props.modelValue.substring(7, 9), 16) / 2.55)); // Trasparenza (0-100)
+
+    const getnewcolor = computed(() => {
+      const hexOpacity = Math.round((opacity.value / 100) * 255).toString(16).padStart(2, '0');
+      return `${selectedColor.value}${hexOpacity}`;
+    });
+
+    // Funzione per aggiornare il colore con la trasparenza
+    const updateColor = () => {
+      const newColor = getnewcolor.value
+      emit('update:modelValue', newColor); // Emesso come nuovo valore di `v-model`
+    };
+
+    // Apri la finestra di dialogo
+    const openDialog = () => {
+      showDialog.value = true;
+    };
+
+    // Chiudi la finestra di dialogo senza fare modifiche
+    const cancel = () => {
+      showDialog.value = false;
+    };
+
+    // Conferma la selezione e chiude la finestra
+    const confirm = () => {
+      showDialog.value = false;
+      updateColor(); // Aggiorna il colore e la trasparenza
+    };
+
+    // Se il valore di `modelValue` cambia dall'esterno, aggiorna il colore
+     // Se il valore di `modelValue` cambia dall'esterno, aggiorna il colore
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        selectedColor.value = newValue.substring(0, 7);
+        opacity.value = Math.round(parseInt(newValue.substring(7, 9), 16) / 2.55); // Ricalcola la trasparenza correttamente
+      }
+    );
+
+
+     onMounted(() => {
+      opacity.value = Math.round(parseInt(props.modelValue.substring(7, 9), 16) / 2.55);
+    });
+    // Funzione per ottenere il colore con trasparenza
+
+    return {
+      showDialog,
+      selectedColor,
+      opacity,
+      openDialog,
+      cancel,
+      confirm,
+      updateColor,
+      tools,
+      getnewcolor,
+    };
+  },
+});

src/components/CPickColor/CPickColor.vue

@@ -0,0 +1,63 @@
+<template>
+  <q-dialog
+    v-model="showDialog"
+    persistent
+  >
+    <q-card style="min-width: 300px">
+      <q-card-section>
+        <div class="text-h6">Scegli il colore</div>
+        <q-color
+          v-model="selectedColor"
+          :label="false"
+          :dark="true"
+          style="margin-top: 10px"
+        />
+        <div class="q-mt-md">
+          <q-badge color="secondary"> Trasparenza </q-badge>
+          <q-slider
+            v-model="opacity"
+            :min="0"
+            :max="100"
+            color="primary"
+            label-always
+            :step="1"
+            @input="updateColor"
+          />
+        </div>
+        <!-- Visualizzazione colore selezionato con trasparenza -->
+        <div
+          class="color-preview"
+          :style="{
+            backgroundColor: tools.getColorWithTransparency(getnewcolor),
+            width: '300px',
+            height: '40px',
+            borderRadius: '8px',
+            border: '2px solid #ccc',
+          }"
+        ></div>
+
+      </q-card-section>
+
+      <q-card-actions align="center">
+        <q-btn
+          label="Annulla"
+          color="secondary"
+          flat
+          @click="cancel"
+        />
+        <q-btn
+          label="Conferma"
+          color="primary"
+          flat
+          @click="confirm"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" src="./CPickColor.ts"></script>
+
+<style lang="scss" scoped>
+@import './CPickColor.scss';
+</style>

src/components/CPickColor/index.ts

@@ -0,0 +1 @@
+export {default as CPickColor} from './CPickColor.vue'

src/statics/lang/it.js

@@ -2062,6 +2062,7 @@ const msg_it = {
       img_intro: 'Copertina introduttiva',
       img_bordata_stampa: 'Immagine di sfondo (per STAMPA)',
       img_intro_stampa: 'Copertina introduttiva (per STAMPA)',
+      impostazioni_intestazione: 'Impostazioni testo introduttivo',
       pagina_introduttiva_sfondo_nero: 'Pagina intro a sfondo nero',
       backcolor: 'Colore di Sfondo Pagina Introduttiva',
       isCatalogoGenerale: 'Fa parte del Catalogo Generale',

src/store/Modules/costanti.ts

@@ -489,7 +489,7 @@ export const costanti = {
     op_andor: 19000,
     editor_nohtml: 20000,
     verifica: 21000,
-
+    pickcolor: 22000,
   },
 
   TypeMov: {

src/store/Modules/fieldsTable.ts

@@ -242,7 +242,7 @@ export const colTableCatalogList = [
 
   AddCol({ name: 'descr_introduttiva', label_trans: 'cataloglist.descr_introduttiva', fieldtype: costanti.FieldType.html, maxlength: 1300 }),
   AddCol({ name: 'pagina_introduttiva_sfondo_nero', label_trans: 'cataloglist.pagina_introduttiva_sfondo_nero', fieldtype: costanti.FieldType.boolean }),
-  AddCol({ name: 'backcolor', label_trans: 'cataloglist.backcolor', fieldtype: costanti.FieldType.string }),
+  AddCol({ name: 'backcolor', label_trans: 'cataloglist.backcolor', fieldtype: costanti.FieldType.pickcolor }),
 
   AddCol({
     name: 'img_bordata',

src/views/ecommerce/catalogo/catalogo.scss

@@ -112,16 +112,20 @@ body {
 
 .book-text-up {
   font-family: 'DINPro', sans-serif;
-  margin-bottom: calc(5 * var(--scalecatalogy) * 1px);
+  margin: calc(30 * var(--scalecatalogx) * 1px);
-  font-size: calc(20 * var(--scalecatalogx) * 1px);
+  font-size: calc(17 * var(--scalecatalogx) * 1px);
   height: calc(380 * var(--scalecatalogy) * 1px);
   line-height: 130%;
+  
   font-weight: bold;
 
   padding: 8px;
   border-radius: 20px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   text-shadow: 1px 1px 2px black;
+
+  overflow: hidden; /* Nasconde il testo che esce dalla height fissa */
+
 }
 
 .book-text-down {

src/views/ecommerce/catalogo/catalogo.ts

@@ -96,6 +96,8 @@ export default defineComponent({
     const rigeneraLibri = ref(false);
 
     const search = ref('');
+
+    const showColorPicker = ref(false);
     const optauthors = ref(<any>[]);
 
     const strout = ref('');
@@ -2691,9 +2693,10 @@ export default defineComponent({
       updateCatalogoPadre();
     }
 
-    function updatecatalogmodif(field: string, val: any) {
+    async function updatecatalogmodif(field: string, val: any) {
       if (field) {
         myCatalog.value[field] = val;
+        await saveCatalog();
       }
     }
 
@@ -2792,6 +2795,8 @@ export default defineComponent({
       updatecatalogmodif,
       tabgen,
       generaListaTempLibri,
+      globalStore,
+      showColorPicker,
     };
   },
 });

src/views/ecommerce/catalogo/catalogo.vue

@@ -577,7 +577,14 @@
                           <q-td :props="props">
                             <a
                               v-if="props.row.pdf"
-                              :href="tools.getURLByHostAndFilePath(props.row.pdf, props.row.data ? (new Date(props.row.data)).getTime() : undefined)"
+                              :href="
+                                tools.getURLByHostAndFilePath(
+                                  props.row.pdf,
+                                  props.row.data
+                                    ? new Date(props.row.data).getTime()
+                                    : undefined
+                                )
+                              "
                               target="_blank"
                               class="text-bold"
                             >
@@ -681,7 +688,14 @@
                             color="primary"
                             icon="fas fa-file-pdf"
                             :label="`Apri PDF`"
-                            :href="tools.getURLByHostAndFilePath(myCatalog.pdf_online, myCatalog.data_online ? (new Date(myCatalog.data_online)).getTime() : undefined)"
+                            :href="
+                              tools.getURLByHostAndFilePath(
+                                myCatalog.pdf_online,
+                                myCatalog.data_online
+                                  ? new Date(myCatalog.data_online).getTime()
+                                  : undefined
+                              )
+                            "
                             size="md"
                             class="hover-lift"
                           />
@@ -692,7 +706,14 @@
                             color="primary"
                             icon="download"
                             :label="`Scarica PDF`"
-                            :href="tools.getURLByHostAndFilePath(myCatalog.pdf_online, myCatalog.data_online ? (new Date(myCatalog.data_online)).getTime() : undefined)"
+                            :href="
+                              tools.getURLByHostAndFilePath(
+                                myCatalog.pdf_online,
+                                myCatalog.data_online
+                                  ? new Date(myCatalog.data_online).getTime()
+                                  : undefined
+                              )
+                            "
                             download
                             size="md"
                             class="hover-lift"
@@ -764,7 +785,12 @@
                             icon="fas fa-file-pdf"
                             :label="`Apri PDF`"
                             :href="
-                              tools.getURLByHostAndFilePath(myCatalog.pdf_online_stampa, myCatalog.data_online_stampa ? (new Date(myCatalog.data_online_stampa)).getTime() : undefined)
+                              tools.getURLByHostAndFilePath(
+                                myCatalog.pdf_online_stampa,
+                                myCatalog.data_online_stampa
+                                  ? new Date(myCatalog.data_online_stampa).getTime()
+                                  : undefined
+                              )
                             "
                             size="md"
                             class="hover-lift"
@@ -777,7 +803,12 @@
                             icon="download"
                             :label="`Scarica PDF`"
                             :href="
-                              tools.getURLByHostAndFilePath(myCatalog.pdf_online_stampa, myCatalog.data_online_stampa ? (new Date(myCatalog.data_online_stampa)).getTime() : undefined)
+                              tools.getURLByHostAndFilePath(
+                                myCatalog.pdf_online_stampa,
+                                myCatalog.data_online_stampa
+                                  ? new Date(myCatalog.data_online_stampa).getTime()
+                                  : undefined
+                              )
                             "
                             download
                             size="md"
@@ -1214,6 +1245,93 @@
                                     zIndex: '10', // Assicura che il testo sia visibile sopra altri elementi
                                   }"
                                 >
+                                  <q-btn
+                                    v-if="
+                                      globalStore.editOn &&
+                                      recscheda.scheda.dimensioni.pagina?.testo_up
+                                        ?.contenuto
+                                    "
+                                    floating
+                                    icon="fas fa-pencil-alt"
+                                    @click="showColorPicker = !showColorPicker"
+                                    color="primary"
+                                    style="
+                                      position: absolute;
+                                      z-index: 1000;
+                                    "
+                                  ></q-btn>
+
+                                  <q-dialog
+                                    v-model="showColorPicker"
+                                    :full-width="false"
+                                    :full-height="false"
+                                    :maximized="false"
+                                    transition-show="slide-up"
+                                    transition-hide="slide-down"
+                                  >
+                                    <q-card>
+                                      <q-card-section>
+                                        <div class="text-h6">
+                                          {{ t('cataloglist.impostazioni_intestazione') }}
+                                        </div>
+                                      </q-card-section>
+
+                                      <q-card-section class="q-pt-none">
+                                        <CMyValueDb
+                                          v-if="myCatalog"
+                                          :editOn="false"
+                                          :isInModif="true"
+                                          :title="t('cataloglist.backcolor')"
+                                          table="catalogs"
+                                          :id="myCatalog._id"
+                                          :rec="myCatalog"
+                                          mykey="backcolor"
+                                          debounce="1000"
+                                          :type="costanti.FieldType.pickcolor"
+                                          @save="
+                                            (v) => updatecatalogmodif('backcolor', v)
+                                          "
+                                          :dense="false"
+                                        >
+                                        </CMyValueDb>
+                                        <CMyValueDb
+                                          v-if="myCatalog"
+                                          :editOn="true"
+                                          :title="
+                                            t(
+                                              'cataloglist.pagina_introduttiva_sfondo_nero'
+                                            )
+                                          "
+                                          table="catalogs"
+                                          :id="myCatalog._id"
+                                          :rec="myCatalog"
+                                          mykey="pagina_introduttiva_sfondo_nero"
+                                          debounce="1000"
+                                          :type="costanti.FieldType.boolean"
+                                          @save="
+                                            (v) =>
+                                              updatecatalogmodif(
+                                                'pagina_introduttiva_sfondo_nero',
+                                                v
+                                              )
+                                          "
+                                          :dense="false"
+                                        >
+                                        </CMyValueDb>
+                                      </q-card-section>
+
+                                      <q-card-actions
+                                        align="right"
+                                        class="text-primary"
+                                      >
+                                        <q-btn
+                                          flat
+                                          label="Chiudi"
+                                          @click="showColorPicker = false"
+                                        />
+                                      </q-card-actions>
+                                    </q-card>
+                                  </q-dialog>
                                   <div
                                     v-html="getTitoloPagina(null, recscheda)"
                                     style="
@@ -1223,6 +1341,7 @@
                                     "
                                   ></div>
                                 </div>
+
                                 <div
                                   v-if="
                                     recscheda.scheda.dimensioni.pagina?.testo_up