@things-factory/board-ui 8.0.0-beta.9 → 8.0.2

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

@@ -0,0 +1,132 @@
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+import '@operato/input/ox-input-file.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+
+import { fetchGroup } from '../graphql'
+
+@customElement('group-info-import')
+export class GroupInfoImport extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-sys-color-surface);
+        height: 100%;
+        min-width: 360px;
+        overflow: auto;
+        position: relative;
+
+        --form-grid-gap: 2px 0;
+        --input-field-padding: var(--spacing-medium);
+        --legend-padding: var(--spacing-medium) 0 var(--spacing-small) 0;
+      }
+
+      [buttons] {
+        grid-column: span 12;
+        padding: var(--spacing-medium) 0;
+        text-align: right;
+
+        display: flex;
+        gap: var(--spacing-small);
+        align-items: center;
+      }
+
+      [buttons] md-elevated-button {
+        margin-left: auto;
+      }
+
+      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, var(--md-sys-color-secondary));
+      }
+
+      div[import] {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        padding: var(--spacing-large);
+        align-items: stretch;
+      }
+
+      @media screen and (max-width: 460px) {
+        :host {
+          width: 100vw;
+        }
+      }
+    `
+  ]
+
+  @property({ type: String }) groupId?: string
+
+  @state() group: any
+
+  @query('ox-input-file') fileUploader: any
+  @query('input[type=checkbox]') overwrite: any
+
+  render() {
+    var group = this.group || { name: '', description: '' }
+
+    return html`
+      ${this.groupId
+        ? html`
+            <div import>
+              <ox-input-file accept="*/*" multiple="true"></ox-input-file>
+
+              <div buttons>
+                <label> <input type="checkbox" name="overwrite" checked />&nbsp;overwrite </label>
+                <md-elevated-button @click=${this.importBoard.bind(this)}
+                  ><md-icon slot="icon">publish</md-icon>${i18next.t('button.import-board')}</md-elevated-button
+                >
+              </div>
+            </div>
+          `
+        : html``}
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('groupId')) {
+      this.refresh()
+    }
+  }
+
+  async refresh() {
+    if (!this.groupId) {
+      /* model이 없으므로, 기본 모델을 제공함. */
+      this.group = { name: '', description: '' }
+    } else {
+      var response = await fetchGroup(this.groupId)
+      this.group = response.group
+    }
+  }
+
+  async importBoard() {
+    this.dispatchEvent(
+      new CustomEvent('import-boards', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          group: this.group,
+          files: this.fileUploader.files,
+          overwrite: this.overwrite.checked
+        }
+      })
+    )
+
+    this.close()
+  }
+
+  close() {
+    history.back()
+  }
+}

package/client/viewparts/group-info.ts

