@things-factory/board-ui 6.2.102 → 6.2.112

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

@@ -0,0 +1,641 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/mwc-icon';
+import gql from 'graphql-tag';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin';
+import { i18next } from '@operato/i18n';
+import { client } from '@operato/graphql';
+import { navigate, store } from '@operato/shell';
+import { OxPrompt } from '@operato/popup/ox-prompt.js';
+import { hasPrivilege } from '@things-factory/auth-base/dist-client';
+let BoardInfo = class BoardInfo extends connect(store)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.boardGroupList = [];
+        this.playGroupList = [];
+        this.showTarget = false;
+        this.enableModeller = false;
+        this.targetDomains = [];
+        this.targetGroups = [];
+    }
+    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}
+            />
+            ${this.enableModeller
+            ? html `
+                  <mwc-icon
+                    @click=${() => {
+                this.showTarget = !this.showTarget;
+            }}
+                    tail
+                    >${this.showTarget ? 'arrow_drop_up' : 'arrow_drop_down'}</mwc-icon
+                  >
+                `
+            : nothing}
+          </div>
+          ${this.showTarget
+            ? html `
+                <div fullwidth target>
+                  <label>${i18next.t('label.board-copy')}</label>
+                  <div oneline>
+                    <select
+                      @change=${e => {
+                this.targetSubdomain = e.target.value;
+                this.getGroupsByDomain(this.targetSubdomain);
+            }}
+                      placeholder="choose domain ..."
+                      .value=${this.targetSubdomain}
+                      ?disabled=${!this.enableModeller}
+                    >
+                      <option value=""></option>
+                      ${this.targetDomains.map(domain => html `
+                            <option .value=${domain.subdomain} ?selected=${domain.subdomain == this.targetSubdomain}>
+                              ${domain.name}
+                            </option>
+                          `)}
+                    </select>
+
+                    <select
+                      @change=${e => (this.targetGroupId = e.target.value)}
+                      placeholder="choose group ..."
+                      .value=${this.targetGroupId}
+                      ?disabled=${!this.enableModeller}
+                    >
+                      <option value=""></option>
+                      ${this.targetGroups.map(group => html `
+                            <option .value=${group.id} ?selected=${group.id == this.targetGroupId}>
+                              ${group.name}
+                            </option>
+                          `)}
+                    </select>
+                  </div>
+                  <div oneline>
+                    <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.board.name ||
+                !this.targetSubdomain ||
+                (this.original.name == this.board.name && this.subdomain == this.targetSubdomain)}
+                      @click=${this.cloneBoard.bind(this)}
+                      icon="content_copy"
+                      right
+                    ></mwc-button>
+                    <mwc-button
+                      dense
+                      raised
+                      label=${String(i18next.t('button.export'))}
+                      @click=${this.exportBoard.bind(this)}
+                      icon="download"
+                    ></mwc-button>
+                  </div>
+                </div>
+              `
+            : html ``}
+
+          <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(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(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>
+    `;
+    }
+    stateChanged(state) {
+        var _a, _b, _c;
+        this.subdomain = (_b = (_a = state.app) === null || _a === void 0 ? void 0 : _a.domain) === null || _b === void 0 ? void 0 : _b.subdomain;
+        this.targetSubdomain = (_c = this.targetSubdomain) !== null && _c !== void 0 ? _c : this.subdomain;
+    }
+    async firstUpdated() {
+        this.enableModeller = await hasPrivilege({ privilege: 'mutation', category: 'board' });
+        this.refresh();
+    }
+    async refresh() {
+        var _a;
+        var response = (await client.query({
+            query: gql `
+          query FetchBoardById($id: String!) {
+            board(id: $id) {
+              id
+              name
+              description
+              model
+              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
+            }
+
+            domainsWithPrivilege(privilege: "mutation", category: "board") {
+              name
+              subdomain
+            }
+          }
+        `,
+            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;
+        this.targetDomains = response.domainsWithPrivilege;
+        this.targetGroups = response.groups.items;
+        this.targetGroupId = this.groupId;
+    }
+    async getGroupsByDomain(subdomain) {
+        this.targetGroups = [];
+        this.targetGroupId = '';
+        if (!subdomain) {
+            return;
+        }
+        var response = (await client.query({
+            query: gql `
+          query {
+            groups {
+              items {
+                id
+                name
+                description
+              }
+            }
+          }
+        `,
+            variables: { id: this.boardId },
+            context: {
+                headers: {
+                    'x-things-factory-domain': subdomain
+                }
+            }
+        })).data;
+        this.targetGroups = response.groups.items;
+    }
+    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 && this.subdomain == this.targetSubdomain)) {
+            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 } = this.board;
+        this.dispatchEvent(new CustomEvent('clone-board', {
+            detail: {
+                id,
+                name,
+                description,
+                targetSubdomain: this.targetSubdomain,
+                targetGroupId: this.targetGroupId
+            },
+            bubbles: true,
+            composed: true
+        }));
+        this.close();
+    }
+    async exportBoard() {
+        const board = Object.assign(Object.assign({}, this.board), { model: JSON.parse(this.board.model) });
+        const json = JSON.stringify(board, null, 2);
+        const blob = new Blob([json], { type: 'application/json;charset=utf-8' });
+        const blobUrl = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = blobUrl;
+        link.download = `${board.name}.json`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(blobUrl);
+    }
+    async releaseBoard() {
+        const { id } = this.board;
+        this.dispatchEvent(new CustomEvent('release-board', {
+            detail: {
+                id
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    async updateBoard() {
+        const { id, name, description, groupId } = this.board;
+        /* model 정보를 제외하고 업데이트 */
+        this.dispatchEvent(new CustomEvent('update-board', {
+            detail: { id, name, description, groupId },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    async deleteBoard() {
+        if (await OxPrompt.open({
+            title: i18next.t('text.are_you_sure'),
+            text: i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }),
+            confirmButton: { text: i18next.t('button.confirm') },
+            cancelButton: { text: i18next.t('button.cancel') }
+        })) {
+            this.dispatchEvent(new CustomEvent('delete-board', {
+                detail: this.board,
+                bubbles: true,
+                composed: true
+            }));
+            this.close();
+        }
+    }
+    async joinPlayGroup(group) {
+        this.dispatchEvent(new CustomEvent('join-playgroup', {
+            detail: {
+                board: this.board,
+                playGroup: group
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    async leavePlayGroup(group) {
+        this.dispatchEvent(new CustomEvent('leave-playgroup', {
+            detail: {
+                board: this.board,
+                playGroup: group
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    close() {
+        history.back();
+    }
+};
+BoardInfo.styles = [
+    css `
+      :host {
+        display: block;
+        background-color: var(--main-section-background-color);
+        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);
+      }
+
+      mwc-icon[tail] {
+        margin-bottom: var(--margin-default);
+      }
+
+      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(--form-sublabel-color);
+      }
+
+      input:focus {
+        outline: none;
+        border: 1px solid var(--focus-background-color);
+      }
+
+      div[fullwidth] {
+        grid-column: span 12 / auto;
+        border-bottom: var(--border-dark-color);
+
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--margin-default);
+      }
+
+      div[oneline] {
+        grid-column: span 12 / auto;
+
+        display: flex;
+        align-items: center;
+        gap: var(--margin-default);
+      }
+
+      div[oneline] input {
+        flex: 1;
+      }
+
+      div[oneline] select {
+        flex: 1;
+      }
+
+      div[oneline] mwc-button {
+        margin-bottom: var(--margin-default);
+      }
+
+      mwc-button[right] {
+        margin-left: auto;
+      }
+
+      @media screen and (max-width: 460px) {
+        :host {
+          width: 100vw;
+        }
+      }
+    `
+];
+__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([
+    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);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], BoardInfo.prototype, "showTarget", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BoardInfo.prototype, "subdomain", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], BoardInfo.prototype, "enableModeller", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], BoardInfo.prototype, "targetDomains", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], BoardInfo.prototype, "targetGroups", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BoardInfo.prototype, "targetSubdomain", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BoardInfo.prototype, "targetGroupId", void 0);
+BoardInfo = __decorate([
+    customElement('board-basic-info')
+], BoardInfo);
+export { BoardInfo };
+//# sourceMappingURL=board-basic-info.js.map