Fixed CDateTime component and CMyChipList

src/common/shared_vuejs.ts

@@ -4,17 +4,20 @@ export const shared_consts = {
     Admin: {
       value: 1,
       label: 'pages.Admin',
-      icon: 'fas fa-user-shield'
+      icon: 'fas fa-user-shield',
+      color: 'red'
     },
     Manager: {
       value: 2,
       label: 'otherpages.manage.manager',
-      icon: 'fas fa-tools'
+      icon: 'fas fa-tools',
+      color: 'green'
     },
     Teacher: {
       value: 4,
       label: 'event.teacher',
-      icon: 'fas fa-user-tie'
+      icon: 'fas fa-user-tie',
+      color: 'blue'
     }
   },
 

src/components/CDateTime/CDateTime.scss

@@ -4,3 +4,7 @@
     max-width: 400px;
   }
 }
+
+.calendar_comp  {
+  vertical-align: center;
+}

src/components/CDateTime/CDateTime.ts

@@ -5,18 +5,20 @@ import { toolsext } from '@src/store/Modules/toolsext'
 
 import { date } from 'quasar'
 import { CalendarStore } from '../../store/Modules'
+import MixinBase from '../../mixins/mixin-base'
 
 @Component({
-  name: 'CDateTime'
+  name: 'CDateTime',
+  mixins: [MixinBase]
 })
 
 export default class CDateTime extends Vue {
   public $q
   public $t
   @Prop() public value!: Date
-  @Prop({ required: false, default: '' }) public label: string
+  @Prop({ required: true, default: 'Val:' }) public label: string
   @Prop({ required: false, default: '' }) public data_class!: string
-  @Prop({ required: false, default: false }) public readonly!: boolean
+  @Prop({ required: false, default: true }) public canEdit!: boolean
   @Prop({ required: false, default: false }) public disable!: boolean
   @Prop({ required: false, default: '' }) public bgcolor!: string
   @Prop({ required: false, default: false }) public dense: boolean
@@ -74,10 +76,18 @@ export default class CDateTime extends Vue {
 
   public mounted() {
     this.myvalue = this.value
+    console.log('myvalue', this.myvalue)
   }
 
   public changeval(newval) {
     // console.log('changeval', newval)
     this.$emit('update:value', newval)
   }
+
+  public mystyle() {
+    if (this.label !== '')
+      return ''
+    else
+      return ''
+  }
 }

src/components/CDateTime/CDateTime.vue

@@ -1,19 +1,42 @@
 <template>
+    <div class="" :style="mystyle">
         <q-input v-model="myvalue"
+                 v-show="false"
                  color="blue-6"
+                 hide-bottom-space
                  outlined
+                 borderless
                  :label="label"
                  :bg-color="bgcolor"
-             :readonly="readonly"
                  :disable="disable"
                  :dense="dense"
                  mask="####-##-## ##:##"
                  debounce="500"
                  @input="changeval"
-             :class="getclass">
+                 :input-class="getclass"
+        >
+        </q-input>
 
-        <template #append>
+        <q-field
-            <q-icon name="event" class="cursor-pointer">
+                :label="label"
+                stack-label
+                :value="myvalue"
+                outlined
+                :dense="dense"
+                color="blue-6"
+                :bg-color="bgcolor"
+                debounce="500"
+                :input-class="getclass">
+
+            <template v-slot:control>
+                <div style="">
+                    <div class="self-center full-width no-outline" :style="mystyle" tabindex="0">
+                        {{ tools.getstrDateTime(myvalue) }}
+                    </div>
+                </div>
+            </template>
+            <template v-slot:append>
+                <q-icon v-if="canEdit" name="event" class="cursor-pointer">
                     <q-popup-proxy v-model="showDateTimeScroller">
 
                         <q-date-time-scroller
@@ -35,7 +58,8 @@
                     </q-popup-proxy>
                 </q-icon>
             </template>
-    </q-input>
+        </q-field>
+    </div>
 </template>
 
 <script lang="ts" src="./CDateTime.ts">

src/components/CGridTableRec/CGridTableRec.vue

@@ -92,11 +92,11 @@
                     <div v-if="col.fieldtype === tools.FieldType.date">
                         <div :class="getclassCol(col)">
                             <CDateTime
+                                    :label="col.label"
                                     class="cursor-pointer"
                                     :value.sync="props.row[col.name]"
-                                    :label="col.title"
                                     :dense="true"
-                                    :readonly="true"
+                                    :canEdit="canEdit"
                                     @savetoclose="SaveValue"
                                     @show="selItem(props.row, col)"
                                     >

src/components/CMyChipList/CMyChipList.ts

@@ -25,10 +25,15 @@ export default class CMyChipList extends Vue {
     return tools
   }
 
-  public mounted() {
+  @Watch('value', { immediate: true, deep: true })
+  public valchange() {
+    this.refreshval()
+  }
+
+  public refreshval() {
     this.myarrvalues = []
 
-    console.table(this.options)
+    // console.table(this.options)
     this.options.forEach((rec, index) => {
       if (tools.isBitActive(this.value, rec[this.optval])) {
         const mydata = {
@@ -51,7 +56,10 @@ export default class CMyChipList extends Vue {
     if (this.myarrvalues.length === 0)
       this.myarrvalues.push({ label: this.$t('otherpages.manage.nessuno'), color: 'gray' })
 
-    console.log('arrvalues=', this.myarrvalues)
+    // console.log('arrvalues=', this.myarrvalues)
+  }
 
+  public mounted() {
+    this.refreshval()
   }
 }

src/components/CMyToggleList/CMyToggleList.ts

@@ -36,7 +36,7 @@ export default class CMyToggleList extends Vue {
   public mounted() {
     this.myarrvalues = []
 
-    console.table(this.options)
+    // console.table(this.options)
     this.options.forEach((rec) => {
       const mydata = {
         label: this.$t(rec[this.optlab]),