@fmsim/board 1.0.35 → 1.0.38

package/dist/src/component/restful-attachment-selector.js

@@ -0,0 +1,663 @@
+import { __decorate } from "tslib";
+import './restful-attachment-creation-card.js';
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { ScrollbarStyles, TooltipStyles } from '@operato/styles';
+import { sleep } from '@operato/utils';
+import { fetchAttachmentList, getRestServiceFullPath, createAttachment, deleteAttachment, deleteFile, getRestServiceSecondaryUrl } from '@fmsim/api/restful.js';
+const btnOpenDropboxColor = require('../../../icons/group-bar/btn-open-dropbox-color.png');
+const btnCloseDropbox = require('../../../icons/group-bar/btn-close-dropbox.png');
+const btnAddList = require('../../../icons/group-bar/btn-add-list.png');
+const btnZoom = require('../../../icons/attachment/btn-zoom.svg');
+const btnZoomHover = require('../../../icons/attachment/btn-zoom-hover.svg');
+const btnCopyLink = require('../../../icons/attachment/btn-copy-link.svg');
+const btnCopyLinkHover = require('../../../icons/attachment/btn-copy-link-hover.svg');
+const btnDelete = require('../../../icons/attachment/btn-delete.svg');
+const btnDeleteHover = require('../../../icons/attachment/btn-delete-hover.svg');
+const btnDownload = require('../../../icons/attachment/btn-download.svg');
+const btnDownloadHover = require('../../../icons/attachment/btn-download-hover.svg');
+const file = require('../../../icons/attachment/file.svg');
+let RestfulAttachmentSelector = class RestfulAttachmentSelector extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.categories = ['audio', 'video', 'image', 'text', 'application'];
+        this.attachments = [];
+        this._page = 1;
+        this._total = 0;
+        this.btnDropBoxIcon = 'btn-open-dropbox';
+        this.userName = localStorage.getItem('FMB_userNM') || '';
+    }
+    render() {
+        return html `
+      <div id="filter">
+        <div class="group-select-box" @click=${this.toggleSelectBox}>
+          ${this.category
+            ? html ` <span>${this.category}</span> `
+            : html ` <span>${i18next.t('text.please choose a category')}</span> `}
+          <span><i class=${this.btnDropBoxIcon}></i></span>
+          <ul class=${`select-box ${this.selectBoxToggle}`}>
+            <li
+              value=""
+              @click=${(e) => {
+            this.category = '';
+            this.requestUpdate();
+        }}
+            >
+              <a>${i18next.t('text.please choose a category')}</a>
+            </li>
+            ${this.categories.map(category => html ` <li
+                  value=${category}
+                  @click=${(e) => {
+            this.category = category;
+            this.requestUpdate();
+        }}
+                >
+                  <a>${category}</a>
+                </li>`)}
+          </ul>
+        </div>
+      </div>
+
+      <div id="main">
+        ${this.creatable
+            ? html `
+              <restful-attachment-creation-card
+                class="card create"
+                .categories=${this.categories}
+                .defaultCategory=${this.category}
+                @create-attachment=${(e) => this.onCreateAttachment(e)}
+                @file-drop=${(e) => this.onAttachmentDropped(e)}
+              ></restful-attachment-creation-card>
+            `
+            : html ``}
+        ${this.attachments.map(attachment => {
+            var _a;
+            var url = attachment.fullpath;
+            return html `
+            <div class="card" @click=${(e) => this.onClickSelect(attachment)}>
+              <div show>
+                ${attachment.category == 'image'
+                ? html ` <img src=${url} /> `
+                : attachment.category == 'video'
+                    ? html ` <video src=${url} controls></video> `
+                    : html `
+                        <div etc>
+                          <i class="file"></i>
+                          <span>${(_a = attachment.path) === null || _a === void 0 ? void 0 : _a.substr(attachment.path.lastIndexOf('.'))}</span>
+                        </div>
+                      `}
+              </div>
+              <a target="_blank" href=${url}>
+                <span class="btn-zoom-cover"><i class="btn-zoom"></i></span>
+              </a>
+              <div class="name">${attachment.name}</div>
+              <span @click=${(e) => this.onDeleteAttachment(attachment.id)} delete>
+                <i class="btn-delete"></i>
+              </span>
+              <a href=${attachment.download + '/' + encodeURIComponent(attachment.name)} download=${attachment.name}>
+                <span class="btn-download-cover" download><i class="btn-download"></i></span>
+              </a>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+    toggleSelectBox() {
+        if (this.selectBoxToggle === 'on') {
+            this.selectBoxToggle = null;
+            this.btnDropBoxIcon = 'btn-close-dropbox';
+        }
+        else {
+            this.selectBoxToggle = 'on';
+            this.btnDropBoxIcon = 'btn-open-dropbox';
+        }
+    }
+    async firstUpdated() {
+        this.renderRoot.addEventListener('click', async (e) => {
+            var target = e.target;
+            var url = target.getAttribute('data-clipboard-url');
+            if (url) {
+                var { protocol, hostname, port } = location;
+                await this.copy(`${protocol}//${hostname}:${port}${url}`);
+                target.setAttribute('data-tooltip', 'url copied!');
+                await sleep(2000);
+                target.removeAttribute('data-tooltip');
+            }
+        });
+        this.refreshAttachments();
+    }
+    updated(changed) {
+        if (changed.has('category')) {
+            this.refreshAttachments();
+        }
+    }
+    onClickSelect(attachment) {
+        this.dispatchEvent(new CustomEvent('attachment-selected', {
+            composed: true,
+            bubbles: true,
+            detail: {
+                attachment
+            }
+        }));
+    }
+    async onAttachmentDropped(e) {
+        var files = e.detail;
+        await this.createAttachments('', files);
+        this.refreshAttachments();
+    }
+    async onCreateAttachment(e) {
+        var { category, files, fileId } = e.detail;
+        files = Array.from(files);
+        await this.createAttachments(category, files, fileId);
+        this.refreshAttachments();
+    }
+    async onDeleteAttachment(id) {
+        await this.deleteAttachment(id);
+        this.refreshAttachments();
+    }
+    async refreshAttachments() {
+        var attachments = await this.getAttachments();
+        this.attachments = [...attachments];
+        if (this.creationCard) {
+            this.creationCard.reset();
+        }
+    }
+    async appendAttachments() {
+        var attachments = await this.getAttachments({ page: this._page + 1 });
+        this.attachments = [...this.attachments, ...attachments];
+    }
+    async getAttachments({ page = 1, limit = 1000 } = {}) {
+        var _a;
+        var filters = [];
+        var sortings = [];
+        var pagination = {
+            limit,
+            page
+        };
+        if (this.category)
+            filters.push({
+                name: 'category',
+                operator: 'eq',
+                value: this.category
+            });
+        var params = {
+            filters,
+            sortings,
+            pagination
+        };
+        let response = (_a = (await fetchAttachmentList(params))) === null || _a === void 0 ? void 0 : _a.data;
+        if (!response || !response.status) {
+            throw new Error('Error : fetchAttachmentList');
+        }
+        let attachmentListResponse = response.attachments;
+        if (!attachmentListResponse || !attachmentListResponse.items.length)
+            return [];
+        attachmentListResponse.items.forEach((attachment) => {
+            attachment.fullpath = getRestServiceFullPath() + '/images/' + attachment.path;
+            attachment.download = getRestServiceFullPath() + '/downloadFile/' + attachment.path;
+        });
+        this._total = attachmentListResponse.total;
+        this._page = page;
+        return attachmentListResponse.items;
+    }
+    async createAttachments(category, files, fileId) {
+        var _a;
+        try {
+            files[0].category = category;
+            files[0].fileId = fileId;
+            const body = {
+                category: files[0].category,
+                name: files[0].name,
+                size: files[0].size,
+                type: files[0].type,
+                fileId: files[0].fileId,
+                userName: this.userName
+            };
+            let result = (_a = (await createAttachment(body))) === null || _a === void 0 ? void 0 : _a.data;
+            if (!result || !result.status)
+                throw new Error('Create Error');
+        }
+        catch (ex) {
+            document.dispatchEvent(new CustomEvent('notify', {
+                detail: {
+                    level: 'error',
+                    message: ex,
+                    ex: ex
+                }
+            }));
+        }
+    }
+    async deleteAttachment(id) {
+        var _a, _b, _c;
+        let server = 'Primary';
+        try {
+            const result = (_a = (await deleteAttachment(id))) === null || _a === void 0 ? void 0 : _a.data;
+            if (!result || !result.status)
+                throw new Error('DB Error');
+            const deleteFileResult = (_b = (await deleteFile(result.attachment.path, 'primary'))) === null || _b === void 0 ? void 0 : _b.data;
+            if (!deleteFileResult || !deleteFileResult.status) {
+                throw new Error('Primary Server File Delete Error');
+            }
+            if (getRestServiceSecondaryUrl()) {
+                server = 'Secondary';
+                const deleteFileResultSecond = (_c = (await deleteFile(result.attachment.path, 'secondary'))) === null || _c === void 0 ? void 0 : _c.data;
+                if (!deleteFileResultSecond || !deleteFileResultSecond.status) {
+                    throw new Error('Secondary Server File Delete Error');
+                }
+            }
+        }
+        catch (ex) {
+            document.dispatchEvent(new CustomEvent('notify', {
+                detail: {
+                    level: 'error',
+                    message: server + ' Server File Delete Error // ' + ex,
+                    ex: ex
+                }
+            }));
+        }
+    }
+    async copy(copied) {
+        var textArea = document.createElement('textarea');
+        textArea.style.position = 'absolute';
+        textArea.style.opacity = '0';
+        textArea.value = copied;
+        document.body.appendChild(textArea);
+        await sleep(100);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+    }
+};
+RestfulAttachmentSelector.styles = [
+    ScrollbarStyles,
+    TooltipStyles,
+    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: repeat(auto-fill, minmax(260px, 1fr));
+        grid-auto-rows: var(--card-list-rows-height);
+        grid-gap: 20px;
+        padding-top: 10px !important;
+      }
+
+      #main .card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        overflow: hidden;
+        border-radius: var(--card-list-border-radius);
+        border: var(--attachment-selector-border);
+        background-color: var(--attachment-selector-background-color);
+
+        position: relative;
+      }
+
+      #main .card.create {
+        overflow: visible;
+        background-color: initial;
+        min-height: 120px;
+      }
+
+      #main .card:hover {
+        cursor: pointer;
+      }
+
+      .name {
+        background-color: var(--primary-color);
+        opacity: 0.8;
+        position: absolute;
+        bottom: 0px;
+        width: 100%;
+        padding: 2px 5px;
+        font: var(--attachment-selector-name-font);
+        color: #fff;
+        text-indent: 7px;
+      }
+
+      [show] {
+        height: 100%;
+      }
+
+      .card img,
+      .card video {
+        max-height: 100%;
+        max-width: 100%;
+      }
+
+      mwc-icon {
+        position: absolute;
+        right: 0px;
+        text-align: center;
+
+        background-color: var(--attachment-selector-icon-background-color);
+        width: var(--attachment-selector-icon-size);
+        height: var(--attachment-selector-icon-size);
+        font: var(--attachment-selector-icon-font);
+        color: var(--attachment-selector-icon-color);
+      }
+
+      mwc-icon:hover,
+      mwc-icon:active,
+      span:hover,
+      span:active {
+        background-color: var(--primary-color);
+        color: #fff;
+      }
+
+      [open-in-new] {
+        top: 0px;
+      }
+
+      [delete] {
+        top: 35px;
+      }
+
+      [download] {
+        top: 70px;
+        border-bottom-left-radius: 12px;
+      }
+
+      #filter {
+        padding: 12px 12px 12px 20px;
+        background-color: var(--group-bar-background-color);
+        height: 28px;
+        z-index: 1;
+      }
+
+      select {
+        text-transform: capitalize;
+        float: right;
+      }
+
+      [etc] mwc-icon:hover,
+      [etc] mwc-icon:active {
+        background-color: initial;
+        color: initial;
+      }
+
+      [etc] {
+        margin: auto;
+        margin-top: 45px;
+        position: relative;
+      }
+
+      [etc] mwc-icon {
+        position: initial;
+        opacity: 0.2;
+        width: initial;
+        height: initial;
+
+        font: var(--attachment-selector-etc-icon-font);
+        color: var(--attachment-selector-etc-icon-color);
+      }
+
+      [etc] span {
+        position: absolute;
+        bottom: 25px;
+        right: 8px;
+        padding: 1px 2px;
+        color: #fff;
+        text-transform: uppercase;
+        opacity: 0.8;
+
+        background-color: var(--attachment-selector-etc-background-color);
+        font: var(--attachment-selector-etc-font);
+      }
+
+      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 {
+        background-color: #fff !important;
+        color: #e96780 !important;
+      }
+
+      .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;
+      }
+
+      .card > span,
+      .card > a > span {
+        position: absolute;
+        width: 35px;
+        height: 35px;
+        right: 0px;
+      }
+
+      .btn-zoom-cover {
+        top: 0px;
+      }
+      .btn-zoom {
+        width: 20px;
+        height: 20px;
+        margin: 7px;
+        background: url(${unsafeCSS(btnZoom)}) no-repeat;
+        display: inline-block;
+      }
+      .btn-zoom-cover:hover > .btn-zoom {
+        background: url(${unsafeCSS(btnZoomHover)}) no-repeat;
+      }
+
+      .btn-copy-link {
+        width: 20px;
+        height: 20px;
+        margin: 7px;
+        background: url(${unsafeCSS(btnCopyLink)}) no-repeat;
+        display: inline-block;
+      }
+      .card > span:hover > .btn-copy-link {
+        background: url(${unsafeCSS(btnCopyLinkHover)}) no-repeat;
+      }
+
+      .btn-delete {
+        width: 20px;
+        height: 20px;
+        margin: 7px;
+        background: url(${unsafeCSS(btnDelete)}) no-repeat;
+        display: inline-block;
+      }
+      .card > span:hover > .btn-delete {
+        background: url(${unsafeCSS(btnDeleteHover)}) no-repeat;
+      }
+
+      .btn-download {
+        width: 20px;
+        height: 20px;
+        margin: 7px;
+        background: url(${unsafeCSS(btnDownload)}) no-repeat;
+        display: inline-block;
+      }
+      .btn-download-cover:hover > .btn-download {
+        background: url(${unsafeCSS(btnDownloadHover)}) no-repeat;
+      }
+
+      .file {
+        width: 52px;
+        height: 65px;
+        background: url(${unsafeCSS(file)}) no-repeat;
+        display: inline-block;
+      }
+    `
+];
+__decorate([
+    property({ type: Array })
+], RestfulAttachmentSelector.prototype, "categories", void 0);
+__decorate([
+    property({ type: Array })
+], RestfulAttachmentSelector.prototype, "attachments", void 0);
+__decorate([
+    property({ type: String })
+], RestfulAttachmentSelector.prototype, "category", void 0);
+__decorate([
+    property({ type: Number })
+], RestfulAttachmentSelector.prototype, "_page", void 0);
+__decorate([
+    property({ type: Number })
+], RestfulAttachmentSelector.prototype, "_total", void 0);
+__decorate([
+    property({ type: Boolean })
+], RestfulAttachmentSelector.prototype, "creatable", void 0);
+__decorate([
+    property({ type: String })
+], RestfulAttachmentSelector.prototype, "selectBoxToggle", void 0);
+__decorate([
+    property({ type: String })
+], RestfulAttachmentSelector.prototype, "btnDropBoxIcon", void 0);
+__decorate([
+    property({ type: String })
+], RestfulAttachmentSelector.prototype, "userName", void 0);
+__decorate([
+    query('#main')
+], RestfulAttachmentSelector.prototype, "main", void 0);
+__decorate([
+    query('attachment-creation-card')
+], RestfulAttachmentSelector.prototype, "creationCard", void 0);
+RestfulAttachmentSelector = __decorate([
+    customElement('restful-attachment-selector')
+], RestfulAttachmentSelector);
+export { RestfulAttachmentSelector };
+//# sourceMappingURL=restful-attachment-selector.js.map