@things-factory/lite-menu 8.0.5 → 9.0.0-beta.10

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

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

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

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

package/client/tsconfig.json

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

package/server/index.ts

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

package/server/service/index.ts

@@ -1,18 +0,0 @@
-/* EXPORT ENTITY TYPES */
-export * from './lite-menu/lite-menu'
-
-/* IMPORT ENTITIES AND RESOLVERS */
-import { entities as LiteMenuEntities, resolvers as LiteMenuResolvers } from './lite-menu'
-
-export const entities = [  
-  /* ENTITIES */
-	...LiteMenuEntities,
-] 
-
-
-export const schema = {
-  resolverClasses: [
-    /* RESOLVER CLASSES */
-		...LiteMenuResolvers,
-  ] 
-}

package/server/service/lite-menu/index.ts

@@ -1,6 +0,0 @@
-import { LiteMenu } from './lite-menu'
-import { LiteMenuQuery } from './lite-menu-query'
-import { LiteMenuMutation } from './lite-menu-mutation'
-
-export const entities = [LiteMenu]
-export const resolvers = [LiteMenuQuery, LiteMenuMutation]