@things-factory/dashboard 8.0.0-beta.1 → 8.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/dashboard",
-  "version": "8.0.0-beta.1",
+  "version": "8.0.0-beta.2",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -26,10 +26,10 @@
     "clean": "npm run clean:server && npm run clean:client"
   },
   "dependencies": {
-    "@things-factory/auth-base": "^8.0.0-beta.1",
-    "@things-factory/board-service": "^8.0.0-beta.1",
-    "@things-factory/board-ui": "^8.0.0-beta.1",
-    "@things-factory/setting-base": "^8.0.0-beta.1"
+    "@things-factory/auth-base": "^8.0.0-beta.2",
+    "@things-factory/board-service": "^8.0.0-beta.2",
+    "@things-factory/board-ui": "^8.0.0-beta.2",
+    "@things-factory/setting-base": "^8.0.0-beta.2"
   },
-  "gitHead": "36c494e587640c1490318ef7b95adab02606e0c2"
+  "gitHead": "f03431a09435511b2595515658f9cb8f78ba4ebb"
 }

package/client/actions/board-settings.ts

@@ -1,31 +0,0 @@
-import gql from 'graphql-tag'
-
-import { client } from '@operato/graphql'
-
-export const UPDATE_BOARD_SETTINGS = 'UPDATE_BOARD_SETTINGS'
-export const CLEAR_BOARD_SETTINGS = 'CLEAR_BOARD_SETTINGS'
-
-export async function fetchBoardSettings(names) {
-  var response = await client.query({
-    query: gql`
-      query ($names: [String!]) {
-        boardSettings(names: $names) {
-          name
-          value
-          board {
-            id
-            name
-            description
-            thumbnail
-          }
-        }
-      }
-    `,
-    variables: {
-      names
-    }
-  })
-
-  if (!response || !response.data) return
-  return response.data.boardSettings
-}

package/client/actions/index.ts

@@ -1 +0,0 @@
-export * from './board-settings'

package/client/bootstrap.ts

@@ -1,37 +0,0 @@
-import { html } from 'lit'
-import { store } from '@operato/shell'
-import { auth, hasPrivilege } from '@things-factory/auth-base/dist-client'
-import { ADD_SETTING } from '@things-factory/setting-base/dist-client'
-
-import { UPDATE_BOARD_SETTINGS, fetchBoardSettings } from './actions/board-settings'
-import boardSetting from './reducers/board-settings'
-
-import './viewparts/dashboard-setting-let'
-
-import { FALLBACK_HOME_BOARD, DASHBOARD, DASHBOARD_MOBILE } from './const'
-
-export default function bootstrap() {
-  store.addReducers({ boardSetting })
-
-  auth.on('profile', async () => {
-    var settings = await fetchBoardSettings([FALLBACK_HOME_BOARD, DASHBOARD, DASHBOARD_MOBILE])
-
-    store.dispatch({
-      type: UPDATE_BOARD_SETTINGS,
-      settings: settings.reduce((settings, setting) => {
-        settings[setting.name] = setting
-        return settings
-      }, {})
-    })
-
-    if (await hasPrivilege({ privilege: 'mutation', category: 'setting' })) {
-      store.dispatch({
-        type: ADD_SETTING,
-        setting: {
-          seq: 20,
-          template: html` <dashboard-setting-let></dashboard-setting-let> `
-        }
-      })
-    }
-  })
-}

package/client/const.ts

@@ -1,5 +0,0 @@
-export const FALLBACK_HOME_BOARD = 'home' /* for backward compatibility */
-export const DASHBOARD = 'dashboard'
-export const DASHBOARD_MOBILE = 'dashboard-mobile'
-export const DASHBOARD_DESCRIPTION = 'dashboard'
-export const DASHBOARD_MOBILE_DESCRIPTION = 'dashboard mobile'

package/client/index.ts

@@ -1 +0,0 @@
-export * from './actions'

package/client/pages/dashboard.ts

