waibu-db 1.0.1

package/lib/crud/helper/add-ons-handler.js

@@ -0,0 +1,46 @@
+async function addOnsHandler ({ req, reply, data, schema }) {
+  const { base64JsonEncode } = this.app.waibuMpa
+  const { statAggregate } = this.app.waibuDb
+  const { get, map, pick, pullAt } = this.app.bajo.lib._
+  const opts = map(get(schema, 'view.stat.aggregate', []), item => {
+    const dbOpts = pick(item, ['fields', 'group', 'aggregate'])
+    const name = item.name ?? `field.${item.fields[0]}`
+    return { name, dbOpts }
+  })
+  if (opts.length === 0) return []
+  const dropped = []
+  for (const idx in opts) {
+    const o = opts[idx]
+    try {
+      const resp = await statAggregate({ model: schema.name, req, reply, options: o.dbOpts })
+      const data = []
+      for (const d of resp.data) {
+        const key = o.dbOpts.fields[0]
+        data.push({
+          name: d[key],
+          value: d[key + 'Count']
+        })
+      }
+      opts[idx].chartOpts = base64JsonEncode({
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [{
+          type: 'pie',
+          data
+        }]
+      })
+    } catch (err) {
+      dropped.push(idx)
+    }
+  }
+  if (dropped.length > 0) pullAt(opts, dropped)
+  return map(opts, o => {
+    return {
+      data: { option: o.chartOpts, name: o.name },
+      resource: 'waibuDb.partial:/crud/echarts-window.html'
+    }
+  })
+}
+
+export default addOnsHandler

package/lib/crud/helper/build-params.js

@@ -0,0 +1,14 @@
+function buildParams ({ model, req, reply, action }) {
+  const { camelCase, kebabCase, map, upperFirst, get } = this.app.bajo.lib._
+  const { getSchema } = this.app.dobo
+  const [alias, ...names] = map(kebabCase(model).split('-'), n => upperFirst(n))
+  const schema = getSchema(camelCase(model), false)
+  const modelTitle = this.app[schema.ns].title + ': ' + names.join(' ')
+  const page = {
+    title: req.t(get(req, 'routeOptions.config.title', alias)),
+    modelTitle
+  }
+  return { page }
+}
+
+export default buildParams

package/lib/crud/list-handler.js

@@ -0,0 +1,27 @@
+async function listHandler ({ req, reply, model, template, params = {}, addOnsHandler, templateDisabled = 'waibuDb.template:/disabled.html' } = {}) {
+  const { pascalCase } = this.app.bajo
+  const { recordFind, getSchemaExt } = this.app.waibuDb
+  const { get, merge, isArray, upperFirst } = this.app.bajo.lib._
+  const qsKey = this.app.waibu.config.qsKey
+  const options = { count: true }
+  model = model ?? pascalCase(req.params.model)
+  const { schema } = await getSchemaExt(model, 'list')
+  if (schema.disabled.includes('find')) return reply.view(templateDisabled, { action: 'list' })
+  for (const key of ['sort', 'limit', 'fields']) {
+    const sessKey = `wdb${model}${upperFirst(key)}`
+    if (!req.query[qsKey[key]]) req.query[qsKey[key]] = req.session[sessKey] ?? get(schema, `view.qs.${key}`)
+    else req.session[sessKey] = req.query[qsKey[key]]
+  }
+  if (!req.query[qsKey.page]) req.query[qsKey.page] = 1
+  // req.query.attachment = true
+  const list = await recordFind({ model, req, options })
+  let addOns = []
+  if (addOnsHandler) {
+    addOns = await addOnsHandler.call(this.app[req.ns], { req, reply, params, data: list, schema })
+    if (!isArray(addOns)) addOns = [addOns]
+  }
+  merge(params, { list, schema, addOns })
+  return reply.view(template, params)
+}
+
+export default listHandler

package/lib/prep-crud.js

