@things-factory/operato-board 6.1.80 → 6.1.82

package/client/viewparts/{group-info.js → group-info.ts}

@@ -1,135 +1,132 @@
 import '@material/mwc-icon'
 
 import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next } from '@things-factory/i18n-base'
 
 import { fetchGroup } from '../graphql'
 
+@customElement('group-info')
 export class GroupInfo extends LitElement {
-  static get properties() {
-    return {
-      groupId: String,
-      group: Object
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
+  static styles = [
+    css`
+      :host {
+        display: block;
+        background-color: var(--main-section-background-color);
+        height: 100%;
+        min-width: 350px;
+        overflow: auto;
+        position: relative;
+
+        --form-grid-gap: 2px 0;
+        --input-field-padding: var(--padding-default);
+        --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;
+        --mdc-button-horizontal-padding: var(--padding-default);
+      }
+
+      form {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        grid-gap: var(--form-grid-gap);
+        grid-auto-rows: minmax(24px, auto);
+        padding: var(--padding-wide);
+        align-items: center;
+      }
+
+      [buttons] {
+        grid-column: span 12;
+        padding: var(--padding-default) 0;
+        text-align: right;
+      }
+
+      [buttons] * {
+        margin: 0 0 0 var(--margin-narrow);
+      }
+      [danger] {
+        float: left;
+        margin: 0 var(--margin-narrow) 0 0;
+        --mdc-theme-primary: var(--status-danger-color);
+      }
+
+      fieldset {
+        display: contents;
+      }
+
+      legend {
+        grid-column: span 12;
+        padding: var(--legend-padding);
+        font: var(--legend-font);
+        color: var(--legend-text-color);
+        text-transform: capitalize;
+      }
+
+      label {
+        grid-column: span 12;
+        text-transform: capitalize;
+        color: var(--label-color);
+        font: var(--label-font);
+      }
+
+      span {
+        grid-column: span 12;
+        border-bottom: var(--border-dark-color);
+        margin-bottom: var(--margin-default);
+        padding-bottom: var(--padding-narrow);
+        font: var(--input-field-font);
+      }
+      span mwc-icon {
+        vertical-align: middle;
+        font-size: var(--fontsize-large);
+        color: var(--primary-color);
+      }
+
+      input,
+      table,
+      select,
+      textarea,
+      [custom-input] {
+        grid-column: span 12;
+
+        border: var(--input-field-border);
+        border-radius: var(--input-field-border-radius);
+        margin-bottom: var(--margin-default);
+        padding: var(--input-field-padding);
+        font: var(--input-field-font);
+      }
+
+      input[type='checkbox'],
+      input[type='radio'] {
+        place-self: center;
+        margin: 0;
+        grid-column: 1;
+      }
+
+      input[type='checkbox'] + label,
+      input[type='radio'] + label {
+        text-align: left;
+        grid-column: span 11 / auto;
+
+        font: var(--form-sublabel-font);
+        color: var(--form-sublabel-color);
+      }
+
+      input:focus {
+        outline: none;
+        border: 1px solid var(--focus-background-color);
+      }
+
+      @media screen and (max-width: 460px) {
         :host {
-          display: block;
-          background-color: var(--main-section-background-color);
-          height: 100%;
-          min-width: 350px;
-          overflow: auto;
-          position: relative;
-
-          --form-grid-gap: 2px 0;
-          --input-field-padding: var(--padding-default);
-          --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;
-          --mdc-button-horizontal-padding: var(--padding-default);
-        }
-
-        form {
-          display: grid;
-          grid-template-columns: repeat(12, 1fr);
-          grid-gap: var(--form-grid-gap);
-          grid-auto-rows: minmax(24px, auto);
-          padding: var(--padding-wide);
-          align-items: center;
-        }
-
-        [buttons] {
-          grid-column: span 12;
-          padding: var(--padding-default) 0;
-          text-align: right;
-        }
-
-        [buttons] * {
-          margin: 0 0 0 var(--margin-narrow);
-        }
-        [danger] {
-          float: left;
-          margin: 0 var(--margin-narrow) 0 0;
-          --mdc-theme-primary: var(--status-danger-color);
-        }
-
-        fieldset {
-          display: contents;
-        }
-
-        legend {
-          grid-column: span 12;
-          padding: var(--legend-padding);
-          font: var(--legend-font);
-          color: var(--legend-text-color);
-          text-transform: capitalize;
-        }
-
-        label {
-          grid-column: span 12;
-          text-transform: capitalize;
-          color: var(--label-color);
-          font: var(--label-font);
+          width: 100vw;
         }
+      }
+    `
+  ]
 
-        span {
-          grid-column: span 12;
-          border-bottom: var(--border-dark-color);
-          margin-bottom: var(--margin-default);
-          padding-bottom: var(--padding-narrow);
-          font: var(--input-field-font);
-        }
-        span mwc-icon {
-          vertical-align: middle;
-          font-size: var(--fontsize-large);
-          color: var(--primary-color);
-        }
-
-        input,
-        table,
-        select,
-        textarea,
-        [custom-input] {
-          grid-column: span 12;
-
-          border: var(--input-field-border);
-          border-radius: var(--input-field-border-radius);
-          margin-bottom: var(--margin-default);
-          padding: var(--input-field-padding);
-          font: var(--input-field-font);
-        }
-
-        input[type='checkbox'],
-        input[type='radio'] {
-          place-self: center;
-          margin: 0;
-          grid-column: 1;
-        }
-
-        input[type='checkbox'] + label,
-        input[type='radio'] + label {
-          text-align: left;
-          grid-column: span 11 / auto;
-
-          font: var(--form-sublabel-font);
-          color: var(--form-sublabel-color);
-        }
+  @property({ type: String }) groupId?: string
 
-        input:focus {
-          outline: none;
-          border: 1px solid var(--focus-background-color);
-        }
-
-        @media screen and (max-width: 460px) {
-          :host {
-            width: 100vw;
-          }
-        }
-      `
-    ]
-  }
+  @state() group: any
 
   render() {
     var group = this.group || { name: '', description: '' }
@@ -248,5 +245,3 @@ export class GroupInfo extends LitElement {
     history.back()
   }
 }
-
-customElements.define('group-info', GroupInfo)

package/client/viewparts/{menu-tools.js → menu-tools.ts}

@@ -2,86 +2,79 @@ import '@material/mwc-icon'
 import '@operato/i18n/ox-i18n.js'
 
 import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers'
 
-import { store } from '@things-factory/shell'
+import { store } from '@operato/shell'
 
+@customElement('menu-tools')
 export class MenuTools extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      page: String,
-      width: {
-        type: String,
-        reflect: true
-      },
-      editable: Boolean,
-      context: Object
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          background-color: var(--menu-tools-background-color);
-
-          /* for narrow mode */
-          flex-direction: column;
-          width: 100%;
-        }
-
-        :host([width='WIDE']) {
-          /* for wide mode */
-          flex-direction: row;
-          width: initial;
-          height: 100%;
-        }
-
-        ul {
-          display: flex;
-          flex-direction: row;
-
-          margin: auto;
-          padding: 0;
-          list-style: none;
-          height: 100%;
-          overflow: none;
-        }
-
-        :host([width='WIDE']) ul {
-          flex-direction: column;
-        }
-
-        :host([width='WIDE']) li {
-          border-top: 1px solid rgba(255, 255, 255, 0.1);
-          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-        }
-
-        a {
-          display: block;
-          padding: 5px 0px;
-          text-align: center;
-          text-decoration: none;
-          color: var(--menu-tools-color);
-        }
-
-        a[active] {
-          color: var(--menu-tools-active-color);
-          background-color: rgba(0, 0, 0, 0.2);
-        }
-
-        mwc-icon {
-          padding: 5px 15px 0px 15px;
-          vertical-align: bottom;
-        }
-
-        div {
-          font-size: 0.6em;
-        }
-      `
-    ]
-  }
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        background-color: var(--menu-tools-background-color);
+
+        /* for narrow mode */
+        flex-direction: column;
+        width: 100%;
+      }
+
+      :host([width='WIDE']) {
+        /* for wide mode */
+        flex-direction: row;
+        width: initial;
+        height: 100%;
+      }
+
+      ul {
+        display: flex;
+        flex-direction: row;
+
+        margin: auto;
+        padding: 0;
+        list-style: none;
+        height: 100%;
+        overflow: none;
+      }
+
+      :host([width='WIDE']) ul {
+        flex-direction: column;
+      }
+
+      :host([width='WIDE']) li {
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      }
+
+      a {
+        display: block;
+        padding: 5px 0px;
+        text-align: center;
+        text-decoration: none;
+        color: var(--menu-tools-color);
+      }
+
+      a[active] {
+        color: var(--menu-tools-active-color);
+        background-color: rgba(0, 0, 0, 0.2);
+      }
+
+      mwc-icon {
+        padding: 5px 15px 0px 15px;
+        vertical-align: bottom;
+      }
+
+      div {
+        font-size: 0.6em;
+      }
+    `
+  ]
+
+  @property({ type: String }) page?: string
+  @property({ type: String, reflect: true }) width?: string
+  @property({ type: Boolean }) editable?: boolean
+  @property({ type: Object }) context: any
 
   render() {
     return this.context && this.context['board_topmenu']
@@ -140,5 +133,3 @@ export class MenuTools extends connect(store)(LitElement) {
     this.editable = state.permissions?.boardPermissions?.includes('Modeller')
   }
 }
-
-window.customElements.define('menu-tools', MenuTools)

package/client/viewparts/play-group-info.ts

@@ -0,0 +1,249 @@
+import '@material/mwc-icon'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+
+import { fetchPlayGroup } from '../graphql'
+
+@customElement('play-group-info')
+export class PlayGroupInfo extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        background-color: var(--main-section-background-color);
+        height: 100%;
+        min-width: 350px;
+        overflow: auto;
+        position: relative;
+
+        --form-grid-gap: 2px 0;
+        --input-field-padding: var(--padding-default);
+        --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;
+        --mdc-button-horizontal-padding: var(--padding-default);
+      }
+
+      form {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        grid-gap: var(--form-grid-gap);
+        grid-auto-rows: minmax(24px, auto);
+        padding: var(--padding-wide);
+        align-items: center;
+      }
+
+      [buttons] {
+        grid-column: span 12;
+        padding: var(--padding-default) 0;
+        text-align: right;
+      }
+
+      [buttons] * {
+        margin: 0 0 0 var(--margin-narrow);
+      }
+      [danger] {
+        float: left;
+        margin: 0 var(--margin-narrow) 0 0;
+        --mdc-theme-primary: var(--status-danger-color);
+      }
+
+      fieldset {
+        display: contents;
+      }
+
+      legend {
+        grid-column: span 12;
+        padding: var(--legend-padding);
+        font: var(--legend-font);
+        color: var(--legend-text-color);
+        text-transform: capitalize;
+      }
+
+      label {
+        grid-column: span 12;
+        text-transform: capitalize;
+        color: var(--label-color);
+        font: var(--label-font);
+      }
+
+      span {
+        grid-column: span 12;
+        border-bottom: var(--border-dark-color);
+        margin-bottom: var(--margin-default);
+        padding-bottom: var(--padding-narrow);
+        font: var(--input-field-font);
+      }
+      span mwc-icon {
+        vertical-align: middle;
+        font-size: var(--fontsize-large);
+        color: var(--primary-color);
+      }
+
+      input,
+      table,
+      select,
+      textarea,
+      [custom-input] {
+        grid-column: span 12;
+
+        border: var(--input-field-border);
+        border-radius: var(--input-field-border-radius);
+        margin-bottom: var(--margin-default);
+        padding: var(--input-field-padding);
+        font: var(--input-field-font);
+      }
+
+      input[type='checkbox'],
+      input[type='radio'] {
+        place-self: center;
+        margin: 0;
+        grid-column: 1;
+      }
+
+      input[type='checkbox'] + label,
+      input[type='radio'] + label {
+        text-align: left;
+        grid-column: span 11 / auto;
+
+        font: var(--form-sublabel-font);
+        color: var(--form-sublabel-color);
+      }
+
+      input:focus {
+        outline: none;
+        border: 1px solid var(--focus-background-color);
+      }
+
+      @media screen and (max-width: 460px) {
+        :host {
+          width: 100vw;
+        }
+      }
+    `
+  ]
+
+  @property({ type: String }) playGroupId?: string
+
+  @state() playGroup: any
+
+  render() {
+    var playGroup = this.playGroup || { name: '', description: '' }
+
+    return html`
+      <form>
+        <fieldset>
+          <legend>playgroup information</legend>
+          <label>${i18next.t('label.name')}</label>
+          <input type="text" .value=${playGroup.name} @change=${e => (this.playGroup.name = e.target.value)} />
+
+          <label>${i18next.t('label.description')}</label>
+          <input
+            type="text"
+            .value=${playGroup.description}
+            @change=${e => (this.playGroup.description = e.target.value)}
+          />
+
+          <label>${i18next.t('label.creator')}</label>
+          <span>
+            <mwc-icon>person</mwc-icon> ${playGroup.creator && playGroup.creator.name}
+            <mwc-icon>schedule</mwc-icon> ${new Date(Number(playGroup.createdAt)).toLocaleString()}
+          </span>
+
+          <label>${i18next.t('label.updater')}</label>
+          <span>
+            <mwc-icon>person</mwc-icon> ${playGroup.updater && playGroup.updater.name}
+            <mwc-icon>schedule</mwc-icon> ${new Date(Number(playGroup.updatedAt)).toLocaleString()}
+          </span>
+
+          <div buttons>
+            ${this.playGroupId
+              ? html`
+                  <mwc-button
+                    dense
+                    raised
+                    danger
+                    label=${String(i18next.t('button.delete'))}
+                    @click=${this.deletePlayGroup.bind(this)}
+                    icon="delete_outline"
+                  ></mwc-button>
+                  <mwc-button
+                    dense
+                    raised
+                    label=${String(i18next.t('button.save'))}
+                    @click=${this.updateGroup.bind(this)}
+                    icon="done"
+                  ></mwc-button>
+                `
+              : html`
+                  <mwc-button
+                    dense
+                    raised
+                    label=${String(i18next.t('button.create'))}
+                    @click=${this.createPlayGroup.bind(this)}
+                    icon="create_new_folder"
+                  ></mwc-button>
+                `}
+          </div>
+        </fieldset>
+      </form>
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('playGroupId')) {
+      this.refresh()
+    }
+  }
+
+  firstUpdated() {
+    setTimeout(() => {
+      ;(this.renderRoot.querySelector('input[type=text]') as any).focus()
+    }, 100)
+  }
+
+  async refresh() {
+    if (!this.playGroupId) {
+      /* model이 없으므로, 기본 모델을 제공함. */
+      this.playGroup = { name: '', description: '' }
+    } else {
+      var response = await fetchPlayGroup(this.playGroupId)
+      this.playGroup = response.playGroup
+    }
+  }
+
+  async createPlayGroup() {
+    this.dispatchEvent(
+      new CustomEvent('create-play-group', {
+        detail: this.playGroup
+      })
+    )
+
+    this.close()
+  }
+
+  async updateGroup() {
+    this.dispatchEvent(
+      new CustomEvent('update-play-group', {
+        detail: this.playGroup
+      })
+    )
+
+    this.close()
+  }
+
+  async deletePlayGroup() {
+    this.dispatchEvent(
+      new CustomEvent('delete-play-group', {
+        detail: this.playGroup
+      })
+    )
+
+    this.close()
+  }
+
+  close() {
+    history.back()
+  }
+}