@things-factory/dataset 7.0.0-alpha.9 → 7.0.0

package/client/pages/data-ooc/data-ooc-list-page.ts

@@ -1,7 +1,10 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import '@operato/input/ox-input-select-buttons.js'
 
+import { p13n } from '@operato/p13n'
+
 import './data-ooc-view.js'
 
 import gql from 'graphql-tag'
@@ -33,13 +36,14 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice, adjustFilters } from '@operato/utils'
 
 @customElement('data-ooc-list-page')
-export class DataOocListPage extends connect(store)(localize(i18next)(PageView)) {
+export class DataOocListPage extends connect(store)(p13n(localize(i18next)(PageView))) {
   static styles = [
     ScrollbarStyles,
+    CommonGristStyles,
     CommonHeaderStyles,
     css`
       :host {
@@ -98,12 +102,14 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
     const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
 
     return html`
-      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+      <ox-grist
+        .mode=${mode}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
+      >
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-ooc list')}
-          </div>
+          <div class="title">${i18next.t('title.data-ooc list')}</div>
 
           <div class="filters">
             <ox-input-select-buttons
@@ -118,6 +124,8 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
 
           <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
         </div>
+
+        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
       </ox-grist>
     `
   }
@@ -380,11 +388,14 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
         },
         handlers: {
           click: (columns, data, column, record, rowIndex) => {
-            const popup = openPopup(html` <data-ooc-view data-ooc-id=${record.id} style="background-color: white;"></data-ooc-view> `, {
-              backdrop: true,
-              size: 'large',
-              title: i18next.t('title.data-ooc view')
-            })
+            const popup = openPopup(
+              html` <data-ooc-view data-ooc-id=${record.id} style="background-color: white;"></data-ooc-view> `,
+              {
+                backdrop: true,
+                size: 'large',
+                title: i18next.t('title.data-ooc view')
+              }
+            )
             popup.onclosed = () => {
               this.grist.fetch()
             }
@@ -398,10 +409,6 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
         }
       ]
     }
-
-    await this.updateComplete
-
-    this.grist.fetch()
   }
 
   async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
@@ -515,7 +522,9 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
           .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
           .reduce((record, column) => {
             const key = column.imex === true ? column.name : column.imex.key
-            record[key] = key.split('.').reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            record[key] = key
+              .split('.')
+              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
             return record
           }, {})
       }

package/client/pages/data-ooc/data-ooc-view.ts

@@ -1,5 +1,6 @@
+import '@material/web/icon/icon.js'
+import '@material/web/fab/fab.js'
 import '@operato/dataset/ox-data-ooc-brief-view.js'
-import '@material/mwc-fab'
 import '@things-factory/worklist/dist-client/components/activity-thread-timeline.js'
 
 import gql from 'graphql-tag'
@@ -19,20 +20,20 @@ export class DataOocView extends localize(i18next)(LitElement) {
       :host {
         display: block;
         position: relative;
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
 
         overflow: auto;
       }
 
       ox-data-ooc-brief-view {
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
       }
 
       activity-thread-timeline {
-        margin: var(--margin-default);
+        margin: var(--spacing-medium);
       }
 
-      mwc-fab {
+      md-fab {
         position: fixed;
         bottom: 15px;
         right: 16px;
@@ -41,7 +42,7 @@ export class DataOocView extends localize(i18next)(LitElement) {
       }
 
       @media print {
-        mwc-fab {
+        md-fab {
           display: none;
         }
       }
@@ -87,15 +88,15 @@ export class DataOocView extends localize(i18next)(LitElement) {
           `
         : nothing}
 
-      <mwc-fab
-        icon="print"
+      <md-fab
         title="print"
         @click=${() =>
           GhostPrint.print({
             src: `./data-ooc/${this.dataOoc.id}`
           })}
-        >print</mwc-fab
       >
+        <md-icon slot="icon">print</md-icon>
+      </md-fab>
     `
   }
 

package/client/pages/data-ooc/data-oocs-page.ts

@@ -21,7 +21,7 @@ export class DataOocsPage extends localize(i18next)(PageView) {
       }
 
       activity-thread-timeline {
-        margin: var(--margin-default);
+        margin: var(--spacing-medium);
       }
 
       .end {

package/client/pages/data-report/data-report-list-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import '@operato/board/ox-board-viewer.js'
@@ -16,7 +17,7 @@ import { navigate, PageView, store } from '@operato/shell'
 import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { encodeUrlParams } from '@operato/utils'
 
-import { provider } from '@things-factory/board-ui'
+import { provider } from '@things-factory/board-ui/dist-client'
 
 const USECASE_OPTIONS = () => {
   return ['', ...OxDataUseCase.getUseCaseNames()].map(name => {
@@ -173,10 +174,7 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
         ?url-params-sensitive=${this.active}
       >
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-report list')}
-          </div>
+          <div class="title">${i18next.t('title.data-report list')}</div>
 
           <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>

package/client/pages/data-report/data-report-samples-page.ts

@@ -8,7 +8,7 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
-import moment from 'moment-timezone'
+import moment from '@operato/moment-timezone-es'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'

package/client/pages/data-sample/data-sample-list-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import './data-sample-view.js'
@@ -6,21 +7,24 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
-import moment from 'moment-timezone'
+import moment from '@operato/moment-timezone-es'
 
 import { DataGrist, FetchOption, GristRecord } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 import { GhostPrint } from '@operato/ghost-print'
 
+import { p13n } from '@operato/p13n'
+
 @customElement('data-sample-list-page')
-export class DataSampleListPage extends connect(store)(localize(i18next)(PageView)) {
+export class DataSampleListPage extends connect(store)(p13n(localize(i18next)(PageView))) {
   static styles = [
     ScrollbarStyles,
+    CommonGristStyles,
     CommonHeaderStyles,
     css`
       :host {
@@ -78,12 +82,15 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
     const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
 
     return html`
-      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${false /* this.active */}>
+      <ox-grist
+        .mode=${mode}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
+        ?url-params-sensitive=${false /* this.active */}
+      >
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-sample list')}
-          </div>
+          <div class="title">${i18next.t('title.data-sample list')}</div>
 
           <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
@@ -91,6 +98,8 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
 
           <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
         </div>
+
+        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
       </ox-grist>
     `
   }
@@ -299,9 +308,9 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
         classifier: function (record, rowIndex) {
           var emphasized
           if (record['oos']) {
-            emphasized = ['#8B0000']
+            emphasized = ['#8B0000', 'white']
           } else if (record['ooc']) {
-            emphasized = ['#FF6B6B']
+            emphasized = ['#FF6B6B', 'white']
           }
 
           return {
@@ -310,11 +319,16 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
         },
         handlers: {
           click: (columns, data, column, record, rowIndex) => {
-            openPopup(html` <data-sample-view data-sample-id=${record.id} style="background-color: white;"></data-sample-view> `, {
-              backdrop: true,
-              size: 'large',
-              title: i18next.t('title.data-sample view')
-            })
+            openPopup(
+              html`
+                <data-sample-view data-sample-id=${record.id} style="background-color: white;"></data-sample-view>
+              `,
+              {
+                backdrop: true,
+                size: 'large',
+                title: i18next.t('title.data-sample view')
+              }
+            )
           }
         }
       },
@@ -401,7 +415,9 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
           .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
           .reduce((record, column) => {
             const key = column.imex === true ? column.name : column.imex.key
-            record[key] = key.split('.').reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            record[key] = key
+              .split('.')
+              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
             return record
           }, {})
       }

package/client/pages/data-sample/data-sample-search-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import './data-sample-view.js'
@@ -6,7 +7,7 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
-import moment from 'moment-timezone'
+import moment from '@operato/moment-timezone-es'
 
 import { DataGrist, FetchOption, GristRecord } from '@operato/data-grist'
 import { client } from '@operato/graphql'
@@ -68,10 +69,10 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
           icon: 'print'
         }
       ],
