waibu-db/extend/waibuBootstrap/theme/component/widget/btn-columns.js

DB Helper

import wdbBase from '../wdb-base.js'

async function btnColumns () {
  const WdbBase = await wdbBase.call(this)

  return class WdbBtnColumns extends WdbBase {
    build = async () => {
      const { get, isEmpty, without } = this.app.lib._
      const { jsonStringify } = this.app.waibuMpa
      const { req } = this.component
      const qsKey = this.app.waibu.config.qsKey
      const schema = get(this, 'component.locals.schema', {})
      const count = get(this, 'component.locals.list.count', 0)
      if (count === 0) this.params.attr.triggerDisabled = true
      if (schema.view.disabled.includes('find')) {
        this.params.html = ''
        return
      }
      let fields = without(get(this, `component.locals._meta.query.${qsKey.fields}`, '').split(','), '')
      if (isEmpty(fields)) fields = without(schema.view.fields, 'id')
      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')
      for (const f of schema.view.fields) {
        // if (allFields.length > 0 && !allFields.includes(f)) continue
        const prop = schema.properties.find(p => p.name === f)
        if (!prop) continue
        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 }))
      }
      const href = this.component.buildUrl({ exclude: [qsKey.fields] })
      const menuPrepend = ['<form class="mt-2 mb-3 mx-3" ']
      menuPrepend.push(`x-data="{
        selected: ${jsonStringify(fields, true)},
        all: ${jsonStringify(schema.view.fields, true)}
      }"`)
      menuPrepend.push(`x-init="
        $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 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 ?? 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
    }
  }
}

export default btnColumns