@things-factory/apptool-ui 6.1.66 → 6.1.68

package/client/bootstrap.ts

@@ -0,0 +1,34 @@
+// import './layout/app-toolbar'
+// import './layout/app-busybar'
+// import './mdibar-setting-let'
+
+// import { html } from 'lit-html'
+
+// import { appendViewpart, VIEWPART_POSITION } from '@operato/layout'
+
+export default function bootstrap() {
+  // appendViewpart({
+  //   name: 'apptoolbar',
+  //   viewpart: {
+  //     show: true,
+  //     template: html` <app-toolbar></app-toolbar> `
+  //   },
+  //   position: VIEWPART_POSITION.HEADERBAR
+  // })
+  // appendViewpart({
+  //   name: 'appbusybar',
+  //   viewpart: {
+  //     show: true,
+  //     template: html` <app-busybar></app-busybar> `
+  //   },
+  //   position: VIEWPART_POSITION.HEADERBAR
+  // })
+  // appendViewpart({
+  //   name: 'appmdibar',
+  //   viewpart: {
+  //     show: false,
+  //     template: html` <page-mdibar></page-mdibar> `
+  //   },
+  //   position: VIEWPART_POSITION.HEADERBAR
+  // })
+}

package/client/index.ts

@@ -0,0 +1,80 @@
+import './layout/app-toolbar'
+import './layout/app-busybar'
+import './layout/page-mdibar'
+import './layout/page-toolbar'
+import './mdibar-setting-let'
+
+import { html } from 'lit-html'
+
+import { store, clientSettingStore } from '@operato/shell'
+import { appendViewpart, TOOL_POSITION, VIEWPART_POSITION, VIEWPART_LEVEL } from '@operato/layout'
+import { isMobileDevice } from '@operato/utils'
+import { APPEND_PAGE_TOOL } from '@things-factory/apptool-base'
+import { ADD_SETTING } from '@things-factory/setting-base'
+
+export async function setupAppToolPart({
+  toolbar = true,
+  busybar = true,
+  mdibar = true,
+  pageToolbar = false
+}: {
+  toolbar?: boolean
+  busybar?: boolean
+  mdibar?: boolean
+  pageToolbar?: boolean
+}) {
+  if (toolbar) {
+    appendViewpart({
+      name: 'apptoolbar',
+      viewpart: {
+        show: true,
+        template: html` <app-toolbar></app-toolbar> `
+      },
+      position: VIEWPART_POSITION.HEADERBAR
+    })
+  }
+
+  if (busybar) {
+    appendViewpart({
+      name: 'appbusybar',
+      viewpart: {
+        show: true,
+        template: html` <app-busybar></app-busybar> `
+      },
+      position: VIEWPART_POSITION.HEADERBAR
+    })
+  }
+
+  if (mdibar && !isMobileDevice()) {
+    const show = ((await clientSettingStore.get('mdibar'))?.value || {}).show
+
+    appendViewpart({
+      name: 'appmdibar',
+      viewpart: {
+        show,
+        level: VIEWPART_LEVEL.TOPMOST,
+        template: html` <page-mdibar></page-mdibar> `
+      },
+      position: VIEWPART_POSITION.PAGE_HEADERBAR
+    })
+
+    store.dispatch({
+      type: ADD_SETTING,
+      setting: {
+        seq: 21,
+        template: html` <mdibar-setting-let></mdibar-setting-let> `
+      }
+    })
+  }
+
+  if (pageToolbar) {
+    appendViewpart({
+      name: 'page-toolbar',
+      viewpart: {
+        show: true,
+        template: html` <page-toolbar> </page-toolbar> `
+      },
+      position: VIEWPART_POSITION.PAGE_HEADERBAR
+    })
+  }
+}

package/client/layout/app-busybar.ts

