@things-factory/board-ui 6.1.54 → 6.1.55

package/client/pages/board-template/board-template-list-page.ts

@@ -0,0 +1,260 @@
+import '@operato/data-grist'
+
+import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { PageView, store } from '@operato/shell'
+import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { notify, openPopup } from '@operato/layout'
+import { OxPopup } from '@operato/popup'
+
+import { connect } from 'pwa-helpers/connect-mixin'
+import gql from 'graphql-tag'
+
+@customElement('board-template-list-page')
+export class BoardTemplateListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+
+        width: 100%;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+    `
+  ]
+
+  @property({ type: Object }) gristConfig: any
+
+  @query('ox-grist') private grist!: DataGrist
+  @query('#sorter-control') private sortersControl!: OxPopup
+
+  get context() {
+    return {
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.board-template list'),
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
+      help: 'board-service/board-template',
+      actions: [
+        {
+          title: i18next.t('button.save'),
+          action: this._updateBoardTemplate.bind(this),
+          ...CommonButtonStyles.save
+        },
+        {
+          title: i18next.t('button.delete'),
+          action: this._deleteBoardTemplate.bind(this),
+          ...CommonButtonStyles.delete
+        }
+      ]
+    }
+  }
+
+  render() {
+    return html`
+      <ox-grist mode="CARD" .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form autofocus></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.sortersControl.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>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  async pageInitialized(lifecycle: any) {
+    this.gristConfig = {
+      list: {
+        fields: ['name', 'description'],
+        details: ['active', 'updatedAt']
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          record: {
+            editable: true
+          },
+          filter: 'search',
+          sortable: true,
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          record: {
+            editable: true
+          },
+          filter: 'search',
+          width: 200
+        },
+        {
+          type: 'resource-object',
+          name: 'updater',
+          header: i18next.t('field.updater'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 180
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: true
+        }
+      },
+      sorters: [
+        {
+          name: 'name'
+        }
+      ]
+    }
+  }
+
+  async pageUpdated(changes: any, lifecycle: any) {
+    if (this.active) {
+      // do something here when this page just became as active
+    }
+  }
+
+  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: boardTemplates(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              description
+              state
+              model
+              thumbnail
+              updater {
+                id
+                name
+              }
+              updatedAt
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    return {
+      total: response.data.responses.total || 0,
+      records: response.data.responses.items || []
+    }
+  }
+
+  async _deleteBoardTemplate() {
+    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!]!) {
+              deleteBoardTemplates(ids: $ids)
+            }
+          `,
+          variables: {
+            ids
+          }
+        })
+
+        if (!response.errors) {
+          this.grist.fetch()
+          notify({
+            message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
+          })
+        }
+      }
+    }
+  }
+
+  async _updateBoardTemplate() {
+    let patches = this.grist.dirtyRecords
+    if (patches && patches.length) {
+      patches = patches.map(patch => {
+        let patchField: any = patch.id ? { id: patch.id } : {}
+        const dirtyFields = patch.__dirtyfields__
+        for (let key in dirtyFields) {
+          patchField[key] = dirtyFields[key].after
+        }
+        patchField.cuFlag = patch.__dirty__
+
+        return patchField
+      })
+
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($patches: [BoardTemplatePatch!]!) {
+            updateMultipleBoardTemplate(patches: $patches) {
+              name
+            }
+          }
+        `,
+        variables: {
+          patches
+        }
+      })
+
+      if (!response.errors) {
+        this.grist.fetch()
+      }
+    }
+  }
+}

package/client/route.ts

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

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"]}

package/dist-client/pages/board-template/board-template-list-page.d.ts