@@ -0,0 +1,17 @@
+function prepCrud ({ model, body, id, req, options, args }) {
+  const { pascalCase } = this.app.bajo
+  const { cloneDeep } = this.app.bajo.lib._
+  const opts = cloneDeep(options)
+  const params = this.getParams(req, ...args)
+  for (const k of ['count', 'fields']) {
+    opts[k] = opts[k] ?? params[k]
+  }
+  opts.dataOnly = false
+  opts.req = req
+  const recId = id ?? params.id ?? req.query.id
+  const name = pascalCase(model ?? params.model)
+  const input = body ?? params.body
+  return { name, recId, input, opts }
+}
+
+export default prepCrud

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "waibu-db",
+  "version": "1.0.1",
+  "description": "DB Helper",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ardhi/waibu-db.git"
+  },
+  "keywords": [
+    "db",
+    "waibu",
+    "web",
+    "webserver",
+    "bajo",
+    "framework",
+    "fastify",
+    "modular"
+  ],
+  "author": "Ardhi Lukianto <ardhi@lukianto.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ardhi/waibu-db/issues"
+  },
+  "homepage": "https://github.com/ardhi/waibu-db#readme"
+}

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

@@ -0,0 +1,15 @@
+async function btnAdd (params = {}) {
+  const { isEmpty, get } = this.plugin.app.bajo.lib._
+  params.noTag = true
+  const schema = get(this, 'locals.schema', {})
+  if (schema.view.disabled.includes('create')) {
+    params.html = ''
+    return
+  }
+  if (isEmpty(params.attr.content)) params.attr.content = this.req.t('Add')
+  params.attr.color = params.attr.color ?? 'secondary-outline'
+  if (!params.attr.href) params.attr.href = this._buildUrl({ base: 'add' })
+  params.html = await this.buildTag({ tag: 'btn', attr: params.attr, html: params.html })
+}
+
+export default btnAdd

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

@@ -0,0 +1,13 @@
+async function btnBack (params = {}) {
+  const { isEmpty } = this.plugin.app.bajo.lib._
+  const { attrToArray } = this.plugin.app.waibuMpa
+  params.noTag = true
+  if (isEmpty(params.attr.content)) params.attr.content = this.req.t('Back')
+  if (isEmpty(params.attr.icon)) params.attr.icon = 'arrowStart'
+  params.attr.color = params.attr.color ?? 'secondary-outline'
+  params.attr.excludeQs = ['mode', 'id', ...attrToArray(params.attr.excludeQs ?? '')]
+  if (!params.attr.href) params.attr.href = this._buildUrl({ base: 'list', exclude: params.attr.excludeQs })
+  params.html = await this.buildTag({ tag: 'btn', attr: params.attr, html: params.html })
+}
+
+export default btnBack

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

@@ -0,0 +1,30 @@
+async function btnClone (params = {}) {
+  const { isEmpty, get } = this.plugin.app.bajo.lib._
+  params.noTag = true
+  const schema = get(this, 'locals.schema', {})
+  if (schema.view.disabled.includes('create')) {
+    params.html = ''
+    return
+  }
+  if (isEmpty(params.attr.content)) params.attr.content = this.req.t('Clone')
+  params.attr.color = params.attr.color ?? 'secondary-outline'
+  if (!params.attr.href) params.attr.href = this._buildUrl({ base: 'add', exclude: ['id'] }) + '&mode=clone'
+  if (params.attr.onList) {
+    params.attr['x-ref'] = 'clone'
+    params.attr.disabled = true
+    params.attr['x-data'] = `{
+      path: '${params.attr.href}'
+    }`
+    params.attr['@on-selection.window'] = `
+      const recId = $event.detail[0] ?? ''
+      if ($event.detail.length === 1) $refs.clone.classList.remove('disabled')
+      else $refs.clone.classList.add('disabled')
+      $refs.clone.href = path + '&id=' + recId
+    `
+  } else {
+    params.attr.href += '&id=' + this.req.query.id
+  }
+  params.html = await this.buildTag({ tag: 'btn', attr: params.attr, html: params.html })
+}
+
+export default btnClone

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

