@things-factory/board-ui 8.0.0 → 9.0.0-beta.3

package/client/viewparts/board-info.ts

@@ -1,85 +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 './board-basic-info'
-import './board-versions'
-import './board-info-link'
-
-@customElement('board-info')
-export class BoardInfo 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: Object }) board?: { id: string; name: string }
-
-  @state() tab: string = 'basic'
-
-  render() {
-    return html`
-      <div tab>
-        <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>
-        <span @click=${() => (this.tab = 'versions')} ?active=${this.tab == 'versions'}>versions</span>
-        <span @click=${() => (this.tab = 'link')} ?active=${this.tab == 'link'}>link</span>
-      </div>
-      <div content>
-        ${this.tab == 'basic'
-          ? html`<board-basic-info boardId=${ifDefined(this.board?.id)}></board-basic-info>`
-          : this.tab == 'versions'
-            ? html`<board-versions boardId=${ifDefined(this.board?.id)}></board-versions>`
-            : html`<board-info-link .board=${this.board}></board-info-link>`}
-      </div>
-    `
-  }
-
-  close() {
-    history.back()
-  }
-}

package/client/viewparts/board-template-builder.ts

@@ -1,134 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-
-import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { ScrollbarStyles } from '@operato/styles'
-import { i18next } from '@operato/i18n'
-import { OxPrompt } from '@operato/popup/ox-prompt.js'
-
-@customElement('board-template-builder')
-export class BoardTemplateBuilder extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        padding: var(--spacing-large);
-
-        /* for narrow mode */
-        flex-direction: column;
-      }
-
-      div[template] {
-        display: grid;
-        position: relative;
-      }
-
-      label {
-        font: var(--label-font);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        text-transform: capitalize;
-      }
-
-      input,
-      select,
-      textarea {
-        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);
-      }
-    `
-  ]
-
-  @property({ type: Object }) board?: { id: string; name: string; description: string }
-
-  @state() visibility?: string = 'private'
-  @state() name?: string = ''
-  @state() description?: string = ''
-
-  render() {
-    const name = this.name || this.board?.name || ''
-    const description = this.description || this.board?.description || ''
-
-    return html`
-      <div template>
-        <h3>
-          <ox-title-with-help topic="board-service/board-template" msgid="label.board-template"
-            >board template</ox-title-with-help
-          >
-        </h3>
-        <label for="name">${i18next.t('field.name')}</label>
-        <input id="name" type="text" .value=${name} @change=${e => (this.name = e.target.value)} />
-
-        <label for="description">${i18next.t('field.description')}</label>
-        <textarea
-          id="description"
-          .value=${this.description}
-          @change=${e => (this.description = e.target.value)}
-        ></textarea>
-
-        <label>${i18next.t('field.visibility')}</label>
-        <select
-          @change=${e => (this.visibility = e.target.value)}
-          placeholder="choose visibility ..."
-          .value=${this.visibility}
-        >
-          <option value="private">${i18next.t('label.visibility-private')}</option>
-          ${window.location.pathname.startsWith('/domain/')
-            ? html` <option value="domain">${i18next.t('label.visibility-domain')}</option> `
-            : nothing}
-          <option value="public">${i18next.t('label.visibility-public')}</option>
-        </select>
-
-        <button @click=${this.registerBoardAsTemplate}>${i18next.t('text.register-template')}</button>
-      </div>
-    `
-  }
-
-  async registerBoardAsTemplate() {
-    if (
-      await OxPrompt.open({
-        title: i18next.t('text.are_you_sure'),
-        text: i18next.t('text.sure_to_x', { x: i18next.t('text.register-template') }),
-        confirmButton: { text: i18next.t('button.confirm') },
-        cancelButton: { text: i18next.t('button.cancel') }
-      })
-    ) {
-      const { id } = this.board || {}
-
-      this.dispatchEvent(
-        new CustomEvent('register-template', {
-          detail: {
-            id,
-            name: this.name || this.board?.name,
-            description: this.description || this.board?.description,
-            visibility: this.visibility
-          },
-          bubbles: true,
-          composed: true
-        })
-      )
-    }
-  }
-}

package/client/viewparts/board-versions.ts

@@ -1,172 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/chips/assist-chip.js'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { client } from '@operato/graphql'
-
-import { privileged } from '@things-factory/auth-base/dist-client'
-
-@customElement('board-versions')
-export class BoardVersions extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: block;
-        background-color: var(--md-sys-color-surface);
-        position: relative;
-        text-align: center;
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        font: var(--label-font);
-      }
-
-      img {
-        display: block;
-
-        margin: auto;
-        max-width: 100%;
-        max-height: 100%;
-        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
-      }
-
-      div[card] {
-        position: relative;
-        margin: var(--spacing-medium);
-        text-align: start;
-        border-bottom: var(--border-dim-color);
-      }
-
-      div[info] {
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-medium);
-      }
-
-      span {
-        margin-left: auto;
-        font: var(--input-field-font);
-        display: flex;
-        align-items: center;
-        gap: 5px;
-      }
-
-      span md-icon {
-        font-variation-settings: 'FILL' 1;
-
-        vertical-align: middle;
-        font-size: var(--fontsize-large);
-        color: var(--md-sys-color-primary);
-      }
-
-      md-assist-chip {
-        position: absolute;
-        right: 3px;
-        top: 3px;
-        opacity: 0.8;
-
-        --md-assist-chip-elevated-container-color: var(--md-sys-color-primary);
-        --md-assist-chip-label-text-color: var(--md-sys-color-on-primary);
-        --md-assist-chip-leading-icon-color: var(--md-sys-color-on-primary);
-      }
-
-      @media screen and (max-width: 460px) {
-        :host {
-          width: 100vw;
-        }
-      }
-    `
-  ]
-
-  @property({ type: String }) boardId?: string
-
-  @state() versions: any[] = []
-
-  render() {
-    return html`
-      ${this.versions.length == 0
-        ? html` ${i18next.t('text.no released version information available')} `
-        : html`
-            ${this.versions.map(
-              version => html`
-                <div card>
-                  <img src=${version.thumbnail} />
-                  <div info>
-                    <md-icon>pin</md-icon> ${version.version}
-                    <span>
-                      <md-icon>person</md-icon> ${(version.updater && version.updater.name) || 'anonymouse'}
-                      <md-icon>schedule</md-icon> ${new Date(version.updatedAt).toLocaleString()}
-                    </span>
-                  </div>
-
-                  ${privileged(
-                    { privilege: 'mutation', category: 'board' },
-                    html`
-                      <md-assist-chip
-                        elevated
-                        label=${String(i18next.t('button.revert-board-version'))}
-                        @click=${() => this.revertBoardVersion(version.version)}
-                      >
-                        <md-icon slot="icon">recycling</md-icon>
-                      </md-assist-chip>
-                    `
-                  )}
-                </div>
-              `
-            )}
-          `}
-    `
-  }
-
-  firstUpdated() {
-    this.refresh()
-  }
-
-  async refresh() {
-    if (!this.boardId) {
-      return
-    }
-
-    var response = (
-      await client.query({
-        query: gql`
-          query FetchBoardVersionsById($id: String!) {
-            boardVersions(id: $id) {
-              id
-              version
-              thumbnail
-              updater {
-                name
-              }
-              updatedAt
-            }
-          }
-        `,
-        variables: { id: this.boardId }
-      })
-    ).data
-
-    this.versions = response.boardVersions
-  }
-
-  revertBoardVersion(version: number) {
-    this.dispatchEvent(
-      new CustomEvent('revert-board-version', {
-        detail: {
-          id: this.boardId,
-          version
-        },
-        bubbles: true,
-        composed: true
-      })
-    )
-
-    this.close()
-  }
-
-  close() {
-    history.back()
-  }
-}

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

