@things-factory/dataset 7.0.1-alpha.9 → 7.0.1-alpha.90

package/client/activities/activity-ooc-resolve-edit.ts

@@ -1,5 +1,5 @@
+import '@material/web/icon/icon.js'
 import '@operato/dataset/ox-data-ooc-brief-view.js'
-// import '@operato/dataset/ox-data-ooc-correction-part.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement, nothing } from 'lit'
@@ -51,7 +51,7 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
         align-items: center;
       }
 
-      mwc-icon {
+      md-icon {
         color: var(--status-danger-color);
       }
 
@@ -92,7 +92,7 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
       ${editable
         ? html`
             <label action>
-              <h2><mwc-icon>build_circle</mwc-icon>&nbsp;<span>${i18next.t('label.corrective action')}</span></h2>
+              <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective action')}</span></h2>
               <textarea placeholder=${String(i18next.t('text.corrective action placeholder'))} .value=${action || ''} @change=${this.onChangeAction}></textarea>
             </label>
           `

package/client/activities/activity-ooc-review-edit.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/dataset/ox-data-sample-view.js'
 
 import gql from 'graphql-tag'
@@ -54,7 +55,7 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
           font: var(--input-field-font);
         }
 
-        mwc-icon {
+        md-icon {
           color: var(--status-danger-color);
         }
 
@@ -90,7 +91,7 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
       </div>
 
       <label instruction>
-        <h2><mwc-icon>build_circle</mwc-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>
+        <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>
         ${editable
           ? html`
               <textarea

package/client/components/data-entry-form.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/dataset/ox-data-entry-form.js'
 
 import gql from 'graphql-tag'
@@ -6,13 +7,14 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
-import { ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 import { OxDataEntryForm } from '@operato/dataset/ox-data-entry-form.js'
 import { DataSet } from '@operato/dataset'
 
 @customElement('data-entry-form')
 export class DataEntryForm extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -28,12 +30,6 @@ export class DataEntryForm extends localize(i18next)(LitElement) {
         overflow: auto;
       }
 
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
       .button-container span {
         font-size: 14px;
         color: #333;
@@ -52,11 +48,10 @@ export class DataEntryForm extends localize(i18next)(LitElement) {
   render() {
     return html`
       <ox-data-entry-form .dataSet=${this.dataSet}></ox-data-entry-form>
+
       <div class="button-container">
         ${!this.dataSample
-          ? html`
-              <mwc-button raised @click=${this.updateDataItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
-            `
+          ? html` <button @click=${this.updateDataItems.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button> `
           : html` <span>${i18next.t('field.collected-at')}: ${this.dataSample.collectedAt.toLocaleString()}</span> `}
       </div>
     `
@@ -101,9 +96,7 @@ export class DataEntryForm extends localize(i18next)(LitElement) {
         collectedAt: new Date(collectedAt)
       }
 
-      document.dispatchEvent(
-        new CustomEvent('notify', { detail: { message: i18next.t('text.data sample created successfully') } })
-      )
+      document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.data sample created successfully') } }))
     }
   }
 }

package/client/pages/data-archive/data-archive-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'
 
@@ -77,17 +78,9 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
     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)} ?url-params-sensitive=${false /* this.active */}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-archive list')}
-          </div>
+          <div class="title">${i18next.t('title.data-archive list')}</div>
 
           <!-- <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
@@ -185,10 +178,7 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
 
   async openArchivePopup() {
     this.popup = openPopup(
-      html` <data-archive-request-popup
-        @requested=${this.closePopupAndRefesh.bind(this)}
-        @created=${this.closePopupAndRefesh.bind(this)}
-      ></data-archive-request-popup>`,
+      html` <data-archive-request-popup @requested=${this.closePopupAndRefesh.bind(this)} @created=${this.closePopupAndRefesh.bind(this)}></data-archive-request-popup>`,
       {
         backdrop: true,
         size: 'small',
@@ -264,9 +254,7 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
           .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-archive/data-archive-request-popup.ts

@@ -1,17 +1,21 @@
+import '@material/web/icon/icon.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 } from '@operato/graphql'
-import { SingleColumnFormStyles } from '@things-factory/form-ui'
+import { SingleColumnFormStyles } from '@operato/form'
+import { ButtonContainerStyles } from '@operato/styles'
 
-import moment from 'moment-timezone'
+import moment from '@operato/moment-timezone-es'
 import { CustomAlert } from '@operato/shell'
 
 @customElement('data-archive-request-popup')
 class DataArchiveRequestPopup extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     SingleColumnFormStyles,
     css`
       :host {
@@ -25,13 +29,6 @@ class DataArchiveRequestPopup extends localize(i18next)(LitElement) {
       form {
         overflow: auto;
       }
-
-      .button-container {
-        display: flex;
-        margin-top: auto;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
     `
   ]
 
@@ -53,7 +50,7 @@ class DataArchiveRequestPopup extends localize(i18next)(LitElement) {
       </form>
 
       <div class="button-container">
-        <mwc-button raised @click=${this.requestArchive} label=${String(i18next.t('button.submit'))}></mwc-button>
+        <button @click=${this.requestArchive}><md-icon>archive</md-icon>${String(i18next.t('button.submit'))}</button>
       </div>
     `
   }

package/client/pages/data-entry/data-entry-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'
@@ -120,10 +121,7 @@ export class DataEntryListPage extends connect(store)(localize(i18next)(PageView
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-entry list')}
-          </div>
+          <div class="title">${i18next.t('title.data-entry list')}</div>
 
           <div class="filters">
             <ox-filters-form autofocus without-search></ox-filters-form>

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

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
@@ -6,10 +8,12 @@ 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'
 
 @customElement('data-key-item-list')
 export class DataKeyItemList extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
@@ -21,19 +25,6 @@ export class DataKeyItemList extends localize(i18next)(LitElement) {
       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);
-      }
     `
   ]
 
@@ -43,16 +34,11 @@ export class DataKeyItemList 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._deleteDataKeyItems.bind(this)}
-          >${i18next.t('button.delete')}</mwc-button
-        >
-        <mwc-button raised @click=${this._updateDataKeyItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button danger @click=${this._deleteDataKeyItems.bind(this)}><md-icon>delete_forever</md-icon>${i18next.t('button.delete')}</button>
+        <button @click=${this._updateDataKeyItems.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/pages/data-key-set/data-key-set-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,10 +8,12 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('data-key-set-importer')
 export class DataKeySetImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
@@ -22,16 +25,6 @@ export class DataKeySetImporter extends LitElement {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -73,7 +66,7 @@ export class DataKeySetImporter extends LitElement {
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/pages/data-key-set/data-key-set-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-key-set-importer.js'
@@ -102,7 +103,10 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
         {
           title: i18next.t('button.delete'),
           action: this._deleteDataKeySet.bind(this),
-          icon: 'delete'
+          icon: 'delete',
+          emphasis: {
+            danger: true
+          }
         }
       ],
       exportable: {
@@ -122,10 +126,7 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
     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-key-set list')}
-          </div>
+          <div class="title">${i18next.t('title.data-key-set list')}</div>
 
           <div class="filters">
             <ox-filters-form autofocus without-search></ox-filters-form>

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'
@@ -32,7 +33,7 @@ export class DataOocView extends localize(i18next)(LitElement) {
         margin: var(--margin-default);
       }
 
-      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-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'
@@ -44,23 +45,12 @@ const showMonitorView = (columns, data, column, record, rowIndex) => {
       const board = {
         id: monitorView
       }
-      openPopup(
-        html`
-          <ox-board-viewer
-            style="background-color: white;"
-            .board=${board}
-            .provider=${provider}
-            hide-fullscreen
-            hide-navigation
-          ></ox-board-viewer>
-        `,
-        {
-          closable: true,
-          backdrop: true,
-          size: 'large',
-          title
-        }
-      )
+      openPopup(html` <ox-board-viewer style="background-color: white;" .board=${board} .provider=${provider} hide-fullscreen hide-navigation></ox-board-viewer> `, {
+        closable: true,
+        backdrop: true,
+        size: 'large',
+        title
+      })
 
       // navigate(`board-viewer/${monitorView}?interactive=true&title=${title}`)
       break
@@ -166,17 +156,9 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
     const mode = 'CARD'
 
     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)} ?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>
     `
   }
@@ -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
           }, {})
       }