@globalbrain/sefirot 4.34.0 → 4.35.0

package/lib/blocks/lens/composables/FieldFactory.ts

@@ -0,0 +1,27 @@
+import { useLang } from '../../../composables/Lang'
+import { type FieldContext } from '../FieldContext'
+import { type FieldData } from '../FieldData'
+import { type Field } from '../fields/Field'
+import { useFieldRegistry } from './FieldRegistry'
+
+export interface FieldFactory {
+  make<T extends FieldData>(fieldData: T): Field<T>
+}
+
+export function useFieldFactory(): FieldFactory {
+  const lang = useLang()
+  const fieldRegistry = useFieldRegistry()
+
+  const ctx: FieldContext = {
+    lang
+  }
+
+  function make<T extends FieldData>(fieldData: T): Field<T> {
+    const provider = fieldRegistry.resolve(fieldData)
+    return provider(ctx, fieldData)
+  }
+
+  return {
+    make
+  }
+}

package/lib/blocks/lens/composables/FieldRegistry.ts

@@ -0,0 +1,16 @@
+import { type InjectionKey, inject, provide } from 'vue'
+import { type FieldRegistry } from '../FieldRegistry'
+
+export const FieldRegistryKey: InjectionKey<FieldRegistry> = Symbol.for('lens-field-registry')
+
+export function provideFieldRegistry(registry: FieldRegistry): void {
+  provide(FieldRegistryKey, registry)
+}
+
+export function useFieldRegistry(): FieldRegistry {
+  const registry = inject(FieldRegistryKey)
+  if (!registry) {
+    throw new Error('FieldRegistry is not provided. Make sure to call SetupLens.')
+  }
+  return registry
+}

package/lib/blocks/lens/composables/FileDownloader.ts

@@ -0,0 +1,10 @@
+import { useGet } from '../../../composables/Api'
+import { type FileDownloader } from '../FileDownloader'
+
+export function useFileDownloader(): FileDownloader {
+  const { execute: fileDownloader } = useGet<any, [url: string]>(async (http, url) => {
+    return http.download(url)
+  })
+
+  return fileDownloader
+}

package/lib/blocks/lens/composables/ResourceFetcher.ts

@@ -0,0 +1,30 @@
+import { ref } from 'vue'
+import { useGet } from '../../../composables/Api'
+import { type ResourceFetchMethod, type ResourceFetcher } from '../ResourceFetcher'
+
+export function useResourceFetcher(): ResourceFetcher {
+  const data = ref<Record<string, any>>({})
+  const pendingList: Record<string, Promise<any> | undefined> = {}
+
+  const { execute: resourceFetcher } = useGet<any, [method: ResourceFetchMethod, url: string]>(async (http, method, url) => {
+    const key = `${method}:${url}`
+
+    if (data.value[key]) {
+      return data.value[key]
+    }
+
+    if (pendingList[key]) {
+      return pendingList[key]
+    }
+
+    pendingList[key] = http[method](url).then((response) => {
+      data.value[key] = response
+      delete pendingList[key]
+      return response
+    })
+
+    return pendingList[key]
+  })
+
+  return resourceFetcher
+}

package/lib/blocks/lens/composables/SetupLens.ts

