@things-factory/board-ui 8.0.5 → 9.0.0-beta.10

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

@@ -1,132 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

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

package/client/viewparts/link-builder.ts

@@ -1,210 +0,0 @@
-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

@@ -1,268 +0,0 @@
-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()
-  }
-}