@@ -0,0 +1,48 @@
+import '@material/mwc-linear-progress'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { store } from '@operato/shell'
+
+@customElement('app-busybar')
+class AppBusyBar extends connect(store)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+      }
+
+      mwc-linear-progress {
+        flex: 1;
+        height: 2px;
+      }
+    `
+  ]
+
+  @state() private busy?: Boolean
+  @state() private lastState?: boolean
+  @state() private timeout?: any
+
+  render() {
+    return this.busy ? html`<mwc-linear-progress indeterminate></mwc-linear-progress>` : html``
+  }
+
+  stateChanged(state) {
+    if (!state.busy.busy) {
+      this.busy = false
+    }
+
+    this.lastState = state.busy.busy
+
+    if (!this.timeout) {
+      this.timeout = setTimeout(() => {
+        if (this.lastState) {
+          this.busy = true
+        }
+        delete this.timeout
+      }, 500)
+    }
+  }
+}

package/client/layout/{app-toolbar.js → app-toolbar.ts}

@@ -1,75 +1,73 @@
 import '@material/mwc-icon'
 
-import { css, html, LitElement } from 'lit'
+import { css, html, LitElement, TemplateResult } from 'lit'
+import { customElement, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { TOOL_POSITION } from '@operato/layout'
-import { navigate, store } from '@things-factory/shell'
+import { navigate, store } from '@operato/shell'
 
+@customElement('app-toolbar')
 class AppToolbar extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      _tools: Array,
-      _route: Object
-    }
-  }
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        height: var(--header-bar-height, 45px);
+        color: var(--header-bar-color);
+        background-color: var(--header-bar-background-color, white);
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 5px;
+
+        text-transform: capitalize;
+      }
+
+      :host > * {
+        margin: var(--header-bar-item-padding);
+      }
+
+      [center] {
+        flex: 1;
+        flex-wrap: nowrap;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+      }
+
+      [center] > * {
+        margin: auto;
+      }
+
+      :host(.vline) {
+        display: block;
+        flex: none;
+        border-left: 1px solid rgba(255, 255, 255, 0.07);
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        width: 0px;
+        height: 18px;
+        margin: 0 4px;
+      }
+
+      :host(label) {
+        margin-right: 5px;
+        color: #fff;
+        font-size: 20px;
+      }
+
+      span.space {
+        width: 10px;
+      }
+    `
+  ]
 
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          height: var(--header-bar-height, 45px);
-          color: var(--header-bar-color);
-          background-color: var(--header-bar-background-color, white);
-          justify-content: space-between;
-          align-items: center;
-          padding: 0 5px;
-
-          text-transform: capitalize;
-        }
-
-        :host > * {
-          margin: var(--header-bar-item-padding);
-        }
-
-        [center] {
-          flex: 1;
-          flex-wrap: nowrap;
-          display: flex;
-          align-items: center;
-          overflow: hidden;
-        }
-
-        [center] > * {
-          margin: auto;
-        }
-
-        :host(.vline) {
-          display: block;
-          flex: none;
-          border-left: 1px solid rgba(255, 255, 255, 0.07);
-          border-right: 1px solid rgba(0, 0, 0, 0.1);
-          width: 0px;
-          height: 18px;
-          margin: 0 4px;
-        }
-
-        :host(label) {
-          margin-right: 5px;
-          color: #fff;
-          font-size: 20px;
-        }
-
-        span.space {
-          width: 10px;
-        }
-      `
-    ]
-  }
+  @state() _tools: { position: string; template: TemplateResult }[] = []
+  @state() _route: any
+
+  @query('[center]') center!: HTMLDivElement
 
   render() {
-    var tools = this._tools || []
+    var tools = this._tools || ([] as { position: string; template: TemplateResult }[])
 
     var frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)
     var frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)
@@ -89,17 +87,12 @@ class AppToolbar extends connect(store)(LitElement) {
         : frontEndTools.map(tool => html` ${tool.template} `)}
       ${frontTools.map(tool => html` ${tool.template} `)}
 
-      <div center>${centerTools.map(tool => html` ${tool.template} `)}</div>
+      <div center @mousewheel=${this.onWheelEvent}>${centerTools.map(tool => html` ${tool.template} `)}</div>
 
       ${rearTools.map(tool => html` ${tool.template} `)} ${rearEndTools.map(tool => html` ${tool.template} `)}
     `
   }
 
