@mixd-id/web-scaffold 0.2.240701 → 0.2.240703

package/src/widgets/Dashboard/BarChartSetting.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="flex flex-col gap-5 p-6">
+
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Active</label>
+      <Switch v-model="value.props.enabled" :readonly="readonly" />
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <div class="flex flex-row gap-2">
+        <label class="flex-1">Datasource</label>
+        <button type="button" class="text-primary"
+                @click="previewDatasource(selectedDatasource)">Preview</button>
+      </div>
+      <Dropdown class="min-w-[150px]"
+                :readonly="readonly"
+                v-model="value.props.datasourceUid"
+                @change="delete value.props.columns">
+        <option v-for="obj in datasource"
+                :value="obj.uid">
+          {{ obj.name }}
+        </option>
+      </Dropdown>
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <label class="flex-1">Label</label>
+      <Textbox v-model="value.props.label" maxlength="50" placeholder="Label" :readonly="readonly" />
+    </div>
+
+    <div v-if="value.props.datasourceUid" class="flex flex-col gap-5">
+
+      <div class="flex flex-col">
+        <div class="flex flex-row items-center gap-3">
+          <div class="flex-1">
+            <label class="text-primary cursor-pointer"
+                   ref="xAxis"
+                   @click="!readonly ? $refs.context1.open($refs.xAxis) : null">
+              {{ value.props.xAxeMultiple ? 'X Axes' : 'X Axis' }}
+              <svg v-if="!readonly" class="fill-primary inline relative top-[-1px]" width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
+            </label>
+            <ContextMenu ref="context1">
+              <div class="flex flex-col min-w-[100px]">
+
+                <button class="w-full p-3 text-left flex flex-row" :class="appStyle.menuItem"
+                        @click="value.props.xAxeMultiple = false;$emit('change')">
+                  Single
+                </button>
+                <button class="w-full p-3 text-left flex flex-row" :class="appStyle.menuItem"
+                        @click="value.props.xAxeMultiple = true;$emit('change')">
+                  Multiple
+                </button>
+              </div>
+            </ContextMenu>
+          </div>
+          <button v-if="value.props.xAxeMultiple && !readonly" type="button" class="text-primary" @click="xAxes.push({})">
+            <svg width="14" height="14" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+          </button>
+        </div>
+
+        <ListItem :items="cXAxes" class="mt-2 bg-transparent" container-class="flex flex-col gap-1"
+                  @reorder="(from, to) => { cXAxes.splice(to, 0, cXAxes.splice(from, 1)[0]); $emit('change') }">
+          <template v-slot="{ item, index }">
+            <div class="flex flex-row items-center gap-2">
+              <div data-reorder v-if="cXAxes.length > 1 && !readonly">
+                <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+              </div>
+              <div class="flex-1 flex flex-row gap-2">
+                <Dropdown v-model="item.key" :readonly="readonly" class="flex-1">
+                  <option v-for="column in selectedDatasourceColumns"
+                          :value="column.key">
+                    {{ selectedDatasource.pivot?.enabled ? column.key : column.label }}
+                  </option>
+                </Dropdown>
+
+                <Dropdown v-if="!value.props.xAxeMultiple" v-model="item.modifier" :readonly="readonly" class="w-[100px]">
+                  <option value="">-</option>
+                  <option value="lowercase">Lower</option>
+                  <option value="capitalize">Capitalize</option>
+                  <option value="uppercase">Upper</option>
+                  <option disabled>-----</option>
+                  <option value="date">Date</option>
+                  <option value="month">Month</option>
+                  <option value="year">Year</option>
+                  <option value="hour">Hour</option>
+                  <option value="minute">Minute</option>
+                  <option value="last60Minutes">Last 60 Minutes</option>
+                  <option value="last12Hours">Last 12 Hours</option>
+                  <option value="last24Hours">Last 24 Hours</option>
+                </Dropdown>
+              </div>
+              <button v-if="cXAxes.length > 1 && !readonly" type="button" @click="cXAxes.splice(index, 1)">
+                <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+              </button>
+            </div>
+          </template>
+        </ListItem>
+      </div>
+
+      <div class="flex flex-col">
+        <div class="flex flex-row items-center gap-3">
+          <div class="flex-1">
+            <label class="text-primary cursor-pointer"
+                   ref="yAxis"
+                   @click="!readonly ? $refs.context2.open($refs.yAxis) : null">
+              {{ value.props.yAxeMultiple ? 'Y Axes' : 'Y Axis' }}
+              <svg v-if="!readonly" class="fill-primary inline relative top-[-1px]" width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
+            </label>
+            <ContextMenu ref="context2">
+              <div class="flex flex-col min-w-[100px]">
+
+                <button class="w-full p-3 text-left flex flex-row" :class="appStyle.menuItem"
+                        @click="value.props.yAxeMultiple = false;$emit('change')">
+                  Single
+                </button>
+                <button class="w-full p-3 text-left flex flex-row" :class="appStyle.menuItem"
+                        @click="value.props.yAxeMultiple = true;$emit('change')">
+                  Multiple
+                </button>
+              </div>
+            </ContextMenu>
+          </div>
+          <button v-if="false" type="button" class="text-primary" @click="yAxes.push({})">
+            <svg width="14" height="14" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+          </button>
+        </div>
+
+        <ListItem :items="cYAxes" class="mt-2 bg-transparent" container-class="flex flex-col gap-1"
+                  @reorder="(from, to) => { cYAxes.splice(to, 0, cYAxes.splice(from, 1)[0]); $emit('change') }">
+          <template v-slot="{ item, index }">
+            <div class="flex flex-row items-center gap-2">
+              <div data-reorder v-if="cYAxes.length > 1">
+                <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+              </div>
+              <div class="flex-1 flex flex-row gap-2">
+                <Dropdown v-model="item.key" :readonly="readonly" class="flex-1" @change="clearExcluded">
+                  <option v-for="column in selectedDatasourceColumns"
+                          :value="column.key">
+                    {{ selectedDatasource.pivot?.enabled ? column.key : column.label }}
+                  </option>
+                </Dropdown>
+
+                <Dropdown v-model="item.modifier" :readonly="readonly" class="w-[100px]">
+                  <option value="">-</option>
+                  <option value="count">Count</option>
+                  <option value="countDistinct">Unique Count</option>
+                  <option value="sum">Sum</option>
+                  <option value="avg">Avg</option>
+                  <option value="min">Min</option>
+                  <option value="max">Max</option>
+                </Dropdown>
+              </div>
+              <button v-if="cYAxes.length > 1 && !readonly" type="button" @click="cYAxes.splice(index, 1)">
+                <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+              </button>
+            </div>
+          </template>
+        </ListItem>
+      </div>
+
+      <div class="flex justify-center" v-if="!readonly">
+        <button type="button" class="text-primary p-3 flex flex-row items-center gap-2"
+                @click="swap">
+          <svg width="14" height="14" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M449.9 39.96l-48.5 48.53C362.5 53.19 311.4 32 256 32C161.5 32 78.59 92.34 49.58 182.2c-5.438 16.81 3.797 34.88 20.61 40.28c16.97 5.5 34.86-3.812 40.3-20.59C130.9 138.5 189.4 96 256 96c37.96 0 73 14.18 100.2 37.8L311.1 178C295.1 194.8 306.8 223.4 330.4 224h146.9C487.7 223.7 496 215.3 496 204.9V59.04C496 34.99 466.9 22.95 449.9 39.96zM441.8 289.6c-16.94-5.438-34.88 3.812-40.3 20.59C381.1 373.5 322.6 416 256 416c-37.96 0-73-14.18-100.2-37.8L200 334C216.9 317.2 205.2 288.6 181.6 288H34.66C24.32 288.3 16 296.7 16 307.1v145.9c0 24.04 29.07 36.08 46.07 19.07l48.5-48.53C149.5 458.8 200.6 480 255.1 480c94.45 0 177.4-60.34 206.4-150.2C467.9 313 458.6 294.1 441.8 289.6z"/></svg>
+          Swap X and Y Axis
+        </button>
+      </div>
+
+      <div v-if="value.props.yAxeMultiple" class="flex flex-row items-center gap-2">
+        <label class="flex-1">Use Percentage</label>
+        <Switch v-model="value.props.usePercentage" :readonly="readonly" />
+      </div>
+
+      <div v-if="value.props.yAxeMultiple" class="flex flex-row items-center gap-2">
+        <label class="flex-1">Stacked</label>
+        <Switch v-model="value.props.stacked" :readonly="readonly" />
+      </div>
+
+      <div>
+        <div class="flex flex-row gap-2">
+          <label class="text-text-400 flex-1">Interactions</label>
+          <button type="button" class="text-primary" @click="$refs.interactionEdit.create()">
+            <svg width="14" height="14" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+          </button>
+        </div>
+        <div class="mt-1">
+          <ListItem :items="interactions"
+                    class="rounded-xl"
+                    container-class="flex flex-col divide-y divide-text-50"
+                    @reorder="(from, to) => { interactions.splice(to, 0, interactions.splice(from, 1)[0]); }">
+            <template v-slot="{ item, index }">
+              <div class="flex flex-row items-center gap-3 px-3">
+                <div data-reorder v-if="interactions.length > 1">
+                  <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+                </div>
+                <div class="flex-1 p-3 cursor-pointer" @click="$refs.interactionEdit.open(item)">
+                  {{ item.event }}
+                  {{ item.eventModifier ? item.eventModifier : '' }}
+                </div>
+                <button type="button" @click="interactions.splice(index, 1)">
+                  <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                </button>
+              </div>
+            </template>
+          </ListItem>
+
+          <InteractionEdit ref="interactionEdit" @save="addInteraction" />
+        </div>
+      </div>
+
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+
+import InteractionEdit from "./InteractionEdit.vue";
+
+export default{
+  components: {InteractionEdit},
+
+  computed: {
+
+    interactions(){
+      if(!Array.isArray(this.value.props.interactions))
+        this.value.props.interactions = []
+      return this.value.props.interactions
+    },
+
+    selectedDatasource(){
+      return this.datasource.find(d => d.uid === this.value.props.datasourceUid)
+    },
+
+    selectedDatasourceColumns(){
+      if(!this.selectedDatasource) return []
+
+      return this.selectedDatasource.pivot?.enabled ?
+          this.selectedDatasource.pivot.columns :
+          [
+            ...(this.selectedDatasource.computedColumns ?? []),
+            ...this.selectedDatasource.columns
+          ]
+    },
+
+    xAxes(){
+      if(!Array.isArray(this.value.props.xAxes))
+        this.value.props.xAxes = [{ key:"" }]
+
+      return this.value.props.xAxes
+    },
+
+    cXAxes(){
+      return this.value.props.xAxeMultiple ? this.xAxes : [this.xAxes[0]]
+    },
+
+    yAxes(){
+      if(!Array.isArray(this.value.props.yAxes))
+        this.value.props.yAxes = [{ key:"" }]
+
+      return this.value.props.yAxes
+    },
+
+    cYAxes(){
+      return [this.yAxes[0]]
+    }
+
+  },
+
+  inject: [ 'appStyle', 'previewDatasource' ],
+
+  methods: {
+
+    addInteraction(obj){
+      this.$util.push(this.interactions, obj)
+    },
+
+    clearExcluded(){
+      this.value.props.excluded = []
+    },
+
+    swap(){
+      const yAxes = this.value.props.yAxes
+      const xAxes = this.value.props.xAxes
+
+      Object.assign(this.value.props, {
+        xAxes: yAxes,
+        yAxes: xAxes
+      })
+
+      this.$emit('change')
+    }
+
+  },
+
+  props: {
+
+    datasource: Object,
+
+    readonly: [ Boolean, Number ],
+
+    value: Object
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/Dashboard/DatasourceFilterSharing.vue

@@ -0,0 +1,93 @@
+<template>
+	<Modal ref="modal"
+         width="330"
+         height="360">
+	  <template v-slot:head>
+	    <div class="relative p-6">
+	      <h3>Assign This Filter For</h3>
+	      <div class="absolute top-0 right-0 p-2">
+	        <button type="button" class="p-2" @click="close">
+	          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+	            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+	          </svg>
+	        </button>
+	      </div>
+	    </div>
+	  </template>
+	  <template v-slot:foot>
+	    <div class="p-6" v-if="items?.length > 0 && !readonly">
+        <Button class="w-[80px]" @click="apply">OK</Button>
+	    </div>
+	  </template>
+	  <div class="flex-1 p-6 flex">
+
+      <div v-if="items?.length > 0" class="flex flex-col gap-3">
+        <div v-for="item in items">
+          <Checkbox v-model="instance" :value="item.id" :disabled="readonly">
+            {{ item.name }}
+          </Checkbox>
+        </div>
+      </div>
+
+      <div v-else class="flex-1 flex items-center justify-center">
+        <label class="text-text-300">No users shared</label>
+      </div>
+
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+export default{
+
+	inject: [ 'socketEmit2' ],
+
+  props: {
+    items: Array,
+    readonly: [ Number, Boolean ],
+  },
+
+  computed: {
+
+
+  },
+
+	data(){
+		return {
+      instance: null,
+      callback: null
+		}
+	},
+
+	methods: {
+
+    apply(){
+      const instance = this.instance.map(_ => this.items.find(__ => __.id === _))
+      this.callback(instance)
+      this.close()
+    },
+
+		open(instance = [], callback){
+      this.instance = instance.map(_ => _.id)
+      this.callback = callback
+      this.$refs.modal.open()
+		},
+
+		close(){
+      this.$refs.modal.close()
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/Dashboard/DatasourcePreview.vue

@@ -0,0 +1,93 @@
+<template>
+	<Modal ref="modal"
+         dismissable="true"
+         width="480"
+         height="600"
+         @dismiss="close">
+	  <template v-slot:head>
+	    <div class="relative p-6">
+	      <h3>Data Preview</h3>
+	      <div class="absolute top-0 right-0 p-2">
+	        <button type="button" class="p-2" @click="close">
+	          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+	            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+	          </svg>
+	        </button>
+	      </div>
+	    </div>
+	  </template>
+	  <div class="flex-1 p-6 flex flex-col">
+
+      <VirtualTable class="flex-1" :columns="columns" :items="items" />
+
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+export default{
+
+	inject: [ 'alert', 'preview', 'socket' ],
+
+  props: {
+    src: String
+  },
+
+  computed: {
+
+    items(){
+      if(!this.res?.items || this.res.items.length < 1) return []
+
+      return Object.keys(this.res.items[0]).map(key => {
+        return {
+          key,
+          value: this.res.items[0][key]
+        }
+      })
+    },
+
+  },
+
+	data(){
+		return {
+      datasource: null,
+      res: null,
+      columns: [
+        { key:"key", label:"Column", width:150 },
+        { key:"value", label:"Sample", width:300 },
+      ]
+		}
+	},
+
+	methods: {
+
+    close(){
+      this.$refs.modal.close()
+    },
+
+    load(){
+      this.preview(this.datasource)
+          .then(res => this.res = res)
+          .catch(err => this.alert(err))
+    },
+
+		open(datasource){
+      this.datasource = datasource
+      this.$refs.modal.open()
+      this.load()
+		},
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/Dashboard/DatasourceSelector.vue

@@ -0,0 +1,122 @@
+<template>
+	<Modal ref="modal"
+         width="360"
+         height="420">
+	  <template v-slot:head>
+	    <div class="relative p-6 pb-0">
+	      <h3>{{ $t('Select Datasource') }}</h3>
+	      <div class="absolute top-0 right-0 p-2">
+	        <button type="button" class="p-2" @click="close">
+	          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+	            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+	          </svg>
+	        </button>
+	      </div>
+	    </div>
+	  </template>
+	  <template v-slot:foot>
+	    <div class="p-6 flex justify-center border-t-[1px] border-text-50">
+        <router-link :to="listSrc" target="_blank" class="text-primary flex flex-row items-center">
+          Datasource Manager
+          <svg class="inline ml-2 fill-primary" width="11" height="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M392 320c-13.25 0-24 10.75-24 24v112c0 4.406-3.594 8-8 8h-304c-4.406 0-8-3.594-8-8v-304c0-4.406 3.594-8 8-8h112C181.3 144 192 133.3 192 120S181.3 96 168 96h-112C25.13 96 0 121.1 0 152v304C0 486.9 25.13 512 56 512h304c30.88 0 56-25.12 56-56v-112C416 330.8 405.3 320 392 320zM488 0H320c-13.25 0-24 10.75-24 24S306.8 48 320 48h110.1L183 295c-9.375 9.375-9.375 24.56 0 33.94C187.7 333.7 193.8 336 200 336s12.28-2.344 16.97-7.031L464 81.94V192c0 13.25 10.75 24 24 24S512 205.3 512 192V24C512 10.75 501.3 0 488 0z"/></svg>
+        </router-link>
+	    </div>
+	  </template>
+	  <div class="flex-1 p-6 flex">
+
+      <div v-if="datasources?.length > 0" class="flex-1 flex flex-col">
+        <div v-for="(datasource, idx) in sortedDatasource"
+                type="button"
+                :class="dashboardStyle.button"
+                class="flex flex-row items-start gap-2">
+          <button type="button" class="flex-1 text-left" @click="add(datasource)">{{ datasource.name }}</button>
+        </div>
+      </div>
+
+      <div v-else class="flex-1 flex items-center justify-center">
+        <div>
+          <label class="text-text-300">No datasource</label>
+        </div>
+      </div>
+
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+import Modal from "../../components/Modal.vue"
+
+export default{
+
+  components: { Modal },
+
+  emits: [ 'add' ],
+
+	inject: [ 'alert', 'appStyle', 'confirm', 'dashboardStyle', 'socket' ],
+
+  props: {
+
+    listSrc: String,
+
+    src: String,
+
+  },
+
+  computed: {
+
+    sortedDatasource(){
+      return (this.datasources ?? []).sort((a, b) => a.name.localeCompare(b.name))
+    }
+
+  },
+
+	data(){
+		return {
+      instance: null,
+      datasources: null,
+		}
+	},
+
+	methods: {
+
+    add(item){
+      const newItem = JSON.parse(JSON.stringify(item))
+      this.close()
+      this.$emit('add', newItem)
+    },
+
+    load(){
+      this.socket.send(this.src, {})
+          .then(res => this.datasources = res.items)
+          .catch(err => this.alert(err))
+    },
+
+		open(){
+      this.load()
+      this.$refs.modal.open()
+		},
+
+    remove(datasource){
+      this.confirm(this.$t('Are you sure you want to remove this datasource?'), () => {
+        this.socket.send(this.removeSrc, { id: datasource.id })
+            .then(() => {
+              this.datasources = this.datasources.filter(item => item.id !== datasource.id)
+            })
+            .catch(err => this.alert(err))
+      })
+    },
+
+		close(){
+      this.$refs.modal.close()
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+</style>