-      exportable: {
-        name: i18next.t('title.data-sample search'),
-        data: this._exportableData.bind(this)
-      },
+      // exportable: {
+      //   name: i18next.t('title.data-sample search'),
+      //   data: this._exportableData.bind(this)
+      // },
       toolbar: false
     }
   }
@@ -82,10 +83,7 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-sample search')}
-          </div>
+          <div class="title">${i18next.t('title.data-sample search')}</div>
 
           <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
@@ -136,8 +134,6 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
       this.dataKeySet = this.dataSet.dataKeySet
 
       this.refreshGristConfig()
-
-      this.grist.fetch()
     }
   }
 
@@ -285,9 +281,9 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
         classifier: function (record, rowIndex) {
           var emphasized
           if (record['oos']) {
-            emphasized = ['#8B0000']
+            emphasized = ['#8B0000', 'white']
           } else if (record['ooc']) {
-            emphasized = ['#FF6B6B']
+            emphasized = ['#FF6B6B', 'white']
           }
 
           return {
@@ -296,11 +292,16 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
         },
         handlers: {
           click: (columns, data, column, record, rowIndex) => {
-            openPopup(html` <data-sample-view data-sample-id=${record.id} style="background-color: white;"></data-sample-view> `, {
-              backdrop: true,
-              size: 'large',
-              title: i18next.t('title.data-sample view')
-            })
+            openPopup(
+              html`
+                <data-sample-view data-sample-id=${record.id} style="background-color: white;"></data-sample-view>
+              `,
+              {
+                backdrop: true,
+                size: 'large',
+                title: i18next.t('title.data-sample view')
+              }
+            )
           }
         }
       },
