@things-factory/menu-ui 8.0.0-alpha.27 → 8.0.0-alpha.29

package/client/apptools/{favorite-tool.js → favorite-tool.ts}

@@ -1,45 +1,41 @@
 import '@material/web/icon/icon.js'
 
 import { LitElement, html, css } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import gql from 'graphql-tag'
 
-import { store, client } from '@things-factory/shell'
-import { UPDATE_FAVORITES } from '@things-factory/fav-base'
+import { store, client } from '@things-factory/shell/client'
+import { UPDATE_FAVORITES } from '@things-factory/fav-base/client'
 
+@customElement('favorite-tool')
 export class FavoriteTool extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      favorites: Array,
-      user: Object,
-      page: String,
-      resourceId: String,
-      favored: Boolean,
-      routingTypes: Object,
-      blackList: Array
+  static styles = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      line-height: 0;
     }
-  }
 
-  static get styles() {
-    return css`
-      :host {
-        display: inline-block;
-        vertical-align: middle;
-        line-height: 0;
-      }
-
-      [favorable] {
-        opacity: 0.5;
-      }
-    `
-  }
+    [favorable] {
+      opacity: 0.5;
+    }
+  `
+
+  @property({ type: Array }) favorites: any
+  @property({ type: Object }) user: any
+  @property({ type: String }) page?: string
+  @property({ type: String }) resourceId?: string
+  @property({ type: Boolean }) favored: boolean = false
+  @property({ type: Array }) routingTypes: any[] = []
+  @property({ type: Array }) blackList: string[] = []
 
   render() {
-    var renderable = (this.blackList || []).indexOf(this.page) == -1
+    var renderable = (this.blackList || []).indexOf(this.page!) == -1
 
     return renderable
       ? html`
-          <md-icon @click=${this.onclick.bind(this)} ?favorable=${!this.favored}
+          <md-icon @click=${this.onClick.bind(this)} ?favorable=${!this.favored}
             >${this.favored ? 'star' : 'star_border'}</md-icon
           >
         `
@@ -62,7 +58,7 @@ export class FavoriteTool extends connect(store)(LitElement) {
     this.routingTypes = state.menu.routingTypes
   }
 
-  onclick(event) {
+  onClick(event) {
     if (this.favored) {
       this.removeFavorite(this.getFullRouting())
     } else {
@@ -126,5 +122,3 @@ export class FavoriteTool extends connect(store)(LitElement) {
     return routingType ? `${this.page}/${this.resourceId}` : this.page
   }
 }
-
-customElements.define('favorite-tool', FavoriteTool)

package/client/{bootstrap.js → bootstrap.ts}

@@ -40,7 +40,7 @@ export default function bootstrap() {
 }
 
 function appendRoleMenusManagementMorenda() {
-  const useRoleByMenusManagementMenu = store.getState()?.menu?.useRoleByMenusManagementMenu || false
+  const useRoleByMenusManagementMenu = (store.getState() as any)?.menu?.useRoleByMenusManagementMenu || false
 
   if (useRoleByMenusManagementMenu) {
     store.dispatch({

package/client/components/{child-menus-selector.js → child-menus-selector.ts}

@@ -2,65 +2,61 @@ import { i18next, localize } from '@operato/i18n'
 import { client } from '@operato/graphql'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 
+@customElement('child-menus-selector')
 class ChildMenusSelector extends localize(i18next)(LitElement) {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          border: 1px solid var(--md-sys-color-primary);
-          font: normal 15px var(--theme-font);
-          color: var(--md-sys-color-secondary);
-        }
-        div {
-          margin: var(--spacing-medium);
-        }
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid var(--md-sys-color-primary);
+        font: normal 15px var(--theme-font);
+        color: var(--md-sys-color-secondary);
+      }
+      div {
+        margin: var(--spacing-medium);
+      }
+      ul {
+        flex: 1;
+        background-color: var(--md-sys-color-surface);
+        overflow: auto;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        margin: 0;
+        padding: var(--spacing-medium);
+        list-style: none;
+        border: 1px dashed rgba(0, 0, 0, 0.1);
+        border-width: 1px 0;
+      }
+
+      input[type='checkbox'] {
+        display: inline;
+      }
+
+      li {
+        padding: var(--spacing-small);
+      }
+
+      #checkAll,
+      [for='checkAll'] {
+        margin-bottom: var(--spacing-medium);
+        padding-bottom: var(--spacing-small);
+        font-weight: bold;
+      }
+
+      @media screen and (max-width: 480px) {
         ul {
-          flex: 1;
-          background-color: var(--md-sys-color-surface);
-          overflow: auto;
-          display: grid;
-          grid-template-columns: 1fr 1fr;
-          margin: 0;
-          padding: var(--spacing-medium);
-          list-style: none;
-          border: 1px dashed rgba(0, 0, 0, 0.1);
-          border-width: 1px 0;
-        }
-
-        input[type='checkbox'] {
-          display: inline;
-        }
-
-        li {
-          padding: var(--spacing-small);
-        }
-
-        #checkAll,
-        [for='checkAll'] {
-          margin-bottom: var(--spacing-medium);
-          padding-bottom: var(--spacing-small);
-          font-weight: bold;
+          grid-template-columns: 1fr;
         }
+      }
+    `
+  ]
 
