@operato/data-grist 2.0.0-alpha.12 → 2.0.0-alpha.121

package/src/personalizer/ox-grist-personalizer.ts

@@ -0,0 +1,181 @@
+import '@material/web/button/outlined-button.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+import { OxPopupList } from '@operato/popup'
+
+import { ColumnConfig, PersonalGristPreference } from '../types'
+import { DataGrist } from '../data-grist'
+import { OxCheckbox } from '@operato/input'
+
+@customElement('ox-grist-personalizer')
+export class OxGristPersonalizer extends LitElement {
+  static styles = [
+    css`
+      md-icon {
+        --md-icon-size: 14px;
+        width: 16px;
+        height: 16px;
+        background-color: rgba(var(--secondary-color-rgb), 0.6);
+        color: var(--primary-color);
+        border-radius: 0px 0px 7px 7px;
+        cursor: pointer;
+
+        &:hover {
+          color: var(--theme-white-color);
+        }
+      }
+    `
+  ]
+
+  @property({ type: String }) page!: string
+  @property({ type: String }) element!: string
+  @property({ type: Boolean, attribute: true }) debug: boolean = false
+
+  @state() private preference?: PersonalGristPreference
+
+  render() {
+    return html`
+      <md-icon
+        @click=${(e: MouseEvent) => {
+          const grist = this.closest('ox-grist') as DataGrist
+
+          const { config, compiledConfig } = grist
+          const { columns: compiledColumns } = compiledConfig
+
+          const columns = compiledColumns
+            .filter(ccolumn => {
+              const column = config.columns.find((column: Partial<ColumnConfig>) => column.name == ccolumn.name)
+              return column && column.name && column.type !== 'gutter' && !column.hidden
+            })
+            .map(column => compiledColumns.find(compiledColumn => compiledColumn.name == column.name)!)
+
+          this.preference = {
+            columns: columns.map(column => {
+              return {
+                name: column.name,
+                hidden: column.hidden,
+                width: column.width
+              }
+            })
+          }
+
+          const template = html`
+            <div class="personalizer-header" slot="header">
+              <md-icon
+                style="margin-left: auto;"
+                @click=${async (e: MouseEvent) => {
+                  if (grist.personalConfigProvider) {
+                    grist.personalConfig = this.preference = await grist.personalConfigProvider.save(this.preference)
+                  }
+                  popup.close()
+                }}
+                title=${String(i18next.t('button.save'))}
+                >keep</md-icon
+              ><md-icon
+                @click=${async (e: MouseEvent) => {
+                  if (grist.personalConfigProvider) {
+                    grist.personalConfig = this.preference = {}
+                    await grist.personalConfigProvider.reset()
+                  }
+                  popup.close()
+                }}
+                title=${String(i18next.t('button.delete'))}
+                >keep_off</md-icon
+              ><md-icon @click=${async (e: MouseEvent) => popup.close()} title=${String(i18next.t('button.close'))}
+                >close</md-icon
+              >
+            </div>
+
+            ${columns.map(
+              column => html`
+                <ox-checkbox label="checkbox" ?checked=${!column.hidden} value=${column.name} option
+                  >${column.header.renderer(column)}<span style="position: absolute; right: 10px; cursor: move;" handle
+                    >☰</span
+                  ></ox-checkbox
+                >
+              `
+            )}
+          `
+
+          const popup = OxPopupList.open({
+            template,
+            multiple: true,
+            sortable: true,
+            debug: this.debug,
+            attrSelected: 'checked',
+            top: e.pageY,
+            left: e.pageX,
+            styles: css`
+              :host {
+                width: 240px;
+                max-height: 300px;
+                overflow: auto;
+              }
+
+              ::slotted(.personalizer-header) {
+                --md-icon-size: 1.4em;
+
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                text-transform: capitalize;
+                box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
+              }
+
+              ::slotted([option]) {
+                position: relative;
+                user-select: none;
+              }
+            `
+          })
+
+          popup.onselect = (e: Event) => {
+            const selected = (e as CustomEvent).detail
+
+            const pconfig: PersonalGristPreference = grist.personalConfig || {}
+            const pcolumns = this.preference?.columns || columns
+
+            pconfig.columns = pcolumns.map(column => {
+              return {
+                name: column.name,
+                hidden: selected.indexOf(column.name) == -1,
+                width: column.width
+              }
+            })
+
+            this.preference = pconfig
+
+            grist.personalConfig = this.preference
+
+            grist.applyUpdatedConfiguration()
+          }
+
+          popup.addEventListener('sorted', (e: Event) => {
+            const sorted = (e as CustomEvent).detail as HTMLElement[]
+
+            const pconfig: PersonalGristPreference = grist.personalConfig || {}
+
+            pconfig.columns = sorted.map(element => {
+              const name = (element as OxCheckbox).value
+              return {
+                name,
+                hidden: !element.hasAttribute('checked'),
+                width: columns.find(column => column.name == name)?.width
+              }
+            })
+
+            this.preference = pconfig
+
+            grist.personalConfig = this.preference
+
+            grist.applyUpdatedConfiguration()
+          })
+        }}
+        >settings</md-icon
+      >
+    `
+  }
+}

