@things-factory/operato-board 6.1.145 → 6.1.147

package/dist-client/viewparts/board-basic-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-basic-info.js","sourceRoot":"","sources":["../../client/viewparts/board-basic-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { i18next } from '@operato/i18n'\nimport { client } from '@operato/graphql'\nimport { navigate, store } from '@operato/shell'\n\n@customElement('board-basic-info')\nexport class BoardInfo extends connect(store)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        background-color: var(--main-section-background-color);\n        position: relative;\n\n        --form-grid-gap: 2px 0;\n        --input-field-padding: var(--padding-default);\n        --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;\n        --mdc-button-horizontal-padding: var(--padding-default);\n      }\n\n      img {\n        display: block;\n\n        margin: auto;\n        max-width: 100%;\n        max-height: 100%;\n        border-bottom: 2px solid rgba(0, 0, 0, 0.1);\n      }\n\n      form {\n        display: grid;\n        grid-template-columns: repeat(12, 1fr);\n        grid-gap: var(--form-grid-gap);\n        grid-auto-rows: minmax(24px, auto);\n        padding: var(--padding-wide);\n        align-items: center;\n      }\n\n      [buttons] {\n        grid-column: span 12;\n        padding: var(--padding-default) 0;\n        text-align: right;\n      }\n\n      [buttons] * {\n        margin: 0 0 0 var(--margin-narrow);\n      }\n\n      [danger] {\n        float: left;\n        margin: 0 var(--margin-narrow) 0 0;\n        --mdc-theme-primary: var(--status-danger-color);\n      }\n\n      fieldset {\n        display: contents;\n      }\n\n      legend {\n        grid-column: span 12;\n        padding: var(--legend-padding);\n        font: var(--legend-font);\n        color: var(--legend-text-color);\n        text-transform: capitalize;\n      }\n\n      label {\n        grid-column: span 12;\n        text-transform: capitalize;\n        color: var(--label-color);\n        font: var(--label-font);\n      }\n\n      span {\n        grid-column: span 12;\n        border-bottom: var(--border-dark-color);\n        margin-bottom: var(--margin-default);\n        padding-bottom: var(--padding-narrow);\n        font: var(--input-field-font);\n      }\n\n      span[state] {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      span mwc-icon {\n        vertical-align: middle;\n        font-size: var(--fontsize-large);\n        color: var(--primary-color);\n      }\n\n      input,\n      table,\n      select,\n      textarea,\n      [custom-input] {\n        grid-column: span 12;\n\n        border: var(--input-field-border);\n        border-radius: var(--input-field-border-radius);\n        margin-bottom: var(--margin-default);\n        padding: var(--input-field-padding);\n        font: var(--input-field-font);\n      }\n\n      mwc-icon[tail] {\n        margin-bottom: var(--margin-default);\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        place-self: center;\n        margin: 0;\n        grid-column: 1;\n      }\n\n      input[type='checkbox'] + label,\n      input[type='radio'] + label {\n        text-align: left;\n        grid-column: span 11 / auto;\n\n        font: var(--form-sublabel-font);\n        color: var(--form-sublabel-color);\n      }\n\n      input:focus {\n        outline: none;\n        border: 1px solid var(--focus-background-color);\n      }\n\n      div[fullwidth] {\n        grid-column: span 12 / auto;\n        border-bottom: var(--border-dark-color);\n\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        gap: var(--margin-default);\n      }\n\n      div[oneline] {\n        grid-column: span 12 / auto;\n\n        display: flex;\n        align-items: center;\n        gap: var(--margin-default);\n      }\n\n      div[oneline] input {\n        flex: 1;\n      }\n\n      div[oneline] select {\n        flex: 1;\n      }\n\n      div[oneline] mwc-button {\n        margin-bottom: var(--margin-default);\n      }\n\n      mwc-button[right] {\n        margin-left: auto;\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          width: 100vw;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) boardId?: string\n  @property({ type: String }) groupId?: string\n  @property({ type: Boolean, attribute: 'enable-modeller' }) enableModeller?: boolean\n\n  @state() board: any\n  @state() boardGroupList: any[] = []\n  @state() playGroupList: any[] = []\n  @state() showTarget: boolean = false\n  @state() subdomain?: string\n\n  @state() targetDomains: { id: string; name: string; subdomain: string }[] = []\n  @state() targetGroups: { id: string; name: string }[] = []\n  @state() targetSubdomain?: string\n  @state() targetGroupId?: string\n\n  private original: any\n\n  render() {\n    var board = this.board || { name: '', description: '', playGroups: [] }\n    var boardGroupList = this.boardGroupList || []\n    var playGroupList = (this.playGroupList || []).map(group => {\n      return {\n        ...group,\n        checked: false\n      }\n    })\n    ;(board.playGroups || []).map(group => {\n      var playGroup = playGroupList.find(g => g.id == group.id)\n      if (playGroup) {\n        playGroup.checked = true\n      }\n    })\n\n    return html`\n      ${board.thumbnail ? html` <img src=${board.thumbnail} /> ` : html``}\n\n      <form>\n        <fieldset>\n          <legend>${i18next.t('label.information')}</legend>\n          <label>${i18next.t('label.name')}</label>\n          <div oneline>\n            <input\n              type=\"text\"\n              .value=${board.name}\n              @change=${e => (this.board = { ...this.board, name: e.target.value })}\n              ?disabled=${!this.enableModeller}\n            />\n            ${this.enableModeller\n              ? html`\n                  <mwc-icon\n                    @click=${() => {\n                      this.showTarget = !this.showTarget\n                    }}\n                    tail\n                    >${this.showTarget ? 'arrow_drop_up' : 'arrow_drop_down'}</mwc-icon\n                  >\n                `\n              : html``}\n          </div>\n          ${this.showTarget\n            ? html`\n                <div fullwidth target>\n                  <label>${i18next.t('label.board-copy')}</label>\n                  <div oneline>\n                    <select\n                      @change=${e => {\n                        this.targetSubdomain = e.target.value\n                        this.getGroupsByDomain(this.targetSubdomain)\n                      }}\n                      placeholder=\"choose domain ...\"\n                      .value=${this.targetSubdomain}\n                      ?disabled=${!this.enableModeller}\n                    >\n                      <option value=\"\"></option>\n                      ${this.targetDomains.map(\n                        domain =>\n                          html`\n                            <option .value=${domain.subdomain} ?selected=${domain.subdomain == this.targetSubdomain}>\n                              ${domain.name}\n                            </option>\n                          `\n                      )}\n                    </select>\n\n                    <select\n                      @change=${e => (this.targetGroupId = e.target.value)}\n                      placeholder=\"choose group ...\"\n                      .value=${this.targetGroupId}\n                      ?disabled=${!this.enableModeller}\n                    >\n                      <option value=\"\"></option>\n                      ${this.targetGroups.map(\n                        group =>\n                          html`\n                            <option .value=${group.id} ?selected=${group.id == this.targetGroupId}>\n                              ${group.name}\n                            </option>\n                          `\n                      )}\n                    </select>\n                  </div>\n                  <div oneline>\n                    <mwc-button\n                      dense\n                      raised\n                      label=${String(i18next.t('button.copy'))}\n                      ?disabled=${!this.enableModeller ||\n                      !this.original?.name ||\n                      !this.board.name ||\n                      !this.targetSubdomain ||\n                      (this.original.name == this.board.name && this.subdomain == this.targetSubdomain)}\n                      @click=${this.cloneBoard.bind(this)}\n                      icon=\"content_copy\"\n                      right\n                    ></mwc-button>\n                    <mwc-button\n                      dense\n                      raised\n                      label=${String(i18next.t('button.export'))}\n                      @click=${this.exportBoard.bind(this)}\n                      icon=\"download\"\n                    ></mwc-button>\n                  </div>\n                </div>\n              `\n            : html``}\n\n          <label>${i18next.t('label.description')}</label>\n          <input\n            type=\"text\"\n            .value=${board.description}\n            @change=${e => (this.board = { ...this.board, description: e.target.value })}\n            ?disabled=${!this.enableModeller}\n          />\n\n          <label>${i18next.t('label.group')}</label>\n          <select\n            @change=${e => (this.board = { ...this.board, groupId: e.target.value })}\n            .value=${this.groupId || ''}\n            ?disabled=${!this.enableModeller}\n          >\n            <option value=\"\" ?selected=${'' == this.groupId}></option>\n            ${boardGroupList.map(\n              item => html` <option .value=${item.id} ?selected=${item.id == this.groupId}>${item.name}</option> `\n            )}\n          </select>\n          <label>${i18next.t('label.creator')}</label>\n          <span>\n            <mwc-icon>person</mwc-icon> ${(board.creator && board.creator.name) || 'anonymous'}\n            <mwc-icon>schedule</mwc-icon> ${new Date(Number(board.createdAt)).toLocaleString()}\n          </span>\n\n          <label>${i18next.t('label.updater')}</label>\n          <span>\n            <mwc-icon>person</mwc-icon> ${(board.updater && board.updater.name) || 'anonymouse'}\n            <mwc-icon>schedule</mwc-icon> ${new Date(Number(board.updatedAt)).toLocaleString()}\n          </span>\n\n          <label>${i18next.t('label.state')}</label>\n          <span state>\n            <div oneline>\n              <mwc-icon>signpost</mwc-icon> ${(board.state || '').toUpperCase()}\n              <mwc-icon>pin</mwc-icon> ${board.version}\n            </div>\n            <mwc-button\n              dense\n              raised\n              label=${String(i18next.t('button.release'))}\n              ?disabled=${!this.enableModeller || !this.isReleasable}\n              @click=${this.releaseBoard.bind(this)}\n              icon=\"new_releases\"\n            ></mwc-button>\n          </span>\n\n          <div buttons>\n            <mwc-button\n              dense\n              raised\n              danger\n              label=${String(i18next.t('button.delete'))}\n              ?disabled=${!this.enableModeller}\n              @click=${this.deleteBoard.bind(this)}\n              icon=\"delete_outline\"\n            ></mwc-button>\n            <mwc-button\n              dense\n              raised\n              label=${String(i18next.t('button.save'))}\n              ?disabled=${!this.enableModeller}\n              @click=${this.updateBoard.bind(this)}\n              icon=\"save\"\n            ></mwc-button>\n            <mwc-button\n              dense\n              raised\n              label=${String(i18next.t('button.edit'))}\n              ?disabled=${!this.enableModeller}\n              @click=${() => navigate(`${'board-modeller/' + this.boardId}`)}\n              icon=\"drive_file_rename_outline\"\n            ></mwc-button>\n          </div>\n        </fieldset>\n\n        <fieldset>\n          <legend>${i18next.t('label.play-group')}</legend>\n\n          ${playGroupList.map(\n            item => html`\n              <input\n                type=\"checkbox\"\n                value=${item.id}\n                .checked=${item.checked}\n                @change=${e => {\n                  e.target.checked ? this.joinPlayGroup(item) : this.leavePlayGroup(item)\n                }}\n              />\n              <label>${item.name}</label>\n            `\n          )}\n        </fieldset>\n      </form>\n    `\n  }\n\n  stateChanged(state) {\n    this.subdomain = state.app?.domain?.subdomain\n    this.targetSubdomain = this.targetSubdomain ?? this.subdomain\n  }\n\n  firstUpdated() {\n    this.refresh()\n  }\n\n  async refresh() {\n    var response = (\n      await client.query({\n        query: gql`\n          query FetchBoardById($id: String!) {\n            board(id: $id) {\n              id\n              name\n              description\n              group {\n                id\n                name\n              }\n              playGroups {\n                id\n                name\n              }\n              thumbnail\n              createdAt\n              creator {\n                id\n                name\n              }\n              state\n              version\n              updatedAt\n              updater {\n                id\n                name\n              }\n            }\n\n            groups {\n              items {\n                id\n                name\n                description\n              }\n            }\n\n            playGroups {\n              items {\n                id\n                name\n                description\n              }\n              total\n            }\n\n            domainsWithPrivilege(name: \"mutation\", category: \"board\") {\n              name\n              subdomain\n            }\n          }\n        `,\n        variables: { id: this.boardId }\n      })\n    ).data\n\n    this.board = response.board\n    this.boardGroupList = response.groups.items\n    this.playGroupList = response.playGroups.items\n\n    this.original = { ...this.board }\n\n    this.groupId = this.board.group?.id\n\n    this.targetDomains = response.domainsWithPrivilege\n    this.targetGroups = response.groups.items\n    this.targetGroupId = this.groupId\n  }\n\n  async getGroupsByDomain(subdomain?: string) {\n    this.targetGroups = []\n    this.targetGroupId = ''\n\n    if (!subdomain) {\n      return\n    }\n\n    var response = (\n      await client.query({\n        query: gql`\n          query {\n            groups {\n              items {\n                id\n                name\n                description\n              }\n            }\n          }\n        `,\n        variables: { id: this.boardId },\n        context: {\n          headers: {\n            'x-things-factory-domain': subdomain\n          }\n        }\n      })\n    ).data\n\n    this.targetGroups = response.groups.items\n  }\n\n  get isReleasable() {\n    if (!this.board || this.board.state == 'released') {\n      return false\n    }\n\n    const { name, description, groupId } = this.board\n\n    return (\n      this.original &&\n      this.original.name == name &&\n      this.original.description == description &&\n      this.original.groupId == groupId\n    )\n  }\n\n  async cloneBoard() {\n    if (!this.original.name || (this.board.name == this.original.name && this.subdomain == this.targetSubdomain)) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: i18next.t('error.name must be unique from the original board', { name: this.original.name })\n          }\n        })\n      )\n\n      return\n    }\n\n    const { id, name, description } = this.board\n\n    this.dispatchEvent(\n      new CustomEvent('clone-board', {\n        detail: {\n          id,\n          name,\n          description,\n          targetSubdomain: this.targetSubdomain,\n          targetGroupId: this.targetGroupId\n        },\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    this.close()\n  }\n\n  async exportBoard() {\n    const json = JSON.stringify(this.board, null, 2)\n\n    const link = document.createElement('a')\n\n    link.setAttribute('href', encodeURI('data:application/json;charset=utf-8,' + json))\n    link.setAttribute('download', `${this.board.name}.json`)\n\n    document.body.appendChild(link)\n    link.click()\n    document.body.removeChild(link)\n  }\n\n  async releaseBoard() {\n    const { id } = this.board\n\n    this.dispatchEvent(\n      new CustomEvent('release-board', {\n        detail: {\n          id\n        },\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    this.close()\n  }\n\n  async updateBoard() {\n    this.dispatchEvent(\n      new CustomEvent('update-board', {\n        detail: this.board,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    this.close()\n  }\n\n  async deleteBoard() {\n    // TODO 삭제하려는 보드이름을 입력하게 해서, 한번 더 확인할 것.\n    this.dispatchEvent(\n      new CustomEvent('delete-board', {\n        detail: this.board,\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    this.close()\n  }\n\n  async joinPlayGroup(group) {\n    this.dispatchEvent(\n      new CustomEvent('join-playgroup', {\n        detail: {\n          board: this.board,\n          playGroup: group\n        },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  async leavePlayGroup(group) {\n    this.dispatchEvent(\n      new CustomEvent('leave-playgroup', {\n        detail: {\n          board: this.board,\n          playGroup: group\n        },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}

package/dist-client/viewparts/board-info.d.ts

@@ -1,23 +1,12 @@
 import '@material/mwc-icon';
 import { LitElement } from 'lit';
+import './board-basic-info';
+import './board-versions';
 export declare class BoardInfo extends LitElement {
     static styles: import("lit").CSSResult[];
     boardId?: string;
-    groupId?: string;
     enableModeller?: boolean;
-    board: any;
-    boardGroupList: any[];
-    playGroupList: any[];
-    private original;
+    tab: string;
     render(): import("lit-html").TemplateResult<1>;
-    firstUpdated(): void;
-    refresh(): Promise<void>;
-    get isReleasable(): any;
-    cloneBoard(): Promise<void>;
-    releaseBoard(): Promise<void>;
-    updateBoard(): Promise<void>;
-    deleteBoard(): Promise<void>;
-    joinPlayGroup(group: any): Promise<void>;
-    leavePlayGroup(group: any): Promise<void>;
     close(): void;
 }

package/dist-client/viewparts/board-info.js

@@ -1,417 +1,71 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/mwc-icon';
-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 { navigate } from '@operato/shell';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { ScrollbarStyles } from '@operato/styles';
+import './board-basic-info';
+import './board-versions';
 let BoardInfo = class BoardInfo extends LitElement {
     constructor() {
         super(...arguments);
-        this.boardGroupList = [];
-        this.playGroupList = [];
+        this.tab = 'basic';
     }
     render() {
-        var _a;
-        var board = this.board || { name: '', description: '', playGroups: [] };
-        var boardGroupList = this.boardGroupList || [];
-        var playGroupList = (this.playGroupList || []).map(group => {
-            return Object.assign(Object.assign({}, group), { checked: false });
-        });
-        (board.playGroups || []).map(group => {
-            var playGroup = playGroupList.find(g => g.id == group.id);
-            if (playGroup) {
-                playGroup.checked = true;
-            }
-        });
         return html `
-      ${board.thumbnail ? html ` <img src=${board.thumbnail} /> ` : html ``}
-
-      <form>
-        <fieldset>
-          <legend>${i18next.t('label.information')}</legend>
-          <label>${i18next.t('label.name')}</label>
-          <div oneline>
-            <input
-              type="text"
-              .value=${board.name}
-              @change=${e => (this.board = Object.assign(Object.assign({}, this.board), { name: e.target.value }))}
-              ?disabled=${!this.enableModeller}
-            />
-            <mwc-button
-              dense
-              raised
-              label=${String(i18next.t('button.copy'))}
-              ?disabled=${!this.enableModeller || !((_a = this.original) === null || _a === void 0 ? void 0 : _a.name) || this.original.name == this.board.name}
-              @click=${this.cloneBoard.bind(this)}
-              icon="content_copy"
-            ></mwc-button>
-          </div>
-
-          <label>${i18next.t('label.description')}</label>
-          <input
-            type="text"
-            .value=${board.description}
-            @change=${e => (this.board = Object.assign(Object.assign({}, this.board), { description: e.target.value }))}
-            ?disabled=${!this.enableModeller}
-          />
-
-          <label>${i18next.t('label.group')}</label>
-          <select
-            @change=${e => (this.board = Object.assign(Object.assign({}, this.board), { groupId: e.target.value }))}
-            .value=${this.groupId || ''}
-            ?disabled=${!this.enableModeller}
-          >
-            <option value="" ?selected=${'' == this.groupId}></option>
-            ${boardGroupList.map(item => html ` <option .value=${item.id} ?selected=${item.id == this.groupId}>${item.name}</option> `)}
-          </select>
-          <label>${i18next.t('label.creator')}</label>
-          <span>
-            <mwc-icon>person</mwc-icon> ${(board.creator && board.creator.name) || 'anonymous'}
-            <mwc-icon>schedule</mwc-icon> ${new Date(Number(board.createdAt)).toLocaleString()}
-          </span>
-
-          <label>${i18next.t('label.updater')}</label>
-          <span>
-            <mwc-icon>person</mwc-icon> ${(board.updater && board.updater.name) || 'anonymouse'}
-            <mwc-icon>schedule</mwc-icon> ${new Date(Number(board.updatedAt)).toLocaleString()}
-          </span>
-
-          <label>${i18next.t('label.state')}</label>
-          <span state>
-            <div oneline>
-              <mwc-icon>signpost</mwc-icon> ${(board.state || '').toUpperCase()}
-              <mwc-icon>pin</mwc-icon> ${board.version}
-            </div>
-            <mwc-button
-              dense
-              raised
-              label=${String(i18next.t('button.release'))}
-              ?disabled=${!this.enableModeller || !this.isReleasable}
-              @click=${this.releaseBoard.bind(this)}
-              icon="new_releases"
-            ></mwc-button>
-          </span>
-
-          <div buttons>
-            <mwc-button
-              dense
-              raised
-              danger
-              label=${String(i18next.t('button.delete'))}
-              ?disabled=${!this.enableModeller}
-              @click=${this.deleteBoard.bind(this)}
-              icon="delete_outline"
-            ></mwc-button>
-            <mwc-button
-              dense
-              raised
-              label=${String(i18next.t('button.save'))}
-              ?disabled=${!this.enableModeller}
-              @click=${this.updateBoard.bind(this)}
-              icon="save"
-            ></mwc-button>
-            <mwc-button
-              dense
-              raised
-              label=${String(i18next.t('button.edit'))}
-              ?disabled=${!this.enableModeller}
-              @click=${() => navigate(`${'board-modeller/' + this.boardId}`)}
-              icon="drive_file_rename_outline"
-            ></mwc-button>
-          </div>
-        </fieldset>
-
-        <fieldset>
-          <legend>${i18next.t('label.play-group')}</legend>
-
-          ${playGroupList.map(item => html `
-              <input
-                type="checkbox"
-                value=${item.id}
-                .checked=${item.checked}
-                @change=${e => {
-            e.target.checked ? this.joinPlayGroup(item) : this.leavePlayGroup(item);
-        }}
-              />
-              <label>${item.name}</label>
-            `)}
-        </fieldset>
-      </form>
+      <div tab>
+        <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>
+        <span @click=${() => (this.tab = 'versions')} ?active=${this.tab == 'versions'}>versions</span>
+      </div>
+      <div content>
+        ${this.tab == 'basic'
+            ? html `<board-basic-info boardId=${ifDefined(this.boardId)} ?enable-modeller=${this.enableModeller}></board-versions>`
+            : html `<board-versions boardId=${ifDefined(this.boardId)}></board-versions>`}
+      </div>
     `;
     }
-    firstUpdated() {
-        this.refresh();
-    }
-    async refresh() {
-        var _a;
-        var response = (await client.query({
-            query: gql `
-          query FetchBoardById($id: String!) {
-            board(id: $id) {
-              id
-              name
-              description
-              group {
-                id
-                name
-              }
-              playGroups {
-                id
-                name
-              }
-              thumbnail
-              createdAt
-              creator {
-                id
-                name
-              }
-              state
-              version
-              updatedAt
-              updater {
-                id
-                name
-              }
-            }
-
-            groups {
-              items {
-                id
-                name
-                description
-              }
-            }
-
-            playGroups {
-              items {
-                id
-                name
-                description
-              }
-              total
-            }
-          }
-        `,
-            variables: { id: this.boardId }
-        })).data;
-        this.board = response.board;
-        this.boardGroupList = response.groups.items;
-        this.playGroupList = response.playGroups.items;
-        this.original = Object.assign({}, this.board);
-        this.groupId = (_a = this.board.group) === null || _a === void 0 ? void 0 : _a.id;
-    }
-    get isReleasable() {
-        if (!this.board || this.board.state == 'released') {
-            return false;
-        }
-        const { name, description, groupId } = this.board;
-        return (this.original &&
-            this.original.name == name &&
-            this.original.description == description &&
-            this.original.groupId == groupId);
-    }
-    async cloneBoard() {
-        if (!this.original.name || this.board.name == this.original.name) {
-            document.dispatchEvent(new CustomEvent('notify', {
-                detail: {
-                    level: 'error',
-                    message: i18next.t('error.name must be unique from the original board', { name: this.original.name })
-                }
-            }));
-            return;
-        }
-        const { id, name, description, groupId } = this.board;
-        this.dispatchEvent(new CustomEvent('clone-board', {
-            detail: {
-                id,
-                name,
-                description,
-                groupId: groupId || this.groupId
-            }
-        }));
-        this.close();
-    }
-    async releaseBoard() {
-        const { id } = this.board;
-        this.dispatchEvent(new CustomEvent('release-board', {
-            detail: {
-                id
-            }
-        }));
-        this.close();
-    }
-    async updateBoard() {
-        this.dispatchEvent(new CustomEvent('update-board', {
-            detail: this.board
-        }));
-        this.close();
-    }
-    async deleteBoard() {
-        // TODO 삭제하려는 보드이름을 입력하게 해서, 한번 더 확인할 것.
-        this.dispatchEvent(new CustomEvent('delete-board', {
-            detail: this.board
-        }));
-        this.close();
-    }
-    async joinPlayGroup(group) {
-        this.dispatchEvent(new CustomEvent('join-playgroup', {
-            detail: {
-                board: this.board,
-                playGroup: group
-            }
-        }));
-    }
-    async leavePlayGroup(group) {
-        this.dispatchEvent(new CustomEvent('leave-playgroup', {
-            detail: {
-                board: this.board,
-                playGroup: group
-            }
-        }));
-    }
     close() {
         history.back();
     }
 };
 BoardInfo.styles = [
+    ScrollbarStyles,
     css `
       :host {
-        display: block;
-        background-color: var(--main-section-background-color);
         height: 100%;
         min-width: 360px;
-        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);
-      }
-
-      img {
-        display: block;
-
-        margin: auto;
-        max-width: 100%;
-        max-height: 100%;
-        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
-      }
-
-      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[state] {
         display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-
-      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;
+        flex-direction: column;
+        position: relative;
+        background-color: var(--main-section-background-color);
       }
 
-      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);
+      [tab] {
+        width: 100%;
+        display: flex;
       }
 
-      input:focus {
-        outline: none;
-        border: 1px solid var(--focus-background-color);
+      [tab] > * {
+        flex: 1;
       }
 
-      div[oneline] {
-        grid-column: span 12 / auto;
-
-        display: flex;
-        align-items: center;
-        gap: var(--margin-default);
+      [content] {
+        flex: 1;
+        overflow-y: auto;
       }
 
-      div[oneline] input {
-        flex: 1;
+      span {
+        padding: 5px 4px 1px;
+        font: var(--group-bar-textbutton);
+        background-color: var(--secondary-color);
+        color: rgba(255, 255, 255, 0.8);
+        text-align: center;
+        text-transform: uppercase;
       }
 
-      div[oneline] mwc-button {
-        margin-bottom: var(--margin-default);
+      span[active] {
+        background-color: var(--primary-color);
       }
 
       @media screen and (max-width: 460px) {
@@ -425,26 +79,14 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], BoardInfo.prototype, "boardId", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], BoardInfo.prototype, "groupId", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'enable-modeller' }),
     __metadata("design:type", Boolean)
 ], BoardInfo.prototype, "enableModeller", void 0);
 __decorate([
     state(),
-    __metadata("design:type", Object)
-], BoardInfo.prototype, "board", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], BoardInfo.prototype, "boardGroupList", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], BoardInfo.prototype, "playGroupList", void 0);
+    __metadata("design:type", String)
+], BoardInfo.prototype, "tab", void 0);
 BoardInfo = __decorate([
     customElement('board-info')
 ], BoardInfo);

package/dist-client/viewparts/board-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"board-info.js","sourceRoot":"","sources":["../../client/viewparts/board-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { client } from '@operato/graphql'\nimport { navigate } from '@operato/shell'\n\n@customElement('board-info')\nexport class BoardInfo extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        background-color: var(--main-section-background-color);\n        height: 100%;\n        min-width: 360px;\n        overflow: auto;\n        position: relative;\n\n        --form-grid-gap: 2px 0;\n        --input-field-padding: var(--padding-default);\n        --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;\n        --mdc-button-horizontal-padding: var(--padding-default);\n      }\n\n      img {\n        display: block;\n\n        margin: auto;\n        max-width: 100%;\n        max-height: 100%;\n        border-bottom: 2px solid rgba(0, 0, 0, 0.1);\n      }\n\n      form {\n        display: grid;\n        grid-template-columns: repeat(12, 1fr);\n        grid-gap: var(--form-grid-gap);\n        grid-auto-rows: minmax(24px, auto);\n        padding: var(--padding-wide);\n        align-items: center;\n      }\n\n      [buttons] {\n        grid-column: span 12;\n        padding: var(--padding-default) 0;\n        text-align: right;\n      }\n\n      [buttons] * {\n        margin: 0 0 0 var(--margin-narrow);\n      }\n      [danger] {\n        float: left;\n        margin: 0 var(--margin-narrow) 0 0;\n        --mdc-theme-primary: var(--status-danger-color);\n      }\n\n      fieldset {\n        display: contents;\n      }\n\n      legend {\n        grid-column: span 12;\n        padding: var(--legend-padding);\n        font: var(--legend-font);\n        color: var(--legend-text-color);\n        text-transform: capitalize;\n      }\n\n      label {\n        grid-column: span 12;\n        text-transform: capitalize;\n        color: var(--label-color);\n        font: var(--label-font);\n      }\n\n      span {\n        grid-column: span 12;\n        border-bottom: var(--border-dark-color);\n        margin-bottom: var(--margin-default);\n        padding-bottom: var(--padding-narrow);\n        font: var(--input-field-font);\n      }\n\n      span[state] {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      span mwc-icon {\n        vertical-align: middle;\n        font-size: var(--fontsize-large);\n        color: var(--primary-color);\n      }\n\n      input,\n      table,\n      select,\n      textarea,\n      [custom-input] {\n        grid-column: span 12;\n\n        border: var(--input-field-border);\n        border-radius: var(--input-field-border-radius);\n        margin-bottom: var(--margin-default);\n        padding: var(--input-field-padding);\n        font: var(--input-field-font);\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        place-self: center;\n        margin: 0;\n        grid-column: 1;\n      }\n\n      input[type='checkbox'] + label,\n      input[type='radio'] + label {\n        text-align: left;\n        grid-column: span 11 / auto;\n\n        font: var(--form-sublabel-font);\n        color: var(--form-sublabel-color);\n      }\n\n      input:focus {\n        outline: none;\n        border: 1px solid var(--focus-background-color);\n      }\n\n      div[oneline] {\n        grid-column: span 12 / auto;\n\n        display: flex;\n        align-items: center;\n        gap: var(--margin-default);\n      }\n\n      div[oneline] input {\n        flex: 1;\n      }\n\n      div[oneline] mwc-button {\n        margin-bottom: var(--margin-default);\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          width: 100vw;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) boardId?: string\n  @property({ type: String }) groupId?: string\n  @property({ type: Boolean, attribute: 'enable-modeller' }) enableModeller?: boolean\n\n  @state() board: any\n  @state() boardGroupList: any[] = []\n  @state() playGroupList: any[] = []\n\n  // private originalName?: string\n  private original: any\n\n  render() {\n    var board = this.board || { name: '', description: '', playGroups: [] }\n    var boardGroupList = this.boardGroupList || []\n    var playGroupList = (this.playGroupList || []).map(group => {\n      return {\n        ...group,\n        checked: false\n      }\n    })\n    ;(board.playGroups || []).map(group => {\n      var playGroup = playGroupList.find(g => g.id == group.id)\n      if (playGroup) {\n        playGroup.checked = true\n      }\n    })\n\n    return html`\n      ${board.thumbnail ? html` <img src=${board.thumbnail} /> ` : html``}\n\n      <form>\n        <fieldset>\n          <legend>${i18next.t('label.information')}</legend>\n          <label>${i18next.t('label.name')}</label>\n          <div oneline>\n            <input\n              type=\"text\"\n              .value=${board.name}\n              @change=${e => (this.board = { ...this.board, name: e.target.value })}\n              ?disabled=${!this.enableModeller}\n            />\n            <mwc-button\n              dense\n              raised\n              label=${String(i18next.t('button.copy'))}\n              ?disabled=${!this.enableModeller || !this.original?.name || this.original.name == this.board.name}\n              @click=${this.cloneBoard.bind(this)}\n              icon=\"content_copy\"\n            ></mwc-button>\n          </div>\n\n          <label>${i18next.t('label.description')}</label>\n          <input\n            type=\"text\"\n            .value=${board.description}\n            @change=${e => (this.board = { ...this.board, description: e.target.value })}\n            ?disabled=${!this.enableModeller}\n          />\n\n          <label>${i18next.t('label.group')}</label>\n          <select\n            @change=${e => (this.board = { ...this.board, groupId: e.target.value })}\n            .value=${this.groupId || ''}\n            ?disabled=${!this.enableModeller}\n          >\n            <option value=\"\" ?selected=${'' == this.groupId}></option>\n            ${boardGroupList.map(\n              item => html` <option .value=${item.id} ?selected=${item.id == this.groupId}>${item.name}</option> `\n            )}\n          </select>\n          <label>${i18next.t('label.creator')}</label>\n          <span>\n            <mwc-icon>person</mwc-icon> ${(board.creator && board.creator.name) || 'anonymous'}\n            <mwc-icon>schedule</mwc-icon> ${new Date(Number(board.createdAt)).toLocaleString()}\n          </span>\n\n          <label>${i18next.t('label.updater')}</label>\n          <span>\n            <mwc-icon>person</mwc-icon> ${(board.updater && board.updater.name) || 'anonymouse'}\n            <mwc-icon>schedule</mwc-icon> ${new Date(Number(board.updatedAt)).toLocaleString()}\n          </span>\n\n          <label>${i18next.t('label.state')}</label>\n          <span state>\n            <div oneline>\n              <mwc-icon>signpost</mwc-icon> ${(board.state || '').toUpperCase()}\n              <mwc-icon>pin</mwc-icon> ${board.version}\n            </div>\n            <mwc-button\n              dense\n              raised\n              label=${String(i18next.t('button.release'))}\n              ?disabled=${!this.enableModeller || !this.isReleasable}\n              @click=${this.releaseBoard.bind(this)}\n              icon=\"new_releases\"\n            ></mwc-button>\n          </span>\n\n          <div buttons>\n            <mwc-button\n              dense\n              raised\n              danger\n              label=${String(i18next.t('button.delete'))}\n              ?disabled=${!this.enableModeller}\n              @click=${this.deleteBoard.bind(this)}\n              icon=\"delete_outline\"\n            ></mwc-button>\n            <mwc-button\n              dense\n              raised\n              label=${String(i18next.t('button.save'))}\n              ?disabled=${!this.enableModeller}\n              @click=${this.updateBoard.bind(this)}\n              icon=\"save\"\n            ></mwc-button>\n            <mwc-button\n              dense\n              raised\n              label=${String(i18next.t('button.edit'))}\n              ?disabled=${!this.enableModeller}\n              @click=${() => navigate(`${'board-modeller/' + this.boardId}`)}\n              icon=\"drive_file_rename_outline\"\n            ></mwc-button>\n          </div>\n        </fieldset>\n\n        <fieldset>\n          <legend>${i18next.t('label.play-group')}</legend>\n\n          ${playGroupList.map(\n            item => html`\n              <input\n                type=\"checkbox\"\n                value=${item.id}\n                .checked=${item.checked}\n                @change=${e => {\n                  e.target.checked ? this.joinPlayGroup(item) : this.leavePlayGroup(item)\n                }}\n              />\n              <label>${item.name}</label>\n            `\n          )}\n        </fieldset>\n      </form>\n    `\n  }\n\n  firstUpdated() {\n    this.refresh()\n  }\n\n  async refresh() {\n    var response = (\n      await client.query({\n        query: gql`\n          query FetchBoardById($id: String!) {\n            board(id: $id) {\n              id\n              name\n              description\n              group {\n                id\n                name\n              }\n              playGroups {\n                id\n                name\n              }\n              thumbnail\n              createdAt\n              creator {\n                id\n                name\n              }\n              state\n              version\n              updatedAt\n              updater {\n                id\n                name\n              }\n            }\n\n            groups {\n              items {\n                id\n                name\n                description\n              }\n            }\n\n            playGroups {\n              items {\n                id\n                name\n                description\n              }\n              total\n            }\n          }\n        `,\n        variables: { id: this.boardId }\n      })\n    ).data\n\n    this.board = response.board\n    this.boardGroupList = response.groups.items\n    this.playGroupList = response.playGroups.items\n    this.original = { ...this.board }\n\n    this.groupId = this.board.group?.id\n  }\n\n  get isReleasable() {\n    if (!this.board || this.board.state == 'released') {\n      return false\n    }\n\n    const { name, description, groupId } = this.board\n\n    return (\n      this.original &&\n      this.original.name == name &&\n      this.original.description == description &&\n      this.original.groupId == groupId\n    )\n  }\n\n  async cloneBoard() {\n    if (!this.original.name || this.board.name == this.original.name) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: i18next.t('error.name must be unique from the original board', { name: this.original.name })\n          }\n        })\n      )\n\n      return\n    }\n\n    const { id, name, description, groupId } = this.board\n\n    this.dispatchEvent(\n      new CustomEvent('clone-board', {\n        detail: {\n          id,\n          name,\n          description,\n          groupId: groupId || this.groupId\n        }\n      })\n    )\n\n    this.close()\n  }\n\n  async releaseBoard() {\n    const { id } = this.board\n\n    this.dispatchEvent(\n      new CustomEvent('release-board', {\n        detail: {\n          id\n        }\n      })\n    )\n\n    this.close()\n  }\n\n  async updateBoard() {\n    this.dispatchEvent(\n      new CustomEvent('update-board', {\n        detail: this.board\n      })\n    )\n\n    this.close()\n  }\n\n  async deleteBoard() {\n    // TODO 삭제하려는 보드이름을 입력하게 해서, 한번 더 확인할 것.\n    this.dispatchEvent(\n      new CustomEvent('delete-board', {\n        detail: this.board\n      })\n    )\n\n    this.close()\n  }\n\n  async joinPlayGroup(group) {\n    this.dispatchEvent(\n      new CustomEvent('join-playgroup', {\n        detail: {\n          board: this.board,\n          playGroup: group\n        }\n      })\n    )\n  }\n\n  async leavePlayGroup(group) {\n    this.dispatchEvent(\n      new CustomEvent('leave-playgroup', {\n        detail: {\n          board: this.board,\n          playGroup: group\n        }\n      })\n    )\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}
+{"version":3,"file":"board-info.js","sourceRoot":"","sources":["../../client/viewparts/board-info.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAG3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAKxD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,oBAAoB,CAAA;AAC3B,OAAO,kBAAkB,CAAA;AAGlB,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAoDI,QAAG,GAAW,OAAO,CAAA;IAqBhC,CAAC;IAnBC,MAAM;QACJ,OAAO,IAAI,CAAA;;uBAEQ,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,OAAO;uBACzD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,UAAU,CAAC,YAAY,IAAI,CAAC,GAAG,IAAI,UAAU;;;UAG5E,IAAI,CAAC,GAAG,IAAI,OAAO;YACnB,CAAC,CAAC,IAAI,CAAA,6BAA6B,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,qBACtD,IAAI,CAAC,cACP,oBAAoB;YACtB,CAAC,CAAC,IAAI,CAAA,2BAA2B,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB;;KAEjF,CAAA;IACH,CAAC;IAED,KAAK;QACH,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;;AAvEM,gBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAiB;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;;iDAAyB;AAEnF;IAAC,KAAK,EAAE;;sCAAsB;AApDnB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAyErB;SAzEY,SAAS","sourcesContent":["import '@material/mwc-icon'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { i18next } from '@operato/i18n'\nimport { client } from '@operato/graphql'\nimport { navigate } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport './board-basic-info'\nimport './board-versions'\n\n@customElement('board-info')\nexport class BoardInfo extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        height: 100%;\n        min-width: 360px;\n\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        background-color: var(--main-section-background-color);\n      }\n\n      [tab] {\n        width: 100%;\n        display: flex;\n      }\n\n      [tab] > * {\n        flex: 1;\n      }\n\n      [content] {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      span {\n        padding: 5px 4px 1px;\n        font: var(--group-bar-textbutton);\n        background-color: var(--secondary-color);\n        color: rgba(255, 255, 255, 0.8);\n        text-align: center;\n        text-transform: uppercase;\n      }\n\n      span[active] {\n        background-color: var(--primary-color);\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          width: 100vw;\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) boardId?: string\n  @property({ type: Boolean, attribute: 'enable-modeller' }) enableModeller?: boolean\n\n  @state() tab: string = 'basic'\n\n  render() {\n    return html`\n      <div tab>\n        <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>\n        <span @click=${() => (this.tab = 'versions')} ?active=${this.tab == 'versions'}>versions</span>\n      </div>\n      <div content>\n        ${this.tab == 'basic'\n          ? html`<board-basic-info boardId=${ifDefined(this.boardId)} ?enable-modeller=${\n              this.enableModeller\n            }></board-versions>`\n          : html`<board-versions boardId=${ifDefined(this.boardId)}></board-versions>`}\n      </div>\n    `\n  }\n\n  close() {\n    history.back()\n  }\n}\n"]}

package/dist-client/viewparts/board-versions.d.ts

@@ -0,0 +1,12 @@
+import '@material/mwc-icon';
+import { LitElement } from 'lit';
+export declare class BoardVersions extends LitElement {
+    static styles: import("lit").CSSResult[];
+    boardId?: string;
+    versions: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    refresh(): Promise<void>;
+    revertBoardVersion(version: number): void;
+    close(): void;
+}