- aggiornata la grafica della Home di RISO

- Profilo Completition
- Email Verificata
- Invita un Amico (invio di email)

src/components/CKeyAndValue/CKeyAndValue.scss

@@ -0,0 +1,97 @@
+.key-value-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-bottom: 1px solid #e0e0e0;
+  min-height: 36px;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+}
+
+.key-label {
+  flex-shrink: 0;
+  min-width: 110px;
+  max-width: 140px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #1976d2;
+  background: #e3f2fd;
+  padding: 4px 10px;
+  border-radius: 6px;
+  text-align: center;
+}
+
+.value-content {
+  flex: 1;
+  font-size: 14px;
+  color: #1a1a1a;
+  padding: 4px 8px;
+  border-radius: 4px;
+  word-break: break-word;
+  line-height: 1.4;
+}
+
+.value-text {
+  display: block;
+}
+
+/* Dark mode */
+body.body--dark {
+  .key-value-row {
+    border-bottom-color: #424242;
+
+    &:hover {
+      background-color: #2a2a2a;
+    }
+  }
+
+  .key-label {
+    background: #1565c0;
+    color: white;
+  }
+
+  .value-content {
+    color: #e0e0e0;
+  }
+}
+
+/* Mobile optimization */
+@media (max-width: 600px) {
+  .key-value-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 4px;
+    padding: 8px 6px;
+  }
+
+  .key-label {
+    min-width: 100%;
+    max-width: 100%;
+    font-size: 12px;
+    padding: 3px 8px;
+  }
+
+  .value-content {
+    font-size: 13px;
+    padding: 3px 6px;
+  }
+}
+
+/* Tablet */
+@media (min-width: 601px) and (max-width: 1024px) {
+  .key-label {
+    min-width: 100px;
+    font-size: 12px;
+  }
+
+  .value-content {
+    font-size: 13px;
+  }
+}

src/components/CKeyAndValue/CKeyAndValue.ts

@@ -16,7 +16,7 @@ export default defineComponent({
       required: true,
     },
     myvalue: {
-      type: [String, Number],
+      type: [String, Number, Boolean],
       required: false,
       default: '',
     },
@@ -30,6 +30,31 @@ export default defineComponent({
       required: false,
       default: '',
     },
+    showSetButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    onSetValue: {
+      type: Function as PropType<(value: string | number | boolean | Date | null, value2?: any) => void>,
+      required: false,
+      default: null,
+    },
+    valuetoSet: {
+      type: String,
+      required: false,
+      default: false,
+    },
+    param2: {
+      type: String,
+      required: false,
+      default: false,
+    },
+    buttonTooltip: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   components: { CDateTime },
   setup(props, { emit }) {
@@ -37,6 +62,12 @@ export default defineComponent({
     const { t } = useI18n()
     const globalStore = useGlobalStore()
 
+    function handleSetValue() {
+      if (props.onSetValue) {
+        const valueToSet = props.valuetoSet
+        props.onSetValue(valueToSet, props.param2)
+      }
+    }
 
     function mounted() {
       //
@@ -49,7 +80,7 @@ export default defineComponent({
       costanti,
       fieldsTable,
       globalStore,
+      handleSetValue,
     }
   },
 })
-

src/components/CKeyAndValue/CKeyAndValue.vue

@@ -1,32 +1,31 @@
 <template>
-  <div class="text-center">
-    <div class="row items-center justify-center q-gutter-md q-ma-xs">
+  <div class="key-value-row">
+    <div class="key-label">
+      {{ mykey }}
+    </div>
+    <div class="value-content" :style="color ? `background-color: ${color}; color: white;` : ''">
+      <span v-if="mydate">
+        <CDateTime
+          v-model:value="mydate"
+          label=""
+          :canEdit="false"
+        />
+      </span>
+      <span v-else class="value-text">
+        {{ myvalue || '-' }}
+      </span>
 
-      <div class="q-ma-xs">
-        <q-field rounded outlined :bg-color="($q.dark.isActive ? '' : 'blue-4')" dense style="min-width:110px;">
-          <template v-slot:control>
-            <div class="centermydiv">
-              <div class="self-center full-width no-outline text-center" tabindex="0">{{ mykey }}</div>
-            </div>
-          </template>
-        </q-field>
-      </div>
-
-      <div :class="` q-ma-sm q-pa-sm col-grow `">
-        <span :style="color ? `background-color: ${color} !important; color: white;` : ``">
-          <span v-if="mydate">
-                <CDateTime
-                  v-model:value="mydate"
-                  label=""
-                  :canEdit="false">
-                </CDateTime>
-          </span>
-          <span v-else>
-            {{myvalue}}
-          </span>
-
-        </span>
-      </div>
+      <q-btn
+        v-if="showSetButton && onSetValue"
+        rounded
+        icon="edit"
+        color="primary"
+        size="sm"
+        class="set-value-btn"
+        @click="handleSetValue"
+        :label="buttonTooltip || 'Imposta valore'"
+      >
+      </q-btn>
     </div>
   </div>
 </template>