@@ -0,0 +1,48 @@
+import '@operato/data-grist';
+import { PageView } from '@operato/shell';
+import { FetchOption } from '@operato/data-grist';
+declare const BoardTemplateListPage_base: (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & (new (...args: any[]) => import("lit").LitElement) & typeof PageView & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+export declare class BoardTemplateListPage extends BoardTemplateListPage_base {
+    static styles: import("lit").CSSResult[];
+    gristConfig: any;
+    private grist;
+    private sortersControl;
+    get context(): {
+        search: {
+            handler: (search: string) => void;
+            placeholder: string;
+            value: string;
+        };
+        filter: {
+            handler: () => void;
+        };
+        help: string;
+        actions: {
+            icon: string;
+            emphasis: {
+                raised: boolean;
+                outlined: boolean;
+                dense: boolean;
+                danger: boolean;
+            };
+            title: string;
+            action: () => Promise<void>;
+        }[];
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    pageInitialized(lifecycle: any): Promise<void>;
+    pageUpdated(changes: any, lifecycle: any): Promise<void>;
+    fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
+        total: any;
+        records: any;
+    }>;
+    _deleteBoardTemplate(): Promise<void>;
+    _updateBoardTemplate(): Promise<void>;
+}
+export {};

package/dist-client/pages/board-template/board-template-list-page.js

@@ -0,0 +1,249 @@
+import { __decorate, __metadata } from "tslib";
+import '@operato/data-grist';
+import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles';
+import { PageView, store } from '@operato/shell';
+import { css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { DataGrist } from '@operato/data-grist';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { notify } from '@operato/layout';
+import { OxPopup } from '@operato/popup';
+import { connect } from 'pwa-helpers/connect-mixin';
+import gql from 'graphql-tag';
+let BoardTemplateListPage = class BoardTemplateListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
+    get context() {
+        return {
+            search: {
+                handler: (search) => {
+                    this.grist.searchText = search;
+                },
+                placeholder: i18next.t('title.board-template list'),
+                value: this.grist.searchText
+            },
+            filter: {
+                handler: () => {
+                    this.grist.toggleHeadroom();
+                }
+            },
+            help: 'board-service/board-template',
+            actions: [
+                Object.assign({ title: i18next.t('button.save'), action: this._updateBoardTemplate.bind(this) }, CommonButtonStyles.save),
+                Object.assign({ title: i18next.t('button.delete'), action: this._deleteBoardTemplate.bind(this) }, CommonButtonStyles.delete)
+            ]
+        };
+    }
+    render() {
+        return html `
+      <ox-grist mode="CARD" .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form autofocus></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+            const target = e.currentTarget;
+            this.sortersControl.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>
+        </div>
+      </ox-grist>
+    `;
+    }
+    async pageInitialized(lifecycle) {
+        this.gristConfig = {
+            list: {
+                fields: ['name', 'description'],
+                details: ['active', 'updatedAt']
+            },
+            columns: [
+                { type: 'gutter', gutterName: 'sequence' },
+                { type: 'gutter', gutterName: 'row-selector', multiple: true },
+                {
+                    type: 'string',
+                    name: 'name',
+                    header: i18next.t('field.name'),
+                    record: {
+                        editable: true
+                    },
+                    filter: 'search',
+                    sortable: true,
+                    width: 150
+                },
+                {
+                    type: 'string',
+                    name: 'description',
+                    header: i18next.t('field.description'),
+                    record: {
+                        editable: true
+                    },
+                    filter: 'search',
+                    width: 200
+                },
+                {
+                    type: 'resource-object',
+                    name: 'updater',
+                    header: i18next.t('field.updater'),
+                    record: {
+                        editable: false
+                    },
+                    sortable: true,
+                    width: 120
+                },
+                {
+                    type: 'datetime',
+                    name: 'updatedAt',
+                    header: i18next.t('field.updated_at'),
+                    record: {
+                        editable: false
+                    },
+                    sortable: true,
+                    width: 180
+                }
+            ],
+            rows: {
+                selectable: {
+                    multiple: true
+                }
+            },
+            sorters: [
+                {
+                    name: 'name'
+                }
+            ]
+        };
+    }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            // do something here when this page just became as active
+        }
+    }
+    async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }) {
+        const response = await client.query({
+            query: gql `
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: boardTemplates(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              description
+              state
+              model
+              thumbnail
+              updater {
+                id
+                name
+              }
+              updatedAt
+            }
+            total
+          }
+        }
+      `,
+            variables: {
+                filters,
+                pagination: { page, limit },
+                sortings
+            }
+        });
+        return {
+            total: response.data.responses.total || 0,
+            records: response.data.responses.items || []
+        };
+    }
+    async _deleteBoardTemplate() {
+        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!]!) {
+              deleteBoardTemplates(ids: $ids)
+            }
+          `,
+                    variables: {
+                        ids
+                    }
+                });
+                if (!response.errors) {
+                    this.grist.fetch();
+                    notify({
+                        message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
+                    });
+                }
+            }
+        }
+    }
+    async _updateBoardTemplate() {
+        let patches = this.grist.dirtyRecords;
+        if (patches && patches.length) {
+            patches = patches.map(patch => {
+                let patchField = patch.id ? { id: patch.id } : {};
+                const dirtyFields = patch.__dirtyfields__;
+                for (let key in dirtyFields) {
+                    patchField[key] = dirtyFields[key].after;
+                }
+                patchField.cuFlag = patch.__dirty__;
+                return patchField;
+            });
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($patches: [BoardTemplatePatch!]!) {
+            updateMultipleBoardTemplate(patches: $patches) {
+              name
+            }
+          }
+        `,
+                variables: {
+                    patches
+                }
+            });
+            if (!response.errors) {
+                this.grist.fetch();
+            }
+        }
+    }
+};
+BoardTemplateListPage.styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css `
+      :host {
+        display: flex;
+
+        width: 100%;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardTemplateListPage.prototype, "gristConfig", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", DataGrist)
+], BoardTemplateListPage.prototype, "grist", void 0);
+__decorate([
+    query('#sorter-control'),
+    __metadata("design:type", OxPopup)
+], BoardTemplateListPage.prototype, "sortersControl", void 0);
+BoardTemplateListPage = __decorate([
+    customElement('board-template-list-page')
+], BoardTemplateListPage);
+export { BoardTemplateListPage };
+//# sourceMappingURL=board-template-list-page.js.map