waibu-db 2.14.0 → 2.15.0

package/extend/bajo/intl/en-US.json

@@ -38,6 +38,8 @@
   "ndjson": "NDJSON",
   "dataValue": "Data value",
   "suppressedError": "Error occured and suppressed. Please check error log for details",
+  "queryHint%s": "Search by %s",
+  "noAttachmentFound": "No attachment found",
   "op": {
     "eq": "=",
     "neq": "≠",

package/extend/bajo/intl/id.json

@@ -38,6 +38,8 @@
   "ndjson": "NDJSON",
   "dataValue": "Nilai data",
   "suppressedError": "Kesalahan terjadi dan tidak ditampilkan. Silahkan cek log kesalahan untuk detilnya",
+  "queryHint%s": "Cari berdasarkan %s",
+  "noAttachmentFound": "Tidak ada lampiran ditemukan",
   "op": {
     "eq": "=",
     "neq": "≠",

package/extend/bajoTemplate/partial/crud/_details-btns.html

@@ -1,29 +1,29 @@
 <c:grid-row gutter="2">
   <c:grid-col col="6-lg">
-    <% if (!schema.view.control.noBackBtn) { %>
-    <c:wdb-btn-back href="<%= schema.view.control.backHref ?? 'undefined' %>" />
+    <% if (!_.get(schema, 'view.control.wdbBtnBack.disabled')) { %>
+    <c:wdb-btn-back href="<%= _.get(schema, 'view.control.wdbBtnBack.href', 'undefined') %>" />
     <% } %>
     <% if (schema.disabled.includes('remove') && schema.disabled.includes('update')) { %>
-      <% if (!schema.view.control.noExportBtn) { %>
+      <% if (!_.get(schema, 'view.control.wdbBtnExport.disabled')) { %>
       <c:wdb-btn-export selector="#main-form" handler="details" launch-margin="start-1" />
       <% } %>
     <% } else { %>
     <c:btn-group margin="start-1">
-      <% if (!schema.view.control.noEditBtn) { %>
-      <c:wdb-btn-edit href="<%= schema.view.control.editHref ?? 'undefined' %>" />
+      <% if (!_.get(schema, 'view.control.wdbBtnEdit.disabled')) { %>
+      <c:wdb-btn-edit href="<%= _.get(schema, 'view.control.wdbBtnEdit.href', 'undefined') %>" />
       <% } %>
-      <% if (!schema.view.control.noCloneBtn) { %>
-      <c:wdb-btn-clone href="<%= schema.view.control.cloneHref ?? 'undefined' %>" />
+      <% if (!_.get(schema, 'view.control.wdbBtnClone.disabled')) { %>
+      <c:wdb-btn-clone href="<%= _.get(schema, 'view.control.wdbBtnClone.href', 'undefined') %>" />
       <% } %>
-      <% if (!schema.view.control.noExportBtn) { %>
+      <% if (!_.get(schema, 'view.control.wdbBtnExport.disabled')) { %>
       <c:wdb-btn-export selector="#main-form" handler="details" launch-on-end no-save/>
       <% } %>
     </c:btn-group>
     <% } %>
   </c:grid-col>
   <c:grid-col col="6-lg" flex="justify-content:end-lg align-items:center">
-    <% if (!schema.view.control.noDeleteBtn) { %>
-    <c:wdb-btn-delete href="<%= schema.view.control.deleteHref ?? 'undefined' %>" />
+    <% if (!_.get(schema, 'view.control.wdbBtnDelete.disabled')) { %>
+    <c:wdb-btn-delete href="<%= _.get(schema, 'view.control.wdbBtnDelete.href', 'undefined') %>" />
     <% } %>
   </c:grid-col>
 </c:grid-row>

package/extend/bajoTemplate/partial/crud/_edit-btns.html

@@ -1,28 +1,28 @@
 <c:grid-row gutter="2">
   <c:grid-col col="6-lg">
-    <% if (!schema.view.control.noBackBtn) { %>
-    <c:wdb-btn-back href="<%= schema.view.control.backHref ?? 'undefined' %>"/>
+    <% if (!_.get(schema, 'view.control.wdbBtnBack.disabled')) { %>
+    <c:wdb-btn-back href="<%= _.get(schema, 'view.control.wdbBtnBack.href', 'undefined') %>"/>
     <% } %>
     <c:btn-group margin="start-1">
-      <% if (!schema.view.control.noDetailsBtn) { %>
-      <c:wdb-btn-details href="<%= schema.view.control.detailsHref ?? 'undefined' %>" />
+      <% if (!_.get(schema, 'view.control.wdbBtnDetails.disabled')) { %>
+      <c:wdb-btn-details href="<%= _.get(schema, 'view.control.wdbBtnDetails.href', 'undefined') %>" />
       <% } %>
-      <% if (!schema.view.control.noCloneBtn) { %>
-      <c:wdb-btn-clone href="<%= schema.view.control.cloneHref ?? 'undefined' %>" />
+      <% if (!_.get(schema, 'view.control.wdbBtnClone.disabled')) { %>
+      <c:wdb-btn-clone href="<%= _.get(schema, 'view.control.wdbBtnClone.href', 'undefined') %>" />
       <% } %>
-      <% if (!schema.view.control.noExportBtn) { %>
+      <% if (!_.get(schema, 'view.control.wdbBtnExport.disabled')) { %>
       <c:wdb-btn-export selector="#main-form" handler="edit" launch-on-end no-save />
       <% } %>
     </c:btn-group>
   </c:grid-col>
   <c:grid-col col="6-lg" flex="justify-content:end-lg align-items:center">
-    <% if (!schema.view.control.noDeleteBtn) { %>
-    <c:wdb-btn-delete href="<%= schema.view.control.deleteHref ?? 'undefined' %>"/>
+    <% if (!_.get(schema, 'view.control.wdbBtnDelete.disabled')) { %>
+    <c:wdb-btn-delete href="<%= _.get(schema, 'view.control.wdbBtnDelete.href', 'undefined') %>"/>
     <% } %>
-    <% if (!schema.view.control.noResetBtn) { %>
+    <% if (!_.get(schema, 'view.control.wdbBtnReset.disabled')) { %>
     <c:btn type="reset" color="secondary" t:content="reset" margin="start-2"/>
     <% } %>
-    <% if (!schema.view.control.noSubmitBtn) { %>
+    <% if (!_.get(schema, 'view.control.wdbBtnSubmit.disabled')) { %>
     <c:btn type="submit" color="primary" t:content="submit" margin="start-2"/>
     <% } %>
   </c:grid-col>

package/extend/bajoTemplate/partial/crud/_list-attachment.html

@@ -1,9 +1,15 @@
-<% for (const att of attachments) { %>
-<c:grid-col col="4-lg 6-md">
-  <% if (attr.readonly) { %>
-  <a href="<%= decodeURI(att.url) %>" target="_blank"><%= att.fileName %></a>
-  <% } else { %>
-  <c:form-check x-model="selected" value="<%= att.fullPath %>" label="<a href='<%= att.url %>' target='_blank'><%= att.fileName %></a>" />
+<% if (attachments.length === 0) { %>
+  <c:grid-col col="12">
+    <c:alert color="warning" t:content="noAttachmentFound" margin="bottom-1" />
+  </c:grid-col>
+<% } else { %>
+  <% for (const att of attachments) { %>
+  <c:grid-col col="4-lg 6-md">
+    <% if (attr.readonly) { %>
+    <a href="<%= decodeURI(att.url) %>" target="_blank"><%= att.fileName %></a>
+    <% } else { %>
+    <c:form-check x-model="selected" value="<%= att.fullPath %>" label="<a href='<%= att.url %>' target='_blank'><%= att.fileName %></a>" />
+    <% } %>
+  </c:grid-col>
   <% } %>
-</c:grid-col>
-<% } %>
+ <% } %>

package/extend/waibuBootstrap/theme/component/wdb-base.js

@@ -6,15 +6,15 @@ async function wdbBase () {
       const { get } = this.app.lib._
       this.schema = get(this, 'component.locals.schema', {})
       this.formData = get(this, 'component.locals.form', {})
-      this.model = getModel(this.schema.name)
+      this.model = getModel(this.schema.name, true)
     }
 
     getRef = ({ field, refName, returning } = {}) => {
       const { get } = this.app.lib._
-      if (!this.schema) return {}
+      if (!this.model) return {}
       const prop = this.model.getProperty(field)
       if (!prop) return {}
-      refName = refName ?? this.params.attr['x-ref'] ?? field.slice(0, -2)
+      if (!refName && field.endsWith('Id')) refName = field.slice(0, -2)
       const key = this.params.attr.refName ?? refName
       const ref = get(prop, `ref.${key}`, {})
       if (returning === 'all') return { ref, key }
@@ -23,11 +23,27 @@ async function wdbBase () {
     }
 
     getRefValue = ({ field, data, labelField, refName } = {}) => {
-      const { isEmpty } = this.app.lib._
+      const { get, isEmpty } = this.app.lib._
       const { ref, key } = this.getRef({ field, refName, returning: 'all' })
       if (isEmpty(ref)) return undefined
       labelField = labelField ?? ref.labelField ?? 'id'
-      return (data ?? this.formData)._ref[key][labelField]
+      return (get(data ?? this.formData, `_ref.${key}.${labelField}`))
+    }
+
+    getRefName = (field) => {
+      const { get } = this.app.lib._
+      let refName = get(this.schema, `view.widget.${field}.attr.ref-name`, this.params.attr.refName)
+      if (!refName && this.params.attr[field] && this.params.attr[field].endsWith('Id')) refName = this.params.attr[field].slice(0, -2)
+      return refName
+    }
+
+    getSetting = (key, defaultValue) => {
+      const { req } = this.component
+      const { get, camelCase } = this.app.lib._
+      const widgetName = camelCase(this.constructor.name)
+      key = key.replaceAll('{self}', widgetName)
+      const config = req.getSetting(`${this.plugin.ns}:${key}`, defaultValue)
+      return get(this.schema, `view.${key}`, config)
     }
   }
 }

package/extend/waibuBootstrap/theme/component/widget/btn-columns.js

@@ -25,7 +25,7 @@ async function btnColumns () {
         let prop = find(schema.properties, { name: f })
         if (!prop) prop = find(schema.view.calcFields, { name: f })
         if (!prop) continue
-        const attr = { 'x-model': 'selected', label: req.t(get(schema, `view.label.${f}`, `field.${f}`)), value: f }
+        const attr = { 'x-model': 'selected', label: req.t(get(schema, `view.label.${f}`, `field.${f}`)), value: f, labelText: 'nowrap' }
         if (fields.includes(f)) attr.checked = true
         items.push(await this.component.buildTag({ tag: 'formCheck', attr }))
       }
@@ -39,17 +39,27 @@ async function btnColumns () {
         $refs.apply.href = '${href}&${qsKey.fields}=' + selected.join(',')
         $watch('selected', v => {
           $refs.apply.href = '${href}&${qsKey.fields}=' + v.join(',')
+          if (v.length === 0) $refs.apply.classList.add('disabled')
+          else $refs.apply.classList.remove('disabled')
         })
       ">`)
       this.params.attr.menuPrepend = Buffer.from(menuPrepend.join('\n')).toString('base64')
-      const attr = { size: 'sm', 'x-ref': 'apply', margin: 'top-2', color: this.params.attr.applyColor ?? 'primary', icon: this.params.attr.applyIcon ?? 'arrowsStartEnd', href }
-      let menuAppend = await this.component.buildTag({ tag: 'btn', attr, html: req.t('apply') })
-      menuAppend += '\n</form>'
-      this.params.attr.menuAppend = Buffer.from(menuAppend).toString('base64')
+      const btnColor = this.params.attr.applyColor ?? 'primary'
+      const sentences = [
+        '<c:div flex="justify-content:between" margin="top-2" >',
+        `  <c:btn size="sm" x-ref="apply" color="${btnColor}" href="${href}">${req.t('apply')}</c:btn>`,
+        '  <c:btn-group>',
+        `    <c:btn size="sm" color="${btnColor}-outline" icon="checkAll" @click="selected = all" />`,
+        `    <c:btn size="sm" color="${btnColor}-outline" icon="remove" @click="selected = []" />`,
+        '  </c:btn-group>',
+        '</c:div>'
+      ]
+      const menuAppend = await this.component.buildSentence(sentences, this.component.locals)
+      this.params.attr.menuAppend = Buffer.from(menuAppend + '\n</form>').toString('base64')
       this.params.attr.autoClose = 'outside'
       this.params.attr.triggerColor = this.params.attr.color
       this.params.attr.menuDir = this.params.attr.menuDir ?? 'end'
-      this.params.attr.menuMax = this.params.attr.menuMax ?? '20'
+      this.params.attr.menuMax = this.params.attr.menuMax ?? this.getSetting('control.{self}.menuMax')
       const html = [...items]
       this.params.html = await this.component.buildTag({ tag: 'dropdown', attr: this.params.attr, html: html.join('\n') })
       this.params.noTag = true

package/extend/waibuBootstrap/theme/component/widget/btn-export.js

@@ -61,7 +61,7 @@ async function btnExport () {
               }
               item[key] = value
             }
-            return this.ftype === 'csv' ? CSVJSON.json2csv(item) : JSON.stringify(item)
+            return this.ftype === 'csv' ? CSVJSON.json2csv(item) : JSON.stringify(item, null, 2)
           },
           extractTable (selector) {
             let items = []
@@ -98,7 +98,7 @@ async function btnExport () {
               }
               items.push(item)
             }
-            return this.ftype === 'csv' ? CSVJSON.json2csv(items) : JSON.stringify(items)
+            return this.ftype === 'csv' ? CSVJSON.json2csv(items) : JSON.stringify(items, null, 2)
           },
           async submit () {
             const instance = wbs.getInstance('Modal', $refs.export)

package/extend/waibuBootstrap/theme/component/widget/form.js

@@ -8,19 +8,18 @@ async function form () {
       const { get, find, filter, forOwn, isEmpty } = this.app.lib._
       const { base64JsonEncode } = this.app.waibu
       const { req } = this.component
-      const schema = get(this, 'component.locals.schema', {})
       const data = get(this, 'component.locals.form', {})
       const body = []
-      const xModels = get(schema, 'view.x.model', [])
-      const xOns = get(schema, 'view.x.on', [])
-      for (const l of schema.view.layout) {
-        const fields = filter(l.fields, f => schema.view.fields.includes(f))
+      const xModels = get(this.schema, 'view.x.model', [])
+      const xOns = get(this.schema, 'view.x.on', [])
+      for (const l of this.schema.view.layout) {
+        const fields = filter(l.fields, f => this.schema.view.fields.includes(f))
         if (fields.length === 0) continue
-        body.push(`<c:fieldset ${schema.view.card === false ? '' : 'card'} ${l.name[0] !== '_' ? ('t:legend="' + l.name + '"') : ''} grid-gutter="2">`)
+        body.push(`<c:fieldset ${this.schema.view.card === false ? '' : 'card'} ${l.name[0] !== '_' ? ('t:legend="' + l.name + '"') : ''} grid-gutter="2">`)
         for (const f of fields) {
-          const w = schema.view.widget[f]
-          let prop = find(schema.properties, { name: f })
-          if (!prop) prop = find(schema.view.calcFields, { name: f })
+          const w = this.schema.view.widget[f]
+          let prop = find(this.schema.properties, { name: f })
+          if (!prop) prop = find(this.schema.view.calcFields, { name: f })
           if (!prop) continue
           const attr = [`x-ref="${w.name}"`]
           if (xModels.includes(w.name)) attr.push(`x-model="${w.name}"`)
@@ -36,9 +35,14 @@ async function form () {
           const attributes = `${w.attr.label ? ('t:label="' + w.attr.label + '"') : ''} label-floating name="${w.name}" ${attr.join(' ')}`
           if (w.component === 'form-plaintext' || this.params.attr.method !== 'POST') {
             let value
-            if (schema.view.valueFormatter[f]) value = await schema.view.valueFormatter[f].call(this, data[f], data, { req })
-            else if (prop.ref) value = this.getRefValue({ field: f, labelField: w.attr.labelField })
-            body.push(`<c:${w.component} ${attributes} data-type="${prop.type}" ${value ? `value="${value}"` : ''} />`)
+            let link
+            if (this.schema.view.formatValue[f]) value = await this.schema.view.formatValue[f].call(this, data[f], data, { req })
+            else if (prop.ref) {
+              value = this.getRefValue({ field: f, labelField: w.attr.labelField, refName: this.getRefName(f) })
+              const format = get(this.schema, `view.format.${f}`)
+              if (format && !isEmpty(value)) link = await format.call(this.model, value, data, { linkOnly: true })
+            }
+            body.push(`<c:${w.component} ${attributes} data-type="${prop.type}" ${value ? `value="${value}"` : ''} ${link ? `href="${link}"` : ''} />`)
           } else if (prop.ref) {
             body.push(`<c:wdb-lookup-select ${attributes} />`)
           } else {
@@ -49,9 +53,9 @@ async function form () {
       }
       const html = await this.component.buildSentence(body, this.component.locals)
       this.params.html = `${html}\n${this.params.html}`
-      const xData = get(schema, 'view.x.data', '')
+      const xData = get(this.schema, 'view.x.data', '')
       this.params.attr['x-data'] = isEmpty(xData) ? '' : `{ ${xData} }`
-      this.params.attr['x-init'] = get(schema, 'view.x.init', '')
+      this.params.attr['x-init'] = get(this.schema, 'view.x.init', '')
 
       this.params.tag = this.params.attr.tag ?? 'form'
     }

package/extend/waibuBootstrap/theme/component/widget/lookup-select.js

@@ -9,18 +9,16 @@ async function lookupSelect () {
       this.params.noTag = true
     }
 
-    returnEmpty = () => {
-      this.params.html = ''
-    }
-
     build = async () => {
       const { isEmpty, get, omit, set, camelCase, kebabCase } = this.app.lib._
       const { parseQuery } = this.app.dobo
       const { base64JsonEncode } = this.app.waibu
-      let refName = get(this.schema, `view.widget.${this.params.attr.name}.attr.refName`, this.params.attr.refName)
-      if (!refName && this.params.attr.name.endsWith('Id')) refName = this.params.attr.name.slice(0, -2)
-      const ref = this.getRef({ field: this.params.attr.name, refName })
-      if (isEmpty(ref)) return this.returnEmpty()
+      const ref = this.getRef({ field: this.params.attr.name, refName: this.getRefName(this.params.attr.name) })
+      if (isEmpty(ref)) {
+        const sentence = `<c:form-input ${Object.entries(this.params.attr).map(([k, v]) => `${kebabCase(k)}="${v}"`).join(' ')} />`
+        this.params.html = this.component.buildSentence(sentence, this.component.locals)
+        return
+      }
 
       this.params.attr.url = this.params.attr.url ?? `waibuDb.restapi:/lookup/${kebabCase(ref.model)}`
       const omitted = ['url', 'searchField', 'labelField', 'valueField']

package/extend/waibuBootstrap/theme/component/widget/query.js

@@ -7,6 +7,7 @@ async function query () {
     build = async () => {
       const { req } = this.component
       const { generateId } = this.app.lib.aneka
+      const { join } = this.app.bajo
       const { jsonStringify } = this.app.waibuMpa
       const { find, get, without, isEmpty, filter, upperFirst } = this.app.lib._
       const qsKey = this.app.waibu.config.qsKey
@@ -60,8 +61,11 @@ async function query () {
       }
       this.params.noTag = true
       const container = this.params.attr.modal ? 'modal' : 'drawer'
+      const scanables = (this.model ? this.model.scanables : []).map(item => req.t(`field.${item}`))
+      let placeholder = this.params.attr.placeholder
+      if (!placeholder) placeholder = scanables.length > 0 ? req.t('queryHint%s', join(scanables, { lastSeparator: 'or' })) : req.t('query')
       this.params.html = await this.component.buildSentence(`
-        <c:form-input type="search" t:placeholder="query" id="${id}" x-data="{ query: '' }" x-init="
+        <c:form-input type="search" placeholder="${placeholder}" id="${id}" x-data="{ query: '' }" x-init="
           const url = new URL(window.location.href)
           query = url.searchParams.get('${qsKey.query}') ?? ''
         " x-model="query" @on-query.window="query = $event.detail ?? ''" @keyup.enter="$dispatch('on-submit')">

package/extend/waibuBootstrap/theme/component/widget/table.js

@@ -21,31 +21,10 @@ async function table () {
       return get(schema, 'view.noWrap', []).includes(field)
     }
 
-    _defFormatter = async ({ req, key, value, data, schema, params }) => {
-      const { get, find, camelCase, isEmpty } = this.app.lib._
-      const { escape } = this.app.waibu
-      const prop = find(schema.properties, { name: key })
-      if (!prop) return value
-      if (prop.type === 'boolean') {
-        value = (await this.component.buildTag({ tag: 'icon', attr: { name: `circle${data[key] ? 'Check' : 'Cross'}` } })) +
-          ' ' + (req.t(data[key] ? 'Yes' : 'No'))
-      } else if (prop.values) {
-        const values = typeof prop.values === 'string' ? this.propValues[key] : prop.values
-        const item = find(values, { value }) ?? {}
-        const ttext = camelCase(`${prop.name} ${item.text}`)
-        value = escape(req.format(!isEmpty(item) ? (req.te(ttext) ? req.t(ttext) : item.text) : value, prop.type))
-        if (item && !params.attr.noDataValueRef && !isEmpty(data[key])) value += ` <sup><a href="#" title="${req.t('dataValue')}: ${data[key]}">*</a></sup>`
-      } else if (['string', 'text'].includes(prop.type)) {
-        if (!get(schema, 'view.noEscape', []).includes(key)) value = escape(value)
-      }
-      return value
-    }
-
     build = async () => {
       const { callHandler } = this.app.bajo
       const { req } = this.component
       const { escape, attrToArray } = this.app.waibu
-      const { formatRecord } = this.app.waibuDb
       const { groupAttrs } = this.app.waibuMpa
       const { get, omit, set, find, isEmpty, without, merge } = this.app.lib._
       const group = groupAttrs(this.params.attr, ['body', 'head', 'foot'])
@@ -54,7 +33,6 @@ async function table () {
 
       const schema = get(this, 'component.locals.schema', {})
       const data = get(this, 'component.locals.list.data', [])
-      const fdata = await formatRecord.call(this.plugin, { data, req, schema })
       const filter = get(this, 'component.locals.list.filter', {})
       const count = get(this, 'component.locals.list.count', 0)
       // collect prop.values for later use
@@ -87,7 +65,8 @@ async function table () {
       let selection
       const canDelete = !disableds.includes('remove')
       const canEdit = !disableds.includes('update')
-      if (canEdit) selection = 'single'
+      const canDetails = !disableds.includes('get')
+      if (canEdit || canDetails) selection = 'single'
       if (canDelete) selection = 'multi'
       if (selection) this.params.attr.hover = true
 
@@ -141,13 +120,12 @@ async function table () {
       items = []
       for (const idx in data) {
         const d = data[idx]
-        const fd = fdata[idx]
         const lines = []
         if (selection) {
           const tag = selection === 'single' ? 'formRadio' : 'formCheck'
-          const attr = { 'x-model': 'selected', name: '_rt', value: d.id, noLabel: true, noWrapper: true }
+          const attr = { 'x-model': 'selected', name: '_rt', value: d._orig.id, noLabel: true, noWrapper: true }
           const type = find(schema.properties, { name: 'id' }).type
-          const prepend = `<td data-value="${d.id}" data-key="id" data-type="${type}">`
+          const prepend = `<td data-value="${d._orig.id}" data-key="id" data-type="${type}">`
           lines.push(await this.component.buildTag({ tag, attr, prepend, append: '</td>' }))
         }
         for (const f of schema.view.fields) {
@@ -155,17 +133,24 @@ async function table () {
           let prop = find(schema.properties, { name: f })
           if (!prop) prop = find(schema.view.calcFields, { name: f })
           if (!prop) continue
-          let dataValue = d[f] ?? ''
+          let dataValue = d._orig[f] ?? ''
           if (!isEmpty(dataValue)) {
             if (['datetime'].includes(prop.type)) dataValue = escape(dataValue.toISOString())
             if (['string', 'text'].includes(prop.type)) dataValue = escape(dataValue)
             if (['array', 'object'].includes(prop.type)) dataValue = escape(JSON.stringify(d[f]))
           }
-          let value = this.getRefValue({ field: f, data: fd }) ?? fd[f]
+          const refName = get(schema, `view.widget.${f}.attr.refName`)
+          let value = this.getRefValue({ field: f, data: d, refName }) ?? d[f]
+          const formatValue = get(schema, `view.formatValue.${f}`)
+          if (formatValue) {
+            value = await formatValue.call(this, value, d, { params: this.params, req })
+            dataValue = value
+          }
+          if (!get(schema, 'view.noEscape', []).includes(f)) value = escape(value)
           const attr = { dataValue, dataKey: prop.name, dataType: prop.type }
           if (!disableds.includes('get')) attr.style = { cursor: 'pointer' }
-          const cellFormatter = get(schema, `view.cellFormatter.${f}`)
-          if (cellFormatter) merge(attr, await cellFormatter.call(this, dataValue, d, { params: this.params, req }))
+          const formatCell = get(schema, `view.formatCell.${f}`)
+          if (formatCell) merge(attr, await formatCell.call(this, value, d, { params: this.params, req }))
           const noWrap = this.isNoWrap(f, schema, group.body.nowrap) ? 'nowrap' : ''
           if (this.isRightAligned(f, schema)) attr.text = `align:end ${noWrap}`
           else attr.text = noWrap
@@ -174,15 +159,14 @@ async function table () {
             const item = find(lookup.values, set({}, lookup.id ?? 'id', d[f]))
             if (item) value = req.t(item[lookup.field ?? 'name'])
           }
-          const formatter = get(schema, `view.formatter.${f}`)
-          if (formatter) value = await formatter.call(this, value, d, { params: this.params, req })
-          else value = await this._defFormatter({ req, key: f, schema, value, data: d, params: this.params })
+          const format = get(schema, `view.format.${f}`)
+          if (format) value = await format.call(this, value, d, { params: this.params, req })
           const line = await this.component.buildTag({ tag: 'td', attr, html: value })
           lines.push(line)
         }
-        const attr = { id: `rec-${d.id}` }
-        if (!disableds.includes('update') || !disableds.includes('remove')) attr['@click'] = `toggle('${d.id}')`
-        if (!disableds.includes('get')) attr['@dblclick'] = `goDetails('${d.id}')`
+        const attr = { id: `rec-${d._orig.id}` }
+        if (!disableds.includes('update') || !disableds.includes('remove') || !disableds.includes('get')) attr['@click'] = `toggle('${d._orig.id}')`
+        if (!disableds.includes('get')) attr['@dblclick'] = `goDetails('${d._orig.id}')`
         items.push(await this.component.buildTag({ tag: 'tr', attr, html: lines.join('\n') }))
       }
       html.push(await this.component.buildTag({ tag: 'tbody', attr: group.body, html: items.join('\n') }))
@@ -235,7 +219,7 @@ async function table () {
         }`
         xInit = `
           ${xInit}
-          $watch('selected', val => $dispatch('on-selection', [val]))
+          $watch('selected', val => $dispatch('on-selection', _.isEmpty(val) ? [] : [val]))
         `
       } else {
         xData = `{
@@ -244,6 +228,7 @@ async function table () {
       }
       this.params.attr['x-data'] = xData
       this.params.attr['x-init'] = xInit
+      this.params.attr.responsive = true
       this.params.html = await this.component.buildTag({ tag: 'table', attr: this.params.attr, html: html.join('\n') })
     }
   }

package/index.js

@@ -43,6 +43,11 @@ async function factory (pkgName) {
           count: false,
           patchEnabled: false
         },
+        control: {
+          wdbBtnColumns: {
+            menuMax: 10
+          }
+        },
         enableRestApiForModel: false
       }
       this.methodMap = {
@@ -200,7 +205,7 @@ async function factory (pkgName) {
           time: options.time ?? { timeZone }
         }
         rec[f] = format(data[f], prop.type, opts)
-        const vf = get(schema, `view.valueFormatter.${f}`)
+        const vf = get(schema, `view.formatValue.${f}`)
         if (vf) {
           if (isFunction(vf)) rec[f] = await vf.call(this, data[f], data, { req })
           else rec[f] = await callHandler(vf, { req, value: data[f], data })

package/lib/crud/all-handler.js

@@ -19,6 +19,9 @@ const handler = {
 async function allHandler ({ model, action, req, reply, template, params = {}, options = {} }) {
   const { upperFirst, merge, keys } = this.app.lib._
   if (!keys(handler).includes(action)) throw this.error('_notFound')
+  options.modelOpts = options.modelOpts ?? {}
+  options.modelOpts.formatValue = true
+  options.modelOpts.retainOriginalValue = true
   if (['delete', 'export'].includes(action)) {
     if (req.method === 'GET') throw this.error('_notFound')
     return await handler[action].call(this, { model, req, reply, options })

package/lib/method/get-schema-ext.js

@@ -12,8 +12,9 @@ function getCommons (action, schema, ext, options = {}) {
   const widget = defaultsDeep(get(ext, `view.${action}.widget`), get(ext, 'common.widget', {}))
   const noEscape = get(ext, `view.${action}.noEscape`, get(ext, 'common.noEscape', []))
   const control = defaultsDeep(get(ext, `view.${action}.control`), get(ext, 'common.control', {}))
-  const valueFormatter = defaultsDeep(get(ext, `view.${action}.valueFormatter`), get(ext, 'common.valueFormatter', {}))
-  const formatter = defaultsDeep(get(ext, `view.${action}.formatter`), get(ext, 'common.formatter', {}))
+  const formatValue = defaultsDeep(get(ext, `view.${action}.formatValue`), get(ext, 'common.formatValue', {}))
+  const formatCell = defaultsDeep(get(ext, `view.${action}.formatCell`), get(ext, 'common.formatCell', {}))
+  const format = defaultsDeep(get(ext, `view.${action}.format`), get(ext, 'common.format', {}))
   const card = get(ext, `view.${action}.card`, get(ext, 'common.card', true))
   let hidden = get(ext, `view.${action}.hidden`, get(ext, 'common.hidden', []))
   const disabled = get(ext, `view.${action}.disabled`, get(ext, 'common.disabled', []))
@@ -30,8 +31,9 @@ function getCommons (action, schema, ext, options = {}) {
   set(schema, 'view.calcFields', calcFields)
   set(schema, 'view.noEscape', noEscape)
   set(schema, 'view.widget', widget)
-  set(schema, 'view.valueFormatter', valueFormatter)
-  set(schema, 'view.formatter', merge({}, defFormatter, formatter))
+  set(schema, 'view.formatValue', formatValue)
+  set(schema, 'view.formatCell', formatCell)
+  set(schema, 'view.format', merge({}, defFormatter, format))
   set(schema, 'view.stat.aggregate', aggregate)
   set(schema, 'view.disabled', disabled)
   set(schema, 'view.control', control)

package/lib/util.js

@@ -61,7 +61,7 @@ export async function getOneRecord (model, id, filter, options) {
   const { cloneDeep, pick, isEmpty } = this.app.lib._
   let query = cloneDeep(filter.query || {})
   query = { $and: [query, { id }] }
-  const opts = pick(options, ['forceNoHidden', 'trx', 'req', 'refs'])
+  const opts = pick(options, ['forceNoHidden', 'trx', 'req', 'refs', 'formatValue', 'retainOriginalValue'])
   opts.dataOnly = false
   const data = await model.findOneRecord({ query }, opts)
   if (isEmpty(data.data) && options.throwNotFound) throw this.error('_notFound')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waibu-db",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "DB Helper",
   "main": "index.js",
   "scripts": {

package/wiki/CHANGES.md

@@ -1,5 +1,15 @@
 # Changes
 
+## 2026-04-11
+
+- [2.15.0] Add ```control``` key in config object
+- [2.15.0] Bug fix in ```formatRow()```
+- [2.15.0] Add ```WdbBase.getRefName()```
+- [2.15.0] Add ```WdbBase.getSetting()```
+- [2.15.0] Update placeholder in ```WdbQuery``` based on model's ```scanables``` values
+- [2.15.0] ```getSchemaExt()``` now support ```format```, ```formatValue``` and ```formatCell```
+- [2.15.0] All default handlers now support ```options.formatValue``` and ```options.retainOriginalValue````
+
 ## 2026-04-07
 
 - [2.14.0] Add ```wdb-lookup-select``` widget
@@ -31,8 +41,8 @@
 
 ## 2026-03-27
 
-- [2.12.1] Bug fix in all ```view.formatter``` & ```view.valueFormatter```
-- [2.12.2] Bug fix in ```wdb-form``` & ```wdb-table``` widgets, now correctly use value from formatter if provided
+- [2.12.1] Bug fix in all ```view.format``` & ```view.formatValue```
+- [2.12.2] Bug fix in ```wdb-form``` & ```wdb-table``` widgets, now correctly use value from format if provided
 
 ## 2026-03-26