@dssp/supervision 0.0.2 → 0.0.5

package/client/pages/action-plan/action-plan-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -28,7 +29,7 @@ export class ActionPlanImporter extends LitElement {
         padding: var(--padding-default);
       }
 
-      mwc-button {
+      md-elevated-button {
         margin-left: var(--margin-default);
       }
     `
@@ -65,15 +66,13 @@ export class ActionPlanImporter extends LitElement {
       <ox-grist
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.columns}
-        .data=${
-          { 
-            records: this.actionPlans 
-          }
-        }
+        .data=${{
+          records: this.actionPlans
+        }}
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <md-elevated-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</md-elevated-button>
       </div>
     `
   }
@@ -93,4 +92,3 @@ export class ActionPlanImporter extends LitElement {
     this.dispatchEvent(new CustomEvent('imported'))
   }
 }
-

package/client/pages/action-plan/action-plan-list-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
@@ -5,12 +6,7 @@ import { PageView, store } from '@operato/shell'
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import {
-  ColumnConfig,
-  DataGrist,
-  FetchOption,
-  SortersControl
-} from '@operato/data-grist'
+import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
@@ -24,7 +20,6 @@ import { ActionPlanImporter } from './action-plan-importer'
 
 @customElement('action-plan-list-page')
 export class ActionPlanListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