@@ -1,112 +0,0 @@
-import '@operato/board/ox-board-selector.js'
-
-import gql from 'graphql-tag'
-import { html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { store } from '@operato/shell'
-import { client } from '@operato/graphql'
-import { i18next } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-import { isMobileDevice } from '@operato/utils'
-import { BoardViewerPage } from '@things-factory/board-ui/dist-client'
-
-import { fetchBoardSettings, UPDATE_BOARD_SETTINGS } from '../actions/board-settings'
-import { DASHBOARD, DASHBOARD_MOBILE, FALLBACK_HOME_BOARD } from '../const'
-
-const HOME_DESCRIPTION = 'home dashboard'
-
-const FALLBACK_ORDER = isMobileDevice()
-  ? [DASHBOARD_MOBILE, DASHBOARD, FALLBACK_HOME_BOARD]
-  : [DASHBOARD, FALLBACK_HOME_BOARD]
-const HOME_BOARD = isMobileDevice() ? DASHBOARD_MOBILE : DASHBOARD
-
-@customElement('dashboard-home')
-export class DashboardHome extends BoardViewerPage {
-  stateChanged(state) {
-    super.stateChanged(state)
-
-    const dashboard = state?.boardSetting
-    const homeBoard = dashboard && dashboard[FALLBACK_ORDER.find(name => dashboard[name]) || 'maybe notfound']
-    this._boardId = homeBoard?.value
-  }
-
-  get oopsNote() {
-    return {
-      icon: 'insert_chart',
-      title: 'HOME DASHBOARD',
-      description: 'There are no home dashboard setting. Pls, click to setting home dashboard.',
-      click: e => this.onClickDashboardSetting(HOME_BOARD, HOME_DESCRIPTION)
-    }
-  }
-
-  get context() {
-    return {
-      title: HOME_DESCRIPTION
-    } as any
-  }
-
-  onClickDashboardSetting(name, description) {
-    var popup = openPopup(
-      html`
-        <ox-board-selector
-          .creatable=${true}
-          .value=${this._boardId}
-          @board-selected=${async e => {
-            var board = e.detail.board
-
-            await this.saveSettings({
-              name,
-              value: board.id,
-              category: 'board',
-              description
-            })
-
-            var settings = await fetchBoardSettings([FALLBACK_HOME_BOARD, DASHBOARD, DASHBOARD_MOBILE])
-            store.dispatch({
-              type: UPDATE_BOARD_SETTINGS,
-              settings: settings.reduce((settings, setting) => {
-                settings[setting.name] = setting
-                return settings
-              }, {})
-            })
-
-            popup.close()
-            this.requestUpdate()
-          }}
-        ></ox-board-selector>
-      `,
-      {
-        backdrop: true,
-        size: 'large',
-        title: i18next.t('title.dashboard setting')
-      }
-    )
-  }
-
-  async saveSettings({ name, value, category, description }) {
-    if (!(name && value)) {
-      return
-    }
-
-    await client.query({
-      query: gql`
-        mutation UpdateSetting($patch: SettingPatch!, $name: String!) {
-          updateSetting(patch: $patch, name: $name) {
-            name
-            value
-          }
-        }
-      `,
-      variables: {
-        name,
-        patch: {
-          name,
-          description,
-          category,
-          value
-        }
-      }
-    })
-  }
-}

package/client/reducers/board-settings.ts

@@ -1,21 +0,0 @@
-import { UPDATE_BOARD_SETTINGS, CLEAR_BOARD_SETTINGS } from '../actions/board-settings'
-
-const INITIAL_STATE = {}
-
-const boardSetting = (state = INITIAL_STATE, action) => {
-  switch (action.type) {
-    case UPDATE_BOARD_SETTINGS:
-      return {
-        ...state,
-        ...action.settings
-      }
-
-    case CLEAR_BOARD_SETTINGS:
-      return {}
-
-    default:
-      return state
-  }
-}
-
-export default boardSetting

package/client/route.ts

@@ -1,10 +0,0 @@
-export default function route(page) {
-  switch (page) {
-    case '':
-      return '/dashboard'
-
-    case 'dashboard':
-      import('./pages/dashboard')
-      return page
-  }
-}

package/client/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../../tsconfig-base.json",
-  "compilerOptions": {
-    "strict": true,
-    "declaration": true,
-    "module": "esnext",
-    "outDir": "../dist-client",
-    "baseUrl": "./"
-  },
-  "include": ["./**/*"]
-}

package/client/viewparts/dashboard-setting-let.ts

