@globalbrain/sefirot 4.34.1 → 4.35.0

package/lib/blocks/lens/components/LensFormOverrideBase.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import SInputCheckbox from '../../../components/SInputCheckbox.vue'
+import SInputNumber from '../../../components/SInputNumber.vue'
+import SInputText from '../../../components/SInputText.vue'
+import { useTrans } from '../../../composables/Lang'
+import { useValidation } from '../../../composables/Validation'
+import { maxLength, maxValue } from '../../../validation/rules'
+import { type FieldData } from '../FieldData'
+
+const props = defineProps<{
+  name: string
+  field: FieldData
+}>()
+
+const labelEn = defineModel<string | null>('labelEn', { required: true })
+const labelJa = defineModel<string | null>('labelJa', { required: true })
+const width = defineModel<number | null>('width', { required: true })
+const freeze = defineModel<boolean>('freeze', { required: true })
+
+const emit = defineEmits<{
+  cancel: []
+  saved: [field: any]
+}>()
+
+const { t } = useTrans({
+  en: {
+    title: 'Configure field',
+    d_key: 'Field key',
+    d_type: 'Field type',
+    i_label_en: 'Label (EN)',
+    i_label_en_ph: props.field.labelEn,
+    i_label_ja: 'Label (JA)',
+    i_label_ja_ph: props.field.labelJa,
+    i_width: 'Column width',
+    i_width_ph: '128',
+    i_freeze: 'Freeze column',
+    a_cancel: 'Cancel',
+    a_apply: 'Finish editing'
+  },
+  ja: {
+    title: '項目情報を設定',
+    d_key: '項目キー',
+    d_type: '項目タイプ',
+    i_label_en: 'ラベル (EN)',
+    i_label_en_ph: props.field.labelEn,
+    i_label_ja: 'ラベル (JA)',
+    i_label_ja_ph: props.field.labelJa,
+    i_width: '列の幅',
+    i_width_ph: '128',
+    i_freeze: '列をフリーズ',
+    a_cancel: 'キャンセル',
+    a_apply: '編集を完了'
+  }
+})
+
+const { validation, validateAndNotify } = useValidation(() => ({
+  labelEn: labelEn.value,
+  labelJa: labelJa.value,
+  width: width.value,
+  freeze: freeze.value
+}), {
+  labelEn: { maxLength: maxLength(255) },
+  labelJa: { maxLength: maxLength(255) },
+  width: { maxValue: maxValue(10000) }
+})
+
+function isNotNullOrSame<T>(f: T | null, o: T) {
+  return (f !== null && f !== o)
+}
+
+async function onSave() {
+  if (!(await validateAndNotify())) {
+    return
+  }
+  const data: Partial<FieldData> = {}
+  if (isNotNullOrSame(labelEn.value, props.field.labelEn)) {
+    data.labelEn = labelEn.value!
+  }
+  if (isNotNullOrSame(labelJa.value, props.field.labelJa)) {
+    data.labelJa = labelJa.value!
+  }
+  if (isNotNullOrSame(width.value, props.field.width)) {
+    data.width = width.value!
+  }
+  if (isNotNullOrSame(freeze.value, props.field.freeze)) {
+    data.freeze = freeze.value!
+  }
+  emit('saved', data)
+}
+</script>
+
+<template>
+  <SCard class="LensFormOverrideBase" size="large">
+    <SCardBlock class="s-p-32">
+      <SDoc>
+        <SContent>
+          <h2>{{ t.title }}</h2>
+        </SContent>
+        <div class="list">
+          <div class="item">
+            <div class="key">{{ t.d_key }}</div>
+            <div class="value subtle">{{ name }}</div>
+          </div>
+          <div class="item">
+            <div class="key">{{ t.d_type }}</div>
+            <div class="value subtle">{{ field.type }}</div>
+          </div>
+          <div class="item">
+            <div class="key">{{ t.i_label_en }}</div>
+            <div class="value">
+              <SInputText
+                v-model="labelEn"
+                size="mini"
+                :placeholder="t.i_label_en_ph"
+                :validation="validation.labelEn"
+              />
+            </div>
+          </div>
+          <div class="item">
+            <div class="key">{{ t.i_label_ja }}</div>
+            <div class="value">
+              <SInputText
+                v-model="labelJa"
+                size="mini"
+                :placeholder="t.i_label_ja_ph"
+                :validation="validation.labelJa"
+              />
+            </div>
+          </div>
+          <div class="item">
+            <div class="key">{{ t.i_width }}</div>
+            <div class="value">
+              <SInputNumber
+                v-model="width"
+                size="mini"
+                :placeholder="t.i_width_ph"
+                :validation="validation.width"
+              />
+            </div>
+          </div>
+          <div class="item">
+            <div class="key">{{ t.i_freeze }}</div>
+            <div class="value">
+              <SInputCheckbox v-model="freeze" />
+            </div>
+          </div>
+        </div>
+      </SDoc>
+    </SCardBlock>
+    <SCardBlock class="s-py-16 s-px-32">
+      <SControl size="md">
+        <SControlRight>
+          <SControlButton
+            :label="t.a_cancel"
+            @click="$emit('cancel')"
+          />
+          <SControlButton
+            mode="info"
+            :label="t.a_apply"
+            @click="onSave"
+          />
+        </SControlRight>
+      </SControl>
+    </SCardBlock>
+  </SCard>
+</template>
+
+<style scoped lang="postcss">
+.LensFormOverrideBase {
+  --c-bg-elv-2: var(--c-bg-1);
+  --c-bg-elv-3: var(--c-bg-1);
+}
+
+.fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+}
+
+:deep(.item) {
+  display: grid;
+  grid-template-columns: 168px 1fr;
+  align-items: center;
+  min-height: 48px;
+}
+
+:deep(.key) {
+  font-size: 14px;
+  color: var(--c-text-2);
+}
+
+:deep(.value) {
+  font-size: 14px;
+
+  &.subtle {
+    color: var(--c-text-2);
+  }
+}
+</style>

