@mixd-id/web-scaffold 0.2.240702 → 0.2.240703

package/src/widgets/Dashboard/PolarArea.vue

@@ -0,0 +1,159 @@
+<template>
+  <div v-if="readyState === 1" class="flex flex-col gap-2">
+    <PolarArea class="aspect-square"
+         :options="chartOptions"
+         :data="chartData" />
+
+    <div class="px-3 text-center text-ellipsis overflow-hidden whitespace-nowrap capitalize">
+      {{ label }}
+    </div>
+  </div>
+
+  <div v-else-if="readyState === 2" class="aspect-square flex items-center justify-center">
+    <label class="text-text-300">Loading...</label>
+  </div>
+</template>
+
+<script>
+
+import {PolarArea} from 'vue-chartjs'
+import {color} from 'chart.js/helpers'
+import {strVars} from "../../utils/helpers.mjs";
+import {readyStateMixin} from "../../mixin/ready-state";
+
+export default{
+
+  components: {
+    PolarArea
+  },
+
+  computed: {
+
+    chartData(){
+      if(!this.value?.datasets)
+        return { labels:[], datasets:[] }
+
+      return {
+        labels: this.value?.labels ?? [],
+        datasets: this.value.datasets.map(_ => {
+          return {
+            ..._,
+            borderWidth: 1,
+            borderColor: function(context, options) {
+              const hex = options.color;
+              return color(hex).darken(0.5).rgbString()
+            }
+          }
+        })
+      }
+    },
+
+    chartOptions(){
+      return {
+        responsive: true,
+        maintainAspectRatio: true,
+        plugins: {
+          legend: {
+            display: false
+          },
+          tooltip: {
+            callbacks: {
+              title: function(tooltipItems) {
+                return `${tooltipItems[0].label}`;
+              },
+              label: (tooltipItem) => {
+                const total = tooltipItem.dataset.data.reduce((a, b) => a + b, 0)
+                const percentage = ((tooltipItem.raw / total) * 100).toFixed(1)
+
+                return `${tooltipItem.dataset.label}: ${tooltipItem.raw} (${percentage}%)`;
+              }
+            },
+          },
+        },
+        scales: {
+          r: {
+            display: false
+          }
+        },
+        onClick: this.onClick
+      }
+    },
+
+  },
+
+  data(){
+    return {
+      backgroundColors: [
+        '#5D9CEC',
+        '#A0D468',
+        '#FFCE54',
+        '#FC6E51',
+        '#48CFAD',
+        '#AC92EC',
+        '#4FC1E9',
+        '#FFCE54',
+        '#ED5565',
+        '#EC87C0'
+      ],
+    }
+  },
+
+  inject: [ 'selectPreset' ],
+
+  methods: {
+
+    onClick(e, segments){
+
+      const clickInteractions = (this.interactions ?? []).filter(_ => _.event === 'click')
+      const segment = segments[0]
+      if(!segment) return
+
+      const dataset = this.value.datasets[segment.datasetIndex]
+      const obj = {
+        segment: this.value.labels[segment.index],
+        key: dataset.label,
+        value: dataset.data[segment.index]
+      }
+
+      for(let click of clickInteractions){
+        const { action, presetUid, filters } = click
+
+        const params = filters.reduce((res, cur) => {
+          res[cur.datasourceUid + '.filters.' + cur.key + '.' + cur.operator] = strVars(cur.value, obj)
+          return res
+        }, {})
+
+        switch(action){
+
+          case 'openDashboardPreset':
+            if(typeof this.selectPreset === 'function')
+              this.selectPreset(presetUid, params)
+            break
+        }
+      }
+
+    }
+
+  },
+
+  mixins: [ readyStateMixin ],
+
+  props: {
+
+    label: String,
+
+    value: Object,
+
+    column: String,
+
+    datasourceUid: String,
+
+    interactions: Array,
+
+    uid: String,
+
+  }
+
+}
+
+</script>

package/src/widgets/Dashboard/PolarAreaSetting.vue