@@ -0,0 +1,55 @@
+import { type FieldDataType } from '../FieldData'
+import { type FieldDataFor, type FieldProvider, FieldRegistry } from '../FieldRegistry'
+import { provideFieldRegistry } from '../composables/FieldRegistry'
+import { ContentField } from '../fields/ContentField'
+import { DateField } from '../fields/DateField'
+import { DatetimeField } from '../fields/DatetimeField'
+import { FileUploadField } from '../fields/FileUploadField'
+import { IdField } from '../fields/IdField'
+import { LinkField } from '../fields/LinkField'
+import { NumberField } from '../fields/NumberField'
+import { RelatedManyField } from '../fields/RelatedManyField'
+import { SelectField } from '../fields/SelectField'
+import { SlackMessageField } from '../fields/SlackMessageField'
+import { TextField } from '../fields/TextField'
+import { TextareaField } from '../fields/TextareaField'
+import { useFileDownloader } from './FileDownloader'
+import { useResourceFetcher } from './ResourceFetcher'
+
+export interface SetupLens {
+  registerField<T extends FieldDataType>(type: T, provider: FieldProvider<FieldDataFor<T>>): void
+}
+
+export function useSetupLens(): SetupLens {
+  const resourceFetcher = useResourceFetcher()
+  const fileDownloader = useFileDownloader()
+
+  const fieldRegistry = new FieldRegistry()
+
+  provideFieldRegistry(fieldRegistry)
+
+  registerDefaultFields()
+
+  function registerDefaultFields(): void {
+    fieldRegistry.register('content', (ctx, field) => new ContentField(ctx, field))
+    fieldRegistry.register('date', (ctx, field) => new DateField(ctx, field))
+    fieldRegistry.register('datetime', (ctx, field) => new DatetimeField(ctx, field))
+    fieldRegistry.register('file_upload', (ctx, field) => new FileUploadField(ctx, field, fileDownloader))
+    fieldRegistry.register('link', (ctx, field) => new LinkField(ctx, field))
+    fieldRegistry.register('number', (ctx, field) => new NumberField(ctx, field))
+    fieldRegistry.register('id', (ctx, field) => new IdField(ctx, field))
+    fieldRegistry.register('related_many', (ctx, field) => new RelatedManyField(ctx, field, resourceFetcher))
+    fieldRegistry.register('select', (ctx, field) => new SelectField(ctx, field))
+    fieldRegistry.register('slack_message', (ctx, field) => new SlackMessageField(ctx, field))
+    fieldRegistry.register('text', (ctx, field) => new TextField(ctx, field))
+    fieldRegistry.register('textarea', (ctx, field) => new TextareaField(ctx, field))
+  }
+
+  function registerField<T extends FieldDataType>(type: T, provider: FieldProvider<FieldDataFor<T>>): void {
+    fieldRegistry.register(type, provider)
+  }
+
+  return {
+    registerField
+  }
+}

package/lib/blocks/lens/fields/ContentField.ts

@@ -0,0 +1,34 @@
+import { h } from 'vue'
+import SContent from '../../../components/SContent.vue'
+import SMarkdown from '../../../components/SMarkdown.vue'
+import { type TableCell } from '../../../composables/Table'
+import { type ContentFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { Field } from './Field'
+
+export class ContentField extends Field<ContentFieldData> {
+  tableCell(_v: any, _r: any): TableCell {
+    return { type: 'empty' }
+  }
+
+  availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    return {}
+  }
+
+  dataListItemComponent(): any {
+    return null
+  }
+
+  formInputComponent(): any {
+    return this.defineFormInputComponent((_props, _ctx) => {
+      return () => h(SMarkdown, {
+        content: this.ctx.lang === 'ja' ? this.data.bodyJa : this.data.bodyEn
+      }, {
+        default: (slot: any) => {
+          return h(SContent, { innerHTML: slot.rendered })
+        }
+      })
+    })
+  }
+}

package/lib/blocks/lens/fields/DateField.ts

@@ -0,0 +1,66 @@
+import { h } from 'vue'
+import SInputDate from '../../../components/SInputDate.vue'
+import { type TableCell } from '../../../composables/Table'
+import { day } from '../../../support/Day'
+import { type DateFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { TextFilterInput } from '../filter-inputs/TextFilterInput'
+import { Field } from './Field'
+
+export class DateField extends Field<DateFieldData> {
+  tableCell(v: any, _r: any): TableCell {
+    return {
+      type: 'day',
+      value: v ? day(v) : null,
+      format: 'YYYY-MM-DD'
+    }
+  }
+
+  availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    const text = new TextFilterInput()
+
+    return {
+      '=': text,
+      '!=': text
+    }
+  }
+
+  dataListItemComponent(): any {
+    return this.defineDataListItemComponent((value) => {
+      return value ? day(value).format('YYYY-MM-DD') : ''
+    })
+  }
+
+  inputToPayload(value: any): any {
+    if (value === null) {
+      return null
+    }
+
+    return value.format('YYYY-MM-DD')
+  }
+
+  payloadToInput(value: any): any {
+    if (value === null) {
+      return null
+    }
+
+    return day(value)
+  }
+
+  formInputComponent(): any {
+    return this.defineFormInputComponent((props, { emit }) => {
+      return () => h(SInputDate, {
+        'size': 'md',
+        'label': this.formInputLabel(),
+        'placeholder': this.placeholder() || undefined,
+        'help': this.help() || undefined,
+        'modelValue': props.modelValue,
+        'validation': props.validation,
+        'onUpdate:modelValue': (value: any) => {
+          emit('update:modelValue', value)
+        }
+      })
+    })
+  }
+}

