@things-factory/board-ui 8.0.38 → 9.0.0-9.0.0-beta.59.0

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

@@ -1,313 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

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