@things-factory/i18n-base 7.0.1-alpha.77 → 7.0.1-alpha.81

package/client/page/terminology-page.ts

@@ -4,18 +4,16 @@ import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import '@operato/input/ox-input-select-buttons.js'
 
-import { PropertyValues, css, html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
+import { css, html } from 'lit'
+import { customElement, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import gql from 'graphql-tag'
 
-import { store, PageView } from '@operato/shell'
+import { store, CustomAlert, PageView } from '@operato/shell'
 import { client } from '@operato/graphql'
 import { DataGrist, FetchOption, GristRecord } from '@operato/data-grist'
 import { i18next, localize } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
 import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
-import { OxPrompt } from '@operato/popup/ox-prompt.js'
 import { isMobileDevice } from '@operato/utils'
 
 @customElement('terminology-page')
@@ -48,7 +46,7 @@ export class TerminologyPage extends connect(store)(localize(i18next)(PageView))
 
   get context() {
     return {
-      title: i18next.t('menu.Terminology'),
+      title: i18next.t('title.terminology'),
       search: {
         handler: (search: string) => {
           this.grist.searchText = search
@@ -71,11 +69,6 @@ export class TerminologyPage extends connect(store)(localize(i18next)(PageView))
           title: i18next.t('button.save'),
           action: this.save.bind(this),
           icon: 'save'
-        },
-        {
-          title: i18next.t('button.print'),
-          action: this.print.bind(this),
-          icon: 'print'
         }
       ],
       exportable: {
@@ -113,17 +106,10 @@ export class TerminologyPage extends connect(store)(localize(i18next)(PageView))
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">${i18next.t('title.Terminology')}</div>
+          <div class="title">${i18next.t('title.terminology')}</div>
 
           <div class="filters">
-            <ox-input-select-buttons
-              .value=${this.state}
-              .options=${this.getFilterStatus()}
-              @change=${(e: CustomEvent) => {
-                this.state = (e.currentTarget as any)?.value
-                this.grist.fetch()
-              }}
-            ></ox-input-select-buttons>
+            <ox-filters-form autofocus without-search></ox-filters-form>
           </div>
 
           <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
@@ -144,14 +130,14 @@ export class TerminologyPage extends connect(store)(localize(i18next)(PageView))
         {
           type: 'string',
           name: 'id',
-          header: i18next.t('label.id'),
+          header: i18next.t('field.id'),
           hidden: true,
           width: 0
         },
         {
           type: 'string',
           name: 'name',
-          header: i18next.t('label.name'),
+          header: i18next.t('field.name'),
           record: {
             editable: true
           },
@@ -160,43 +146,48 @@ export class TerminologyPage extends connect(store)(localize(i18next)(PageView))
           width: 150
         },
         {
-          type: 'string',
+          type: 'select',
           name: 'locale',
-          header: i18next.t('label.locale'),
+          header: i18next.t('field.locale'),
           record: {
-            editable: true
+            editable: true,
+            options: [{ display: '', value: '' }, ...this.getFilterStatus()]
           },
-          width: 200
+          width: 200,
+          filter: {
+            type: 'select-buttons',
+            operator: 'in'
+          }
         },
         {
           type: 'select',
           name: 'category',
           label: true,
-          header: i18next.t('label.category'),
+          header: i18next.t('field.category'),
           record: {
-            editable: false,
-            options: [{ display: '', value: '' }, ...this.getFilterStatus()]
+            editable: true,
+            options: ['', 'button', 'field', 'label', 'menu', 'text', 'title']
           },
           width: 100,
-          filter: true,
+          filter: 'in',
           imex: true
         },
         {
           type: 'string',
           name: 'display',
           label: true,
-          header: i18next.t('label.display'),
+          header: i18next.t('field.display'),
           record: {
             editable: true
           },
-          filter: true,
+          filter: 'search',
           sortable: true,
           width: 250
         },
         {
           type: 'resource-object',
           name: 'updater',
-          header: i18next.t('label.updater'),
+          header: i18next.t('field.updater'),
           record: {
             editable: false
           },
@@ -206,7 +197,7 @@ export class TerminologyPage extends connect(store)(localize(i18next)(PageView))
         {
           type: 'datetime',
           name: 'updatedAt',
-          header: i18next.t('label.updated_at'),
+          header: i18next.t('field.updated_at'),
           record: {
             editable: false
           },
@@ -215,7 +206,7 @@ export class TerminologyPage extends connect(store)(localize(i18next)(PageView))
         }
       ],
       rows: {
-        appendable: false,
+        appendable: true,
         selectable: {
           multiple: true
         }
@@ -256,13 +247,42 @@ export class TerminologyPage extends connect(store)(localize(i18next)(PageView))
   }
 
   async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
-    let url = 'terminologies'
-    let selectFields = 'id,name,locale,category,display,created_at,updated_at,creator,updater'
-    let result = null as any // await ServiceUtil.searchByPagination(url, filters, sortings, page, limit, selectFields)
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          terminologies(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              locale
+              category
+              display
+              creator {
+                id
+                name
+              }
+              createdAt
+              updater {
+                id
+                name
+              }
+              updatedAt
+            }
+
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
 
     return {
-      total: result ? result.total : 0,
-      records: result ? result.items : []
+      total: response.data.terminologies.total || 0,
+      records: response.data.terminologies.items || []
     }
   }
 
@@ -309,18 +329,36 @@ export class TerminologyPage extends connect(store)(localize(i18next)(PageView))
     const selectedRecords = this.grist.selected
 
     if (!selectedRecords || selectedRecords.length == 0) {
-      // showToast('info', i18next.t('text.NOTHING_SELECTED'))
+      this.showToast('info', i18next.t('text.NOTHING_SELECTED'))
     } else {
-      const answer = null // await showAlertPopup('button.delete', 'text.are_you_sure', 'question', 'delete', 'cancel')
-
-      if (answer) {
-        let patches = selectedRecords.map(record => {
-          record['cud_flag_'] = 'd'
-          return record
-        })
+      const answer = await CustomAlert({
+        type: 'question',
+        title: i18next.t('button.delete'),
+        text: i18next.t('text.are_you_sure'),
+        confirmButton: { text: i18next.t('button.delete') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
 
-        return null // await ServiceUtil.deleteMultiple('terminologies/update_multiple', patches)
+      if (!answer) {
+        return
       }
+
+      let ids = selectedRecords.map(record => record.id)
+
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($ids: [String!]!) {
+            deleteTerminologies(ids: $ids)
+          }
+        `,
+        variables: {
+          ids
+        }
+      })
+
+      this.grist.fetch()
+
+      return response.data.deleteTerminologies
     }
   }
 
@@ -328,49 +366,37 @@ export class TerminologyPage extends connect(store)(localize(i18next)(PageView))
     let changedRecords = this.grist.dirtyRecords
 
     if (!changedRecords || changedRecords.length == 0) {
-      // showToast('info', i18next.t('text.NOTHING_CHANGED'))
+      this.showToast('info', i18next.t('text.nothing_changed'))
     } else {
-      let metaFields = [
-        'creator',
-        'updater',
-        'createdAt',
-        'updatedAt',
-        '__dirty__',
-        '__dirtyfields__',
-        '__origin__',
-        '__seq__',
-        '__selected__'
-      ]
+      const patches = changedRecords.map(patch => {
+        const 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__
 
-      let patches = changedRecords.map(record => {
-        let patchData = record.id ? { id: record.id } : {}
+        return patchField
+      })
 
-        for (let key in record) {
-          if (!metaFields.includes(key)) {
-            patchData[key] = record[key]
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($patches: [TerminologyPatch!]!) {
+            updateMultipleTerminologies(patches: $patches) {
+              id
+            }
           }
+        `,
+        variables: {
+          patches
         }
-
-        patchData['cud_flag_'] = record['__dirty__'] == 'M' ? 'u' : 'c'
-        return patchData
       })
 
-      //await ServiceUtil.updateMultiple('terminologies/update_multiple', patches)
       this.grist.fetch()
     }
   }
 
-  print() {
-    const selected = this.grist.selected
-    const ids = selected.map(record => record.id).join('|')
-
-    /* TODO Implement the desired functionality */
-
-    OxPrompt.open({
-      type: 'success',
-      title: i18next.t('text.completed'),
-      text: i18next.t('text.printed_successfully'),
-      confirmButton: { text: i18next.t('button.confirm') }
-    })
+  showToast(type: 'notify' | 'info' | 'warning' | 'error', message: string) {
+    document.dispatchEvent(new CustomEvent(type, { detail: { message } }))
   }
 }

package/client/route.ts

@@ -1,6 +1,6 @@
 export default function route(page) {
   switch (page) {
-    case 'terminology':
+    case 'terminology-page':
       import('./page/terminology-page.js')
       return page
   }

package/dist-client/page/terminology-page.d.ts

@@ -29,7 +29,7 @@ export declare class TerminologyPage extends TerminologyPage_base {
         help: string;
         actions: {
             title: string;
-            action: () => void;
+            action: () => Promise<any>;
             icon: string;
         }[];
         exportable: {
@@ -66,8 +66,8 @@ export declare class TerminologyPage extends TerminologyPage_base {
         } | undefined)[];
         data: any;
     };
-    delete(): Promise<null | undefined>;
+    delete(): Promise<any>;
     save(): Promise<void>;
-    print(): void;
+    showToast(type: 'notify' | 'info' | 'warning' | 'error', message: string): void;
 }
 export {};

package/dist-client/page/terminology-page.js

@@ -6,11 +6,12 @@ import '@operato/input/ox-input-select-buttons.js';
 import { css, html } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
 import { connect } from 'pwa-helpers/connect-mixin.js';
-import { store, PageView } from '@operato/shell';
+import gql from 'graphql-tag';
+import { store, CustomAlert, PageView } from '@operato/shell';
+import { client } from '@operato/graphql';
 import { DataGrist } from '@operato/data-grist';
 import { i18next, localize } from '@operato/i18n';
 import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
-import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { isMobileDevice } from '@operato/utils';
 let TerminologyPage = class TerminologyPage extends connect(store)(localize(i18next)(PageView)) {
     constructor() {
@@ -20,7 +21,7 @@ let TerminologyPage = class TerminologyPage extends connect(store)(localize(i18n
     get context() {
         var _a;
         return {
-            title: i18next.t('menu.Terminology'),
+            title: i18next.t('title.terminology'),
             search: {
                 handler: (search) => {
                     this.grist.searchText = search;
@@ -43,11 +44,6 @@ let TerminologyPage = class TerminologyPage extends connect(store)(localize(i18n
                     title: i18next.t('button.save'),
                     action: this.save.bind(this),
                     icon: 'save'
-                },
-                {
-                    title: i18next.t('button.print'),
-                    action: this.print.bind(this),
-                    icon: 'print'
                 }
             ],
             exportable: {
@@ -82,18 +78,10 @@ let TerminologyPage = class TerminologyPage extends connect(store)(localize(i18n
         return html `
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">${i18next.t('title.Terminology')}</div>
+          <div class="title">${i18next.t('title.terminology')}</div>
 
           <div class="filters">
-            <ox-input-select-buttons
-              .value=${this.state}
-              .options=${this.getFilterStatus()}
-              @change=${(e) => {
-            var _a;
-            this.state = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
-            this.grist.fetch();
-        }}
-            ></ox-input-select-buttons>
+            <ox-filters-form autofocus without-search></ox-filters-form>
           </div>
 
           <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
@@ -113,14 +101,14 @@ let TerminologyPage = class TerminologyPage extends connect(store)(localize(i18n
                 {
                     type: 'string',
                     name: 'id',
-                    header: i18next.t('label.id'),
+                    header: i18next.t('field.id'),
                     hidden: true,
                     width: 0
                 },
                 {
                     type: 'string',
                     name: 'name',
-                    header: i18next.t('label.name'),
+                    header: i18next.t('field.name'),
                     record: {
                         editable: true
                     },
@@ -129,43 +117,48 @@ let TerminologyPage = class TerminologyPage extends connect(store)(localize(i18n
                     width: 150
                 },
                 {
-                    type: 'string',
+                    type: 'select',
                     name: 'locale',
-                    header: i18next.t('label.locale'),
+                    header: i18next.t('field.locale'),
                     record: {
-                        editable: true
+                        editable: true,
+                        options: [{ display: '', value: '' }, ...this.getFilterStatus()]
                     },
-                    width: 200
+                    width: 200,
+                    filter: {
+                        type: 'select-buttons',
+                        operator: 'in'
+                    }
                 },
                 {
                     type: 'select',
                     name: 'category',
                     label: true,
-                    header: i18next.t('label.category'),
+                    header: i18next.t('field.category'),
                     record: {
-                        editable: false,
-                        options: [{ display: '', value: '' }, ...this.getFilterStatus()]
+                        editable: true,
+                        options: ['', 'button', 'field', 'label', 'menu', 'text', 'title']
                     },
                     width: 100,
-                    filter: true,
+                    filter: 'in',
                     imex: true
                 },
                 {
                     type: 'string',
                     name: 'display',
                     label: true,
-                    header: i18next.t('label.display'),
+                    header: i18next.t('field.display'),
                     record: {
                         editable: true
                     },
-                    filter: true,
+                    filter: 'search',
                     sortable: true,
                     width: 250
                 },
                 {
                     type: 'resource-object',
                     name: 'updater',
-                    header: i18next.t('label.updater'),
+                    header: i18next.t('field.updater'),
                     record: {
                         editable: false
                     },
@@ -175,7 +168,7 @@ let TerminologyPage = class TerminologyPage extends connect(store)(localize(i18n
                 {
                     type: 'datetime',
                     name: 'updatedAt',
-                    header: i18next.t('label.updated_at'),
+                    header: i18next.t('field.updated_at'),
                     record: {
                         editable: false
                     },
@@ -184,7 +177,7 @@ let TerminologyPage = class TerminologyPage extends connect(store)(localize(i18n
                 }
             ],
             rows: {
-                appendable: false,
+                appendable: true,
                 selectable: {
                     multiple: true
                 }
@@ -221,12 +214,41 @@ let TerminologyPage = class TerminologyPage extends connect(store)(localize(i18n
         }
     }
     async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }) {
-        let url = 'terminologies';
-        let selectFields = 'id,name,locale,category,display,created_at,updated_at,creator,updater';
-        let result = null; // await ServiceUtil.searchByPagination(url, filters, sortings, page, limit, selectFields)
+        const response = await client.query({
+            query: gql `
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          terminologies(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              locale
+              category
+              display
+              creator {
+                id
+                name
+              }
+              createdAt
+              updater {
+                id
+                name
+              }
+              updatedAt
+            }
+
+            total
+          }
+        }
+      `,
+            variables: {
+                filters,
+                pagination: { page, limit },
+                sortings
+            }
+        });
         return {
-            total: result ? result.total : 0,
-            records: result ? result.items : []
+            total: response.data.terminologies.total || 0,
+            records: response.data.terminologies.items || []
         };
     }
     exportHandler() {
@@ -265,60 +287,66 @@ let TerminologyPage = class TerminologyPage extends connect(store)(localize(i18n
     async delete() {
         const selectedRecords = this.grist.selected;
         if (!selectedRecords || selectedRecords.length == 0) {
-            // showToast('info', i18next.t('text.NOTHING_SELECTED'))
+            this.showToast('info', i18next.t('text.NOTHING_SELECTED'));
         }
         else {
-            const answer = null; // await showAlertPopup('button.delete', 'text.are_you_sure', 'question', 'delete', 'cancel')
-            if (answer) {
-                let patches = selectedRecords.map(record => {
-                    record['cud_flag_'] = 'd';
-                    return record;
-                });
-                return null; // await ServiceUtil.deleteMultiple('terminologies/update_multiple', patches)
+            const answer = await CustomAlert({
+                type: 'question',
+                title: i18next.t('button.delete'),
+                text: i18next.t('text.are_you_sure'),
+                confirmButton: { text: i18next.t('button.delete') },
+                cancelButton: { text: i18next.t('button.cancel') }
+            });
+            if (!answer) {
+                return;
             }
+            let ids = selectedRecords.map(record => record.id);
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($ids: [String!]!) {
+            deleteTerminologies(ids: $ids)
+          }
+        `,
+                variables: {
+                    ids
+                }
+            });
+            this.grist.fetch();
+            return response.data.deleteTerminologies;
         }
     }
     async save() {
         let changedRecords = this.grist.dirtyRecords;
         if (!changedRecords || changedRecords.length == 0) {
-            // showToast('info', i18next.t('text.NOTHING_CHANGED'))
+            this.showToast('info', i18next.t('text.nothing_changed'));
         }
         else {
-            let metaFields = [
-                'creator',
-                'updater',
-                'createdAt',
-                'updatedAt',
-                '__dirty__',
-                '__dirtyfields__',
-                '__origin__',
-                '__seq__',
-                '__selected__'
-            ];
-            let patches = changedRecords.map(record => {
-                let patchData = record.id ? { id: record.id } : {};
-                for (let key in record) {
-                    if (!metaFields.includes(key)) {
-                        patchData[key] = record[key];
-                    }
+            const patches = changedRecords.map(patch => {
+                const 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: [TerminologyPatch!]!) {
+            updateMultipleTerminologies(patches: $patches) {
+              id
+            }
+          }
+        `,
+                variables: {
+                    patches
                 }
-                patchData['cud_flag_'] = record['__dirty__'] == 'M' ? 'u' : 'c';
-                return patchData;
             });
-            //await ServiceUtil.updateMultiple('terminologies/update_multiple', patches)
             this.grist.fetch();
         }
     }
-    print() {
-        const selected = this.grist.selected;
-        const ids = selected.map(record => record.id).join('|');
-        /* TODO Implement the desired functionality */
-        OxPrompt.open({
-            type: 'success',
-            title: i18next.t('text.completed'),
-            text: i18next.t('text.printed_successfully'),
-            confirmButton: { text: i18next.t('button.confirm') }
-        });
+    showToast(type, message) {
+        document.dispatchEvent(new CustomEvent(type, { detail: { message } }));
     }
 };
 TerminologyPage.styles = [