package/lib/blocks/lens/fields/DatetimeField.ts

@@ -0,0 +1,35 @@
+import { type TableCell } from '../../../composables/Table'
+import { day } from '../../../support/Day'
+import { type DatetimeFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { TextFilterInput } from '../filter-inputs/TextFilterInput'
+import { Field } from './Field'
+
+export class DatetimeField extends Field<DatetimeFieldData> {
+  tableCell(v: any, _r: any): TableCell {
+    return {
+      type: 'day',
+      value: v ? day(v) : null
+    }
+  }
+
+  availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    const text = new TextFilterInput()
+
+    return {
+      '=': text,
+      '!=': text
+    }
+  }
+
+  dataListItemComponent(): any {
+    return this.defineDataListItemComponent((value) => {
+      return value ? day(value).format('YYYY-MM-DD') : ''
+    })
+  }
+
+  formInputComponent(): any {
+    throw new Error('Not implemented.')
+  }
+}

package/lib/blocks/lens/fields/Field.ts

@@ -0,0 +1,244 @@
+import { type ValidationArgs } from '@vuelidate/core'
+import { defineComponent, h } from 'vue'
+import SDataListItem from '../../../components/SDataListItem.vue'
+import { type DropdownSection } from '../../../composables/Dropdown'
+import { type TableCell, type TableColumn } from '../../../composables/Table'
+import { type FieldContext } from '../FieldContext'
+import { type FieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type LensQuerySort } from '../LensQuery'
+import LensFormOverrideBase from '../components/LensFormOverrideBase.vue'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import * as RuleMapper from '../validation/RuleMapper'
+
+export abstract class Field<T extends FieldData> {
+  /**
+   * The field context, that holds global app context
+   * like the current language.
+   */
+  protected ctx: FieldContext
+
+  /**
+   * The field data returned from the backend.
+   */
+  protected data: T
+
+  /**
+   * Creates a new field instance.
+   */
+  constructor(ctx: FieldContext, fieldData: T) {
+    this.ctx = ctx
+    this.data = fieldData
+  }
+
+  /**
+   * Returns the label value for the field depending
+   * on the current app language.
+   */
+  label(): string {
+    return this.ctx.lang === 'ja' ? this.data.labelJa : this.data.labelEn
+  }
+
+  /**
+   * Returns the placeholder value for the field depending
+   * on the current app language.
+   */
+  placeholder(): string | null {
+    return this.ctx.lang === 'ja'
+      ? (this.data as any).placeholderJa ?? null
+      : (this.data as any).placeholderEn ?? null
+  }
+
+  /**
+   * Returns the help text value for the field depending
+   * on the current app language.
+   */
+  help(): string | null {
+    return this.ctx.lang === 'ja'
+      ? (this.data as any).helpJa ?? null
+      : (this.data as any).helpEn ?? null
+  }
+
+  /**
+   * Renders the table column configuration for the field.
+   */
+  tableColumn(): TableColumn<any, any, any, any> {
+    return {
+      label: this.label(),
+      freeze: this.data.freeze,
+      width: `${this.data.width}px`,
+      cell: (v, r) => this.tableCell(v, r)
+    }
+  }
+
+  /**
+   * Renders the table sort menu for the field. The sort maybe null when
+   * the field `sortable` option is false.
+   */
+  tableSortMenu(onSortUpdated: (sort: LensQuerySort) => void): DropdownSection | null {
+    if (!this.data.sortable) {
+      return null
+    }
+
+    const trans = {
+      en: { sort_asc: 'Sort ascending (A...Z)', sort_desc: 'Sort descending (Z...A)' },
+      ja: { sort_asc: 'ソート: 昇順 (A...Z)', sort_desc: 'ソート: 降順 (Z...A)' }
+    }
+
+    const t = trans[this.ctx.lang]
+
+    return {
+      type: 'menu',
+      options: [
+        { label: t.sort_asc, onClick: () => onSortUpdated?.([this.data.key, 'asc']) },
+        { label: t.sort_desc, onClick: () => onSortUpdated?.([this.data.key, 'desc']) }
+      ]
+    }
+  }
+
+  /**
+   * Renders the table filter menu for the field. The filter maybe null when
+   * the field has no available filters.
+   */
+  async tableFilterMenu(_filters: any[], _onFilterUpdated: (filters: any[]) => void): Promise<DropdownSection | null> {
+    return null
+  }
+
+  /**
+   * Returns the "in" filter values for the given key from the filters array.
+   */
+  protected inFilterValueFor(key: string, filters: any[]): any[] {
+    for (const f of filters) {
+      if (f[0] !== key) {
+        continue
+      }
+      if (f[1] !== 'in' || !Array.isArray(f[2])) {
+        continue
+      }
+      return f[2]
+    }
+    return []
+  }
+
+  /**
+   * Returns the table cell definition for the field.
+   */
+  abstract tableCell(v: any, r: any): TableCell
+
+  /**
+   * Returns the available filter operators for the field.
+   */
+  abstract availableFilters(): Partial<Record<FilterOperator, FilterInput>>
+
+  /**
+   * Returns the available filter operators as an array of strings.
+   */
+  availableFilterOperators(): FilterOperator[] {
+    return Object.keys(this.availableFilters()) as FilterOperator[]
+  }
+
+  /**
+   * Returns the filter input by operator.
+   */
+  filterInputByOperator(operator: FilterOperator): FilterInput {
+    const filters = this.availableFilters()
+    if (!filters[operator]) {
+      throw new Error(`Filter operator "${operator}" is not available for this field.`)
+    }
+    return filters[operator]
+  }
+
+  /**
+   * Returns the override inputs for the field.
+   */
+  overrideForm(): any {
+    return defineComponent((props) => {
+      return () => h(LensFormOverrideBase, {
+        name: props.name,
+        field: props.field,
+        labelEn: props.override.labelEn,
+        labelJa: props.override.labelJa,
+        width: props.override.width,
+        freeze: props.override.freeze
+      })
+    }, {
+      props: [
+        'name',
+        'field',
+        'override'
+      ]
+    })
+  }
+
+  /**
+   * Returns the data list item component for the field.
+   */
+  abstract dataListItemComponent(): any
+
+  /**
+   * Helper function to define the data list item component.
+   */
+  protected defineDataListItemComponent(fn: (value: any) => any, options: any = null): any {
+    return defineComponent((props) => {
+      return () => h(SDataListItem, options, {
+        label: () => this.label(),
+        value: () => fn(props.value)
+      })
+    }, {
+      props: ['value']
+    })
+  }
+
+  /**
+   * Returns the value should be used when the input is empty.
+   */
+  inputEmptyValue(): any {
+    return null
+  }
+
+  /**
+   * Converts the form input value to the payload value.
+   */
+  inputToPayload(value: any): any {
+    return value
+  }
+
+  /**
+   * Converts the payload value to the form input value.
+   */
+  payloadToInput(value: any): any {
+    return value
+  }
+
+  /**
+   * Returns the form input component for the field.
+   */
+  abstract formInputComponent(): any
+
+  /**
+   * Helper function to define the form input component.
+   */
+  protected defineFormInputComponent(fn: (props: any, emit: any) => any): any {
+    return defineComponent(fn, {
+      props: ['modelValue', 'validation'],
+      emits: ['update:modelValue']
+    })
+  }
+
+  /**
+   * Generate the form input label based on required status.
+   */
+  protected formInputLabel(): string {
+    return this.data.required ? `${this.label()} *` : this.label()
+  }
+
+  /**
+   * Generates the vuelidate validation rules for the field.
+   */
+  generateValidationRules(): ValidationArgs {
+    return RuleMapper.map([
+      ...(this.data.required ? [{ type: 'required' } as const] : []),
+      ...this.data.rules
+    ])
+  }
+}

