other components... (2)

src/components/CMyToggleList/CMyToggleList.scss

@@ -0,0 +1,5 @@
+.cltoggle{
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}

src/components/CMyToggleList/CMyToggleList.ts

@@ -0,0 +1,119 @@
+import { defineComponent, onMounted, ref } from 'vue'
+import { useI18n } from '@src/boot/i18n'
+import { tools } from '@store/Modules/tools'
+
+export default defineComponent({
+  name: 'CMyToggleList',
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+    value: [String, Number, Array],
+    label: {
+      type: String,
+      required: true,
+    },
+    myclass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    optlab: {
+      type: String,
+      required: true,
+    },
+    optval: {
+      type: String,
+      required: true,
+    },
+    isarray: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  components: {},
+  setup(props, { emit }) {
+    const { t } = useI18n()
+
+    const myvalue = ref('')
+    const myarrvalues = ref(<any>[])
+
+    function changeval(newval: any) {
+      // Update value
+      let totale: any = null
+      if (props.isarray) {
+        totale = myarrvalues.value.filter((rec: any) => rec.valbool).map((a: any) => a.value)
+      } else {
+        totale = myarrvalues.value.filter((rec: any) => rec.valbool).reduce((sum: number, rec: any) => sum + rec.value, 0)
+      }
+      console.log('totale', totale)
+      myvalue.value = totale
+
+      // Refresh value
+      emit('update:value', myvalue.value)
+    }
+
+    function mounted() {
+      console.log('mounted')
+      myarrvalues.value = []
+
+      // console.log('value', value)
+      // console.log('optval', optval)
+      // console.log('optlab', optlab)
+
+      if (props.isarray) {
+        // console.table(options)
+        props.options.forEach((rec: any) => {
+          console.log('rec: ', rec, 'optval', props.optval, 'optlab', props.optlab)
+          const mydata = {
+            label: '',
+            value: rec[props.optval],
+            valbool: false
+          }
+
+          const lab = rec[`${props.optlab}`]
+          console.log('lab', lab)
+
+          if (tools.isObject(props.optlab)) {
+            // @ts-ignore
+            const arr = props.options.filter((myrec: any) => myrec[props.optval] === mydata.value).map(props.optlab)
+            if (arr) {
+              // @ts-ignore
+              mydata.label = arr[0]
+            }
+          } else {
+            mydata.label = t(rec[props.optlab])
+          }
+
+          if (props.value) {
+            // @ts-ignore
+            mydata.valbool = props.value.includes(rec[props.optval])
+          }
+          console.log('mydata ', mydata)
+          myarrvalues.value.push(mydata)
+        })
+
+      } else {
+        // console.table(options)
+        props.options.forEach((rec: any) => {
+          const mydata: any = {
+            label: t(rec[props.optlab]),
+            value: rec[props.optval],
+            valbool: tools.isBitActive(props.value, rec[props.optval])
+          }
+          myarrvalues.value.push(mydata)
+        })
+      }
+    }
+
+    onMounted(mounted)
+
+    return {
+      tools,
+      myarrvalues,
+      changeval,
+    }
+  }
+})

src/components/CMyToggleList/CMyToggleList.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <div class="cltoggle" v-for="(rec, index) in myarrvalues" :key="index">
+            <q-toggle
+                    v-model="rec.valbool"
+                    :label="rec.label"
+                    :color="tools.getColorByIndexBest(index)"
+                    keep-color
+                    @input="changeval">
+            </q-toggle>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" src="./CMyToggleList.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CMyToggleList.scss';
+</style>

src/components/CMyToggleList/index.ts

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