package/src/record-view/record-creator.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './record-view'
 
 import { html, LitElement } from 'lit'

package/src/record-view/record-view-body.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '../data-grid/data-grid-field'
 
 import { css, html, LitElement } from 'lit'
@@ -34,7 +34,7 @@ export class RecordViewBody extends LitElement {
         color: var(--record-view-label-color);
       }
 
-      label mwc-icon {
+      label md-icon {
         display: none;
       }
 
@@ -43,7 +43,7 @@ export class RecordViewBody extends LitElement {
         font-weight: bold;
       }
 
-      label[editable] mwc-icon {
+      label[editable] md-icon {
         display: inline-block;
         font-size: var(--record-view-label-icon-size);
         opacity: 0.5;
@@ -99,7 +99,7 @@ export class RecordViewBody extends LitElement {
 
         return html`
           <label ?editable=${editable}
-            ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <mwc-icon>edit</mwc-icon></label
+            ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <md-icon>edit</md-icon></label
           >
           <ox-grid-field
             .rowIndex=${rowIndex}

package/src/record-view/record-view.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './record-view-body'
 import '@operato/input/ox-input-file.js'
 import '../data-grid/data-grid-field'
@@ -53,7 +53,7 @@ export class RecordView extends LitElement {
         vertical-align: middle;
       }
 
-      [footer] button mwc-icon {
+      [footer] button md-icon {
         margin-top: -3px;
         margin-right: 5px;
         font-size: var(--record-view-footer-iconbutton-size);
@@ -74,9 +74,9 @@ export class RecordView extends LitElement {
       <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>
       </ox-record-view-body>
       <div footer>
-        <button @click=${this.onReset.bind(this)}><mwc-icon>refresh</mwc-icon><span>Reset</span></button>
-        <button @click=${this.onCancel.bind(this)}><mwc-icon>clear</mwc-icon><span>Cancel</span></button>
-        <button @click=${this.onOK.bind(this)} ok><mwc-icon>radio_button_unchecked</mwc-icon><span>OK</span></button>
+        <button @click=${this.onReset.bind(this)}><md-icon>refresh</md-icon><span>Reset</span></button>
+        <button @click=${this.onCancel.bind(this)}><md-icon>clear</md-icon><span>Cancel</span></button>
+        <button @click=${this.onOK.bind(this)} ok><md-icon>radio_button_unchecked</md-icon><span>OK</span></button>
       </div>
     `
   }

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

@@ -1,11 +1,41 @@
 import { html } from 'lit'
+import { until } from 'lit/directives/until.js'
 
-import { FieldRenderer } from '../types'
+import { FieldRenderer, SelectOption, SelectOptionObject } from '../types'
+
+function buildOptions(options: SelectOption[], value: any) {
+  const selectOptionObjects = options.map(option => {
+    switch (typeof option) {
+      case 'string':
+        return {
+          display: option,
+          value: option
+        }
+      case 'object':
+        return {
+          display: option.display || option.name,
+          value: option.value
+        }
+      default:
+        return option
+    }
+  }) as SelectOptionObject[]
+
+  var res = selectOptionObjects
+    ? selectOptionObjects.filter((option: any) => option.value == String(value == null ? '' : value))
+    : []
+
+  if (res.length) {
+    return html`<span>${res[0].display || res[0].name || ''}</span>`
+  }
+  return html`<span>${value}</span>`
+}
 
 export const OxGristRendererSelect: FieldRenderer = (value, column, record, rowIndex, field) => {
   if (value == null) {
     return ''
   }
+
   var rowOptionField = column.record.rowOptionField && record[column.record.rowOptionField]
   var options = rowOptionField?.options ? rowOptionField.options : column.record.options
 
@@ -13,11 +43,16 @@ export const OxGristRendererSelect: FieldRenderer = (value, column, record, rowI
     console.error(`options value for select '${column.name}' column is mandatory.`)
   } else if (typeof options == 'function') {
     options = options.call(null, value, column, record, rowIndex, field)
-  }
 
-  var res = options ? options.filter((option: any) => option.value == String(value == null ? '' : value)) : []
-  if (res.length) {
-    return html`<span>${res[0].display}</span>`
+    if (options instanceof Promise) {
+      return html`${until(
+        options.then(options => buildOptions(options, value)),
+        value
+      )}`
+    } else {
+      return buildOptions((options || []) as SelectOption[], value)
+    }
+  } else {
+    return buildOptions((options || []) as SelectOption[], value)
   }
-  return html`<span>${value}</span>`
 }

package/src/sorters/sorters-control.ts

@@ -29,9 +29,9 @@ export class SortersControl extends LitElement {
         text-transform: capitalize;
         user-select: none;
       }
-      [option] mwc-icon {
+      [option] md-icon {
         margin-left: var(--margin-default);
-        --mdc-icon-size: var(--fontsize-large);
+        --md-icon-size: var(--fontsize-large);
         color: var(--primary-color);
       }
       [option] sub {
@@ -99,7 +99,7 @@ export class SortersControl extends LitElement {
             ${desc === null
               ? html``
               : html`
-                  <mwc-icon>${desc ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}</mwc-icon>
+                  <md-icon>${desc ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}</md-icon>
                   ${rank === 0 ? html`` : html`<sub>${rank}</sub>`}
                 `}
           </div>

package/src/types.ts

@@ -9,7 +9,7 @@ import { DataListGutter } from './data-list/data-list-gutter'
 import { RecordPartial } from './data-list/record-partial'
 import { DataReportField } from './data-report/data-report-field'
 import { OxGristEditor } from './editors'
-import { QueryFilter } from './filters'
+import { QueryFilter, OxFiltersForm } from './filters'
 import { OxGristRenderer } from './renderers/ox-grist-renderer'
 
 /**
@@ -83,6 +83,22 @@ export type FilterOperator =
   | 'i_nlike'
   | 'nlike'
 
+export type SelectOptionObject =
+  | {
+      name: string
+      display?: never
+      value: string
+    }
+  | {
+      display: string
+      name?: never
+      value: string
+    }
+
+export type SelectOption = SelectOptionObject | string
+
+export type FilterChangedCallback = (value: any, form: OxFiltersForm) => boolean
+
 /**
  * Configuration object for specifying filter conditions.
  *
@@ -99,6 +115,8 @@ export type FilterConfigObject = {
   options?: { [key: string]: any }
   value?: string | number | boolean | string[] | number[] | undefined
   label?: string
+  boundTo?: string[]
+  onchange?: FilterChangedCallback
 }
 
 /**
@@ -427,15 +445,6 @@ export type HeaderConfig = {
  */
 export type HeaderRenderer = (column: ColumnConfig) => any
 
-/**
- * Function type for generating values.
- *
- * @callback ValueGeneratorFn
- * @param {...any} args - The arguments used for generating a value.
- * @returns {*} - The generated value.
- */
-export type ValueGeneratorFn = (...args: any[]) => any
-
 /**
  * Configuration for specifying default values for fields in a record.
  * Default values can be set using predefined value generator functions or custom user-defined functions.
@@ -627,6 +636,7 @@ export type ImexConfig = {
 export type RowsConfig = {
   accumulator?: boolean
   appendable: boolean
+  editable: boolean
   insertable: boolean
   selectable?: RowSelectableConfig
   groups: GroupConfig[]
@@ -751,3 +761,17 @@ export type GristData = {
  * @returns {boolean} - `true` if the record should be selected, `false` otherwise.
  */
 export type GristSelectFunction = (record: GristRecord) => boolean
+
+/**
+ * Defines a type for personalized grid settings. It includes individual column settings and additional configurations specific to a user's grid view.
+ *
+ * @typedef {Object} PersonalGristPreference
+ * @property {Partial<ColumnConfig>[]} [columns] - Partially defines the configuration for each column in the grid.
+ *   Each element can include only some properties of the `ColumnConfig`, used for optionally overriding column settings.
+ * @property {any} [key] - Allows for storing additional user-defined properties with dynamic keys.
+ *   This property can include various custom settings beyond the grid configuration, and the keys can be freely defined.
+ */
+export type PersonalGristPreference = {
+  columns?: Partial<ColumnConfig>[]
+  [key: string]: any
+}

package/stories/{accumulator.stories.ts → accumulator-format.stories.ts}

@@ -3,7 +3,7 @@ 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 '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -16,6 +16,8 @@ import {
   ValidationCallback
 } from '../src/types.js'
 
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
+
 const fetchHandler: FetchHandler = async ({ page, limit }) => {
   var total = 25
   var start = (page! - 1) * limit!
@@ -103,9 +105,15 @@ const config = {
       header: 'accval',
       record: {
         editable: true,
-        align: 'right'
+        align: 'right',
+        defaultValue: 100,
+        format: '+$#,##0.00'
       },
       accumulator: 'avg',
+      // accumulator: {
+      //   type: 'avg',
+      //   tag: true
+      // },
       sortable: true,
       width: 130
     },
@@ -116,7 +124,10 @@ const config = {
       header: 'accval2',
       record: {
         editable: true,
-        align: 'right'
+        align: 'right',
+        renderer: (value: any, column: any, record: any) => {
+          return value && Intl.NumberFormat('en-US').format(value)
+        }
       },
       accumulator: {
         type: 'sum',
@@ -163,9 +174,6 @@ const config = {
     {
       name: 'name',
       desc: true
-    },
-    {
-      name: 'email'
     }
   ],
   pagination: {
@@ -174,7 +182,7 @@ const config = {
 }
 
 export default {
-  title: 'accumulator in ox-grist',
+  title: 'accumulator format in ox-grist',
   component: 'ox-grist',
   argTypes: {
     config: { control: 'object' },
@@ -196,137 +204,55 @@ interface ArgTypes {
   fetchHandler: object
 }
 
-const Template: Story<ArgTypes> = ({
-  config,
-  mode = 'GRID',
-  urlParamsSensitive = false,
-  fetchHandler
-}: 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 {
-      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);
-    }
+const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>
+  html` <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
 
-    #filters {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/oops-theme.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
 
-    #filters * {
-      margin-right: var(--margin-default);
-    }
+    <style>
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
+    </style>
 
-    @media only screen and (max-width: 460px) {
-      #filters {
-        flex-direction: column;
+    <style>
+      ox-grist {
+        height: 600px;
       }
 
-      #modes {
-        display: none;
+      ox-filters-form {
+        flex: 1;
       }
-    }
-  </style>
+    </style>
 
-  <ox-grist
-    mode="GRID"
-    .config=${config}
-    .fetchHandler=${fetchHandler}
-    ?url-params-sensitive=${urlParamsSensitive}
-    @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>
+    <ox-grist
+      mode="GRID"
+      .config=${config}
+      .fetchHandler=${fetchHandler}
+      ?url-params-sensitive=${urlParamsSensitive}
+      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
+    >
+      <div slot="headroom" class="header">
+        <div class="filters">
+          <ox-filters-form autofocus></ox-filters-form>
+          <ox-record-creator id="add" light-popup>
+            <button><md-icon>add</md-icon></button>
+          </ox-record-creator>
+        </div>
       </div>
-
-      <ox-record-creator id="add" light-popup>
-        <button><mwc-icon>add</mwc-icon></button>
-      </ox-record-creator>
-    </div>
-  </ox-grist>`
+    </ox-grist>`
 
 export const Regular = Template.bind({})
 Regular.args = {