-  firstUpdated() {
-    const center = this.renderRoot.querySelector('[center]')
-    center.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)
-  }
-
   stateChanged(state) {
     /* page의 변화를 감지하기 위해서 route의 변화를 체크한다. */
     this._route = state.route
@@ -110,7 +103,7 @@ class AppToolbar extends connect(store)(LitElement) {
   navigateToHome() {
     var base = document.querySelector('base')
     if (base) {
-      navigate(base.getAttribute('href'))
+      navigate(base.getAttribute('href') || '')
     } else {
       navigate('/')
     }
@@ -124,5 +117,3 @@ class AppToolbar extends connect(store)(LitElement) {
     e.preventDefault()
   }
 }
-
-customElements.define('app-toolbar', AppToolbar)

package/client/layout/page-mdibar.ts

@@ -0,0 +1,132 @@
+import '@material/mwc-icon'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { navigate, store, PageView } from '@operato/shell'
+
+@customElement('page-mdibar')
+class PageMDIBar extends connect(store)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        background-color: var(--main-section-background-color);
+        color: var(--mdibar-color, rgba(0, 0, 0, 0.7));
+        font-size: var(--fontsize-small);
+      }
+
+      div {
+        display: inline-block;
+        position: relative;
+        max-width: var(--mdibar-max-width, 120px);
+        padding: var(--mdibar-padding, 3px 22px 0 5px);
+        border-right: var(--border-dark-color);
+        border-bottom: var(--border-dark-color);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      mwc-icon {
+        position: absolute;
+        right: 2px;
+        top: 3px;
+        margin-left: var(--margin-narrow);
+        font-size: var(--mdibar-icon-size, 18px);
+        opacity: 0.5;
+      }
+      mwc-icon:hover {
+        opacity: 0.8;
+        color: var(--mdibar-hover-color, #cc3300);
+      }
+
+      [active] {
+        background-color: var(--mdibar-background-color, #fff);
+        border-bottom: 1px solid var(--mdibar-background-color, #fff);
+        color: var(--primary-text-color);
+        font-weight: bold;
+      }
+      [home] {
+        padding: var(--mdibar-padding-home, 3px 5px 0 23px);
+      }
+      [home] mwc-icon {
+        left: 0;
+      }
+    `
+  ]
+
+  @state() pages: PageView[] = []
+  @state() activePage!: PageView
+  @state() title: string = ''
+
+  render() {
+    const pages = this.pages || []
+
+    return html`
+      <div home><mwc-icon>home</mwc-icon></div>
+
+      ${pages.map((page, idx) => {
+        const context = page.context as any
+        const title = context?.title || context?.search?.placeholder || ''
+
+        return html`
+          <div @click=${() => this.moveTo(page)} ?active=${this.activePage === page}>
+            ${title}
+            <mwc-icon
+              @click=${(e: MouseEvent) => {
+                e.stopPropagation()
+                this.closePage(page, idx)
+              }}
+              >close</mwc-icon
+            >
+          </div>
+        `
+      })}
+    `
+  }
+
+  updated(changed) {
+    if (changed.has('activePage')) {
+      const page = this.activePage
+
+      if (!this.pages) {
+        this.pages = []
+      }
+
+      if (!this.pages.includes(page)) {
+        this.pages = [...this.pages, page]
+      }
+    }
+  }
+
+  stateChanged(state) {
+    const { context, activePage } = state.route || {}
+    this.activePage = activePage
+
+    /* refresh를 일으키기위한 property 변경을 위한 코드임. */
+    this.title = context.title || context.search?.placeholder
+  }
+
+  getHomeRoute() {
+    var base = document.querySelector('base')
+    return base?.getAttribute('href') || '/'
+  }
+
+  moveTo(page: PageView) {
+    navigate(page.getAttribute('data-page')!)
+  }
+
+  closePage(page: PageView, idx: number) {
+    this.pages = [...this.pages.slice(0, idx), ...this.pages.slice(idx + 1)]
+
+    page.parentNode?.removeChild(page)
+    page.pageDispose()
+
+    if (this.activePage === page) {
+      const next = this.pages.length > 0 ? Math.max(0, idx - 1) : -1
+      navigate(next != -1 ? this.pages[next].getAttribute('data-page')! : this.getHomeRoute())
+    }
+  }
+}

package/client/layout/page-toolbar.ts

@@ -0,0 +1,100 @@
+import '@material/mwc-icon'
+
+import { css, html, LitElement, TemplateResult } from 'lit'
+import { customElement, query, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { TOOL_POSITION } from '@operato/layout'
+import { navigate, store } from '@operato/shell'
+
+@customElement('page-toolbar')
+class PageToolbar extends connect(store)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        color: var(--page-header-bar-color);
+        background-color: var(--page-header-bar-background-color, white);
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 5px;
+
+        text-transform: capitalize;
+      }
+
+      :host > * {
+        margin: var(--page-header-bar-item-padding, 0);
+      }
+
+      [center] {
+        flex: 1;
+        flex-wrap: nowrap;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+      }
+
+      [center] > * {
+        margin: auto;
+      }
+
+      :host(.vline) {
+        display: block;
+        flex: none;
+        border-left: 1px solid rgba(255, 255, 255, 0.07);
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        width: 0px;
+        height: 18px;
+        margin: 0 4px;
+      }
+
+      :host(label) {
+        margin-right: 5px;
+        color: #fff;
+        font-size: 20px;
+      }
+
+      span.space {
+        width: 10px;
+      }
+    `
+  ]
+
+  @state() _tools: { position: string; template: TemplateResult }[] = []
+  @state() _route: any
+
+  @query('[center]') center!: HTMLDivElement
+
+  render() {
+    var tools = this._tools || ([] as { position: string; template: TemplateResult }[])
+
+    var frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)
+    var frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)
+    var centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)
+    var rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)
+    var rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)
+
+    return html`
+      ${frontEndTools.map(tool => html` ${tool.template} `)} ${frontTools.map(tool => html` ${tool.template} `)}
+
+      <div center @mousewheel=${this.onWheelEvent}>${centerTools.map(tool => html` ${tool.template} `)}</div>
+
+      ${rearTools.map(tool => html` ${tool.template} `)} ${rearEndTools.map(tool => html` ${tool.template} `)}
+    `
+  }
+
+  stateChanged(state) {
+    /* page의 변화를 감지하기 위해서 route의 변화를 체크한다. */
+    this._route = state.route
+
+    this._tools = state.pagetool.tools
+  }
+
+  onWheelEvent(e) {
+    const center = e.currentTarget
+    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
+    center.scrollLeft -= delta * 10
+
+    e.preventDefault()
+  }
+}

