- aggiornamento catalogo: lista titoli del catalogo

- scheda prodotto libro
- migliorata tabella prodotto

src/components/CTableCupleLabelValue/CTableCupleLabelValue.scss

@@ -0,0 +1,51 @@
+/* Stile generale del contenitore */
+.table-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 800px; /* Limita la larghezza per schermi grandi */
+  margin: 0 auto; /* Centra il contenuto */
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Stile delle righe della tabella */
+.table-row {
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  border-bottom: 1px solid #eee;
+}
+
+/* Ultima riga senza bordo inferiore */
+.table-row:last-child {
+  border-bottom: none;
+}
+
+/* Stile delle celle */
+.table-cell {
+  flex: 1;
+  padding: 8px;
+}
+
+/* Stile specifico per la colonna delle etichette */
+.label-cell {
+  font-weight: bold;
+  color: #333;
+  text-align: left;
+  min-width: 150px; /* Larghezza fissa per le etichette */
+}
+
+/* Stile specifico per la colonna dei valori */
+.value-cell {
+  flex: 2;
+  text-align: left;
+  color: #555;
+}
+
+/* Hover su una riga */
+.table-row:hover {
+  background-color: #f9f9f9;
+}

src/components/CTableCupleLabelValue/CTableCupleLabelValue.ts

@@ -0,0 +1,52 @@
+import type { PropType } from 'vue';
+import { defineComponent, onMounted, ref, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { useI18n } from 'vue-i18n'
+import { useGlobalStore } from '@store/globalStore'
+import { fieldsTable } from '@store/Modules/fieldsTable'
+import { tools } from '@tools'
+import { costanti } from '@costanti'
+import { CMyValueDb } from '@src/components/CMyValueDb'
+import { IProduct, IRecFields } from 'app/src/model';
+
+
+export default defineComponent({
+  name: 'CTableCupleLabelValue',
+  emits: ['updateproductmodif'],
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    list: {
+      type: Array as PropType<IRecFields[]>,
+      required: true,
+    }
+  },
+  components: { CMyValueDb },
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n()
+    const globalStore = useGlobalStore()
+
+    function mounted() {
+
+    }
+
+    function updateproductmodif(element: any) {
+      emit('updateproductmodif', element)
+    }
+
+    onMounted(mounted)
+
+    return {
+      tools,
+      costanti,
+      fieldsTable,
+      globalStore,
+      updateproductmodif,
+    }
+  },
+})
+

src/components/CTableCupleLabelValue/CTableCupleLabelValue.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="table-container">
+    <div
+      v-for="(myrec, index) in list"
+      :key="index"
+      class="table-row"
+    >
+      <!-- Colonna Sinistra: Etichetta -->
+      <div class="table-cell label-cell">
+        {{ myrec.label }}
+      </div>
+
+      <!-- Colonna Destra: Valore (CMyValueDb) -->
+      <div class="table-cell value-cell">
+        <CMyValueDb
+          :editOn="myrec.editOn"
+          :table="myrec.table"
+          :id="myrec.id"
+          :rec="myrec.rec"
+          :mykey="myrec.mykey"
+          :debounce="myrec.debounce"
+          :maxlength="myrec.maxlength"
+          :type="myrec.type"
+          :dense="myrec.dense ? myrec.dense : true"
+          @save="updateproductmodif"
+        ></CMyValueDb>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CTableCupleLabelValue.ts"></script>
+
+<style lang="scss" scoped>
+@import './CTableCupleLabelValue.scss';
+</style>

src/components/CTableCupleLabelValue/index.ts

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