package/lib/blocks/lens/components/LensFormView.vue

@@ -0,0 +1,347 @@
+<script setup lang="ts">
+import IconCheck from '~icons/ph/check'
+import IconDotsSixVertical from '~icons/ph/dots-six-vertical'
+import IconGear from '~icons/ph/gear'
+import IconMinus from '~icons/ph/minus'
+import IconTrash from '~icons/ph/trash'
+import { cloneDeep } from 'lodash-es'
+import { computed, ref } from 'vue'
+import { useDraggable } from 'vue-draggable-plus'
+import SButton from '../../../components/SButton.vue'
+import SInputCheckbox from '../../../components/SInputCheckbox.vue'
+import { useLang, useTrans } from '../../../composables/Lang'
+import { usePower } from '../../../composables/Power'
+import { type FieldData } from '../FieldData'
+import LensFormOverride from './LensFormOverride.vue'
+
+interface Props {
+  select: string[]
+  selectable: string[]
+  fields: Record<string, FieldData>
+  overrides: Record<string, Partial<FieldData>>
+}
+
+interface SelectOption {
+  uid: number
+  key: string
+  value: boolean
+  isEmpty: boolean
+  field: FieldData | null
+  override: Partial<FieldData>
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: []
+  apply: [select: string[], selectable: string[], overrides: Record<string, Partial<FieldData>>]
+}>()
+
+const lang = useLang()
+
+const { t } = useTrans({
+  en: {
+    title: 'Manage table view',
+    a_select_all: 'Select all',
+    a_clear_all: 'Clear all',
+    a_cancel: 'Cancel',
+    a_apply: 'Apply changes'
+  },
+  ja: {
+    title: 'テーブルの表示を更新する',
+    a_select_all: 'すべて選択',
+    a_clear_all: 'すべて解除',
+    a_cancel: 'キャンセル',
+    a_apply: '変更を適用'
+  }
+})
+
+const editDialog = usePower()
+
+let _uid = 0
+
+const el = ref<HTMLElement | null>(null)
+
+const _select = ref(cloneDeep(props.select))
+const _selectable = ref(cloneDeep(props.selectable))
+
+const _selectDict = computed(() => {
+  return _select.value.reduce((acc, s) => {
+    acc[s] = true
+    return acc
+  }, {} as Record<string, boolean>)
+})
+
+const _overrides = cloneDeep(props.overrides) ?? {}
+
+const selectOptions = ref(createSelectOptions())
+
+const selectedOption = ref<SelectOption | null>(null)
+
+useDraggable(el, selectOptions, {
+  handle: '.handle'
+})
+
+function createSelectOptions(): SelectOption[] {
+  return _selectable.value.map((s) => {
+    return {
+      uid: _uid++,
+      key: s,
+      value: _selectDict.value[s],
+      isEmpty: s === '__empty__',
+      field: props.fields[s],
+      override: _overrides[s] || {}
+    }
+  })
+}
+
+function getName(s: SelectOption): string {
+  return lang === 'ja'
+    ? s.override.labelJa || s.field?.labelJa || ''
+    : s.override.labelEn || s.field?.labelEn || ''
+}
+
+function onEdit(option: SelectOption) {
+  selectedOption.value = option
+  editDialog.on()
+}
+
+function onEdited(field: Partial<FieldData>) {
+  selectedOption.value!.override = field
+  editDialog.off()
+  selectedOption.value = null
+}
+
+function onSelectAll() {
+  selectOptions.value.forEach((s) => {
+    s.value = true
+  })
+}
+
+function onClearAll() {
+  selectOptions.value.forEach((s) => {
+    s.value = false
+  })
+}
+
+function onRemove(uid: number) {
+  const index = selectOptions.value.findIndex((s) => s.uid === uid)
+  if (index !== -1) {
+    selectOptions.value.splice(index, 1)
+  }
+}
+
+async function onApply() {
+  const select = selectOptions.value.filter((s) => s.value).map((s) => s.key)
+
+  const selectable = selectOptions.value.map((s) => s.key)
+
+  const overrides = selectOptions.value.reduce<Record<string, Partial<FieldData>>>((acc, s) => {
+    if (s.override && Object.keys(s.override).length > 0) {
+      acc[s.key] = s.override
+    }
+    return acc
+  }, {} as Record<string, Partial<FieldData>>)
+
+  emit('apply', select, selectable, overrides)
+}
+</script>
+
+<template>
+  <SCard class="LensFormView" size="medium">
+    <SCardBlock class="s-p-32">
+      <SDoc>
+        <SContent>
+          <h2>{{ t.title }}</h2>
+        </SContent>
+        <div class="main">
+          <div class="actions">
+            <SButton
+              type="outline"
+              size="small"
+              mode="mute"
+              :icon="IconCheck"
+              :label="t.a_select_all"
+              @click="onSelectAll"
+            />
+            <SButton
+              type="outline"
+              size="small"
+              mode="mute"
+              :icon="IconMinus"
+              :label="t.a_clear_all"
+              @click="onClearAll"
+            />
+          </div>
+          <div ref="el" class="list">
+            <div
+              v-for="s, i in selectOptions"
+              :key="s.uid"
+              class="item"
+              :class="{ selected: s.value, empty: s.isEmpty }"
+            >
+              <div class="input" role="button" @click="selectOptions[i].value = !s.value">
+                <div class="handle">
+                  <IconDotsSixVertical class="handle-svg" />
+                </div>
+                <div class="body">
+                  <SInputCheckbox
+                    :model-value="s.value"
+                  />
+                  <div class="key">
+                    {{ getName(s) }}
+                  </div>
+                </div>
+              </div>
+              <div class="remove">
+                <SButton
+                  v-if="!s.isEmpty"
+                  type="text"
+                  size="small"
+                  mode="mute"
+                  :icon="IconGear"
+                  @click="onEdit(s)"
+                />
+                <SButton
+                  v-if="s.isEmpty"
+                  type="text"
+                  size="small"
+                  mode="mute"
+                  :icon="IconTrash"
+                  @click="onRemove(s.uid)"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="actions" />
+        </div>
+      </SDoc>
+    </SCardBlock>
+    <SCardBlock class="s-py-16 s-px-32">
+      <SControl size="md">
+        <SControlRight>
+          <SControlButton
+            :label="t.a_cancel"
+            @click="$emit('cancel')"
+          />
+          <SControlButton
+            mode="info"
+            :label="t.a_apply"
+            @click="onApply"
+          />
+        </SControlRight>
+      </SControl>
+    </SCardBlock>
+
+    <SModal :open="editDialog.state.value" @close="editDialog.off()">
+      <LensFormOverride
+        v-if="selectedOption?.field && selectedOption?.override"
+        :name="selectedOption.key"
+        :field="selectedOption.field"
+        :override="selectedOption.override"
+        @cancel="editDialog.off()"
+        @saved="onEdited"
+      />
+    </SModal>
+  </SCard>
+</template>
+
+<style scoped lang="postcss">
+.LensFormView {
+  --c-bg-elv-2: var(--c-bg-1);
+  --c-bg-elv-3: var(--c-bg-1);
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 6px;
+
+  &.selected .key {
+    color: var(--c-text-1);
+  }
+
+  &.selected.empty .key {
+    color: var(--c-text-2);
+  }
+
+  &.empty .key {
+    color: var(--c-text-3);
+  }
+}
+
+.input {
+  display: flex;
+  flex-grow: 1;
+  gap: 1px;
+  border: 1px dashed var(--c-divider);
+  border-radius: 6px;
+  background-color: var(--c-gutter);
+  overflow: hidden;
+  transition: border-color 0.25s;
+
+  &:hover {
+    border-color: var(--c-border-mute-2);
+  }
+}
+
+.handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background-color: var(--c-bg-1);
+  cursor: grab;
+}
+
+.handle-svg {
+  width: 16px;
+  height: 16px;
+  color: var(--c-text-2);
+}
+
+.body {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: var(--c-bg-1);
+}
+
+.key {
+  flex-grow: 1;
+  padding: 0 8px;
+  line-height: 32px;
+  font-size: 14px;
+  color: var(--c-text-3);
+  transition: color 0.25s;
+}
+
+.remove {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 32px;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 8px;
+}
+</style>

