@operato/data-grist 1.11.22 → 1.12.0

package/src/renderers/ox-grist-renderer-tree.ts

@@ -0,0 +1,182 @@
+import { PropertyValues, css, html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+
+import { OxGristRenderer } from './ox-grist-renderer'
+
+@customElement('ox-grist-tree-renderer')
+export class OxGristRendererTree extends OxGristRenderer {
+  static styles = css`
+    :host {
+      overflow: hidden;
+    }
+
+    div[wrap] {
+      position: relative;
+
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      width: 100%;
+      padding-left: calc(var(--tree-depth, 0) * 18px);
+    }
+
+    span[expander] {
+      display: inline-block;
+      vertical-align: middle;
+      width: 12px;
+      height: 20px;
+      cursor: pointer;
+      position: relative;
+    }
+
+    span[expander][collapsed]::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-25%, -50%) rotate(-90deg);
+      content: ' ';
+      border: 5px solid transparent;
+      border-top: 5px solid var(--primary-color, #1890ff);
+    }
+
+    span[expander][expanded]::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -25%);
+      content: ' ';
+      border: 5px solid transparent;
+      border-top: 5px solid var(--primary-color, #1890ff);
+    }
+
+    span[checkbox] {
+      display: inline-block;
+      vertical-align: middle;
+      width: 12px;
+      height: 20px;
+      cursor: pointer;
+      position: relative;
+    }
+
+    span[checkbox]::before {
+      cursor: pointer;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: ' ';
+      display: block;
+      width: 10px;
+      height: 10px;
+      border: 1px solid var(--primary-color, #1890ff);
+      border-radius: 2px;
+    }
+
+    span[label][selected] {
+      background-color: var(--primary-color, #1890ff);
+    }
+
+    span[checkbox][checked='checked']::before {
+      background-color: var(--primary-color, #1890ff);
+      border-color: var(--primary-color, #1890ff);
+    }
+
+    span[checkbox][checked='checked']::after {
+      position: absolute;
+      content: ' ';
+      display: block;
+      top: 50%;
+      left: 50%;
+      width: 3px;
+      height: 7px;
+      border: 2px solid #fff;
+      border-top: none;
+      border-left: none;
+      -webkit-transform: translate(-50%, -50%) rotate(45deg);
+      -ms-transform: translate(-50%, -50%) rotate(45deg);
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    span[checkbox][checked='half-checked']::before {
+      background-color: var(--primary-color, #1890ff);
+      border-color: var(--primary-color, #1890ff);
+    }
+
+    span[checkbox][checked='half-checked']::after {
+      position: absolute;
+      content: ' ';
+      display: block;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 10px;
+      height: 2px;
+      background-color: #fff;
+    }
+  `
+
+  @state() private checked?: 'checked' | 'half-checked' | 'unchecked'
+  @state() private expanded?: boolean = false
+
+  get rendererTemplate() {
+    var { childrenProperty = 'children' } = this.column.record.options || {}
+    var { [childrenProperty]: children } = this.record
+
+    const expandable = children && children.length > 0
+
+    return html`
+      <div wrap>
+        ${expandable
+          ? html`
+              <span
+                expander
+                @click=${this.onClickExpander.bind(this)}
+                ?expanded=${this.expanded}
+                ?collapsed=${!this.expanded}
+              ></span>
+            `
+          : html`<span expander></span>`}
+        <span checkbox @click=${this.onClickCheckbox.bind(this)} checked=${ifDefined(this.checked)}></span>
+        <span label>${this.value}</span>
+      </div>
+    `
+  }
+
+  updated(changes: PropertyValues<this>) {
+    var { __depth__, __check_in_tree__, __expanded__ } = this.record
+    this.checked = __check_in_tree__
+    this.expanded = __expanded__
+
+    this.style.setProperty('--tree-depth', String(__depth__))
+  }
+
+  onClickCheckbox(e: MouseEvent) {
+    e.stopPropagation()
+
+    this.dispatchEvent(
+      new CustomEvent('check-in-tree', {
+        bubbles: true,
+        composed: true,
+        detail: this.record
+      })
+    )
+
+    this.requestUpdate()
+  }
+
+  onClickExpander(e: MouseEvent) {
+    e.stopPropagation()
+
+    this.dispatchEvent(
+      new CustomEvent(this.record.__expanded__ ? 'collapsed' : 'expanded', {
+        bubbles: true,
+        composed: true,
+        detail: this.record
+      })
+    )
+
+    this.requestUpdate()
+  }
+}

package/src/renderers/registry.ts

@@ -19,6 +19,7 @@ import { OxGristRendererProgress } from './ox-grist-renderer-progress.js'
 import { OxGristRendererSelect } from './ox-grist-renderer-select.js'
 import { OxGristRendererText } from './ox-grist-renderer-text.js'
 import { OxGristRendererTextarea } from './ox-grist-renderer-textarea.js'
+import { OxGristRendererTree } from './ox-grist-renderer-tree.js'
 import { OxGristRenderer } from './ox-grist-renderer.js'
 
 interface OxGristRendererConstructor {
@@ -54,7 +55,8 @@ var RENDERERS: {
   link: OxGristRendererLink,
   image: OxGristRendererImage,
   file: OxGristRendererFile,
-  json5: OxGristRendererJson5
+  json5: OxGristRendererJson5,
+  tree: OxGristRendererTree
 }
 
 export function registerRenderer(type: string, renderer: FieldRenderer) {

package/src/types.ts

@@ -16,6 +16,7 @@ export type GristConfig = {
   columns: ColumnConfig[]
   rows: RowsConfig
   list: ListConfig
+  tree: TreeConfig
   pagination?: PaginationConfig
   sorters?: SortersConfig
   filters?: FiltersConfig
@@ -234,6 +235,10 @@ export type ListConfig = {
   details: string[]
 }
 
+export type TreeConfig = {
+  childrenProperty?: string
+}
+
 export type ImexConfig = {
   header: string
   key: string
@@ -276,12 +281,17 @@ export type RowSelectableConfig = {
 export type GristRecord = {
   id?: string
   name?: string
+  children?: GristRecord[]
   __seq__?: number
   __dirty__?: string
   __selected__?: boolean
   __changes__?: object[]
   __dirtyfields__?: { [key: string]: any }
   __origin__?: any
+  __collapsed__?: boolean
+  __depth__?: number
+  __check_in_tree__?: 'checked' | 'half-checked' | 'unchecked'
+  // __children__?: GristRecord[]
   [key: string]: any
 }
 

package/stories/accumulator.stories.ts

@@ -17,7 +17,7 @@ import {
 } from '../src/types.js'
 
 const fetchHandler: FetchHandler = async ({ page, limit }) => {
-  var total = 3
+  var total = 25
   var start = (page! - 1) * limit!
 
   await new Promise(resolve => setTimeout(resolve, 500))
@@ -192,6 +192,10 @@ const Template: Story<ArgTypes> = ({
   <link href="/themes/grist-theme.css" rel="stylesheet" />
 
   <style>
+    ox-grist {
+      height: 600px;
+    }
+
     [slot='headroom'] {
       display: flex;
       flex-direction: row;

package/stories/grist-modes.stories.ts

@@ -347,6 +347,11 @@ const Template: Story<ArgTypes> = ({
   <link href="/themes/grist-theme.css" rel="stylesheet" />
 
   <style>
+    ox-grist {
+      width: 100%;
+      height: 600px;
+    }
+
     [slot='headroom'] {
       display: flex;
       flex-direction: row;

package/stories/tree-column.stories.ts

@@ -0,0 +1,353 @@
+import '../src/index.js'
+import '../src/filters/filters-form.js'
+import '../src/sorters/sorters-control.js'
+import '../src/record-view/record-creator.js'
+import '@operato/popup/ox-popup-list.js'
+import '@material/mwc-icon'
+
+import { html, TemplateResult } from 'lit'
+
+import {
+  ColumnConfig,
+  FetchHandler,
+  GristClassifier,
+  GristEventHandlerSet,
+  GristRecord,
+  ValidationCallback
+} from '../src/types.js'
+
+const fetchHandler: FetchHandler = async ({ page, limit }) => {
+  var total = 120993
+  var start = (page! - 1) * limit!
+
+  await new Promise(resolve => setTimeout(resolve, 500))
+
+  var records = Array(limit! * page! > total ? total % limit! : limit)
+    .fill('')
+    .map((item, idx) => {
+      return {
+        id: String(idx),
+        name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
+        description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
+        active: Math.round(Math.random() * 2) % 2 ? true : false,
+        accval: Math.random(),
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        children: [
+          ...Array.from({ length: 3 }, (_, idx) => {
+            return {
+              id: `sub:${idx}`,
+              name: 'subitem' + idx,
+              description: 'sub items...',
+              active: Math.round(Math.random() * 2) % 2 ? true : false,
+              children: [
+                ...Array.from({ length: 3 }, (_, idx2) => {
+                  return {
+                    id: `sub-sub:${idx}:${idx2}`,
+                    name: 'sub-subitem:' + idx2,
+                    description: 'sub sub items...',
+                    active: Math.round(Math.random() * 2) % 2 ? true : false,
+                    accval: Math.random(),
+                    children: [],
+                    createdAt: Date.now(),
+                    updatedAt: Date.now()
+                  }
+                })
+              ],
+              createdAt: Date.now(),
+              updatedAt: Date.now()
+            }
+          })
+        ]
+      }
+    })
+
+  return {
+    total,
+    records
+  }
+}
+
+const config = {
+  list: {
+    thumbnail: 'thumbnail',
+    fields: ['name', 'description'],
+    details: ['role', 'email']
+  },
+  columns: [
+    {
+      type: 'gutter',
+      gutterName: 'dirty',
+      fixed: true
+    },
+    // {
+    //   type: 'gutter',
+    //   gutterName: 'sequence',
+    //   fixed: true
+    // },
+    {
+      type: 'tree',
+      name: 'name',
+      label: true,
+      header: 'name',
+      record: {
+        editable: false,
+        childrenProperty: 'children'
+      },
+      filter: 'search',
+      sortable: true,
+      width: 200,
+      fixed: true
+    },
+    {
+      type: 'gutter',
+      gutterName: 'row-selector',
+      multiple: true
+    },
+    {
+      type: 'string',
+      name: 'description',
+      header: 'description',
+      filter: 'search',
+      record: {
+        editable: true,
+        align: 'left'
+      },
+      width: 200
+    },
+    {
+      type: 'boolean',
+      name: 'active',
+      header: 'active',
+      record: {
+        editable: true
+      },
+      filter: true,
+      sortable: true,
+      width: 60
+    },
+    {
+      type: 'number',
+      name: 'accval',
+      label: true,
+      header: 'accval',
+      record: {
+        editable: true,
+        align: 'right'
+      },
+      accumulator: 'sum',
+      sortable: true,
+      width: 130
+    },
+    {
+      type: 'datetime',
+      name: 'updatedAt',
+      header: 'updated at',
+      record: {
+        editable: true,
+        defaultValue: {
+          name: 'now'
+        }
+      },
+      filter: 'between',
+      sortable: true,
+      width: 180
+    }
+  ],
+  rows: {
+    selectable: {
+      multiple: true
+    },
+    handlers: {
+      // focus: 'select-row-toggle'
+    },
+    classifier: function (record, rowIndex) {
+      const rate = record['rate']
+      const emphasized =
+        rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined
+      return {
+        emphasized
+      }
+    } as GristClassifier,
+    accumulator: true
+  },
+  sorters: [
+    {
+      name: 'name',
+      desc: true
+    },
+    {
+      name: 'email'
+    }
+  ],
+  pagination: {
+    pages: [20, 30, 50, 100, 200]
+  }
+}
+
+export default {
+  title: 'tree column',
+  component: 'ox-grist',
+  argTypes: {
+    config: { control: 'object' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  config: object
+}
+
+const Template: Story<ArgTypes> = ({ config }: ArgTypes) => html` <link
+    href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
+    rel="stylesheet"
+  />
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/oops-theme.css" rel="stylesheet" />
+  <link href="/themes/grist-theme.css" rel="stylesheet" />
+
+  <style>
+    ox-grist {
+      width: 100%;
+      height: 600px;
+    }
+
+    [slot='headroom'] {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: var(--padding-default) var(--padding-wide);
+      background-color: var(--theme-white-color);
+      box-shadow: var(--box-shadow);
+
+      --mdc-icon-size: 24px;
+    }
+    #sorters mwc-icon,
+    #modes mwc-icon {
+      --mdc-icon-size: 18px;
+    }
+    #sorters {
+      margin-left: auto;
+      margin-right: var(--margin-default);
+      padding-left: var(--padding-narrow);
+      border-bottom: var(--border-dark-color);
+      position: relative;
+      color: var(--secondary-color);
+      font-size: var(--fontsize-default);
+      user-select: none;
+    }
+
+    #sorters > * {
+      padding: var(--padding-narrow);
+      vertical-align: middle;
+    }
+
+    #modes > * {
+      padding: var(--padding-narrow);
+      opacity: 0.5;
+      color: var(--primary-text-color);
+      cursor: pointer;
+    }
+
+    #modes > mwc-icon[active] {
+      border-radius: 9px;
+      background-color: rgba(var(--primary-color-rgb), 0.05);
+      opacity: 1;
+      color: var(--secondary-text-color);
+      cursor: default;
+    }
+
+    #modes > mwc-icon:hover {
+      opacity: 1;
+      color: var(--secondary-text-color);
+    }
+
+    #add {
+      width: 50px;
+      text-align: right;
+    }
+
+    #add button {
+      background-color: var(--primary-color);
+      border: 0;
+      border-radius: 50%;
+      padding: 5px;
+      width: 36px;
+      height: 36px;
+      cursor: pointer;
+    }
+
+    #add button:hover {
+      background-color: var(--focus-background-color);
+      box-shadow: var(--box-shadow);
+    }
+
+    #add button mwc-icon {
+      font-size: 2em;
+      color: var(--theme-white-color);
+    }
+
+    #filters {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    #filters * {
+      margin-right: var(--margin-default);
+    }
+
+    @media only screen and (max-width: 460px) {
+      #filters {
+        flex-direction: column;
+      }
+
+      #modes {
+        display: none;
+      }
+    }
+  </style>
+
+  <ox-grist
+    mode="GRID"
+    .config=${config}
+    .fetchHandler=${fetchHandler}
+    @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
+  >
+    <div slot="headroom">
+      <div id="filters">
+        <ox-filters-form autofocus></ox-filters-form>
+      </div>
+
+      <div id="sorters">
+        Sort
+        <mwc-icon
+          @click=${(e: Event) => {
+            const target = e.currentTarget as HTMLElement
+            ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
+              right: 0,
+              top: target.offsetTop + target.offsetHeight
+            })
+          }}
+          >expand_more</mwc-icon
+        >
+        <ox-popup id="sorter-control">
+          <ox-sorters-control> </ox-sorters-control>
+        </ox-popup>
+      </div>
+
+      <ox-record-creator id="add" light-popup>
+        <button><mwc-icon>add</mwc-icon></button>
+      </ox-record-creator>
+    </div>
+  </ox-grist>`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  config
+}

package/themes/grist-theme.css

@@ -18,7 +18,6 @@ body {
   --grist-object-editor-font: normal 1em var(--theme-font);
   --grist-object-editor-color: var(--secondary-color);
 
-  --grist-input-zoom: 1;
   --grist-input-progress-border: 1px solid rgba(255, 255, 255, 0.5);
   --grist-input-progress-background: rgba(121, 110, 110, 0.1);
   --grist-input-progress-bar-background: #4ac5fd;
@@ -150,12 +149,6 @@ body {
   --ox-grist-padding: var(--padding-default) var(--padding-default) 0 var(--padding-default);
 }
 
-@media print {
-  body {
-    --grist-input-zoom: 0.7;
-  }
-}
-
 @media only screen and (max-width: 460px) {
   body {
     --record-view-label-font: bold 15px/32px var(--theme-font);