@mixd-id/web-scaffold 0.1.230406001

package/src/utils/listpage1.js

@@ -0,0 +1,1371 @@
+const { Op } = module.parent.require('sequelize')
+const Sequelize = module.parent.require('sequelize')
+const dayjs = require("dayjs");
+const Exceljs = require("exceljs");
+
+let ListPage1 = {
+
+  presetName: 'listpage1',
+  itemsPerPage: 24,
+  model: '',
+  channel: '',
+
+  async patch(params, socket){
+
+    const { reset } = params
+
+    let currentPreset
+    const preset = this['loadPreset'] && !reset ? await this.loadPreset() : undefined
+    if(preset){
+      currentPreset = {
+        ...this.getDefaultPresets(),
+        ...preset
+      }
+    }
+    else{
+      currentPreset = {
+        ...this.getDefaultPresets()
+      }
+    }
+
+    for(let i = 0 ; i < currentPreset.presets.length ; i++){
+
+      Object.assign({
+        name: 'Default',
+        columns: [],
+        sorts: [],
+        filters: [],
+        summaries: [],
+      },
+        currentPreset.presets[i])
+
+      if(currentPreset.presets[i].summaries){
+        for(let j = 0 ; j < currentPreset.presets[i].summaries.length ; j++){
+
+          Object.assign({
+                map: {
+                  mapRadius: 16,
+                  mapType: "heatmap",
+                  zoom: 7
+                }
+              },
+              currentPreset.presets[i].summaries[j])
+        }
+      }
+    }
+
+    /*if(this.user && this.socket && this.socket.auth){
+      const { userId } = this.socket.auth
+      const user = await this.user.withId(userId)
+      const preset = await user.loadPreset(this.presetName)
+
+    }
+    else{
+
+    }*/
+
+    const data = await this.load({ preset:currentPreset.presets[currentPreset.presetIdx] })
+
+    if(this.channel && this.socket){
+      if(this.socket.joinWithArgs){
+        this.socket.joinWithArgs(this.channel, { preset:currentPreset.presets[currentPreset.presetIdx] })
+      }
+      else{
+        this.socket.join(this.channel)
+      }
+    }
+
+    const mapApiKey = this.getMapApiKey ? this.getMapApiKey() : undefined
+
+    return {
+      configs: currentPreset,
+      mapApiKey,
+      ...data
+    }
+  },
+
+  async load(params){
+
+    const { items, hasNext, count } = await this._load(params)
+
+    return {
+      items,
+      hasNext,
+      count
+    }
+  },
+
+  async loadSummary(params){
+
+    if(!this.conn){
+      console.error('Unable to load summary, connection not found')
+      return
+    }
+
+    const { preset = {} } = params
+    const summary = preset.summaries.filter((_) => _.enabled).pop()
+
+    if(!summary) return
+
+    const { derivedSql, where, replacements } = await this._load(params)
+
+    switch(summary.mode){
+
+      case 'bar':
+        return await this.loadBarSummary(summary, derivedSql)
+
+      case 'line':
+        return await this.loadLineSummary(summary, derivedSql)
+
+      case 'table':
+        return await this.loadTableSummary(summary, derivedSql)
+
+      case 'map':
+        if(this.loadMapSummary){
+          return await this.loadMapSummary(preset, {
+            derivedSql,
+            where,
+            replacements
+          })
+        }
+        break
+
+    }
+
+    return
+
+
+
+    /*const attributes = []
+    const group = []
+    const summaryColumns = [
+      /!*{ key:"dfDate", label:"Date", width:"200px", visible:true },
+      { key:"type-1", label:"Type 1", type:"number", visible:true },
+      { key:"type-2", label:"Type 2", type:"number", visible:true },
+      { key:"type-3", label:"Type 3", type:"number", visible:true },
+      { key:"type-4", label:"Type 4", type:"number", visible:true },
+      { key:"type-8", label:"Type 8", type:"number", visible:true },*!/
+    ]
+
+    const row = rows[0]
+    const rowKey = row.key
+    const rowLabel = this.columns[row.key].label
+    switch(row.format){
+      case 'date':
+        attributes.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d') as dfDate`)
+        group.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d')`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"D MMM" })
+        break
+
+      case 'month':
+        attributes.push(`DATE_FORMAT(${rowKey}, '%Y-%m') as dfDate`)
+        group.push(`DATE_FORMAT(${rowKey}, '%Y-%m')`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"MMM YYYY" })
+        break
+
+      case 'quarter':
+        attributes.push(`CONCAT(YEAR(${rowKey}), ' Q', QUARTER(${rowKey})) as dfDate`)
+        group.push(`CONCAT(YEAR(${rowKey}), ' Q', QUARTER(${rowKey}))`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"MMM YYYY" })
+        break
+
+      case 'year':
+        attributes.push(`DATE_FORMAT(${rowKey}, '%Y') as dfDate`)
+        group.push(`DATE_FORMAT(${rowKey}, '%Y')`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"YYYY" })
+        break
+
+      default:
+        attributes.push(`${rowKey} as dfDate`)
+        group.push(`${rowKey}`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true })
+        break
+    }
+
+    const value = values[0]
+    if(columnValues.length > 0){
+      columnValues.forEach((obj) => {
+        const columnValue = obj.cols
+
+        let columnLabel = (columnValue ?? '').toString()
+        const baseColumn = this.columns[colKey]
+        switch(baseColumn.type){
+
+          case 'enum':
+            const enumValue = baseColumn.typeParams.filter((_) => _.value === columnValue).pop()
+            if(enumValue) columnLabel = enumValue.text
+            break
+        }
+
+        switch(value.aggregrate){
+          case 'count':
+            const fn = columnValue === null ? `${colKey} is null` : `${colKey} = '${columnValue}'`
+            attributes.push(`SUM(IF(${fn}, 1, 0)) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+
+          case 'min':
+            attributes.push(`MIN(${colKey}) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+
+          case 'max':
+            attributes.push(`MAX(${colKey}) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+
+          case 'avg':
+            attributes.push(`AVG(${colKey}) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+        }
+      })
+    }
+    else{
+      switch(value.aggregrate) {
+        case 'count':
+        default:
+          attributes.push(`COUNT(*) as \`Count\``)
+          summaryColumns.push({ key:'Count', label:'Count', type:"number", visible:true, aggregrate:"count" })
+      }
+    }
+
+    //console.log(attributes)
+
+    let [ summaryItems ] = await this.conn.query(`
+      SELECT
+       ${attributes.join(', ')}
+      FROM (
+        ${derivedSql}
+      ) as t1
+      GROUP BY ${group[0]}
+      ORDER BY dfDate ASC
+    `)
+
+    if(this.columns[rowKey] && this.columns[rowKey].type === 'enum'){
+      summaryItems = summaryItems.map((_) => {
+
+        const typeParam = this.columns[rowKey].typeParams.filter((__) => __.value === _.dfDate).pop()
+        if(typeParam){
+          _.dfDate = typeParam.text
+        }
+
+        return _
+      })
+    }
+
+    const summary = {
+      type: "table",
+      columns: summaryColumns,
+      items: summaryItems
+      /!*items: [
+        { date:"21 Jan 23", "type-1":12, "type-2":11, "type-3":16, "type-4":2, "type-8":8 },
+        { date:"22 Jan 23", "type-1":51, "type-2":87, "type-3":86, "type-4":3, "type-8":9 },
+        { date:"23 Jan 23", "type-1":14, "type-2":66, "type-3":77, "type-4":4, "type-8":18 },
+        { date:"24 Jan 23", "type-1":7, "type-2":3, "type-3":63, "type-4":5, "type-8":28 },
+        { date:"25 Jan 23", "type-1":88, "type-2":55, "type-3":68, "type-4":6, "type-8":38 },
+        { date:"26 Jan 23", "type-1":172, "type-2":13, "type-3":6, "type-4":7, "type-8":48 }
+      ]*!/
+    }
+
+    return summary*/
+  },
+
+  async subscribe(params, socket){
+    const { name } = params
+    if(name){
+      socket.join(this.name)
+    }
+  },
+
+  async unsubscribe(params, socket){
+    const { name } = params
+    if(name){
+      socket.leave(this.name)
+    }
+  },
+
+  async downloadRows(params, socket){
+
+    const { preset } = params
+
+    const columns = []
+    preset.columns.forEach((column) => {
+      if(column.visible){
+        columns.push({ header: column.label, key: column.key, width: 15 })
+      }
+    })
+
+    const workbook = new Exceljs.Workbook();
+    const sheet = workbook.addWorksheet('Export ' + this.name);
+    sheet.columns = columns
+
+    let where = {}
+    let replacements = []
+    let order = [
+      [ 'updatedAt', 'desc' ],
+      [ 'id', 'desc' ],
+    ]
+
+    let attributeIncludes
+    if(this.getAttributeIncludes){
+      attributeIncludes = this.getAttributeIncludes(preset)
+    }
+
+    let attributes = { id:1, updatedAt:1 }
+    if(preset.columns){
+      let modelAttributes = this.model.getAttributes();
+      preset.columns.forEach((column) => {
+        if(column.visible && modelAttributes[column.key]){
+          attributes[column.key] = 1
+        }
+        else if(column.virtual){
+          switch(column.virtual.type){
+
+            case 'sql':
+              if(!Array.isArray(attributeIncludes)){
+                attributeIncludes = []
+              }
+
+              attributeIncludes.push([
+                Sequelize.literal(`(${column.virtual.value})`), column.key
+              ])
+              break
+          }
+        }
+      })
+    }
+    attributes = Object.keys(attributes)
+
+    if(preset.filters){
+      const { where:presetWhere } = this.getPresetFilterParams(preset)
+      where = {
+        ...where,
+        ...presetWhere
+      }
+    }
+
+    if(preset.sorts){
+      const { order:presetOrder } = this.getPresetSortParams(preset)
+      if(presetOrder){
+        order = presetOrder
+      }
+    }
+
+    if(preset.search){
+      const tableName = this.model.name
+      where = {
+        ...where,
+        [Op.and]: Sequelize.literal(`MATCH(\`${tableName}\`.tag) AGAINST (? IN BOOLEAN MODE)`)
+      }
+      replacements.push(preset.search)
+    }
+
+    if(this.downloadFilters){
+      await this.downloadFilters(params, where)
+    }
+
+    const rows = await this.model.findAll({
+      where,
+      attributes: {
+        ...attributes,
+        include: attributeIncludes
+      },
+      order,
+      replacements,
+      include: this.getModelIncludes ? this.getModelIncludes(preset) : undefined
+    })
+
+    rows.forEach((row) => {
+
+      const obj = {}
+      preset.columns.forEach((column) => {
+        if(column.visible){
+          switch(column.type){
+
+            case 'enum':
+              const enumValue = row[column.key]
+              const enumObj = column.typeParams.filter((_) => _.value === enumValue).pop()
+              const enumText = (enumObj ?? {}).text ?? enumValue
+              obj[column.key] = enumText
+              break
+
+            default:
+              obj[column.key] = row[column.key]
+              break
+          }
+        }
+      })
+      sheet.addRow(obj)
+    })
+
+    const filename = 'data-konsumen-' + dayjs().format('YYYYMMDDHHmm') + '.xlsx'
+    await workbook.xlsx.writeFile(process.env.ROOT_PATH + '/storage/files/downloads/' + filename);
+    return {
+      url: '/downloads/' + filename
+    }
+  },
+
+
+
+  async _load(params){
+
+    /*const listAcl = socket.auth.user.getAclv('customer', 'list')
+    if(listAcl === false){
+      throw new Error('Insufficient privilege')
+    }
+    else if(Array.isArray(listAcl.filters) && listAcl.filters.includes('user-customers')){
+      where = {
+        ...where,
+        referralType: {
+          [Op.in]: [ "App\\Models\\User", "user" ]
+        },
+        referralId: socket.auth.userId
+      }
+    }*/
+
+    const { afterItem, itemsPerPage = this.itemsPerPage ?? 24 } = params
+    const { preset = {} } = params
+    let where = {}
+    let replacements = []
+    let order = [
+      [ 'updatedAt', 'desc' ],
+      [ 'id', 'desc' ],
+    ]
+
+    let attributeIncludes
+    if(this.getAttributeIncludes){
+      attributeIncludes = this.getAttributeIncludes(preset)
+    }
+
+    let attributes = { id:1, updatedAt:1 }
+    if(preset.columns){
+      let modelAttributes = this.model.getAttributes();
+      preset.columns.forEach((column) => {
+        if(column.visible && modelAttributes[column.key]){
+          attributes[column.key] = 1
+        }
+        else if(column.virtual){
+          switch(column.virtual.type){
+
+            case 'sql':
+              if(!Array.isArray(attributeIncludes)){
+                attributeIncludes = []
+              }
+
+              attributeIncludes.push([
+                Sequelize.literal(`(${column.virtual.value})`), column.key
+              ])
+              break
+          }
+        }
+      })
+    }
+    attributes = Object.keys(attributes)
+
+    if(preset.filters){
+      const { where:presetWhere } = this.getPresetFilterParams(preset)
+      where = {
+        ...where,
+        ...presetWhere
+      }
+    }
+
+    if(preset.sorts){
+      const { order:presetOrder } = this.getPresetSortParams(preset)
+      if(presetOrder){
+        order = presetOrder
+      }
+    }
+
+    if(preset.search){
+      const tableName = this.model.name
+      where = {
+        ...where,
+        [Op.and]: Sequelize.literal(`MATCH(\`${tableName}\`.tag) AGAINST (? IN BOOLEAN MODE)`)
+      }
+      replacements.push(preset.search)
+    }
+
+    if(afterItem){
+      const sortWhere = this.getPresetSortWhereParams(order, afterItem)
+      where = {
+        ...where,
+        ...sortWhere
+      }
+    }
+
+    let derivedSql
+    const { rows:items, count } = await this.model.findAndCountAll({
+      where,
+      attributes: {
+        ...attributes,
+        include: attributeIncludes
+      },
+      order,
+      limit: itemsPerPage + 1,
+      replacements,
+      include: this.getModelIncludes ? this.getModelIncludes(preset) : undefined,
+      logging: (sql, queryObject, p) => {
+        derivedSql = sql
+      }
+    })
+    derivedSql = derivedSql.replace('Executing (default): ', '').replace('LIMIT ' + (this.itemsPerPage + 1), '').slice(0, -1)
+
+    const hasNext = items.length > itemsPerPage
+    if(hasNext){
+      items.splice(items.length - 1, 1)
+    }
+
+    /*let summary
+    if(!afterItem && preset.summary && preset.summary.enabled){
+      if(preset.summary.mode === 'map' && this.loadMapSummary){
+        summary = await this.loadMapSummary(preset, {
+          where,
+          replacements
+        })
+      }
+      else{
+        derivedSql = derivedSql.replace('Executing (default): ', '').replace('LIMIT ' + (this.itemsPerPage + 1), '').slice(0, -1)
+        summary = await this.loadSummary(preset, {
+          where,
+          replacements
+        }, derivedSql)
+      }
+    }*/
+
+    if(this.socket){
+      this.socket.joinWithArgs(this.channel, { preset })
+    }
+
+    return {
+      items,
+      hasNext,
+      count,
+      derivedSql,
+      where,
+      replacements
+    }
+  },
+
+  async loadBarSummary(summary, derivedSql){
+
+    if(!summary.bar) return
+
+    const { columns, rows, values } = summary.bar
+
+    if(!Array.isArray(columns) || columns.length !== 1 || !columns[0].key) return
+    if(!Array.isArray(rows) || rows.length !== 1 || !rows[0].key) return
+    if(!Array.isArray(values) || values.length !== 1 || !values[0].aggregrate) return
+
+    const col = columns[0]
+    let columnValues = []
+    let colKey
+    if(col.key !== '(none)'){
+      colKey = col.key
+      const [ _columnValues ] = await this.conn.query(`
+          SELECT
+            DISTINCT(${colKey}) AS cols
+          FROM (${derivedSql}) AS derived
+          ORDER BY cols ASC
+        `)
+
+      columnValues = _columnValues
+    }
+    if(columnValues.length > 100){
+      throw new Error('Too many columns')
+    }
+
+    const attributes = []
+    const group = []
+    const summaryColumns = [
+      /*{ key:"dfDate", label:"Date", width:"200px", visible:true },
+      { key:"type-1", label:"Type 1", type:"number", visible:true },
+      { key:"type-2", label:"Type 2", type:"number", visible:true },
+      { key:"type-3", label:"Type 3", type:"number", visible:true },
+      { key:"type-4", label:"Type 4", type:"number", visible:true },
+      { key:"type-8", label:"Type 8", type:"number", visible:true },*/
+    ]
+
+    const row = rows[0]
+    const rowKey = row.key
+    const rowLabel = this.columns[row.key].label
+    switch(row.format){
+      case 'date':
+        attributes.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d') as dfDate`)
+        group.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d')`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"D MMM" })
+        break
+
+      case 'month':
+        attributes.push(`DATE_FORMAT(${rowKey}, '%Y-%m') as dfDate`)
+        group.push(`DATE_FORMAT(${rowKey}, '%Y-%m')`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"MMM YYYY" })
+        break
+
+      case 'quarter':
+        attributes.push(`CONCAT(YEAR(${rowKey}), ' Q', QUARTER(${rowKey})) as dfDate`)
+        group.push(`CONCAT(YEAR(${rowKey}), ' Q', QUARTER(${rowKey}))`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"MMM YYYY" })
+        break
+
+      case 'year':
+        attributes.push(`DATE_FORMAT(${rowKey}, '%Y') as dfDate`)
+        group.push(`DATE_FORMAT(${rowKey}, '%Y')`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"YYYY" })
+        break
+
+      default:
+        attributes.push(`${rowKey} as dfDate`)
+        group.push(`${rowKey}`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true })
+        break
+    }
+
+    const value = values[0]
+    if(columnValues.length > 0){
+      columnValues.forEach((obj) => {
+        const columnValue = obj.cols
+
+        let columnLabel = (columnValue ?? '').toString()
+        const baseColumn = this.columns[colKey]
+        switch(baseColumn.type){
+
+          case 'enum':
+            const enumValue = baseColumn.typeParams.filter((_) => _.value === columnValue).pop()
+            if(enumValue) columnLabel = enumValue.text
+            break
+        }
+
+        switch(value.aggregrate){
+          case 'count':
+            const fn = columnValue === null ? `${colKey} is null` : `${colKey} = '${columnValue}'`
+            attributes.push(`SUM(IF(${fn}, 1, 0)) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+
+          case 'min':
+            attributes.push(`MIN(${colKey}) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+
+          case 'max':
+            attributes.push(`MAX(${colKey}) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+
+          case 'avg':
+            attributes.push(`AVG(${colKey}) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+        }
+      })
+    }
+    else{
+      switch(value.aggregrate) {
+        case 'count':
+        default:
+          attributes.push(`COUNT(*) as \`Count\``)
+          summaryColumns.push({ key:'Count', label:'Count', type:"number", visible:true, aggregrate:"count" })
+      }
+    }
+
+    let [ summaryItems ] = await this.conn.query(`
+      SELECT
+       ${attributes.join(', ')}
+      FROM (
+        ${derivedSql}
+      ) as t1
+      GROUP BY ${group[0]}
+      ORDER BY dfDate ASC
+    `)
+
+    if(this.columns[rowKey] && this.columns[rowKey].type === 'enum'){
+      summaryItems = summaryItems.map((_) => {
+
+        const typeParam = this.columns[rowKey].typeParams.filter((__) => __.value === _.dfDate).pop()
+        if(typeParam){
+          _.dfDate = typeParam.text
+        }
+
+        return _
+      })
+    }
+
+    const result = {
+      mode: "bar",
+      columns: summaryColumns,
+      items: summaryItems
+      /*items: [
+        { date:"21 Jan 23", "type-1":12, "type-2":11, "type-3":16, "type-4":2, "type-8":8 },
+        { date:"22 Jan 23", "type-1":51, "type-2":87, "type-3":86, "type-4":3, "type-8":9 },
+        { date:"23 Jan 23", "type-1":14, "type-2":66, "type-3":77, "type-4":4, "type-8":18 },
+        { date:"24 Jan 23", "type-1":7, "type-2":3, "type-3":63, "type-4":5, "type-8":28 },
+        { date:"25 Jan 23", "type-1":88, "type-2":55, "type-3":68, "type-4":6, "type-8":38 },
+        { date:"26 Jan 23", "type-1":172, "type-2":13, "type-3":6, "type-4":7, "type-8":48 }
+      ]*/
+    }
+
+    return result
+  },
+
+  async loadLineSummary(summary, derivedSql){
+
+    if(!summary.line) return
+
+    const { columns, rows, values } = summary.line
+
+    if(!Array.isArray(columns) || columns.length !== 1 || !columns[0].key) return
+    if(!Array.isArray(rows) || rows.length !== 1 || !rows[0].key) return
+    if(!Array.isArray(values) || values.length !== 1 || !values[0].aggregrate) return
+
+    const col = columns[0]
+    let columnValues = []
+    let colKey
+    if(col.key !== '(none)'){
+      colKey = col.key
+      const [ _columnValues ] = await this.conn.query(`
+          SELECT
+            DISTINCT(${colKey}) AS cols
+          FROM (${derivedSql}) AS derived
+          ORDER BY cols ASC
+        `)
+
+      columnValues = _columnValues
+    }
+    if(columnValues.length > 100){
+      throw new Error('Too many columns')
+    }
+
+    const attributes = []
+    const group = []
+    const summaryColumns = [
+      /*{ key:"dfDate", label:"Date", width:"200px", visible:true },
+      { key:"type-1", label:"Type 1", type:"number", visible:true },
+      { key:"type-2", label:"Type 2", type:"number", visible:true },
+      { key:"type-3", label:"Type 3", type:"number", visible:true },
+      { key:"type-4", label:"Type 4", type:"number", visible:true },
+      { key:"type-8", label:"Type 8", type:"number", visible:true },*/
+    ]
+
+    const row = rows[0]
+    const rowKey = row.key
+    const rowLabel = this.columns[row.key].label
+    switch(row.format){
+      case 'date':
+        attributes.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d') as dfDate`)
+        group.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d')`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"D MMM" })
+        break
+
+      case 'month':
+        attributes.push(`DATE_FORMAT(${rowKey}, '%Y-%m') as dfDate`)
+        group.push(`DATE_FORMAT(${rowKey}, '%Y-%m')`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"MMM YYYY" })
+        break
+
+      case 'quarter':
+        attributes.push(`CONCAT(YEAR(${rowKey}), ' Q', QUARTER(${rowKey})) as dfDate`)
+        group.push(`CONCAT(YEAR(${rowKey}), ' Q', QUARTER(${rowKey}))`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"MMM YYYY" })
+        break
+
+      case 'year':
+        attributes.push(`DATE_FORMAT(${rowKey}, '%Y') as dfDate`)
+        group.push(`DATE_FORMAT(${rowKey}, '%Y')`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"YYYY" })
+        break
+
+      default:
+        attributes.push(`${rowKey} as dfDate`)
+        group.push(`${rowKey}`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true })
+        break
+    }
+
+    const value = values[0]
+    if(columnValues.length > 0){
+      columnValues.forEach((obj) => {
+        const columnValue = obj.cols
+
+        let columnLabel = (columnValue ?? '').toString()
+        const baseColumn = this.columns[colKey]
+        switch(baseColumn.type){
+
+          case 'enum':
+            const enumValue = baseColumn.typeParams.filter((_) => _.value === columnValue).pop()
+            if(enumValue) columnLabel = enumValue.text
+            break
+        }
+
+        switch(value.aggregrate){
+          case 'count':
+            const fn = columnValue === null ? `${colKey} is null` : `${colKey} = '${columnValue}'`
+            attributes.push(`SUM(IF(${fn}, 1, 0)) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+
+          case 'min':
+            attributes.push(`MIN(${colKey}) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+
+          case 'max':
+            attributes.push(`MAX(${colKey}) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+
+          case 'avg':
+            attributes.push(`AVG(${colKey}) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+        }
+      })
+    }
+    else{
+      switch(value.aggregrate) {
+        case 'count':
+        default:
+          attributes.push(`COUNT(*) as \`Count\``)
+          summaryColumns.push({ key:'Count', label:'Count', type:"number", visible:true, aggregrate:"count" })
+      }
+    }
+
+    let [ summaryItems ] = await this.conn.query(`
+      SELECT
+       ${attributes.join(', ')}
+      FROM (
+        ${derivedSql}
+      ) as t1
+      GROUP BY ${group[0]}
+      ORDER BY dfDate ASC
+    `)
+
+    if(this.columns[rowKey] && this.columns[rowKey].type === 'enum'){
+      summaryItems = summaryItems.map((_) => {
+
+        const typeParam = this.columns[rowKey].typeParams.filter((__) => __.value === _.dfDate).pop()
+        if(typeParam){
+          _.dfDate = typeParam.text
+        }
+
+        return _
+      })
+    }
+
+    const result = {
+      mode: "line",
+      columns: summaryColumns,
+      items: summaryItems
+      /*items: [
+        { date:"21 Jan 23", "type-1":12, "type-2":11, "type-3":16, "type-4":2, "type-8":8 },
+        { date:"22 Jan 23", "type-1":51, "type-2":87, "type-3":86, "type-4":3, "type-8":9 },
+        { date:"23 Jan 23", "type-1":14, "type-2":66, "type-3":77, "type-4":4, "type-8":18 },
+        { date:"24 Jan 23", "type-1":7, "type-2":3, "type-3":63, "type-4":5, "type-8":28 },
+        { date:"25 Jan 23", "type-1":88, "type-2":55, "type-3":68, "type-4":6, "type-8":38 },
+        { date:"26 Jan 23", "type-1":172, "type-2":13, "type-3":6, "type-4":7, "type-8":48 }
+      ]*/
+    }
+
+    return result
+  },
+
+  async loadTableSummary(summary, derivedSql){
+
+    if(!summary.table) return
+
+    const { columns, rows, values } = summary.table
+
+    if(!Array.isArray(columns) || columns.length !== 1 || !columns[0].key) return
+    if(!Array.isArray(rows) || rows.length !== 1 || !rows[0].key) return
+    if(!Array.isArray(values) || values.length !== 1 || !values[0].aggregrate) return
+
+    const col = columns[0]
+    let columnValues = []
+    let colKey
+    if(col.key !== '(none)'){
+      colKey = col.key
+      const [ _columnValues ] = await this.conn.query(`
+          SELECT
+            DISTINCT(${colKey}) AS cols
+          FROM (${derivedSql}) AS derived
+          ORDER BY cols ASC
+        `)
+
+      columnValues = _columnValues
+    }
+    if(columnValues.length > 100){
+      throw new Error('Too many columns')
+    }
+
+    const attributes = []
+    const group = []
+    const summaryColumns = [
+      /*{ key:"dfDate", label:"Date", width:"200px", visible:true },
+      { key:"type-1", label:"Type 1", type:"number", visible:true },
+      { key:"type-2", label:"Type 2", type:"number", visible:true },
+      { key:"type-3", label:"Type 3", type:"number", visible:true },
+      { key:"type-4", label:"Type 4", type:"number", visible:true },
+      { key:"type-8", label:"Type 8", type:"number", visible:true },*/
+    ]
+
+    const row = rows[0]
+    const rowKey = row.key
+    const rowLabel = this.columns[row.key].label
+    switch(row.format){
+      case 'date':
+        attributes.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d') as dfDate`)
+        group.push(`DATE_FORMAT(${rowKey}, '%Y-%m-%d')`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"D MMM" })
+        break
+
+      case 'month':
+        attributes.push(`DATE_FORMAT(${rowKey}, '%Y-%m') as dfDate`)
+        group.push(`DATE_FORMAT(${rowKey}, '%Y-%m')`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"MMM YYYY" })
+        break
+
+      case 'quarter':
+        attributes.push(`CONCAT(YEAR(${rowKey}), ' Q', QUARTER(${rowKey})) as dfDate`)
+        group.push(`CONCAT(YEAR(${rowKey}), ' Q', QUARTER(${rowKey}))`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"MMM YYYY" })
+        break
+
+      case 'year':
+        attributes.push(`DATE_FORMAT(${rowKey}, '%Y') as dfDate`)
+        group.push(`DATE_FORMAT(${rowKey}, '%Y')`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"YYYY" })
+        break
+
+      default:
+        attributes.push(`${rowKey} as dfDate`)
+        group.push(`${rowKey}`)
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true })
+        break
+    }
+
+    const value = values[0]
+    if(columnValues.length > 0){
+      columnValues.forEach((obj) => {
+        const columnValue = obj.cols
+
+        let columnLabel = (columnValue ?? '').toString()
+        const baseColumn = this.columns[colKey]
+        switch(baseColumn.type){
+
+          case 'enum':
+            const enumValue = baseColumn.typeParams.filter((_) => _.value === columnValue).pop()
+            if(enumValue) columnLabel = enumValue.text
+            break
+        }
+
+        switch(value.aggregrate){
+          case 'count':
+            const fn = columnValue === null ? `${colKey} is null` : `${colKey} = '${columnValue}'`
+            attributes.push(`SUM(IF(${fn}, 1, 0)) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+
+          case 'min':
+            attributes.push(`MIN(${colKey}) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+
+          case 'max':
+            attributes.push(`MAX(${colKey}) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+
+          case 'avg':
+            attributes.push(`AVG(${colKey}) as \`${colKey}-${columnValue}\``)
+            summaryColumns.push({ key:colKey + "-" + columnValue, label:columnLabel, visible:true, aggregrate:"count" })
+            break
+        }
+      })
+    }
+    else{
+      switch(value.aggregrate) {
+        case 'count':
+        default:
+          attributes.push(`COUNT(*) as \`Count\``)
+          summaryColumns.push({ key:'Count', label:'Count', type:"number", visible:true, aggregrate:"count" })
+      }
+    }
+
+    let [ summaryItems ] = await this.conn.query(`
+      SELECT
+       ${attributes.join(', ')}
+      FROM (
+        ${derivedSql}
+      ) as t1
+      GROUP BY ${group[0]}
+      ORDER BY dfDate ASC
+    `)
+
+    if(this.columns[rowKey] && this.columns[rowKey].type === 'enum'){
+      summaryItems = summaryItems.map((_) => {
+
+        const typeParam = this.columns[rowKey].typeParams.filter((__) => __.value === _.dfDate).pop()
+        if(typeParam){
+          _.dfDate = typeParam.text
+        }
+
+        return _
+      })
+    }
+
+    const result = {
+      mode: "table",
+      columns: summaryColumns,
+      items: summaryItems
+      /*items: [
+        { date:"21 Jan 23", "type-1":12, "type-2":11, "type-3":16, "type-4":2, "type-8":8 },
+        { date:"22 Jan 23", "type-1":51, "type-2":87, "type-3":86, "type-4":3, "type-8":9 },
+        { date:"23 Jan 23", "type-1":14, "type-2":66, "type-3":77, "type-4":4, "type-8":18 },
+        { date:"24 Jan 23", "type-1":7, "type-2":3, "type-3":63, "type-4":5, "type-8":28 },
+        { date:"25 Jan 23", "type-1":88, "type-2":55, "type-3":68, "type-4":6, "type-8":38 },
+        { date:"26 Jan 23", "type-1":172, "type-2":13, "type-3":6, "type-4":7, "type-8":48 }
+      ]*/
+    }
+
+    return result
+  },
+
+
+
+  getPresetFilterParams(preset){
+
+    let where = {}
+    let replacements = []
+
+    if(preset.filters){
+
+      //console.log(util.inspect(preset.filters, false, null, true /* enable colors */))
+
+      preset.filters.forEach((filter) => {
+
+        if(!filter.enabled) return
+
+        const key = filter.key
+        const type = filter.type
+        const operand = filter.operand === 'or' ? 'or' : 'and'
+        const items = filter.filters ?? []
+
+        let whereValue = []
+        switch(type){
+
+          case 'date':
+            items.forEach((item) => {
+              if(!('operator' in item) || (item.operator === 'between' && !('value' in item))) return
+
+              const operator = item.operator
+              const value = item.value
+
+              switch(operator){
+
+                case 'today':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.eq]: dayjs().format('YYYY-MM-DD'),
+                  }
+                  break
+
+                case 'thisWeek':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gte]: dayjs().startOf('week').format('YYYY-MM-DD 00:00:00'),
+                    [Op.lt]: dayjs().endOf('week').format('YYYY-MM-DD 23:59:59'),
+                  }
+                  break
+
+                case 'weekAgo':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gte]: dayjs().add(-1, 'week').format('YYYY-MM-DD 00:00:00'),
+                    [Op.lt]: dayjs().format('YYYY-MM-DD 23:59:59'),
+                  }
+                  break
+
+                case 'thisMonth':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gte]: dayjs().format('YYYY-MM-01 00:00:00'),
+                    [Op.lt]: dayjs().endOf('month').format('YYYY-MM-DD 23:59:59'),
+                  }
+                  break
+
+                case 'monthAgo':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gte]: dayjs().add(-1, 'month').format('YYYY-MM-DD 00:00:00'),
+                    [Op.lt]: dayjs().format('YYYY-MM-DD 23:59:59'),
+                  }
+                  break
+
+                case 'lastMonth':
+                  whereValue = {
+                    [Op.gte]: dayjs().add(-1, 'month').format('YYYY-MM-01 00:00:00'),
+                    [Op.lte]: dayjs().add(-1, 'month').endOf('month').format('YYYY-MM-DD 23:59:59'),
+                  }
+                  break
+
+                case 'thisYear':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gte]: dayjs().startOf('year').format('YYYY-MM-DD 00:00:00'),
+                    [Op.lt]: dayjs().endOf('year').format('YYYY-MM-DD 23:59:59'),
+                  }
+                  break
+
+                case 'lastYear':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gte]: dayjs().add(-1, 'year').startOf('year').format('YYYY-MM-DD 00:00:00'),
+                    [Op.lt]: dayjs().add(-1, 'year').endOf('year').format('YYYY-MM-DD 23:59:59'),
+                  }
+                  break
+
+                case 'between':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gte]: dayjs(value[0]).format('YYYY-MM-DD 00:00:00'),
+                    [Op.lt]: dayjs(value[1]).format('YYYY-MM-DD 23:59:59'),
+                  }
+                  break
+              }
+            })
+            break
+
+          case 'enum':
+            items.forEach((item) => {
+              if(!('value' in item)) return
+
+              const value = item.value ?? []
+              whereValue = {
+                ...whereValue,
+                [Op.in]: value
+              }
+            })
+            break
+
+          case 'number':
+          case 'currency':
+            items.forEach((item) => {
+              if(!('operator' in item) || !('value' in item)) return
+
+              const operator = item.operator
+              const value = item.value
+
+              switch(operator){
+
+                case '>':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gt]: parseFloat(value)
+                  }
+                  break
+
+                case '>=':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.gte]: parseFloat(value)
+                  }
+                  break
+
+                case '=':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.eq]: parseFloat(value)
+                  }
+                  break
+
+                case '<':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.lt]: parseFloat(value)
+                  }
+                  break
+
+                case '<=':
+                  whereValue = {
+                    ...whereValue,
+                    [Op.lte]: parseFloat(value)
+                  }
+                  break
+              }
+            })
+            break
+
+          default:
+            items.forEach((item) => {
+              if(!('operator' in item) ||
+                  ([ 'startsWith', 'endsWith', 'contains', '=' ].includes(item.operator) && !'value' in item))
+                return
+
+              const operator = item.operator
+              const value = item.value
+
+              switch(operator){
+
+                case 'startsWith':
+                  whereValue.push({
+                    [Op.like]: `${value}%`
+                  })
+                  break
+
+                case 'endsWith':
+                  whereValue.push({
+                    [Op.like]: `%${value}`
+                  })
+                  break
+
+                case 'contains':
+                  whereValue.push({
+                    [Op.like]: `%${value}%`
+                  })
+                  break
+
+                case '=':
+                  whereValue.push({
+                    [Op.eq]: value
+                  })
+                  break
+
+                case 'empty':
+                  whereValue.push({
+                    [Op.or]: [
+                      { [Op.eq]: null },
+                      { [Op.eq]: '' },
+                    ]
+                  })
+                  break
+
+                case 'notEmpty':
+                  whereValue.push({
+                    [Op.and]: [
+                      { [Op.ne]: null },
+                      { [Op.ne]: '' },
+                    ]
+                  })
+                  break
+
+                case 'length':
+                  break
+
+                case 'regex':
+                  whereValue.push({
+                    [Op.regexp]: value
+                  })
+                  break
+              }
+            })
+            break
+        }
+
+        switch(operand){
+
+          case 'or':
+            where = {
+              ...where,
+              [key]: {
+                [Op.or]: whereValue
+              }
+            }
+            break
+
+          default:
+            where = {
+              ...where,
+              [key]: {
+                [Op.and]: whereValue
+              }
+            }
+            break
+        }
+      })
+    }
+
+    //console.log(util.inspect(where, false, null, true /* enable colors */))
+
+    /*console.log(util.inspect(preset.filters, false, null, true /!* enable colors *!/))
+    console.log(where)
+    console.log(replacements)*/
+
+    return {
+      where,
+      replacements
+    }
+  },
+
+  getPresetSortParams(preset){
+
+    if(preset.sorts && preset.sorts.length > 0){
+      let order = []
+      preset.sorts.forEach((sort) => {
+        const key = sort.key
+        const type = sort.type === 'desc' ? 'desc' : 'asc'
+        order.push([ key, type ])
+      })
+      order.push([ 'id', 'desc' ])
+
+      return {
+        order
+      }
+    }
+    return {}
+  },
+
+  getPresetSortWhereParams(order, afterItem){
+
+    if(order.filter((_) => _[0] === 'id').length <= 0){
+      order.push([ 'id', 'desc' ])
+    }
+
+    const opOr = []
+    for(let i = 0 ; i < order.length ; i++){
+
+      const obj = order[i]
+
+      const exp = {}
+      for(let j = 0 ; j < i ; j++){
+        exp[order[j][0]] = afterItem[order[j][0]]
+      }
+      exp[obj[0]] = obj[1] === 'desc' ? { [Op.lt]:afterItem[obj[0]] } : { [Op.gt]:afterItem[obj[0]] }
+
+      if(Object.keys(exp).length === 1){
+        opOr.push(exp)
+      }
+      else{
+        opOr.push({
+          [Op.and]: exp
+        })
+      }
+    }
+
+    let sortWhere = {}
+    if(opOr.length > 0){
+      sortWhere = {
+        [Op.or]: opOr
+      }
+    }
+    return sortWhere
+  },
+
+
+
+  async onHooks(model, event, items, socket){
+
+    switch(event){
+      case 'destroy':
+      case 'remove':
+      default:
+        socket.emit(model, event, items)
+        break
+    }
+  }
+
+
+
+}
+
+module.exports = ListPage1