package/lib/blocks/lens/components/LensTable.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computedAsync } from '@vueuse/core'
+import { cloneDeep } from 'lodash-es'
+import { computed } from 'vue'
+import STable from '../../../components/STable.vue'
+import { type DropdownSection } from '../../../composables/Dropdown'
+import { type TableColumns, useTable } from '../../../composables/Table'
+import { type FieldData } from '../FieldData'
+import { type LensQuerySort } from '../LensQuery'
+import { type LensResult } from '../LensResult'
+import { useFieldFactory } from '../composables/FieldFactory'
+
+const props = defineProps<{
+  result?: LensResult
+  overrides?: Record<string, Partial<FieldData>>
+  loading: boolean
+  selected?: number[]
+}>()
+
+const emit = defineEmits<{
+  'update:selected': [value: number[]]
+  'filter-updated': [filter: any[]]
+  'sort-updated': [sort: LensQuerySort]
+  'cell-clicked': [value: any, record: any]
+}>()
+
+const fieldFactory = useFieldFactory()
+
+const records = computed(() => props.result?.data ?? [])
+
+const orders = computed(() => [
+  ...(props.result?.query.select ?? []),
+  '__last_empty__'
+])
+
+const columns = computedAsync(async () => {
+  const r = props.result
+
+  if (!r) {
+    return {}
+  }
+
+  // Prepare base columns that has `__last_empty__` to fill the end space.
+  const columns: TableColumns<any, any, any> = {
+    __last_empty__: {
+      cell: { type: 'empty' }
+    }
+  }
+
+  // Build the lest of columns based on selected fields.
+  for (const i in r.query.select) {
+    const key = r.query.select[i]
+
+    const _fieldData = cloneDeep(r.fields[key])
+
+    const overriddenFieldData = Object.assign(
+      _fieldData,
+      props.overrides?.[key] ?? {}
+    )
+
+    const field = fieldFactory.make(overriddenFieldData)
+
+    columns[key] = field.tableColumn()
+
+    const dropdown: DropdownSection[] = []
+
+    const sortMenu = field.tableSortMenu(onSortUpdated)
+    const filterMenu = await field.tableFilterMenu(r.query.filters, onFilterUpdated)
+
+    if (sortMenu) {
+      dropdown.push(sortMenu)
+    }
+
+    if (filterMenu) {
+      dropdown.push(filterMenu)
+    }
+
+    if (dropdown.length > 0) {
+      columns[key].dropdown = dropdown
+    }
+  }
+
+  return columns
+}, {})
+
+const table = useTable({
+  records,
+  orders,
+  columns,
+  borderless: true
+})
+
+function onSelect(value?: number[]) {
+  emit('update:selected', value ?? [])
+}
+
+function onFilterUpdated(filter: any[]) {
+  emit('filter-updated', filter)
+}
+
+function onSortUpdated(sort: LensQuerySort) {
+  emit('sort-updated', sort)
+}
+</script>
+
+<template>
+  <div class="LensTable" :class="{ 'is-loading': loading, 'is-empty': (result?.data.length ?? 0) === 0 }">
+    <STable
+      v-if="Object.keys(columns).length > 0"
+      class="table"
+      :options="table"
+      :selected
+      @update:selected="onSelect"
+    />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.LensTable {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+  background-color: var(--c-bg-1);
+
+  /**
+   * Set all numbers to use tabular numbers. This is a current hack to apply
+   * mono-spaced numbers to fields like Opportunity ID ("OPP-0017263").
+   * In ideal scenario, we should be able to set this option per field base,
+   * but it is quite tricky to scope the desired field in CSS at the moment.
+   */
+  font-feature-settings: "tnum";
+
+  --c-bg-elv-3: var(--c-bg-1);
+}
+
+.LensTable.is-loading,
+.LensTable.is-empty {
+  .table {
+    border-bottom: 1px solid transparent;
+  }
+}
+
+.LensTable :deep(.col-__select) {
+  --table-col-position: sticky;
+  --table-col-z-index: 50;
+}
+
+.LensTable :deep(.col-__last_empty__) { --table-col-width: 560px; }
+
+.table {
+  border-bottom: 1px solid var(--c-gutter);
+}
+</style>