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

package/client/viewparts/board-info.ts

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

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

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

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