@fmsim/fmsim-restful 0.0.49

package/dist-client/pages/restful-font-selector.js

@@ -0,0 +1,592 @@
+import { __decorate, __metadata } from "tslib";
+import '../viewparts/font-creation-card-new';
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import gql from 'graphql-tag';
+import { v4 as uuidv4 } from 'uuid';
+import { i18next, localize } from '@operato/i18n';
+import { store } from '@operato/shell';
+import { client } from '@operato/graphql';
+import { ScrollbarStyles } from '@operato/styles';
+import { fetchFontList, createFont, updateFont, deleteFont } from '@things-factory/font-base';
+import { deleteAttachmentByRef } from '@fmsim/api/restful.js';
+import { FontCreationCard } from '../viewparts/font-creation-card-new';
+const btnOpenDropboxColor = require('../../assets/icons/group-bar/btn-open-dropbox-color.png');
+const btnCloseDropbox = require('../../assets/icons/group-bar/btn-close-dropbox.png');
+const btnAddList = require('../../assets/icons/group-bar/btn-add-list.png');
+const btnCheckbox = require('../../assets/icons/font/btn-checkbox.svg');
+const btnCheckboxHover = require('../../assets/icons/font/btn-checkbox-hover.svg');
+const btnCheckboxBlank = require('../../assets/icons/font/btn-checkbox-blank.svg');
+const btnCheckboxBlankHover = require('../../assets/icons/font/btn-checkbox-blank-hover.svg');
+const btnDelete = require('../../assets/icons/font/btn-delete.svg');
+const btnDeleteHover = require('../../assets/icons/font/btn-delete-hover.svg');
+let FontSelector = class FontSelector extends localize(i18next)(connect(store)(LitElement)) {
+    constructor() {
+        super();
+        this.fonts = [];
+        this.btnDropBoxIcon = 'btn-open-dropbox';
+    }
+    render() {
+        var fonts = this.fonts || [];
+        return html `
+      <div id="filter">
+        <div class="group-select-box" @click=${this.toggleSelectBox}>
+          ${this.provider
+            ? html ` <span>${this.provider}</span> `
+            : html ` <span>${i18next.t('text.please choose a provider')}</span> `}
+          <span><i class=${this.btnDropBoxIcon || ''}></i></span>
+          <ul class=${`select-box ${this.selectBoxToggle}`}>
+            ${['google', 'custom'].map(provider => html ` <li
+                value=${provider}
+                @click=${e => {
+            this.provider = provider;
+            this.requestUpdate();
+        }}
+              >
+                <a>${provider}</a>
+              </li>`)}
+          </ul>
+        </div>
+      </div>
+      <div id="main">
+        ${this.creatable
+            ? html `
+              <font-creation-card-new
+                class="card create"
+                @create-font=${e => this.onCreateFont(e)}
+                @file-drop=${e => this.onAttachmentDropped(e)}
+              ></font-creation-card-new>
+            `
+            : html ``}
+        ${fonts.map(font => html `
+            <div class="card" @click=${e => this.onClickSelect(font)}>
+              <div face>
+                <font .face=${font.name}>ABCDEFGHIJKLMN</font>
+                <font .face=${font.name}>abcdefghijklmn</font>
+              </div>
+              <div name>${font.name}</div>
+              <div provider>${font.provider}</div>
+              <div class="button-container">
+                <span
+                  @click=${e => {
+            e.stopPropagation();
+            this.toggleActive(font);
+        }}
+                >
+                  <i class="${font.active ? 'btn-checkbox' : 'btn-checkbox-blank'}"></i>
+                </span>
+                <span
+                  @click=${e => {
+            e.stopPropagation();
+            this.deleteFont(font);
+        }}
+                >
+                  <i class="btn-delete"></i>
+                </span>
+              </div>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+    toggleSelectBox() {
+        if (this.selectBoxToggle === 'on') {
+            this.selectBoxToggle = null;
+            this.btnDropBoxIcon = 'btn-close-dropbox';
+        }
+        else {
+            this.selectBoxToggle = 'on';
+            this.btnDropBoxIcon = 'btn-open-dropbox';
+        }
+    }
+    updated(changes) {
+        if (changes.has('fonts')) {
+            var creationCard = this.creationCard;
+            if (creationCard) {
+                creationCard.reset();
+            }
+        }
+    }
+    stateChanged(state) {
+        this.fonts = state.font;
+    }
+    refresh() {
+        return store.dispatch(fetchFontList());
+    }
+    toggleActive(font) {
+        store.dispatch(updateFont({ id: font.id, active: !font.active }));
+    }
+    onCreateFont(e) {
+        var font = e.detail;
+        this.createFont(font);
+    }
+    async createFont(font) {
+        if (font._files && font._files.length > 0) {
+            let attachment = await this.attachFile(font._files[0], ['fullpath', 'refBy']);
+            font.id = attachment ? attachment.refBy : null;
+            font.uri = attachment ? attachment.fullpath : null;
+            delete font._files;
+        }
+        store.dispatch(createFont(font));
+    }
+    async onAttachmentDropped(e) {
+        var isNonFontIncluded = false;
+        var files = e.detail.filter(file => {
+            var isFontFormat = !!['.woff', '.woff2', '.eot', '.svg', '.svgz', '.ttf', '.otf'].find(ext => file.name.endsWith(ext));
+            if (!isFontFormat) {
+                isNonFontIncluded = true;
+                return false;
+            }
+            var alreadyExist = !!this.fonts.find(font => font.name == file.name.replace(/\.[^/.]+$/, '').replace('.', '_'));
+            if (alreadyExist)
+                return false;
+            return true;
+        });
+        // TODO alert if non-font file is included. ex) Non-font file is excluded in upload list.
+        if (files.length > 0) {
+            var attached = await this.attachFiles(files, ['name', 'fullpath', 'refBy']);
+            attached.forEach(attachment => {
+                this.createFont({
+                    id: attachment.refBy,
+                    name: attachment.name.replace(/\.[^/.]+$/, '').replace('.', '_'),
+                    provider: 'custom',
+                    active: true,
+                    uri: attachment.fullpath
+                });
+            });
+        }
+    }
+    /**
+     * attach a file
+     *
+     * @param { File } file file
+     * @param { Array<String> } fields fields to select from return
+     */
+    async attachFile(file, fields = []) {
+        var attaching = await client.mutate({
+            mutation: gql `
+        mutation ($attachment: NewAttachment!) {
+          createAttachment(attachment: $attachment) {
+            id
+          }
+        }
+      `,
+            variables: {
+                attachment: { refBy: uuidv4(), category: 'font', file }
+            },
+            context: {
+                hasUpload: true
+            }
+        });
+        // TODO mutation 이후 query 호출 안 해도 되도록 수정
+        // fullpath 값은 getter라서 그런지 뮤테이션에서 못 받아오는 듯
+        var attached = await client.query({
+            query: gql `
+        query($id: String!) {
+          attachment(id: $id) {
+            id
+            ${fields.join('\n')}
+          }
+        }
+      `,
+            variables: {
+                id: attaching.data.createAttachment ? attaching.data.createAttachment.id : null
+            }
+        });
+        return attached.data.attachment;
+    }
+    /**
+     * attach multiple files
+     *
+     * @param { Array<File> } files files
+     * @param { Array<String> } fields fields to select from return
+     */
+    async attachFiles(files, fields = []) {
+        var attaching = await client.mutate({
+            mutation: gql `
+        mutation ($attachments: [NewAttachment]!) {
+          createAttachments(attachments: $attachments) {
+            id
+          }
+        }
+      `,
+            variables: {
+                attachments: files.map(file => ({ refBy: uuidv4(), category: '', file }))
+            },
+            context: {
+                hasUpload: true
+            }
+        });
+        // TODO mutation 이후 query 호출 안 해도 되도록 수정
+        // fullpath 값은 getter라서 그런지 뮤테이션에서 못 받아오는 듯
+        var attached = await client.query({
+            query: gql `
+        query($filters: [Filter]) {
+          attachments(filters: $filters) {
+            items {
+              id
+              ${fields.join('\n')}
+            }
+            total
+          }
+        }
+      `,
+            variables: {
+                filters: {
+                    name: 'id',
+                    operator: 'in',
+                    value: attaching.data.createAttachments.map(attachment => attachment.id)
+                }
+            }
+        });
+        return attached.data.attachments.items;
+    }
+    async deleteFont(font) {
+        try {
+            // require.resolve('@things-factory/attachment-ui')
+            await deleteAttachmentByRef(font.id);
+        }
+        catch (e) { }
+        store.dispatch(deleteFont(font));
+    }
+    onClickSelect(font) {
+        this.dispatchEvent(new CustomEvent('font-selected', {
+            composed: true,
+            bubbles: true,
+            detail: {
+                font
+            }
+        }));
+    }
+};
+FontSelector.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background-color: #fff;
+        /* --card-list-create-color: var(--primary-color); */
+        position: relative;
+      }
+
+      :host(.candrop) {
+        background: orange;
+        cursor: pointer;
+      }
+
+      #main {
+        overflow: auto;
+        padding: var(--popup-content-padding);
+        display: grid;
+        grid-template-columns: var(--card-list-template);
+        grid-auto-rows: var(--card-list-rows-height);
+        grid-gap: 20px;
+        box-sizing: border-box;
+        padding-top: 20px !important;
+      }
+
+      #main .card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        overflow: hidden;
+        border-radius: var(--card-list-border-radius);
+        border: var(--font-selector-border);
+        background-color: var(--card-list-background-color);
+
+        position: relative;
+      }
+
+      .card .button-container {
+        position: absolute;
+        right: 0;
+        height: 100%;
+        display: flex;
+        direction: rtl;
+        flex-direction: column;
+        flex-wrap: wrap;
+      }
+
+      .card .button-container > mwc-icon,
+      .card .button-container > span {
+        background-color: var(--font-selector-icon-background-color);
+        text-align: center;
+        width: var(--font-selector-icon-size);
+        height: var(--font-selector-icon-size);
+        font: var(--font-selector-icon-font);
+        color: var(--font-selector-icon-color);
+      }
+
+      .card .button-container > mwc-icon:last-child,
+      .card .button-container > span:last-child {
+        border-bottom-left-radius: 12px;
+      }
+
+      .card .button-container > mwc-icon:hover,
+      .card .button-container > mwc-icon:active,
+      .card .button-container > span:hover,
+      .card .button-container > span:active {
+        background-color: var(--primary-color);
+        color: #fff;
+      }
+
+      #main .card.create {
+        overflow: visible;
+        background-color: initial;
+      }
+
+      #main .card:hover {
+        cursor: pointer;
+      }
+
+      [face] {
+        flex: 1;
+      }
+
+      [name] {
+        background-color: var(--primary-color);
+        opacity: 0.8;
+        margin-top: -35px;
+        width: 100%;
+        color: #fff;
+        font-weight: bolder;
+        font-size: 13px;
+        text-indent: 7px;
+      }
+
+      [provider] {
+        background-color: rgba(0, 0, 0, 0.7);
+        width: 100%;
+        min-height: 15px;
+        font-size: 0.6rem;
+        color: #fff;
+        text-indent: 7px;
+      }
+
+      #filter {
+        padding: 12px 12px 12px 20px;
+        background-color: var(--group-bar-background-color);
+        height: 28px;
+        z-index: 1;
+      }
+
+      select {
+        text-transform: capitalize;
+        float: right;
+      }
+
+      ul {
+        display: flex;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        white-space: nowrap;
+        clear: both;
+      }
+
+      li {
+        padding: 0px 3px;
+      }
+
+      li:hover {
+        background-color: rgba(255, 180, 180, 1);
+      }
+
+      li a {
+        width: calc(100% - 24px);
+        padding: 5px 4px 1px 4px;
+        text-decoration: none;
+        font-size: 12px;
+        font-weight: bold;
+        color: rgb(233, 103, 128);
+        display: inline-block;
+      }
+
+      li span {
+        height: 16px;
+        margin-top: 4px;
+        border-radius: 2px;
+        float: right;
+        display: none;
+      }
+
+      li:hover span {
+        display: inline-block;
+      }
+
+      li span:hover {
+        background-color: #f8c2cc;
+      }
+
+      mwc-icon {
+        vertical-align: middle;
+      }
+
+      .group-select-box {
+        position: absolute;
+        width: 200px;
+        min-height: 22px;
+        font-size: 12px;
+        font-weight: bold;
+        color: #e96780;
+        border: 1px solid #ccc;
+        padding: 5px;
+        background-color: #fff;
+        float: left;
+        cursor: pointer;
+        display: inline-block;
+      }
+
+      .group-select-box > span:nth-child(1) {
+        padding: 4px 0 0 6px;
+        float: left;
+      }
+
+      .group-select-box > span:nth-child(2) {
+        float: right;
+        margin-top: 1px;
+      }
+
+      .select-box {
+        display: none;
+      }
+
+      .select-box.on {
+        display: block;
+        padding-top: 2px;
+      }
+
+      .select-box.active {
+        background-color: #1344;
+      }
+
+      .add-group {
+        cursor: pointer;
+      }
+
+      .btn-open-dropbox {
+        width: 8px;
+        height: 5px;
+        display: inline-block;
+        background: url(${unsafeCSS(btnOpenDropboxColor)}) no-repeat;
+      }
+
+      .btn-close-dropbox {
+        width: 8px;
+        height: 5px;
+        display: inline-block;
+        background: url(${unsafeCSS(btnCloseDropbox)}) no-repeat;
+      }
+
+      .btn-add-list-wrap {
+        margin: 5px 0 0 172px;
+        cursor: pointer;
+        display: inline-block;
+      }
+
+      .btn-add-list {
+        width: 9px;
+        height: 9px;
+        display: inline-block;
+        background: url(${unsafeCSS(btnAddList)}) no-repeat;
+      }
+
+      select {
+        position: absolute;
+        width: 150px;
+        min-height: 22px;
+        font-size: 12px;
+        font-weight: bold;
+        color: #e96780;
+        border: 1px solid #ccc;
+        padding: 5px;
+        background-color: #fff;
+        z-index: 1;
+        float: left;
+        cursor: pointer;
+        display: inline-block;
+      }
+
+      .btn-checkbox {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        background: url(${unsafeCSS(btnCheckbox)}) no-repeat;
+      }
+      .card .button-container > span:hover > .btn-checkbox,
+      .card .button-container > span:active > .btn-checkbox {
+        background: url(${unsafeCSS(btnCheckboxHover)}) no-repeat;
+      }
+
+      .btn-checkbox-blank {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        background: url(${unsafeCSS(btnCheckboxBlank)}) no-repeat;
+      }
+      .card .button-container > span:hover > .btn-checkbox-blank,
+      .card .button-container > span:active > .btn-checkbox-blank {
+        background: url(${unsafeCSS(btnCheckboxBlankHover)}) no-repeat;
+      }
+
+      .btn-delete {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        background: url(${unsafeCSS(btnDelete)}) no-repeat;
+      }
+      .card .button-container > span:hover > .btn-delete,
+      .card .button-container > span:active > .btn-delete {
+        background: url(${unsafeCSS(btnDeleteHover)}) no-repeat;
+      }
+    `
+];
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], FontSelector.prototype, "fonts", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], FontSelector.prototype, "_page", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], FontSelector.prototype, "_total", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], FontSelector.prototype, "creatable", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], FontSelector.prototype, "selectBoxToggle", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FontSelector.prototype, "btnDropBoxIcon", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FontSelector.prototype, "provider", void 0);
+__decorate([
+    query('#main'),
+    __metadata("design:type", HTMLDivElement)
+], FontSelector.prototype, "main", void 0);
+__decorate([
+    query('#filter'),
+    __metadata("design:type", HTMLDivElement)
+], FontSelector.prototype, "filter", void 0);
+__decorate([
+    query('font-creation-card-new'),
+    __metadata("design:type", FontCreationCard)
+], FontSelector.prototype, "creationCard", void 0);
+FontSelector = __decorate([
+    customElement('restful-font-selector'),
+    __metadata("design:paramtypes", [])
+], FontSelector);
+export { FontSelector };
+//# sourceMappingURL=restful-font-selector.js.map

package/dist-client/pages/restful-font-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"restful-font-selector.js","sourceRoot":"","sources":["../../client/pages/restful-font-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '../viewparts/font-creation-card-new'\n\nimport { css, html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin.js'\nimport gql from 'graphql-tag'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { store } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { fetchFontList, createFont, updateFont, deleteFont } from '@things-factory/font-base'\n\nimport { deleteAttachmentByRef } from '@fmsim/api/restful.js'\nimport { FontCreationCard } from '../viewparts/font-creation-card-new'\n\nconst btnOpenDropboxColor = require('../../assets/icons/group-bar/btn-open-dropbox-color.png')\nconst btnCloseDropbox = require('../../assets/icons/group-bar/btn-close-dropbox.png')\nconst btnAddList = require('../../assets/icons/group-bar/btn-add-list.png')\nconst btnCheckbox = require('../../assets/icons/font/btn-checkbox.svg')\nconst btnCheckboxHover = require('../../assets/icons/font/btn-checkbox-hover.svg')\nconst btnCheckboxBlank = require('../../assets/icons/font/btn-checkbox-blank.svg')\nconst btnCheckboxBlankHover = require('../../assets/icons/font/btn-checkbox-blank-hover.svg')\nconst btnDelete = require('../../assets/icons/font/btn-delete.svg')\nconst btnDeleteHover = require('../../assets/icons/font/btn-delete-hover.svg')\n\n@customElement('restful-font-selector')\nexport class FontSelector extends localize(i18next)(connect(store)(LitElement)) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        background-color: #fff;\n        /* --card-list-create-color: var(--primary-color); */\n        position: relative;\n      }\n\n      :host(.candrop) {\n        background: orange;\n        cursor: pointer;\n      }\n\n      #main {\n        overflow: auto;\n        padding: var(--popup-content-padding);\n        display: grid;\n        grid-template-columns: var(--card-list-template);\n        grid-auto-rows: var(--card-list-rows-height);\n        grid-gap: 20px;\n        box-sizing: border-box;\n        padding-top: 20px !important;\n      }\n\n      #main .card {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n        border-radius: var(--card-list-border-radius);\n        border: var(--font-selector-border);\n        background-color: var(--card-list-background-color);\n\n        position: relative;\n      }\n\n      .card .button-container {\n        position: absolute;\n        right: 0;\n        height: 100%;\n        display: flex;\n        direction: rtl;\n        flex-direction: column;\n        flex-wrap: wrap;\n      }\n\n      .card .button-container > mwc-icon,\n      .card .button-container > span {\n        background-color: var(--font-selector-icon-background-color);\n        text-align: center;\n        width: var(--font-selector-icon-size);\n        height: var(--font-selector-icon-size);\n        font: var(--font-selector-icon-font);\n        color: var(--font-selector-icon-color);\n      }\n\n      .card .button-container > mwc-icon:last-child,\n      .card .button-container > span:last-child {\n        border-bottom-left-radius: 12px;\n      }\n\n      .card .button-container > mwc-icon:hover,\n      .card .button-container > mwc-icon:active,\n      .card .button-container > span:hover,\n      .card .button-container > span:active {\n        background-color: var(--primary-color);\n        color: #fff;\n      }\n\n      #main .card.create {\n        overflow: visible;\n        background-color: initial;\n      }\n\n      #main .card:hover {\n        cursor: pointer;\n      }\n\n      [face] {\n        flex: 1;\n      }\n\n      [name] {\n        background-color: var(--primary-color);\n        opacity: 0.8;\n        margin-top: -35px;\n        width: 100%;\n        color: #fff;\n        font-weight: bolder;\n        font-size: 13px;\n        text-indent: 7px;\n      }\n\n      [provider] {\n        background-color: rgba(0, 0, 0, 0.7);\n        width: 100%;\n        min-height: 15px;\n        font-size: 0.6rem;\n        color: #fff;\n        text-indent: 7px;\n      }\n\n      #filter {\n        padding: 12px 12px 12px 20px;\n        background-color: var(--group-bar-background-color);\n        height: 28px;\n        z-index: 1;\n      }\n\n      select {\n        text-transform: capitalize;\n        float: right;\n      }\n\n      ul {\n        display: flex;\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        white-space: nowrap;\n        clear: both;\n      }\n\n      li {\n        padding: 0px 3px;\n      }\n\n      li:hover {\n        background-color: rgba(255, 180, 180, 1);\n      }\n\n      li a {\n        width: calc(100% - 24px);\n        padding: 5px 4px 1px 4px;\n        text-decoration: none;\n        font-size: 12px;\n        font-weight: bold;\n        color: rgb(233, 103, 128);\n        display: inline-block;\n      }\n\n      li span {\n        height: 16px;\n        margin-top: 4px;\n        border-radius: 2px;\n        float: right;\n        display: none;\n      }\n\n      li:hover span {\n        display: inline-block;\n      }\n\n      li span:hover {\n        background-color: #f8c2cc;\n      }\n\n      mwc-icon {\n        vertical-align: middle;\n      }\n\n      .group-select-box {\n        position: absolute;\n        width: 200px;\n        min-height: 22px;\n        font-size: 12px;\n        font-weight: bold;\n        color: #e96780;\n        border: 1px solid #ccc;\n        padding: 5px;\n        background-color: #fff;\n        float: left;\n        cursor: pointer;\n        display: inline-block;\n      }\n\n      .group-select-box > span:nth-child(1) {\n        padding: 4px 0 0 6px;\n        float: left;\n      }\n\n      .group-select-box > span:nth-child(2) {\n        float: right;\n        margin-top: 1px;\n      }\n\n      .select-box {\n        display: none;\n      }\n\n      .select-box.on {\n        display: block;\n        padding-top: 2px;\n      }\n\n      .select-box.active {\n        background-color: #1344;\n      }\n\n      .add-group {\n        cursor: pointer;\n      }\n\n      .btn-open-dropbox {\n        width: 8px;\n        height: 5px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnOpenDropboxColor)}) no-repeat;\n      }\n\n      .btn-close-dropbox {\n        width: 8px;\n        height: 5px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnCloseDropbox)}) no-repeat;\n      }\n\n      .btn-add-list-wrap {\n        margin: 5px 0 0 172px;\n        cursor: pointer;\n        display: inline-block;\n      }\n\n      .btn-add-list {\n        width: 9px;\n        height: 9px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnAddList)}) no-repeat;\n      }\n\n      select {\n        position: absolute;\n        width: 150px;\n        min-height: 22px;\n        font-size: 12px;\n        font-weight: bold;\n        color: #e96780;\n        border: 1px solid #ccc;\n        padding: 5px;\n        background-color: #fff;\n        z-index: 1;\n        float: left;\n        cursor: pointer;\n        display: inline-block;\n      }\n\n      .btn-checkbox {\n        width: 20px;\n        height: 20px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnCheckbox)}) no-repeat;\n      }\n      .card .button-container > span:hover > .btn-checkbox,\n      .card .button-container > span:active > .btn-checkbox {\n        background: url(${unsafeCSS(btnCheckboxHover)}) no-repeat;\n      }\n\n      .btn-checkbox-blank {\n        width: 20px;\n        height: 20px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnCheckboxBlank)}) no-repeat;\n      }\n      .card .button-container > span:hover > .btn-checkbox-blank,\n      .card .button-container > span:active > .btn-checkbox-blank {\n        background: url(${unsafeCSS(btnCheckboxBlankHover)}) no-repeat;\n      }\n\n      .btn-delete {\n        width: 20px;\n        height: 20px;\n        display: inline-block;\n        background: url(${unsafeCSS(btnDelete)}) no-repeat;\n      }\n      .card .button-container > span:hover > .btn-delete,\n      .card .button-container > span:active > .btn-delete {\n        background: url(${unsafeCSS(btnDeleteHover)}) no-repeat;\n      }\n    `\n  ]\n\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Number }) _page?: number\n  @property({ type: Number }) _total?: number\n  @property({ type: Boolean }) creatable?: boolean\n  @property({ type: String }) selectBoxToggle?: string | null\n  @property({ type: String }) btnDropBoxIcon?: string\n  @property({ type: String }) provider?: string\n\n  @query('#main') main!: HTMLDivElement\n  @query('#filter') filter!: HTMLDivElement\n  @query('font-creation-card-new') creationCard!: FontCreationCard\n\n  showGotoTop: any\n\n  constructor() {\n    super()\n    this.btnDropBoxIcon = 'btn-open-dropbox'\n  }\n\n  render() {\n    var fonts = this.fonts || []\n\n    return html`\n      <div id=\"filter\">\n        <div class=\"group-select-box\" @click=${this.toggleSelectBox}>\n          ${this.provider\n            ? html` <span>${this.provider}</span> `\n            : html` <span>${i18next.t('text.please choose a provider')}</span> `}\n          <span><i class=${this.btnDropBoxIcon || ''}></i></span>\n          <ul class=${`select-box ${this.selectBoxToggle}`}>\n            ${['google', 'custom'].map(\n              provider => html` <li\n                value=${provider}\n                @click=${e => {\n                  this.provider = provider\n                  this.requestUpdate()\n                }}\n              >\n                <a>${provider}</a>\n              </li>`\n            )}\n          </ul>\n        </div>\n      </div>\n      <div id=\"main\">\n        ${this.creatable\n          ? html`\n              <font-creation-card-new\n                class=\"card create\"\n                @create-font=${e => this.onCreateFont(e)}\n                @file-drop=${e => this.onAttachmentDropped(e)}\n              ></font-creation-card-new>\n            `\n          : html``}\n        ${fonts.map(\n          font => html`\n            <div class=\"card\" @click=${e => this.onClickSelect(font)}>\n              <div face>\n                <font .face=${font.name}>ABCDEFGHIJKLMN</font>\n                <font .face=${font.name}>abcdefghijklmn</font>\n              </div>\n              <div name>${font.name}</div>\n              <div provider>${font.provider}</div>\n              <div class=\"button-container\">\n                <span\n                  @click=${e => {\n                    e.stopPropagation()\n                    this.toggleActive(font)\n                  }}\n                >\n                  <i class=\"${font.active ? 'btn-checkbox' : 'btn-checkbox-blank'}\"></i>\n                </span>\n                <span\n                  @click=${e => {\n                    e.stopPropagation()\n                    this.deleteFont(font)\n                  }}\n                >\n                  <i class=\"btn-delete\"></i>\n                </span>\n              </div>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  toggleSelectBox() {\n    if (this.selectBoxToggle === 'on') {\n      this.selectBoxToggle = null\n      this.btnDropBoxIcon = 'btn-close-dropbox'\n    } else {\n      this.selectBoxToggle = 'on'\n      this.btnDropBoxIcon = 'btn-open-dropbox'\n    }\n  }\n\n  updated(changes) {\n    if (changes.has('fonts')) {\n      var creationCard = this.creationCard\n      if (creationCard) {\n        creationCard.reset()\n      }\n    }\n  }\n\n  stateChanged(state) {\n    this.fonts = state.font\n  }\n\n  refresh() {\n    return store.dispatch(fetchFontList())\n  }\n\n  toggleActive(font) {\n    store.dispatch(updateFont({ id: font.id, active: !font.active }))\n  }\n\n  onCreateFont(e) {\n    var font = e.detail\n    this.createFont(font)\n  }\n\n  async createFont(font) {\n    if (font._files && font._files.length > 0) {\n      let attachment = await this.attachFile(font._files[0], ['fullpath', 'refBy'])\n      font.id = attachment ? attachment.refBy : null\n      font.uri = attachment ? attachment.fullpath : null\n      delete font._files\n    }\n\n    store.dispatch(createFont(font))\n  }\n\n  async onAttachmentDropped(e) {\n    var isNonFontIncluded = false\n    var files = e.detail.filter(file => {\n      var isFontFormat = !!['.woff', '.woff2', '.eot', '.svg', '.svgz', '.ttf', '.otf'].find(ext =>\n        file.name.endsWith(ext)\n      )\n      if (!isFontFormat) {\n        isNonFontIncluded = true\n        return false\n      }\n      var alreadyExist = !!this.fonts.find(font => font.name == file.name.replace(/\\.[^/.]+$/, '').replace('.', '_'))\n      if (alreadyExist) return false\n      return true\n    })\n    // TODO alert if non-font file is included. ex) Non-font file is excluded in upload list.\n\n    if (files.length > 0) {\n      var attached = await this.attachFiles(files, ['name', 'fullpath', 'refBy'])\n      attached.forEach(attachment => {\n        this.createFont({\n          id: attachment.refBy,\n          name: attachment.name.replace(/\\.[^/.]+$/, '').replace('.', '_'), // cannot apply font correctly if '.' exists in name\n          provider: 'custom',\n          active: true,\n          uri: attachment.fullpath\n        })\n      })\n    }\n  }\n\n  /**\n   * attach a file\n   *\n   * @param { File } file file\n   * @param { Array<String> } fields fields to select from return\n   */\n  async attachFile(file, fields: string[] = []) {\n    var attaching = await client.mutate({\n      mutation: gql`\n        mutation ($attachment: NewAttachment!) {\n          createAttachment(attachment: $attachment) {\n            id\n          }\n        }\n      `,\n      variables: {\n        attachment: { refBy: uuidv4(), category: 'font', file }\n      },\n      context: {\n        hasUpload: true\n      }\n    })\n    // TODO mutation 이후 query 호출 안 해도 되도록 수정\n    // fullpath 값은 getter라서 그런지 뮤테이션에서 못 받아오는 듯\n    var attached = await client.query({\n      query: gql`\n        query($id: String!) {\n          attachment(id: $id) {\n            id\n            ${fields.join('\\n')}\n          }\n        }\n      `,\n      variables: {\n        id: attaching.data.createAttachment ? attaching.data.createAttachment.id : null\n      }\n    })\n\n    return attached.data.attachment\n  }\n\n  /**\n   * attach multiple files\n   *\n   * @param { Array<File> } files files\n   * @param { Array<String> } fields fields to select from return\n   */\n  async attachFiles(files, fields: string[] = []) {\n    var attaching = await client.mutate({\n      mutation: gql`\n        mutation ($attachments: [NewAttachment]!) {\n          createAttachments(attachments: $attachments) {\n            id\n          }\n        }\n      `,\n      variables: {\n        attachments: files.map(file => ({ refBy: uuidv4(), category: '', file }))\n      },\n      context: {\n        hasUpload: true\n      }\n    })\n    // TODO mutation 이후 query 호출 안 해도 되도록 수정\n    // fullpath 값은 getter라서 그런지 뮤테이션에서 못 받아오는 듯\n    var attached = await client.query({\n      query: gql`\n        query($filters: [Filter]) {\n          attachments(filters: $filters) {\n            items {\n              id\n              ${fields.join('\\n')}\n            }\n            total\n          }\n        }\n      `,\n      variables: {\n        filters: {\n          name: 'id',\n          operator: 'in',\n          value: attaching.data.createAttachments.map(attachment => attachment.id)\n        }\n      }\n    })\n    return attached.data.attachments.items\n  }\n\n  async deleteFont(font) {\n    try {\n      // require.resolve('@things-factory/attachment-ui')\n      await deleteAttachmentByRef(font.id)\n    } catch (e) {}\n\n    store.dispatch(deleteFont(font))\n  }\n\n  onClickSelect(font) {\n    this.dispatchEvent(\n      new CustomEvent('font-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          font\n        }\n      })\n    )\n  }\n}\n"]}

package/dist-client/pages/restful-scenario-detail.d.ts

@@ -0,0 +1 @@
+export {};