@things-factory/code-ui 7.0.0-alpha.8 → 7.0.0

package/client/bootstrap.ts

@@ -0,0 +1,6 @@
+import { registerEditor as registerGristEditor } from '@operato/data-grist'
+import { OxGristEditorI18nLabel } from '@operato/grist-editor/ox-grist-editor-i18n-label.js'
+
+export default function bootstrap() {
+  registerGristEditor('i18n-label', OxGristEditorI18nLabel)
+}

package/client/pages/{code-management-detail.js → code-management-detail.ts}

@@ -5,73 +5,63 @@ import '@operato/data-grist/ox-record-creator.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { client, gqlContext, buildArgs } from '@operato/graphql'
-import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
-
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
+import { DataGrist, FetchOption } from '@operato/data-grist'
+
+import { getLanguages } from '@things-factory/auth-base/dist-client'
 
+@customElement('code-management-detail')
 export class CodeManagementDetail extends localize(i18next)(LitElement) {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-          background-color: white;
-        }
-        .button-container {
-          padding: 10px 0 12px 0;
-          text-align: center;
-        }
-        [danger] {
-          --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-        }
-      `
-    ]
-  }
+  static styles = [
+    ScrollbarStyles,
+    ButtonContainerStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background-color: var(--md-sys-color-surface);
+      }
 
-  static get properties() {
-    return {
-      codeId: String,
-      config: Object,
-      mode: String
-    }
-  }
+      ox-grist {
+        flex: 1;
+      }
+    `
+  ]
 
-  constructor() {
-    super()
-    this.mode = isMobileDevice() ? 'LIST' : 'GRID'
-  }
+  @property({ type: String }) codeId?: string
+  @property({ type: Object }) config: any
+
+  @state() mode: 'LIST' | 'GRID' = isMobileDevice() ? 'LIST' : 'GRID'
+
+  @query('ox-grist') grist!: DataGrist
 
   render() {
     let mode = this.mode
 
     return html`
       <ox-grist .mode=${mode} auto-fetch .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>
-        <div slot="headroom">
-          <div id="filters">
+        <div slot="headroom" class="header">
+          <div class="filters">
             <ox-filters-form></ox-filters-form>
           </div>
         </div>
       </ox-grist>
 
       <div class="button-container">
-        <mwc-button @click=${this.save} raised label="${i18next.t('button.save')}"></mwc-button>
-        <mwc-button @click=${this.delete} raised danger label="${i18next.t('button.delete')}"></mwc-button>
+        <button @click=${this.save}><md-icon>save</md-icon>${String(i18next.t('button.save'))}</button>
+        <button @click=${this.delete} danger><md-icon>delete</md-icon>${String(i18next.t('button.delete'))}</button>
       </div>
     `
   }
 
