overview-components 0.1.4 → 0.1.6

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

@@ -24,13 +24,13 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
         super(...arguments);
         this.hideTabWhen = false;
         this.documents = [];
-        this.selectedId = '';
         this.type = 'compact';
+        // @property({ type: Array }) additionalLabels?: any[] = [];
+        this.scale = 1;
+        this.selectedId = '';
         this.pageNumber = 1;
         this.pageCount = 1;
-        this.scale = 1;
         this.isChecked = {};
-        this.additionalLabels = [];
         this.preview = true;
         this.canvas = null;
         this.ctx = null;
@@ -41,33 +41,59 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
         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);
+        });
     }
     async connectedCallback() {
         super.connectedCallback();
         this.type = this.type || 'compact';
         this.selectedId = this.initialSelection || (this.documents?.[0]?.id ?? null);
-        if (!this.hideTabWhen) {
+        if (!this.hideTabWhen && this.documents) {
             this.handleDocumentClick(this.selectedId);
         }
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.abortController.abort();
+    }
     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 ?? null);
+            if (!this.hideTabWhen && typeof this.documents !== 'undefined') {
+                this.handleDocumentClick(this.selectedId);
+            }
+        }
+    }
     async loadDocumentData(documentData) {
         try {
-            if (documentData.file_type === 'application/pdf') {
-                const loadingTask = pdfjsLib.getDocument({ data: documentData.data });
+            // 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 (documentData.file_type === 'image/jpeg' ||
-                documentData.file_type === 'image/png') {
+            else if (selectedDoc.file_type === 'image/jpeg' ||
+                selectedDoc.file_type === 'image/png') {
                 const img = new Image();
                 img.onload = () => {
                     this.selectedDocument = img;
@@ -75,7 +101,7 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
                     this.preview = true;
                     this.renderPage();
                 };
-                img.src = URL.createObjectURL(new Blob([documentData.data], { type: documentData.file_type }));
+                img.src = URL.createObjectURL(new Blob([documentData], { type: selectedDoc.file_type }));
                 return;
             }
             else {
@@ -95,12 +121,23 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
         if (this.onClick) {
             try {
                 const documentData = await this.onClick(id);
-                await this.loadDocumentData(documentData);
+                let readerPromise = this.handleReadFile(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;
+            const buffer = await fetch(src).then((res) => res.arrayBuffer());
+            this.loadDocumentData(buffer);
+        }
     }
     async renderPage() {
         if (!this.selectedDocument || !this.canvas || !this.ctx)
@@ -143,22 +180,27 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
             this.renderPage();
         }
     }
-    handleDownload() {
-        if (!this.selectedDocument) {
-            console.error('No document selected for download.');
+    async handleDownload() {
+        if (!this.selectedDocument || !this.onClick) {
+            console.error('No document selected for download or onClick handler missing.');
             return;
         }
-        const selectedDoc = this.documents?.find((doc) => doc.id === this.selectedId);
-        if (!selectedDoc || !selectedDoc.src) {
-            console.error('Document source not found.');
-            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 });
+            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);
         }
-        const link = document.createElement('a');
-        link.href = selectedDoc.src;
-        link.download = selectedDoc.name || 'document.pdf';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
     }
     handleZoom(increase) {
         this.scale = increase ? (this.scale ?? 1) * 1.1 : (this.scale ?? 1) / 1.1;
@@ -189,248 +231,245 @@ let LitAttachmentsTab = class LitAttachmentsTab extends LitElement {
         this.isDragging = false;
     }
     render() {
+        console.log(this.documents);
         if (this.hideTabWhen)
             return null;
-        return html `
+        return html `
             ${this.type === 'compact'
-            ? html ` ${this.documents?.map((doc, index) => html `
-                          <div
+            ? html ` ${this.documents?.map((doc, index) => html `
+                          <div
                               class="document-label ${this.selectedId == doc.id
                 ? 'selected'
-                : null}"
-                              @click=${() => 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>
-
+                : null}"
+                              @click=${() => 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>Zobrazen náhled</span>
-                                        </div>
+                ? 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>Zobrazit náhled</span>
-                                        </div>
-                                    `}
-                          </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
-                          .value="${this.selectedId}"
+            : html `
+                      <lit-select
+                          .value="${this.selectedId}"
                           .options="${this.documents?.map((doc) => ({
                 value: doc.id,
                 label: doc.name,
-            }))}"
+            }))}"
                           .onChange="${(selectedValue) => {
                 this.handleDocumentClick(selectedValue);
