waibu-db 2.14.0 → 2.16.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 (!_getSetting('waibuDb:/control/wdbBtnBack/disabled')) { %>
+    <c:wdb-btn-back href="<%= _getSetting('waibuDb:/control/wdbBtnBack/href', 'undefined') %>" />
     <% } %>
     <% if (schema.disabled.includes('remove') && schema.disabled.includes('update')) { %>
-      <% if (!schema.view.control.noExportBtn) { %>
+      <% if (!_getSetting('waibuDb:/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 (!_getSetting('waibuDb:/control/wdbBtnEdit/disabled')) { %>
+      <c:wdb-btn-edit href="<%= _getSetting('waibuDb:/control/wdbBtnEdit/href', 'undefined') %>" />
       <% } %>
-      <% if (!schema.view.control.noCloneBtn) { %>
-      <c:wdb-btn-clone href="<%= schema.view.control.cloneHref ?? 'undefined' %>" />
+      <% if (!_getSetting('waibuDb:/control/wdbBtnClone/disabled')) { %>
+      <c:wdb-btn-clone href="<%= _getSetting('waibuDb:/control/wdbBtnClone/href', 'undefined') %>" />
       <% } %>
-      <% if (!schema.view.control.noExportBtn) { %>
+      <% if (!_getSetting('waibuDb:/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 (!_getSetting('waibuDb:/control/wdbBtnDelete/disabled')) { %>
+    <c:wdb-btn-delete href="<%= _getSetting('waibuDb:/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 (!_getSetting('waibuDb:/control/wdbBtnBack/disabled')) { %>
+    <c:wdb-btn-back href="<%= _getSetting('waibuDb:/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 (!_getSetting('waibuDb:/control/wdbBtnDetails/disabled')) { %>
+      <c:wdb-btn-details href="<%= _getSetting('waibuDb:/control/wdbBtnDetails/href', 'undefined') %>" />
       <% } %>
-      <% if (!schema.view.control.noCloneBtn) { %>
-      <c:wdb-btn-clone href="<%= schema.view.control.cloneHref ?? 'undefined' %>" />
+      <% if (!_getSetting('waibuDb:/control/wdbBtnClone/disabled')) { %>
+      <c:wdb-btn-clone href="<%= _getSetting('waibuDb:/control/wdbBtnClone/href', 'undefined') %>" />
       <% } %>
-      <% if (!schema.view.control.noExportBtn) { %>
+      <% if (!_getSetting('waibuDb:/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 (!_getSetting('waibuDb:/control/wdbBtnDelete/disabled')) { %>
+    <c:wdb-btn-delete href="<%= _getSetting('waibuDb:/control/wdbBtnDelete/href', 'undefined') %>"/>
     <% } %>
-    <% if (!schema.view.control.noResetBtn) { %>
+    <% if (!_getSetting('waibuDb:/control/wdbBtnReset/disabled')) { %>
     <c:btn type="reset" color="secondary" t:content="reset" margin="start-2"/>
     <% } %>
-    <% if (!schema.view.control.noSubmitBtn) { %>
+    <% if (!_getSetting('waibuDb:/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/bajoTemplate/partial/crud/_list-btns.html

@@ -1,8 +1,8 @@
 <c:grid-row gutter="3">
-  <c:grid-col col="4-lg">
+  <c:grid-col col="5-lg">
     <c:wdb-query />
   </c:grid-col>
-  <c:grid-col col="8-lg" flex="justify-content:end-lg">
+  <c:grid-col col="7-lg" flex="justify-content:end-lg">
     <c:btn-group margin="end-2">
       <c:wdb-btn-add text="nowrap"/>
       <c:wdb-btn-details on-list text="nowrap"/>

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

@@ -6,15 +6,16 @@ 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.oldData = get(this, 'component.locals.oldData', {})
+      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 +24,26 @@ 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, defValue) => {
+      const { get, camelCase } = this.app.lib._
+      const widgetName = camelCase(this.constructor.name)
+      key = key.replaceAll('{self}', widgetName)
+      const cfg = this.app.waibu.getSetting(`${this.plugin.ns}:${key}`, { defValue, req: this.component.req })
+      return get(this.schema, `view.${key}`, cfg)
     }
   }
 }

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

@@ -1,5 +1,54 @@
 import wdbBase from '../wdb-base.js'
 
+async function handleRo (attr = {}, prop = {}, widget = {}) {
+  const { get, camelCase, isEmpty, isString } = this.app.lib._
+  const { callHandler } = this.app.bajo
+  const { escape } = this.app.waibu
+  const { req } = this.component
+  const dataValue = get(this.formData, `_orig.${prop.name}`, prop.dataValue ?? '')
+  let value = get(this.oldData, prop.name, get(this.formData, prop.name, prop.value ?? ''))
+  const format = get(this.schema, `view.format.${prop.name}`)
+  const formatValue = get(this.schema, `view.formatValue.${prop.name}`)
+  const labelField = get(this.schema, `view.widget.${prop.name}.attr.labelField`)
+  if (formatValue) value = await formatValue.call(this, value, this.formData, { req })
+  else if (prop.ref) {
+    value = this.getRefValue({ field: prop.name, labelField, refName: this.getRefName(prop.name) })
+    if (format && !isEmpty(value)) attr.href = await format.call(this, value, this.formData, { linkOnly: true })
+  } else if (prop.values) {
+    const values = isString(prop.values) ? (await callHandler(prop.values)) : prop.values
+    value = values.find(v => v.value === dataValue)
+    if (value) {
+      const key = camelCase(`${prop.name} ${value.text}`)
+      value = req.te(key) ? req.t(key) : value.text
+    }
+  } else if (format && !isEmpty(value)) value = await format.call(this, value, this.formData)
+  attr.dataValue = escape(dataValue)
+  attr.value = escape(value)
+  attr.dataType = prop.type
+
+  if (['object', 'array', 'text'].includes(prop.type)) {
+    attr.style = 'min-height: 100px'
+    return await this.component.buildTag({ tag: 'formTextarea', attr, html: value })
+  }
+  return await this.component.buildTag({ tag: 'formPlaintext', attr, selfCosing: true, noEscape: true })
+}
+
+async function handleRw (attr = {}, prop = {}, widget = {}) {
+  const { get, has, isPlainObject, isArray } = this.app.lib._
+  const { escape } = this.app.waibu
+  const { stringifyAttribs } = this.app.waibuMpa
+  if (has(attr, 'name') && !has(attr, 'value')) {
+    attr.dataType = attr.dataType ?? prop.type
+    attr.dataValue = get(this, `formData.${attr.name}`)
+    if (isPlainObject(attr.dataValue) || isArray(attr.dataValue)) attr.dataValue = JSON.stringify(attr.dataValue)
+    attr.dataValue = escape(attr.dataValue)
+    attr.value = widget.component === 'form-plaintext' ? get(this, `oldData.${attr.name}`, attr.dataValue) : attr.dataValue
+  }
+
+  const cmp = prop.ref ? 'wdb-lookup-select' : widget.component
+  return `<c:${cmp} ${stringifyAttribs(attr)} data-type="${prop.type}" />`
+}
+
 async function form () {
   const WdbBase = await wdbBase.call(this)
 
@@ -7,51 +56,47 @@ async function form () {
     build = async () => {
       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 widget = 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}"`)
-          forOwn(w.attr, (v, k) => {
-            if (v === true) attr.push(k)
-            else attr.push(`${k}="${v}"`)
+          const attr = {
+            'x-ref': widget.name,
+            labelFloating: true,
+            name: widget.name
+          }
+          if (xModels.includes(widget.name)) attr['x-model'] = widget.name
+          forOwn(widget.attr, (v, k) => {
+            if (v === true) attr[k] = true
+            else attr[k] = v
           })
-          const xon = filter(xOns, { field: w.name })
+          attr.label = this.component.req.t(attr.label)
+          const xon = filter(xOns, { field: widget.name })
           for (const o of xon) {
-            attr.push(`@${o.bind}="${o.handler}"`)
+            attr[`@${o.bind}`] = o.handler
           }
-          if (w.componentOpts) attr.push(`c-opts="${base64JsonEncode(w.componentOpts)}"`)
-          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}"` : ''} />`)
-          } else if (prop.ref) {
-            body.push(`<c:wdb-lookup-select ${attributes} />`)
+          if (widget.componentOpts) attr['c-opts'] = base64JsonEncode(widget.componentOpts)
+          if (widget.component === 'form-plaintext' || this.params.attr.method !== 'POST') {
+            body.push(await handleRo.call(this, attr, prop, widget))
           } else {
-            body.push(`<c:${w.component} ${attributes} data-type="${prop.type}" />`)
+            body.push(await handleRw.call(this, attr, prop, widget))
           }
         }
         body.push('</c:fieldset>')
       }
       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, { separator: ', ', 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,45 +21,24 @@ 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 { get, omit, set, find, isEmpty, without, merge, camelCase } = this.app.lib._
       const group = groupAttrs(this.params.attr, ['body', 'head', 'foot'])
       this.params.attr = group._
       const prettyUrl = this.params.attr.prettyUrl
 
       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
       for (const prop of schema.properties) {
         if (typeof prop.values === 'string') this.propValues[prop.name] = await callHandler(prop.values)
+        else if (prop.values) this.propValues[prop.name] = prop.values
       }
       if (count === 0 || data.length === 0) {
         const alert = '<c:alert color="warning" t:content="noRecordFound" margin="top-4"/>'
@@ -87,7 +66,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 +121,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,34 +134,47 @@ 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
           const lookup = get(schema, `view.lookup.${f}`)
           if (lookup) {
-            const item = find(lookup.values, set({}, lookup.id ?? 'id', d[f]))
+            const item = find(lookup.values, set({}, lookup.id ?? 'id', dataValue))
             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 })
+          if (this.propValues[f]) {
+            const item = find(this.propValues[f], { value: dataValue })
+            if (item) {
+              const key = camelCase(`${f} ${item.text}`)
+              value = req.te(key) ? req.t(key) : item.text
+            }
+          }
           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 +227,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 +236,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/add-handler.js

@@ -14,8 +14,8 @@ async function addHandler ({ req, reply, model, params = {}, template, addOnsHan
   delete req.query.query
   let def = {}
   if (req.method === 'GET' && req.query.mode === 'clone' && req.query.id) {
-    const resp = await getRecord({ model, req, id: req.query.id, options: { fields: map(schema.properties, 'name') } })
-    def = omit(resp.data, ['id', 'createdAt', 'updatedAt'])
+    const resp = await getRecord({ model, req, id: req.query.id, options: { fields: map(schema.properties, 'name'), ...opts } })
+    def = omit(resp.data._orig, ['id', 'createdAt', 'updatedAt'])
   }
   let form = defaultsDeep(req.body, def)
   let error

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/crud/edit-handler.js

@@ -7,7 +7,7 @@ async function editHandler ({ req, reply, model, id, params = {}, template, addO
   const { buildUrl } = this.app.waibuMpa
   const { fs } = this.app.lib
   const { defaultsDeep } = this.app.lib.aneka
-  const { merge, isEmpty, omit } = this.app.lib._
+  const { merge, isEmpty, omit, cloneDeep, isArray, isPlainObject } = this.app.lib._
   const opts = merge({}, options.modelOpts)
   let error
   let resp
@@ -22,7 +22,12 @@ async function editHandler ({ req, reply, model, id, params = {}, template, addO
   delete req.query.query
   const old = await getRecord({ model, req, id, options: opts })
   if (isEmpty(old.data)) return await reply.view(notFoundTpl, params)
-  form = defaultsDeep(req.body, old.data)
+  opts._data = old
+  const def = cloneDeep(old.data._orig)
+  for (const k in def) {
+    if (isArray(def[k]) || isPlainObject(def[k])) def[k] = JSON.stringify(def[k])
+  }
+  form = defaultsDeep(req.body, def)
   if (req.method !== 'GET') {
     form = omit(form, ['_action', '_value'])
     try {
@@ -49,7 +54,7 @@ async function editHandler ({ req, reply, model, id, params = {}, template, addO
   }
   const addOns = addOnsHandler ? await addOnsHandler.call(this.app[req.ns], { req, reply, params, data: resp, schema, error, options }) : undefined
   const attachments = await attachmentHandler.call(this, { schema, id, options })
-  merge(params, { form, schema, error, addOns, attachments })
+  merge(params, { oldData: old.data, form, schema, error, addOns, attachments })
   if (schema.template) template = schema.template
   if (schema.layout) params.page.layout = schema.layout
   return await reply.view(template, params)

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/method/update-record.js

@@ -6,8 +6,10 @@ async function updateRecord ({ model, req, reply, id, body, options = {}, transa
 
   async function handler (trx) {
     if (opts.trx === true) opts.trx = trx
-    const resp = await getOneRecord.call(me, mdl, recId, filter, opts)
-    opts._data = resp.data
+    if (!opts._data) {
+      const resp = await getOneRecord.call(me, mdl, recId, filter, opts)
+      opts._data = resp.data
+    }
     const ret = await mdl.updateRecord(recId, input, opts)
     if (attachment) ret.data._attachment = await mdl.findAttachment(id, { stats, mimeType })
     return ret

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')
@@ -79,7 +79,8 @@ export async function processHandler ({ action, model, handler, options } = {})
   }
 
   try {
-    return options.trx === true ? (await model.transaction(handler)) : (await handler())
+    if (options.trx === true) return await model.transaction(handler)
+    return await handler()
   } catch (err) {
     if (options.suppressError.includes(action)) return suppressedReturn.call(this, err)
     throw err

package/package.json

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

package/wiki/CHANGES.md

@@ -1,5 +1,22 @@
 # Changes
 
+## 2026-04-13
+
+- [2.16.0] Add ```oldData``` propety to ```WdbBase``` widget
+- [2.16.0] Change ```WdbBase.getSetting()``` to also respect setting from ```waibu.getSetting()```
+- [2.16.0] Rewrite ```WdbForm``` widget entirely
+- [2.16.0] Remove redundant call to get old record in ```updateRecord()```
+
+## 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 +48,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