@things-factory/personalization 7.0.1-alpha.62

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+<!-- ## [Unreleased] -->

package/client/bootstrap.ts

@@ -0,0 +1 @@
+export default function bootstrap() {}

package/client/grid-preference-editor.ts

@@ -0,0 +1,238 @@
+import '@material/web/icon/icon.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { DataGrist } from '@operato/data-grist'
+import { ScrollbarStyles, CommonGristStyles, ButtonContainerStyles } from '@operato/styles'
+
+@customElement('grid-preference-editor')
+export class GridPreferenceEditor extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    ButtonContainerStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow-x: auto;
+      }
+
+      .container {
+        flex: 1;
+        display: grid;
+        overflow: hidden;
+      }
+
+      .container_detail {
+        background-color: var(--main-section-background-color);
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      h2 {
+        padding: var(--subtitle-padding);
+        font: var(--subtitle-font);
+        color: var(--subtitle-text-color);
+        border-bottom: var(--subtitle-border-bottom);
+      }
+
+      .container_detail h2 {
+        margin: var(--grist-title-margin);
+        border: var(--grist-title-border);
+        font: var(--grist-title-font);
+        color: var(--secondary-color);
+      }
+
+      .container_detail h2 md-icon {
+        --md-icon-size: var(--grist-title-icon-size);
+        vertical-align: middle;
+        margin: var(--grist-title-icon-margin);
+        color: var(--grist-title-icon-color);
+      }
+
+      h2 {
+        padding-bottom: var(--grist-title-with-grid-padding);
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: Object }) target!: DataGrist
+  @property({ type: String }) route!: string
+
+  @query('ox-grist') private grist!: DataGrist
+
+  private gridConfig: any
+
+  async connectedCallback() {
+    // 메뉴 그룹 그리드 설정
+    this.gridConfig = {
+      rows: { selectable: false, appendable: false },
+      pagination: { infinite: true },
+      list: {
+        fields: ['route', 'element'],
+        details: ['active', 'updatedAt']
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          record: {
+            align: 'left'
+          },
+          filter: 'search',
+          sortable: true,
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'header',
+          header: i18next.t('field.header'),
+          record: {
+            align: 'left'
+          },
+          filter: 'search',
+          width: 200
+        },
+        {
+          type: 'checkbox',
+          name: 'hidden',
+          label: true,
+          header: i18next.t('field.hidden'),
+          record: {
+            align: 'center'
+          },
+          filter: true,
+          sortable: true,
+          width: 60
+        }
+      ]
+    }
+
+    await super.connectedCallback()
+  }
+
+  /**
+   * @description 라이프 사이클
+   ***************************
+   */
+  render() {
+    return html` <div id="container" class="container">
+      <div class="container_detail">
+        <ox-grist mode="GRID" .config=${this.gridConfig} .fetchHandler=${this.fetchColumns.bind(this)} auto-fetch>
+        </ox-grist>
+
+        <div class="button-container" style="margin-left:unset">
+          <button @click=${this.reset.bind(this)}><md-icon>restart_alt</md-icon>${i18next.t('button.reset')}</button>
+          <div filler></div>
+          <button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
+          <button danger @click=${this.delete.bind(this)}>
+            <md-icon>delete</md-icon>${i18next.t('button.delete')}
+          </button>
+        </div>
+      </div>
+    </div>`
+  }
+
+  async fetchColumns() {
+    const columns = this.target.config.columns.filter(
+      column => column.type != 'gutter' && column.name != 'id' && !column.unusable
+    )
+
+    return { total: 0, records: columns }
+  }
+
+  async delete(e: MouseEvent) {
+    const element = this.target.id
+
+    const response = await client.query({
+      query: gql`
+        mutation ($route: String!, $element: String!) {
+          deleteMyScreenPreference(route: $route, element: $element) {
+            id
+          }
+        }
+      `,
+      variables: {
+        route: this.route,
+        element
+      }
+    })
+
+    if (!response.errors) {
+      this.showToast(i18next.t('text.success to delete'))
+      history.back()
+    }
+  }
+
+  async reset(e: MouseEvent) {
+    await this.grist.fetch()
+  }
+
+  async save(e: MouseEvent) {
+    const element = this.target.id
+
+    const dirties = this.grist.dirtyRecords
+    const targetColumns = this.target.config.columns
+
+    dirties.forEach(record => {
+      const { name, hidden } = record
+      const targetColumn = targetColumns.find(column => column.name == name)
+
+      if (targetColumn) {
+        targetColumn.hidden = hidden
+      }
+    })
+
+    await this.target.requestUpdate()
+
+    const preference = this.grist.data.records.map(record => {
+      const { name, hidden } = record
+
+      return {
+        name,
+        hidden
+      }
+    })
+
+    const response = await client.query({
+      query: gql`
+        mutation ($route: String!, $preference: Object!) {
+          saveMyScreenPreference(route: $route, preference: $preference) {
+            id
+          }
+        }
+      `,
+      variables: {
+        route: this.route,
+        element,
+        preference
+      }
+    })
+
+    if (!response.errors) {
+      this.showToast(i18next.t('text.success to save'))
+    }
+  }
+
+  showToast(message) {
+    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))
+  }
+}