-            }}"
-                      ></lit-select>
-                  `}
-
-            <div class="document">
-                <div class="document-box">
-                    <div class="document-selected">
-                        <lit-overflow-tooltip label="${this.getSelectedDocumentName()}">
-                            ${this.getSelectedDocumentName()}
-                        </lit-overflow-tooltip>
-                    </div>
-                    <div class="action-buttons">
+            }}"
+                      ></lit-select>
+                  `}
+
+            <div class="document">
+                <div class="document-box">
+                    <div class="document-selected">
+                        <lit-overflow-tooltip label="${this.getSelectedDocumentName()}">
+                            ${this.getSelectedDocumentName()}
+                        </lit-overflow-tooltip>
+                    </div>
+                    <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="zoomIn"
-                                      variant="text"
-                                      size="small"
-                                      @click=${() => this.handleZoom(true)}
-                                  ></lit-icon-button>
-                                  <lit-icon-button
-                                      icon="zoomout"
-                                      variant="text"
-                                      size="small"
-                                      @click=${() => this.handleZoom(false)}
-                                  ></lit-icon-button>
+            ? 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="zoomIn"
+                                      variant="text"
+                                      size="small"
+                                      @click=${() => this.handleZoom(true)}
+                                  ></lit-icon-button>
+                                  <lit-icon-button
+                                      icon="zoomout"
+                                      variant="text"
+                                      size="small"
+                                      @click=${() => this.handleZoom(false)}
+                                  ></lit-icon-button>
                               `
-            : null}
-
-                        <lit-icon-button
-                            icon="download"
-                            variant="text"
-                            size="small"
-                            @click=${this.handleDownload}
-                        ></lit-icon-button>
-                    </div>
-                </div>
-                <div
-                    class="document-container"
-                    @mousemove=${this.handleMouseMove}
-                    @mouseup=${this.handleMouseUp}
-                    @mouseleave=${this.handleMouseUp}
-                >
-                    <canvas
+            : null}
+
+                        <lit-icon-button
+                            icon="download"
+                            variant="text"
+                            size="small"
+                            @click=${this.handleDownload}
+                        ></lit-icon-button>
+                    </div>
+                </div>
+                <div
+                    class="document-container"
+                    @mousemove=${this.handleMouseMove}
+                    @mouseup=${this.handleMouseUp}
+                    @mouseleave=${this.handleMouseUp}
+                >
+                    <canvas
                         style=${styleMap({
             cursor: (this.scale ?? 1) > 1 ? 'grab' : 'default',
             transform: `scale(${this.scale})`,
-        })}
-                        @mousedown=${this.handleMouseDown}
-                    >
-                    </canvas>
+        })}
+                        @mousedown=${this.handleMouseDown}
+                    >
+                    </canvas>
                     ${!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>
+            ? 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}
-                </div>
-            </div>
+            : null}
+                </div>
+            </div>
         `;
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.abortController.abort();
-    }
 };
 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-success-main, #76b703);
-                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 {
-                height: 100%;
-                background: var(--background-default, #eff3f4);
-                border-radius: 0.25rem;
-                padding: 0.75rem 0.5rem 0.5rem 0.5rem;
-            }
-
-            .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;
-            }
-
-            .document-container {
-                position: relative;
-                width: 100%;
-                height: 100%;
-
-                overflow: auto;
-                justify-content: center;
-                align-items: center;
-            }
-
-            canvas {
-                display: block;
-                margin: 0 auto;
-                transform-origin: 0 0;
-                width: 100%;
-                height: 100%;
-            }
-
-            .not-supported__format {
-                font-size: 0.875rem;
-                text-align: center;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex-direction: column;
-                margin: 1rem 0 1rem 0;
-            }
+    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 {
+                height: 100%;
+                background: var(--background-default, #eff3f4);
+                border-radius: 0.25rem;
+                padding: 0.75rem 0.5rem 0.5rem 0.5rem;
+            }
+
+            .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;
+            }
+
+            .document-container {
+                position: relative;
+                width: 100%;
+                height: 100%;
+
+                overflow: auto;
+                justify-content: center;
+                align-items: center;
+            }
+
+            canvas {
+                display: block;
+                margin: 0 auto;
+                transform-origin: 0 0;
+                width: 100%;
+                height: 100%;
+            }
+
+            .not-supported__format {
+                font-size: 0.875rem;
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                margin: 1rem 0 1rem 0;
+            }
         `,
 ];
 __decorate([
@@ -442,39 +481,36 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], LitAttachmentsTab.prototype, "documents", void 0);
-__decorate([
-    property({ type: String })
-], LitAttachmentsTab.prototype, "selectedId", void 0);
 __decorate([
     property({ type: String })
 ], LitAttachmentsTab.prototype, "type", void 0);
 __decorate([
-    property({ type: Object })
+    property({ type: Number })
+], LitAttachmentsTab.prototype, "scale", void 0);
+__decorate([
+    property({ type: Function })
+], LitAttachmentsTab.prototype, "onClick", void 0);
+__decorate([
+    state()
 ], LitAttachmentsTab.prototype, "selectedDocument", void 0);
 __decorate([
-    property({ type: Number })
+    state()
+], LitAttachmentsTab.prototype, "selectedId", void 0);
+__decorate([
+    state()
 ], LitAttachmentsTab.prototype, "pageNumber", void 0);
 __decorate([
-    property({ type: Number })
+    state()
 ], LitAttachmentsTab.prototype, "pageCount", void 0);
 __decorate([
-    property({ type: Number })
-], LitAttachmentsTab.prototype, "scale", void 0);
-__decorate([
-    property({ type: Object })
+    state()
 ], LitAttachmentsTab.prototype, "isChecked", void 0);
 __decorate([
-    property({ type: Array })
-], LitAttachmentsTab.prototype, "additionalLabels", void 0);
-__decorate([
-    property({ type: Object })
+    state()
 ], LitAttachmentsTab.prototype, "isEllipsisActive", void 0);
 __decorate([
-    property({ type: String })
+    state()
 ], LitAttachmentsTab.prototype, "isHoveredLabel", void 0);
-__decorate([
-    property({ type: Function })
-], LitAttachmentsTab.prototype, "onClick", void 0);
 __decorate([
     state()
 ], LitAttachmentsTab.prototype, "preview", void 0);