@things-factory/board-ui 6.1.32 → 6.1.39

package/client/bootstrap.ts

@@ -1,14 +1,21 @@
 import '@operato/board/ox-property-editor-board-selector.js'
 
 import { OxPropertyEditor } from '@operato/property-editor'
-import { registerEditor, registerRenderer } from '@operato/data-grist'
+import { OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist'
 
 import { BoardEditor } from './data-grist/board-editor'
 import { BoardRenderer } from './data-grist/board-renderer'
+import { ColorMapEditor } from './data-grist/color-map-editor'
+import { ColorRangesEditor } from './data-grist/color-ranges-editor'
 
 export default function bootstrap() {
   registerRenderer('board', BoardRenderer)
+  registerRenderer('color-map', OxGristRendererJson5)
+  registerRenderer('color-ranges', OxGristRendererJson5)
+
   registerEditor('board', BoardEditor)
+  registerEditor('color-map', ColorMapEditor)
+  registerEditor('color-ranges', ColorRangesEditor)
 
   OxPropertyEditor.register({
     'board-selector': 'ox-property-editor-board-selector'

package/client/data-grist/color-map-editor.ts

@@ -0,0 +1,13 @@
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristEditorValueMap } from '@operato/grist-editor/ox-grist-editor-value-map.js'
+
+@customElement('color-map-editor')
+export class ColorMapEditor extends OxGristEditorValueMap {
+  get options() {
+    return {
+      name: `Color Map : ${this.record.name}`,
+      valuetype: 'color'
+    }
+  }
+}

package/client/data-grist/color-ranges-editor.ts

@@ -0,0 +1,13 @@
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristEditorValueRanges } from '@operato/grist-editor/ox-grist-editor-value-ranges.js'
+
+@customElement('color-ranges-editor')
+export class ColorRangesEditor extends OxGristEditorValueRanges {
+  get options() {
+    return {
+      name: `Color Ranges : ${this.record.name}`,
+      valuetype: 'color'
+    }
+  }
+}

package/client/data-grist/legend-editor.ts

@@ -0,0 +1,111 @@
+import '@operato/board/ox-board-selector.js'
+import './board-renderer'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+
+@customElement('legend-editor')
+export class LegendEditor extends OxGristEditor {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+
+      box-sizing: border-box;
+
+      width: 100%;
+      height: 100%;
+
+      border: 0;
+      background-color: transparent;
+
+      font: var(--grist-object-editor-font);
+      color: var(--grist-object-editor-color);
+
+      justify-content: inherit;
+    }
+
+    board-renderer {
+      display: flex;
+      flex: auto;
+
+      justify-content: inherit;
+    }
+  `
+
+  @property({ type: Object }) value: any
+  @property({ type: Object }) column: any
+  @property({ type: Object }) record: any
+  @property({ type: Number }) row?: number
+
+  popup
+
+  render() {
+    var { boardViewerPage } = this.column.record.options || {}
+    return html` <board-renderer .value=${this.value} .boardViewerPage=${boardViewerPage}></board-renderer> `
+  }
+
+  async firstUpdated() {
+    this.value = this.record[this.column.name]
+
+    await this.updateComplete
+
+    this.renderRoot.addEventListener('click', e => {
+      e.stopPropagation()
+
+      this.openSelector()
+    })
+
+    this.openSelector()
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    /*
+     * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+     * 주의. value는 object일 수도 있고, string일 수도 있다.
+     * string인 경우에는 해당 보드의 id로 해석한다.
+     */
+    var value = this.value || {}
+
+    var template = html`
+      <ox-board-selector
+        .creatable=${true}
+        .value=${this.value}
+        @board-selected=${async e => {
+          var board = e.detail.board
+
+          this.dispatchEvent(
+            new CustomEvent('field-change', {
+              bubbles: true,
+              composed: true,
+              detail: {
+                before: this.value,
+                after: this.column.type == 'board' ? board : board.id || '',
+                record: this.record,
+                column: this.column,
+                row: this.row
+              }
+            })
+          )
+
+          this.popup && this.popup.close()
+        }}
+      ></ox-board-selector>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.select board')
+    })
+  }
+}

package/client/pages/theme/theme-editors.ts

