@mixd-id/web-scaffold 0.1.240411059 → 0.1.240411061

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411059",
+  "version": "0.1.240411061",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/List.vue

@@ -13,6 +13,7 @@
                    :enumCache="enumCache"
                    :controller="controller"
                    :preset-key="presetKey"
+                   :use-assistant="useAssistant"
                    @apply="load">
 
           <template #toolbar>
@@ -329,9 +330,13 @@ export default{
     itemsFn: Function,
     onSignalFn: Function,
     searchable: {
-      type: Boolean,
+      type: undefined,
       default: true
     },
+    useAssistant: {
+      type: undefined,
+      default: false
+    }
   },
 
   methods: {
@@ -1064,7 +1069,7 @@ export default{
     },
 
     canSearch(){
-      return this.searchable // this.preset.columns.some(_ => 'search' in _)
+      return [ 1, true, 'true' ].includes(this.searchable) // this.preset.columns.some(_ => 'search' in _)
     },
 
     sidebar(){
@@ -1072,7 +1077,7 @@ export default{
       if(!this.configParams.sidebar || !('open' in this.configParams.sidebar))
         this.configParams.sidebar = {
           open: false,
-          width: 280
+          width: 360
         }
 
       return this.configParams.sidebar
@@ -1135,7 +1140,8 @@ export default{
 
   provide(){
     return {
-      listStyle: this.$style
+      listStyle: this.$style,
+      load: this.load
     }
   },
 

package/src/components/PresetSelectorFilterItem.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="flex flex-col">
-
     <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"
@@ -127,6 +126,8 @@ export default{
       default: {}
     },
 
+    enabled: Boolean,
+
     type: String,
 
     typeParams: Array,
@@ -169,6 +170,8 @@ export default{
   methods: {
 
     apply(){
+      if(this.enabled === false) return
+
       switch(this.type){
 
         case 'bool':

package/src/utils/list.mjs

@@ -1,5 +1,5 @@
 import dayjs from "dayjs";
-import {DataTypes, fn, Op, literal} from 'sequelize'
+import Sequelize from 'sequelize'
 import {groupBy} from './helpers.mjs'
 
 const ftWildcard = (key) => {
@@ -22,6 +22,7 @@ const getValue = (filter, opt) => {
   const { key, operator } = filter
   const keyColumns = groupBy(columns, 'key')
   const type = ((keyColumns[key] ?? [])[0] ?? {}).type
+  const { Op } = opt.Sequelize ?? Sequelize
 
   let whereObj = {}
 
@@ -375,6 +376,7 @@ const filtersToSequelizeWhere = async(filters, opt) => {
 
   let whereArr = []
   let replacements = []
+  const { literal, Op } = opt.Sequelize ?? Sequelize
 
   const getValue = (filter, opt) => {
 
@@ -642,6 +644,7 @@ const filtersToSequelizeWhere = async(filters, opt) => {
       default:
         switch(operator) {
           case '=':
+          case 'eq':
             whereObj = {
               [key]:{
                 [Op.eq]: filter.value
@@ -649,7 +652,6 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             }
             break
 
-          case 'eq':
           case 'not':
             whereObj = {
               [key]:{
@@ -716,6 +718,17 @@ const filtersToSequelizeWhere = async(filters, opt) => {
               }
             }
             break
+
+          case 'notEmpty':
+            whereObj = {
+              [key]:{
+                [Op.or]: [
+                  { [Op.ne]: null },
+                  { [Op.ne]: '' }
+                ]
+              }
+            }
+            break
         }
         break
     }
@@ -723,8 +736,6 @@ const filtersToSequelizeWhere = async(filters, opt) => {
     return whereObj
   }
 
-  //console.log(util.inspect(filters, false, null, true))
-
   for(let filter of filters) {
     if (filter.enabled === false) continue
 
@@ -762,8 +773,6 @@ const filtersToSequelizeWhere = async(filters, opt) => {
     }
   }
 
-  //console.log(util.inspect(whereArr, false, null, true))
-
   return {
     where: {
       [Op.and]: whereArr
@@ -772,11 +781,13 @@ const filtersToSequelizeWhere = async(filters, opt) => {
   }
 }
 
-const afterItemToSequelizeWhere = async (order, afterItem) => {
+const afterItemToSequelizeWhere = async (order, afterItem, opt = {}) => {
   if(!afterItem){
     return { where:{}, replacements:[] }
   }
 
+  const { Op } = opt.Sequelize ?? Sequelize
+
   if(order.filter((_) => _[0] === 'id').length <= 0){
     order.push([ 'id', 'desc' ])
   }
@@ -827,6 +838,7 @@ const searchToSequelizeWhere = async (search, params) => {
   }
 
   const { match } = params
+  const { literal } = params.Sequelize ?? Sequelize
 
   let where = {}
   let replacements = []
@@ -851,8 +863,7 @@ const chartToSequelizeWhere = async (chart, opt) => {
   const { model, where, replacements } = opt
   const { type } = chart
   const { xAxis, yAxis } = chart[type] ?? {}
-
-  //console.log(util.inspect(chart, false, null, true ))
+  const { literal, Op } = opt.Sequelize ?? Sequelize
 
   let attributes = []
   let group = []
@@ -1004,15 +1015,6 @@ const chartToSequelizeWhere = async (chart, opt) => {
       break
   }
 
-  /*console.log(
-    util.inspect({
-      attributes,
-      group,
-      order,
-      include
-    }, false, null, true)
-  )*/
-
   return {
     attributes,
     group,
@@ -1023,6 +1025,7 @@ const chartToSequelizeWhere = async (chart, opt) => {
 
 const pivotToSequelizeWhere = async (pivot, opt) => {
   const { model, sorts = [] } = opt
+  const { fn, literal, Op, DataTypes } = opt.Sequelize ?? Sequelize
 
   const attributes = []
   const group = []
@@ -1199,8 +1202,6 @@ const sortsToSequelizeWhere = async (sorts, opt) => {
     order.push([ 'id', (order[0] ?? [])[1] ?? 'desc' ])
   }
 
-  //console.log(util.inspect(sorts, false, null, true /* enable colors */))
-
   return {
     order
   }
@@ -1211,9 +1212,8 @@ const filtersToSequelizeInclude = async(filters, opt, includes) => {
     return includes
   }
 
-  // TODO: Test on 2 level or more level includes
+  const { Op } = opt.Sequelize ?? Sequelize
 
-  // Generate where object
   let whereObj = {}
   for(let filter of filters) {
     if (filter.enabled === false) continue
@@ -1249,9 +1249,7 @@ const filtersToSequelizeInclude = async(filters, opt, includes) => {
       }
     }
   }
-  //console.log('whereObj', util.inspect(whereObj, false, null, true /* enable colors */))
 
-  // Apply where to includes
   for(let key in whereObj){
 
     const keyParts = key.split('.')
@@ -1279,8 +1277,6 @@ const filtersToSequelizeInclude = async(filters, opt, includes) => {
     include.required = true
   }
 
-  //console.log('includes', util.inspect(includes, false, null, true /* enable colors */))
-
   return includes
 }
 
@@ -1300,15 +1296,18 @@ const syntaxSearchToSequelizeOpt = async(search, opt) => {
   }
 }
 
-const presetToSequelizeList = async(preset, {
-  conn,
-  model,
-  config,
-  where:initialWhere,
-  replacements: initialReplacements,
-  include,
-  order:initialOrder
-}) => {
+const presetToSequelizeList = async(preset, opt = {}) => {
+  let {
+    conn,
+    model,
+    config,
+    where:initialWhere,
+    replacements: initialReplacements,
+    include,
+    order:initialOrder,
+    logging = false
+  } = opt
+
   if(!model) return {}
 
   const updatedAtField = model.rawAttributes['updatedAt'] ?? model.rawAttributes['updated_at']
@@ -1321,6 +1320,7 @@ const presetToSequelizeList = async(preset, {
   }
 
   const { itemsPerPage = 20, filters = [], sorts, pivot, afterItem, search, id, uid } = preset;
+  const { Op } = opt.Sequelize ?? Sequelize
 
   let where = {}
   const replacements = []
@@ -1348,7 +1348,8 @@ const presetToSequelizeList = async(preset, {
 
   const { where:filterWhere, replacements:filterReplacements } = await filtersToSequelizeWhere(filters, {
     config,
-    model
+    model,
+    Sequelize: opt.Sequelize
   })
 
   let searchWhere = {}, searchReplacements = []
@@ -1366,7 +1367,8 @@ const presetToSequelizeList = async(preset, {
 
       if(match !== null){
         const searchOpt = await searchToSequelizeWhere(search, {
-          match
+          match,
+          Sequelize: opt.Sequelize
         })
         searchWhere = searchOpt.where
         searchReplacements = searchOpt.replacements
@@ -1381,7 +1383,8 @@ const presetToSequelizeList = async(preset, {
   if(pivot && pivot.enabled){
     const { attributes, group, order } = await pivotToSequelizeWhere(pivot, {
       model,
-      conn
+      conn,
+      Sequelize: opt.Sequelize
     })
 
     return {
@@ -1400,11 +1403,14 @@ const presetToSequelizeList = async(preset, {
         ...searchReplacements
       ],
       group,
-      order
+      order,
+      logging
     }
   }
   else{
-    const { where:afterItemWhere } = await afterItemToSequelizeWhere(order, afterItem)
+    const { where:afterItemWhere } = await afterItemToSequelizeWhere(order, afterItem, {
+      Sequelize: opt.Sequelize
+    })
 
     return {
       where: {
@@ -1425,7 +1431,8 @@ const presetToSequelizeList = async(preset, {
         ...filterReplacements,
         ...searchReplacements
       ],
-      itemsPerPage
+      itemsPerPage,
+      logging
     }
   }
 }

package/src/utils/preset-selector.js

@@ -246,6 +246,7 @@ const getValue = (filter, opt) => {
 
     default:
       switch(operator) {
+        case 'eq':
         case '=':
           withoutKey ?
             whereObj = {
@@ -256,7 +257,6 @@ const getValue = (filter, opt) => {
             }
           break
 
-        case 'eq':
         case 'not':
           withoutKey ?
             whereObj = {
@@ -638,6 +638,7 @@ const filtersToSequelizeWhere = async(filters, opt) => {
 
       default:
         switch(operator) {
+          case 'eq':
           case '=':
             whereObj = {
               [key]:{
@@ -646,7 +647,6 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             }
             break
 
-          case 'eq':
           case 'not':
             whereObj = {
               [key]:{

package/src/widgets/Dashboard/Metric.vue

@@ -26,7 +26,6 @@
 
 <script>
 
-import {useEmitter} from "../../utils/event-bus";
 import dayjs from "dayjs";
 
 export default{

package/src/widgets/PresetBar.vue

@@ -126,6 +126,21 @@
           </ContextMenu>
         </div>
 
+        <div class="p-5" v-if="['true', 1, true].includes(useAssistant)">
+          <div class="px-2 flex flex-col gap-1">
+            <div class="flex flex-row gap-2">
+              <div class="flex-1">
+                <label class="text-text-300">AI Assistant</label>
+              </div>
+              <div v-if="$isDebugMode" class="flex flex-row gap-2">
+                <button type="button" class="text-primary text-sm" @click="log(config)">Config</button>
+                <button type="button" class="text-primary text-sm" @click="log(preset)">Preset</button>
+              </div>
+            </div>
+            <Textarea rows="6" placeholder="Generate preset based on text" v-model="generateText" />
+            <Button ref="generateBtn" class="w-[100px] mt-2" :state="canGenerate ? 1 : -1" @click="generatePreset">Generate</Button>
+          </div>
+        </div>
 
       </div>
 
@@ -226,6 +241,7 @@
                         <div class="flex flex-row" v-for="(filterVal, filterIdx) in filter.value">
                           <PresetSelectorFilterItem
                               class="flex-1"
+                              :enabled="filter.enabled"
                               :column="column(filter.key)"
                               :type="typeOf(column(filter.key).type)"
                               :typeParams="typeParamsOf(column(filter.key))"
@@ -241,12 +257,6 @@
                           </button>
                         </div>
                       </div>
-                      <PresetSelectorFilterItem v-else
-                                                :column="column(filter.key)"
-                                                :type="typeOf(column(filter.key).type)"
-                                                :value="filter"
-                                                :enumCache="enumCache"
-                                                @change="apply()" />
                     </div>
                   </div>
                 </div>
@@ -598,7 +608,7 @@ export default{
 
   emits: [ 'apply' ],
 
-  inject: [ 'appStyle', 'confirm', 'socket' ],
+  inject: [ 'alert', 'appStyle', 'confirm', 'load', 'socket' ],
 
   props: {
 
@@ -610,6 +620,11 @@ export default{
 
     enumCache: Object,
 
+    useAssistant: {
+      type: undefined,
+      default: false
+    }
+
   },
 
   methods: {
@@ -708,6 +723,48 @@ export default{
       return this.preset.columns.filter(_ => _.key === key).pop() ?? {}
     },
 
+    generatePreset(){
+      if(!this.generateText) return
+
+      this.$refs.generateBtn.setState(2)
+      this.socket.send(`${this.controller}.prompt-ai-assistance`, {
+        text: this.generateText
+      })
+          .then(preset => {
+
+            /*preset = {
+              columns: [
+                { key: 'code', label: 'Kode' },
+                { key: 'loginCode', label: 'NIP' },
+                { key: 'bertemuDengan', label: 'Bertemu Dengan' }
+              ],
+              filters: [
+                {
+                  key: 'createdAt',
+                  value: [ { operator: '=', value: [ '2024-07-05' ] } ]
+                }
+              ]
+            }*/
+
+            preset.uid = 'ai-assistant'
+            preset.name = !preset.name ? 'AI Assistant' : preset.name
+
+            let index = this.config.presets.findIndex(_ => _.uid === preset.uid)
+            if(index < 0){
+              this.config.presets.push(preset)
+            }
+            else {
+              Object.assign(this.config.presets[index], preset)
+              this.load()
+            }
+
+            this.configParams.presetIdx = preset.uid
+
+          })
+          .catch(err => this.alert(err))
+          .finally(_ => this.$refs.generateBtn?.resetState())
+    },
+
     duplicate(item){
       const newItem = JSON.parse(JSON.stringify(item))
       newItem.name = `${item.name} (Copy)`
@@ -720,15 +777,18 @@ export default{
     remove(item){
       if(this.config.presets.length > 1){
         this.confirm('Remove this preset?', () => {
-          this.config.presets.splice(this.config.presets.find(_ => _.uid === item.uid), 1)
+          this.config.presets.splice(this.config.presets.findIndex(_ => _.uid === item.uid), 1)
         })
       }
     },
 
     select(item){
-      this.configParams.presetIdx = item.uid
       this.presetBar.view = 2
-      this.apply()
+
+      if(this.configParams.presetIdx !== item.uid){
+        this.configParams.presetIdx = item.uid
+        this.apply()
+      }
     },
 
     deselect(){
@@ -860,6 +920,10 @@ export default{
         }
 
       return this.configParams.presetBar
+    },
+
+    canGenerate(){
+      return this.generateText.length > 0
     }
 
   },
@@ -879,6 +943,7 @@ export default{
           ...((this.config ?? {}).chart !== false ? [{ text:'Chart', value:4 }] : []),
         ]
       },
+      generateText: 'List kunjungan tgl 5 juli, hanya kolom kode, nip kolektor dan bertemu dengan'
     }
   },
 

package/src/widgets/PresetBarPivot.vue

@@ -166,8 +166,10 @@ export default{
     },
 
     addPivot(type, obj){
-      if(!this.pivot[type])
+      if(!Array.isArray(this.pivot[type])){
         this.pivot[type] = []
+      }
+      console.log(this.pivot[type])
 
       this.pivot[type].push(Object.assign({}, obj))
       this.apply()