-        @media screen and (max-width: 480px) {
-          ul {
-            grid-template-columns: 1fr;
-          }
-        }
-      `
-    ]
-  }
-
-  static get properties() {
-    return {
-      parentMenu: Object,
-      roleMenus: Array,
-      targetRole: Object
-    }
-  }
+  @property({ type: Object }) parentMenu: any
+  @property({ type: Array }) roleMenus: any[] = []
+  @property({ type: Object }) targetRole: any
 
   render() {
     const parentMenu = this.parentMenu || {}
@@ -101,7 +97,7 @@ class ChildMenusSelector extends localize(i18next)(LitElement) {
   async onCheckAll(e) {
     const checked = e.currentTarget.checked
 
-    Array.from(this.menuList).forEach(checkbox => (checkbox.checked = checked))
+    Array.from(this.menuList).forEach(checkbox => ((checkbox as HTMLInputElement).checked = checked))
 
     const response = await client.mutate({
       mutation: gql`
@@ -146,5 +142,3 @@ class ChildMenusSelector extends localize(i18next)(LitElement) {
     document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
   }
 }
-
-customElements.define('child-menus-selector', ChildMenusSelector)

package/client/components/{role-select-popup.js → role-select-popup.ts}

@@ -2,50 +2,50 @@ import { i18next, localize } from '@operato/i18n'
 import { client } from '@operato/graphql'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, state, query } from 'lit/decorators.js'
 import { isMobileDevice } from '@operato/utils'
 import '@operato/data-grist'
 import { CommonHeaderStyles } from '@operato/styles'
+import { DataGrist, FetchOption } from '@operato/data-grist'
 