@@ -0,0 +1,45 @@
+async function btnColumns (params = {}) {
+  const { get, isEmpty, without } = this.plugin.app.bajo.lib._
+  const { jsonStringify } = this.plugin.app.waibuMpa
+  const qsKey = this.plugin.app.waibu.config.qsKey
+  const schema = get(this, 'locals.schema', {})
+  if (schema.view.disabled.includes('find')) {
+    params.html = ''
+    return
+  }
+  let fields = without(get(this, `locals._meta.query.${qsKey.fields}`, '').split(','), '')
+  if (isEmpty(fields)) fields = schema.view.fields
+  const items = []
+  params.attr.color = params.attr.color ?? 'secondary-outline'
+  if (isEmpty(params.attr.content)) params.attr.content = this.req.t('Columns')
+  for (const f of schema.view.fields) {
+    if (f === 'id') {
+      items.push(await this.buildTag({ tag: 'formCheck', attr: { checked: true, label: this.req.t('ID'), value: f, disabled: true } }))
+      continue
+    }
+    const attr = { 'x-model': 'selected', label: this.req.t(`field.${f}`), value: f }
+    if (fields.includes(f)) attr.checked = true
+    items.push(await this.buildTag({ tag: 'formCheck', attr }))
+  }
+  const href = this._buildUrl({ exclude: [qsKey.fields] })
+  const html = ['<form class="mt-1 mb-2 mx-3" ']
+  html.push(`x-data="{
+    selected: ${jsonStringify(fields, true)},
+    all: ${jsonStringify(schema.view.fields, true)}
+  }"`)
+  html.push(`x-init="
+    $refs.apply.href = '${href}&${qsKey.fields}=' + selected.join(',')
+    $watch('selected', v => {
+      $refs.apply.href = '${href}&${qsKey.fields}=' + v.join(',')
+    })
+  ">`)
+  html.push(...items)
+  const attr = { size: 'sm', 'x-ref': 'apply', margin: 'top-2', color: params.attr.applyColor ?? 'primary', icon: params.attr.applyIcon ?? 'arrowsStartEnd', href }
+  html.push(await this.buildTag({ tag: 'btn', attr, html: this.req.t('Apply') }))
+  html.push('</form>')
+  params.attr.autoClose = 'outside'
+  params.html = await this.buildTag({ tag: 'dropdown', attr: params.attr, html: html.join('\n') })
+  params.noTag = true
+}
+
+export default btnColumns

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

@@ -0,0 +1,43 @@
+async function btnDelete (params = {}) {
+  const { generateId } = this.plugin.app.bajo
+  const { isEmpty, get } = this.plugin.app.bajo.lib._
+  params.noTag = true
+  const schema = get(this, 'locals.schema', {})
+  if (schema.view.disabled.includes('remove')) {
+    params.html = ''
+    return
+  }
+  if (isEmpty(params.attr.content)) params.attr.content = this.req.t('Delete')
+  params.attr.color = params.attr.color ?? 'danger-outline'
+  params.attr.id = generateId('alpha')
+  if (params.attr.onList) {
+    params.attr.disabled = true
+    params.attr['x-data'] = `{
+      selected: [],
+      remove (ids) {
+        wmpa.postForm({ ids }, '${this._buildUrl({ base: 'delete' })}')
+      }
+    }`
+    params.attr['@on-selection.window'] = `
+    const el = document.getElementById('${params.attr.id}')
+    selected = $event.detail
+    if (selected.length > 0) el.classList.remove('disabled')
+    else el.classList.add('disabled')
+  `
+  } else {
+    params.attr['x-data'] = `{
+      selected: ['${this.req.query.id}'],
+      remove (modalId, ids) {
+        wmpa.postForm({ ids }, '${this._buildUrl({ base: 'delete', exclude: ['id', 'page'] })}')
+      }
+    }`
+  }
+  const msg = 'You\'re about to remove one or more records. Are you really sure to do this?'
+  params.attr['@click'] = `
+    const opts = selected.join(',')
+    const id = await wbs.confirmation(\`${this.req.t(msg)}\`, { ok: '${params.attr.id}:remove', close: 'y', opts })
+  `
+  params.html = await this.buildTag({ tag: 'btn', attr: params.attr, html: params.html })
+}
+
+export default btnDelete

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

