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

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
@@ -63,9 +61,9 @@ export class TerminologyPage extends connect(store)(localize(i18next)(PageView))
       help: 'mfg-warehouse/term-page',
       actions: [
         {
-          title: i18next.t('button.delete'),
-          action: this.delete.bind(this),
-          icon: 'delete'
+          title: i18next.t('button.clear-cache'),
+          action: this.clearCache.bind(this),
+          icon: 'ink_eraser'
         },
         {
           title: i18next.t('button.save'),
@@ -73,9 +71,12 @@ export class TerminologyPage extends connect(store)(localize(i18next)(PageView))
           icon: 'save'
         },
         {
-          title: i18next.t('button.print'),
-          action: this.print.bind(this),
-          icon: 'print'
+          title: i18next.t('button.delete'),
+          action: this.delete.bind(this),
+          icon: 'delete',
+          emphasis: {
+            danger: true
+          }
         }
       ],
       exportable: {
@@ -113,17 +114,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 +138,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 +154,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 +205,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 +214,7 @@ export class TerminologyPage extends connect(store)(localize(i18next)(PageView))
         }
       ],
       rows: {
-        appendable: false,
+        appendable: true,
         selectable: {
           multiple: true
         }
@@ -256,13 +255,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 +337,50 @@ 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(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
+    }
+  }
+
+  async clearCache() {
+    const response = await client.mutate({
+      mutation: gql`
+        mutation {
+          clearTranslationsCache
+        }
+      `
+    })
+
+    if (!response.errors) {
+      this.showToast(i18next.t('text.nothing_selected'))
     }
   }
 
@@ -328,49 +388,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(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(message: string) {
+    document.dispatchEvent(new CustomEvent('notify', { 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

@@ -27,11 +27,19 @@ export declare class TerminologyPage extends TerminologyPage_base {
             handler: () => void;
         };
         help: string;
-        actions: {
+        actions: ({
             title: string;
-            action: () => void;
+            action: () => Promise<void>;
             icon: string;
-        }[];
+            emphasis?: undefined;
+        } | {
+            title: string;
+            action: () => Promise<any>;
+            icon: string;
+            emphasis: {
+                danger: boolean;
+            };
+        })[];
         exportable: {
             name: string;
             data: () => {
@@ -66,8 +74,9 @@ export declare class TerminologyPage extends TerminologyPage_base {
         } | undefined)[];
         data: any;
     };
-    delete(): Promise<null | undefined>;
+    delete(): Promise<any>;
+    clearCache(): Promise<void>;
     save(): Promise<void>;
-    print(): void;
+    showToast(message: string): void;
 }
 export {};