@mixd-id/web-scaffold 0.1.230406341 → 0.1.230406343

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406341",
+  "version": "0.1.230406343",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -26,6 +26,7 @@
     },
     "./importer": "./src/utils/importer.js",
     "./listpage1": "./src/utils/listpage1.js",
+    "./dashboard": "./src/utils/dashboard.js",
     "./listview": "./src/utils/listview.js",
     "./preset-selector": {
       "require": "./src/utils/preset-selector.js",

package/src/components/Grid.vue

@@ -17,6 +17,8 @@ export default{
 
 	mixins: [ componentMixin ],
 
+  name: "Grid",
+
 	props:{
 		items: Array
 	}

package/src/components/PresetSelectorFilterItem.vue

@@ -5,6 +5,7 @@
       <div v-if="type === 'date'" class="flex-1 flex flex-row gap-2">
         <div class="flex-1 flex flex-row gap-2">
           <Dropdown v-model="value.operator"
+                    :readonly="readonly"
                     :class="![ 'yesterday', 'today', 'thisWeek', 'thisMonth', 'lastMonth', 'thisYear' ].includes(value.operator) ? 'w-[100px]' : 'w-full'"
                     @change="apply">
             <option value="=">=</option>
@@ -24,10 +25,12 @@
                class="flex-1 flex flex-row gap-2">
             <Datepicker class="flex-1"
                         mode="popup"
+                        :readonly="readonly"
                         v-model="value.value"
                         @change="apply" />
             <Datepicker v-if="value.operator === 'between'"
                         class="flex-1"
+                        :readonly="readonly"
                         mode="popup"
                         v-model="value.value2"
                         @change="apply" />
@@ -38,6 +41,7 @@
       <div v-else-if="type === 'number'" class="flex flex-row gap-2">
         <Dropdown v-model="value.operator"
                   class="w-[100px]"
+                  :readonly="readonly"
                   @change="apply">
           <option value="=">=</option>
           <option value=">">&gt;</option>
@@ -49,13 +53,16 @@
         </Dropdown>
         <Textbox v-model="value.value"
                  class="flex-1"
+                 :readonly="readonly"
                  @keyup.enter="apply"
                  @blur="apply" />
       </div>
 
       <div v-else-if="type === 'boolean'" class="flex flex-row gap-2">
-        <Radio :name="value.key" :value="true" v-model="value.value" @change="apply">True</Radio>
-        <Radio :name="value.key" :value="false" v-model="value.value" @change="apply">False</Radio>
+        <Radio :name="value.key"
+               :readonly="readonly" :value="true" v-model="value.value" @change="apply">True</Radio>
+        <Radio :name="value.key"
+               :readonly="readonly" :value="false" v-model="value.value" @change="apply">False</Radio>
       </div>
 
       <div v-else-if="type === 'enum' && Array.isArray(cTypeParams) && cTypeParams.length > 0"
@@ -64,6 +71,7 @@
         <Checkbox v-for="param in cTypeParams"
                   v-model="cValue.value"
                   class="flex-1"
+                  :readonly="readonly"
                   :value="param.value"
                   @change="apply">
           {{ param.text }}
@@ -74,11 +82,13 @@
       <div v-else-if="type === 'component'">
         <component :is="column.component"
                    :value="value"
+                   :readonly="readonly"
                    @change="apply" />
       </div>
 
       <div v-else class="flex flex-row gap-2">
         <Dropdown v-model="value.operator" class="w-[100px]"
+                  :readonly="readonly"
                   @change="apply">
           <option value="eq">Equal</option>
           <option value="not">Not Equal</option>
@@ -91,6 +101,7 @@
           <option value="regex">Regex</option>
         </Dropdown>
         <Textbox v-model="value.value"
+                 :readonly="readonly"
                  class="flex-1"
                  @keyup.enter="apply"
                  @blur="apply" />
@@ -120,6 +131,8 @@ export default{
 
     value: Object,
 
+    readonly: [ Boolean, Number ],
+
     enumCache: Object,
 
   },

package/src/components/VirtualTable.vue

@@ -103,7 +103,7 @@ export default{
     }
   },
 
-  inject: [ 'listStyle' ],
+  inject: [ 'emitRoot', 'listStyle' ],
 
 	emits: [ 'scroll-end', 'item-click' ],
 
@@ -114,6 +114,8 @@ export default{
 
     itemClass: String,
 
+    uid: String,
+
 		items: Array,
 
 		pinned: Function,
@@ -314,6 +316,8 @@ export default{
 			if(this.scrollTop > this.$refs.scroller.offsetHeight - this.$refs.cont.clientHeight - this.itemHeight){
 				if(!this.isOnEndScroll){
 					this.$emit('scroll-end')
+          if(typeof this.emitRoot === 'function')
+            this.emitRoot.apply(this, [ 'scroll-end', this.$props ])
 					this.isOnEndScroll = true
 				}
 			}

package/src/configs/dashboard/bar.js

@@ -0,0 +1,9 @@
+export const component = {
+
+  type:"BarChart",
+
+  props:{
+    height:200
+  }
+
+}

package/src/configs/dashboard/collection-1.js

@@ -0,0 +1,5 @@
+export const component = {
+
+  props: {}
+
+}

package/src/configs/dashboard/doughnut.js

@@ -0,0 +1,7 @@
+export const component = {
+
+  type:"Doughnut",
+
+  props:{}
+
+}

package/src/configs/dashboard/grid-2.js

@@ -0,0 +1,32 @@
+export const component = {
+
+  type:'Grid',
+
+  isContainer:true,
+
+  props:{
+
+    columns:[
+      'grid-cols-1',
+      'md:grid-cols-2',
+      '',
+      ''
+    ],
+
+    gap:[
+      'gap-5',
+      'md:gap-5',
+      '',
+      ''
+    ],
+
+    alignItems:[
+      'items-start',
+      'md:items-start',
+      '',
+      ''
+    ],
+
+  }
+
+}

package/src/configs/dashboard/grid-3.js

@@ -0,0 +1,32 @@
+export const component = {
+
+  type:'Grid',
+
+  isContainer:true,
+
+  props:{
+
+    columns:[
+      'grid-cols-1',
+      'md:grid-cols-3',
+      '',
+      ''
+    ],
+
+    gap:[
+      'gap-5',
+      'md:gap-5',
+      '',
+      ''
+    ],
+
+    alignItems:[
+      'items-start',
+      'md:items-start',
+      '',
+      ''
+    ],
+
+  }
+
+}

package/src/configs/dashboard/grid-4.js

@@ -0,0 +1,32 @@
+export const component = {
+
+  type:'Grid',
+
+  isContainer:true,
+
+  props:{
+
+    columns:[
+      'grid-cols-2',
+      'md:grid-cols-4',
+      '',
+      ''
+    ],
+
+    gap:[
+      'gap-5',
+      'md:gap-5',
+      '',
+      ''
+    ],
+
+    alignItems:[
+      'items-start',
+      'md:items-start',
+      '',
+      ''
+    ],
+
+  }
+
+}

package/src/configs/dashboard/grid.js

@@ -0,0 +1,13 @@
+export const component = {
+
+  type:'Grid',
+
+  isContainer:true,
+
+  props:{
+    columns:['grid-cols-2', 'md:grid-cols-5', '', ''],
+    gap:['gap-5', 'md:gap-5', '', ''],
+    alignItems:['items-start', 'md:items-start', '', ''],
+  }
+
+}

package/src/configs/dashboard/metric.js

@@ -0,0 +1,10 @@
+export const component = {
+
+  type:"Metric",
+
+  props:{
+    columnModifier:"sum",
+    column2Modifier:"sum"
+  }
+
+}

package/src/configs/dashboard/pie.js

@@ -0,0 +1,7 @@
+export const component = {
+
+  type:"Pie",
+
+  props:{}
+
+}

package/src/configs/dashboard/polar-area.js

@@ -0,0 +1,7 @@
+export const component = {
+
+  type:"PolarArea",
+
+  props:{}
+
+}

package/src/configs/dashboard/virtual-table.js

@@ -0,0 +1,9 @@
+export const component = {
+
+  type:"VirtualTable",
+
+  props:{
+    height:[ "h-[50vh]", "md:h-[50vh]", "", "" ]
+  }
+
+}

package/src/utils/dashboard.js

@@ -0,0 +1,100 @@
+const {presetToSequelizeList} = require("./preset-selector");
+
+const backgroundColors = [
+  '#5D9CEC',
+  '#A0D468',
+  '#FFCE54',
+  '#FC6E51',
+  '#48CFAD',
+  '#AC92EC',
+  '#4FC1E9',
+  '#FFCE54',
+  '#ED5565',
+  '#EC87C0'
+]
+
+const getModelFromDatasource = async (datasource, opt) => {
+  if(!opt.conn.models[datasource.datasourceUid]){
+    const tableColumns = await getSequelizeColumns(datasource.columns, opt)
+
+    opt.conn.define(datasource.datasourceUid, tableColumns, {
+      tableName: `datasource_${datasource.datasourceUid}`
+    })
+  }
+
+  return opt.conn.models[datasource.datasourceUid]
+}
+
+const getDatasourceItems = async (datasource, opt) => {
+
+  const Model = await getModelFromDatasource(datasource, opt)
+  const config = {
+    columns: datasource.columns
+  }
+  const findOpt = await presetToSequelizeList(datasource, {
+    config,
+    model: Model,
+    conn: opt.conn,
+    limit: 100
+  })
+
+  return await Model.findAll({
+    ...findOpt,
+    raw: true
+  })
+}
+
+const getSequelizeColumns = async (columns, opt) => {
+
+  const { DataTypes } = opt.Sequelize
+
+  const tableColumns = {
+    id: {
+      type: DataTypes.INTEGER,
+      autoIncrement: true,
+      primaryKey: true,
+      allowNull: false,
+    },
+    createdAt: { type: DataTypes.DATE },
+    updatedAt: { type: DataTypes.DATE },
+  }
+
+  for(let column of columns){
+
+    let type
+    switch(column.type){
+      case 'date':
+        type = DataTypes.DATE
+        break
+      case 'number':
+        type = DataTypes.BIGINT
+        break
+
+      default:
+        type = DataTypes.STRING(column.maxLength ?? 40)
+        break
+    }
+
+    tableColumns[column.key] = {
+      type
+    }
+  }
+
+  return tableColumns
+}
+
+
+module.exports = {
+  getModelFromDatasource,
+  getDatasourceItems,
+  getSequelizeColumns,
+
+  backgroundColors,
+
+  /*loadBarChart,
+  loadMetric,
+  loadDoughnut,
+  loadPie,
+  loadPolarArea,
+  loadVirtualTable*/
+}

package/src/widgets/Dashboard/BarChart.vue

@@ -49,6 +49,7 @@ export default{
       return {
         responsive: true,
         maintainAspectRatio: false,
+        borderRadius: 4,
         plugins: {
           legend: {
             display: false // This hides the legend
@@ -69,7 +70,8 @@ export default{
               },
               minRotation: 0,
               maxRotation: 0
-            }
+            },
+            stacked: !!this.stacked,
           },
           y: {
             beginAtZero: true,
@@ -82,6 +84,7 @@ export default{
                 return `rgba(255,255,255, .1)`
               }
             },
+            stacked: !!this.stacked,
           }
         },
         onClick: function(evt, evt2) {
@@ -98,7 +101,7 @@ export default{
     },
 
     yLegends(){
-      return this.value.yLegends ?? []
+      return this.value?.yLegends ?? []
     }
 
   },
@@ -126,10 +129,8 @@ export default{
 
     datasourceUid: String,
 
-    usePercentage: {
-      type: Number,
-      default: false
-    },
+    usePercentage: [ Boolean, Number ],
+    stacked: [ Boolean, Number ],
 
     barHeight: {
       type: Number,

package/src/widgets/Dashboard/BarChartSetting.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="flex flex-col gap-5 p-6">
 
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Datasource</label>
-      <div>
-        <Dropdown class="w-[120px]"
-                  :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 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">
@@ -28,9 +30,9 @@
           <div class="flex-1">
             <label class="text-primary cursor-pointer"
                    ref="xAxis"
-                   @click="$refs.context1.open($refs.xAxis)">
+                   @click="!readonly ? $refs.context1.open($refs.xAxis) : null">
               {{ value.props.xAxeMultiple ? 'X Axes' : 'X Axis' }}
-              <svg 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>
+              <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]">
@@ -55,14 +57,14 @@
                   @reorder="(from, to) => { cXAxes.splice(to, 0, cXAxes.splice(from, 1)[0]); }">
           <template v-slot="{ item, index }">
             <div class="flex flex-row items-center gap-2">
-              <div data-reorder v-if="cXAxes.length > 1">
+              <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">
                 <Dropdown v-model="item.key" :readonly="readonly">
-                  <option v-for="column in selectedDatasource?.columns"
+                  <option v-for="column in selectedDatasourceColumns"
                           :value="column.key">
-                    {{ column.label }}
+                    {{ selectedDatasource.pivot?.enabled ? column.key : column.label }}
                   </option>
                 </Dropdown>
               </div>
@@ -79,9 +81,9 @@
           <div class="flex-1">
             <label class="text-primary cursor-pointer"
                    ref="yAxis"
-                   @click="$refs.context2.open($refs.yAxis)">
+                   @click="!readonly ? $refs.context2.open($refs.yAxis) : null">
               {{ value.props.yAxeMultiple ? 'Y Axes' : 'Y Axis' }}
-              <svg 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>
+              <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]">
@@ -110,10 +112,10 @@
                 <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">
-                <Dropdown v-model="item.key">
-                  <option v-for="column in selectedDatasource?.columns"
+                <Dropdown v-model="item.key" :readonly="readonly">
+                  <option v-for="column in selectedDatasourceColumns"
                           :value="column.key">
-                    {{ column.label }}
+                    {{ selectedDatasource.pivot?.enabled ? column.key : column.label }}
                   </option>
                 </Dropdown>
               </div>
@@ -125,7 +127,7 @@
         </ListItem>
       </div>
 
-      <div class="flex justify-center">
+      <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>
@@ -135,17 +137,12 @@
 
       <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" />
+        <Switch v-model="value.props.usePercentage" :readonly="readonly" />
       </div>
 
-      <div class="flex flex-row items-center gap-2">
-        <label class="flex-1">Height</label>
-        <Dropdown class="w-[100px]"
-                  v-model.number="value.props.barHeight">
-          <option :value="200">200px</option>
-          <option :value="300">300px</option>
-          <option :value="400">400px</option>
-        </Dropdown>
+      <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>
@@ -164,6 +161,14 @@ export default{
       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.columns
+    },
+
     xAxes(){
       if(!Array.isArray(this.value.props.xAxes))
         this.value.props.xAxes = [{ key:"" }]
@@ -188,7 +193,7 @@ export default{
 
   },
 
-  inject: [ 'appStyle' ],
+  inject: [ 'appStyle', 'previewDatasource' ],
 
   methods: {