package/client/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "strict": true,
+    "declaration": true,
+    "module": "esnext",
+    "outDir": "../dist-client",
+    "baseUrl": "./"
+  },
+  "include": ["./**/*"]
+}

package/dist-client/bootstrap.d.ts

@@ -0,0 +1 @@
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -0,0 +1,2 @@
+export default function bootstrap() { }
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,SAAS,KAAI,CAAC","sourcesContent":["export default function bootstrap() {}\n"]}

package/dist-client/grid-preference-editor.d.ts

@@ -0,0 +1,26 @@
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+import { DataGrist } from '@operato/data-grist';
+declare const GridPreferenceEditor_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class GridPreferenceEditor extends GridPreferenceEditor_base {
+    static styles: import("lit").CSSResult[];
+    target: DataGrist;
+    route: string;
+    private grist;
+    private gridConfig;
+    connectedCallback(): Promise<void>;
+    /**
+     * @description 라이프 사이클
+     ***************************
+     */
+    render(): import("lit").TemplateResult<1>;
+    fetchColumns(): Promise<{
+        total: number;
+        records: any;
+    }>;
+    delete(e: MouseEvent): Promise<void>;
+    reset(e: MouseEvent): Promise<void>;
+    save(e: MouseEvent): Promise<void>;
+    showToast(message: any): void;
+}
+export {};

package/dist-client/grid-preference-editor.js