-  get dataGrist() {
-    return this.shadowRoot.querySelector('ox-grist')
-  }
-
   async firstUpdated() {
     this.config = {
       rows: { selectable: { multiple: true } },
@@ -92,16 +82,26 @@ export class CodeManagementDetail extends localize(i18next)(LitElement) {
           type: 'string',
           name: 'name',
           record: { align: 'left', editable: true },
-          header: i18next.t('field.name'),
+          header: i18next.t('field.code'),
           sortable: true,
           filter: 'search',
           width: 320
         },
         {
-          type: 'string',
-          name: 'description',
-          record: { align: 'left', editable: true },
-          header: i18next.t('field.description'),
+          type: 'i18n-label',
+          name: 'labels',
+          record: {
+            align: 'left',
+            editable: true,
+            renderer: (value, column, record, rowIndex, field) =>
+              html`<span>${value && typeof value == 'object' ? value[i18next.language] : record['description']}</span>`,
+            options: {
+              objectified: true,
+              languages: await getLanguages(),
+              displayColumn: 'description'
+            }
+          },
+          header: i18next.t('field.i18n-label'),
           sortable: true,
           filter: 'search',
           width: 370
@@ -126,12 +126,12 @@ export class CodeManagementDetail extends localize(i18next)(LitElement) {
     }
 
     await this.updateComplete
-    this.dataGrist.fetch()
+    this.grist.fetch()
   }
 
-  async fetchHandler({ filters, page, limit, sorters = [{ name: 'rank' }] }) {
+  async fetchHandler({ filters, page, limit, sorters = [{ name: 'rank' }] }: FetchOption) {
     if (this.codeId) {
-      filters.push({
+      filters!.push({
         name: 'commonCodeId',
         operator: 'eq',
         value: this.codeId
@@ -151,6 +151,7 @@ export class CodeManagementDetail extends localize(i18next)(LitElement) {
               name
               description
               rank
+              labels
               updatedAt
               updater{
                 name
@@ -180,22 +181,21 @@ export class CodeManagementDetail extends localize(i18next)(LitElement) {
 
     const response = await client.query({
       query: gql`
-        mutation {
-          updateMultipleCommonCodeDetail(${buildArgs({
-            patches
-          })}) {
+        mutation updateMultipleCommonCodeDetail($patches: [CommonCodeDetailPatch!]!) {
+          updateMultipleCommonCodeDetail(patches: $patches) {
             name
           }
         }
       `,
+      variables: { patches },
       context: gqlContext()
     })
 
-    if (!response.errors) this.dataGrist.fetch()
+    if (!response.errors) this.grist.fetch()
   }
 
   async delete() {
-    const ids = this.dataGrist.selected.map(record => record.id)
+    const ids = this.grist.selected.map(record => record.id)
     if (!ids?.length) {
       return this.showToast(i18next.t('text.there_is_nothing_to_delete'))
     }
@@ -226,16 +226,16 @@ export class CodeManagementDetail extends localize(i18next)(LitElement) {
           confirmButton: { text: i18next.t('button.confirm') }
         })
 
-        this.dataGrist.fetch()
+        this.grist.fetch()
       }
     }
   }
 
   getPatches() {
-    let patches = this.dataGrist.dirtyRecords
+    let patches = this.grist.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(code => {
-        let patchField = code.id ? { id: code.id } : {}
+        let patchField: any = code.id ? { id: code.id } : {}
         const dirtyFields = code.__dirtyfields__
         for (let key in dirtyFields) {
           patchField[key] = dirtyFields[key].after
@@ -254,5 +254,3 @@ export class CodeManagementDetail extends localize(i18next)(LitElement) {
     document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
   }
 }
-
-window.customElements.define('code-management-detail', CodeManagementDetail)

package/client/pages/{code-management.js → code-management.ts}

@@ -6,52 +6,46 @@ import '@operato/data-grist/ox-record-creator.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { openPopup } from '@operato/layout'
 import { i18next, localize } from '@operato/i18n'
 import { client, gqlContext, buildArgs } from '@operato/graphql'
 import { PageView } from '@operato/shell'
-import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonButtonStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
+import { DataGrist, FetchOption } from '@operato/data-grist'
 
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
 
-class CodeManagement extends localize(i18next)(PageView) {
-  static get properties() {
-    return {
-      config: Object,
-      data: Object,
-      mode: String
-    }
-  }
+@customElement('code-management')
+export class CodeManagement extends localize(i18next)(PageView) {
+  static styles = [
+    ScrollbarStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      CommonGristStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
+        overflow: hidden;
+      }
+    `
+  ]
 
-          overflow: hidden;
-        }
-      `
-    ]
-  }
+  @state() config?: any
+  @state() data?: any
+  @state() mode: 'LIST' | 'GRID' = isMobileDevice() ? 'LIST' : 'GRID'
 
-  constructor() {
-    super()
-    this.mode = isMobileDevice() ? 'LIST' : 'GRID'
-  }
+  @query('ox-grist') grist!: DataGrist
 
   render() {
     let mode = this.mode
 
     return html`
       <ox-grist .mode=${mode} auto-fetch .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>
-        <div slot="headroom">
-          <div id="filters">
+        <div slot="headroom" class="header">
+          <div class="filters">
             <ox-filters-form></ox-filters-form>
           </div>
         </div>
@@ -78,13 +72,9 @@ class CodeManagement extends localize(i18next)(PageView) {
     }
   }
 
-  get dataGrist() {
-    return this.shadowRoot.querySelector('ox-grist')
-  }
-
   pageUpdated(_changed, _lifecycle) {
     if (this.active) {
-      this.dataGrist.fetch()
+      this.grist.fetch()
     }
   }
 
@@ -109,7 +99,7 @@ class CodeManagement extends localize(i18next)(PageView) {
         {
           type: 'string',
           name: 'name',
-          header: i18next.t('field.name'),
+          header: i18next.t('field.common-code'),
           record: { editable: true, align: 'left' },
           sortable: true,
           filter: 'search',
@@ -144,7 +134,7 @@ class CodeManagement extends localize(i18next)(PageView) {
     }
   }
 
-  async fetchHandler({ filters, page, limit, sorters = [{ name: 'name' }, { name: 'updatedAt' }] }) {
+  async fetchHandler({ filters, page, limit, sorters = [{ name: 'name' }, { name: 'updatedAt' }] }: FetchOption) {
     const response = await client.query({
       query: gql`
         query {
@@ -198,12 +188,12 @@ class CodeManagement extends localize(i18next)(PageView) {
 
     if (!response.errors) {
       this.showToast(i18next.t('text.data_updated_successfully'))
-      this.dataGrist.fetch()
+      this.grist.fetch()
     }
   }
 
   async delete() {
-    const ids = this.dataGrist.selected.map(record => record.id)
+    const ids = this.grist.selected.map(record => record.id)
     if (!ids?.length) {
       return this.showToast(i18next.t('text.there_is_nothing_to_delete'))
     }
@@ -234,16 +224,16 @@ class CodeManagement extends localize(i18next)(PageView) {
           confirmButton: { text: i18next.t('button.confirm') }
         })
 
-        this.dataGrist.fetch()
+        this.grist.fetch()
       }
     }
   }
 
   getPatches() {
-    let patches = this.dataGrist.dirtyRecords
+    let patches = this.grist.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(code => {
-        let patchField = code.id ? { id: code.id } : {}
+        let patchField: any = code.id ? { id: code.id } : {}
         const dirtyFields = code.__dirtyfields__
         for (let key in dirtyFields) {
           patchField[key] = dirtyFields[key].after
@@ -269,5 +259,3 @@ class CodeManagement extends localize(i18next)(PageView) {
     document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
   }
 }
-
-customElements.define('code-management', CodeManagement)

package/dist-client/bootstrap.d.ts

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

package/dist-client/bootstrap.js

@@ -0,0 +1,6 @@
+import { registerEditor as registerGristEditor } from '@operato/data-grist';
+import { OxGristEditorI18nLabel } from '@operato/grist-editor/ox-grist-editor-i18n-label.js';
+export default function bootstrap() {
+    registerGristEditor('i18n-label', OxGristEditorI18nLabel);
+}
+//# 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,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,qDAAqD,CAAA;AAE5F,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,mBAAmB,CAAC,YAAY,EAAE,sBAAsB,CAAC,CAAA;AAC3D,CAAC","sourcesContent":["import { registerEditor as registerGristEditor } from '@operato/data-grist'\nimport { OxGristEditorI18nLabel } from '@operato/grist-editor/ox-grist-editor-i18n-label.js'\n\nexport default function bootstrap() {\n  registerGristEditor('i18n-label', OxGristEditorI18nLabel)\n}\n"]}

package/dist-client/index.d.ts

@@ -0,0 +1,2 @@
+export * from './pages/code-management';
+export * from './pages/code-management-detail';

package/dist-client/index.js

@@ -0,0 +1,3 @@
+export * from './pages/code-management';
+export * from './pages/code-management-detail';
+//# 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":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA","sourcesContent":["export * from './pages/code-management'\nexport * from './pages/code-management-detail'\n"]}

package/dist-client/pages/code-management-detail.d.ts

@@ -0,0 +1,25 @@
+import '@operato/data-grist/ox-grist.js';
+import '@operato/data-grist/ox-filters-form.js';
+import '@operato/data-grist/ox-sorters-control.js';
+import '@operato/data-grist/ox-record-creator.js';
+import { LitElement } from 'lit';
+import { DataGrist, FetchOption } from '@operato/data-grist';
+declare const CodeManagementDetail_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class CodeManagementDetail extends CodeManagementDetail_base {
+    static styles: import("lit").CSSResult[];
+    codeId?: string;
+    config: any;
+    mode: 'LIST' | 'GRID';
+    grist: DataGrist;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): Promise<void>;
+    fetchHandler({ filters, page, limit, sorters }: FetchOption): Promise<{
+        total: any;
+        records: any;
+    } | undefined>;
+    save(): Promise<void>;
+    delete(): Promise<void>;
+    getPatches(): import("@operato/data-grist").GristRecord[];
+    showToast(message: any): void;
+}
+export {};

package/dist-client/pages/code-management-detail.js

@@ -0,0 +1,250 @@
+import { __decorate, __metadata } from "tslib";
+import '@operato/data-grist/ox-grist.js';
+import '@operato/data-grist/ox-filters-form.js';
+import '@operato/data-grist/ox-sorters-control.js';
+import '@operato/data-grist/ox-record-creator.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { client, gqlContext, buildArgs } from '@operato/graphql';
+import { ButtonContainerStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
+import { isMobileDevice } from '@operato/utils';
+import { OxPrompt } from '@operato/popup/ox-prompt.js';
+import { DataGrist } from '@operato/data-grist';
+import { getLanguages } from '@things-factory/auth-base/dist-client';
+let CodeManagementDetail = class CodeManagementDetail extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.mode = isMobileDevice() ? 'LIST' : 'GRID';
+    }
+    render() {
+        let mode = this.mode;
+        return html `
+      <ox-grist .mode=${mode} auto-fetch .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom" class="header">
+          <div class="filters">
+            <ox-filters-form></ox-filters-form>
+          </div>
+        </div>
+      </ox-grist>
+
+      <div class="button-container">
+        <button @click=${this.save}><md-icon>save</md-icon>${String(i18next.t('button.save'))}</button>
+        <button @click=${this.delete} danger><md-icon>delete</md-icon>${String(i18next.t('button.delete'))}</button>
+      </div>
+    `;
+    }
+    async firstUpdated() {
+        this.config = {
+            rows: { selectable: { multiple: true } },
+            pagination: { pages: [100, 200, 500] },
+            columns: [
+                { type: 'gutter', gutterName: 'dirty' },
+                { type: 'gutter', gutterName: 'sequence' },
+                { type: 'gutter', gutterName: 'row-selector', multiple: true },
+                {
+                    type: 'integer',
+                    name: 'rank',
+                    record: { align: 'left', editable: true, format: '#,###' },
+                    header: i18next.t('field.rank'),
+                    sortable: true,
+                    width: 60
+                },
+                {
+                    type: 'string',
+                    name: 'name',
+                    record: { align: 'left', editable: true },
+                    header: i18next.t('field.code'),
+                    sortable: true,
+                    filter: 'search',
+                    width: 320
+                },
+                {
+                    type: 'i18n-label',
+                    name: 'labels',
+                    record: {
+                        align: 'left',
+                        editable: true,
+                        renderer: (value, column, record, rowIndex, field) => html `<span>${value && typeof value == 'object' ? value[i18next.language] : record['description']}</span>`,
+                        options: {
+                            objectified: true,
+                            languages: await getLanguages(),
+                            displayColumn: 'description'
+                        }
+                    },
+                    header: i18next.t('field.i18n-label'),
+                    sortable: true,
+                    filter: 'search',
+                    width: 370
+                },
+                {
+                    type: 'object',
+                    name: 'updater',
+                    record: { align: 'left', editable: false },
+                    header: i18next.t('field.updater'),
+                    sortable: true,
+                    width: 90
+                },
+                {
+                    type: 'datetime',
+                    name: 'updatedAt',
+                    header: i18next.t('field.updated_at'),
+                    record: { editable: false },
+                    sortable: true,
+                    width: 180
+                }
+            ]
+        };
+        await this.updateComplete;
+        this.grist.fetch();
+    }
+    async fetchHandler({ filters, page, limit, sorters = [{ name: 'rank' }] }) {
+        if (this.codeId) {
+            filters.push({
+                name: 'commonCodeId',
+                operator: 'eq',
+                value: this.codeId
+            });
+        }
+        const response = await client.query({
+            query: gql `
+        query {
+          commonCodeDetails(${buildArgs({
+                filters,
+                pagination: { page, limit },
+                sortings: sorters
+            })}) {
+            items {
+              id
+              name
+              description
+              rank
+              labels
+              updatedAt
+              updater{
+                name
+                description
+              }
+            }
+            total
+          }
+        }
+      `,
+            context: gqlContext()
+        });
+        if (!response.errors) {
+            return {
+                total: response.data.commonCodeDetails.total || 0,
+                records: response.data.commonCodeDetails.items || []
+            };
+        }
+    }
+    async save() {
+        const patches = this.getPatches();
+        if (!(patches === null || patches === void 0 ? void 0 : patches.length)) {
+            return this.showToast(i18next.t('text.nothing_changed'));
+        }
+        const response = await client.query({
+            query: gql `
+        mutation updateMultipleCommonCodeDetail($patches: [CommonCodeDetailPatch!]!) {
+          updateMultipleCommonCodeDetail(patches: $patches) {
+            name
+          }
+        }
+      `,
+            variables: { patches },
+            context: gqlContext()
+        });
+        if (!response.errors)
+            this.grist.fetch();
+    }
+    async delete() {
+        const ids = this.grist.selected.map(record => record.id);
+        if (!(ids === null || ids === void 0 ? void 0 : ids.length)) {
+            return this.showToast(i18next.t('text.there_is_nothing_to_delete'));
+        }
+        if (await OxPrompt.open({
+            type: 'warning',
+            title: i18next.t('button.delete'),
+            text: i18next.t('text.are_you_sure'),
+            confirmButton: { text: i18next.t('button.delete') },
+            cancelButton: { text: i18next.t('button.cancel') }
+        })) {
+            const response = await client.query({
+                query: gql `
+          mutation {
+            deleteCommonCodeDetails(${buildArgs({ ids })})
+          }
+        `,
+                context: gqlContext()
+            });
+            if (!response.errors) {
+                OxPrompt.open({
+                    type: 'success',
+                    title: i18next.t('text.completed'),
+                    text: i18next.t('text.data_deleted_successfully'),
+                    confirmButton: { text: i18next.t('button.confirm') }
+                });
+                this.grist.fetch();
+            }
+        }
+    }
+    getPatches() {
+        let patches = this.grist.dirtyRecords;
+        if (patches && patches.length) {
+            patches = patches.map(code => {
+                let patchField = code.id ? { id: code.id } : {};
+                const dirtyFields = code.__dirtyfields__;
+                for (let key in dirtyFields) {
+                    patchField[key] = dirtyFields[key].after;
+                }
+                patchField.commonCode = { id: this.codeId };
+                patchField.cuFlag = code.__dirty__;
+                return patchField;
+            });
+        }
+        return patches;
+    }
+    showToast(message) {
+        document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }));
+    }
+};
+CodeManagementDetail.styles = [
+    ScrollbarStyles,
+    ButtonContainerStyles,
+    CommonHeaderStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], CodeManagementDetail.prototype, "codeId", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], CodeManagementDetail.prototype, "config", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], CodeManagementDetail.prototype, "mode", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", DataGrist)
+], CodeManagementDetail.prototype, "grist", void 0);
+CodeManagementDetail = __decorate([
+    customElement('code-management-detail')
+], CodeManagementDetail);
+export { CodeManagementDetail };
+//# sourceMappingURL=code-management-detail.js.map