-
   static styles = [
     ScrollbarStyles,
     CommonGristStyles,
@@ -93,11 +88,7 @@ export class ActionPlanListPage extends connect(store)(localize(i18next)(ScopedE
     const mode = this.mode || (isMobileDevice() ? 'CARD' : '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)}>
         <div slot="headroom">
           <div id="filters">
             <ox-filters-form autofocus></ox-filters-form>
@@ -105,7 +96,7 @@ export class ActionPlanListPage extends connect(store)(localize(i18next)(ScopedE
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sortersControl.open({
@@ -113,7 +104,7 @@ export class ActionPlanListPage extends connect(store)(localize(i18next)(ScopedE
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -121,9 +112,9 @@ export class ActionPlanListPage extends connect(store)(localize(i18next)(ScopedE
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -312,12 +303,7 @@ export class ActionPlanListPage extends connect(store)(localize(i18next)(ScopedE
 
   private async exportHandler() {
     const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
-    const targetFieldSet = new Set([
-      'id',
-      'name',
-      'description',
-      'active'
-    ])
+    const targetFieldSet = new Set(['id', 'name', 'description', 'active'])
 
     return exportTargets.map(actionPlan => {
       let tempObj = {}
@@ -346,10 +332,9 @@ export class ActionPlanListPage extends connect(store)(localize(i18next)(ScopedE
         title: i18next.t('title.import action-plan')
       }
     )
-    
+
     popup.onclosed = () => {
       this.grist.fetch()
     }
   }
 }
-

package/client/pages/check-item/check-item-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -28,7 +29,7 @@ export class CheckItemImporter extends LitElement {
         padding: var(--padding-default);
       }
 
-      mwc-button {
+      md-elevated-button {
         margin-left: var(--margin-default);
       }
     `
@@ -65,15 +66,13 @@ export class CheckItemImporter extends LitElement {
       <ox-grist
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.columns}
-        .data=${
-          { 
-            records: this.checkItems 
-          }
-        }
+        .data=${{
+          records: this.checkItems
+        }}
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <md-elevated-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</md-elevated-button>
       </div>
     `
   }
@@ -93,4 +92,3 @@ export class CheckItemImporter extends LitElement {
     this.dispatchEvent(new CustomEvent('imported'))
   }
 }
-

package/client/pages/check-item/check-item-list-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
@@ -5,12 +6,7 @@ import { PageView, store } from '@operato/shell'
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import {
-  ColumnConfig,
-  DataGrist,
-  FetchOption,
-  SortersControl
-} from '@operato/data-grist'
+import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
@@ -24,7 +20,6 @@ import { CheckItemImporter } from './check-item-importer'
 
 @customElement('check-item-list-page')
 export class CheckItemListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
-
   static styles = [
     ScrollbarStyles,
     CommonGristStyles,
@@ -93,11 +88,7 @@ export class CheckItemListPage extends connect(store)(localize(i18next)(ScopedEl
     const mode = this.mode || (isMobileDevice() ? 'CARD' : '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)}>
         <div slot="headroom">
           <div id="filters">
             <ox-filters-form autofocus></ox-filters-form>
@@ -105,7 +96,7 @@ export class CheckItemListPage extends connect(store)(localize(i18next)(ScopedEl
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sortersControl.open({
@@ -113,7 +104,7 @@ export class CheckItemListPage extends connect(store)(localize(i18next)(ScopedEl
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -121,9 +112,9 @@ export class CheckItemListPage extends connect(store)(localize(i18next)(ScopedEl
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -312,12 +303,7 @@ export class CheckItemListPage extends connect(store)(localize(i18next)(ScopedEl
 
   private async exportHandler() {
     const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
-    const targetFieldSet = new Set([
-      'id',
-      'name',
-      'description',
-      'active'
-    ])
+    const targetFieldSet = new Set(['id', 'name', 'description', 'active'])
 
     return exportTargets.map(checkItem => {
       let tempObj = {}
@@ -346,10 +332,9 @@ export class CheckItemListPage extends connect(store)(localize(i18next)(ScopedEl
         title: i18next.t('title.import check-item')
       }
     )
-    
+
     popup.onclosed = () => {
       this.grist.fetch()
     }
   }
 }
-

package/client/pages/issue/issue-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -28,7 +29,7 @@ export class IssueImporter extends LitElement {
         padding: var(--padding-default);
       }
 
-      mwc-button {
+      md-elevated-button {
         margin-left: var(--margin-default);
       }
     `
@@ -65,15 +66,13 @@ export class IssueImporter extends LitElement {
       <ox-grist
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.columns}
-        .data=${
-          { 
-            records: this.issues 
-          }
-        }
+        .data=${{
+          records: this.issues
+        }}
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <md-elevated-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</md-elevated-button>
       </div>
     `
   }
@@ -93,4 +92,3 @@ export class IssueImporter extends LitElement {
     this.dispatchEvent(new CustomEvent('imported'))
   }
 }
-

package/client/pages/issue/issue-list-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
@@ -5,12 +6,7 @@ import { PageView, store } from '@operato/shell'
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import {
-  ColumnConfig,
-  DataGrist,
-  FetchOption,
-  SortersControl
-} from '@operato/data-grist'
+import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
@@ -24,7 +20,6 @@ import { IssueImporter } from './issue-importer'
 
 @customElement('issue-list-page')
 export class IssueListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
-
   static styles = [
     ScrollbarStyles,
     CommonGristStyles,
@@ -93,11 +88,7 @@ export class IssueListPage extends connect(store)(localize(i18next)(ScopedElemen
     const mode = this.mode || (isMobileDevice() ? 'CARD' : '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)}>
         <div slot="headroom">
           <div id="filters">
             <ox-filters-form autofocus></ox-filters-form>
@@ -105,7 +96,7 @@ export class IssueListPage extends connect(store)(localize(i18next)(ScopedElemen
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sortersControl.open({
@@ -113,7 +104,7 @@ export class IssueListPage extends connect(store)(localize(i18next)(ScopedElemen
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -121,9 +112,9 @@ export class IssueListPage extends connect(store)(localize(i18next)(ScopedElemen
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -312,12 +303,7 @@ export class IssueListPage extends connect(store)(localize(i18next)(ScopedElemen
 
   private async exportHandler() {
     const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
-    const targetFieldSet = new Set([
-      'id',
-      'name',
-      'description',
-      'active'
-    ])
+    const targetFieldSet = new Set(['id', 'name', 'description', 'active'])
 
     return exportTargets.map(issue => {
       let tempObj = {}
@@ -346,10 +332,9 @@ export class IssueListPage extends connect(store)(localize(i18next)(ScopedElemen
         title: i18next.t('title.import issue')
       }
     )
-    
+
     popup.onclosed = () => {
       this.grist.fetch()
     }
   }
 }
-

package/client/pages/project-report/project-report-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -28,7 +29,7 @@ export class ProjectReportImporter extends LitElement {
         padding: var(--padding-default);
       }
 
-      mwc-button {
+      md-elevated-button {
         margin-left: var(--margin-default);
       }
     `
@@ -65,15 +66,13 @@ export class ProjectReportImporter extends LitElement {
       <ox-grist
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.columns}
-        .data=${
-          { 
-            records: this.projectReports 
-          }
-        }
+        .data=${{
+          records: this.projectReports
+        }}
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <md-elevated-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</md-elevated-button>
       </div>
     `
   }
@@ -93,4 +92,3 @@ export class ProjectReportImporter extends LitElement {
     this.dispatchEvent(new CustomEvent('imported'))
   }
 }
-

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

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
@@ -5,12 +6,7 @@ import { PageView, store } from '@operato/shell'
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import {
-  ColumnConfig,
-  DataGrist,
-  FetchOption,
-  SortersControl
-} from '@operato/data-grist'
+import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
@@ -24,7 +20,6 @@ import { ProjectReportImporter } from './project-report-importer'
 
 @customElement('project-report-list-page')
 export class ProjectReportListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
-
   static styles = [
     ScrollbarStyles,
     CommonGristStyles,
@@ -93,11 +88,7 @@ export class ProjectReportListPage extends connect(store)(localize(i18next)(Scop
     const mode = this.mode || (isMobileDevice() ? 'CARD' : '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)}>
         <div slot="headroom">
           <div id="filters">
             <ox-filters-form autofocus></ox-filters-form>
@@ -105,7 +96,7 @@ export class ProjectReportListPage extends connect(store)(localize(i18next)(Scop
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sortersControl.open({
@@ -113,7 +104,7 @@ export class ProjectReportListPage extends connect(store)(localize(i18next)(Scop
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -121,9 +112,9 @@ export class ProjectReportListPage extends connect(store)(localize(i18next)(Scop
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -312,12 +303,7 @@ export class ProjectReportListPage extends connect(store)(localize(i18next)(Scop
 
   private async exportHandler() {
     const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
-    const targetFieldSet = new Set([
-      'id',
-      'name',
-      'description',
-      'active'
-    ])
+    const targetFieldSet = new Set(['id', 'name', 'description', 'active'])
 
     return exportTargets.map(projectReport => {
       let tempObj = {}
@@ -346,10 +332,9 @@ export class ProjectReportListPage extends connect(store)(localize(i18next)(Scop
         title: i18next.t('title.import project-report')
       }
     )
-    
+
     popup.onclosed = () => {
       this.grist.fetch()
     }
   }
 }
-

package/client/pages/supervisor/supervisor-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -28,7 +29,7 @@ export class SupervisorImporter extends LitElement {
         padding: var(--padding-default);
       }
 
-      mwc-button {
+      md-elevated-button {
         margin-left: var(--margin-default);
       }
     `
@@ -65,15 +66,13 @@ export class SupervisorImporter extends LitElement {
       <ox-grist
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.columns}
-        .data=${
-          { 
-            records: this.supervisors 
-          }
-        }
+        .data=${{
+          records: this.supervisors
+        }}
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <md-elevated-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</md-elevated-button>
       </div>
     `
   }
@@ -93,4 +92,3 @@ export class SupervisorImporter extends LitElement {
     this.dispatchEvent(new CustomEvent('imported'))
   }
 }
-

package/client/pages/supervisor/supervisor-list-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
@@ -5,12 +6,7 @@ import { PageView, store } from '@operato/shell'
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import {
-  ColumnConfig,
-  DataGrist,
-  FetchOption,
-  SortersControl
-} from '@operato/data-grist'
+import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
@@ -24,7 +20,6 @@ import { SupervisorImporter } from './supervisor-importer'
 
 @customElement('supervisor-list-page')
 export class SupervisorListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
-
   static styles = [
     ScrollbarStyles,
     CommonGristStyles,
@@ -93,11 +88,7 @@ export class SupervisorListPage extends connect(store)(localize(i18next)(ScopedE
     const mode = this.mode || (isMobileDevice() ? 'CARD' : '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)}>
         <div slot="headroom">
           <div id="filters">
             <ox-filters-form autofocus></ox-filters-form>
@@ -105,7 +96,7 @@ export class SupervisorListPage extends connect(store)(localize(i18next)(ScopedE
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sortersControl.open({
@@ -113,7 +104,7 @@ export class SupervisorListPage extends connect(store)(localize(i18next)(ScopedE
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -121,9 +112,9 @@ export class SupervisorListPage extends connect(store)(localize(i18next)(ScopedE
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -312,12 +303,7 @@ export class SupervisorListPage extends connect(store)(localize(i18next)(ScopedE
 
   private async exportHandler() {
     const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
-    const targetFieldSet = new Set([
-      'id',
-      'name',
-      'description',
-      'active'
-    ])
+    const targetFieldSet = new Set(['id', 'name', 'description', 'active'])
 
     return exportTargets.map(supervisor => {
       let tempObj = {}
@@ -346,10 +332,9 @@ export class SupervisorListPage extends connect(store)(localize(i18next)(ScopedE
         title: i18next.t('title.import supervisor')
       }
     )
-    
+
     popup.onclosed = () => {
       this.grist.fetch()
     }
   }
 }
-

package/dist-client/pages/action-plan/action-plan-importer.d.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js';
 import '@operato/data-grist';
 import { LitElement } from 'lit';
 export declare class ActionPlanImporter extends LitElement {