@@ -0,0 +1,224 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { client } from '@operato/graphql';
+import { DataGrist } from '@operato/data-grist';
+import { ScrollbarStyles, CommonGristStyles, ButtonContainerStyles } from '@operato/styles';
+let GridPreferenceEditor = class GridPreferenceEditor extends localize(i18next)(LitElement) {
+    async connectedCallback() {
+        // 메뉴 그룹 그리드 설정
+        this.gridConfig = {
+            rows: { selectable: false, appendable: false },
+            pagination: { infinite: true },
+            list: {
+                fields: ['route', 'element'],
+                details: ['active', 'updatedAt']
+            },
+            columns: [
+                { type: 'gutter', gutterName: 'sequence' },
+                {
+                    type: 'string',
+                    name: 'name',
+                    header: i18next.t('field.name'),
+                    record: {
+                        align: 'left'
+                    },
+                    filter: 'search',
+                    sortable: true,
+                    width: 150
+                },
+                {
+                    type: 'string',
+                    name: 'header',
+                    header: i18next.t('field.header'),
+                    record: {
+                        align: 'left'
+                    },
+                    filter: 'search',
+                    width: 200
+                },
+                {
+                    type: 'checkbox',
+                    name: 'hidden',
+                    label: true,
+                    header: i18next.t('field.hidden'),
+                    record: {
+                        align: 'center'
+                    },
+                    filter: true,
+                    sortable: true,
+                    width: 60
+                }
+            ]
+        };
+        await super.connectedCallback();
+    }
+    /**
+     * @description 라이프 사이클
+     ***************************
+     */
+    render() {
+        return html ` <div id="container" class="container">
+      <div class="container_detail">
+        <ox-grist mode="GRID" .config=${this.gridConfig} .fetchHandler=${this.fetchColumns.bind(this)} auto-fetch>
+        </ox-grist>
+
+        <div class="button-container" style="margin-left:unset">
+          <button @click=${this.reset.bind(this)}><md-icon>restart_alt</md-icon>${i18next.t('button.reset')}</button>
+          <div filler></div>
+          <button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
+          <button danger @click=${this.delete.bind(this)}>
+            <md-icon>delete</md-icon>${i18next.t('button.delete')}
+          </button>
+        </div>
+      </div>
+    </div>`;
+    }
+    async fetchColumns() {
+        const columns = this.target.config.columns.filter(column => column.type != 'gutter' && column.name != 'id' && !column.unusable);
+        return { total: 0, records: columns };
+    }
+    async delete(e) {
+        const element = this.target.id;
+        const response = await client.query({
+            query: gql `
+        mutation ($route: String!, $element: String!) {
+          deleteMyScreenPreference(route: $route, element: $element) {
+            id
+          }
+        }
+      `,
+            variables: {
+                route: this.route,
+                element
+            }
+        });
+        if (!response.errors) {
+            this.showToast(i18next.t('text.success to delete'));
+            history.back();
+        }
+    }
+    async reset(e) {
+        await this.grist.fetch();
+    }
+    async save(e) {
+        const element = this.target.id;
+        const dirties = this.grist.dirtyRecords;
+        const targetColumns = this.target.config.columns;
+        dirties.forEach(record => {
+            const { name, hidden } = record;
+            const targetColumn = targetColumns.find(column => column.name == name);
+            if (targetColumn) {
+                targetColumn.hidden = hidden;
+            }
+        });
+        await this.target.requestUpdate();
+        const preference = this.grist.data.records.map(record => {
+            const { name, hidden } = record;
+            return {
+                name,
+                hidden
+            };
+        });
+        const response = await client.query({
+            query: gql `
+        mutation ($route: String!, $preference: Object!) {
+          saveMyScreenPreference(route: $route, preference: $preference) {
+            id
+          }
+        }
+      `,
+            variables: {
+                route: this.route,
+                element,
+                preference
+            }
+        });
+        if (!response.errors) {
+            this.showToast(i18next.t('text.success to save'));
+        }
+    }
+    showToast(message) {
+        document.dispatchEvent(new CustomEvent('notify', { detail: { message } }));
+    }
+};
+GridPreferenceEditor.styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    ButtonContainerStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow-x: auto;
+      }
+
+      .container {
+        flex: 1;
+        display: grid;
+        overflow: hidden;
+      }
+
+      .container_detail {
+        background-color: var(--main-section-background-color);
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      h2 {
+        padding: var(--subtitle-padding);
+        font: var(--subtitle-font);
+        color: var(--subtitle-text-color);
+        border-bottom: var(--subtitle-border-bottom);
+      }
+
+      .container_detail h2 {
+        margin: var(--grist-title-margin);
+        border: var(--grist-title-border);
+        font: var(--grist-title-font);
+        color: var(--secondary-color);
+      }
+
+      .container_detail h2 md-icon {
+        --md-icon-size: var(--grist-title-icon-size);
+        vertical-align: middle;
+        margin: var(--grist-title-icon-margin);
+        color: var(--grist-title-icon-color);
+      }
+
+      h2 {
+        padding-bottom: var(--grist-title-with-grid-padding);
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", DataGrist)
+], GridPreferenceEditor.prototype, "target", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], GridPreferenceEditor.prototype, "route", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", DataGrist)
+], GridPreferenceEditor.prototype, "grist", void 0);
+GridPreferenceEditor = __decorate([
+    customElement('grid-preference-editor')
+], GridPreferenceEditor);
+export { GridPreferenceEditor };
+//# sourceMappingURL=grid-preference-editor.js.map

package/dist-client/grid-preference-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-preference-editor.js","sourceRoot":"","sources":["../client/grid-preference-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { client } from '@operato/graphql'\nimport { DataGrist } from '@operato/data-grist'\nimport { ScrollbarStyles, CommonGristStyles, ButtonContainerStyles } from '@operato/styles'\n\n@customElement('grid-preference-editor')\nexport class GridPreferenceEditor extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    CommonGristStyles,\n    ButtonContainerStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow-x: auto;\n      }\n\n      .container {\n        flex: 1;\n        display: grid;\n        overflow: hidden;\n      }\n\n      .container_detail {\n        background-color: var(--main-section-background-color);\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      h2 {\n        padding: var(--subtitle-padding);\n        font: var(--subtitle-font);\n        color: var(--subtitle-text-color);\n        border-bottom: var(--subtitle-border-bottom);\n      }\n\n      .container_detail h2 {\n        margin: var(--grist-title-margin);\n        border: var(--grist-title-border);\n        font: var(--grist-title-font);\n        color: var(--secondary-color);\n      }\n\n      .container_detail h2 md-icon {\n        --md-icon-size: var(--grist-title-icon-size);\n        vertical-align: middle;\n        margin: var(--grist-title-icon-margin);\n        color: var(--grist-title-icon-color);\n      }\n\n      h2 {\n        padding-bottom: var(--grist-title-with-grid-padding);\n      }\n\n      ox-grist {\n        overflow-y: auto;\n        flex: 1;\n      }\n\n      ox-filters-form {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) target!: DataGrist\n  @property({ type: String }) route!: string\n\n  @query('ox-grist') private grist!: DataGrist\n\n  private gridConfig: any\n\n  async connectedCallback() {\n    // 메뉴 그룹 그리드 설정\n    this.gridConfig = {\n      rows: { selectable: false, appendable: false },\n      pagination: { infinite: true },\n      list: {\n        fields: ['route', 'element'],\n        details: ['active', 'updatedAt']\n      },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: {\n            align: 'left'\n          },\n          filter: 'search',\n          sortable: true,\n          width: 150\n        },\n        {\n          type: 'string',\n          name: 'header',\n          header: i18next.t('field.header'),\n          record: {\n            align: 'left'\n          },\n          filter: 'search',\n          width: 200\n        },\n        {\n          type: 'checkbox',\n          name: 'hidden',\n          label: true,\n          header: i18next.t('field.hidden'),\n          record: {\n            align: 'center'\n          },\n          filter: true,\n          sortable: true,\n          width: 60\n        }\n      ]\n    }\n\n    await super.connectedCallback()\n  }\n\n  /**\n   * @description 라이프 사이클\n   ***************************\n   */\n  render() {\n    return html` <div id=\"container\" class=\"container\">\n      <div class=\"container_detail\">\n        <ox-grist mode=\"GRID\" .config=${this.gridConfig} .fetchHandler=${this.fetchColumns.bind(this)} auto-fetch>\n        </ox-grist>\n\n        <div class=\"button-container\" style=\"margin-left:unset\">\n          <button @click=${this.reset.bind(this)}><md-icon>restart_alt</md-icon>${i18next.t('button.reset')}</button>\n          <div filler></div>\n          <button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>\n          <button danger @click=${this.delete.bind(this)}>\n            <md-icon>delete</md-icon>${i18next.t('button.delete')}\n          </button>\n        </div>\n      </div>\n    </div>`\n  }\n\n  async fetchColumns() {\n    const columns = this.target.config.columns.filter(\n      column => column.type != 'gutter' && column.name != 'id' && !column.unusable\n    )\n\n    return { total: 0, records: columns }\n  }\n\n  async delete(e: MouseEvent) {\n    const element = this.target.id\n\n    const response = await client.query({\n      query: gql`\n        mutation ($route: String!, $element: String!) {\n          deleteMyScreenPreference(route: $route, element: $element) {\n            id\n          }\n        }\n      `,\n      variables: {\n        route: this.route,\n        element\n      }\n    })\n\n    if (!response.errors) {\n      this.showToast(i18next.t('text.success to delete'))\n      history.back()\n    }\n  }\n\n  async reset(e: MouseEvent) {\n    await this.grist.fetch()\n  }\n\n  async save(e: MouseEvent) {\n    const element = this.target.id\n\n    const dirties = this.grist.dirtyRecords\n    const targetColumns = this.target.config.columns\n\n    dirties.forEach(record => {\n      const { name, hidden } = record\n      const targetColumn = targetColumns.find(column => column.name == name)\n\n      if (targetColumn) {\n        targetColumn.hidden = hidden\n      }\n    })\n\n    await this.target.requestUpdate()\n\n    const preference = this.grist.data.records.map(record => {\n      const { name, hidden } = record\n\n      return {\n        name,\n        hidden\n      }\n    })\n\n    const response = await client.query({\n      query: gql`\n        mutation ($route: String!, $preference: Object!) {\n          saveMyScreenPreference(route: $route, preference: $preference) {\n            id\n          }\n        }\n      `,\n      variables: {\n        route: this.route,\n        element,\n        preference\n      }\n    })\n\n    if (!response.errors) {\n      this.showToast(i18next.t('text.success to save'))\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n  }\n}\n"]}

package/dist-client/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}