@@ -0,0 +1,32 @@
+async function btnDetails (params = {}) {
+  const { generateId } = this.plugin.app.bajo
+  const { isEmpty, get } = this.plugin.app.bajo.lib._
+  params.noTag = true
+  const schema = get(this, 'locals.schema', {})
+  if (schema.view.disabled.includes('update')) {
+    params.html = ''
+    return
+  }
+  if (isEmpty(params.attr.content)) params.attr.content = this.req.t('Details')
+  params.attr.color = params.attr.color ?? 'secondary-outline'
+  params.attr.id = generateId('alpha')
+  if (!params.attr.href) params.attr.href = this._buildUrl({ base: 'details', exclude: ['id'] })
+  if (params.attr.onList) {
+    params.attr.disabled = true
+    params.attr['x-ref'] = 'details'
+    params.attr['x-data'] = `{
+      path: '${params.attr.href}'
+    }`
+    params.attr['@on-selection.window'] = `
+      const recId = $event.detail[0] ?? ''
+      if ($event.detail.length === 1) $refs.details.classList.remove('disabled')
+      else $refs.details.classList.add('disabled')
+      $refs.details.href = path + '&id=' + recId
+    `
+  } else {
+    params.attr.href += '&id=' + this.req.query.id
+  }
+  params.html = await this.buildTag({ tag: 'btn', attr: params.attr, html: params.html })
+}
+
+export default btnDetails

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

@@ -0,0 +1,56 @@
+async function btnEdit (params = {}) {
+  const { generateId } = this.plugin.app.bajo
+  const { isEmpty, get } = this.plugin.app.bajo.lib._
+  params.noTag = true
+  const schema = get(this, 'locals.schema', {})
+  if (schema.view.disabled.includes('update')) {
+    params.html = ''
+    return
+  }
+  if (isEmpty(params.attr.content)) params.attr.content = this.req.t('Edit')
+  params.attr.color = params.attr.color ?? 'secondary-outline'
+  params.attr.id = generateId('alpha')
+  if (!params.attr.href) params.attr.href = this._buildUrl({ base: 'edit', exclude: ['id'] })
+  if (params.attr.onList) {
+    params.attr.split = true
+    params.attr.disabled = true
+    params.attr['x-data'] = `{
+      path: '${params.attr.href}'
+    }`
+    if (params.attr.noClone) {
+      params.attr['@on-selection.window'] = `
+        const recId = $event.detail[0] ?? ''
+        const el = document.getElementById('${params.attr.id}')
+        if ($event.detail.length === 1) el.classList.remove('disabled')
+        else el.classList.add('disabled')
+        el.href = path + '&id=' + recId
+      `
+      params.html = await this.buildTag({ tag: 'btn', attr: params.attr, html: params.html })
+    } else {
+      params.attr['@on-selection.window'] = `
+        const recId = $event.detail[0] ?? ''
+        const elId = '${params.attr.id}'
+        for (const id of [elId, elId + '-split']) {
+          const el = document.getElementById(id)
+          if ($event.detail.length === 1) el.classList.remove('disabled')
+          else el.classList.add('disabled')
+          const href = path + '&id=' + recId
+          if (id.slice(-6) === '-split') {
+            const selector = '#' + id.replace('-split', '-menu') + ' a.dropdown-item'
+            const item = document.querySelector(selector)
+            item.href = href.replace('/edit', '/add') + '&mode=clone'
+          } else el.href = href
+        }
+      `
+      const html = [
+        await this.buildTag({ tag: 'dropdownItem', attr: { content: this.req.t('Add as New Clone') } })
+      ]
+      params.html = await this.buildTag({ tag: 'dropdown', attr: params.attr, html: html.join('\n') })
+    }
+  } else {
+    params.attr.href += '&id=' + this.req.query.id
+    params.html = await this.buildTag({ tag: 'btn', attr: params.attr, html: params.html })
+  }
+}
+
+export default btnEdit

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

