@things-factory/lite-menu 4.0.40 → 4.0.44

package/client/actions/lite-menu.js

@@ -1,11 +1,14 @@
-import { html } from 'lit-element'
+import '../viewparts/lite-menu-part'
+import '@material/mwc-icon'
+
 import gql from 'graphql-tag'
-import { client, store } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
-import { appendViewpart, toggleOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@things-factory/layout-base'
-import { APPEND_APP_TOOL, REMOVE_APP_TOOL } from '@things-factory/apptool-base'
+import { html } from 'lit'
 
-import '../viewparts/lite-menu-portrait'
+import { client } from '@operato/graphql'
+import { appendViewpart, toggleOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'
+import { store } from '@operato/shell'
+import { isMobileDevice } from '@operato/utils'
+import { APPEND_APP_TOOL, REMOVE_APP_TOOL } from '@things-factory/apptool-base'
 
 export const UPDATE_ADDON_MENUS = 'UPDATE_ADDON_MENUS'
 export const UPDATE_MENU_TEMPLATE = 'UPDATE_MENU_TEMPLATE'
@@ -13,16 +16,17 @@ export const UPDATE_MENU_TEMPLATE = 'UPDATE_MENU_TEMPLATE'
 var HAMBURGER
 
 export function setupMenuPart(options) {
-  const { 
-    hovering = isMobileDevice() ? true : false, 
-    slotTemplate, 
+  const {
+    hovering = isMobileDevice() ? true : false,
+    slotTemplate,
     portraitSlotTemplate,
     landscapeSlotTemplate,
-    position = VIEWPART_POSITION.NAVBAR 
+    position = VIEWPART_POSITION.NAVBAR
   } = options || {}
 
   const orientation = position == VIEWPART_POSITION.HEADERBAR ? 'landscape' : 'portrait'
-  const orientatedSlotTemplate = (orientation == 'landscape' ? landscapeSlotTemplate : portraitSlotTemplate ) || slotTemplate || html``
+  const orientatedSlotTemplate =
+    (orientation == 'landscape' ? landscapeSlotTemplate : portraitSlotTemplate) || slotTemplate || html``
 
   appendViewpart({
     name: 'lite-menu-part',

package/client/bootstrap.js

@@ -1,13 +1,16 @@
-import { html } from 'lit-element'
-import { store, client, navigate } from '@things-factory/shell'
+import './route'
+import '@operato/i18n/ox-i18n.js'
+import '@material/mwc-icon'
+
+import { html } from 'lit'
+
+import { navigate, store } from '@operato/shell'
 import { auth } from '@things-factory/auth-base'
 import { ADD_MORENDA } from '@things-factory/more-base'
 
 import { fetchAddonMenus } from './actions/lite-menu'
 import liteMenu from './reducers/lite-menu'
 
-import './route'
-
 export default function bootstrap() {
   store.addReducers({ liteMenu })
 
@@ -20,7 +23,7 @@ export default function bootstrap() {
     type: ADD_MORENDA,
     morenda: {
       icon: html` <mwc-icon>view_list</mwc-icon> `,
-      name: html` <i18n-msg msgid="text.addon-menu management"></i18n-msg> `,
+      name: html` <ox-i18n msgid="text.addon-menu management"></ox-i18n> `,
       action: () => {
         navigate('addon-menu-setting')
       }

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

@@ -1,33 +1,49 @@
-import { html, css } from 'lit-element'
-import { connect } from 'pwa-helpers/connect-mixin.js'
+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 '@material/mwc-icon'
 
 import gql from 'graphql-tag'
-import { store, PageView, client } from '@things-factory/shell'
-import { isMobileDevice, gqlBuilder } from '@things-factory/utils'
-import { CommonButtonStyles } from '@things-factory/styles'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { getRenderer, getEditor } from '@things-factory/grist-ui'
+import { css, html } from 'lit'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { getEditor, getRenderer } from '@operato/data-grist'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { PageView, store } from '@operato/shell'
+import { CommonButtonStyles, CommonGristStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 
 class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
   static get properties() {
     return {
       config: Object,
-      menus: Array
+      menus: Array,
+      mode: String
     }
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: flex;
-        overflow-x: hidden;
-        flex-direction: column;
-      }
+    return [
+      CommonGristStyles,
+      css`
+        :host {
+          display: flex;
+          overflow-x: hidden;
+          flex-direction: column;
+
+          width: 100%;
+        }
+      `
+    ]
+  }
 
-      data-grist {
-        flex: 1;
-      }
-    `
+  constructor() {
+    super()
+
+    this.mode = isMobileDevice() ? 'CARD' : 'GRID'
   }
 
   get context() {
@@ -68,11 +84,34 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
 
   render() {
     return html`
-      <data-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.config}
-        .fetchHandler=${this.fetchHandler}
-      ></data-grist>
+      <ox-grist .mode=${this.mode} .config=${this.config} .fetchHandler=${this.fetchHandler}>
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.renderRoot.querySelector('#sorter-control').open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >sort</mwc-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
+
+          <div id="modes">
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${this.mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${this.mode == 'CARD'}>apps</mwc-icon>
+          </div>
+        </div>
+      </ox-grist>
     `
   }
 
@@ -81,7 +120,7 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
   }
 
   get grist() {
-    return this.shadowRoot.querySelector('data-grist')
+    return this.shadowRoot.querySelector('ox-grist')
   }
 
   async onCommit() {
@@ -113,7 +152,7 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
 
         return await client.mutate({
           mutation: gql`
-            mutation($name: String!, $patch: LiteMenuPatch!) {
+            mutation ($name: String!, $patch: LiteMenuPatch!) {
               updateLiteMenu(name: $name, patch: $patch) {
                 id
                 name
@@ -143,7 +182,7 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
 
         return await client.mutate({
           mutation: gql`
-            mutation($liteMenu: NewLiteMenu!) {
+            mutation ($liteMenu: NewLiteMenu!) {
               createLiteMenu(liteMenu: $liteMenu) {
                 id
                 name
@@ -175,7 +214,7 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
 
         return await client.mutate({
           mutation: gql`
-            mutation($name: String!) {
+            mutation ($name: String!) {
               deleteLiteMenu(name: $name)
             }
           `,
@@ -191,6 +230,11 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
 
   async pageInitialized() {
     this.config = {
+      list: {
+        thumbnail: 'value',
+        fields: ['name', 'description'],
+        details: ['type', 'parent', 'rank', 'updatedAt']
+      },
       columns: [
         {
           type: 'gutter',
@@ -217,6 +261,7 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
           record: {
             editable: true
           },
+          filter: 'search',
           sortable: true,
           width: 120
         },
@@ -228,11 +273,13 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
             align: 'left',
             editable: true
           },
+          filter: 'search',
           width: 200
         },
         {
           type: 'select',
           name: 'parent',
+          label: true,
           header: i18next.t('field.parent-menu'),
           record: {
             editable: true,
@@ -247,6 +294,7 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
         {
           type: 'number',
           name: 'rank',
+          label: true,
           header: i18next.t('field.rank'),
           record: {
             align: 'right',
@@ -258,11 +306,17 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
         {
           type: 'select',
           name: 'type',
+          label: true,
           header: i18next.t('field.type'),
           record: {
             editable: true,
             options: ['', 'group', 'page', 'board']
           },
+          filter: {
+            options: ['', 'group', 'page', 'board'],
+            multiple: false,
+            operator: 'eq'
+          },
           width: 80
         },
         {
@@ -295,10 +349,12 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
         {
           type: 'boolean',
           name: 'active',
+          label: true,
           header: i18next.t('field.active'),
           record: {
             editable: true
           },
+          filter: true,
           sortable: true,
           width: 60
         },
@@ -354,52 +410,50 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  async fetchHandler({ page, limit, sorters = [] }) {
+  async fetchHandler({ filters = [], page, limit, sortings = [] }) {
     const response = (
       await client.query({
         query: gql`
-        {
-          liteMenus(${gqlBuilder.buildArgs({
-            filters: [],
-            pagination: {
-              page,
-              limit
-            },
-            sortings: sorters
-          })}) {
-            items {
-              id
-              name
-              description
-              parent
-              rank
-              type
-              value
-              board {
+          query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+            responses: liteMenus(filters: $filters, pagination: $pagination, sortings: $sortings) {
+              items {
                 id
                 name
                 description
-                thumbnail
-              }
-              icon
-              active
-              createdAt
-              updatedAt
-              creator {
-                id
-                name
-              }
-              updater {
-                id
-                name
+                parent
+                rank
+                type
+                value
+                board {
+                  id
+                  name
+                  description
+                  thumbnail
+                }
+                icon
+                active
+                createdAt
+                updatedAt
+                creator {
+                  id
+                  name
+                }
+                updater {
+                  id
+                  name
+                }
               }
+              total
             }
-            total
           }
+        `,
+        variables: {
+          filters,
+          pagination: { page, limit },
+          sortings
         }
-      `
       })
-    ).data.liteMenus
+    ).data.responses
 
     store.dispatch({
       type: 'UPDATE_ADDON_MENUS',
@@ -411,6 +465,10 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
       total: response.total
     }
   }
+
+  liteMenuCreationCallback(liteMenu) {
+    console.warn('not implemented yet.')
+  }
 }
 
 window.customElements.define('addon-menu-setting', AddonMenuSetting)

package/client/viewparts/lite-menu-landscape-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element'
+import { css } from 'lit'
 
 export const LiteMenuLandscapeStyles = css`
   :host {

package/client/viewparts/lite-menu-landscape.js

@@ -1,10 +1,10 @@
 import '@material/mwc-icon'
 
-import { html, LitElement } from 'lit-element'
+import { html, LitElement } from 'lit'
 import { connect } from 'pwa-helpers'
 
-import { navigate, store } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { navigate, store } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
 
 import { LiteMenuLandscapeStyles } from './lite-menu-landscape-styles'
 

package/client/viewparts/lite-menu-part.js

@@ -2,11 +2,11 @@ import '@material/mwc-icon'
 import './lite-menu-portrait'
 import './lite-menu-landscape'
 
-import { LitElement, css, html } from 'lit-element'
-
-import { ScrollbarStyles } from '@things-factory/styles'
+import { css, html, LitElement } from 'lit'
 import { connect } from 'pwa-helpers'
-import { store } from '@things-factory/shell'
+
+import { store } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
 
 export class LiteMenuPart extends connect(store)(LitElement) {
   static get properties() {

package/client/viewparts/lite-menu-portrait-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element'
+import { css } from 'lit'
 
 export const LiteMenuPortraitStyles = css`
   :host {

package/client/viewparts/lite-menu-portrait.js

@@ -1,7 +1,10 @@
 import '@material/mwc-icon'
-import { navigate } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
-import { css, html, LitElement } from 'lit-element'
+
+import { html, LitElement } from 'lit'
+
+import { navigate } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
+
 import { LiteMenuPortraitStyles } from './lite-menu-portrait-styles'
 
 export class LiteMenuPortrait extends LitElement {

package/client/viewparts/top-menu-bar.js

@@ -1,10 +1,10 @@
 import '@material/mwc-icon'
 
-import { css, html, LitElement } from 'lit-element'
+import { css, html, LitElement } from 'lit'
 import { connect } from 'pwa-helpers'
 
-import { toggleOverlay } from '@things-factory/layout-base'
-import { store } from '@things-factory/shell'
+import { toggleOverlay } from '@operato/layout'
+import { store } from '@operato/shell'
 
 export class TopMenuBar extends connect(store)(LitElement) {
   static get styles() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/lite-menu",
-  "version": "4.0.40",
+  "version": "4.0.44",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -24,16 +24,23 @@
     "migration:create": "node ../../node_modules/typeorm/cli.js migration:create -d ./server/migrations"
   },
   "dependencies": {
-    "@things-factory/apptool-base": "^4.0.40",
-    "@things-factory/auth-base": "^4.0.40",
-    "@things-factory/board-service": "^4.0.40",
-    "@things-factory/board-ui": "^4.0.40",
-    "@things-factory/grist-ui": "^4.0.40",
-    "@things-factory/i18n-base": "^4.0.40",
-    "@things-factory/layout-base": "^4.0.40",
-    "@things-factory/more-base": "^4.0.40",
-    "@things-factory/setting-base": "^4.0.40",
-    "@things-factory/utils": "^4.0.40"
+    "@operato/data-grist": "^0.3.27",
+    "@operato/graphql": "^0.3.27",
+    "@operato/i18n": "^0.3.27",
+    "@operato/input": "^0.3.27",
+    "@operato/layout": "^0.3.27",
+    "@operato/popup": "^0.3.27",
+    "@operato/shell": "^0.3.27",
+    "@operato/styles": "^0.3.27",
+    "@operato/utils": "^0.3.27",
+    "@things-factory/apptool-base": "^4.0.44",
+    "@things-factory/auth-base": "^4.0.44",
+    "@things-factory/board-service": "^4.0.44",
+    "@things-factory/board-ui": "^4.0.44",
+    "@things-factory/grist-ui": "^4.0.44",
+    "@things-factory/more-base": "^4.0.44",
+    "@things-factory/setting-base": "^4.0.44",
+    "@things-factory/utils": "^4.0.44"
   },
-  "gitHead": "f0697b5ab411e4aa1a52de19a6c135f39686eca1"
+  "gitHead": "286a037443bfb38c65db964dbfa6c5f2d141d9ac"
 }