@things-factory/operato-board 6.1.80 → 6.1.82

package/client/apptools/{favorite-tool.js → favorite-tool.ts}

@@ -2,43 +2,41 @@ import '@material/mwc-icon'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { store } from '@operato/shell'
 import { client } from '@operato/graphql'
 import { UPDATE_FAVORITES } from '@things-factory/fav-base'
 
+@customElement('favorite-tool')
 export class FavoriteTool extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      favorites: Array,
-      user: Object,
-      resourceId: String,
-      favored: Boolean,
-      acceptedPages: Array
+  static styles = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      line-height: 0;
     }
-  }
 
-  static get styles() {
-    return css`
-      :host {
-        display: inline-block;
-        vertical-align: middle;
-        line-height: 0;
-      }
-
-      [favorable] {
-        opacity: 0.5;
-      }
-    `
-  }
+    [favorable] {
+      opacity: 0.5;
+    }
+  `
+
+  @property({ type: Array }) favorites: any[] = []
+  @property({ type: Object }) user: any
+  @property({ type: String }) resourceId?: string
+  @property({ type: Boolean }) favored?: boolean
+  @property({ type: Array }) acceptedPages: any[] = []
+
+  page: any
 
   render() {
     var renderable = (this.acceptedPages || []).indexOf(this.page) !== -1
 
     return renderable
       ? html`
-          <mwc-icon @click=${this.onclick.bind(this)} ?favorable=${!this.favored}
+          <mwc-icon @click=${this.onClick.bind(this)} ?favorable=${!this.favored}
             >${this.favored ? 'star' : 'star_border'}</mwc-icon
           >
         `
@@ -60,7 +58,7 @@ export class FavoriteTool extends connect(store)(LitElement) {
     this.resourceId = state.route.resourceId
   }
 
-  onclick(event) {
+  onClick(event) {
     if (!this.resourceId) {
       return
     }
@@ -123,5 +121,3 @@ export class FavoriteTool extends connect(store)(LitElement) {
     this.refreshFavorites()
   }
 }
-
-customElements.define('favorite-tool', FavoriteTool)

package/client/board-list/{board-importer.js → board-importer.ts}

@@ -1,5 +1,7 @@
 import '@operato/board/ox-board-viewer.js'
 
+import { BoardViewer } from '@operato/board/ox-board-viewer.js'
+
 function setHighlightStyle(dropArea) {
   var style = document.createElement('style')
 
@@ -18,7 +20,7 @@ export default class BoardImporter {
     reader.readAsText(file)
     reader.onloadend = () => {
       try {
-        let model = JSON.parse(reader.result)
+        let model = JSON.parse(reader.result as any)
         importer(file.name.replace(/\.[^/.]+$/, ''), model)
       } catch (e) {
         console.error('board import failed', e)
@@ -31,20 +33,22 @@ export default class BoardImporter {
     reader.readAsText(file)
     reader.onloadend = () => {
       try {
-        let previewModel = JSON.parse(reader.result)
+        let previewModel = JSON.parse(reader.result as any)
 
-        var preview = document.createElement('ox-board-viewer')
+        var preview = document.createElement('ox-board-viewer') as BoardViewer
 
         preview.style.width = '100%'
         preview.style.height = '80%'
         preview.style.margin = '0'
         preview.style.padding = '0'
-        preview.model = previewModel
+
+        // TODO how to hand over model to previewer
+        // preview.model = previewModel
         // preview.provider = provider;
 
         var buttons = document.createElement('div')
 
-        buttons.style.classList = 'buttons'
+        buttons.className = 'buttons'
         buttons.innerHTML = `
           <paper-button dialog-dismiss>Cancel</paper-button>
           <paper-button dialog-confirm autofocus>Accept</paper-button>