package/lib/blocks/lens/fields/FileUploadField.ts

@@ -0,0 +1,63 @@
+import { h } from 'vue'
+import SDescFile from '../../../components/SDescFile.vue'
+import SInputFileUpload from '../../../components/SInputFileUpload.vue'
+import { type TableCell } from '../../../composables/Table'
+import { type FileUploadFieldData } from '../FieldData'
+import { type FileDownloader } from '../FileDownloader'
+import { type FilterOperator } from '../FilterOperator'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { Field } from './Field'
+
+export class FileUploadField extends Field<FileUploadFieldData> {
+  downloader: FileDownloader
+
+  constructor(ctx: any, fieldData: FileUploadFieldData, downloader: FileDownloader) {
+    super(ctx, fieldData)
+    this.downloader = downloader
+  }
+
+  tableCell(v: any, _r: any): TableCell {
+    return {
+      type: 'text',
+      value: v
+    }
+  }
+
+  availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    return {}
+  }
+
+  dataListItemComponent(): any {
+    return this.defineDataListItemComponent((value) => {
+      if (value === null) {
+        return null
+      }
+      return h(SDescFile, {
+        item: value.map((filePath: any) => ({
+          name: filePath.split('/').pop(),
+          onDownload: () => this.downloader(filePath)
+        }))
+      })
+    })
+  }
+
+  inputEmptyValue(): any {
+    return []
+  }
+
+  formInputComponent(): any {
+    return this.defineFormInputComponent((props, { emit }) => {
+      return () => h(SInputFileUpload, {
+        'size': 'mini',
+        'label': this.formInputLabel(),
+        'placeholder': this.placeholder() || undefined,
+        'help': this.help() || undefined,
+        'modelValue': props.modelValue,
+        'validation': props.validation,
+        'onUpdate:modelValue': (value: any) => {
+          emit('update:modelValue', value)
+        }
+      })
+    })
+  }
+}