+@customElement('role-select-popup')
 class RoleSelectPopup extends localize(i18next)(LitElement) {
-  static get styles() {
-    return [
-      CommonHeaderStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-          background-color: var(--md-sys-color-surface);
-        }
+  static styles = [
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background-color: var(--md-sys-color-surface);
+      }
 
-        .container {
-          flex: 1;
-          display: flex;
-          overflow-y: auto;
-          min-height: 20vh;
-        }
+      .container {
+        flex: 1;
+        display: flex;
+        overflow-y: auto;
+        min-height: 20vh;
+      }
 
-        .grist {
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          overflow-y: auto;
-        }
+      .grist {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow-y: auto;
+      }
 
-        ox-grist {
-          overflow-y: hidden;
-          flex: 1;
-        }
-      `
-    ]
-  }
+      ox-grist {
+        overflow-y: hidden;
+        flex: 1;
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      _searchFields: Array,
-      config: Object
-    }
-  }
+  @property({ type: Array }) _searchFields: any[] = []
+  @property({ type: Object }) config: any
+
+  @query('ox-grist') dataGrist!: DataGrist
+  @query('search-form') searchForm!: HTMLFormElement
 
   render() {
     return html`
@@ -56,7 +56,7 @@ class RoleSelectPopup extends localize(i18next)(LitElement) {
           <ox-grist
             .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
             .config=${this.config}
-            .fetchHandler="${this.fetchHandler.bind(this)}"
+            .fetchHandler=${this.fetchHandler.bind(this)}
           ></ox-grist>
         </div>
       </div>
@@ -68,14 +68,6 @@ class RoleSelectPopup extends localize(i18next)(LitElement) {
     `
   }
 
-  get searchForm() {
-    return this.shadowRoot.querySelector('search-form')
-  }
-
-  get dataGrist() {
-    return this.shadowRoot.querySelector('ox-grist')
-  }
-
   firstUpdated() {
     this._searchFields = [
       {
@@ -131,8 +123,8 @@ class RoleSelectPopup extends localize(i18next)(LitElement) {
     }
   }
 
-  async fetchHandler({ page, limit, sorters = [] }) {
-    const filters = this.searchForm?.queryFilters || []
+  async fetchHandler({ page, limit, sorters = [] }: FetchOption) {
+    const filters = (this.searchForm as any)?.queryFilters || []
 
     const response = await client.query({
       query: gql`
@@ -175,5 +167,3 @@ class RoleSelectPopup extends localize(i18next)(LitElement) {
     document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
   }
 }
-
-window.customElements.define('role-select-popup', RoleSelectPopup)

package/client/pages/{menu-list-page.js → menu-list-page.ts}

@@ -3,46 +3,48 @@ import '../viewparts/menu-tile-list'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
-import { client, navigate, PageView, store } from '@things-factory/shell'
+import { navigate, PageView, store } from '@operato/shell'
+import { client } from '@operato/graphql'
 import { ScrollbarStyles } from '@operato/styles'
-import { pulltorefresh, swipe } from '@things-factory/utils'
+import { pulltorefresh } from '@operato/pull-to-refresh'
+import { swipe } from '@things-factory/utils/src/index.js'
 
+@customElement('menu-list-page')
 class MenuListPage extends connect(store)(PageView) {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-
-          overflow: hidden;
-        }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+      }
 
-        menu-bar {
-          z-index: 1;
-        }
+      menu-bar {
+        z-index: 1;
+      }
 
-        menu-tile-list {
-          flex: 1;
-          overflow-y: auto;
-        }
-      `
-    ]
-  }
+      menu-tile-list {
+        flex: 1;
+        overflow-y: auto;
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      menuId: String,
-      menus: Array,
-      routingTypes: Object,
-      favorites: Array,
-      user: Object,
-      showSpinner: Boolean
-    }
-  }
+  @property({ type: String }) menuId?: string
+  @property({ type: Array }) menus: any[] = []
+  @property({ type: Object }) routingTypes: any
+  @property({ type: Array }) favorites: any[] = []
+  @property({ type: Object }) user: any
+  @property({ type: Boolean }) showSpinner: boolean = false
+
+  @state() private page?: string
+
+  private getMenus: any
 
   render() {
     return html`
@@ -125,10 +127,10 @@ class MenuListPage extends connect(store)(PageView) {
   }
 
   async firstUpdated() {
-    var list = this.shadowRoot.querySelector('menu-tile-list')
+    var list = this.renderRoot.querySelector('menu-tile-list') as HTMLElement
 
     pulltorefresh({
-      container: this.shadowRoot,
+      container: this.renderRoot,
       scrollable: list,
       refresh: () => {
         return this.refresh()
@@ -136,7 +138,7 @@ class MenuListPage extends connect(store)(PageView) {
     })
 
     swipe({
-      container: this.shadowRoot.querySelector('menu-tile-list'),
+      container: this.renderRoot.querySelector('menu-tile-list'),
       animates: {
         dragging: async (d, opts) => {
           var currentIndex = Number(this.menuId)
@@ -196,5 +198,3 @@ class MenuListPage extends connect(store)(PageView) {
     this.refresh()
   }
 }
-
-window.customElements.define('menu-list-page', MenuListPage)

package/client/pages/{menu-management-detail.js → menu-management-detail.ts}

@@ -3,68 +3,68 @@ import '@operato/data-grist'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
-import { getEditor, getRenderer } from '@operato/data-grist'
+import { DataGrist, FetchOption, getEditor, getRenderer } from '@operato/data-grist'
 import { i18next, localize } from '@operato/i18n'
 import { client } from '@operato/graphql'
 import { ScrollbarStyles } from '@operato/styles'
-import { gqlBuilder, isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
+import { gqlBuilder } from '@things-factory/utils'
 
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
 
+@customElement('menu-management-detail')
 class MenuManagementDetail extends localize(i18next)(LitElement) {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-          background-color: var(--md-sys-color-surface);
-        }
-        search-form {
-          overflow: visible;
-        }
-        .grist {
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          overflow-y: auto;
-        }
-        ox-grist {
-          overflow-y: hidden;
-          flex: 1;
-        }
-        .button-container {
-          padding: 10px 0 12px 0;
-          text-align: center;
-        }
-        .button-container > button {
-          background-color: var(--button-background-color);
-          border: var(--button-border);
-          border-radius: var(--button-border-radius);
-          margin: var(--button-margin);
-          padding: var(--button-padding);
-          color: var(--button-color);
-          font: var(--button-font);
-          text-transform: var(--button-text-transform);
-        }
-        .button-container > button:hover,
-        .button-container > button:active {
-          background-color: var(--button-background-focus-color);
-        }
-      `
-    ]
-  }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background-color: var(--md-sys-color-surface);
+      }
+      search-form {
+        overflow: visible;
+      }
+      .grist {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow-y: auto;
+      }
+      ox-grist {
+        overflow-y: hidden;
+        flex: 1;
+      }
+      .button-container {
+        padding: 10px 0 12px 0;
+        text-align: center;
+      }
+      .button-container > button {
+        background-color: var(--button-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        margin: var(--button-margin);
+        padding: var(--button-padding);
+        color: var(--button-color);
+        font: var(--button-font);
+        text-transform: var(--button-text-transform);
+      }
+      .button-container > button:hover,
+      .button-container > button:active {
+        background-color: var(--button-background-focus-color);
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      menuId: String,
-      searchFields: Object,
-      config: Object
-    }
-  }
+  @property({ type: String }) menuId?: string
+  @property({ type: Object }) searchFields: any
+  @property({ type: Object }) config: any
+
+  @query('ox-grist') dataGrist!: DataGrist
+  @query('search-form') searchForm!: HTMLFormElement
 
   render() {
     return html`
@@ -85,14 +85,6 @@ class MenuManagementDetail extends localize(i18next)(LitElement) {
     `
   }
 
-  get searchForm() {
-    return this.shadowRoot.querySelector('search-form')
-  }
-
-  get dataGrist() {
-    return this.shadowRoot.querySelector('ox-grist')
-  }
-
   firstUpdated() {
     this.searchFields = [
       {
@@ -258,7 +250,7 @@ class MenuManagementDetail extends localize(i18next)(LitElement) {
     }
   }
 
-  async fetchHandler({ page, limit, sorters = [{ name: 'rank' }, { name: 'name' }] }) {
+  async fetchHandler({ page, limit, sorters = [{ name: 'rank' }, { name: 'name' }] }: FetchOption) {
     const response = await client.query({
       query: gql`
         query {
@@ -362,7 +354,7 @@ class MenuManagementDetail extends localize(i18next)(LitElement) {
     let patches = this.dataGrist.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(menu => {
-        let patchField = menu.id ? { id: menu.id } : {}
+        let patchField: any = menu.id ? { id: menu.id } : {}
         patchField = { ...patchField, routingType: menu.routingType, menuType: menu.menuType }
         const dirtyFields = menu.__dirtyfields__
         for (let key in dirtyFields) {
@@ -380,5 +372,3 @@ class MenuManagementDetail extends localize(i18next)(LitElement) {
     return patches
   }
 }
-
-customElements.define('menu-management-detail', MenuManagementDetail)