@things-factory/board-ui 8.0.0-beta.8 → 8.0.0

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

@@ -0,0 +1,313 @@
+import '@operato/data-grist'
+
+import { CommonButtonStyles, CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { PageView, store } from '@operato/shell'
+import { css, html } from 'lit'
+import { useMutation } from '@apollo/client'
+
+import { customElement, property, query } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin'
+import gql from 'graphql-tag'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { DataGrist, FetchOption, getEditor, getRenderer } from '@operato/data-grist'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { notify } from '@operato/layout'
+import { isMobileDevice } from '@operato/utils'
+
+// export interface ThemeType {
+//   name: string
+//   propType: string
+// }
+
+// var ThemeTypes: { [name: string]: ThemeType } = {
+//   Legend: {
+//     name: 'Legend',
+//     propType: 'legend'
+//   }
+// }
+
+@customElement('theme-list-page')
+export class ThemeListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+
+        width: 100%;
+
+        --grid-record-emphasized-background-color: #8b0000;
+        --grid-record-emphasized-color: #ff6b6b;
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: Object }) gristConfig: any
+  @property({ type: String }) mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
+
+  @query('ox-grist') private grist!: DataGrist
+
+  get context() {
+    return {
+      title: i18next.t('title.theme list'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        value: this.grist?.searchText || ''
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
+      help: 'board-service/theme',
+      actions: [
+        {
+          title: i18next.t('button.save'),
+          action: this._updateTheme.bind(this),
+          ...CommonButtonStyles.save
+        },
+        {
+          title: i18next.t('button.delete'),
+          action: this._deleteTheme.bind(this),
+          ...CommonButtonStyles.delete
+        }
+      ]
+    }
+  }
+
+  render() {
+    const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
+
+    return html`
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom" class="header">
+          <div class="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
+
+            <div id="modes">
+              <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>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  async pageInitialized(lifecycle: any) {
+    this.gristConfig = {
+      list: {
+        fields: ['name', 'description'],
+        details: ['type', 'updatedAt']
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          record: {
+            editable: true
+          },
+          filter: 'search',
+          sortable: true,
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          record: {
+            editable: true
+          },
+          filter: 'search',
+          width: 200
+        },
+        {
+          type: 'checkbox',
+          name: 'active',
+          header: i18next.t('field.active'),
+          record: {
+            editable: true
+          },
+          width: 60
+        },
+        {
+          type: 'select',
+          name: 'type',
+          header: i18next.t('field.type'),
+          record: {
+            options: ['', 'color-map', 'color-ranges', 'color', 'text'],
+            editable: true
+          },
+          width: 120
+        },
+        {
+          type: 'object',
+          name: 'value',
+          header: i18next.t('field.value'),
+          record: {
+            editor: function (value, column, record, rowIndex, field) {
+              return getEditor(record.type || 'text')(value, column, record, rowIndex, field)
+            },
+            renderer: function (value, column, record, rowIndex, field) {
+              return getRenderer(record.type || 'text')(value, column, record, rowIndex, field)
+            },
+            editable: true,
+            options: {
+              objectified: true
+            }
+          },
+          sortable: true,
+          width: 180
+        },
+        {
+          type: 'resource-object',
+          name: 'updater',
+          header: i18next.t('field.updater'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 120
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          record: {
+            editable: false
+          },
+          sortable: true,
+          width: 180
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: true
+        }
+      },
+      sorters: [
+        {
+          name: 'name'
+        }
+      ]
+    }
+  }
+
+  async pageUpdated(changes: any, lifecycle: any) {
+    if (this.active) {
+      // do something here when this page just became as active
+    }
+  }
+
+  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: themes(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              description
+              active
+              type
+              value
+              updater {
+                id
+                name
+              }
+              updatedAt
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    return {
+      total: response.data.responses.total || 0,
+      records: response.data.responses.items || []
+    }
+  }
+
+  async _deleteTheme() {
+    if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
+      const ids = this.grist.selected.map(record => record.id)
+      if (ids && ids.length > 0) {
+        const [mutateFunction, { error }] = useMutation(`
+mutation ($ids: [String!]!) {
+  deleteThemes(ids: $ids)
+}`)
+
+        useMutation({
+          variables: {
+            ids
+          }
+        })
+
+        if (!error) {
+          this.grist.fetch()
+          notify({
+            message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
+          })
+        }
+      }
+    }
+  }
+
+  async _updateTheme() {
+    let patches = this.grist.dirtyRecords
+    if (patches && patches.length) {
+      patches = patches.map(patch => {
+        let patchField: any = patch.id ? { id: patch.id } : {}
+        const dirtyFields = patch.__dirtyfields__
+        for (let key in dirtyFields) {
+          patchField[key] = dirtyFields[key].after
+        }
+        patchField.cuFlag = patch.__dirty__
+
+        return patchField
+      })
+
+      const [mutateFunction, { error }] = useMutation(`
+mutation ($patches: [ThemePatch!]!) {
+  updateMultipleTheme(patches: $patches) {
+    name
+  }
+}`)
+
+      mutateFunction({
+        variables: {
+          patches
+        }
+      })
+
+      if (!error) {
+        this.grist.fetch()
+      }
+    }
+  }
+}

package/client/route.ts

@@ -0,0 +1,51 @@
+export default function route(page) {
+  switch (page) {
+    case 'board-viewer':
+      import('./pages/board-viewer-page')
+      return page
+
+    case 'board-viewer-by-name':
+      import('./pages/board-viewer-by-name-page')
+      return page
+
+    case 'board-player':
+      import('./pages/board-player-page')
+      return page
+
+    case 'board-player-by-name':
+      import('./pages/board-player-by-name-page')
+      return page
+
+    case 'board-modeller':
+      import('./pages/board-modeller-page')
+      return page
+
+    case 'board-list':
+      import('./pages/board-list-page')
+      return page
+
+    case 'play-list':
+      import('./pages/play-list-page')
+      return page
+
+    case 'attachment-list':
+      import('./pages/attachment-list-page')
+      return page
+
+    case 'font-list':
+      import('./pages/font-list-page')
+      return page
+
+    case 'printable-board-viewer':
+      import('./pages/printable-board-viewer-page')
+      return page
+
+    case 'theme-list':
+      import('./pages/theme/theme-list-page')
+      return page
+
+    case 'board-template-list':
+      import('./pages/board-template/board-template-list-page')
+      return page
+  }
+}

package/client/setting-let/board-view-setting-let.ts

@@ -0,0 +1,68 @@
+import '@material/web/checkbox/checkbox.js'
+import '@operato/i18n/ox-i18n.js'
+import '@things-factory/setting-base'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { clientSettingStore } from '@operato/shell/object-store.js'
+
+@customElement('board-view-setting-let')
+export class BoardViewSettingLet extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      label {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+
+        font: var(--label-font);
+        color: var(--md-sys-color-on-surface);
+        text-transform: var(--label-text-transform);
+      }
+    `
+  ]
+
+  @property({ type: Boolean }) autoRefresh?: boolean
+
+  render() {
+    return html`
+      <setting-let>
+        <ox-i18n slot="title" msgid="title.board view setting"></ox-i18n>
+
+        <div slot="content">
+          <label>
+            <md-checkbox id="auto-refresh" @change=${e => this.onChange(e)} ?checked=${this.autoRefresh}></md-checkbox>
+            ${String(i18next.t('label.auto refresh board view'))}
+          </label>
+        </div>
+      </setting-let>
+    `
+  }
+
+  async firstUpdated() {
+    const { autoRefresh = true } = (await clientSettingStore.get('board-view'))?.value || {}
+    this.autoRefresh = autoRefresh
+  }
+
+  async onChange(e) {
+    this.autoRefresh = e.target.checked
+
+    const { autoRefresh: valueFromStore } = (await clientSettingStore.get('board-view'))?.value || {}
+    if (this.autoRefresh === valueFromStore) {
+      return
+    }
+
+    try {
+      await clientSettingStore.put({
+        key: 'board-view',
+        value: {
+          autoRefresh: this.autoRefresh
+        }
+      })
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}

package/client/themes/board-theme.css

@@ -0,0 +1,77 @@
+body {
+  --board-renderer-border: 1px solid rgba(0, 0, 0, 0.1);
+  --board-renderer-max-width: 120px;
+  --board-renderer-name-background-color: var(--secondary-text-color);
+  --board-renderer-name-font: normal 13px var(--theme-font);
+  --board-renderer-icon-size: 24px;
+  --board-renderer-icon-border-radius: 10px;
+  --board-renderer-font: bold 16px/25px var(--md-icon-font, 'Material Symbols Outlined');
+  --board-renderer-icon-edit-background-color: #95d40f;
+  --board-renderer-icon-view-background-color: #27a1de;
+
+  /* list page style*/
+  --board-list-background-color: var(--md-sys-color-background);
+  --board-list-border-radius: var(--border-radius);
+  --board-list-box-border: var(--margin-default) solid #fff;
+  --board-list-box-shadow: var(--box-shadow);
+  --board-list-margin: var(--margin-default);
+  --board-list-tile-background-color: #fff;
+  --board-list-tile-name-font: bold 14px/18px var(--theme-font);
+  --board-list-tile-name-color: var(--md-sys-color-secondary);
+  --board-list-tile-description-font: 12px/14px var(--theme-font);
+  --board-list-tile-description-color: var(--secondary-text-color);
+  --board-list-tile-icon-color: rgba(0, 0, 0, 0.4);
+  --board-list-star-color: rgba(0, 0, 0, 0.4);
+  --board-list-star-active-color: var(--status-warning-color);
+
+  --card-list-rows-height: 180px;
+  --card-list-color: var(--md-sys-color-on-surface);
+  --card-list-background-color: var(--md-sys-color-surface-container-lowest);
+  --card-list-border-radius: var(--border-radius);
+  --card-list-flip-transform: rotateX(180deg);
+  --card-list-create-border: 1px dashed var(--md-sys-color-primary);
+  --card-list-create-border-radius: var(--border-radius);
+  --card-list-create-icon-color: var(--md-sys-color-primary);
+  --card-list-create-color: var(--md-sys-color-secondary);
+  --card-list-create-form-padding: 15px;
+  --card-list-create-label-font: normal 14px var(--theme-font);
+  --card-list-create-label-color: var(--md-sys-color-secondary);
+  --card-list-create-input-font: normal 14px var(--theme-font);
+  --card-list-create-input-color: var();
+  --card-list-create-input-border: 1px solid rgba(0, 0, 0, 0.2);
+  --card-list-create-input-border-radius: var(--border-radius);
+  --card-list-create-input-padding: 2px 9px;
+  --card-list-create-margin: 0 0 7px 0;
+
+  /* board modeler page style */
+  --edit-toolbar-background-color: var(--md-sys-color-secondary);
+  --edit-toolbar-bigger-icon-size: 45px;
+  --edit-toolbar-bigger-icon-line: 1px solid rgba(0, 0, 0, 0.1);
+  --component-toolbar-background-color: var(--md-sys-color-background);
+  --component-toolbar-icon-size: 45px;
+  --component-toolbar-border: 1px solid rgba(0, 0, 0, 0.1);
+  --component-menu-background-color: var(--md-sys-color-secondary-container);
+  --component-menu-border-color: var(--md-sys-color-secondary);
+  --component-menu-title: bold 11px/16px var(--theme-font);
+  --component-menu-item-color: var(--md-sys-color-secondary);
+  --component-menu-item-hover-color: var(--md-sys-color-secondary);
+  --component-menu-item-icon-size: 20px;
+  --property-sidebar-background-color: var(--md-sys-color-secondary-container);
+  --property-sidebar-tab-icon-color: var(--md-sys-color-secondary);
+  --property-sidebar-fieldset-border: 1px solid rgba(0, 0, 0, 0.2);
+  --property-sidebar-fieldset-label-color: var(--md-sys-color-secondary);
+  --property-sidebar-fieldset-label: normal 12px/16px var(--theme-font);
+  --property-sidebar-fieldset-legend-color: var(--md-sys-color-on-secondary-container);
+  --property-sidebar-fieldset-legend: bold 13px var(--theme-font);
+  --scene-inspector-color: var(--md-sys-color-secondary);
+  --scene-inspector-selected-background-color: rgba(115, 188, 28, 0.2);
+  --scene-inspector-selected-border: 1px solid rgba(115, 188, 28, 1);
+  --scene-inspector-name-background-color: var(--md-sys-color-primary);
+  --scene-inspector-eye-icon-color: var(--md-sys-color-on-secondary-container);
+}
+
+@media (min-width: 461px) and (max-width: 1024px) {
+  body {
+    --card-list-create-form-padding: 7px;
+  }
+}

package/client/things-scene-import.d.ts

@@ -0,0 +1,4 @@
+declare module '*.import' {
+  const components: any
+  export default components
+}