@@ -1,237 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/board/ox-board-selector.js'
-import '@operato/i18n/ox-i18n.js'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers'
-
-import { openPopup } from '@operato/layout'
-import { i18next, localize } from '@operato/i18n'
-import { store } from '@operato/shell'
-import { client } from '@operato/graphql'
-
-import { fetchBoardSettings, UPDATE_BOARD_SETTINGS } from '../actions/board-settings'
-import {
-  DASHBOARD,
-  DASHBOARD_DESCRIPTION,
-  DASHBOARD_MOBILE,
-  DASHBOARD_MOBILE_DESCRIPTION,
-  FALLBACK_HOME_BOARD
-} from '../const'
-
-@customElement('dashboard-setting-let')
-export class DashboardSettingLet extends connect(store)(localize(i18next)(LitElement)) {
-  static styles = [
-    css`
-      div.field {
-        display: flex;
-        flex-direction: row;
-        align-items: flex-start;
-        max-width: 100%;
-        overflow: hidden;
-      }
-
-      div.field > * {
-        flex: none;
-      }
-
-      div.field > div {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-      }
-
-      div.field a {
-        overflow: hidden;
-        border: var(--border-dim-color);
-        border-radius: var(--border-radius);
-        background-color: rgba(0, 0, 0, 0.1);
-        min-width: 50px;
-        min-height: 50px;
-      }
-
-      div.field img {
-        max-height: 250px;
-        max-width: 100%;
-      }
-
-      .name {
-        color: var(--md-sys-color-on-secondary-container);
-      }
-
-      .description {
-        font-size: 0.7rem;
-        opacity: 0.7;
-        color: var(--md-sys-color-on-secondary-container);
-      }
-
-      label {
-        width: 80px;
-        padding-right: var(--spacing-medium);
-        font: bold 0.9em var(--theme-font);
-      }
-
-      setting-let > form {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-      }
-
-      md-icon {
-        --md-icon-size: 18px;
-        margin: 2px 2px 5px 2px;
-        padding: 0 var(--spacing-medium);
-        color: var(--md-sys-on-secondary-container, #fff);
-        background-color: var(--md-sys-secondary-container, #394e64);
-        border-radius: var(--border-radius, 5px);
-        border: var(--button-border, 1px solid transparent);
-      }
-
-      md-icon:hover,
-      md-icon:active {
-        background-color: var(--button-active-background-color, #22a6a7);
-      }
-
-      @media screen and (max-width: 460px) {
-        setting-let > form {
-          display: flex;
-          flex-direction: column;
-        }
-        div.field {
-          border-bottom: var(--border-dim-color);
-          padding: var(--spacing-medium);
-        }
-        md-icon {
-          padding: var(--spacing-small) var(--spacing-medium);
-        }
-      }
-    `
-  ]
-
-  @state() private dashboard: any
-  @state() private dashboardMobile: any
-
-  render() {
-    return html`
-      <setting-let>
-        <ox-i18n slot="title" msgid="title.dashboard setting"></ox-i18n>
-
-        <form slot="content">
-          ${[
-            {
-              title: i18next.t('label.dashboard for desktop'),
-              board: this.dashboard,
-              key: DASHBOARD,
-              description: DASHBOARD_DESCRIPTION
-            },
-            {
-              title: i18next.t('label.dashboard for mobile'),
-              board: this.dashboardMobile,
-              key: DASHBOARD_MOBILE,
-              description: DASHBOARD_MOBILE_DESCRIPTION
-            }
-          ].map(
-            field => html`
-              <div class="field">
-                <label>${field.title}</ox-i18n></label>
-                <div>
-                  <div class="name">${field.board.name}</div>
-                  <span class="description">${field.board.description}</span>
-                  <md-icon @click=${e => this.onClickBoardSelector(field.key, field.description)}>
-                    more_horiz
-                  </md-icon>
-                  ${
-                    field.board.id
-                      ? html`
-                          <a href=${`board-modeller/${field.board.id}`}>
-                            <img
-                              src=${field.board.thumbnail ||
-                              'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'}
-                            />
-                          </a>
-                        `
-                      : html``
-                  }
-                </div>
-              </div>
-            `
-          )}
-        </form>
-      </setting-let>
-    `
-  }
-
-  stateChanged(state: any) {
-    var dashboard = state.boardSetting[DASHBOARD] || state.boardSetting[FALLBACK_HOME_BOARD]
-    var dashboardMobile = state.boardSetting[DASHBOARD_MOBILE] || dashboard
-
-    this.dashboard = (dashboard ? dashboard.board : {}) || {}
-    this.dashboardMobile = (dashboardMobile ? dashboardMobile.board : {}) || {}
-  }
-
-  onClickBoardSelector(name: string, description: string) {
-    var popup = openPopup(
-      html`
-        <ox-board-selector
-          .creatable=${true}
-          .value=${name == DASHBOARD ? this.dashboard?.id : this.dashboardMobile?.id}
-          @board-selected=${async e => {
-            var board = e.detail.board
-
-            await this.saveSettings({
-              name,
-              value: board.id,
-              category: 'board',
-              description
-            })
-
-            var settings = await fetchBoardSettings([FALLBACK_HOME_BOARD, DASHBOARD, DASHBOARD_MOBILE])
-            store.dispatch({
-              type: UPDATE_BOARD_SETTINGS,
-              settings: settings.reduce((settings, setting) => {
-                settings[setting.name] = setting
-                return settings
-              }, {})
-            })
-
-            popup.close()
-            this.requestUpdate()
-          }}
-        ></ox-board-selector>
-      `,
-      {
-        backdrop: true,
-        size: 'large',
-        title: i18next.t('title.dashboard setting')
-      }
-    )
-  }
-
-  async saveSettings({ name, value, category, description }) {
-    if (!(name && value)) {
-      return
-    }
-
-    await client.query({
-      query: gql`
-        mutation UpdateSetting($patch: SettingPatch!, $name: String!) {
-          updateSetting(patch: $patch, name: $name) {
-            name
-            value
-          }
-        }
-      `,
-      variables: {
-        name,
-        patch: {
-          name,
-          description,
-          category,
-          value
-        }
-      }
-    })
-  }
-}