package/lib/blocks/lens/fields/IdField.ts

@@ -0,0 +1,34 @@
+import { type TableCell } from '../../../composables/Table'
+import { type IdFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { NumberFilterInput } from '../filter-inputs/NumberFilterInput'
+import { Field } from './Field'
+
+export class IdField extends Field<IdFieldData> {
+  tableCell(v: any, _r: any): TableCell {
+    return {
+      type: 'text',
+      value: v.display,
+      link: v.path,
+      color: 'info'
+    }
+  }
+
+  availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    const number = new NumberFilterInput()
+
+    return {
+      '=': number,
+      '!=': number
+    }
+  }
+
+  dataListItemComponent(): any {
+    throw new Error('Not implemented.')
+  }
+
+  formInputComponent() {
+    throw new Error('Not implemented.')
+  }
+}

package/lib/blocks/lens/fields/LinkField.ts

@@ -0,0 +1,53 @@
+import { h } from 'vue'
+import SInputText from '../../../components/SInputText.vue'
+import SLink from '../../../components/SLink.vue'
+import { type TableCell } from '../../../composables/Table'
+import { type LinkFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { TextFilterInput } from '../filter-inputs/TextFilterInput'
+import { Field } from './Field'
+
+export class LinkField extends Field<LinkFieldData> {
+  tableCell(v: any, _r: any): TableCell {
+    return {
+      type: 'text',
+      value: v,
+      link: v,
+      color: 'info'
+    }
+  }
+
+  availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    const text = new TextFilterInput()
+
+    return {
+      '=': text,
+      '!=': text
+    }
+  }
+
+  dataListItemComponent(): any {
+    return this.defineDataListItemComponent((value) => {
+      return h(SLink, { href: value }, () => value)
+    }, {
+      lineClamp: 1
+    })
+  }
+
+  formInputComponent(): any {
+    return this.defineFormInputComponent((props, { emit }) => {
+      return () => h(SInputText, {
+        'size': 'md',
+        'label': this.formInputLabel(),
+        'placeholder': this.placeholder() || undefined,
+        'help': this.help() || undefined,
+        'modelValue': props.modelValue,
+        'validation': props.validation,
+        'onUpdate:modelValue': (value: any) => {
+          emit('update:modelValue', value)
+        }
+      })
+    })
+  }
+}