@@ -0,0 +1,56 @@
+import { getEditor, getRenderer } from '@operato/data-grist'
+
+export function buildThemeValueRecordConfig() {
+  return {
+    editor: function (value, column, record, rowIndex, field) {
+      return getEditor(record.type || 'text')(value, column, record, rowIndex, field)
+    },
+    renderer: function (value, column, record, rowIndex, field) {
+      return getRenderer(record.type || 'text')(value, column, record, rowIndex, field)
+    },
+    editable: true
+  }
+}
+
+function getEditorType(themeType: string): string {
+  switch (themeType) {
+    case 'legend':
+    case 'color-map':
+      return 'value-map'
+    case 'color-ranges':
+      return 'value-ranges'
+    case 'color':
+      return 'color'
+    default:
+      return 'text'
+  }
+}
+
+function getRendererType(themeType: string): string {
+  switch (themeType) {
+    case 'legend':
+    case 'color-map':
+    case 'color-ranges':
+      return 'json5'
+    case 'color':
+      return 'color'
+    default:
+      return 'text'
+  }
+}
+
+function getOptions(themeType: string, name: string): any {
+  switch (themeType) {
+    case 'color-map':
+    case 'color-ranges':
+      return {
+        name: `${themeType.toUpperCase()} : ${name}`,
+        valuetype: 'color'
+      }
+    case 'color':
+    default:
+      return {
+        name: `${themeType?.toUpperCase() || ''} : ${name}`
+      }
+  }
+}

package/client/pages/{share/share-list-page.ts → theme/theme-list-page.ts}

@@ -14,23 +14,22 @@ import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
 import { OxPopup } from '@operato/popup'
 import { isMobileDevice } from '@operato/utils'
+import { buildThemeValueRecordConfig } from './theme-editors'
 
-import { ShareImporter } from './share-importer'
-
-// export interface ShareType {
+// export interface ThemeType {
 //   name: string
 //   propType: string
 // }
 
-// var ShareTypes: { [name: string]: ShareType } = {
+// var ThemeTypes: { [name: string]: ThemeType } = {
 //   Legend: {
 //     name: 'Legend',
 //     propType: 'legend'
 //   }
 // }
 