package/client/mdibar-setting-let.ts

@@ -0,0 +1,64 @@
+import '@material/mwc-formfield'
+import '@material/mwc-checkbox'
+import '@operato/i18n/ox-i18n.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { clientSettingStore } from '@operato/shell'
+import { updateViewpart } from '@operato/layout'
+
+@customElement('mdibar-setting-let')
+export class MDIBarSettingLet extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      label {
+        font: var(--label-font);
+        color: var(--label-color);
+        text-transform: var(--label-text-transform);
+      }
+    `
+  ]
+
+  @property({ type: Boolean }) show: boolean = false
+
+  render() {
+    const checked = this.show === true
+
+    return html`
+      <setting-let>
+        <ox-i18n slot="title" msgid="title.mdibar setting"></ox-i18n>
+
+        <div slot="content">
+          <mwc-formfield label=${i18next.t('label.show')}>
+            <mwc-checkbox @change=${e => this.onChangeShowMDIBar(e)} ?checked=${checked}></mwc-checkbox>
+          </mwc-formfield>
+        </div>
+      </setting-let>
+    `
+  }
+
+  async firstUpdated() {
+    this.show = ((await clientSettingStore.get('mdibar'))?.value || {}).show
+  }
+
+  async onChangeShowMDIBar(e) {
+    const show = e.currentTarget.checked
+
+    try {
+      await clientSettingStore.put({
+        key: 'mdibar',
+        value: {
+          show
+        }
+      })
+    } catch (e) {
+      console.error(e)
+    }
+
+    updateViewpart('appmdibar', {
+      show
+    })
+  }
+}

package/dist-client/bootstrap.d.ts

@@ -0,0 +1 @@
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -0,0 +1,32 @@
+// import './layout/app-toolbar'
+// import './layout/app-busybar'
+// import './mdibar-setting-let'
+// import { html } from 'lit-html'
+// import { appendViewpart, VIEWPART_POSITION } from '@operato/layout'
+export default function bootstrap() {
+    // appendViewpart({
+    //   name: 'apptoolbar',
+    //   viewpart: {
+    //     show: true,
+    //     template: html` <app-toolbar></app-toolbar> `
+    //   },
+    //   position: VIEWPART_POSITION.HEADERBAR
+    // })
+    // appendViewpart({
+    //   name: 'appbusybar',
+    //   viewpart: {
+    //     show: true,
+    //     template: html` <app-busybar></app-busybar> `
+    //   },
+    //   position: VIEWPART_POSITION.HEADERBAR
+    // })
+    // appendViewpart({
+    //   name: 'appmdibar',
+    //   viewpart: {
+    //     show: false,
+    //     template: html` <page-mdibar></page-mdibar> `
+    //   },
+    //   position: VIEWPART_POSITION.HEADERBAR
+    // })
+}
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,gCAAgC;AAChC,gCAAgC;AAEhC,kCAAkC;AAElC,sEAAsE;AAEtE,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,mBAAmB;IACnB,wBAAwB;IACxB,gBAAgB;IAChB,kBAAkB;IAClB,oDAAoD;IACpD,OAAO;IACP,0CAA0C;IAC1C,KAAK;IACL,mBAAmB;IACnB,wBAAwB;IACxB,gBAAgB;IAChB,kBAAkB;IAClB,oDAAoD;IACpD,OAAO;IACP,0CAA0C;IAC1C,KAAK;IACL,mBAAmB;IACnB,uBAAuB;IACvB,gBAAgB;IAChB,mBAAmB;IACnB,oDAAoD;IACpD,OAAO;IACP,0CAA0C;IAC1C,KAAK;AACP,CAAC","sourcesContent":["// import './layout/app-toolbar'\n// import './layout/app-busybar'\n// import './mdibar-setting-let'\n\n// import { html } from 'lit-html'\n\n// import { appendViewpart, VIEWPART_POSITION } from '@operato/layout'\n\nexport default function bootstrap() {\n  // appendViewpart({\n  //   name: 'apptoolbar',\n  //   viewpart: {\n  //     show: true,\n  //     template: html` <app-toolbar></app-toolbar> `\n  //   },\n  //   position: VIEWPART_POSITION.HEADERBAR\n  // })\n  // appendViewpart({\n  //   name: 'appbusybar',\n  //   viewpart: {\n  //     show: true,\n  //     template: html` <app-busybar></app-busybar> `\n  //   },\n  //   position: VIEWPART_POSITION.HEADERBAR\n  // })\n  // appendViewpart({\n  //   name: 'appmdibar',\n  //   viewpart: {\n  //     show: false,\n  //     template: html` <page-mdibar></page-mdibar> `\n  //   },\n  //   position: VIEWPART_POSITION.HEADERBAR\n  // })\n}\n"]}

package/dist-client/index.d.ts

@@ -0,0 +1,11 @@
+import './layout/app-toolbar';
+import './layout/app-busybar';
+import './layout/page-mdibar';
+import './layout/page-toolbar';
+import './mdibar-setting-let';
+export declare function setupAppToolPart({ toolbar, busybar, mdibar, pageToolbar }: {
+    toolbar?: boolean;
+    busybar?: boolean;
+    mdibar?: boolean;
+    pageToolbar?: boolean;
+}): Promise<void>;