@@ -0,0 +1,87 @@
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+
+import { ScrollbarStyles } from '@operato/styles'
+import { privileged } from '@things-factory/auth-base/dist-client'
+
+import './group-info-basic'
+import './group-info-import'
+
+@customElement('group-info')
+export class GroupInfo extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        height: 100%;
+        min-width: 360px;
+
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        background-color: var(--md-sys-color-surface);
+      }
+
+      [tab] {
+        width: 100%;
+        display: flex;
+      }
+
+      [tab] > * {
+        flex: 1;
+      }
+
+      [content] {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      span {
+        padding: 5px 4px 1px;
+        font: var(--group-bar-textbutton);
+        background-color: var(--md-sys-color-secondary);
+        color: rgba(255, 255, 255, 0.8);
+        text-align: center;
+        text-transform: uppercase;
+      }
+
+      span[active] {
+        background-color: var(--md-sys-color-primary);
+      }
+
+      @media screen and (max-width: 460px) {
+        :host {
+          width: 100vw;
+        }
+      }
+    `
+  ]
+
+  @property({ type: String }) groupId?: string
+
+  @state() tab: string = 'basic'
+
+  render() {
+    return html`
+      ${privileged(
+        { privilege: 'mutation', category: 'board' },
+        html`
+          <div tab>
+            <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>
+            <span @click=${() => (this.tab = 'import')} ?active=${this.tab == 'import'}>import</span>
+          </div>
+        `
+      )}
+      <div content>
+        ${this.tab == 'basic'
+          ? html`<group-info-basic groupId=${ifDefined(this.groupId)}></group-info-basic>`
+          : html`<group-info-import groupId=${ifDefined(this.groupId)}></group-info-import>`}
+      </div>
+    `
+  }
+
+  close() {
+    history.back()
+  }
+}

package/client/viewparts/index.ts

@@ -0,0 +1,3 @@
+export * from './board-info'
+export * from './group-info'
+export * from './play-group-info'

package/client/viewparts/link-builder.ts

@@ -0,0 +1,210 @@
+import '@material/web/icon/icon.js'
+import '@operato/i18n/ox-i18n.js'
+import '@operato/input/ox-input-key-values.js'
+
+import gql from 'graphql-tag'
+import Clipboard from 'clipboard'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { client } from '@operato/graphql'
+import { ScrollbarStyles } from '@operato/styles'
+import { i18next } from '@operato/i18n'
+
+import { hasPrivilege, privileged } from '@things-factory/auth-base/dist-client'
+
+@customElement('link-builder')
+export class LinkBuilder extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        padding: var(--spacing-large);
+        color: var(--md-sys-color-primary);
+
+        /* for narrow mode */
+        flex-direction: column;
+      }
+
+      div[link] {
+        display: grid;
+        position: relative;
+      }
+
+      label {
+        font: var(--label-font);
+        text-transform: capitalize;
+      }
+
+      input,
+      select,
+      textarea,
+      ox-input-key-values {
+        border: var(--border-dim-color);
+        border-radius: var(--border-radius);
+        margin: var(--input-margin);
+        padding: var(--input-padding);
+        font: var(--input-font);
+        flex: 1 1 0%;
+      }
+
+      textarea {
+        min-height: 132px;
+        resize: none;
+      }
+
+      select:focus,
+      input:focus,
+      textarea:focus,
+      button {
+        outline: none;
+      }
+
+      button:hover {
+        border: var(--button-activ-border);
+        box-shadow: var(--button-active-box-shadow);
+      }
+
+      [button-in-field] {
+        position: absolute;
+        top: 64px;
+        right: 6px;
+
+        background-color: var(--md-sys-color-surface);
+        opacity: 0.8;
+        color: var(--md-sys-color-primary);
+      }
+
+      [warn] {
+        color: var(--status-warning-color, red);
+      }
+    `
+  ]
+
+  @property({ type: String, attribute: true }) command?: string
+  @property({ type: String, attribute: 'target-id' }) targetId?: string
+  @property({ type: String, attribute: 'target-name' }) targetName?: string
+
+  @state() link?: string
+  @state() keyvalues: any
+  @state() appliances: any[] = []
+  @state() targetAppliance: any
+  @state() key?: string
+  @state() byname: boolean = false
+
+  private clipboard?: Clipboard
+
+  render() {
+    return html`
+      <div link>
+        <h3>
+          <ox-title-with-help topic="operato-board/headless-link" msgid="label.headless-link"
+            >headless-link</ox-title-with-help
+          >
+        </h3>
+        <textarea id="link" .value=${this.link || ''} readonly></textarea>
+        <md-icon button-in-field clipboard-copy>content_copy</md-icon>
+        <label for="key">${i18next.t('label.headless-link query-key')}</label>
+        <input id="key" type="text" .value=${this.key || ''} @change=${e => (this.key = e.target.value)} />
+        <label>${i18next.t('label.headless-link query-parameters')}</label>
+        <ox-input-key-values @change=${e => (this.keyvalues = e.detail)}></ox-input-key-values>
+        <label>${i18next.t('label.headless-link target-appliance')}</label>
+
+        ${privileged(
+          { privilege: 'query', category: 'security', superUserGranted: true, domainOwnerGranted: true },
+          html`
+            <select
+              @change=${e => (this.targetAppliance = this.appliances.find(appliance => appliance.id == e.target.value))}
+              placeholder="choose appliance ..."
+              .value=${this.targetAppliance?.id}
+            >
+              <option value=""></option>
+              ${this.appliances.map(
+                appliance => html`
+                  <option .value=${appliance.id} ?selected=${appliance.id == this.targetAppliance?.id}>
+                    ${appliance.name}
+                  </option>
+                `
+              )}
+            </select>
+          `,
+          html`
+            <span warn>To add an access token, you need to be a domain owner or have security query permissions.</span>
+          `
+        )}
+
+        <div>
+          <input
+            type="checkbox"
+            id="by-name"
+            @change=${(e: Event) => (this.byname = !!(e.target as HTMLInputElement)?.checked)}
+          />
+          <label for="by-name">${i18next.t('label.headless-link by-name')}</label>
+        </div>
+      </div>
+    `
+  }
+
+  firstUpdated() {
+    const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]')
+
+    this.clipboard = new Clipboard(copybuttons, {
+      target: (trigger => trigger.parentElement.querySelector('textarea')) as any
+    })
+
+    this.getAppliances()
+  }
+
+  updated(changes: PropertyValues<this>) {
+    const command = (this.command || '') + (this.byname ? '-by-name' : '')
+    const target = encodeURIComponent((this.byname ? this.targetName : this.targetId) || '')
+
+    const baseUrl = document.querySelector('base')?.href
+    const fullUrl = new URL(command + '/' + target, baseUrl).href
+
+    const query = {
+      ...(this.key ? { [this.key]: JSON.stringify(this.keyvalues) } : this.keyvalues),
+      ...(this.targetAppliance ? { access_token: this.targetAppliance?.accessToken } : {})
+    }
+
+    const queryString = this.objectToQueryString(query)
+
+    this.link = fullUrl + (queryString ? '?' + queryString : '')
+  }
+
+  objectToQueryString(obj) {
+    return Object.keys(obj)
+      .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
+      .join('&')
+  }
+
+  async getAppliances() {
+    this.appliances = []
+    this.targetAppliance = null
+
+    if (
+      await hasPrivilege({ privilege: 'query', category: 'security', superUserGranted: true, domainOwnerGranted: true })
+    ) {
+      var response = (
+        await client.query({
+          query: gql`
+            query {
+              appliances {
+                items {
+                  id
+                  name
+                  description
+                  accessToken
+                }
+              }
+            }
+          `
+        })
+      ).data
+
+      this.appliances = response.appliances.items
+    }
+  }
+}

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