-@customElement('share-list-page')
-export class ShareListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
+@customElement('theme-list-page')
+export class ThemeListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
   static styles = [
     ScrollbarStyles,
     CommonGristStyles,
@@ -46,12 +45,6 @@ export class ShareListPage extends connect(store)(localize(i18next)(ScopedElemen
     `
   ]
 
-  static get scopedElements() {
-    return {
-      'share-importer': ShareImporter
-    }
-  }
-
   @property({ type: Object }) gristConfig: any
   @property({ type: String }) mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
 
@@ -64,7 +57,7 @@ export class ShareListPage extends connect(store)(localize(i18next)(ScopedElemen
         handler: (search: string) => {
           this.grist.searchText = search
         },
-        placeholder: i18next.t('title.share list'),
+        placeholder: i18next.t('title.theme list'),
         value: this.grist.searchText
       },
       filter: {
@@ -72,26 +65,19 @@ export class ShareListPage extends connect(store)(localize(i18next)(ScopedElemen
           this.grist.toggleHeadroom()
         }
       },
-      help: 'board-service/share',
+      help: 'board-service/theme',
       actions: [
         {
           title: i18next.t('button.save'),
-          action: this._updateShare.bind(this),
+          action: this._updateTheme.bind(this),
           ...CommonButtonStyles.save
         },
         {
           title: i18next.t('button.delete'),
-          action: this._deleteShare.bind(this),
+          action: this._deleteTheme.bind(this),
           ...CommonButtonStyles.delete
         }
-      ],
-      exportable: {
-        name: i18next.t('title.share list'),
-        data: this.exportHandler.bind(this)
-      },
-      importable: {
-        handler: this.importHandler.bind(this)
-      }
+      ]
     }
   }
 
@@ -102,7 +88,7 @@ export class ShareListPage extends connect(store)(localize(i18next)(ScopedElemen
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom">
           <div id="filters">
-            <ox-filters-form autofocus></ox-filters-form>
+            <ox-filters-form autofocus without-search></ox-filters-form>
           </div>
 
           <div id="sorters">
@@ -136,7 +122,7 @@ export class ShareListPage extends connect(store)(localize(i18next)(ScopedElemen
     this.gristConfig = {
       list: {
         fields: ['name', 'description'],
-        details: ['active', 'updatedAt']
+        details: ['type', 'updatedAt']
       },
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
@@ -167,7 +153,7 @@ export class ShareListPage extends connect(store)(localize(i18next)(ScopedElemen
           name: 'type',
           header: i18next.t('field.type'),
           record: {
-            options: ['', 'legend'],
+            options: ['', 'color-map', 'color-ranges', 'color', 'text'],
             editable: true
           },
           width: 120
@@ -178,10 +164,10 @@ export class ShareListPage extends connect(store)(localize(i18next)(ScopedElemen
           header: i18next.t('field.value'),
           record: {
             editor: function (value, column, record, rowIndex, field) {
-              return getEditor(record.category)(value, column, record, rowIndex, field)
+              return getEditor(record.type || 'text')(value, column, record, rowIndex, field)
             },
             renderer: function (value, column, record, rowIndex, field) {
-              return getRenderer(record.category)(value, column, record, rowIndex, field)
+              return getRenderer(record.type || 'text')(value, column, record, rowIndex, field)
             },
             editable: true
           },
@@ -232,12 +218,13 @@ export class ShareListPage extends connect(store)(localize(i18next)(ScopedElemen
     const response = await client.query({
       query: gql`
         query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          responses: shares(filters: $filters, pagination: $pagination, sortings: $sortings) {
+          responses: themes(filters: $filters, pagination: $pagination, sortings: $sortings) {
             items {
               id
               name
               description
-              active
+              type
+              value
               updater {
                 id
                 name
@@ -261,14 +248,14 @@ export class ShareListPage extends connect(store)(localize(i18next)(ScopedElemen
     }
   }
 
-  async _deleteShare() {
+  async _deleteTheme() {
     if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
       const ids = this.grist.selected.map(record => record.id)
       if (ids && ids.length > 0) {
         const response = await client.mutate({
           mutation: gql`
             mutation ($ids: [String!]!) {
-              deleteShares(ids: $ids)
+              deleteThemes(ids: $ids)
             }
           `,
           variables: {
@@ -286,7 +273,7 @@ export class ShareListPage extends connect(store)(localize(i18next)(ScopedElemen
     }
   }
 
-  async _updateShare() {
+  async _updateTheme() {
     let patches = this.grist.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(patch => {
@@ -302,8 +289,8 @@ export class ShareListPage extends connect(store)(localize(i18next)(ScopedElemen
 
       const response = await client.mutate({
         mutation: gql`
-          mutation ($patches: [SharePatch!]!) {
-            updateMultipleShare(patches: $patches) {
+          mutation ($patches: [ThemePatch!]!) {
+            updateMultipleTheme(patches: $patches) {
               name
             }
           }
@@ -318,41 +305,4 @@ export class ShareListPage extends connect(store)(localize(i18next)(ScopedElemen
       }
     }
   }
-
-  async exportHandler() {
-    const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
-    const targetFieldSet = new Set(['id', 'name', 'description', 'active'])
-
-    return exportTargets.map(share => {
-      let tempObj = {}
-      for (const field of targetFieldSet) {
-        tempObj[field] = share[field]
-      }
-
-      return tempObj
-    })
-  }
-
-  async importHandler(records) {
-    const popup = openPopup(
-      html`
-        <share-importer
-          .shares=${records}
-          @imported=${() => {
-            history.back()
-            this.grist.fetch()
-          }}
-        ></share-importer>
-      `,
-      {
-        backdrop: true,
-        size: 'large',
-        title: i18next.t('title.import share')
-      }
-    )
-
-    popup.onclosed = () => {
-      this.grist.fetch()
-    }
-  }
 }

package/client/route.ts

@@ -15,5 +15,9 @@ export default function route(page) {
     case 'printable-board-viewer':
       import('./pages/printable-board-viewer-page')
       return page
+
+    case 'theme-list':
+      import('./pages/theme/theme-list-page')
+      return page
   }
 }

package/dist-client/bootstrap.js

@@ -1,11 +1,17 @@
 import '@operato/board/ox-property-editor-board-selector.js';
 import { OxPropertyEditor } from '@operato/property-editor';
-import { registerEditor, registerRenderer } from '@operato/data-grist';
+import { OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist';
 import { BoardEditor } from './data-grist/board-editor';
 import { BoardRenderer } from './data-grist/board-renderer';
+import { ColorMapEditor } from './data-grist/color-map-editor';
+import { ColorRangesEditor } from './data-grist/color-ranges-editor';
 export default function bootstrap() {
     registerRenderer('board', BoardRenderer);
+    registerRenderer('color-map', OxGristRendererJson5);
+    registerRenderer('color-ranges', OxGristRendererJson5);
     registerEditor('board', BoardEditor);
+    registerEditor('color-map', ColorMapEditor);
+    registerEditor('color-ranges', ColorRangesEditor);
     OxPropertyEditor.register({
         'board-selector': 'ox-property-editor-board-selector'
     });

package/dist-client/bootstrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,qDAAqD,CAAA;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAE3D,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAA;IACxC,cAAc,CAAC,OAAO,EAAE,WAAW,CAAC,CAAA;IAEpC,gBAAgB,CAAC,QAAQ,CAAC;QACxB,gBAAgB,EAAE,mCAAmC;KACtD,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import '@operato/board/ox-property-editor-board-selector.js'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\nimport { registerEditor, registerRenderer } from '@operato/data-grist'\n\nimport { BoardEditor } from './data-grist/board-editor'\nimport { BoardRenderer } from './data-grist/board-renderer'\n\nexport default function bootstrap() {\n  registerRenderer('board', BoardRenderer)\n  registerEditor('board', BoardEditor)\n\n  OxPropertyEditor.register({\n    'board-selector': 'ox-property-editor-board-selector'\n  })\n}\n"]}
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,qDAAqD,CAAA;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAE5F,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AAEpE,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAA;IACxC,gBAAgB,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAA;IACnD,gBAAgB,CAAC,cAAc,EAAE,oBAAoB,CAAC,CAAA;IAEtD,cAAc,CAAC,OAAO,EAAE,WAAW,CAAC,CAAA;IACpC,cAAc,CAAC,WAAW,EAAE,cAAc,CAAC,CAAA;IAC3C,cAAc,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAA;IAEjD,gBAAgB,CAAC,QAAQ,CAAC;QACxB,gBAAgB,EAAE,mCAAmC;KACtD,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import '@operato/board/ox-property-editor-board-selector.js'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\nimport { OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist'\n\nimport { BoardEditor } from './data-grist/board-editor'\nimport { BoardRenderer } from './data-grist/board-renderer'\nimport { ColorMapEditor } from './data-grist/color-map-editor'\nimport { ColorRangesEditor } from './data-grist/color-ranges-editor'\n\nexport default function bootstrap() {\n  registerRenderer('board', BoardRenderer)\n  registerRenderer('color-map', OxGristRendererJson5)\n  registerRenderer('color-ranges', OxGristRendererJson5)\n\n  registerEditor('board', BoardEditor)\n  registerEditor('color-map', ColorMapEditor)\n  registerEditor('color-ranges', ColorRangesEditor)\n\n  OxPropertyEditor.register({\n    'board-selector': 'ox-property-editor-board-selector'\n  })\n}\n"]}

package/dist-client/data-grist/color-map-editor.d.ts

@@ -0,0 +1,7 @@
+import { OxGristEditorValueMap } from '@operato/grist-editor/ox-grist-editor-value-map.js';
+export declare class ColorMapEditor extends OxGristEditorValueMap {
+    get options(): {
+        name: string;
+        valuetype: string;
+    };
+}

package/dist-client/data-grist/color-map-editor.js

@@ -0,0 +1,16 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { OxGristEditorValueMap } from '@operato/grist-editor/ox-grist-editor-value-map.js';
+let ColorMapEditor = class ColorMapEditor extends OxGristEditorValueMap {
+    get options() {
+        return {
+            name: `Color Map : ${this.record.name}`,
+            valuetype: 'color'
+        };
+    }
+};
+ColorMapEditor = __decorate([
+    customElement('color-map-editor')
+], ColorMapEditor);
+export { ColorMapEditor };
+//# sourceMappingURL=color-map-editor.js.map

package/dist-client/data-grist/color-map-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-map-editor.js","sourceRoot":"","sources":["../../client/data-grist/color-map-editor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,oDAAoD,CAAA;AAGnF,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,qBAAqB;IACvD,IAAI,OAAO;QACT,OAAO;YACL,IAAI,EAAE,eAAe,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YACvC,SAAS,EAAE,OAAO;SACnB,CAAA;IACH,CAAC;CACF,CAAA;AAPY,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAO1B;SAPY,cAAc","sourcesContent":["import { customElement } from 'lit/decorators.js'\n\nimport { OxGristEditorValueMap } from '@operato/grist-editor/ox-grist-editor-value-map.js'\n\n@customElement('color-map-editor')\nexport class ColorMapEditor extends OxGristEditorValueMap {\n  get options() {\n    return {\n      name: `Color Map : ${this.record.name}`,\n      valuetype: 'color'\n    }\n  }\n}\n"]}

package/dist-client/data-grist/color-ranges-editor.d.ts

@@ -0,0 +1,7 @@
+import { OxGristEditorValueRanges } from '@operato/grist-editor/ox-grist-editor-value-ranges.js';
+export declare class ColorRangesEditor extends OxGristEditorValueRanges {
+    get options(): {
+        name: string;
+        valuetype: string;
+    };
+}

package/dist-client/data-grist/color-ranges-editor.js

@@ -0,0 +1,16 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { OxGristEditorValueRanges } from '@operato/grist-editor/ox-grist-editor-value-ranges.js';
+let ColorRangesEditor = class ColorRangesEditor extends OxGristEditorValueRanges {
+    get options() {
+        return {
+            name: `Color Ranges : ${this.record.name}`,
+            valuetype: 'color'
+        };
+    }
+};
+ColorRangesEditor = __decorate([
+    customElement('color-ranges-editor')
+], ColorRangesEditor);
+export { ColorRangesEditor };
+//# sourceMappingURL=color-ranges-editor.js.map

package/dist-client/data-grist/color-ranges-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-ranges-editor.js","sourceRoot":"","sources":["../../client/data-grist/color-ranges-editor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,uDAAuD,CAAA;AAGzF,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,wBAAwB;IAC7D,IAAI,OAAO;QACT,OAAO;YACL,IAAI,EAAE,kBAAkB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAC1C,SAAS,EAAE,OAAO;SACnB,CAAA;IACH,CAAC;CACF,CAAA;AAPY,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAO7B;SAPY,iBAAiB","sourcesContent":["import { customElement } from 'lit/decorators.js'\n\nimport { OxGristEditorValueRanges } from '@operato/grist-editor/ox-grist-editor-value-ranges.js'\n\n@customElement('color-ranges-editor')\nexport class ColorRangesEditor extends OxGristEditorValueRanges {\n  get options() {\n    return {\n      name: `Color Ranges : ${this.record.name}`,\n      valuetype: 'color'\n    }\n  }\n}\n"]}

package/dist-client/data-grist/legend-editor.d.ts

@@ -0,0 +1,14 @@
+import '@operato/board/ox-board-selector.js';
+import './board-renderer';
+import { OxGristEditor } from '@operato/data-grist';
+export declare class LegendEditor extends OxGristEditor {
+    static styles: import("lit").CSSResult;
+    value: any;
+    column: any;
+    record: any;
+    row?: number;
+    popup: any;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): Promise<void>;
+    openSelector(): void;
+}

package/dist-client/data-grist/legend-editor.js

@@ -0,0 +1,108 @@
+import { __decorate, __metadata } from "tslib";
+import '@operato/board/ox-board-selector.js';
+import './board-renderer';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { OxGristEditor } from '@operato/data-grist';
+import { i18next } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
+let LegendEditor = class LegendEditor extends OxGristEditor {
+    render() {
+        var { boardViewerPage } = this.column.record.options || {};
+        return html ` <board-renderer .value=${this.value} .boardViewerPage=${boardViewerPage}></board-renderer> `;
+    }
+    async firstUpdated() {
+        this.value = this.record[this.column.name];
+        await this.updateComplete;
+        this.renderRoot.addEventListener('click', e => {
+            e.stopPropagation();
+            this.openSelector();
+        });
+        this.openSelector();
+    }
+    openSelector() {
+        if (this.popup) {
+            delete this.popup;
+        }
+        /*
+         * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+         * 주의. value는 object일 수도 있고, string일 수도 있다.
+         * string인 경우에는 해당 보드의 id로 해석한다.
+         */
+        var value = this.value || {};
+        var template = html `
+      <ox-board-selector
+        .creatable=${true}
+        .value=${this.value}
+        @board-selected=${async (e) => {
+            var board = e.detail.board;
+            this.dispatchEvent(new CustomEvent('field-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    before: this.value,
+                    after: this.column.type == 'board' ? board : board.id || '',
+                    record: this.record,
+                    column: this.column,
+                    row: this.row
+                }
+            }));
+            this.popup && this.popup.close();
+        }}
+      ></ox-board-selector>
+    `;
+        this.popup = openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('title.select board')
+        });
+    }
+};
+LegendEditor.styles = css `
+    :host {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+
+      box-sizing: border-box;
+
+      width: 100%;
+      height: 100%;
+
+      border: 0;
+      background-color: transparent;
+
+      font: var(--grist-object-editor-font);
+      color: var(--grist-object-editor-color);
+
+      justify-content: inherit;
+    }
+
+    board-renderer {
+      display: flex;
+      flex: auto;
+
+      justify-content: inherit;
+    }
+  `;
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], LegendEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], LegendEditor.prototype, "column", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], LegendEditor.prototype, "record", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], LegendEditor.prototype, "row", void 0);
+LegendEditor = __decorate([
+    customElement('legend-editor')
+], LegendEditor);
+export { LegendEditor };
+//# sourceMappingURL=legend-editor.js.map

package/dist-client/data-grist/legend-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend-editor.js","sourceRoot":"","sources":["../../client/data-grist/legend-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/board/ox-board-selector.js'\nimport './board-renderer'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxGristEditor } from '@operato/data-grist'\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('legend-editor')\nexport class LegendEditor extends OxGristEditor {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-flow: row nowrap;\n      align-items: center;\n\n      box-sizing: border-box;\n\n      width: 100%;\n      height: 100%;\n\n      border: 0;\n      background-color: transparent;\n\n      font: var(--grist-object-editor-font);\n      color: var(--grist-object-editor-color);\n\n      justify-content: inherit;\n    }\n\n    board-renderer {\n      display: flex;\n      flex: auto;\n\n      justify-content: inherit;\n    }\n  `\n\n  @property({ type: Object }) value: any\n  @property({ type: Object }) column: any\n  @property({ type: Object }) record: any\n  @property({ type: Number }) row?: number\n\n  popup\n\n  render() {\n    var { boardViewerPage } = this.column.record.options || {}\n    return html` <board-renderer .value=${this.value} .boardViewerPage=${boardViewerPage}></board-renderer> `\n  }\n\n  async firstUpdated() {\n    this.value = this.record[this.column.name]\n\n    await this.updateComplete\n\n    this.renderRoot.addEventListener('click', e => {\n      e.stopPropagation()\n\n      this.openSelector()\n    })\n\n    this.openSelector()\n  }\n\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    /*\n     * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n     * 주의. value는 object일 수도 있고, string일 수도 있다.\n     * string인 경우에는 해당 보드의 id로 해석한다.\n     */\n    var value = this.value || {}\n\n    var template = html`\n      <ox-board-selector\n        .creatable=${true}\n        .value=${this.value}\n        @board-selected=${async e => {\n          var board = e.detail.board\n\n          this.dispatchEvent(\n            new CustomEvent('field-change', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                before: this.value,\n                after: this.column.type == 'board' ? board : board.id || '',\n                record: this.record,\n                column: this.column,\n                row: this.row\n              }\n            })\n          )\n\n          this.popup && this.popup.close()\n        }}\n      ></ox-board-selector>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.select board')\n    })\n  }\n}\n"]}