@fmsim/board 1.0.38 → 1.0.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +1146 -1138
- package/dist/src/component/restful-attachment-selector.js +6 -13
- package/dist/src/component/restful-attachment-selector.js.map +1 -1
- package/dist/src/component/restful-file-selector.js +2 -2
- package/dist/src/component/restful-file-selector.js.map +1 -1
- package/dist/src/component/restful-input-attachment-selector.js +1 -3
- package/dist/src/component/restful-input-attachment-selector.js.map +1 -1
- package/dist/src/ox-board-component-info.d.ts +2 -0
- package/dist/src/ox-board-component-info.js +24 -4
- package/dist/src/ox-board-component-info.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
|
@@ -5,7 +5,7 @@ import { customElement, property, query } from 'lit/decorators.js';
|
|
|
5
5
|
import { i18next, localize } from '@operato/i18n';
|
|
6
6
|
import { ScrollbarStyles, TooltipStyles } from '@operato/styles';
|
|
7
7
|
import { sleep } from '@operato/utils';
|
|
8
|
-
import { fetchAttachmentList, getRestServiceFullPath, createAttachment, deleteAttachment, deleteFile
|
|
8
|
+
import { fetchAttachmentList, getRestServiceFullPath, createAttachment, deleteAttachment, deleteFile } from '@fmsim/api/restful.js';
|
|
9
9
|
const btnOpenDropboxColor = require('../../../icons/group-bar/btn-open-dropbox-color.png');
|
|
10
10
|
const btnCloseDropbox = require('../../../icons/group-bar/btn-close-dropbox.png');
|
|
11
11
|
const btnAddList = require('../../../icons/group-bar/btn-add-list.png');
|
|
@@ -73,7 +73,7 @@ let RestfulAttachmentSelector = class RestfulAttachmentSelector extends localize
|
|
|
73
73
|
: html ``}
|
|
74
74
|
${this.attachments.map(attachment => {
|
|
75
75
|
var _a;
|
|
76
|
-
var url = attachment.fullpath;
|
|
76
|
+
var url = getRestServiceFullPath() + attachment.fullpath;
|
|
77
77
|
return html `
|
|
78
78
|
<div class="card" @click=${(e) => this.onClickSelect(attachment)}>
|
|
79
79
|
<div show>
|
|
@@ -95,7 +95,7 @@ let RestfulAttachmentSelector = class RestfulAttachmentSelector extends localize
|
|
|
95
95
|
<span @click=${(e) => this.onDeleteAttachment(attachment.id)} delete>
|
|
96
96
|
<i class="btn-delete"></i>
|
|
97
97
|
</span>
|
|
98
|
-
<a href=${
|
|
98
|
+
<a href=${getRestServiceFullPath() + attachment.download} download=${attachment.name}>
|
|
99
99
|
<span class="btn-download-cover" download><i class="btn-download"></i></span>
|
|
100
100
|
</a>
|
|
101
101
|
</div>
|
|
@@ -195,8 +195,8 @@ let RestfulAttachmentSelector = class RestfulAttachmentSelector extends localize
|
|
|
195
195
|
if (!attachmentListResponse || !attachmentListResponse.items.length)
|
|
196
196
|
return [];
|
|
197
197
|
attachmentListResponse.items.forEach((attachment) => {
|
|
198
|
-
attachment.fullpath =
|
|
199
|
-
attachment.download =
|
|
198
|
+
attachment.fullpath = '/images/' + attachment.path;
|
|
199
|
+
attachment.download = '/downloadFile/' + attachment.path + '/' + encodeURIComponent(attachment.name);
|
|
200
200
|
});
|
|
201
201
|
this._total = attachmentListResponse.total;
|
|
202
202
|
this._page = page;
|
|
@@ -230,7 +230,7 @@ let RestfulAttachmentSelector = class RestfulAttachmentSelector extends localize
|
|
|
230
230
|
}
|
|
231
231
|
}
|
|
232
232
|
async deleteAttachment(id) {
|
|
233
|
-
var _a, _b
|
|
233
|
+
var _a, _b;
|
|
234
234
|
let server = 'Primary';
|
|
235
235
|
try {
|
|
236
236
|
const result = (_a = (await deleteAttachment(id))) === null || _a === void 0 ? void 0 : _a.data;
|
|
@@ -240,13 +240,6 @@ let RestfulAttachmentSelector = class RestfulAttachmentSelector extends localize
|
|
|
240
240
|
if (!deleteFileResult || !deleteFileResult.status) {
|
|
241
241
|
throw new Error('Primary Server File Delete Error');
|
|
242
242
|
}
|
|
243
|
-
if (getRestServiceSecondaryUrl()) {
|
|
244
|
-
server = 'Secondary';
|
|
245
|
-
const deleteFileResultSecond = (_c = (await deleteFile(result.attachment.path, 'secondary'))) === null || _c === void 0 ? void 0 : _c.data;
|
|
246
|
-
if (!deleteFileResultSecond || !deleteFileResultSecond.status) {
|
|
247
|
-
throw new Error('Secondary Server File Delete Error');
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
243
|
}
|
|
251
244
|
catch (ex) {
|
|
252
245
|
document.dispatchEvent(new CustomEvent('notify', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"restful-attachment-selector.js","sourceRoot":"","sources":["../../../src/component/restful-attachment-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './restful-attachment-creation-card.js'\n\nimport { css, html, LitElement, PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles, TooltipStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\n\nimport {\n fetchAttachmentList,\n getRestServiceFullPath,\n createAttachment,\n deleteAttachment,\n deleteFile,\n getRestServiceSecondaryUrl\n} from '@fmsim/api/restful.js'\n\nimport { RestfulAttachmentCreationCard } from './restful-attachment-creation-card.js'\n\nconst btnOpenDropboxColor = require('../../../icons/group-bar/btn-open-dropbox-color.png')\nconst btnCloseDropbox = require('../../../icons/group-bar/btn-close-dropbox.png')\nconst btnAddList = require('../../../icons/group-bar/btn-add-list.png')\nconst btnZoom = require('../../../icons/attachment/btn-zoom.svg')\nconst btnZoomHover = require('../../../icons/attachment/btn-zoom-hover.svg')\nconst btnCopyLink = require('../../../icons/attachment/btn-copy-link.svg')\nconst btnCopyLinkHover = require('../../../icons/attachment/btn-copy-link-hover.svg')\nconst btnDelete = require('../../../icons/attachment/btn-delete.svg')\nconst btnDeleteHover = require('../../../icons/attachment/btn-delete-hover.svg')\nconst btnDownload = require('../../../icons/attachment/btn-download.svg')\nconst btnDownloadHover = require('../../../icons/attachment/btn-download-hover.svg')\nconst file = require('../../../icons/attachment/file.svg')\n\n@customElement('restful-attachment-selector')\nexport class RestfulAttachmentSelector extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n TooltipStyles,\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\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: repeat(auto-fill, minmax(260px, 1fr));\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n padding-top: 10px !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(--attachment-selector-border);\n background-color: var(--attachment-selector-background-color);\n\n position: relative;\n }\n\n #main .card.create {\n overflow: visible;\n background-color: initial;\n min-height: 120px;\n }\n\n #main .card:hover {\n cursor: pointer;\n }\n\n .name {\n background-color: var(--primary-color);\n opacity: 0.8;\n position: absolute;\n bottom: 0px;\n width: 100%;\n padding: 2px 5px;\n font: var(--attachment-selector-name-font);\n color: #fff;\n text-indent: 7px;\n }\n\n [show] {\n height: 100%;\n }\n\n .card img,\n .card video {\n max-height: 100%;\n max-width: 100%;\n }\n\n mwc-icon {\n position: absolute;\n right: 0px;\n text-align: center;\n\n background-color: var(--attachment-selector-icon-background-color);\n width: var(--attachment-selector-icon-size);\n height: var(--attachment-selector-icon-size);\n font: var(--attachment-selector-icon-font);\n color: var(--attachment-selector-icon-color);\n }\n\n mwc-icon:hover,\n mwc-icon:active,\n span:hover,\n span:active {\n background-color: var(--primary-color);\n color: #fff;\n }\n\n [open-in-new] {\n top: 0px;\n }\n\n [delete] {\n top: 35px;\n }\n\n [download] {\n top: 70px;\n border-bottom-left-radius: 12px;\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 [etc] mwc-icon:hover,\n [etc] mwc-icon:active {\n background-color: initial;\n color: initial;\n }\n\n [etc] {\n margin: auto;\n margin-top: 45px;\n position: relative;\n }\n\n [etc] mwc-icon {\n position: initial;\n opacity: 0.2;\n width: initial;\n height: initial;\n\n font: var(--attachment-selector-etc-icon-font);\n color: var(--attachment-selector-etc-icon-color);\n }\n\n [etc] span {\n position: absolute;\n bottom: 25px;\n right: 8px;\n padding: 1px 2px;\n color: #fff;\n text-transform: uppercase;\n opacity: 0.8;\n\n background-color: var(--attachment-selector-etc-background-color);\n font: var(--attachment-selector-etc-font);\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 {\n background-color: #fff !important;\n color: #e96780 !important;\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 .card > span,\n .card > a > span {\n position: absolute;\n width: 35px;\n height: 35px;\n right: 0px;\n }\n\n .btn-zoom-cover {\n top: 0px;\n }\n .btn-zoom {\n width: 20px;\n height: 20px;\n margin: 7px;\n background: url(${unsafeCSS(btnZoom)}) no-repeat;\n display: inline-block;\n }\n .btn-zoom-cover:hover > .btn-zoom {\n background: url(${unsafeCSS(btnZoomHover)}) no-repeat;\n }\n\n .btn-copy-link {\n width: 20px;\n height: 20px;\n margin: 7px;\n background: url(${unsafeCSS(btnCopyLink)}) no-repeat;\n display: inline-block;\n }\n .card > span:hover > .btn-copy-link {\n background: url(${unsafeCSS(btnCopyLinkHover)}) no-repeat;\n }\n\n .btn-delete {\n width: 20px;\n height: 20px;\n margin: 7px;\n background: url(${unsafeCSS(btnDelete)}) no-repeat;\n display: inline-block;\n }\n .card > span:hover > .btn-delete {\n background: url(${unsafeCSS(btnDeleteHover)}) no-repeat;\n }\n\n .btn-download {\n width: 20px;\n height: 20px;\n margin: 7px;\n background: url(${unsafeCSS(btnDownload)}) no-repeat;\n display: inline-block;\n }\n .btn-download-cover:hover > .btn-download {\n background: url(${unsafeCSS(btnDownloadHover)}) no-repeat;\n }\n\n .file {\n width: 52px;\n height: 65px;\n background: url(${unsafeCSS(file)}) no-repeat;\n display: inline-block;\n }\n `\n ]\n\n @property({ type: Array }) categories: string[] = ['audio', 'video', 'image', 'text', 'application']\n @property({ type: Array }) attachments: any[] = []\n @property({ type: String }) category?: string\n @property({ type: Number }) _page: number = 1\n @property({ type: Number }) _total: number = 0\n @property({ type: Boolean }) creatable?: boolean\n @property({ type: String }) selectBoxToggle?: string | null\n @property({ type: String }) btnDropBoxIcon: string = 'btn-open-dropbox'\n @property({ type: String }) userName?: string = localStorage.getItem('FMB_userNM') || ''\n\n @query('#main') main!: HTMLDivElement\n @query('attachment-creation-card') creationCard!: RestfulAttachmentCreationCard\n\n render() {\n return html`\n <div id=\"filter\">\n <div class=\"group-select-box\" @click=${this.toggleSelectBox}>\n ${this.category\n ? html` <span>${this.category}</span> `\n : html` <span>${i18next.t('text.please choose a category')}</span> `}\n <span><i class=${this.btnDropBoxIcon}></i></span>\n <ul class=${`select-box ${this.selectBoxToggle}`}>\n <li\n value=\"\"\n @click=${(e: Event) => {\n this.category = ''\n this.requestUpdate()\n }}\n >\n <a>${i18next.t('text.please choose a category')}</a>\n </li>\n ${this.categories.map(\n category =>\n html` <li\n value=${category}\n @click=${(e: Event) => {\n this.category = category\n this.requestUpdate()\n }}\n >\n <a>${category}</a>\n </li>`\n )}\n </ul>\n </div>\n </div>\n\n <div id=\"main\">\n ${this.creatable\n ? html`\n <restful-attachment-creation-card\n class=\"card create\"\n .categories=${this.categories}\n .defaultCategory=${this.category}\n @create-attachment=${(e: Event) => this.onCreateAttachment(e)}\n @file-drop=${(e: Event) => this.onAttachmentDropped(e)}\n ></restful-attachment-creation-card>\n `\n : html``}\n ${this.attachments.map(attachment => {\n var url = attachment.fullpath\n return html`\n <div class=\"card\" @click=${(e: Event) => this.onClickSelect(attachment)}>\n <div show>\n ${attachment.category == 'image'\n ? html` <img src=${url} /> `\n : attachment.category == 'video'\n ? html` <video src=${url} controls></video> `\n : html`\n <div etc>\n <i class=\"file\"></i>\n <span>${attachment.path?.substr(attachment.path.lastIndexOf('.'))}</span>\n </div>\n `}\n </div>\n <a target=\"_blank\" href=${url}>\n <span class=\"btn-zoom-cover\"><i class=\"btn-zoom\"></i></span>\n </a>\n <div class=\"name\">${attachment.name}</div>\n <span @click=${(e: Event) => this.onDeleteAttachment(attachment.id)} delete>\n <i class=\"btn-delete\"></i>\n </span>\n <a href=${attachment.download + '/' + encodeURIComponent(attachment.name)} download=${attachment.name}>\n <span class=\"btn-download-cover\" download><i class=\"btn-download\"></i></span>\n </a>\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 async firstUpdated() {\n this.renderRoot.addEventListener('click', async e => {\n var target = e.target as HTMLElement\n var url = target.getAttribute('data-clipboard-url')\n if (url) {\n var { protocol, hostname, port } = location\n await this.copy(`${protocol}//${hostname}:${port}${url}`)\n\n target.setAttribute('data-tooltip', 'url copied!')\n await sleep(2000)\n target.removeAttribute('data-tooltip')\n }\n })\n\n this.refreshAttachments()\n }\n\n updated(changed: PropertyValues<this>) {\n if (changed.has('category')) {\n this.refreshAttachments()\n }\n }\n\n onClickSelect(attachment: any) {\n this.dispatchEvent(\n new CustomEvent('attachment-selected', {\n composed: true,\n bubbles: true,\n detail: {\n attachment\n }\n })\n )\n }\n\n async onAttachmentDropped(e: Event) {\n var files = (e as CustomEvent).detail\n\n await this.createAttachments('', files)\n this.refreshAttachments()\n }\n\n async onCreateAttachment(e: Event) {\n var { category, files, fileId } = (e as CustomEvent).detail\n\n files = Array.from(files)\n await this.createAttachments(category, files, fileId)\n this.refreshAttachments()\n }\n\n async onDeleteAttachment(id: string) {\n await this.deleteAttachment(id)\n\n this.refreshAttachments()\n }\n\n async refreshAttachments() {\n var attachments = await this.getAttachments()\n this.attachments = [...attachments]\n\n if (this.creationCard) {\n this.creationCard.reset()\n }\n }\n\n async appendAttachments() {\n var attachments = await this.getAttachments({ page: this._page + 1 })\n this.attachments = [...this.attachments, ...attachments]\n }\n\n async getAttachments({ page = 1, limit = 1000 } = {}) {\n var filters = [] as any[]\n var sortings = [] as any[]\n var pagination = {\n limit,\n page\n }\n\n if (this.category)\n filters.push({\n name: 'category',\n operator: 'eq',\n value: this.category\n })\n\n var params = {\n filters,\n sortings,\n pagination\n }\n\n let response = (await fetchAttachmentList(params))?.data\n if (!response || !response.status) {\n throw new Error('Error : fetchAttachmentList')\n }\n\n let attachmentListResponse = response.attachments\n\n if (!attachmentListResponse || !attachmentListResponse.items.length) return []\n attachmentListResponse.items.forEach((attachment: any) => {\n attachment.fullpath = getRestServiceFullPath() + '/images/' + attachment.path\n attachment.download = getRestServiceFullPath() + '/downloadFile/' + attachment.path\n })\n this._total = attachmentListResponse.total\n this._page = page\n\n return attachmentListResponse.items\n }\n\n async createAttachments(category: string, files: any[], fileId?: string) {\n try {\n files[0].category = category\n files[0].fileId = fileId\n const body = {\n category: files[0].category,\n name: files[0].name,\n size: files[0].size,\n type: files[0].type,\n fileId: files[0].fileId,\n userName: this.userName\n }\n let result = (await createAttachment(body))?.data\n if (!result || !result.status) throw new Error('Create Error')\n } catch (ex) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'error',\n message: ex,\n ex: ex\n }\n })\n )\n }\n }\n\n async deleteAttachment(id: string) {\n let server = 'Primary'\n try {\n const result = (await deleteAttachment(id))?.data\n if (!result || !result.status) throw new Error('DB Error')\n\n const deleteFileResult = (await deleteFile(result.attachment.path, 'primary'))?.data\n if (!deleteFileResult || !deleteFileResult.status) {\n throw new Error('Primary Server File Delete Error')\n }\n\n if (getRestServiceSecondaryUrl()) {\n server = 'Secondary'\n const deleteFileResultSecond = (await deleteFile(result.attachment.path, 'secondary'))?.data\n if (!deleteFileResultSecond || !deleteFileResultSecond.status) {\n throw new Error('Secondary Server File Delete Error')\n }\n }\n } catch (ex) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'error',\n message: server + ' Server File Delete Error // ' + ex,\n ex: ex\n }\n })\n )\n }\n }\n\n async copy(copied: any) {\n var textArea = document.createElement('textarea')\n textArea.style.position = 'absolute'\n textArea.style.opacity = '0'\n textArea.value = copied\n document.body.appendChild(textArea)\n\n await sleep(100)\n\n textArea.select()\n\n document.execCommand('copy')\n document.body.removeChild(textArea)\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"restful-attachment-selector.js","sourceRoot":"","sources":["../../../src/component/restful-attachment-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './restful-attachment-creation-card.js'\n\nimport { css, html, LitElement, PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles, TooltipStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\n\nimport {\n fetchAttachmentList,\n getRestServiceFullPath,\n createAttachment,\n deleteAttachment,\n deleteFile\n} from '@fmsim/api/restful.js'\n\nimport { RestfulAttachmentCreationCard } from './restful-attachment-creation-card.js'\n\nconst btnOpenDropboxColor = require('../../../icons/group-bar/btn-open-dropbox-color.png')\nconst btnCloseDropbox = require('../../../icons/group-bar/btn-close-dropbox.png')\nconst btnAddList = require('../../../icons/group-bar/btn-add-list.png')\nconst btnZoom = require('../../../icons/attachment/btn-zoom.svg')\nconst btnZoomHover = require('../../../icons/attachment/btn-zoom-hover.svg')\nconst btnCopyLink = require('../../../icons/attachment/btn-copy-link.svg')\nconst btnCopyLinkHover = require('../../../icons/attachment/btn-copy-link-hover.svg')\nconst btnDelete = require('../../../icons/attachment/btn-delete.svg')\nconst btnDeleteHover = require('../../../icons/attachment/btn-delete-hover.svg')\nconst btnDownload = require('../../../icons/attachment/btn-download.svg')\nconst btnDownloadHover = require('../../../icons/attachment/btn-download-hover.svg')\nconst file = require('../../../icons/attachment/file.svg')\n\n@customElement('restful-attachment-selector')\nexport class RestfulAttachmentSelector extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n TooltipStyles,\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\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: repeat(auto-fill, minmax(260px, 1fr));\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n padding-top: 10px !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(--attachment-selector-border);\n background-color: var(--attachment-selector-background-color);\n\n position: relative;\n }\n\n #main .card.create {\n overflow: visible;\n background-color: initial;\n min-height: 120px;\n }\n\n #main .card:hover {\n cursor: pointer;\n }\n\n .name {\n background-color: var(--primary-color);\n opacity: 0.8;\n position: absolute;\n bottom: 0px;\n width: 100%;\n padding: 2px 5px;\n font: var(--attachment-selector-name-font);\n color: #fff;\n text-indent: 7px;\n }\n\n [show] {\n height: 100%;\n }\n\n .card img,\n .card video {\n max-height: 100%;\n max-width: 100%;\n }\n\n mwc-icon {\n position: absolute;\n right: 0px;\n text-align: center;\n\n background-color: var(--attachment-selector-icon-background-color);\n width: var(--attachment-selector-icon-size);\n height: var(--attachment-selector-icon-size);\n font: var(--attachment-selector-icon-font);\n color: var(--attachment-selector-icon-color);\n }\n\n mwc-icon:hover,\n mwc-icon:active,\n span:hover,\n span:active {\n background-color: var(--primary-color);\n color: #fff;\n }\n\n [open-in-new] {\n top: 0px;\n }\n\n [delete] {\n top: 35px;\n }\n\n [download] {\n top: 70px;\n border-bottom-left-radius: 12px;\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 [etc] mwc-icon:hover,\n [etc] mwc-icon:active {\n background-color: initial;\n color: initial;\n }\n\n [etc] {\n margin: auto;\n margin-top: 45px;\n position: relative;\n }\n\n [etc] mwc-icon {\n position: initial;\n opacity: 0.2;\n width: initial;\n height: initial;\n\n font: var(--attachment-selector-etc-icon-font);\n color: var(--attachment-selector-etc-icon-color);\n }\n\n [etc] span {\n position: absolute;\n bottom: 25px;\n right: 8px;\n padding: 1px 2px;\n color: #fff;\n text-transform: uppercase;\n opacity: 0.8;\n\n background-color: var(--attachment-selector-etc-background-color);\n font: var(--attachment-selector-etc-font);\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 {\n background-color: #fff !important;\n color: #e96780 !important;\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 .card > span,\n .card > a > span {\n position: absolute;\n width: 35px;\n height: 35px;\n right: 0px;\n }\n\n .btn-zoom-cover {\n top: 0px;\n }\n .btn-zoom {\n width: 20px;\n height: 20px;\n margin: 7px;\n background: url(${unsafeCSS(btnZoom)}) no-repeat;\n display: inline-block;\n }\n .btn-zoom-cover:hover > .btn-zoom {\n background: url(${unsafeCSS(btnZoomHover)}) no-repeat;\n }\n\n .btn-copy-link {\n width: 20px;\n height: 20px;\n margin: 7px;\n background: url(${unsafeCSS(btnCopyLink)}) no-repeat;\n display: inline-block;\n }\n .card > span:hover > .btn-copy-link {\n background: url(${unsafeCSS(btnCopyLinkHover)}) no-repeat;\n }\n\n .btn-delete {\n width: 20px;\n height: 20px;\n margin: 7px;\n background: url(${unsafeCSS(btnDelete)}) no-repeat;\n display: inline-block;\n }\n .card > span:hover > .btn-delete {\n background: url(${unsafeCSS(btnDeleteHover)}) no-repeat;\n }\n\n .btn-download {\n width: 20px;\n height: 20px;\n margin: 7px;\n background: url(${unsafeCSS(btnDownload)}) no-repeat;\n display: inline-block;\n }\n .btn-download-cover:hover > .btn-download {\n background: url(${unsafeCSS(btnDownloadHover)}) no-repeat;\n }\n\n .file {\n width: 52px;\n height: 65px;\n background: url(${unsafeCSS(file)}) no-repeat;\n display: inline-block;\n }\n `\n ]\n\n @property({ type: Array }) categories: string[] = ['audio', 'video', 'image', 'text', 'application']\n @property({ type: Array }) attachments: any[] = []\n @property({ type: String }) category?: string\n @property({ type: Number }) _page: number = 1\n @property({ type: Number }) _total: number = 0\n @property({ type: Boolean }) creatable?: boolean\n @property({ type: String }) selectBoxToggle?: string | null\n @property({ type: String }) btnDropBoxIcon: string = 'btn-open-dropbox'\n @property({ type: String }) userName?: string = localStorage.getItem('FMB_userNM') || ''\n\n @query('#main') main!: HTMLDivElement\n @query('attachment-creation-card') creationCard!: RestfulAttachmentCreationCard\n\n render() {\n return html`\n <div id=\"filter\">\n <div class=\"group-select-box\" @click=${this.toggleSelectBox}>\n ${this.category\n ? html` <span>${this.category}</span> `\n : html` <span>${i18next.t('text.please choose a category')}</span> `}\n <span><i class=${this.btnDropBoxIcon}></i></span>\n <ul class=${`select-box ${this.selectBoxToggle}`}>\n <li\n value=\"\"\n @click=${(e: Event) => {\n this.category = ''\n this.requestUpdate()\n }}\n >\n <a>${i18next.t('text.please choose a category')}</a>\n </li>\n ${this.categories.map(\n category =>\n html` <li\n value=${category}\n @click=${(e: Event) => {\n this.category = category\n this.requestUpdate()\n }}\n >\n <a>${category}</a>\n </li>`\n )}\n </ul>\n </div>\n </div>\n\n <div id=\"main\">\n ${this.creatable\n ? html`\n <restful-attachment-creation-card\n class=\"card create\"\n .categories=${this.categories}\n .defaultCategory=${this.category}\n @create-attachment=${(e: Event) => this.onCreateAttachment(e)}\n @file-drop=${(e: Event) => this.onAttachmentDropped(e)}\n ></restful-attachment-creation-card>\n `\n : html``}\n ${this.attachments.map(attachment => {\n var url = getRestServiceFullPath() + attachment.fullpath\n return html`\n <div class=\"card\" @click=${(e: Event) => this.onClickSelect(attachment)}>\n <div show>\n ${attachment.category == 'image'\n ? html` <img src=${url} /> `\n : attachment.category == 'video'\n ? html` <video src=${url} controls></video> `\n : html`\n <div etc>\n <i class=\"file\"></i>\n <span>${attachment.path?.substr(attachment.path.lastIndexOf('.'))}</span>\n </div>\n `}\n </div>\n <a target=\"_blank\" href=${url}>\n <span class=\"btn-zoom-cover\"><i class=\"btn-zoom\"></i></span>\n </a>\n <div class=\"name\">${attachment.name}</div>\n <span @click=${(e: Event) => this.onDeleteAttachment(attachment.id)} delete>\n <i class=\"btn-delete\"></i>\n </span>\n <a href=${getRestServiceFullPath() + attachment.download} download=${attachment.name}>\n <span class=\"btn-download-cover\" download><i class=\"btn-download\"></i></span>\n </a>\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 async firstUpdated() {\n this.renderRoot.addEventListener('click', async e => {\n var target = e.target as HTMLElement\n var url = target.getAttribute('data-clipboard-url')\n if (url) {\n var { protocol, hostname, port } = location\n await this.copy(`${protocol}//${hostname}:${port}${url}`)\n\n target.setAttribute('data-tooltip', 'url copied!')\n await sleep(2000)\n target.removeAttribute('data-tooltip')\n }\n })\n\n this.refreshAttachments()\n }\n\n updated(changed: PropertyValues<this>) {\n if (changed.has('category')) {\n this.refreshAttachments()\n }\n }\n\n onClickSelect(attachment: any) {\n this.dispatchEvent(\n new CustomEvent('attachment-selected', {\n composed: true,\n bubbles: true,\n detail: {\n attachment\n }\n })\n )\n }\n\n async onAttachmentDropped(e: Event) {\n var files = (e as CustomEvent).detail\n\n await this.createAttachments('', files)\n this.refreshAttachments()\n }\n\n async onCreateAttachment(e: Event) {\n var { category, files, fileId } = (e as CustomEvent).detail\n\n files = Array.from(files)\n await this.createAttachments(category, files, fileId)\n this.refreshAttachments()\n }\n\n async onDeleteAttachment(id: string) {\n await this.deleteAttachment(id)\n\n this.refreshAttachments()\n }\n\n async refreshAttachments() {\n var attachments = await this.getAttachments()\n this.attachments = [...attachments]\n\n if (this.creationCard) {\n this.creationCard.reset()\n }\n }\n\n async appendAttachments() {\n var attachments = await this.getAttachments({ page: this._page + 1 })\n this.attachments = [...this.attachments, ...attachments]\n }\n\n async getAttachments({ page = 1, limit = 1000 } = {}) {\n var filters = [] as any[]\n var sortings = [] as any[]\n var pagination = {\n limit,\n page\n }\n\n if (this.category)\n filters.push({\n name: 'category',\n operator: 'eq',\n value: this.category\n })\n\n var params = {\n filters,\n sortings,\n pagination\n }\n\n let response = (await fetchAttachmentList(params))?.data\n if (!response || !response.status) {\n throw new Error('Error : fetchAttachmentList')\n }\n\n let attachmentListResponse = response.attachments\n\n if (!attachmentListResponse || !attachmentListResponse.items.length) return []\n attachmentListResponse.items.forEach((attachment: any) => {\n attachment.fullpath = '/images/' + attachment.path\n attachment.download = '/downloadFile/' + attachment.path + '/' + encodeURIComponent(attachment.name)\n })\n this._total = attachmentListResponse.total\n this._page = page\n\n return attachmentListResponse.items\n }\n\n async createAttachments(category: string, files: any[], fileId?: string) {\n try {\n files[0].category = category\n files[0].fileId = fileId\n const body = {\n category: files[0].category,\n name: files[0].name,\n size: files[0].size,\n type: files[0].type,\n fileId: files[0].fileId,\n userName: this.userName\n }\n let result = (await createAttachment(body))?.data\n if (!result || !result.status) throw new Error('Create Error')\n } catch (ex) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'error',\n message: ex,\n ex: ex\n }\n })\n )\n }\n }\n\n async deleteAttachment(id: string) {\n let server = 'Primary'\n try {\n const result = (await deleteAttachment(id))?.data\n if (!result || !result.status) throw new Error('DB Error')\n\n const deleteFileResult = (await deleteFile(result.attachment.path, 'primary'))?.data\n if (!deleteFileResult || !deleteFileResult.status) {\n throw new Error('Primary Server File Delete Error')\n }\n } catch (ex) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'error',\n message: server + ' Server File Delete Error // ' + ex,\n ex: ex\n }\n })\n )\n }\n }\n\n async copy(copied: any) {\n var textArea = document.createElement('textarea')\n textArea.style.position = 'absolute'\n textArea.style.opacity = '0'\n textArea.value = copied\n document.body.appendChild(textArea)\n\n await sleep(100)\n\n textArea.select()\n\n document.execCommand('copy')\n document.body.removeChild(textArea)\n }\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { css, html, LitElement } from 'lit';
|
|
3
3
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
4
|
-
import {
|
|
4
|
+
import { getRestServiceFullPath, getUploadTempUrl } from '@fmsim/api/restful.js';
|
|
5
5
|
let RestfulFileSelector = class RestfulFileSelector extends LitElement {
|
|
6
6
|
constructor() {
|
|
7
7
|
super(...arguments);
|
|
@@ -85,7 +85,7 @@ let RestfulFileSelector = class RestfulFileSelector extends LitElement {
|
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
};
|
|
88
|
-
xhr.open('POST',
|
|
88
|
+
xhr.open('POST', getRestServiceFullPath() + getUploadTempUrl());
|
|
89
89
|
xhr.send(formData);
|
|
90
90
|
}
|
|
91
91
|
onImageFileChanged(e) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"restful-file-selector.js","sourceRoot":"","sources":["../../../src/component/restful-file-selector.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"restful-file-selector.js","sourceRoot":"","sources":["../../../src/component/restful-file-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { getRestServiceFullPath, getUploadTempUrl } from '@fmsim/api/restful.js'\n\n@customElement('restful-file-selector')\nexport class RestfulFileSelector extends LitElement {\n static styles = [\n css`\n :host {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n }\n\n #input-box {\n display: flex;\n width: 100%;\n height: 100%;\n }\n\n input[type='file'] {\n position: absolute;\n width: 0px;\n height: 0px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n\n label {\n padding: unset;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: var(--file-selector-color, #999);\n font-size: inherit;\n line-height: normal;\n vertical-align: middle;\n background-color: var(--file-selector-bg-color, #fdfdfd);\n cursor: pointer;\n border: var(--file-selector-border, 1px solid #ebebeb);\n border-radius: var(--file-selector-border-radius, 0.25em);\n }\n\n /* named upload */\n .upload-name {\n flex: 1;\n padding: 0.5em 0.75em; /* label의 패딩값과 일치 */\n font-size: inherit;\n font-family: inherit;\n line-height: normal;\n vertical-align: middle;\n background-color: #f5f5f5;\n border: 1px solid #ebebeb;\n border-bottom-color: #e2e2e2;\n border-radius: 0.25em;\n -webkit-appearance: none; /* 네이티브 외형 감추기 */\n -moz-appearance: none;\n appearance: none;\n }\n `\n ]\n\n @property({ type: String }) label: string = 'select file'\n @property({ type: String }) accept?: string\n @property({ type: Boolean, attribute: 'show-filename' }) showFilename?: boolean\n @property({ type: Boolean, attribute: 'multiple' }) multiple: boolean = false\n @property({ type: Array }) _files: any[] = []\n\n @query('#input-file') fileInput!: HTMLInputElement\n\n render() {\n return html`\n <div id=\"input-box\">\n ${this.showFilename\n ? html`\n <input class=\"upload-name\" value=\"${this._files.map(f => f.name).join(', ') || this.label}\" disabled />\n `\n : html``}\n <label for=\"input-file\">${this.label}</label>\n <input\n id=\"input-file\"\n type=\"file\"\n accept=${this.accept || ''}\n class=\"upload-hidden\"\n ?multiple=${this.multiple}\n hidden\n multiple\n onchange=${(e: Event) => {\n this.onFileChange(e)\n }}\n @change=${(e: Event) => {\n this.onFileChange(e)\n }}\n />\n </div>\n `\n }\n\n getUUID() {\n // UUID v4 generator in JavaScript (RFC4122 compliant)\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {\n var r = (Math.random() * 16) | 0,\n v = c == 'x' ? r : (r & 3) | 8\n return v.toString(16)\n })\n }\n\n onFileChange(e: Event) {\n if (!e) {\n return\n }\n\n const el = e.currentTarget as HTMLInputElement\n const files = el.files || (e as any).dataTransfer.files\n const files2 = el.files || (e as any).dataTransfer.files\n\n if (!files.length) {\n return\n }\n\n const formData = new FormData()\n formData.append('file', files[0])\n formData.append('fileId', this.getUUID())\n const xhr = new XMLHttpRequest()\n const vm = this\n\n var fileId\n\n xhr.onreadystatechange = function () {\n if (xhr.readyState === 4) {\n try {\n let resp = JSON.parse(xhr.response)\n fileId = resp.result.fileId\n vm.dispatchEvent(\n new CustomEvent('file-change', {\n bubbles: true,\n composed: true,\n detail: {\n files: el.files,\n fileId: fileId + '.' + resp.result.fileExtension\n }\n })\n )\n } catch (ex) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'error',\n message: 'Upload File Temp Error // ' + ex,\n ex: ex\n }\n })\n )\n\n throw new Error('Upload File Temp Error')\n }\n }\n }\n xhr.open('POST', getRestServiceFullPath() + getUploadTempUrl())\n xhr.send(formData)\n }\n\n onImageFileChanged(e: Event) {\n this._files = [...this._files, ...Array.from((e.currentTarget as HTMLInputElement).files || [])]\n }\n}\n"]}
|
|
@@ -7,7 +7,6 @@ import './restful-attachment-selector.js';
|
|
|
7
7
|
import { LitElement, css, html } from 'lit';
|
|
8
8
|
import { openPopup } from '@operato/layout';
|
|
9
9
|
import { customElement, property } from 'lit/decorators.js';
|
|
10
|
-
import { getDownloadFileUrl } from '@fmsim/api/restful.js';
|
|
11
10
|
import { i18next } from '@operato/i18n';
|
|
12
11
|
let RestfulInputAttachmentSelector = class RestfulInputAttachmentSelector extends LitElement {
|
|
13
12
|
constructor() {
|
|
@@ -62,8 +61,7 @@ let RestfulInputAttachmentSelector = class RestfulInputAttachmentSelector extend
|
|
|
62
61
|
.category=${category}
|
|
63
62
|
@attachment-selected=${async (e) => {
|
|
64
63
|
var attachment = e.detail.attachment;
|
|
65
|
-
|
|
66
|
-
this.value = `${getDownloadFileUrl()}/${encodeURIComponent(attachment.path)}/${encodeURIComponent(attachment.name)}`;
|
|
64
|
+
this.value = `$base_url${attachment.download}`;
|
|
67
65
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
68
66
|
this.popup && this.popup.close();
|
|
69
67
|
}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"restful-input-attachment-selector.js","sourceRoot":"","sources":["../../../src/component/restful-input-attachment-selector.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAe,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"restful-input-attachment-selector.js","sourceRoot":"","sources":["../../../src/component/restful-input-attachment-selector.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport './restful-attachment-selector.js'\n\nimport { LitElement, css, html } from 'lit'\nimport { PopupHandle, openPopup } from '@operato/layout'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\n@customElement('restful-input-attachment-selector')\nexport class RestfulInputAttachmentSelector extends LitElement {\n static styles = [\n css`\n :host {\n position: relative;\n display: inline-block;\n }\n\n input[type='text'] {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n\n mwc-icon {\n position: absolute;\n top: 0;\n right: 3px;\n }\n `\n ]\n\n @property({ type: String }) value: string = ''\n @property({ type: Object }) properties: any\n\n private popup?: PopupHandle\n\n render() {\n return html`\n <input\n id=\"text\"\n type=\"text\"\n .value=${this.value || ''}\n @change=${(e: KeyboardEvent) => this._onInputChanged(e)}\n />\n\n <mwc-icon @click=${() => this.openSelector()}>${this.getIconByCategory()}</mwc-icon>\n `\n }\n\n getIconByCategory() {\n var { category } = this.properties || {}\n switch (category) {\n case 'audio':\n return 'library_music'\n case 'video':\n return 'video_library'\n case 'image':\n return 'image'\n case 'text':\n case 'application':\n default:\n return 'attachment'\n }\n }\n\n _onInputChanged(e: KeyboardEvent) {\n this.value = (e.target as HTMLInputElement).value\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n openSelector() {\n if (this.popup) {\n delete this.popup\n }\n\n /*\n * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n * 주의. value는 object일 수도 있고, string일 수도 있다.\n * string인 경우에는 해당 보드의 id로 해석한다.\n */\n var value = this.value || {}\n var { category = 'application' } = this.properties || {}\n\n var template = html`\n <restful-attachment-selector\n .creatable=${true}\n .category=${category}\n @attachment-selected=${async (e: CustomEvent) => {\n var attachment = e.detail.attachment\n this.value = `$base_url${attachment.download}`\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n this.popup && this.popup.close()\n }}\n ></restful-attachment-selector>\n `\n\n this.popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n title: i18next.t('title.select attachment')\n })\n }\n}\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import '@material/mwc-icon';
|
|
2
2
|
import '@material/mwc-button';
|
|
3
|
+
import '@material/mwc-linear-progress';
|
|
3
4
|
import '@operato/property-editor/ox-properties-dynamic-view.js';
|
|
4
5
|
import '@operato/markdown';
|
|
5
6
|
import { LitElement, PropertyValues } from 'lit';
|
|
@@ -8,6 +9,7 @@ export declare class BoardComponentInfo extends LitElement {
|
|
|
8
9
|
component?: any;
|
|
9
10
|
detailInfo?: any;
|
|
10
11
|
collapsed: boolean;
|
|
12
|
+
loading: boolean;
|
|
11
13
|
private dragStart?;
|
|
12
14
|
private dragEndHandler;
|
|
13
15
|
private dragMoveHandler;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import '@material/mwc-icon';
|
|
3
3
|
import '@material/mwc-button';
|
|
4
|
+
import '@material/mwc-linear-progress';
|
|
4
5
|
import '@operato/property-editor/ox-properties-dynamic-view.js';
|
|
5
6
|
import '@operato/markdown';
|
|
6
|
-
import { css, html, LitElement } from 'lit';
|
|
7
|
+
import { css, html, LitElement, nothing } from 'lit';
|
|
7
8
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
8
9
|
import { ScrollbarStyles } from '@operato/styles';
|
|
9
10
|
import { i18next } from '@operato/i18n';
|
|
@@ -11,6 +12,7 @@ let BoardComponentInfo = class BoardComponentInfo extends LitElement {
|
|
|
11
12
|
constructor() {
|
|
12
13
|
super(...arguments);
|
|
13
14
|
this.collapsed = false;
|
|
15
|
+
this.loading = false;
|
|
14
16
|
this.dragEndHandler = this.onDragEnd.bind(this);
|
|
15
17
|
this.dragMoveHandler = this.onDragMove.bind(this);
|
|
16
18
|
}
|
|
@@ -40,6 +42,12 @@ let BoardComponentInfo = class BoardComponentInfo extends LitElement {
|
|
|
40
42
|
Object Information
|
|
41
43
|
<mwc-icon @click=${(e) => this.dispatchEvent(new CustomEvent('close'))} close>close</mwc-icon>
|
|
42
44
|
</div>
|
|
45
|
+
${this.loading
|
|
46
|
+
? html `<div>
|
|
47
|
+
<mwc-linear-progress indeterminate></mwc-linear-progress>
|
|
48
|
+
</div>`
|
|
49
|
+
: nothing}
|
|
50
|
+
|
|
43
51
|
<div content @wheel=${(e) => this.onWheel(e)}>
|
|
44
52
|
<table>
|
|
45
53
|
${identifiable
|
|
@@ -83,10 +91,10 @@ let BoardComponentInfo = class BoardComponentInfo extends LitElement {
|
|
|
83
91
|
<td>${type}</td>
|
|
84
92
|
</tr>
|
|
85
93
|
`}
|
|
86
|
-
${!this.collapsed && infos
|
|
94
|
+
${!this.collapsed && infos && !this.loading
|
|
87
95
|
? html `
|
|
88
96
|
<tr>
|
|
89
|
-
<td split colspan="2">
|
|
97
|
+
<td split colspan="2">Details</td>
|
|
90
98
|
</tr>
|
|
91
99
|
|
|
92
100
|
${infos.map(([key, value]) => html `
|
|
@@ -96,7 +104,7 @@ let BoardComponentInfo = class BoardComponentInfo extends LitElement {
|
|
|
96
104
|
</tr>
|
|
97
105
|
`)}
|
|
98
106
|
`
|
|
99
|
-
:
|
|
107
|
+
: nothing}
|
|
100
108
|
</table>
|
|
101
109
|
</div>
|
|
102
110
|
`;
|
|
@@ -106,11 +114,15 @@ let BoardComponentInfo = class BoardComponentInfo extends LitElement {
|
|
|
106
114
|
this.detailInfo = null;
|
|
107
115
|
if ('detailInfo' in this.component) {
|
|
108
116
|
try {
|
|
117
|
+
this.loading = true;
|
|
109
118
|
this.detailInfo = await this.component.detailInfo();
|
|
110
119
|
}
|
|
111
120
|
catch (e) {
|
|
112
121
|
console.error('failed to get detail information');
|
|
113
122
|
}
|
|
123
|
+
finally {
|
|
124
|
+
this.loading = false;
|
|
125
|
+
}
|
|
114
126
|
}
|
|
115
127
|
}
|
|
116
128
|
if (changes.has('collapsed')) {
|
|
@@ -246,6 +258,11 @@ BoardComponentInfo.styles = [
|
|
|
246
258
|
align-items: center;
|
|
247
259
|
justify-content: center;
|
|
248
260
|
}
|
|
261
|
+
|
|
262
|
+
mwc-linear-progress {
|
|
263
|
+
--mdc-theme-primary: red;
|
|
264
|
+
--mdc-linear-progress-buffer-color: #ed788d;
|
|
265
|
+
}
|
|
249
266
|
`
|
|
250
267
|
];
|
|
251
268
|
__decorate([
|
|
@@ -257,6 +274,9 @@ __decorate([
|
|
|
257
274
|
__decorate([
|
|
258
275
|
state()
|
|
259
276
|
], BoardComponentInfo.prototype, "collapsed", void 0);
|
|
277
|
+
__decorate([
|
|
278
|
+
state()
|
|
279
|
+
], BoardComponentInfo.prototype, "loading", void 0);
|
|
260
280
|
BoardComponentInfo = __decorate([
|
|
261
281
|
customElement('ox-board-component-info')
|
|
262
282
|
], BoardComponentInfo);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-board-component-info.js","sourceRoot":"","sources":["../../src/ox-board-component-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport '@material/mwc-button'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@operato/markdown'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-board-component-info')\nexport class BoardComponentInfo extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n background-color: white;\n font-size: 12px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n border: 2px solid var(--primary-color);\n border-radius: 3px;\n\n --mdc-icon-size: 12px;\n }\n\n [header] {\n background-color: var(--primary-color);\n user-select: none;\n align-items: center;\n color: #eee;\n padding: 0 2px;\n\n display: flex;\n }\n\n mwc-icon {\n --mdc-icon-size: 14px;\n\n color: #555;\n align-self: center;\n padding: 0 2px;\n }\n\n [header] mwc-icon[close] {\n margin-left: auto;\n }\n\n [content] {\n overflow: auto;\n }\n\n table {\n border-collapse: collapse;\n background-color: #fff;\n width: 100%;\n margin: auto;\n }\n\n tr {\n border-bottom: var(--border-dark-color);\n }\n\n td {\n padding: var(--padding-narrow);\n border-right: var(--border-dark-color);\n font-size: 0.8em;\n }\n\n [subTh] {\n text-align: center !important;\n font-weight: bold;\n width: 60px;\n text-transform: capitalize;\n background-color: rgba(0, 0, 0, 0.05);\n }\n\n [split] {\n height: 10px;\n color: #eee;\n background-color: var(--primary-color);\n font-size: 0.8em;\n padding: 0;\n text-align: center;\n }\n\n [location] {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n }\n `\n ]\n\n @property({ type: Object }) component?: any\n\n @state() detailInfo?: any\n @state() collapsed: boolean = false\n\n private dragStart?: { x: number; y: number }\n\n private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.collapsed = sessionStorage.getItem('ox-board-component-info-collapsed') == 'true'\n\n document.addEventListener('mouseup', this.dragEndHandler)\n document.addEventListener('mousemove', this.dragMoveHandler)\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n document.removeEventListener('mouseup', this.dragEndHandler)\n document.removeEventListener('mousemove', this.dragMoveHandler)\n }\n\n render() {\n const { state, data } = this.component || {}\n const { id, type } = state || {}\n const details = this.detailInfo || data\n const infos: [key: string, value: string][] =\n details && Object.entries(details).filter(([key, value]) => key != 'ID')\n const identifiable = this.component?.isIdentifiable() || false\n\n return html`\n <div header @mousedown=${this.onDragStart.bind(this)} draggable=\"false\">\n <mwc-icon @click=${() => (this.collapsed = !this.collapsed)} collapsed\n >${this.collapsed ? 'expand_more' : 'expand_less'}</mwc-icon\n >\n Object Information\n <mwc-icon @click=${(e: MouseEvent) => this.dispatchEvent(new CustomEvent('close'))} close>close</mwc-icon>\n </div>\n <div content @wheel=${(e: WheelEvent) => this.onWheel(e)}>\n <table>\n ${identifiable\n ? html`\n <tr>\n <td subTh>\n <div\n location\n @click=${(e: MouseEvent) => {\n this.component.trigger('reactionreset')\n this.component.trigger('reaction')\n return false\n }}\n >\n ${i18next.t('label.id')} <mwc-icon>location_on</mwc-icon>\n </div>\n </td>\n <td>${id}</td>\n </tr>\n <tr>\n <td subTh>\n ${i18next.t('label.type')}${!identifiable ? html` <mwc-icon>location_on</mwc-icon>` : html``}\n </td>\n <td>${type}</td>\n </tr>\n `\n : html`\n <tr>\n <td subTh>\n <div\n location\n @click=${(e: MouseEvent) => {\n this.component.trigger('reactionreset')\n this.component.trigger('reaction')\n return false\n }}\n >\n ${i18next.t('label.type')}${!identifiable ? html` <mwc-icon>location_on</mwc-icon>` : html``}\n </div>\n </td>\n <td>${type}</td>\n </tr>\n `}\n ${!this.collapsed && infos\n ? html`\n <tr>\n <td split colspan=\"2\">details</td>\n </tr>\n\n ${infos.map(\n ([key, value]) => html`\n <tr>\n <td subTh>${key}</td>\n <td>${value}</td>\n </tr>\n `\n )}\n `\n : html``}\n </table>\n </div>\n `\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('component')) {\n this.detailInfo = null\n\n if ('detailInfo' in this.component) {\n try {\n this.detailInfo = await this.component.detailInfo()\n } catch (e) {\n console.error('failed to get detail information')\n }\n }\n }\n\n if (changes.has('collapsed')) {\n sessionStorage.setItem('ox-board-component-info-collapsed', this.collapsed ? 'true' : 'false')\n }\n }\n\n onWheel(e: WheelEvent) {\n const scrollableDiv = e.currentTarget! as HTMLElement\n const contentDiv = scrollableDiv.querySelector('table')!\n\n // 컨텐츠의 높이와 div의 높이를 비교하여 수평 스크롤을 동작시키거나 수직 스크롤을 동작시킴\n if (contentDiv.offsetHeight > scrollableDiv.offsetHeight) {\n // 수직 스크롤 가능한 경우\n scrollableDiv.scrollTop += e.deltaY\n } else {\n // 수직 스크롤이 없는 경우\n scrollableDiv.scrollLeft += e.deltaY\n }\n }\n\n onDragStart(e: MouseEvent) {\n e.stopPropagation()\n\n if (e.button == 0) {\n this.dragStart = {\n x: e.clientX,\n y: e.clientY\n }\n }\n\n return false\n }\n\n onDragMove(e: Event) {\n if (!this.dragStart) {\n return false\n }\n\n e.stopPropagation()\n e.preventDefault()\n\n var x = (e as MouseEvent).clientX,\n y = (e as MouseEvent).clientY\n\n const dragStart = { x, y }\n\n x -= this.dragStart.x\n y -= this.dragStart.y\n\n this.dragStart = dragStart\n\n this.style.left =\n Math.min(this.parentElement!.offsetWidth - this.offsetWidth, Math.max(0, this.offsetLeft + x)) + 'px'\n this.style.top =\n Math.min(this.parentElement!.offsetHeight - this.offsetHeight, Math.max(0, this.offsetTop + y)) + 'px'\n\n return false\n }\n\n onDragEnd(e: Event) {\n if (this.dragStart) {\n e.stopPropagation()\n e.preventDefault()\n\n delete this.dragStart\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-board-component-info.js","sourceRoot":"","sources":["../../src/ox-board-component-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport '@material/mwc-button'\nimport '@material/mwc-linear-progress'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@operato/markdown'\n\nimport { css, html, LitElement, PropertyValues, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-board-component-info')\nexport class BoardComponentInfo extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n background-color: white;\n font-size: 12px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n border: 2px solid var(--primary-color);\n border-radius: 3px;\n\n --mdc-icon-size: 12px;\n }\n\n [header] {\n background-color: var(--primary-color);\n user-select: none;\n align-items: center;\n color: #eee;\n padding: 0 2px;\n\n display: flex;\n }\n\n mwc-icon {\n --mdc-icon-size: 14px;\n\n color: #555;\n align-self: center;\n padding: 0 2px;\n }\n\n [header] mwc-icon[close] {\n margin-left: auto;\n }\n\n [content] {\n overflow: auto;\n }\n\n table {\n border-collapse: collapse;\n background-color: #fff;\n width: 100%;\n margin: auto;\n }\n\n tr {\n border-bottom: var(--border-dark-color);\n }\n\n td {\n padding: var(--padding-narrow);\n border-right: var(--border-dark-color);\n font-size: 0.8em;\n }\n\n [subTh] {\n text-align: center !important;\n font-weight: bold;\n width: 60px;\n text-transform: capitalize;\n background-color: rgba(0, 0, 0, 0.05);\n }\n\n [split] {\n height: 10px;\n color: #eee;\n background-color: var(--primary-color);\n font-size: 0.8em;\n padding: 0;\n text-align: center;\n }\n\n [location] {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n }\n\n mwc-linear-progress {\n --mdc-theme-primary: red;\n --mdc-linear-progress-buffer-color: #ed788d;\n }\n `\n ]\n\n @property({ type: Object }) component?: any\n\n @state() detailInfo?: any\n @state() collapsed: boolean = false\n @state() loading: boolean = false\n\n private dragStart?: { x: number; y: number }\n\n private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.collapsed = sessionStorage.getItem('ox-board-component-info-collapsed') == 'true'\n\n document.addEventListener('mouseup', this.dragEndHandler)\n document.addEventListener('mousemove', this.dragMoveHandler)\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n document.removeEventListener('mouseup', this.dragEndHandler)\n document.removeEventListener('mousemove', this.dragMoveHandler)\n }\n\n render() {\n const { state, data } = this.component || {}\n const { id, type } = state || {}\n const details = this.detailInfo || data\n const infos: [key: string, value: string][] =\n details && Object.entries(details).filter(([key, value]) => key != 'ID')\n const identifiable = this.component?.isIdentifiable() || false\n\n return html`\n <div header @mousedown=${this.onDragStart.bind(this)} draggable=\"false\">\n <mwc-icon @click=${() => (this.collapsed = !this.collapsed)} collapsed\n >${this.collapsed ? 'expand_more' : 'expand_less'}</mwc-icon\n >\n Object Information\n <mwc-icon @click=${(e: MouseEvent) => this.dispatchEvent(new CustomEvent('close'))} close>close</mwc-icon>\n </div>\n ${this.loading\n ? html`<div>\n <mwc-linear-progress indeterminate></mwc-linear-progress>\n </div>`\n : nothing}\n\n <div content @wheel=${(e: WheelEvent) => this.onWheel(e)}>\n <table>\n ${identifiable\n ? html`\n <tr>\n <td subTh>\n <div\n location\n @click=${(e: MouseEvent) => {\n this.component.trigger('reactionreset')\n this.component.trigger('reaction')\n return false\n }}\n >\n ${i18next.t('label.id')} <mwc-icon>location_on</mwc-icon>\n </div>\n </td>\n <td>${id}</td>\n </tr>\n <tr>\n <td subTh>\n ${i18next.t('label.type')}${!identifiable ? html` <mwc-icon>location_on</mwc-icon>` : html``}\n </td>\n <td>${type}</td>\n </tr>\n `\n : html`\n <tr>\n <td subTh>\n <div\n location\n @click=${(e: MouseEvent) => {\n this.component.trigger('reactionreset')\n this.component.trigger('reaction')\n return false\n }}\n >\n ${i18next.t('label.type')}${!identifiable ? html` <mwc-icon>location_on</mwc-icon>` : html``}\n </div>\n </td>\n <td>${type}</td>\n </tr>\n `}\n ${!this.collapsed && infos && !this.loading\n ? html`\n <tr>\n <td split colspan=\"2\">Details</td>\n </tr>\n\n ${infos.map(\n ([key, value]) => html`\n <tr>\n <td subTh>${key}</td>\n <td>${value}</td>\n </tr>\n `\n )}\n `\n : nothing}\n </table>\n </div>\n `\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('component')) {\n this.detailInfo = null\n\n if ('detailInfo' in this.component) {\n try {\n this.loading = true\n this.detailInfo = await this.component.detailInfo()\n } catch (e) {\n console.error('failed to get detail information')\n } finally {\n this.loading = false\n }\n }\n }\n\n if (changes.has('collapsed')) {\n sessionStorage.setItem('ox-board-component-info-collapsed', this.collapsed ? 'true' : 'false')\n }\n }\n\n onWheel(e: WheelEvent) {\n const scrollableDiv = e.currentTarget! as HTMLElement\n const contentDiv = scrollableDiv.querySelector('table')!\n\n // 컨텐츠의 높이와 div의 높이를 비교하여 수평 스크롤을 동작시키거나 수직 스크롤을 동작시킴\n if (contentDiv.offsetHeight > scrollableDiv.offsetHeight) {\n // 수직 스크롤 가능한 경우\n scrollableDiv.scrollTop += e.deltaY\n } else {\n // 수직 스크롤이 없는 경우\n scrollableDiv.scrollLeft += e.deltaY\n }\n }\n\n onDragStart(e: MouseEvent) {\n e.stopPropagation()\n\n if (e.button == 0) {\n this.dragStart = {\n x: e.clientX,\n y: e.clientY\n }\n }\n\n return false\n }\n\n onDragMove(e: Event) {\n if (!this.dragStart) {\n return false\n }\n\n e.stopPropagation()\n e.preventDefault()\n\n var x = (e as MouseEvent).clientX,\n y = (e as MouseEvent).clientY\n\n const dragStart = { x, y }\n\n x -= this.dragStart.x\n y -= this.dragStart.y\n\n this.dragStart = dragStart\n\n this.style.left =\n Math.min(this.parentElement!.offsetWidth - this.offsetWidth, Math.max(0, this.offsetLeft + x)) + 'px'\n this.style.top =\n Math.min(this.parentElement!.offsetHeight - this.offsetHeight, Math.max(0, this.offsetTop + y)) + 'px'\n\n return false\n }\n\n onDragEnd(e: Event) {\n if (this.dragStart) {\n e.stopPropagation()\n e.preventDefault()\n\n delete this.dragStart\n }\n }\n}\n"]}
|