@@ -0,0 +1,195 @@
+<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" @change="$emit('change')" />
+    </div>
+
+    <div>
+      <label class="text-text-400">Datasource</label>
+      <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>
+      <label class="text-text-400">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>
+        <label class="text-text-400">Segment</label>
+        <div class="flex flex-row gap-2">
+          <Dropdown class="min-w-[150px]"
+                    v-model="value.props.rows"
+                    :readonly="readonly"
+                    @change="$emit('change')">
+            <option v-for="column in selectedDatasourceColumns"
+                    :value="column.key">
+              {{ column.label }}
+            </option>
+          </Dropdown>
+
+          <Dropdown v-model="value.props.rowsModifier"
+                    :readonly="readonly"
+                    class="w-[125px]"
+                    @change="$emit('change')">
+            <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>
+          </Dropdown>
+        </div>
+      </div>
+
+      <div>
+        <label class="text-text-400">Value</label>
+        <div class="flex flex-row gap-2">
+          <Dropdown class="min-w-[150px]"
+                    v-model="value.props.column"
+                    :readonly="readonly"
+                    @change="onColumnChanged">
+            <option v-for="column in selectedDatasourceColumns"
+                    :value="column.key">
+              {{ column.label }}
+            </option>
+          </Dropdown>
+
+          <Dropdown v-model="value.props.columnModifier"
+                    :readonly="readonly"
+                    class="w-[125px]"
+                    @change="$emit('change')">
+            <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>
+      </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
+          ]
+    },
+
+  },
+
+  emits: [ 'change' ],
+
+  methods: {
+
+    addInteraction(obj){
+      this.$util.push(this.interactions, obj)
+    },
+
+    applyDefault(){
+      if(!this.value.props.datasourceUid && this.datasource?.length === 1){
+        this.value.props.datasourceUid = this.datasource[0].uid
+      }
+    },
+
+    onColumnChanged(){
+      if(!this.value.props.label)
+        this.value.props.label = this.value.props.column
+
+      this.$emit('change')
+    }
+
+  },
+
+  mounted() {
+    this.applyDefault()
+  },
+
+  props: {
+
+    datasource: Object,
+
+    readonly: [ Boolean, Number ],
+
+    value: Object
+
+  }
+
+}
+
+</script>

package/src/widgets/Dashboard/SharingModal.vue