@@ -0,0 +1,129 @@
+async function btnExport (params = {}) {
+  const { isEmpty, get } = this.plugin.app.bajo.lib._
+  params.noTag = true
+  const schema = get(this, 'locals.schema', {})
+  if (schema.view.disabled.includes('find')) {
+    params.html = ''
+    return
+  }
+  if (isEmpty(params.attr.launch)) params.attr.launch = this.req.t('Export')
+  params.attr.launchColor = params.attr.launchColor ?? 'secondary-outline'
+  params.attr.title = this.req.t('Data Export')
+  const html = await this.buildSentence(`
+    <c:div x-data="{
+      delivery: 'clipboard',
+      options: [],
+      ftype: 'json',
+      toggle (val) {
+        if (val === 'clipboard') {
+          $refs.zip.setAttribute('disabled', '')
+          $refs.xlsx.setAttribute('disabled', '')
+          $refs.xml.setAttribute('disabled', '')
+          _.pull(this.options, 'zip')
+          if (!['json', 'csv'].includes(this.ftype)) this.ftype = 'json'
+        } else {
+          $refs.zip.removeAttribute('disabled')
+          $refs.xlsx.removeAttribute('disabled')
+          $refs.xml.removeAttribute('disabled')
+        }
+      },
+      extractForm (selector) {
+        let item = {}
+        const els = document.querySelectorAll(selector + ' [data-value]')
+        for (const el of els) {
+          const value = this.options.includes('fvalue') ? el.getAttribute('value') : wmpa.parseValue(el.dataset.value, el.dataset.type)
+          let key = el.getAttribute('name')
+          if (this.options.includes('fkey')) {
+            try {
+              const elLabel = document.querySelector('label[for=' + el.getAttribute('id') + ']')
+              key = elLabel.innerText
+            } catch (err) {}
+          }
+          item[key] = value
+        }
+        return this.ftype === 'csv' ? CSVJSON.json2csv(item) : JSON.stringify(item)
+      },
+      extractTable (selector) {
+        let items = []
+        let checker = false
+        const keys = []
+        const types = []
+        let els = document.querySelectorAll(selector + ' thead th')
+        for (const el of els) {
+          keys.push(this.options.includes('fkey') ? el.innerText : el.dataset.key)
+          types.push(el.dataset.type)
+        }
+        if (_.isEmpty(keys[0])) {
+          checker = true
+          keys.shift()
+          types.shift()
+        }
+        els = document.querySelectorAll(selector + ' tbody tr')
+        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)]))
+          })
+          const item = {}
+          for (const i in keys) {
+            item[keys[i]] = data[i]
+          }
+          items.push(item)
+        }
+        return this.ftype === 'csv' ? CSVJSON.json2csv(items) : JSON.stringify(items)
+      },
+      async submit () {
+        const instance = wbs.getInstance('Modal', $refs.export)
+        const handler = '${params.attr.handler ?? ''}'
+        if (this.delivery === 'clipboard') {
+          const selector = '${params.attr.selector}'
+          if (_.isEmpty(selector)) {
+            await wbs.notify('Cant get data selector', { type: 'danger' })
+          } else {
+            const item = handler === 'list' ? this.extractTable(selector) : this.extractForm(selector)
+            await wbs.copyToClipboard(item)
+          }
+          instance.hide()
+          return
+        }
+        wmpa.postForm({ options: this.options.join(','), ftype: this.ftype, handler }, '${this._buildUrl({ base: 'export' })}')
+        instance.hide()
+      }
+    }" x-init="
+      toggle(delivery)
+      $watch('delivery', val => toggle(val))
+    ">
+      <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>
+          <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>
+        </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 />
+        </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:div>
+    </c:div>
+  `)
+  params.attr['x-data'] = true
+  params.attr['x-ref'] = 'export'
+  params.html = await this.buildTag({ tag: 'modal', attr: params.attr, html })
+}
+
+export default btnExport

package/waibuBootstrap/theme/component/echarts.js

@@ -0,0 +1,58 @@
+const defOption = {
+  grid: {
+    top: 8,
+    bottom: 20,
+    left: 25,
+    right: 0
+  }
+}
+
+const chart = {
+  scripts: [
+    '^waibuDb.virtual:/echarts/echarts.min.js'
+  ],
+  handler: async function (params = {}) {
+    const { defaultsDeep, generateId } = this.plugin.app.bajo
+    const { base64JsonDecode, jsonStringify } = this.plugin.app.waibuMpa
+    const { cloneDeep } = this.plugin.app.bajo.lib._
+    this._normalizeAttr(params, { tag: 'div' })
+    params.attr.dim = params.attr.dim ?? 'width:100 height:100'
+    params.attr.id = generateId('alpha')
+    params.attr['x-data'] = `chart${params.attr.id}`
+    params.attr['@resize.window.debounce.500ms'] = `
+      if (chart) {
+        chart.resize()
+      }
+    `
+    let option = cloneDeep(defOption)
+    if (params.attr.option === true) params.attr.option = 'e30='
+    if (params.attr.option) option = defaultsDeep(base64JsonDecode(params.attr.option), defOption)
+    params.attr['x-init'] = `
+      $watch('option', val => {
+        if (chart) chart.setOption(val)
+      })
+    `
+    params.append = `
+      <script>
+        document.addEventListener('alpine:init', () => {
+          Alpine.data('chart${params.attr.id}', () => {
+            let chart
+            return {
+              init () {
+                const el = document.getElementById('${params.attr.id}')
+                chart = echarts.init(el, null, { renderer: 'canvas' })
+                chart.setOption(this.option)
+              },
+              get chart () {
+                return chart
+              },
+              option: ${jsonStringify(option, true)}
+            }
+          })
+        })
+      </script>
+    `
+  }
+}
+
+export default chart

