overview-components 1.0.92 → 1.0.93

package/dist/components/lit-attachments-tab.js

@@ -0,0 +1,680 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from 'lit/decorators.js';
+import { css, html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { msg } from '@lit/localize';
+import { isEmpty } from 'lodash';
+import { saveAs } from 'file-saver';
+// components
+import '../shared/lit-icon.js';
+import '../shared/lit-icon-button.js';
+import '../shared/lit-select.js';
+import '../shared/lit-overflow-tooltip.js';
+import '../assets/illustration/no-preview.js';
+import '../assets/illustration/not-found.js';
+import '../shared/lit-loading-bar.js';
+import '../components/lit-section-tab.js';
+import './components-settings/attachments-tab-settings.js';
+// pdf.js
+import * as pdfjsLib from 'pdfjs-dist';
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url).toString();
+let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.hideTabWhen = false;
+        this.documents = [];
+        this.type = 'compact';
+        this.scale = 1;
+        this.isDocumentLoading = false;
+        this.enableSettings = false;
+        this.onSettingsChanged = () => { };
+        this.selectedId = '';
+        this.pageNumber = 1;
+        this.pageCount = 1;
+        this.isChecked = {};
+        this.preview = true;
+        this.documentData = null;
+        this.isOpenModal = false;
+        this.canvas = null;
+        this.ctx = null;
+        this.outerContainer = null;
+        this.isDragging = false;
+        this.clickX = 0;
+        this.clickY = 0;
+        this.prevScrollLeft = 0;
+        this.prevScrollTop = 0;
+        this.abortController = new AbortController();
+        this.handleReadFile = (buffer) => new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader);
+            reader.onerror = (err) => reject(err);
+            if (buffer !== null)
+                reader.readAsArrayBuffer(buffer);
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.abortController.abort();
+        if (this.documentData && this.documentData.cancel) {
+            this.documentData.cancel();
+            this.documentData = null;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.localScale = this.scale;
+    }
+    async firstUpdated() {
+        this.canvas = this.shadowRoot?.querySelector('canvas') ?? null;
+        this.ctx = this.canvas?.getContext('2d');
+        this.outerContainer = this.shadowRoot?.querySelector('.document-container') || null;
+        await this.renderPage();
+    }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has('documents')) {
+            this.selectedId = this.initialSelection || (this.documents?.[0]?.id ?? '');
+            if (!this.hideTabWhen &&
+                typeof this.documents !== 'undefined' &&
+                !isEmpty(this.documents)) {
+                this.handleDocumentClick(this.selectedId);
+            }
+        }
+        if (_changedProperties.has('selectedId')) {
+            if (this.documentData && this.documentData.cancel) {
+                this.documentData.cancel();
+                this.documentData = null;
+            }
+        }
+    }
+    async loadDocumentData(documentData) {
+        try {
+            // Find the document in the documents array using the selectedId
+            const selectedDoc = this.documents?.find((doc) => doc.id === this.selectedId);
+            if (!selectedDoc) {
+                console.error('Selected document not found in documents array.');
+                return;
+            }
+            if (selectedDoc.file_type === 'application/pdf') {
+                const loadingTask = pdfjsLib.getDocument(documentData);
+                this.selectedDocument = await loadingTask.promise;
+                if (this.selectedDocument) {
+                    this.pageCount = this.selectedDocument.numPages;
+                }
+                this.preview = true;
+            }
+            else if (selectedDoc.file_type === 'image/jpeg' ||
+                selectedDoc.file_type === 'image/png') {
+                const img = new Image();
+                img.onload = () => {
+                    this.selectedDocument = img;
+                    this.pageCount = 1;
+                    this.preview = true;
+                    this.renderPage();
+                };
+                img.src = URL.createObjectURL(new Blob([documentData], { type: selectedDoc.file_type }));
+                return;
+            }
+            else {
+                this.selectedDocument = documentData;
+                this.preview = false;
+            }
+            this.pageNumber = 1;
+            await this.renderPage();
+        }
+        catch (error) {
+            console.error('Error loading document data:', error);
+        }
+    }
+    async handleDocumentClick(id) {
+        this.selectedId = id;
+        this.localScale = this.scale;
+        if (this.onClick) {
+            try {
+                this.isDocumentLoading = true;
+                this.documentData = await this.onClick(id);
+                this.isDocumentLoading = false;
+                let readerPromise = this.handleReadFile(this.documentData);
+                let reader = await Promise.resolve(readerPromise);
+                this.loadDocumentData(reader.result);
+            }
+            catch (error) {
+                console.error('Error fetching document:', error);
+            }
+        }
+        else {
+            const document = this.documents?.find((doc) => doc.id === id);
+            if (!document) {
+                throw new Error('Document not found');
+            }
+            const src = document.dmsf_src;
+            if (!src)
+                throw new Error('Missing source URL');
+            const buffer = await fetch(src).then((res) => res.arrayBuffer());
+            this.loadDocumentData(buffer);
+        }
+    }
+    async renderPage() {
+        if (!this.selectedDocument || !this.canvas || !this.ctx || !this.outerContainer)
+            return;
+        this.canvas.style.display = this.preview ? 'block' : 'none';
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        try {
+            const userScale = this.localScale ?? 1;
+            const containerWidth = this.outerContainer.offsetWidth;
+            const dpr = window.devicePixelRatio || 1;
+            if (this.preview && 'getPage' in this.selectedDocument) {
+                const page = await this.selectedDocument.getPage(this.pageNumber ?? 1);
+                // viewport pri mierke 1
+                const viewportBase = page.getViewport({ scale: 1 });
+                const fitScale = containerWidth / viewportBase.width;
+                // logický scale voči fitnutému rozmeru
+                const logicalScale = fitScale * userScale;
+                // rozlíšenie sa renderuje vždy ako keby scale bolo aspoň 1
+                const renderScale = fitScale * Math.max(userScale, 1);
+                const renderViewport = page.getViewport({ scale: renderScale * dpr });
+                // renderuj do veľkého canvasu
+                this.canvas.width = renderViewport.width;
+                this.canvas.height = renderViewport.height;
+                // zobrazenie podľa požadovaného scale
+                this.canvas.style.width = `${viewportBase.width * logicalScale}px`;
+                this.canvas.style.height = 'auto';
+                await page.render({
+                    canvasContext: this.ctx,
+                    viewport: renderViewport,
+                    signal: this.abortController.signal,
+                }).promise;
+            }
+            else if (this.preview && this.selectedDocument instanceof HTMLImageElement) {
+                const img = this.selectedDocument;
+                const fitScale = containerWidth / img.naturalWidth;
+                const logicalScale = fitScale * userScale;
+                const renderScale = fitScale * Math.max(userScale, 1);
+                const renderWidth = img.naturalWidth * renderScale * dpr;
+                const renderHeight = img.naturalHeight * renderScale * dpr;
+                this.canvas.width = renderWidth;
+                this.canvas.height = renderHeight;
+                this.canvas.style.width = `${img.naturalWidth * logicalScale}px`;
+                this.canvas.style.height = 'auto';
+                this.ctx.drawImage(img, 0, 0, renderWidth, renderHeight);
+            }
+        }
+        catch (error) {
+            if (error instanceof Error && error.name !== 'AbortError') {
+                console.error('Error rendering page:', error);
+            }
+        }
+        console.log('containerWidth', this.outerContainer.offsetWidth);
+        console.log('canvas style.width', this.canvas.style.width);
+    }
+    getSelectedDocumentName() {
+        const selectedDoc = this.documents?.find((doc) => doc.id === this.selectedId);
+        if (isEmpty(this.documents)) {
+            return '';
+        }
+        else {
+            return selectedDoc?.name || 'Unknown Document';
+        }
+    }
+    handlePageChange(next) {
+        const newPage = next ? (this.pageNumber ?? 1) + 1 : (this.pageNumber ?? 1) - 1;
+        if (newPage >= 1 && newPage <= (this.pageCount ?? 1)) {
+            this.pageNumber = newPage;
+            this.renderPage();
+        }
+    }
+    async handleDownload() {
+        if (!this.selectedDocument || !this.onClick) {
+            console.error('No document selected for download or onClick handler missing.');
+            return;
+        }
+        try {
+            const documentData = await this.onClick(this.selectedId);
+            const selectedDoc = this.documents?.find((doc) => doc.id === this.selectedId);
+            const blob = new Blob([documentData.data], { type: selectedDoc?.file_type });
+            saveAs(blob, selectedDoc?.name || 'document');
+            // const url = URL.createObjectURL(blob);
+            // const link = document.createElement('a');
+            // link.href = url;
+            // link.download = selectedDoc?.name || 'document';
+            // document.body.appendChild(link);
+            // link.click();
+            // document.body.removeChild(link);
+            // URL.revokeObjectURL(url);
+        }
+        catch (error) {
+            console.error('Error downloading document:', error);
+        }
+    }
+    handleZoom(increase) {
+        this.localScale = increase ? (this.localScale ?? 1) * 1.1 : (this.localScale ?? 1) / 1.1;
+        this.renderPage();
+    }
+    handleMouseDown(e) {
+        if ((this.localScale ?? 1) <= 1)
+            return;
+        this.isDragging = true;
+        this.clickX = e.clientX;
+        this.clickY = e.clientY;
+        if (this.outerContainer) {
+            this.prevScrollLeft = this.outerContainer.scrollLeft;
+            this.prevScrollTop = this.outerContainer.scrollTop;
+        }
+    }
+    handleMouseMove(e) {
+        if (!this.isDragging)
+            return;
+        const deltaX = e.clientX - this.clickX;
+        const deltaY = e.clientY - this.clickY;
+        if (this.outerContainer) {
+            this.outerContainer.scrollLeft = this.prevScrollLeft - deltaX;
+            this.outerContainer.scrollTop = this.prevScrollTop - deltaY;
+        }
+    }
+    handleMouseUp() {
+        this.isDragging = false;
+    }
+    toggleModal() {
+        this.isOpenModal = !this.isOpenModal;
+    }
+    async onSettingsChangedCallback(value) {
+        if (value?.scale !== undefined) {
+            this.scale = value.scale;
+            this.localScale = value.scale;
+        }
+        if (value?.type !== undefined) {
+            this.type = value.type;
+        }
+        await this.renderPage();
+        if (this.onSettingsChanged) {
+            this.dispatchEvent(new CustomEvent('onSettingsChanged', {
+                bubbles: true,
+                composed: true,
+                detail: value,
+            }));
+            this.onSettingsChanged?.(value);
+        }
+    }
+    render() {
+        if (this.hideTabWhen)
+            return null;
+        return html `
+            <div class="attachments-container">
+                <div class="documents-list-section">
+                    ${this.type === 'compact'
+            ? html ` ${this.documents?.map((doc, index) => html `
+                                  <div
+                                      class="document-label ${this.selectedId == doc.id
+                ? 'selected'
+                : null}"
+                                      @click=${() => doc.id && this.handleDocumentClick(doc.id)}
+                                  >
+                                      <div class="document-item" id="${doc.id}">
+                                          <lit-overflow-tooltip
+                                              label="${doc.name || `Document ${index + 1}`}"
+                                          >
+                                              ${doc.name || `Document ${index + 1}`}
+                                          </lit-overflow-tooltip>
+                                      </div>
+
+                                      ${this.selectedId == doc.id
+                ? html `
+                                                <div class="document-checked">
+                                                    <span>${msg('Zobrazen náhled')}</span>
+                                                </div>
+                                            `
+                : html `
+                                                <div class="document-unchecked">
+                                                    <lit-icon icon="reading" size="1rem"></lit-icon>
+                                                    <span>${msg('Zobrazit náhled')}</span>
+                                                </div>
+                                            `}
+                                  </div>
+                              `)}`
+            : html `
+                              <lit-select
+                                  id="document-select"
+                                  .value="${this.selectedId}"
+                                  .options="${this.documents?.map((doc) => ({
+                value: doc.id,
+                label: doc.name,
+            }))}"
+                                  .onChange="${(selectedValue) => {
+                this.handleDocumentClick(selectedValue);
+            }}"
+                                  .disableClearButton="${true}"
+                              ></lit-select>
+                          `}
+                    <div style="height: 0.1875rem">
+                        ${this.isDocumentLoading
+            ? html ` <lit-loading-bar></lit-loading-bar> `
+            : null}
+                    </div>
+                </div>
+                <div class="document">
+                    <div class="document-box">
+                        <div class="document-selected">
+                            <lit-overflow-tooltip label="${this.getSelectedDocumentName()}">
+                                ${this.getSelectedDocumentName()}
+                            </lit-overflow-tooltip>
+                        </div>
+                        ${!isEmpty(this.documents)
+            ? html `
+                                  <div class="action-buttons">
+                                      ${this.preview
+                ? html `
+                                                <lit-icon
+                                                    style="cursor: pointer"
+                                                    icon="chevronLeftFilled"
+                                                    size="1rem"
+                                                    @click=${() => this.handlePageChange(false)}
+                                                ></lit-icon>
+                                                <span
+                                                    >page ${this.pageNumber} /
+                                                    ${this.pageCount}</span
+                                                >
+                                                <lit-icon
+                                                    style="cursor: pointer"
+                                                    icon="chevronRightFilled"
+                                                    size="1rem"
+                                                    @click=${() => this.handlePageChange(true)}
+                                                ></lit-icon>
+                                                <lit-icon-button
+                                                    icon="zoomout"
+                                                    variant="text"
+                                                    size="small"
+                                                    @click=${() => this.handleZoom(false)}
+                                                ></lit-icon-button>
+                                                <lit-icon-button
+                                                    icon="zoomIn"
+                                                    variant="text"
+                                                    size="small"
+                                                    @click=${() => this.handleZoom(true)}
+                                                ></lit-icon-button>
+                                            `
+                : null}
+
+                                      <lit-icon-button
+                                          icon="download"
+                                          variant="text"
+                                          size="small"
+                                          @click=${this.handleDownload}
+                                      ></lit-icon-button>
+                                  </div>
+                              `
+            : null}
+                    </div>
+                    <div
+                        class="document-container"
+                        @mousemove=${this.handleMouseMove}
+                        @mouseup=${this.handleMouseUp}
+                        @mouseleave=${this.handleMouseUp}
+                    >
+                        ${!isEmpty(this.documents)
+            ? html `
+                                  <canvas
+                                      style=${styleMap({
+                cursor: (this.scale ?? 1) > 1 ? 'grab' : 'default',
+            })}
+                                      @mousedown=${this.handleMouseDown}
+                                  >
+                                  </canvas>
+                              `
+            : null}
+                        ${!this.preview
+            ? html `
+                                  <div class="not-supported__format">
+                                      <div style="max-height: 7.125rem; max-width: 7.125rem">
+                                          <no-preview></no-preview>
+                                      </div>
+                                      ${msg('Náhled dokumentu není možný vzhledem k typu dokumentu.')}
+                                  </div>
+                              `
+            : null}
+                        ${!this.documents || isEmpty(this.documents)
+            ? html `
+                                  <div class="not-supported__format">
+                                      <div style="max-height: 7.125rem; max-width: 7.125rem">
+                                          <not-found></not-found>
+                                      </div>
+                                      ${msg('Nic dalšího tu není')}
+                                  </div>
+                              `
+            : null}
+                    </div>
+                </div>
+
+                ${this.enableSettings
+            ? html `<div class="footer">
+                          <lit-icon-button
+                              icon="administration"
+                              @click="${this.toggleModal}"
+                              variant="dashed"
+                              style="display: inline-block"
+                          ></lit-icon-button>
+                          <attachments-tab-settings
+                              .onClose="${() => {
+                this.isOpenModal = false;
+            }}"
+                              .isOpenModal="${this.isOpenModal}"
+                              .onSettingsChangedModal="${this.onSettingsChangedCallback.bind(this)}"
+                              .type="${this.type}"
+                              .scale="${this.scale}"
+                          ></attachments-tab-settings>
+                      </div>`
+            : null}
+            </div>
+        `;
+    }
+};
+LitAttachmentsTab.styles = [
+    css `
+            .document-label {
+                line-height: 2.125rem;
+                gap: 0.25rem;
+                display: flex;
+                justify-content: space-between;
+                flex-direction: row;
+                align-items: center;
+                position: relative;
+                font-weight: 500;
+                font-size: 0.8125rem;
+                padding: 0.125rem 0 0.125rem 1rem;
+                background: var(--background-paper, #ffffff);
+                color: var(--color-secondary-main, #111827);
+                border-radius: 0.5rem;
+                cursor: pointer;
+            }
+
+            .document-item {
+                font-weight: 500;
+                font-size: 0.8125rem;
+                color: var(--color-secondary-main, #111827);
+                display: flex;
+
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .document-label:hover {
+                background: var(--color-primary-light, #f0fadf);
+            }
+
+            .selected {
+                background: var(--color-primary-light, #f0fadf);
+            }
+
+            .document-checked {
+                padding: 0 1rem 0 1rem;
+                font-size: 0.75rem;
+                color: var(--color-primary-dark, #5f9402);
+                white-space: nowrap;
+            }
+            .document-unchecked {
+                display: none;
+                padding: 0 1rem 0 1rem;
+                font-size: 0.75rem;
+                align-items: center;
+                gap: 0.5rem;
+                white-space: nowrap;
+            }
+
+            .document-label:hover .document-unchecked {
+                display: flex;
+            }
+
+            .document {
+                background: var(--background-default, #eff3f4);
+                border-radius: 0.25rem;
+                padding: 0.75rem 0.5rem 0.5rem 0.5rem;
+
+                flex: 1; /* Zaberie všetok dostupný priestor */
+                min-height: 0;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .document-box {
+                display: flex;
+                align-items: center;
+                max-height: 2rem;
+                justify-content: space-between;
+                padding: 0 0.75rem 0.75rem 0.75rem;
+            }
+
+            .action-buttons {
+                display: flex;
+                align-items: center;
+                font-size: 0.8125rem;
+                gap: 0.75rem;
+                white-space: nowrap;
+            }
+
+            .document-selected {
+                color: var(--color-secondary-main, #111827);
+                font-size: 0.8125rem;
+                font-weight: 500;
+                max-width: 100%;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                display: flex;
+            }
+
+            .document-container {
+                position: relative;
+                width: 100%;
+                flex: 1;
+                min-height: 0;
+                overflow: auto;
+                justify-content: center;
+                align-items: center;
+            }
+
+            canvas {
+                display: block;
+                margin: 0 auto;
+                transform-origin: 0 0;
+            }
+
+            .not-supported__format {
+                min-height: 40vh;
+                font-size: 0.875rem;
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                margin: 1rem 0 1rem 0;
+            }
+            .attachments-container {
+                height: 100%;
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .documents-list-section {
+                flex-shrink: 0;
+            }
+
+            .footer {
+                flex-shrink: 0;
+                justify-content: end;
+                display: flex;
+                margin-top: 0.5rem;
+            }
+        `,
+];
+__decorate([
+    property({ type: Boolean })
+], LitAttachmentsTab.prototype, "hideTabWhen", void 0);
+__decorate([
+    property({ type: String })
+], LitAttachmentsTab.prototype, "initialSelection", void 0);
+__decorate([
+    property({ type: Array })
+], LitAttachmentsTab.prototype, "documents", void 0);
+__decorate([
+    property({ type: String })
+], LitAttachmentsTab.prototype, "type", void 0);
+__decorate([
+    property({ type: Number })
+], LitAttachmentsTab.prototype, "scale", void 0);
+__decorate([
+    property({ type: Function })
+], LitAttachmentsTab.prototype, "onClick", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitAttachmentsTab.prototype, "isDocumentLoading", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitAttachmentsTab.prototype, "enableSettings", void 0);
+__decorate([
+    property({ attribute: false })
+], LitAttachmentsTab.prototype, "onSettingsChanged", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "selectedDocument", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "selectedId", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "pageNumber", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "pageCount", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "isChecked", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "isEllipsisActive", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "isHoveredLabel", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "preview", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "documentData", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "isOpenModal", void 0);
+__decorate([
+    state()
+], LitAttachmentsTab.prototype, "localScale", void 0);
+LitAttachmentsTab = __decorate([
+    customElement('lit-attachments-tab')
+], LitAttachmentsTab);
+export { LitAttachmentsTab };
+//# sourceMappingURL=lit-attachments-tab.js.map