@things-factory/board-ui 6.2.96 → 6.2.102

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

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