package/waibuBootstrap/theme/component/pagination.js

@@ -0,0 +1,60 @@
+export function getUrlOpts (params = {}) {
+  const { get } = this.plugin.app.bajo.lib._
+  return {
+    params,
+    excludes: [
+      get(this, 'plugin.app.waibu.config.qsKey.lang', 'lang'),
+      get(this, 'plugin.app.waibuMpa.config.darkMode.qsKey', 'dark-mode')
+    ]
+  }
+}
+
+async function pagination (params = {}) {
+  const { attrToObject, paginationLayout, groupAttrs } = this.plugin.app.waibuMpa
+  const { get, isNumber } = this.plugin.app.bajo.lib._
+  const schema = get(this, 'locals.schema', {})
+  if (schema.view.disabled.includes('find')) {
+    params.html = ''
+    return
+  }
+  let { count, limit, page } = attrToObject(params.attr.options)
+  count = count ?? get(this, 'locals.list.count', 0)
+  limit = limit ?? get(this, 'locals.list.limit', 25)
+  page = page ?? get(this, 'locals.list.page', 1)
+  const pages = paginationLayout(count, limit, page) ?? []
+  params.noTag = true
+  const group = groupAttrs(params.attr, ['pagination'])
+  const html = []
+  let icon
+  let attr
+  if (params.attr.first) {
+    icon = await this.buildTag({ tag: 'icon', attr: { name: params.attr.firstIcon ?? 'playSkipStart' } })
+    attr = { disabled: page <= pages[0], href: this._buildUrl(getUrlOpts.call(this, { page: 1 })) }
+    html.push(await this.buildTag({ tag: 'paginationItem', attr, html: icon }))
+  }
+  if (params.attr.prev) {
+    icon = await this.buildTag({ tag: 'icon', attr: { name: params.attr.prevIcon ?? 'playFastBackward' } })
+    attr = { disabled: page <= pages[0], href: this._buildUrl(getUrlOpts.call(this, { page: page - 1 })) }
+    html.push(await this.buildTag({ tag: 'paginationItem', attr, html: icon }))
+  }
+  if (!params.attr.noPages) {
+    for (const p of pages) {
+      attr = { disabled: p === '...', href: this._buildUrl(getUrlOpts.call(this, { page: p })), active: p === page }
+      html.push(await this.buildTag({ tag: 'paginationItem', attr, html: isNumber(p) ? this.req.format(p, 'integer') : p }))
+    }
+  }
+  if (params.attr.next) {
+    icon = await this.buildTag({ tag: 'icon', attr: { name: params.attr.nextIcon ?? 'playFastForward' } })
+    attr = { disabled: page >= pages[pages.length - 1], href: this._buildUrl(getUrlOpts.call(this, { page: page + 1 })) }
+    html.push(await this.buildTag({ tag: 'paginationItem', attr, html: icon }))
+  }
+  if (params.attr.last) {
+    icon = await this.buildTag({ tag: 'icon', attr: { name: params.attr.lastIcon ?? 'playSkipEnd' } })
+    attr = { disabled: page >= pages[pages.length - 1], href: this._buildUrl(getUrlOpts.call(this, { page: pages[pages.length - 1] })) }
+    html.push(await this.buildTag({ tag: 'paginationItem', attr, html: icon }))
+  }
+  params.attr = group.pagination
+  params.html = await this.buildTag({ tag: 'pagination', attr: params.attr, html: html.join('\n') })
+}
+
+export default pagination