@@ -1,267 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/textfield/filled-text-field.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/group.js'
-
-@customElement('group-info-basic')
-export class GroupInfo 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 }) groupId?: string
-
-  @state() group: any = { name: '', description: '' }
-
-  render() {
-    var group = this.group || { name: '', description: '' }
-
-    return html`
-      <form>
-        <fieldset>
-          <legend>group information</legend>
-
-          <md-filled-text-field
-            type="text"
-            label=${String(i18next.t('label.name'))}
-            .value=${group.name}
-            @change=${e => (this.group.name = e.target.value)}
-          ></md-filled-text-field>
-
-          <md-filled-text-field
-            type="text"
-            label=${String(i18next.t('label.description'))}
-            .value=${group.description}
-            @change=${e => (this.group.description = e.target.value)}
-          ></md-filled-text-field>
-
-          <label>${i18next.t('label.creator')}</label>
-          <span>
-            <md-icon>person</md-icon> ${group.creator && group.creator.name} <md-icon>schedule</md-icon> ${new Date(
-              group.createdAt
-            ).toLocaleString()}
-          </span>
-
-          <label>${i18next.t('label.updater')}</label>
-          <span>
-            <md-icon>person</md-icon> ${group.updater && group.updater.name} <md-icon>schedule</md-icon> ${new Date(
-              group.updatedAt
-            ).toLocaleString()}
-          </span>
-
-          <div buttons>
-            ${this.groupId
-              ? html`
-                  <md-elevated-button danger @click=${this.deleteGroup.bind(this)}
-                    ><md-icon slot="icon">delete_outline</md-icon>${i18next.t('button.delete')}</md-elevated-button
-                  >
-                  <md-elevated-button @click=${this.updateGroup.bind(this)}
-                    ><md-icon slot="icon">save</md-icon>${i18next.t('button.save')}</md-elevated-button
-                  >
-                `
-              : html`
-                  <md-elevated-button @click=${this.createGroup.bind(this)}
-                    ><md-icon slot="icon">create_new_folder</md-icon>${i18next.t('button.create')}</md-elevated-button
-                  >
-                `}
-          </div>
-        </fieldset>
-      </form>
-    `
-  }
-
-  updated(changes) {
-    if (changes.has('groupId')) {
-      this.refresh()
-    }
-  }
-
-  firstUpdated() {
-    setTimeout(() => {
-      ;(this.renderRoot.querySelector('[type=text]') as any).focus()
-    }, 100)
-  }
-
-  async refresh() {
-    if (!this.groupId) {
-      /* model이 없으므로, 기본 모델을 제공함. */
-      this.group = { name: '', description: '' }
-    } else {
-      var response = await fetchGroup(this.groupId)
-      this.group = response.group
-    }
-  }
-
-  async createGroup() {
-    this.dispatchEvent(
-      new CustomEvent('create-group', {
-        detail: this.group,
-        bubbles: true,
-        composed: true
-      })
-    )
-
-    this.close()
-  }
-
-  async updateGroup() {
-    this.dispatchEvent(
-      new CustomEvent('update-group', {
-        detail: this.group,
-        bubbles: true,
-        composed: true
-      })
-    )
-
-    this.close()
-  }
-
-  async deleteGroup() {
-    this.dispatchEvent(
-      new CustomEvent('delete-group', {
-        detail: this.group,
-        bubbles: true,
-        composed: true
-      })
-    )
-
-    this.close()
-  }
-
-  close() {
-    history.back()
-  }
-}