@things-factory/lite-menu 8.0.0-beta.9 → 8.0.2

package/client/pages/addon-menu-setting.ts

@@ -0,0 +1,558 @@
+import '@operato/data-grist/ox-grist.js'
+import '@operato/data-grist/ox-filters-form.js'
+import '@operato/data-grist/ox-sorters-control.js'
+import '@operato/data-grist/ox-record-creator.js'
+import '@operato/popup/ox-popup.js'
+import '@operato/context/ox-context-page-toolbar.js'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { DataGrist, FetchOption, getEditor, getRenderer } from '@operato/data-grist'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { PageView, store } from '@operato/shell'
+import { CommonGristStyles, ScrollbarStyles, CommonHeaderStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+
+import { getLanguages } from '@things-factory/auth-base/dist-client'
+import { p13n } from '@operato/p13n'
+
+import { fetchAddonMenus } from '../actions/lite-menu'
+
+const applicationName = (document.querySelector('meta[name="application-name"]') as HTMLMetaElement)?.content
+
+@customElement('addon-menu-setting')
+class AddonMenuSetting extends connect(store)(p13n(localize(i18next)(PageView))) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        overflow-x: hidden;
+        flex-direction: column;
+
+        width: 100%;
+      }
+
+      .header {
+        grid-template-areas: 'filters actions';
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+    `
+  ]
+
+  @state() config: any
+  @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
+
+  @state() menus: any[] = []
+
+  @query('ox-grist') private grist!: DataGrist
+
+  get context() {
+    return {
+      title: i18next.t('text.addon-menu management'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        value: this.grist?.searchText || ''
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
+      actions: [
+        {
+          title: i18next.t('button.refresh'),
+          action: () => {
+            this.onReload()
+          },
+          icon: 'refresh'
+        },
+        {
+          title: i18next.t('button.delete'),
+          action: () => {
+            this.onDelete()
+          },
+          icon: 'delete',
+          emphasis: {
+            danger: true
+          }
+        },
+        {
+          title: i18next.t('button.save'),
+          action: () => {
+            this.onCommit()
+          },
+          icon: 'save'
+        }
+      ],
+      exportable: {
+        accept: ['json'],
+        name: 'lite-menu-list',
+        data: () => {
+          return this.grist.data
+        }
+      },
+      toolbar: false
+    }
+  }
+
+  render() {
+    return html`
+      <ox-grist
+        .mode=${this.mode}
+        .config=${this.config}
+        .fetchHandler=${this.fetchHandler}
+        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}
+      >
+        <div slot="headroom" class="header">
+          <div class="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
+          </div>
+          <ox-context-page-toolbar class="actions" .context=${this.context}> </ox-context-page-toolbar>
+        </div>
+
+        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
+      </ox-grist>
+    `
+  }
+
+  stateChanged(state) {
+    this.menus = state.liteMenu?.menus
+  }
+
+  async onCommit() {
+    var grist = this.grist
+
+    var modifiedList = grist.dirtyRecords.filter(record => record['__dirty__'] == 'M')
+    var addedList = grist.dirtyRecords.filter(record => record['__dirty__'] == '+')
+
+    await Promise.all(
+      modifiedList.map(async record => {
+        var id = record.__origin__.id
+        var patch = {
+          name: record.name,
+          description: record.description,
+          appName: record.appName,
+          parent: record.parent,
+          rank: record.rank,
+          active: record.active,
+          role: record.role,
+          labels: record.labels,
+          type: record.type,
+          value: record.value,
+          icon: record.icon,
+          help: record.help
+        }
+
+        if (record.type == 'group') {
+          patch = {
+            ...patch,
+            parent: ''
+          }
+        }
+
+        return await client.mutate({
+          mutation: gql`
+            mutation ($id: String!, $patch: LiteMenuPatch!) {
+              updateLiteMenu(id: $id, patch: $patch) {
+                id
+                name
+              }
+            }
+          `,
+          variables: {
+            id,
+            patch: patch
+          }
+        })
+      })
+    )
+
+    await Promise.all(
+      addedList.map(async record => {
+        var liteMenu = {
+          name: record.name,
+          description: record.description,
+          appName: record.appName,
+          parent: record.parent,
+          rank: record.rank,
+          active: record.active,
+          role: record.role,
+          type: record.type,
+          value: record.value,
+          icon: record.icon,
+          help: record.help
+        }
+
+        return await client.mutate({
+          mutation: gql`
+            mutation ($liteMenu: NewLiteMenu!) {
+              createLiteMenu(liteMenu: $liteMenu) {
+                id
+                name
+              }
+            }
+          `,
+          variables: {
+            liteMenu
+          }
+        })
+      })
+    )
+
+    grist.fetch()
+    fetchAddonMenus() /* update menu-system */
+  }
+
+  onReload() {
+    this.grist.fetch()
+  }
+
+  async onDelete() {
+    var grist = this.grist
+
+    var deletedList = grist.selected
+
+    await Promise.all(
+      deletedList.map(async record => {
+        var id = record.id
+
+        return await client.mutate({
+          mutation: gql`
+            mutation ($id: String!) {
+              deleteLiteMenu(id: $id)
+            }
+          `,
+          variables: {
+            id
+          }
+        })
+      })
+    )
+
+    grist.fetch()
+    fetchAddonMenus() /* update menu-system */
+  }
+
+  async pageInitialized(lifecycle) {
+    this.config = {
+      list: {
+        thumbnail: 'value',
+        fields: ['name', 'description'],
+        details: ['type', 'parent', 'rank', 'updatedAt']
+      },
+      columns: [
+        {
+          type: 'gutter',
+          gutterName: 'dirty',
+          fixed: true
+        },
+        {
+          type: 'gutter',
+          gutterName: 'sequence',
+          fixed: true
+        },
+        {
+          type: 'gutter',
+          gutterName: 'row-selector',
+          multiple: true,
+          fixed: true
+        },
+        {
+          type: 'string',
+          name: 'id',
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          fixed: true,
+          record: {
+            editable: true
+          },
+          filter: 'search',
+          sortable: true,
+          width: 120
+        },
+        {
+          type: 'i18n-label',
+          name: 'labels',
+          record: {
+            align: 'left',
+            editable: true,
+            renderer: (value, column, record, rowIndex, field) =>
+              html`<span>${value && typeof value == 'object' ? value[i18next.language] : record['name']}</span>`,
+            options: {
+              objectified: true,
+              languages: await getLanguages(),
+              displayColumn: 'label'
+            }
+          },
+          header: i18next.t('field.i18n-label'),
+          sortable: true,
+          filter: 'search',
+          width: 120
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          record: {
+            align: 'left',
+            editable: true
+          },
+          filter: 'search',
+          width: 200
+        },
+        {
+          type: 'select',
+          name: 'appName',
+          header: i18next.t('field.app-name'),
+          label: true,
+          record: {
+            align: 'left',
+            editable: true,
+            options: ['', applicationName]
+          },
+          filter: {
+            options: ['', applicationName],
+            multiple: false,
+            operator: 'eq'
+          },
+          width: 200
+        },
+        {
+          type: 'select',
+          name: 'parent',
+          label: true,
+          header: i18next.t('field.parent-menu'),
+          record: {
+            editable: true,
+            options: () => {
+              const menus = this.menus.filter(menu => menu.type !== 'group')
+              return ['', ...menus.map(menu => menu.name)]
+            }
+          },
+          sortable: true,
+          width: 120
+        },
+        {
+          type: 'number',
+          name: 'rank',
+          label: true,
+          header: i18next.t('field.rank'),
+          record: {
+            align: 'right',
+            editable: true
+          },
+          sortable: true,
+          width: 60
+        },
+        {
+          type: 'select',
+          name: 'type',
+          label: true,
+          header: i18next.t('field.type'),
+          record: {
+            editable: true,
+            options: ['', 'group', 'page', 'board', 'interactive-board']
+          },
+          filter: {
+            options: ['', 'group', 'page', 'board', 'interactive-board'],
+            multiple: false,
+            operator: 'eq'
+          },
+          width: 80
+        },
+        {
+          type: 'string',
+          name: 'value',
+          header: i18next.t('field.value'),
+          record: {
+            editable: true,
+            editor: function (value, column, record, rowIndex, field) {
+              var type = record.type !== 'board' && record.type !== 'interactive-board' ? 'string' : 'board'
+              return getEditor(type)(value, column, record, rowIndex, field)
+            },
+            renderer: function (value, column, record, rowIndex, field) {
+              var type = record.type !== 'board' && record.type !== 'interactive-board' ? 'string' : 'board'
+              return getRenderer(type)(value, column, record, rowIndex, field)
+            }
+          },
+          width: 140
+        },
+        {
+          type: 'string',
+          name: 'icon',
+          header: i18next.t('field.icon'),
+          record: {
+            editable: true
+          },
+          sortable: false,
+          width: 120
+        },
+        {
+          type: 'boolean',
+          name: 'active',
+          label: true,
+          header: i18next.t('field.active'),
+          record: {
+            editable: true
+          },
+          filter: true,
+          sortable: true,
+          width: 60
+        },
+        {
+          type: 'string',
+          name: 'help',
+          label: true,
+          header: i18next.t('field.help'),
+          record: {
+            editable: true
+          },
+          width: 200
+        },
+        {
+          type: 'resource-object',
+          name: 'role',
+          label: true,
+          header: i18next.t('field.required role'),
+          record: {
+            editable: true,
+            options: {
+              title: i18next.t('title.lookup role'),
+              queryName: 'roles'
+            }
+          },
+          width: 200
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          width: 180
+        },
+        {
+          type: 'datetime',
+          name: 'createdAt',
+          header: i18next.t('field.created_at'),
+          width: 180
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: true
+        },
+        handlers: {
+          click: 'select-row-toggle'
+        }
+      },
+      sorters: [
+        {
+          name: 'parent',
+          desc: false
+        },
+        {
+          name: 'rank',
+          desc: false
+        }
+      ],
+      pagination: {
+        pages: [20, 30, 50, 100, 200]
+      }
+    }
+  }
+
+  async pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      await this.updateComplete
+
+      this.grist.fetch()
+    }
+  }
+
+  async fetchHandler({ filters = [], page, limit, sortings = [] }: FetchOption) {
+    const response = (
+      await client.query({
+        query: gql`
+          query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+            responses: liteMenus(filters: $filters, pagination: $pagination, sortings: $sortings) {
+              items {
+                id
+                name
+                label
+                description
+                help
+                appName
+                parent
+                rank
+                type
+                value
+                board {
+                  id
+                  name
+                  description
+                  thumbnail
+                }
+                icon
+                active
+                role {
+                  id
+                  name
+                  description
+                }
+                labels
+                createdAt
+                updatedAt
+                creator {
+                  id
+                  name
+                }
+                updater {
+                  id
+                  name
+                }
+              }
+              total
+            }
+          }
+        `,
+        variables: {
+          filters: [
+            ...filters,
+            {
+              name: 'appName',
+              operator: 'in',
+              value: ['', applicationName]
+            }
+          ],
+          pagination: { page, limit },
+          sortings
+        }
+      })
+    ).data.responses
+
+    return {
+      records: response.items,
+      total: response.total
+    }
+  }
+
+  liteMenuCreationCallback(liteMenu) {
+    console.warn('not implemented yet.')
+  }
+}

package/client/reducers/lite-menu.ts

@@ -0,0 +1,83 @@
+import cloneDeep from 'lodash-es/cloneDeep'
+
+const INITIAL_STATE = {
+  template: [],
+  addon: [],
+  menus: []
+}
+
+function buildMenus(template, addon) {
+  var menus = cloneDeep(template || [])
+  addon = addon || []
+
+  /* make group by parent */
+  const groups =
+    addon
+      .filter(menu => menu.active)
+      .sort((menu1, menu2) => (menu1.parent || '').localeCompare(menu2.parent || '') || menu1.rank - menu2.rank)
+      .reduce((arr, menu) => {
+        let lastparent = arr.length > 0 && arr[arr.length - 1][0].parent
+
+        if (!lastparent || lastparent !== menu.parent) {
+          arr.push([menu])
+        } else {
+          arr[arr.length - 1].push(menu)
+        }
+
+        return arr
+      }, []) || []
+
+  /* iterate group to put menu into parent menu */
+  groups.forEach(group => {
+    group.forEach(menu => {
+      const { parent, name, rank, label, type, value, icon, help } = menu
+
+      const parentMenu = parent && menus.find(m => m.name === parent)
+      if (parentMenu && !parentMenu.menus) {
+        parentMenu.menus = []
+      }
+      const children = parentMenu ? parentMenu.menus : menus
+      children.push({
+        name,
+        label,
+        rank,
+        type,
+        path:
+          type === 'page'
+            ? value
+            : type === 'board'
+              ? `board-viewer/${value ?? ''}?title=${label || name}${help ? '&help=' + help : ''}`
+              : type === 'interactive-board'
+                ? `board-viewer/${value ?? ''}?interactive=true&title=${label || name}${help ? '&help=' + help : ''}`
+                : '',
+        icon: icon || (type === 'page' ? 'menu' : type === 'board' || type === 'interactive-board' ? 'dashboard' : ''),
+        help
+      })
+    })
+  })
+
+  return menus
+}
+
+const liteMenu = (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case 'UPDATE_MENU_TEMPLATE':
+      return {
+        ...state,
+        template: action.template,
+        menus: buildMenus(action.template, state.addon)
+      }
+
+    case 'UPDATE_ADDON_MENUS':
+      return {
+        ...state,
+        addon: action.addon,
+        menus: buildMenus(state.template, action.addon)
+      }
+
+    default:
+      return state
+  }
+}
+
+export default liteMenu

package/client/route.ts

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

package/client/tsconfig.json

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