other components... (2)

src/components/CMyChipList/CMyChipList.scss

@@ -0,0 +1,6 @@
+.clchip{
+  display: flex;
+  justify-content: center;
+  //flex: 1;
+  //flex-direction: column;
+}

src/components/CMyChipList/CMyChipList.ts

@@ -0,0 +1,157 @@
+import { defineComponent, ref, watch, toRef, onMounted } from 'vue'
+import { useI18n } from '@src/boot/i18n'
+import { useQuasar } from 'quasar'
+import { tools } from '@store/Modules/tools'
+import { costanti } from '@costanti'
+
+export default defineComponent({
+  name: 'CMyChipList',
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+    value: [String, Number, Array],
+    type: {
+      type: Number,
+      required: true,
+    },
+    optlab: {
+      type: String,
+      required: true,
+    },
+    optval: {
+      type: String,
+      required: true,
+    },
+    myclass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    opticon: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    optcolor: {
+      type: String,
+      required: false,
+      default: ''
+    },
+  },
+  components: {},
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    const myval = toRef(props, 'value')
+    const myarrvalues = ref(<any>[])
+
+    watch(() => myval.value, (newval, oldval) => {
+      refreshval()
+    })
+
+    function refreshval() {
+      myarrvalues.value = []
+
+      // console.table(options)
+      if (props.options) {
+        props.options.forEach((rec: any, index) => {
+          if (props.type === costanti.FieldType.multiselect) {
+            if (!!myval.value) {
+              // @ts-ignore
+              if (myval.value.includes(rec[props.optval])) {
+                const mydata: any = {
+                  label: null,
+                  value: rec[props.optval],
+                  // myris = mylist.filter((myrec) => arrval.includes(myrec[key]))
+                  valbool: true,
+                  icon: '',
+                  color: tools.getColorByIndexBest(index)
+                }
+
+                if (tools.isObject(props.optlab)) {
+                  // @ts-ignore
+                  mydata.label = props.options.filter((myrec: any) => myrec[props.optval] === mydata.value).map(props.optlab)
+                  if (mydata.label)
+                    mydata.label = mydata.label[0]
+                } else {
+                  mydata.label = rec[props.optlab]
+                }
+
+                if (props.opticon)
+                  mydata.icon = rec[props.opticon]
+                if (props.optcolor)
+                  mydata.color = rec[props.optcolor]
+
+                myarrvalues.value.push(mydata)
+              }
+            }
+          } else if (props.type === costanti.FieldType.select) {
+            if (myval.value === rec[props.optval]) {
+              const mydata: any = {
+                value: myval.value,
+                valbool: true,
+                icon: '',
+                color: tools.getColorByIndexBest(index)
+              }
+
+              // console.log('mydata', mydata, 'optlab', optlab, 'myval.value', myval.value)
+
+              if (tools.isObject(props.optlab)) {
+                // @ts-ignore
+                mydata.label = props.options.filter((myrec: any) => myrec[props.optval] === mydata.value).map(props.optlab)
+                if (mydata.label)
+                  mydata.label = mydata.label[0]
+              } else {
+                mydata.label = rec[props.optlab]
+              }
+
+              if (props.opticon)
+                mydata.icon = rec[props.opticon]
+              if (props.optcolor)
+                mydata.color = rec[props.optcolor]
+
+              myarrvalues.value.push(mydata)
+            }
+
+          } else {
+            if (tools.isBitActive(myval.value, rec[props.optval])) {
+              const mydata = {
+                label: t(rec[props.optlab]),
+                value: rec[props.optval],
+                valbool: tools.isBitActive(myval.value, rec[props.optval]),
+                icon: '',
+                color: tools.getColorByIndexBest(index)
+              }
+
+              if (props.opticon)
+                mydata.icon = rec[props.opticon]
+              if (props.optcolor)
+                mydata.color = rec[props.optcolor]
+
+              myarrvalues.value.push(mydata)
+            }
+          }
+        })
+      }
+
+      if (myarrvalues.value.length === 0)
+        myarrvalues.value.push({ label: t('otherpages.manage.nessuno'), color: 'gray' })
+
+      // console.log('arrvalues=', myarrvalues)
+    }
+
+    function mounted() {
+      refreshval()
+    }
+
+    onMounted(mounted)
+
+    return {
+      myarrvalues,
+    }
+  }
+})
+

src/components/CMyChipList/CMyChipList.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="row clchip">
+    <div v-for="(rec, index) in myarrvalues" :key="index">
+      <q-chip
+        v-if="rec.icon"
+        dense
+        :color="rec.color"
+        text-color="white"
+        :icon="rec.icon">
+        {{ rec.label }}
+      </q-chip>
+      <q-chip
+        dense
+        :color="rec.color"
+        text-color="white">
+        {{ rec.label }}
+      </q-chip>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CMyChipList.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMyChipList.scss';
+</style>

src/components/CMyChipList/index.ts

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