@@ -54,11 +58,11 @@ export default class BoardImporter {
 
         dialog.style.width = '100%'
         dialog.style.height = '100%'
-        dialog.setAttribute('with-backdrop', true)
-        dialog.setAttribute('auto-fit-on-attach', true)
-        dialog.setAttribute('always-on-top', true)
+        dialog.setAttribute('with-backdrop', 'true')
+        dialog.setAttribute('auto-fit-on-attach', 'true')
+        dialog.setAttribute('always-on-top', 'true')
         dialog.addEventListener('iron-overlay-closed', () => {
-          dialog.parentNode.removeChild(dialog)
+          dialog.parentNode!.removeChild(dialog)
         })
 
         dialog.appendChild(preview)
@@ -66,7 +70,7 @@ export default class BoardImporter {
         document.body.appendChild(dialog)
 
         requestAnimationFrame(() => {
-          dialog.open()
+          ;(dialog as any).open()
         })
       } catch (e) {
         console.error('board preview failed', e)

package/client/{bootstrap.js → bootstrap.ts}

@@ -16,14 +16,15 @@ import {
   VIEWPART_LEVEL,
   VIEWPART_POSITION
 } from '@operato/layout'
+
 import { APPEND_APP_TOOL } from '@things-factory/apptool-base'
 import { setupAppToolPart } from '@things-factory/apptool-ui'
-import { auth } from '@things-factory/auth-base'
+import { auth } from '@things-factory/auth-base/dist-client'
 import { setAuthManagementMenus } from '@things-factory/auth-ui'
 import { setupContextUIPart } from '@things-factory/context-ui'
 import { ADD_MORENDA } from '@things-factory/more-base'
 import { ADD_SETTING } from '@things-factory/setting-base'
-import { navigate, store, UPDATE_BASE_URL } from '@things-factory/shell'
+import { navigate, store, UPDATE_BASE_URL } from '@operato/shell'
 
 import permissions from './reducers/permissions'
 
@@ -133,7 +134,7 @@ export default async function bootstrap() {
   })
 
   store.subscribe(async () => {
-    var state = store.getState()
+    var state = store.getState() as any
 
     if (state.layout.width == width) {
       return

package/client/graphql/{board.js → board.ts}

@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 
-import { client } from '@things-factory/shell'
+import { client } from '@operato/graphql'
 import { gqlBuilder } from '@things-factory/utils'
 
 export async function fetchBoardList(listParam = {}) {

package/client/graphql/{favorite-board.js → favorite-board.ts}

@@ -1,5 +1,5 @@
 import gql from 'graphql-tag'
-import { client } from '@things-factory/shell'
+import { client } from '@operato/graphql'
 import { gqlBuilder } from '@things-factory/utils'
 
 export async function fetchFavoriteBoardList(listParam = {}) {

package/client/graphql/{group.js → group.ts}

@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 
-import { client } from '@things-factory/shell'
+import { client } from '@operato/graphql'
 
 export async function fetchGroup(id) {
   const response = await client.query({
@@ -56,7 +56,7 @@ export async function updateGroup(group) {
 export async function deleteGroup(id) {
   const response = await client.mutate({
     mutation: gql`
-      mutation($id: String!) {
+      mutation ($id: String!) {
         deleteGroup(id: $id)
       }
     `,

package/client/graphql/{play-group.js → play-group.ts}

@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 
-import { client } from '@things-factory/shell'
+import { client } from '@operato/graphql'
 
 export async function fetchPlayGroupList() {
   const response = await client.query({
@@ -117,7 +117,7 @@ export async function updatePlayGroup(group) {
 export async function deletePlayGroup(id) {
   const response = await client.mutate({
     mutation: gql`
-      mutation($id: String!) {
+      mutation ($id: String!) {
         deletePlayGroup(id: $id)
       }
     `,
@@ -162,7 +162,7 @@ export async function joinPlayGroup(boardId, group) {
 export async function leavePlayGroup(boardId, groupId) {
   const response = await client.mutate({
     mutation: gql`
-      mutation($id: String!, $boardIds: [String]!) {
+      mutation ($id: String!, $boardIds: [String]!) {
         leavePlayGroup(id: $id, boardIds: $boardIds) {
           id
           name

package/client/themes/grist-theme.css

@@ -34,6 +34,8 @@ body {
   --grid-header-color: rgba(var(--secondary-color-rgb), 0.8);
   --grid-header-font: bold var(--fontsize-small) var(--theme-font);
 
+  --grid-gutter-padding:var(--padding-default) 0;
+
   --grid-record-background-color: var(--theme-white-color);
   --grid-record-odd-background-color: rgba(255, 255, 255, 0.4);
   --grid-record-padding: 0 0 0 var(--padding-default);

package/client/viewparts/{board-info.js → board-info.ts}

@@ -2,149 +2,145 @@ import '@material/mwc-icon'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
 
-import { i18next } from '@things-factory/i18n-base'
-import { client, navigate } from '@things-factory/shell'
+import { i18next } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { navigate } from '@operato/shell'
 
+@customElement('board-info')
 export class BoardInfo extends LitElement {
-  static get properties() {
-    return {
-      boardId: String,
-      board: Object,
-      groupId: String,
-      boardGroupList: Array,
-      enableModeller: {
-        type: Boolean,
-        attribute: 'enable-modeller'
+  static styles = [
+    css`
+      :host {
+        display: block;
+        background-color: var(--main-section-background-color);
+        height: 100%;
+        min-width: 350px;
+        overflow: auto;
+        position: relative;
+
+        --form-grid-gap: 2px 0;
+        --input-field-padding: var(--padding-default);
+        --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;
+        --mdc-button-horizontal-padding: var(--padding-default);
       }
-    }
-  }
 
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
-          background-color: var(--main-section-background-color);
-          height: 100%;
-          min-width: 350px;
-          overflow: auto;
-          position: relative;
-
-          --form-grid-gap: 2px 0;
-          --input-field-padding: var(--padding-default);
-          --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;
-          --mdc-button-horizontal-padding: var(--padding-default);
-        }
+      img {
+        display: block;
 
-        img {
-          display: block;
+        margin: auto;
+        max-width: 100%;
+        max-height: 100%;
+        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+      }
 
-          margin: auto;
-          max-width: 100%;
-          max-height: 100%;
-          border-bottom: 2px solid rgba(0, 0, 0, 0.1);
-        }
+      form {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        grid-gap: var(--form-grid-gap);
+        grid-auto-rows: minmax(24px, auto);
+        padding: var(--padding-wide);
+        align-items: center;
+      }
 
-        form {
-          display: grid;
-          grid-template-columns: repeat(12, 1fr);
-          grid-gap: var(--form-grid-gap);
-          grid-auto-rows: minmax(24px, auto);
-          padding: var(--padding-wide);
-          align-items: center;
-        }
+      [buttons] {
+        grid-column: span 12;
+        padding: var(--padding-default) 0;
+        text-align: right;
+      }
 
-        [buttons] {
-          grid-column: span 12;
-          padding: var(--padding-default) 0;
-          text-align: right;
-        }
+      [buttons] * {
+        margin: 0 0 0 var(--margin-narrow);
+      }
+      [danger] {
+        float: left;
+        margin: 0 var(--margin-narrow) 0 0;
+        --mdc-theme-primary: var(--status-danger-color);
+      }
 
-        [buttons] * {
-          margin: 0 0 0 var(--margin-narrow);
-        }
-        [danger] {
-          float: left;
-          margin: 0 var(--margin-narrow) 0 0;
-          --mdc-theme-primary: var(--status-danger-color);
-        }
+      fieldset {
+        display: contents;
+      }
 
-        fieldset {
-          display: contents;
-        }
+      legend {
+        grid-column: span 12;
+        padding: var(--legend-padding);
+        font: var(--legend-font);
+        color: var(--legend-text-color);
+        text-transform: capitalize;
+      }
 
-        legend {
-          grid-column: span 12;
-          padding: var(--legend-padding);
-          font: var(--legend-font);
-          color: var(--legend-text-color);
-          text-transform: capitalize;
-        }
+      label {
+        grid-column: span 12;
+        text-transform: capitalize;
+        color: var(--label-color);
+        font: var(--label-font);
+      }
 
-        label {
-          grid-column: span 12;
-          text-transform: capitalize;
-          color: var(--label-color);
-          font: var(--label-font);
-        }
+      span {
+        grid-column: span 12;
+        border-bottom: var(--border-dark-color);
+        margin-bottom: var(--margin-default);
+        padding-bottom: var(--padding-narrow);
+        font: var(--input-field-font);
+      }
+      span mwc-icon {
+        vertical-align: middle;
+        font-size: var(--fontsize-large);
+        color: var(--primary-color);
+      }
 
-        span {
-          grid-column: span 12;
-          border-bottom: var(--border-dark-color);
-          margin-bottom: var(--margin-default);
-          padding-bottom: var(--padding-narrow);
-          font: var(--input-field-font);
-        }
-        span mwc-icon {
-          vertical-align: middle;
-          font-size: var(--fontsize-large);
-          color: var(--primary-color);
-        }
+      input,
+      table,
+      select,
+      textarea,
+      [custom-input] {
+        grid-column: span 12;
+
+        border: var(--input-field-border);
+        border-radius: var(--input-field-border-radius);
+        margin-bottom: var(--margin-default);
+        padding: var(--input-field-padding);
+        font: var(--input-field-font);
+      }
 
-        input,
-        table,
-        select,
-        textarea,
-        [custom-input] {
-          grid-column: span 12;
-
-          border: var(--input-field-border);
-          border-radius: var(--input-field-border-radius);
-          margin-bottom: var(--margin-default);
-          padding: var(--input-field-padding);
-          font: var(--input-field-font);
-        }
+      input[type='checkbox'],
+      input[type='radio'] {
+        place-self: center;
+        margin: 0;
+        grid-column: 1;
+      }
 
-        input[type='checkbox'],
-        input[type='radio'] {
-          place-self: center;
-          margin: 0;
-          grid-column: 1;
-        }
+      input[type='checkbox'] + label,
+      input[type='radio'] + label {
+        text-align: left;
+        grid-column: span 11 / auto;
 
-        input[type='checkbox'] + label,
-        input[type='radio'] + label {
-          text-align: left;
-          grid-column: span 11 / auto;
+        font: var(--form-sublabel-font);
+        color: var(--form-sublabel-color);
+      }
 
-          font: var(--form-sublabel-font);
-          color: var(--form-sublabel-color);
-        }
+      input:focus {
+        outline: none;
+        border: 1px solid var(--focus-background-color);
+      }
 
-        input:focus {
-          outline: none;
-          border: 1px solid var(--focus-background-color);
+      @media screen and (max-width: 460px) {
+        :host {
+          width: 100vw;
         }
+      }
+    `
+  ]
 
-        @media screen and (max-width: 460px) {
-          :host {
-            width: 100vw;
-          }
-        }
-      `
-    ]
-  }
+  @property({ type: String }) boardId?: string
+  @property({ type: String }) groupId?: string
+  @property({ type: Boolean, attribute: 'enable-modeller' }) enableModeller?: boolean
+
+  @state() board: any
+  @state() boardGroupList: any[] = []
+  @state() playGroupList: any[] = []
 
   render() {
     var board = this.board || { name: '', description: '', playGroups: [] }
@@ -187,7 +183,7 @@ export class BoardInfo extends LitElement {
           <label>${i18next.t('label.group')}</label>
           <select
             @change=${e => (this.board.groupId = e.target.value)}
-            .value=${this.groupId}
+            .value=${this.groupId || ''}
             ?disabled=${!this.enableModeller}
           >
             <option value="" ?selected=${'' == this.groupId}></option>
@@ -212,7 +208,7 @@ export class BoardInfo extends LitElement {
               dense
               raised
               danger
-              label=${i18next.t('button.delete')}
+              label=${String(i18next.t('button.delete'))}
               ?disabled=${!this.enableModeller}
               @click=${this.deleteBoard.bind(this)}
               icon="delete_outline"
@@ -220,7 +216,7 @@ export class BoardInfo extends LitElement {
             <mwc-button
               dense
               raised
-              label=${i18next.t('button.save')}
+              label=${String(i18next.t('button.save'))}
               ?disabled=${!this.enableModeller}
               @click=${this.updateBoard.bind(this)}
               icon="done"
@@ -366,5 +362,3 @@ export class BoardInfo extends LitElement {
     history.back()
   }
 }
-
-customElements.define('board-info', BoardInfo)