@@ -321,7 +322,12 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
     const response = await client.query({
       query: gql`
         query ($dataSetId: String!, $filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          responses: dataSamplesByDataSet(dataSetId: $dataSetId, filters: $filters, pagination: $pagination, sortings: $sortings) {
+          responses: dataSamplesByDataSet(
+            dataSetId: $dataSetId
+            filters: $filters
+            pagination: $pagination
+            sortings: $sortings
+          ) {
             items {
               id
               name
@@ -391,7 +397,9 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
           .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
           .reduce((record, column) => {
             const key = column.imex === true ? column.name : column.imex.key
-            record[key] = key.split('.').reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            record[key] = key
+              .split('.')
+              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
             return record
           }, {})
       }

package/client/pages/data-sample/data-sample-view.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+import '@material/web/fab/fab.js'
 import '@operato/dataset/ox-data-sample-view.js'
 import '@operato/dataset/ox-data-ooc-brief-view.js'
 import '@things-factory/worklist/dist-client/components/activity-thread-timeline.js'
@@ -21,19 +23,19 @@ export class DataSampleView extends localize(i18next)(LitElement) {
         position: relative;
         display: block;
         overflow: auto;
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-data-sample-view,
       ox-data-ooc-brief-view {
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
       }
 
       activity-thread-timeline {
-        margin: var(--margin-default);
+        margin: var(--spacing-medium);
       }
 
-      mwc-fab {
+      md-fab {
         position: fixed;
         bottom: 15px;
         right: 16px;
@@ -42,7 +44,7 @@ export class DataSampleView extends localize(i18next)(LitElement) {
       }
 
       @media print {
-        mwc-fab {
+        md-fab {
           display: none;
         }
       }
@@ -80,7 +82,9 @@ export class DataSampleView extends localize(i18next)(LitElement) {
       ${reviewActivityThread
         ? html`
             <activity-thread-timeline
-              subtitle=${String(i18next.t(dataSample?.dataOoc ? 'label.ooc review timeline' : 'label.datasample review timeline'))}
+              subtitle=${String(
+                i18next.t(dataSample?.dataOoc ? 'label.ooc review timeline' : 'label.datasample review timeline')
+              )}
               .activityThread=${reviewActivityThread}
               short-form
             ></activity-thread-timeline>
@@ -96,15 +100,15 @@ export class DataSampleView extends localize(i18next)(LitElement) {
           `
         : nothing}
 
-      <mwc-fab
-        icon="print"
+      <md-fab
         title="print"
         @click=${() =>
           GhostPrint.print({
             src: `./data-sample/${this.dataSampleId}`
           })}
-        >print</mwc-fab
       >
+        <md-icon slot="icon">print</md-icon>
+      </md-fab>
     `
   }
 

package/client/pages/data-sensor/data-sensor-list-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 
@@ -11,15 +12,18 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonGristStyles, 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'
 
+import { p13n } from '@operato/p13n'
+
 @customElement('data-sensor-list-page')
-export class DataSensorListPage extends connect(store)(localize(i18next)(PageView)) {
+export class DataSensorListPage extends connect(store)(p13n(localize(i18next)(PageView))) {
   static styles = [
     ScrollbarStyles,
+    CommonGristStyles,
     CommonHeaderStyles,
     css`
       :host {
@@ -33,15 +37,6 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
         overflow-y: auto;
         flex: 1;
       }
-
-      @media (max-width: 450px) {
-        .header {
-          display: grid;
-          grid-template-areas:
-            'title actions'
-            'filters filters';
-        }
-      }
     `
   ]
 
@@ -79,7 +74,10 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
         {
           icon: 'delete',
           title: i18next.t('button.delete'),
-          action: this._deleteDataSensor.bind(this)
+          action: this._deleteDataSensor.bind(this),
+          emphasis: {
+            danger: true
+          }
         }
       ],
       toolbar: false
@@ -90,12 +88,15 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
     const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
 
     return html`
-      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
+      <ox-grist
+        .mode=${mode}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
+        ?url-params-sensitive=${this.active}
+      >
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-sensor list')}
-          </div>
+          <div class="title">${i18next.t('title.data-sensor list')}</div>
 
           <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
@@ -103,6 +104,8 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
 
           <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
         </div>
+
+        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
       </ox-grist>
     `
   }

package/client/pages/data-set/data-item-list.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import gql from 'graphql-tag'
 
 import { css, html, LitElement } from 'lit'
@@ -7,6 +9,7 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
 import { DataGrist, FetchOption } from '@operato/data-grist'
+import { ButtonContainerStyles } from '@operato/styles'
 
 const DataItemStats = ['sum', 'mean', 'stddev', 'variance', 'min', 'max', 'range', 'median', 'mode']
 
@@ -17,30 +20,18 @@ class DataItemList extends localize(i18next)(LitElement) {
   @state() gristConfig: any
 
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-      }
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -48,10 +39,17 @@ class DataItemList extends localize(i18next)(LitElement) {
 
   render() {
     return html`
-      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      ></ox-grist>
+
       <div class="button-container">
-        <mwc-button raised danger @click=${this._deleteDataItems.bind(this)}>${i18next.t('button.delete')}</mwc-button>
-        <mwc-button raised @click=${this._updateDataItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button danger @click=${this._deleteDataItems.bind(this)}>
+          <md-icon>delete_forever</md-icon>${i18next.t('button.delete')}
+        </button>
+        <button @click=${this._updateDataItems.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }