@things-factory/personalization 7.0.1-alpha.62 → 7.0.1-alpha.64

package/client/grid-preference-editor.ts

@@ -73,7 +73,7 @@ export class GridPreferenceEditor extends localize(i18next)(LitElement) {
   ]
 
   @property({ type: Object }) target!: DataGrist
-  @property({ type: String }) route!: string
+  @property({ type: String }) page!: string
 
   @query('ox-grist') private grist!: DataGrist
 
@@ -85,7 +85,7 @@ export class GridPreferenceEditor extends localize(i18next)(LitElement) {
       rows: { selectable: false, appendable: false },
       pagination: { infinite: true },
       list: {
-        fields: ['route', 'element'],
+        fields: ['page', 'element'],
         details: ['active', 'updatedAt']
       },
       columns: [
@@ -97,6 +97,7 @@ export class GridPreferenceEditor extends localize(i18next)(LitElement) {
           record: {
             align: 'left'
           },
+          hidden: true,
           filter: 'search',
           sortable: true,
           width: 150
@@ -104,7 +105,7 @@ export class GridPreferenceEditor extends localize(i18next)(LitElement) {
         {
           type: 'string',
           name: 'header',
-          header: i18next.t('field.header'),
+          header: i18next.t('field.name'),
           record: {
             align: 'left'
           },
@@ -117,7 +118,8 @@ export class GridPreferenceEditor extends localize(i18next)(LitElement) {
           label: true,
           header: i18next.t('field.hidden'),
           record: {
-            align: 'center'
+            align: 'center',
+            editable: true
           },
           filter: true,
           sortable: true,
@@ -164,14 +166,14 @@ export class GridPreferenceEditor extends localize(i18next)(LitElement) {
 
     const response = await client.query({
       query: gql`
-        mutation ($route: String!, $element: String!) {
-          deleteMyScreenPreference(route: $route, element: $element) {
+        mutation ($page: String!, $element: String!) {
+          deleteMyPagePreference(page: $page, element: $element) {
             id
           }
         }
       `,
       variables: {
-        route: this.route,
+        page: this.page,
         element
       }
     })
@@ -214,14 +216,14 @@ export class GridPreferenceEditor extends localize(i18next)(LitElement) {
 
     const response = await client.query({
       query: gql`
-        mutation ($route: String!, $preference: Object!) {
-          saveMyScreenPreference(route: $route, preference: $preference) {
+        mutation ($page: String!, $element: String!, $preference: Object!) {
+          updateMyPagePreference(page: $page, element: $element, preference: $preference) {
             id
           }
         }
       `,
       variables: {
-        route: this.route,
+        page: this.page,
         element,
         preference
       }

package/client/index.ts

@@ -0,0 +1,2 @@
+export * from './types.js'
+export * from './page-preference-provider-impl.js'

package/client/page-preference-provider-impl.ts

@@ -0,0 +1,63 @@
+import gql from 'graphql-tag'
+import { client } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+
+import { PagePreferenceProvider } from './types'
+
+export class PagePreferenceProviderImpl implements PagePreferenceProvider {
+  public page?: string
+  public element?: string
+  public preference?: { [key: string]: any }
+
+  constructor(page: string, element: string, preference?: { [key: string]: any }) {
+    this.page = page
+    this.element = element
+    this.preference = preference
+  }
+
+  async load(): Promise<{ [key: string]: any } | undefined> {
+    const response = await client.query({
+      query: gql`
+        query ($page: String!, $element: String!) {
+          myPagePreference(page: $page, element: $element) {
+            preference
+          }
+        }
+      `,
+      variables: {
+        page: this.page,
+        element: this.element
+      }
+    })
+
+    if (!response.errors) {
+      this.preference = response.data.myPagePreference?.preference || {}
+      return this.preference
+    }
+  }
+
+  async save(preference: { [key: string]: any }): Promise<void> {
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($page: String!, $element: String!, $preference: Object!) {
+          updateMyPagePreference(page: $page, element: $element, preference: $preference) {
+            preference
+          }
+        }
+      `,
+      variables: {
+        page: this.page,
+        element: this.element,
+        preference
+      }
+    })
+
+    if (!response.errors) {
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: { message: i18next.t('text.updated_successfully'), option: { timer: 3000 } }
+        })
+      )
+    }
+  }
+}

package/client/types.ts

@@ -0,0 +1,8 @@
+export interface PagePreferenceProvider {
+  page?: string
+  element?: string
+  preference?: { [key: string]: any }
+
+  load: () => { [key: string]: any } | undefined | Promise<{ [key: string]: any } | undefined>
+  save: (preference: { [key: string]: any }) => void | Promise<void>
+}

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

@@ -5,7 +5,7 @@ declare const GridPreferenceEditor_base: (new (...args: any[]) => LitElement) &
 export declare class GridPreferenceEditor extends GridPreferenceEditor_base {
     static styles: import("lit").CSSResult[];
     target: DataGrist;
-    route: string;
+    page: string;
     private grist;
     private gridConfig;
     connectedCallback(): Promise<void>;

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

@@ -14,7 +14,7 @@ let GridPreferenceEditor = class GridPreferenceEditor extends localize(i18next)(
             rows: { selectable: false, appendable: false },
             pagination: { infinite: true },
             list: {
-                fields: ['route', 'element'],
+                fields: ['page', 'element'],
                 details: ['active', 'updatedAt']
             },
             columns: [
@@ -26,6 +26,7 @@ let GridPreferenceEditor = class GridPreferenceEditor extends localize(i18next)(
                     record: {
                         align: 'left'
                     },
+                    hidden: true,
                     filter: 'search',
                     sortable: true,
                     width: 150
@@ -33,7 +34,7 @@ let GridPreferenceEditor = class GridPreferenceEditor extends localize(i18next)(
                 {
                     type: 'string',
                     name: 'header',
-                    header: i18next.t('field.header'),
+                    header: i18next.t('field.name'),
                     record: {
                         align: 'left'
                     },
@@ -46,7 +47,8 @@ let GridPreferenceEditor = class GridPreferenceEditor extends localize(i18next)(
                     label: true,
                     header: i18next.t('field.hidden'),
                     record: {
-                        align: 'center'
+                        align: 'center',
+                        editable: true
                     },
                     filter: true,
                     sortable: true,
@@ -85,14 +87,14 @@ let GridPreferenceEditor = class GridPreferenceEditor extends localize(i18next)(
         const element = this.target.id;
         const response = await client.query({
             query: gql `
-        mutation ($route: String!, $element: String!) {
-          deleteMyScreenPreference(route: $route, element: $element) {
+        mutation ($page: String!, $element: String!) {
+          deleteMyPagePreference(page: $page, element: $element) {
             id
           }
         }
       `,
             variables: {
-                route: this.route,
+                page: this.page,
                 element
             }
         });
@@ -125,14 +127,14 @@ let GridPreferenceEditor = class GridPreferenceEditor extends localize(i18next)(
         });
         const response = await client.query({
             query: gql `
-        mutation ($route: String!, $preference: Object!) {
-          saveMyScreenPreference(route: $route, preference: $preference) {
+        mutation ($page: String!, $element: String!, $preference: Object!) {
+          updateMyPagePreference(page: $page, element: $element, preference: $preference) {
             id
           }
         }
       `,
             variables: {
-                route: this.route,
+                page: this.page,
                 element,
                 preference
             }
@@ -212,7 +214,7 @@ __decorate([
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], GridPreferenceEditor.prototype, "route", void 0);
+], GridPreferenceEditor.prototype, "page", void 0);
 __decorate([
     query('ox-grist'),
     __metadata("design:type", DataGrist)

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

@@ -1 +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"]}
+{"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 }) page!: 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: ['page', '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          hidden: true,\n          filter: 'search',\n          sortable: true,\n          width: 150\n        },\n        {\n          type: 'string',\n          name: 'header',\n          header: i18next.t('field.name'),\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            editable: true\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 ($page: String!, $element: String!) {\n          deleteMyPagePreference(page: $page, element: $element) {\n            id\n          }\n        }\n      `,\n      variables: {\n        page: this.page,\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 ($page: String!, $element: String!, $preference: Object!) {\n          updateMyPagePreference(page: $page, element: $element, preference: $preference) {\n            id\n          }\n        }\n      `,\n      variables: {\n        page: this.page,\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.d.ts

@@ -0,0 +1,2 @@
+export * from './types.js';
+export * from './page-preference-provider-impl.js';

package/dist-client/index.js

@@ -1,2 +1,3 @@
-"use strict";
+export * from './types.js';
+export * from './page-preference-provider-impl.js';
 //# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,oCAAoC,CAAA","sourcesContent":["export * from './types.js'\nexport * from './page-preference-provider-impl.js'\n"]}

package/dist-client/page-preference-provider-impl.d.ts

@@ -0,0 +1,17 @@
+import { PagePreferenceProvider } from './types';
+export declare class PagePreferenceProviderImpl implements PagePreferenceProvider {
+    page?: string;
+    element?: string;
+    preference?: {
+        [key: string]: any;
+    };
+    constructor(page: string, element: string, preference?: {
+        [key: string]: any;
+    });
+    load(): Promise<{
+        [key: string]: any;
+    } | undefined>;
+    save(preference: {
+        [key: string]: any;
+    }): Promise<void>;
+}

package/dist-client/page-preference-provider-impl.js

@@ -0,0 +1,52 @@
+import gql from 'graphql-tag';
+import { client } from '@operato/graphql';
+import { i18next } from '@operato/i18n';
+export class PagePreferenceProviderImpl {
+    constructor(page, element, preference) {
+        this.page = page;
+        this.element = element;
+        this.preference = preference;
+    }
+    async load() {
+        var _a;
+        const response = await client.query({
+            query: gql `
+        query ($page: String!, $element: String!) {
+          myPagePreference(page: $page, element: $element) {
+            preference
+          }
+        }
+      `,
+            variables: {
+                page: this.page,
+                element: this.element
+            }
+        });
+        if (!response.errors) {
+            this.preference = ((_a = response.data.myPagePreference) === null || _a === void 0 ? void 0 : _a.preference) || {};
+            return this.preference;
+        }
+    }
+    async save(preference) {
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($page: String!, $element: String!, $preference: Object!) {
+          updateMyPagePreference(page: $page, element: $element, preference: $preference) {
+            preference
+          }
+        }
+      `,
+            variables: {
+                page: this.page,
+                element: this.element,
+                preference
+            }
+        });
+        if (!response.errors) {
+            document.dispatchEvent(new CustomEvent('notify', {
+                detail: { message: i18next.t('text.updated_successfully'), option: { timer: 3000 } }
+            }));
+        }
+    }
+}
+//# sourceMappingURL=page-preference-provider-impl.js.map

package/dist-client/page-preference-provider-impl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-preference-provider-impl.js","sourceRoot":"","sources":["../client/page-preference-provider-impl.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAIvC,MAAM,OAAO,0BAA0B;IAKrC,YAAY,IAAY,EAAE,OAAe,EAAE,UAAmC;QAC5E,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACtB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;IAC9B,CAAC;IAED,KAAK,CAAC,IAAI;;QACR,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;OAMT;YACD,SAAS,EAAE;gBACT,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACpB,IAAI,CAAC,UAAU,GAAG,CAAA,MAAA,QAAQ,CAAC,IAAI,CAAC,gBAAgB,0CAAE,UAAU,KAAI,EAAE,CAAA;YAClE,OAAO,IAAI,CAAC,UAAU,CAAA;SACvB;IACH,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,UAAkC;QAC3C,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,UAAU;aACX;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACpB,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;aACrF,CAAC,CACH,CAAA;SACF;IACH,CAAC;CACF","sourcesContent":["import gql from 'graphql-tag'\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\n\nimport { PagePreferenceProvider } from './types'\n\nexport class PagePreferenceProviderImpl implements PagePreferenceProvider {\n  public page?: string\n  public element?: string\n  public preference?: { [key: string]: any }\n\n  constructor(page: string, element: string, preference?: { [key: string]: any }) {\n    this.page = page\n    this.element = element\n    this.preference = preference\n  }\n\n  async load(): Promise<{ [key: string]: any } | undefined> {\n    const response = await client.query({\n      query: gql`\n        query ($page: String!, $element: String!) {\n          myPagePreference(page: $page, element: $element) {\n            preference\n          }\n        }\n      `,\n      variables: {\n        page: this.page,\n        element: this.element\n      }\n    })\n\n    if (!response.errors) {\n      this.preference = response.data.myPagePreference?.preference || {}\n      return this.preference\n    }\n  }\n\n  async save(preference: { [key: string]: any }): Promise<void> {\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($page: String!, $element: String!, $preference: Object!) {\n          updateMyPagePreference(page: $page, element: $element, preference: $preference) {\n            preference\n          }\n        }\n      `,\n      variables: {\n        page: this.page,\n        element: this.element,\n        preference\n      }\n    })\n\n    if (!response.errors) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: { message: i18next.t('text.updated_successfully'), option: { timer: 3000 } }\n        })\n      )\n    }\n  }\n}\n"]}