@@ -0,0 +1,116 @@
+<template>
+	<Modal ref="modal"
+         width="360"
+         height="480" @show="$refs.search.select()">
+	  <template v-slot:head>
+	    <div class="relative p-6 flex flex-col gap-4">
+	      <h3>Sharing</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>
+          <Textbox @keyup.enter="load"
+                   ref="search"
+                   v-model="search"
+                   placeholder="Search..."
+                   :clearable="true"
+                   @clear="load(search = '')">
+            <template #start>
+              <div class="pl-3">
+                <svg width="14" height="14" class="fill-text-200" 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="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>
+              </div>
+            </template>
+          </Textbox>
+        </div>
+	    </div>
+	  </template>
+	  <div class="flex-1 p-6 flex flex-col">
+
+      <div v-if="items?.length > 0">
+        <div v-for="item in items" :class="$style.button" @click="select(item)">
+          <slot name="item" :item="item">
+            <div>{{ item.name }}</div>
+          </slot>
+        </div>
+      </div>
+
+      <div v-else class="flex-1 flex items-center justify-center">
+        <label class="text-text-300">
+          {{ search ? 'No result found' : 'Enter search keyword above' }}
+        </label>
+      </div>
+
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'select' ],
+
+	inject: [ 'socket', 'toast' ],
+
+  name: 'SharingModal',
+
+  props: {
+    src: String
+  },
+
+	data(){
+		return {
+      items: null,
+      selectedIds: null,
+      callback: null,
+      search: '',
+		}
+	},
+
+	methods: {
+
+    close(){
+      this.$refs.modal.close()
+    },
+
+    load(){
+      this.socket.send(this.src, { search:this.search })
+          .then(res => {
+            this.items = res.items
+          })
+          .catch(err => this.toast(err))
+    },
+
+		open(selectedIds, opt){
+      this.selectedIds = selectedIds
+      this.callback = opt?.callback
+      this.load()
+      this.$refs.modal.open()
+		},
+
+    select(item){
+      if(typeof this.callback === 'function')
+        this.callback(item)
+      this.$emit('select', item)
+      this.close()
+    },
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.button{
+  @apply text-left p-3 border-[1px] border-transparent rounded-lg cursor-pointer;
+  @apply hover:border-primary-300 hover:bg-primary-100;
+}
+
+</style>

package/src/widgets/Dashboard/ViewSelector.vue

@@ -0,0 +1,183 @@
+<template>
+	<Modal ref="modal"
+         width="600"
+         height="600"
+         :dismissable="true"
+         @dismiss="close">
+	  <template v-slot:head>
+	    <div class="relative p-6 flex flex-col gap-3">
+	      <h3>{{ $t('Select View') }}</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 class="flex justify-center">
+          <Tabs :items="tabItems" v-model="tabIndex" />
+        </div>
+	    </div>
+	  </template>
+	  <div class="flex-1 p-6">
+
+      <div v-if="tabIndex === 1">
+        <button v-for="component in collections"
+                type="button"
+                :class="$style.button"
+                :disabled="isDisabled"
+                @click="add(component)">
+          <Image class="w-[125px] aspect-square rounded-xl"
+                 item-class="object-center object-contain"
+                 :src="component.thumbnailUrl" />
+          <label>{{ component.name ?? component.text }}</label>
+        </button>
+      </div>
+
+      <div v-if="tabIndex === 2" class="grid grid-cols-3 gap-3">
+        <button v-for="component in layouts"
+                type="button"
+                :class="$style.button"
+                :disabled="isDisabled"
+                @click="add(component)">
+          <Image class="w-[125px] aspect-square rounded-xl"
+                 item-class="object-center object-contain"
+                 :src="component.thumbnailUrl" />
+          <label>{{ component.name ?? component.text }}</label>
+        </button>
+      </div>
+
+      <div v-if="tabIndex === 3" class="grid grid-cols-3 gap-6">
+        <button v-for="component in components"
+                type="button"
+                :class="$style.button"
+                :disabled="isDisabled"
+                @click="add(component)">
+          <Image class="w-[125px] aspect-square rounded-xl"
+                 item-class="object-center object-contain"
+                 :src="component.thumbnailUrl" />
+          <label>{{ component.name ?? component.text }}</label>
+        </button>
+      </div>
+
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+import Modal from "../../components/Modal.vue"
+import md5 from "md5";
+
+export default{
+
+  components: { Modal },
+
+  computed: {
+
+    components(){
+      return this.allComponents.filter(_ => _.group === 'components')
+    },
+
+    collections(){
+      return this.allComponents.filter(_ => _.group === 'collections')
+    },
+
+    layouts(){
+      return this.allComponents.filter(_ => _.group === 'layouts')
+    },
+
+  },
+
+  data(){
+    return {
+      allComponents: [
+        { type:'Grid', name:'Grid 2 Columns', group:"layouts", import: () => import('../../configs/dashboard/grid-2.js'), thumbnailUrl:"/static/dashboard/grid-2.png" },
+        { type:'Grid', name:'Grid 3 Columns', group:"layouts", import: () => import('../../configs/dashboard/grid-3.js'), thumbnailUrl:"/static/dashboard/grid-3.png" },
+        { type:'Grid', name:'Grid 4 Columns', group:"layouts", import: () => import('../../configs/dashboard/grid-4.js'), thumbnailUrl:"/static/dashboard/grid-4.png" },
+        { type:'Grid', name:'Grid 5 Columns', group:"layouts", import: () => import('../../configs/dashboard/grid.js'), thumbnailUrl:"/static/dashboard/grid-5.png" },
+
+        { type:"Pie", name:"Pie", group:"components", import: () => import('../../configs/dashboard/pie.js'), thumbnailUrl:"/static/dashboard/pie.png" },
+        { type:"Doughnut", name:"Doughnut", group:"components", import: () => import('../../configs/dashboard/doughnut.js'), thumbnailUrl:"/static/dashboard/doughnut.png" },
+        { type:"PolarArea", name:"Polar Area", group:"components", import: () => import('../../configs/dashboard/polar-area.js'), thumbnailUrl:"/static/dashboard/polar-area.png" },
+        { type:"VirtualTable", name:"Table", group:"components", import: () => import('../../configs/dashboard/virtual-table.js'), thumbnailUrl:"/static/dashboard/virtual-table.png" },
+        { type:"Metric", name:"Metric", group:"components", import: () => import('../../configs/dashboard/metric.js'), thumbnailUrl:"/static/dashboard/metric.png" },
+        { type:"BarChart", name:"Bar Chart", group:"components", import: () => import('../../configs/dashboard/bar.js'), thumbnailUrl:"/static/dashboard/bar.png" },
+        { type:"GHeatMaps", name:"Heat Map", group:"components", import: () => import('../../configs/dashboard/gheatmaps.js'), thumbnailUrl:"/static/dashboard/gheatmaps.png" },
+      ],
+
+      callback: null,
+      instance: null,
+
+      isDisabled: false,
+
+      tabIndex: 3,
+      tabItems: [
+        //{ text:'Collection', value:1 },
+        { text:'Layouts', value:2 },
+        { text:'Components', value:3 },
+      ]
+    }
+  },
+
+  emits: [ 'add' ],
+
+	inject: [ 'dashboardStyle', 'socketEmit2' ],
+
+  methods: {
+
+    async add(component){
+      this.isDisabled = true
+
+      if(component.import){
+        component = (await component.import()).component
+      }
+
+      const newComponent = JSON.parse(JSON.stringify(component))
+      newComponent.uid = md5(newComponent.type + Date.now())
+      newComponent.name = newComponent.type
+
+      if(!newComponent.props)
+        newComponent.props = {}
+
+      newComponent.props.enabled = true
+
+      if(component.isContainer && !Array.isArray(newComponent).items)
+        newComponent.items = []
+
+      if(typeof this.callback === 'function')
+        this.callback(newComponent)
+
+      this.$emit('add', newComponent)
+      this.close()
+      this.isDisabled = false
+    },
+
+    open(callback){
+      this.callback = callback
+      this.$refs.modal.open()
+    },
+
+    close(){
+      this.$refs.modal.close()
+    }
+
+  },
+
+  props: {
+  },
+
+}
+
+</script>
+
+<style module>
+
+.button{
+  @apply flex flex-col gap-2 items-center rounded-xl p-3;
+  @apply hover:bg-text-50 border-[1px] border-transparent hover:border-text-200;
+}
+
+
+</style>