@@ -0,0 +1,268 @@
+import '@material/web/icon/icon.js'
+import '@material/web/textfield/filled-text-field.js'
+import '@material/web/button/elevated-button.js'
+
+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-basic')
+export class PlayGroupInfoBasic extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-sys-color-surface);
+        height: 100%;
+        min-width: 360px;
+        overflow: auto;
+        position: relative;
+
+        --form-grid-gap: 2px 0;
+        --input-field-padding: var(--spacing-medium);
+        --legend-padding: var(--spacing-medium) 0 var(--spacing-small) 0;
+      }
+
+      form {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        grid-gap: var(--form-grid-gap);
+        grid-auto-rows: minmax(24px, auto);
+        padding: var(--spacing-large);
+        align-items: center;
+      }
+
+      md-filled-text-field {
+        grid-column: span 12;
+        padding: 10px 0;
+      }
+
+      [buttons] {
+        grid-column: span 12;
+        padding: var(--spacing-medium) 0;
+        text-align: right;
+
+        display: flex;
+        gap: var(--spacing-small);
+        align-items: center;
+      }
+
+      [buttons] * {
+        margin: 0 0 0 auto;
+      }
+
+      [danger] {
+        float: left;
+        margin: 0;
+        --md-elevated-button-icon-color: var(--md-sys-color-on-error);
+        --md-elevated-button-label-text-color: var(--md-sys-color-on-error);
+        --md-elevated-button-container-color: var(--md-sys-color-error);
+      }
+
+      fieldset {
+        display: contents;
+      }
+
+      legend {
+        grid-column: span 12;
+        padding: var(--legend-padding);
+        font: var(--legend-font);
+        color: var(--md-sys-color-primary);
+        text-transform: capitalize;
+      }
+
+      label {
+        grid-column: span 12;
+        text-transform: capitalize;
+        color: var(--md-sys-color-primary);
+        font: var(--label-font);
+      }
+
+      span {
+        grid-column: span 12;
+        border-bottom: var(--border-dim-color);
+        margin-bottom: var(--spacing-medium);
+        padding-bottom: var(--spacing-small);
+        font: var(--input-field-font);
+      }
+      span md-icon {
+        font-variation-settings: 'FILL' 1;
+
+        vertical-align: middle;
+        font-size: var(--fontsize-large);
+        color: var(--md-sys-color-primary);
+      }
+
+      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(--spacing-medium);
+        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(--md-sys-color-secondary);
+      }
+
+      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 = { name: '', description: '' }
+
+  private link?: string
+
+  render() {
+    var playGroup = this.playGroup || { name: '', description: '' }
+
+    return html`
+      <form>
+        <fieldset>
+          <legend>playgroup information</legend>
+          <md-filled-text-field
+            type="text"
+            label=${String(i18next.t('label.name'))}
+            .value=${playGroup.name || ''}
+            @change=${e => (this.playGroup.name = e.target.value)}
+          ></md-filled-text-field>
+
+          <md-filled-text-field
+            type="text"
+            label=${String(i18next.t('label.description'))}
+            .value=${playGroup.description || ''}
+            @change=${e => (this.playGroup.description = e.target.value)}
+          ></md-filled-text-field>
+
+          <label>${i18next.t('label.creator')}</label>
+          <span>
+            <md-icon>person</md-icon> ${playGroup.creator && playGroup.creator.name}
+            <md-icon>schedule</md-icon> ${new Date(playGroup.createdAt).toLocaleString()}
+          </span>
+
+          <label>${i18next.t('label.updater')}</label>
+          <span>
+            <md-icon>person</md-icon> ${playGroup.updater && playGroup.updater.name}
+            <md-icon>schedule</md-icon> ${new Date(playGroup.updatedAt).toLocaleString()}
+          </span>
+
+          <div buttons>
+            ${this.playGroupId
+              ? html`
+                  <md-elevated-button danger @click=${this.deletePlayGroup.bind(this)}
+                    ><md-icon slot="icon">delete_outline</md-icon>${String(
+                      i18next.t('button.delete')
+                    )}</md-elevated-button
+                  >
+                  <md-elevated-button @click=${this.updateGroup.bind(this)}
+                    ><md-icon slot="icon">save</md-icon>${String(i18next.t('button.save'))}</md-elevated-button
+                  >
+                `
+              : html`
+                  <md-elevated-button @click=${this.createPlayGroup.bind(this)}
+                    ><md-icon slot="icon">create_new_folder</md-icon>${String(
+                      i18next.t('button.create')
+                    )}</md-elevated-button
+                  >
+                `}
+          </div>
+        </fieldset>
+      </form>
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('playGroupId')) {
+      this.refresh()
+    }
+  }
+
+  firstUpdated() {
+    setTimeout(() => {
+      ;(this.renderRoot.querySelector('[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,
+        bubbles: true,
+        composed: true
+      })
+    )
+
+    this.close()
+  }
+
+  async updateGroup() {
+    this.dispatchEvent(
+      new CustomEvent('update-play-group', {
+        detail: this.playGroup,
+        bubbles: true,
+        composed: true
+      })
+    )
+
+    this.close()
+  }
+
+  async deletePlayGroup() {
+    this.dispatchEvent(
+      new CustomEvent('delete-play-group', {
+        detail: this.playGroup,
+        bubbles: true,
+        composed: true
+      })
+    )
+
+    this.close()
+  }
+
+  close() {
+    history.back()
+  }
+}