@things-factory/apptool-ui 8.0.0-beta.8 → 8.0.0

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, VIEWPART_POSITION, VIEWPART_LEVEL } from '@operato/layout'
+import { isMobileDevice } from '@operato/utils'
+
+import { ADD_SETTING } from '@things-factory/setting-base/dist-client'
+
+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,54 @@
+import '@material/web/progress/linear-progress.js'
+
+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: block;
+        position: relative;
+
+        --md-linear-progress-track-color: var(--md-sys-color-on-primary);
+      }
+
+      md-linear-progress {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+    `
+  ]
+
+  @state() private busy?: Boolean
+  @state() private lastState?: boolean
+  @state() private timeout?: any
+
+  render() {
+    return this.busy ? html`<md-linear-progress indeterminate></md-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
+        }
+
+        this.timeout = null
+      }, 500)
+    }
+  }
+}

package/client/layout/app-toolbar.ts

@@ -0,0 +1,116 @@
+import '@material/web/icon/icon.js'
+
+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('app-toolbar')
+class AppToolbar extends connect(store)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        height: var(--header-bar-height, 42px);
+        color: var(--header-bar-color);
+        background-color: var(--header-bar-background-color, white);
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 5px;
+        gap: 10px;
+
+        text-transform: capitalize;
+      }
+
+      [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)
+
+    /* 현재 OVERLAY가 있으면, 뒤로가기 버튼이 보이고, 아니면, HOME 버튼이 보인다. */
+    var state = history.state
+    var overlay = (state || {}).overlay
+
+    return html`
+      ${overlay
+        ? html` <md-icon @click=${e => history.back()}>arrow_back</md-icon> `
+        : frontEndTools.length == 0
+          ? html` <md-icon @click=${e => this.navigateToHome()}>home</md-icon> `
+          : 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.apptool.tools
+  }
+
+  navigateToHome() {
+    var base = document.querySelector('base')
+    if (base) {
+      navigate(base.getAttribute('href') || '')
+    } else {
+      navigate('/')
+    }
+  }
+
+  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/layout/page-mdibar.ts

@@ -0,0 +1,357 @@
+import '@material/web/icon/icon.js'
+import '@operato/popup/ox-popup-menu.js'
+
+import { css, html, nothing, LitElement } from 'lit'
+import { customElement, query, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { navigate, store, PageView } from '@operato/shell'
+import { i18next, localize } from '@operato/i18n'
+import { OxPopupMenu } from '@operato/popup/ox-popup-menu.js'
+
+@customElement('page-mdibar')
+export class PageMDIBar extends connect(store)(localize(i18next)(LitElement)) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        background-color: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+        font-size: var(--fontsize-small);
+        overflow: hidden;
+        align-items: stretch;
+      }
+
+      div {
+        box-sizing: border-box;
+      }
+
+      div[routes] {
+        flex: 1;
+
+        display: flex;
+        overflow: hidden;
+      }
+
+      div[route] {
+        display: inline-block;
+        position: relative;
+        min-width: var(--mdibar-min-width, 100px);
+        max-width: var(--mdibar-max-width, 150px);
+        padding: var(--mdibar-padding, 3px 22px 1px 7px);
+        border-right: var(--border-dim-color);
+        border-top: var(--border-dim-color);
+        border-bottom: var(--border-dim-color);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-transform: capitalize;
+        cursor: pointer;
+      }
+
+      div[arrows] {
+        display: flex;
+        border: var(--border-dim-color);
+        align-items: center;
+      }
+
+      div[arrows] * {
+        opacity: 0.8;
+        font-size: var(--mdibar-icon-size, 24px);
+        flex: 1;
+      }
+
+      md-icon {
+        --md-icon-size: var(--mdibar-icon-size, 18px);
+        opacity: 0.5;
+      }
+
+      md-icon:hover {
+        opacity: 0.8;
+        color: var(--md-sys-color-secondary);
+      }
+
+      div[arrows] md-icon[disabled] {
+        opacity: 0.2;
+        color: unset;
+      }
+
+      div[route] md-icon {
+        position: absolute;
+        right: 2px;
+        margin-left: var(--spacing-small);
+      }
+
+      div[route][active] {
+        background-color: var(--md-sys-color-background);
+        border-bottom: 1px solid var(--md-sys-color-background);
+        color: var(--md-sys-color-on-background);
+        font-weight: bold;
+      }
+
+      div[route][home] {
+        padding: var(--mdibar-padding-home, 3px 5px 0 23px);
+        overflow: visible;
+        min-width: unset;
+        max-width: unset;
+      }
+
+      div[route][home] md-icon {
+        left: 0;
+      }
+
+      div[route][rest] {
+        flex: 1;
+        min-width: unset;
+        max-width: unset;
+        border-right: unset;
+      }
+    `
+  ]
+
+  @state() routes: { page?: PageView; url: string }[] = [{ url: this.getHomeRoute() }]
+  @state() activePage?: PageView
+  @state() pagename?: string
+  @state() params?: any
+  @state() resourceId?: string
+  @state() title: string = ''
+
+  @query('[routes]') scroller!: HTMLDivElement
+  @query('#context-menu') contextMenu!: HTMLDivElement
+
+  private contextMenuTargetIndex?: number
+  private contextMenuTargetRoute?: { page?: PageView; url: string }
+
+  render() {
+    const home = this.routes[0]
+    const routes = this.routes.slice(1)
+
+    return html`
+      <div
+        home
+        route
+        ?active=${this.activePage === home.page}
+        @click=${() => this.moveToHome()}
+        @contextmenu=${(e: MouseEvent) => {
+          e.preventDefault()
+          e.stopPropagation()
+
+          delete this.contextMenuTargetRoute
+          delete this.contextMenuTargetIndex
+
+          this.openContextMenu(e)
+        }}
+      >
+        <md-icon>home</md-icon>&#8203;
+      </div>
+
+      <div
+        routes
+        @mousewheel=${this.onWheelEvent.bind(this)}
+        @contextmenu=${(e: MouseEvent) => {
+          e.preventDefault()
+          e.stopPropagation()
+
+          delete this.contextMenuTargetRoute
+          delete this.contextMenuTargetIndex
+
+          this.openContextMenu(e)
+        }}
+      >
+        ${routes.map((route, idx) => {
+          const context = route.page?.context as any
+          const title = context?.title || context?.search?.placeholder || ''
+
+          return html`
+            <div
+              @contextmenu=${(e: MouseEvent) => {
+                e.preventDefault()
+                e.stopPropagation()
+
+                this.contextMenuTargetRoute = route
+                this.contextMenuTargetIndex = idx
+
+                this.openContextMenu(e)
+              }}
+              @click=${() => this.moveTo(route)}
+              ?active=${this.activePage === route.page}
+              route
+            >
+              ${typeof title == 'object' ? title.text : title}
+              <md-icon
+                @click=${(e: MouseEvent) => {
+                  e.stopPropagation()
+                  this.closePage(route, idx + 1)
+                }}
+                >close</md-icon
+              >
+            </div>
+          `
+        })}
+        <div rest route></div>
+      </div>
+
+      <div arrows>
+        <md-icon ?disabled=${!this.scroller || this.scroller.scrollLeft <= 0} @click=${() => this.onScrollByArrow(1)}
+          >arrow_left</md-icon
+        >
+        <md-icon
+          ?disabled=${!this.scroller ||
+          this.scroller.scrollWidth <= this.scroller.offsetWidth + this.scroller.scrollLeft}
+          @click=${() => this.onScrollByArrow(-1)}
+          >arrow_right</md-icon
+        >
+      </div>
+    `
+  }
+
+  updated(changed) {
+    if (
+      changed.has('activePage') ||
+      (!changed.has('pagename') && (changed.has('resourceId') || changed.has('params')))
+    ) {
+      if (!this.activePage) {
+        return
+      }
+
+      const page = this.activePage
+
+      if (location.pathname == this.getHomeRoute()) {
+        this.routes[0].page = page
+        return
+      }
+
+      var route = this.routes.find(route => route.page === page)
+      if (!route) {
+        this.routes = [...this.routes, { page, url: location.href }]
+      } else {
+        route.url = location.href
+      }
+    }
+  }
+
+  stateChanged(state) {
+    const { page, context, activePage, resourceId, params } = state.route || {}
+    this.activePage = activePage
+    this.pagename = page
+    this.resourceId = resourceId
+    this.params = params
+
+    /* refresh를 일으키기위한 property 변경을 위한 코드임. */
+    this.title = context.title || context.search?.placeholder
+  }
+
+  onScrollByArrow(delta: number) {
+    this.scroller.scrollLeft -= delta * 10
+
+    this.requestUpdate()
+  }
+
+  onWheelEvent(e: Event) {
+    const target = e.currentTarget as HTMLDivElement
+
+    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))
+    target.scrollLeft -= delta * 10
+
+    this.requestUpdate()
+
+    e.preventDefault()
+  }
+
+  getHomeRoute() {
+    var base = document.querySelector('base')
+    return base?.getAttribute('href') || '/'
+  }
+
+  moveTo(route: { page?: PageView; url: string }) {
+    console.log('route', route)
+    navigate(route.url)
+  }
+
+  moveToHome() {
+    navigate(this.getHomeRoute())
+  }
+
+  closePage(route: { page?: PageView; url: string }, idx: number) {
+    this.routes = [...this.routes.slice(0, idx), ...this.routes.slice(idx + 1)]
+    const page = route.page!
+
+    page.parentNode?.removeChild(page)
+    page.pageDispose()
+
+    if (this.activePage === page) {
+      const next = this.routes.length > 0 ? Math.max(0, idx - 1) : -1
+      navigate(next != -1 ? this.routes[next].url : this.getHomeRoute())
+    }
+  }
+
+  closeAllPage() {
+    this.routes.slice(1).forEach((route, idx) => {
+      const page = route.page!
+
+      page.parentNode?.removeChild(page)
+      page.pageDispose()
+    })
+
+    this.routes = [this.routes[0]]
+
+    navigate(this.routes[0].url)
+  }
+
+  closeOtherPages(route: { page?: PageView; url: string }, idx: number) {
+    this.routes.slice(1).forEach((route, idx) => {
+      if (route === route) {
+        return
+      }
+
+      const page = route.page!
+
+      page.parentNode?.removeChild(page)
+      page.pageDispose()
+    })
+
+    this.routes = [this.routes[0], route]
+
+    navigate(route.url)
+  }
+
+  openContextMenu(e: MouseEvent) {
+    OxPopupMenu.open({
+      template: html`
+        ${this.contextMenuTargetRoute
+          ? html`
+              <ox-popup-menuitem
+                label="close"
+                @select=${(e: Event) => {
+                  this.closePage(this.contextMenuTargetRoute!, this.contextMenuTargetIndex!)
+                }}
+              >
+                <md-icon slot="icon">close</md-icon>
+              </ox-popup-menuitem>
+
+              <ox-popup-menuitem
+                label="close others"
+                @select=${(e: Event) => {
+                  this.closeOtherPages(this.contextMenuTargetRoute!, this.contextMenuTargetIndex!)
+                }}
+              >
+                <md-icon slot="icon">cancel</md-icon>
+              </ox-popup-menuitem>
+            `
+          : nothing}
+
+        <ox-popup-menuitem
+          label="close all"
+          @select=${(e: Event) => {
+            this.closeAllPage()
+          }}
+        >
+          <md-icon slot="icon">disabled_by_default</md-icon>
+        </ox-popup-menuitem>
+      `,
+      top: e.clientY,
+      left: e.clientX,
+      parent: document.body
+    })
+  }
+}

package/client/layout/page-toolbar.ts

@@ -0,0 +1,101 @@
+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 { 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, var(--md-sys-color-on-surface));
+        background-color: var(--page-header-bar-background-color, var(--md-sys-color-surface-container));
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 5px;
+
+        text-transform: capitalize;
+
+        --ox-input-search-background-color: var(--md-sys-color-on-primary);
+      }
+
+      :host > * {
+        margin: var(--page-header-bar-item-padding, 0);
+      }
+
+      [center] {
+        flex: 1;
+        flex-wrap: nowrap;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+      }
+
+      [center] > * {
+        flex: 1;
+        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()
+  }
+}