waibu-db 1.1.4 → 1.1.6

package/bajo/intl/en-US.json

@@ -1,4 +1,33 @@
 {
+  "pageOfPages%s%s": "Page %s of %s pages",
+  "recsFound%s": "%s record(s) found",
+  "recsPerPage": "recs per page",
+  "addAsNewClone": "Add as New Clone",
+  "details": "Details",
+  "clone": "Clone",
+  "delivery": "Delivery",
+  "saveAsFile": "Save as File",
+  "formattedField": "Formatted Field",
+  "formattedValue": "Formatted Value",
+  "zipped": "Zipped",
+  "fileType": "File Type",
+  "aboutToRemoveRecord": "You're about to remove one or more records. Are you really sure to do this?",
+  "columns": "Kolom",
+  "noStatYet": "Maaf, belum ada statistik",
+  "%s - %s": "%s - %s",
+  "list": "List ",
+  "add": "Add ",
+  "edit": "Edit",
+  "yes": "Yes",
+  "no": "No",
+  "db": "DB",
+  "excelXlsx": "Excel XLSX",
+  "csv": "CSV",
+  "xml": "XML",
+  "json": "JSON",
+  "addMoreAfterSubmit": "Add more after submit",
+  "clonePrevious": "Clone previous",
+  "actionPermanentlyDisabled%s": "Sorry, action '%s' is permanently disabled at database level. For more information, please contact your Admin immediately, thank you!",
   "op": {
     "equals": "Equals",
     "notEquals": "Not Equals",

package/bajo/intl/id.json

@@ -1,26 +1,33 @@
 {
-  "Page %s of %s pages": "Hal %s dari %s",
-  "%s record(s) found": "Ditemukan %s data",
-  "recs per page": "data per halaman",
-  "Add as New Clone": "Tambah sbg Duplikat",
-  "Details": "Detil",
-  "Clone": "Gandakan",
-  "Delivery": "Penyampaian",
-  "Save as File": "Simpan sbg Berkas",
-  "Formatted Field": "Kolom Terformat",
-  "Formatted Value": "Nilai Terformat",
-  "Zipped": "Di kompres",
-  "File Type": "Tipe Berkas",
-  "You're about to remove one or more records. Are you really sure to do this?": "Anda akan menghapus satu atau lebih data. Anda yakin akan melakukannya?",
-  "Columns": "Kolom",
-  "No statistic yet, sorry": "Maaf, belum ada statistik",
+  "pageOfPages%s%s": "Hal %s dari %s",
+  "recsFound%s": "Ditemukan %s data",
+  "recsPerPage": "data per halaman",
+  "addAsNewClone": "Tambah sbg Duplikat",
+  "details": "Detil",
+  "clone": "Gandakan",
+  "delivery": "Penyampaian",
+  "saveAsFile": "Simpan sbg Berkas",
+  "formattedField": "Kolom Terformat",
+  "formattedValue": "Nilai Terformat",
+  "zipped": "Di kompres",
+  "fileType": "Tipe Berkas",
+  "aboutToRemoveRecord": "Anda akan menghapus satu atau lebih data. Anda yakin akan melakukannya?",
+  "columns": "Kolom",
+  "noStatYet": "Maaf, belum ada statistik",
   "%s - %s": "%s - %s",
-  "List": "Daftar",
-  "Add": "Tambah",
-  "Edit": "Ubah",
-  "Yes": "Ya",
-  "No": "Tidak",
-  "Db": "DB",
+  "list": "Daftar",
+  "add": "Tambah",
+  "edit": "Ubah",
+  "yes": "Ya",
+  "no": "Tidak",
+  "db": "DB",
+  "excelXlsx": "Excel XLSX",
+  "csv": "CSV",
+  "xml": "XML",
+  "json": "JSON",
+  "addMoreAfterSubmit": "Tambah lagi setelah kirim",
+  "clonePrevious": "Duplikasi sebelumnya",
+  "actionPermanentlyDisabled%s": "Sorry, action '%s' is permanently disabled at database level. For more information, please contact your Admin immediately, thank you!",
   "op": {
     "equals": "Sama Dengan",
     "notEquals": "Tidak Sama Dengan",

package/bajoTemplate/partial/crud/_list-footer.html

@@ -1,4 +1,4 @@
-<c:grid-row gutter="3" margin="bottom-4">
+<c:grid-row gutter="3">
   <c:grid-col col="6-lg">
     <c:wdb-recs-info pages recs-per-page recs-per-page-values="10 15 25 50" />
   </c:grid-col>

package/bajoTemplate/partial/crud/add-handler.html

@@ -6,13 +6,13 @@
     </c:grid-col>
     <c:grid-col col="6-md">
       <c:div flex="justify-content:end-md align-items:center">
-        <c:btn type="reset" color="secondary" t:content="Reset" />
-        <c:btn type="submit" color="primary" t:content="Submit" margin="start-2"/>
+        <c:btn type="reset" color="secondary" t:content="reset" />
+        <c:btn type="submit" color="primary" t:content="submit" margin="start-2"/>
       </c:div>
     </c:grid-col>
     <c:grid-col col="12" margin="top-4">
-      <c:form-switch name="_addmore" t:label="Add more after submit"/>
-      <c:form-switch name="_cloneprev" t:label="Clone previous"/>
+      <c:form-switch name="_addmore" t:label="addMoreAfterSubmit"/>
+      <c:form-switch name="_cloneprev" t:label="clonePrevious"/>
     </c:grid-col>
   </c:grid-row>
 </c:form>

package/bajoTemplate/partial/crud/edit-handler.html

@@ -11,8 +11,8 @@
     </c:grid-col>
     <c:grid-col col="6-lg" flex="justify-content:end-lg align-items:center">
       <c:wdb-btn-delete/>
-      <c:btn type="reset" color="secondary" t:content="Reset" margin="start-2"/>
-      <c:btn type="submit" color="primary" t:content="Submit" margin="start-2"/>
+      <c:btn type="reset" color="secondary" t:content="reset" margin="start-2"/>
+      <c:btn type="submit" color="primary" t:content="submit" margin="start-2"/>
     </c:grid-col>
   </c:grid-row>
 </c:form>

package/bajoTemplate/template/crud/add.html

@@ -1,2 +1,2 @@
-<c:heading move-to="#fullTitle" type="5" t:content="%s - %s|<%= page.modelTitle %>|<%= _t('Add') %>" />
+<c:heading move-to="#fullTitle" type="5" t:content="%s - %s|<%= page.modelTitle %>|<%= _t('add') %>" />
 <!-- include waibuDb.partial:/crud/add-handler.html -->

package/bajoTemplate/template/crud/details.html

@@ -1,2 +1,2 @@
-<c:heading move-to="#fullTitle" type="5" t:content="%s - %s|<%= page.modelTitle %>|<%= _t('Details') %>" />
+<c:heading move-to="#fullTitle" type="5" t:content="%s - %s|<%= page.modelTitle %>|<%= _t('details') %>" />
 <!-- include waibuDb.partial:/crud/details-handler.html -->

package/bajoTemplate/template/crud/edit.html

@@ -1,2 +1,2 @@
-<c:heading move-to="#fullTitle" type="5" t:content="%s - %s|<%= page.modelTitle %>|<%= _t('Edit') %>" />
+<c:heading move-to="#fullTitle" type="5" t:content="%s - %s|<%= page.modelTitle %>|<%= _t('edit') %>" />
 <!-- include waibuDb.partial:/crud/edit-handler.html -->

package/bajoTemplate/template/crud/list.html

@@ -1,2 +1,2 @@
-<c:heading move-to="#fullTitle" type="5" t:content="%s - %s|<%= page.modelTitle %>|<%= _t('List') %>" />
+<c:heading move-to="#fullTitle" type="5" t:content="%s - %s|<%= page.modelTitle %>|<%= _t('list') %>" />
 <!-- include waibuDb.partial:/crud/list-handler.html -->

package/bajoTemplate/template/disabled.html

@@ -1,8 +1,7 @@
 <c:div margin="top-5">
   <c:heading type="3-display" t:content="Action Disabled" margin="bottom-5"/>
   <c:div>
-    <c:t value="<%= action %>">Sorry, action '%s' is permanently disabled at database level. For more information,
-      please contact your Admin immediately, thank you!</c:t>
+    <c:t value="<%= action %>">actionPermanentlyDisabled%s</c:t>
     </c:t>
   </c:div>
 </c:div>

package/package.json

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

package/plugin/method/admin-menu.js

@@ -26,10 +26,10 @@ function modelsMenu (locals, req) {
     const items = omenu[k]
     const plugin = this.app[items[0].ns]
     menu.push({
-      name: k,
+      title: k,
       children: map(items, item => {
         return {
-          name: req.t(camelCase(item.name.slice(plugin.alias.length))),
+          title: camelCase(item.name.slice(plugin.alias.length)),
           href: `waibuAdmin:/${prefix}/${kebabCase(item.name)}/list`
         }
       })

package/plugin/method/record/get.js

@@ -1,12 +1,12 @@
 import prepCrud from '../../../lib/prep-crud.js'
 
 async function get ({ model, req, reply, id, options = {} }) {
-  const { recordGet, attachmentFind } = this.app.dobo
-  const { parseFilter } = this.app.waibu
-  const { name, recId, opts, attachment, stats, mimeType } = prepCrud.call(this, { model, req, reply, id, options, args: ['model', 'id'] })
-  opts.filter = parseFilter(req)
-  const ret = await recordGet(name, recId, opts)
-  if (attachment) ret.data._attachment = await attachmentFind(name, id, { stats, mimeType })
+  const { recordFindOne, attachmentFind } = this.app.dobo
+  const { name, filter, opts, attachment, stats, mimeType } = prepCrud.call(this, { model, req, reply, id, options, args: ['model', 'id'] })
+  filter.query = { $and: [filter.query ?? {}, { id: id ?? req.params.id }] }
+  opts.dataOnly = true
+  const ret = await recordFindOne(name, filter, opts)
+  if (attachment) ret.data._attachment = await attachmentFind(name, ret.id, { stats, mimeType })
   return ret
 }
 

package/waibuBootstrap/theme/component/factory/btn-add.js

@@ -13,7 +13,7 @@ async function btnAdd () {
         this.params.html = ''
         return
       }
-      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('Add')
+      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('add')
       this.params.attr.color = this.params.attr.color ?? 'secondary-outline'
       if (!this.params.attr.href) this.params.attr.href = this.component.buildUrl({ base: 'add' })
       this.params.html = await this.component.buildTag({ tag: 'btn', attr: this.params.attr, html: this.params.html })

package/waibuBootstrap/theme/component/factory/btn-back.js

@@ -9,7 +9,7 @@ async function btnBack () {
       const { attrToArray } = this.plugin.app.waibuMpa
       const { req } = this.component
       this.params.noTag = true
-      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('Back')
+      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('back')
       if (isEmpty(this.params.attr.icon)) this.params.attr.icon = 'arrowStart'
       this.params.attr.color = this.params.attr.color ?? 'secondary-outline'
       this.params.attr.excludeQs = ['mode', 'id', ...attrToArray(this.params.attr.excludeQs ?? '')]

package/waibuBootstrap/theme/component/factory/btn-clone.js

@@ -13,7 +13,7 @@ async function btnClone () {
         this.params.html = ''
         return
       }
-      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('Clone')
+      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('clone')
       this.params.attr.color = this.params.attr.color ?? 'secondary-outline'
       if (!this.params.attr.href) this.params.attr.href = this.component.buildUrl({ base: 'add', exclude: ['id'] }) + '&mode=clone'
       if (this.params.attr.onList) {

package/waibuBootstrap/theme/component/factory/btn-columns.js

@@ -20,7 +20,7 @@ async function btnColumns () {
       if (isEmpty(fields)) fields = schema.view.fields
       const items = []
       this.params.attr.color = this.params.attr.color ?? 'secondary-outline'
-      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('Columns')
+      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('columns')
       for (const f of schema.view.fields) {
         if (f === 'id') {
           items.push(await this.component.buildTag({ tag: 'formCheck', attr: { checked: true, label: req.t('ID'), value: f, disabled: true } }))
@@ -44,7 +44,7 @@ async function btnColumns () {
       ">`)
       html.push(...items)
       const attr = { size: 'sm', 'x-ref': 'apply', margin: 'top-2', color: this.params.attr.applyColor ?? 'primary', icon: this.params.attr.applyIcon ?? 'arrowsStartEnd', href }
-      html.push(await this.component.buildTag({ tag: 'btn', attr, html: req.t('Apply') }))
+      html.push(await this.component.buildTag({ tag: 'btn', attr, html: req.t('apply') }))
       html.push('</form>')
       this.params.attr.autoClose = 'outside'
       this.params.attr.triggerColor = this.params.attr.color

package/waibuBootstrap/theme/component/factory/btn-delete.js

@@ -14,7 +14,7 @@ async function btnDelete () {
         this.params.html = ''
         return
       }
-      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('Delete')
+      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('delete')
       this.params.attr.color = this.params.attr.color ?? 'danger-outline'
       this.params.attr.id = generateId('alpha')
       if (this.params.attr.onList) {
@@ -41,7 +41,7 @@ async function btnDelete () {
           }
         }`
       }
-      const msg = 'You\'re about to remove one or more records. Are you really sure to do this?'
+      const msg = 'aboutToRemoveRecord'
       this.params.attr['@click'] = `
         await wbs.confirmation(\`${req.t(msg)}\`, { ok: '${this.params.attr.id}:remove', close: 'y', opts: selected })
       `

package/waibuBootstrap/theme/component/factory/btn-details.js

@@ -14,7 +14,7 @@ async function btnDetails () {
         this.params.html = ''
         return
       }
-      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('Details')
+      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('details')
       this.params.attr.color = this.params.attr.color ?? 'secondary-outline'
       this.params.attr.id = generateId('alpha')
       if (!this.params.attr.href) this.params.attr.href = this.component.buildUrl({ base: 'details', exclude: ['id'] })

package/waibuBootstrap/theme/component/factory/btn-edit.js

@@ -14,7 +14,7 @@ async function btnEdit () {
         this.params.html = ''
         return
       }
-      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('Edit')
+      if (isEmpty(this.params.attr.content)) this.params.attr.content = req.t('edit')
       this.params.attr.color = this.params.attr.color ?? 'secondary-outline'
       this.params.attr.id = generateId('alpha')
       if (!this.params.attr.href) this.params.attr.href = this.component.buildUrl({ base: 'edit', exclude: ['id'] })
@@ -52,7 +52,7 @@ async function btnEdit () {
             }
           `
           const html = [
-            await this.component.buildTag({ tag: 'dropdownItem', attr: { content: req.t('Add as New Clone') } })
+            await this.component.buildTag({ tag: 'dropdownItem', attr: { content: req.t('addAsNewClone') } })
           ]
           this.params.attr.triggerColor = this.params.attr.color
           this.params.html = await this.component.buildTag({ tag: 'dropdown', attr: this.params.attr, html: html.join('\n') })

package/waibuBootstrap/theme/component/factory/btn-export.js

@@ -4,6 +4,10 @@ async function btnExport () {
   const WdbBase = await wdbBase.call(this)
 
   return class WdbBtnExport extends WdbBase {
+    static scripts = [...super.scripts,
+      'waibuMpa.virtual:/json2csv/json2csv.js'
+    ]
+
     build = async () => {
       const { isEmpty, get } = this.plugin.app.bajo.lib._
       const { req } = this.component
@@ -15,9 +19,9 @@ async function btnExport () {
         this.params.html = ''
         return
       }
-      if (isEmpty(this.params.attr.trigger)) this.params.attr.trigger = req.t('Export')
+      if (isEmpty(this.params.attr.trigger)) this.params.attr.trigger = req.t('export')
       this.params.attr.triggerColor = this.params.attr.triggerColor ?? 'secondary-outline'
-      this.params.attr.title = req.t('Data Export')
+      this.params.attr.title = req.t('dataExport')
       const html = await this.component.buildSentence(`
         <c:div x-data="{
           delivery: 'clipboard',
@@ -71,8 +75,15 @@ async function btnExport () {
             for (const el of els) {
               let data = []
               _.each(el.children, (v, i) => {
-                if ((i + '') === '0' && checker) return undefined
-                data.push(this.options.includes('fvalue') ? v.innerText : wmpa.parseValue(v.dataset.value, types[parseInt(i - 1)]))
+                i = i + ''
+                if (i === '0' && checker) return undefined
+                if (this.options.includes('fvalue')) data.push(v.innerText)
+                else {
+                  const type = types[parseInt(i)]
+                  let val = wmpa.parseValue(v.dataset.value, type)
+                  if (['datetime', 'date', 'time'].includes(type)) val = val.toISOString()
+                  data.push(val)
+                }
               })
               const item = {}
               for (const i in keys) {
@@ -105,28 +116,28 @@ async function btnExport () {
         ">
           <c:grid-row gutter="2">
             <c:grid-col col="6-md">
-              <c:fieldset t:legend="Delivery" legend-type="6">
-                <c:form-radio x-model="delivery" value="file" t:label="Save as File" />
-                <c:form-radio x-model="delivery" value="clipboard" t:label="Copy to Clipboard" />
+              <c:fieldset t:legend="delivery" legend-type="6">
+                <c:form-radio x-model="delivery" value="file" t:label="saveAsFile" />
+                <c:form-radio x-model="delivery" value="clipboard" t:label="copyClipboard" />
               </c:fieldset>
-              <c:fieldset t:legend="Options" legend-type="6" margin="top-2">
-                <c:form-check x-ref="fkey" x-model="options" value="fkey" t:label="Formatted Field" />
-                <c:form-check x-ref="fvalue" x-model="options" value="fvalue" t:label="Formatted Value" />
-                <c:form-check x-ref="zip" x-model="options" value="zip" t:label="Zipped" />
+              <c:fieldset t:legend="options" legend-type="6" margin="top-2">
+                <c:form-check x-ref="fkey" x-model="options" value="fkey" t:label="formattedField" />
+                <c:form-check x-ref="fvalue" x-model="options" value="fvalue" t:label="formattedValue" />
+                <c:form-check x-ref="zip" x-model="options" value="zip" t:label="zipped" />
               </c:fieldset>
             </c:grid-col>
             <c:grid-col col="6-md">
-              <c:fieldset t:legend="File Type" legend-type="6">
-                <c:form-radio x-ref="xlsx" x-model="ftype" value="xlsx" t:label="Excel XLSX" />
-                <c:form-radio x-ref="csv" x-model="ftype" value="csv" t:label="CSV" />
-                <c:form-radio x-ref="xml" x-model="ftype" value="xml" t:label="XML" />
-                <c:form-radio x-ref="json" x-model="ftype" value="json" t:label="JSON" />
+              <c:fieldset t:legend="fileType" legend-type="6">
+                <c:form-radio x-ref="xlsx" x-model="ftype" value="xlsx" t:label="excelXlsx" />
+                <c:form-radio x-ref="csv" x-model="ftype" value="csv" t:label="csv" />
+                <c:form-radio x-ref="xml" x-model="ftype" value="xml" t:label="xml" />
+                <c:form-radio x-ref="json" x-model="ftype" value="json" t:label="json" />
               </c:fieldset />
             </c:grid-col>
           </c:grid-row>
           <c:div flex="justify-content:end" margin="top-3">
-            <c:btn color="secondary" t:content="Close" dismiss />
-            <c:btn color="primary" t:content="Submit" margin="start-2" @click="await submit()" />
+            <c:btn color="secondary" t:content="close" dismiss />
+            <c:btn color="primary" t:content="submit" margin="start-2" @click="await submit()" />
           </c:div>
         </c:div>
       `)

package/waibuBootstrap/theme/component/factory/query.js

@@ -51,12 +51,12 @@ async function query () {
       this.params.noTag = true
       const container = this.params.attr.modal ? 'modal' : 'drawer'
       this.params.html = await this.component.buildSentence(`
-        <c:form-input ${count === 0 ? 'disabled' : ''} type="search" t:placeholder="Query" id="${id}" x-data="{ query: '' }" x-init="
+        <c:form-input ${count === 0 ? 'disabled' : ''} type="search" t:placeholder="query" 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')">
           <c:form-input-addon>
-            <c:${container} ${count === 0 ? 'trigger-disabled' : ''} trigger-icon="${this.params.attr.icon ?? 'dotsThree'}" trigger-on-end t:title="Query Builder" x-ref="query" x-data="{
+            <c:${container} ${count === 0 ? 'trigger-disabled' : ''} trigger-icon="${this.params.attr.icon ?? 'dotsThree'}" trigger-on-end t:title="queryBuilder" x-ref="query" x-data="{
               fields: ${jsonStringify(fields, true)},
               builder: '',
               selected: [],
@@ -151,14 +151,14 @@ async function query () {
                 ${columns.join('\n')}
               </c:grid-row>
               <c:div flex="justify-content:end" margin="top-3">
-                <c:btn color="secondary" t:content="Close" dismiss="${container}" />
-                <c:btn color="primary" t:content="Apply" margin="start-2" @click="submit()" />
-                <c:btn color="primary" t:content="Submit Query" margin="start-2" @click="submit(true)" />
+                <c:btn color="secondary" t:content="close" dismiss="${container}" />
+                <c:btn color="primary" t:content="apply" margin="start-2" @click="submit()" />
+                <c:btn color="primary" t:content="submitQuery" margin="start-2" @click="submit(true)" />
               </c:div>
             </c:${container}>
           </c:form-input-addon>
           <c:form-input-addon>
-            <c:btn ${count === 0 ? 'disabled' : ''} t:content="Submit" x-data="{
+            <c:btn ${count === 0 ? 'disabled' : ''} t:content="submit" x-data="{
               submit () {
                 const val = document.getElementById('${id}').value ?? ''
                 const url = new URL(window.location.href)

package/waibuBootstrap/theme/component/factory/recs-info.js

@@ -30,10 +30,10 @@ async function recsInfo () {
       if (!this.params.attr.dropdown) this.params.attr.dropdown = true
       const group = groupAttrs(this.params.attr, ['dropdown'])
       const html = []
-      if (this.params.attr.count) html.push(req.t('%s record(s) found', req.format(count, 'integer')))
+      if (this.params.attr.count) html.push(req.t('recsFound%s', req.format(count, 'integer')))
       if (this.params.attr.pages) {
         if (!isEmpty(html)) html[html.length - 1] += '.'
-        html.push(req.t('Page %s of %s pages', req.format(page, 'integer'), req.format(pages, 'integer')))
+        html.push(req.t('pageOfPages%s%s', req.format(page, 'integer'), req.format(pages, 'integer')))
       }
       if (this.params.attr.recsPerPage) {
         this.params.attr.recsPerPageValues = this.params.attr.recsPerPageValues ?? '10 25 50'
@@ -48,7 +48,7 @@ async function recsInfo () {
         attr.content = limit + ''
         attr.color = attr.color ?? 'secondary-outline'
         html.push(await this.component.buildTag({ tag: 'dropdown', attr, html: items.join('\n') }))
-        html.push(' ', req.t('recs per page'))
+        html.push(' ', req.t('recsPerPage'))
       }
       this.params.attr = omit(this.params.attr, ['count', 'pages', 'recsPerPage', 'dropdown', 'recsPerPageValues'])
       this.params.html = html.map(h => `<div class="me-1">${h}</div>`).join('\n')

package/waibuBootstrap/theme/component/factory/table.js

@@ -29,9 +29,10 @@ async function table () {
       const prettyUrl = this.params.attr.prettyUrl
 
       const data = get(this, 'component.locals.list.data', [])
+      const filter = get(this, 'component.locals.list.filter', {})
       const count = get(this, 'component.locals.list.count', 0)
       if (count === 0) {
-        const alert = '<c:alert color="warning" t:content="No record found" margin="top-4"/>'
+        const alert = '<c:alert color="warning" t:content="noRecordFound" margin="top-4"/>'
         this.params.noTag = true
         this.params.html = await this.component.buildSentence(alert)
         return
@@ -45,7 +46,11 @@ async function table () {
       const qsKey = this.plugin.app.waibu.config.qsKey
       let fields = without(get(this, `component.locals._meta.query.${qsKey.fields}`, '').split(','), '')
       if (isEmpty(fields)) fields = schema.view.fields
-      const sort = this.params.attr.sort ? attrToArray(this.params.attr.sort) : get(this, `component.locals._meta.query.${qsKey.sort}`, '')
+      let sort = this.params.attr.sort ? attrToArray(this.params.attr.sort) : get(this, `component.locals._meta.query.${qsKey.sort}`, '')
+      if (isEmpty(sort)) {
+        const keys = Object.keys(filter.sort)
+        if (keys.length > 0) sort = `${keys[0]}:${filter.sort[keys[0]]}`
+      }
 
       let [sortCol, sortDir] = sort.split(':')
       if (!['-1', '1'].includes(sortDir)) sortDir = '1'
@@ -63,7 +68,8 @@ async function table () {
       // head
       for (const f of schema.view.fields) {
         if (!fields.includes(f)) continue
-        const prop = find(schema.properties, { name: f })
+        let prop = find(schema.properties, { name: f })
+        if (!prop) prop = find(schema.view.calcFields, { name: f })
         if (!prop) continue
         let head = req.t(get(schema, `view.label.${f}`, `field.${f}`))
         if (!this.params.attr.noSort && (schema.sortables ?? []).includes(f)) {
@@ -113,7 +119,8 @@ async function table () {
         }
         for (const f of schema.view.fields) {
           if (!fields.includes(f)) continue
-          const prop = find(schema.properties, { name: f })
+          let prop = find(schema.properties, { name: f })
+          if (!prop) prop = find(schema.view.calcFields, { name: f })
           if (!prop) continue
           const opts = {}
           if (f === 'lng') opts.longitude = true
@@ -124,8 +131,14 @@ async function table () {
               ' ' + (req.t(d[f] ? 'Yes' : 'No'))
           } else value = escape(value)
           let dataValue = d[f] ?? ''
+          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]))
+          const vf = get(schema, `view.valueFormatter.${f}`)
+          if (vf) {
+            if (isFunction(vf)) dataValue = escape(await vf(d[f], d))
+            else dataValue = await callHandler(vf, req, d[f], d)
+          }
           const attr = { dataValue, dataKey: prop.name, dataType: prop.type, style: { cursor: 'pointer' } }
           const cellFormatter = get(schema, `view.cellFormatter.${f}`)
           if (cellFormatter) merge(attr, await cellFormatter(dataValue, d))
@@ -158,6 +171,7 @@ async function table () {
       const goDetails = `
         goDetails (id) {
           let url = '${this.params.attr.detailsHref ?? this.component.buildUrl({ base: 'details', prettyUrl })}'
+          if (url === '#') return
           if (url.indexOf('/:id') > -1) url = url.replace('/:id', '/' + id)
           else url += '&id=' + id
           window.location.href = url