- Cataloghi: qualita di stampa e margini

src/components/CMyDimensioni/CMyDimensioni.ts

@@ -0,0 +1,96 @@
+import { defineComponent, ref, computed, PropType, toRef, reactive, watch } from 'vue'
+import { IColGridTable, IDimensioni, IOperators, ISize } from 'model'
+
+import { useI18n } from '@/boot/i18n'
+import { useQuasar } from 'quasar'
+
+import { CMySize } from '@src/components/CMySize'
+import { CBorders } from '@src/components/CBorders'
+import { CMyFieldRec } from '@src/components/CMyFieldRec'
+
+import { tools } from '@store/Modules/tools'
+
+import { costanti } from '@costanti'
+
+import { shared_consts } from '@/common/shared_vuejs'
+
+export default defineComponent({
+  name: 'CMyDimensioni',
+  emits: ['update:modelValue'],
+  components: { CMySize, CBorders, CMyFieldRec },
+  props: {
+    modelValue: {
+      type: Object as PropType<IDimensioni>,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    path: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    show_imgsfondo: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    const internalModel = reactive({ ...props.modelValue })
+
+    // Sincronizzare i cambiamenti esterni con internalModel quando props cambiano
+    watch(() => [props.modelValue], (newModel: any) => {
+      Object.assign(internalModel, newModel);
+      // console.log('Internal Model updated:', newModel);
+    }, { immediate: true });
+
+    function modifSize(value: any) {
+      emit('update:modelValue', { ...internalModel, size: value });
+    }
+    function modifMargini(value: any) {
+      emit('update:modelValue', { ...internalModel, margini: value });
+    }
+    function modifPadding(value: any) {
+      emit('update:modelValue', { ...internalModel, padding: value });
+    }
+
+    function saveFielDim(rec: any, newval: any, col: IColGridTable) {
+      // console.log('saveFielDim', rec, 'newval', newval, 'col', col)
+
+      if (col.fieldtype === costanti.FieldType.image) {
+        
+        if (!rec[col.name]) {
+          rec[col.name] = {}
+        }
+        rec[col.name] = newval.imagefile
+
+        console.log('rec[col.name]', rec[col.name])
+        // rec[col.name].imagefile = newval.imagefile
+      }
+    }
+
+    return {
+      t,
+      tools,
+      shared_consts,
+      internalModel,
+      modifSize,
+      modifMargini,
+      modifPadding,
+      saveFielDim,
+      costanti,
+    }
+  }
+})

src/components/CMyDimensioni/CMyDimensioni.vue

@@ -0,0 +1,70 @@
+<template>
+  <div style="width: 380px">
+    <q-banner
+      rounded
+      dense
+      class="bg-blue-1 text-red"
+      color="primary q-title"
+      style="text-align: center"
+    >
+      {{ label }}
+    </q-banner>
+
+    <div v-if="internalModel" class="sfondo_margine row">
+      <CMySize
+        label="Pagina:"
+        v-model="internalModel.size"
+        @update:model-value="modifSize"
+      ></CMySize>
+      <CBorders
+        label="Margini Pagina:"
+        v-model="internalModel.margini"
+        @update:model-value="modifMargini"
+      ></CBorders>
+      <CBorders
+        label="Padding Pagina:"
+        v-model="internalModel.padding"
+        @update:model-value="modifPadding"
+      ></CBorders>
+
+      <div v-if="show_imgsfondo">
+        {{ internalModel.imgsfondo?.imagefile }}<br />
+        <q-select
+          v-model="internalModel.imgsfondo.fit"
+          :options="tools.SelectListFit"
+          label="Dimensione Img"
+          options-dense
+          dense
+          emit-value
+          map-options
+          style="width: 100px"
+          @update:model-value="modifElem"
+          fill-input
+          text-color="white"
+        >
+        </q-select>
+
+        <CMyFieldRec
+          title="Immagine Sfondo:"
+          table="imgs"
+          :rec="internalModel.imgsfondo"
+          field="imagefile"
+          :path="path"
+          @update:model-value="modifElem"
+          :canEdit="true"
+          :canModify="true"
+          :fieldtype="costanti.FieldType.image"
+          @save="saveFielDim"
+        >
+        </CMyFieldRec>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CMyDimensioni.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMyDimensioni.scss';
+</style>

src/components/CMyDimensioni/index.ts

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