package/server/index.ts

@@ -1 +0,0 @@
-export * from './service'

package/server/service/board-settings/board-setting.ts

@@ -1,17 +0,0 @@
-import { ObjectType, Field, ID } from 'type-graphql'
-import { Board } from '@things-factory/board-service'
-
-@ObjectType()
-export class BoardSetting {
-  @Field(type => ID)
-  id: string
-
-  @Field()
-  name: string
-
-  @Field()
-  value: string
-
-  @Field(type => Board)
-  board: Board
-}

package/server/service/board-settings/board-settings-query.ts

@@ -1,54 +0,0 @@
-import { Arg, Ctx, Query, Resolver } from 'type-graphql'
-
-import { Board } from '@things-factory/board-service'
-import { Setting } from '@things-factory/setting-base'
-import { getRepository } from '@things-factory/shell'
-
-import { BoardSetting } from './board-setting'
-
-@Resolver(BoardSetting)
-export class BoardSettingsQuery {
-  @Query(returns => [BoardSetting], { description: 'To fetch a BoardSettings' })
-  async boardSettings(@Arg('names', type => [String], { nullable: true }) names: string[], @Ctx() context: any): Promise<BoardSetting[]> {
-    const { domain } = context.state
-    const queryBuilder = getRepository(Setting).createQueryBuilder()
-
-    var qb = queryBuilder
-      .innerJoin(Board, 'Board', 'Setting.value = CAST(Board.id AS char(36))')
-      .select([
-        'Setting.id as id',
-        'Setting.name as name',
-        'Setting.value as value',
-        'Board.id as boardId',
-        'Board.name as boardName',
-        'Board.description as boardDescription',
-        'Board.thumbnail as boardThumbnail'
-      ])
-      .where('Setting.domain.id = :domain and Setting.category = :category', {
-        domain: domain.id,
-        category: 'board'
-      })
-
-    if (names && names.length) qb.andWhere('Setting.name IN (:...names)', { names })
-
-    var boardSettingList = await qb.getRawMany()
-
-    return boardSettingList.map(boardSetting => {
-      var setting: any = {
-        board: {}
-      }
-
-      for (let key in boardSetting) {
-        if (key.includes('board')) {
-          let originKey = key
-          key = key.replace('board', '').toLowerCase()
-          setting.board[key] = boardSetting[originKey]
-        } else {
-          setting[key] = boardSetting[key]
-        }
-      }
-
-      return setting
-    })
-  }
-}

package/server/service/board-settings/index.ts

@@ -1,4 +0,0 @@
-import { BoardSettingsQuery } from './board-settings-query'
-
-export const entities = []
-export const resolvers = [BoardSettingsQuery]

package/server/service/index.ts

@@ -1,17 +0,0 @@
-/* EXPORT ENTITY TYPES */
-export * from './board-settings/board-setting'
-
-/* IMPORT ENTITIES AND RESOLVERS */
-import { entities as BoardSettingsEntities, resolvers as BoardSettingsResolvers } from './board-settings'
-
-export const entities = [
-  /* ENTITIES */
-  ...BoardSettingsEntities
-]
-
-export const schema = {
-  resolverClasses: [
-    /* RESOLVER CLASSES */
-    ...BoardSettingsResolvers
-  ]
-}

package/server/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig-base.json",
-  "compilerOptions": {
-    "strict": false,
-    "module": "commonjs",
-    "outDir": "../dist-server",
-    "baseUrl": "./"
-  },
-  "include": ["./**/*"]
-}