@dssp/supervision 1.0.0-alpha.24 → 1.0.0-alpha.26

package/dist-client/pages/building-inspection/component/inspection-document/photo-album-popup.js

@@ -0,0 +1,401 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/elevated-button.js';
+import '@material/web/icon/icon.js';
+import '@material/web/tabs/tabs.js';
+import '@material/web/tabs/primary-tab.js';
+import gql from 'graphql-tag';
+import { client } from '@operato/graphql';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles';
+import { notify, openPopup } from '@operato/layout';
+import '../image-preview-popup';
+import { BuildingInspectionStatus } from '../../building-inspection-list';
+export var PhotoTab;
+(function (PhotoTab) {
+    PhotoTab["CONSTRUCTOR"] = "constructor";
+    PhotoTab["SUPERVISOR"] = "supervisor";
+})(PhotoTab || (PhotoTab = {}));
+let PhotoAlbumPopup = class PhotoAlbumPopup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.checklistId = '';
+        this.activeTab = PhotoTab.CONSTRUCTOR;
+        this.constructorFiles = [];
+        this.supervisorFiles = [];
+    }
+    render() {
+        const currentFiles = this.activeTab === PhotoTab.CONSTRUCTOR ? this.constructorFiles : this.supervisorFiles;
+        const constructorCount = this.constructorFiles.length;
+        const supervisorCount = this.supervisorFiles.length;
+        return html `
+      <div body>
+        <div class="tabs-container">
+          <md-tabs>
+            <md-primary-tab
+              ?active=${this.activeTab === PhotoTab.CONSTRUCTOR}
+              @click=${() => this._setActiveTab(PhotoTab.CONSTRUCTOR)}
+            >
+              시공자 (${constructorCount})
+            </md-primary-tab>
+            <md-primary-tab
+              ?active=${this.activeTab === PhotoTab.SUPERVISOR}
+              @click=${() => this._setActiveTab(PhotoTab.SUPERVISOR)}
+            >
+              감리자 (${supervisorCount})
+            </md-primary-tab>
+          </md-tabs>
+        </div>
+
+        <div class="tab-content">
+          <div class="photo-count">
+            ${this.activeTab === PhotoTab.CONSTRUCTOR ? '시공자' : '감리자'} 첨부파일: ${currentFiles.length}건
+          </div>
+
+          ${currentFiles.length > 0
+            ? html `
+                <div class="photo-grid">
+                  ${currentFiles.map((file, index) => {
+                var _a;
+                return html `
+                      <div class="photo-item" @click=${() => this._openFilePreview(currentFiles, index)}>
+                        ${this._isImageFile(file.fullpath)
+                    ? html `<img
+                              src="${file.fullpath}"
+                              alt="${file.name}"
+                              @error=${(e) => this._onImageError(e, file)}
+                            />`
+                    : html `
+                              <div class="file-icon-container">
+                                <md-icon class="file-icon">description</md-icon>
+                                <div class="file-extension">${this._getFileExtension(file.fullpath)}</div>
+                              </div>
+                            `}
+                        <div class="photo-overlay">
+                          <div class="photo-info">
+                            <div class="photo-name">${file.name}</div>
+                            <div class="photo-creator">
+                              <md-icon style="--md-icon-size: 10px;">account_circle</md-icon>
+                              ${((_a = file.creator) === null || _a === void 0 ? void 0 : _a.name) || ''}
+                            </div>
+                            <div class="photo-date">${this._formatDate(file.createdAt)}</div>
+                          </div>
+                        </div>
+                      </div>
+                    `;
+            })}
+                </div>
+              `
+            : html `
+                <div class="empty-state">
+                  <md-icon>attach_file</md-icon>
+                  <div>${this.activeTab === PhotoTab.CONSTRUCTOR ? '시공자' : '감리자'}가 업로드한 첨부파일이 없습니다.</div>
+                </div>
+              `}
+        </div>
+      </div>
+
+      <div class="button-container">
+        <md-elevated-button @click=${this._close}> <md-icon slot="icon">close</md-icon>닫기 </md-elevated-button>
+      </div>
+    `;
+    }
+    async firstUpdated() {
+        await this._loadPhotos();
+    }
+    async _loadPhotos() {
+        var _a;
+        try {
+            const response = await client.query({
+                query: gql `
+          query ChecklistPhotos($checklistId: String!) {
+            checklist(id: $checklistId) {
+              id
+              checklistItems {
+                id
+                name
+                checklistItemAttachments {
+                  id
+                  name
+                  fullpath
+                  description
+                  creator {
+                    id
+                    name
+                    email
+                  }
+                  createdAt
+                }
+              }
+            }
+          }
+        `,
+                variables: {
+                    checklistId: this.checklistId
+                }
+            });
+            if (response.errors) {
+                notify({ message: '사진 목록을 불러오는데 실패했습니다.', level: 'error' });
+                return;
+            }
+            const checklist = response.data.checklist;
+            // 모든 체크리스트 아이템의 첨부파일을 수집 (이미지와 일반 파일 모두)
+            const allAttachments = ((_a = checklist.checklistItems) === null || _a === void 0 ? void 0 : _a.flatMap((item) => {
+                var _a;
+                return ((_a = item.checklistItemAttachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (Object.assign(Object.assign({}, attachment), { previewTitle: `[검사 항목] ${item.name}` })))) || [];
+            })) || [];
+            // 시공자와 감리자로 분류 (이메일 도메인이나 역할로 구분)
+            this.constructorFiles = allAttachments.filter(attachment => [BuildingInspectionStatus.WAIT, BuildingInspectionStatus.OVERALL_WAIT, BuildingInspectionStatus.FAIL].includes(attachment.description));
+            this.supervisorFiles = allAttachments.filter(attachment => [BuildingInspectionStatus.REQUEST, BuildingInspectionStatus.OVERALL_REQUEST].includes(attachment.description));
+        }
+        catch (error) {
+            console.error('사진 목록 로딩 중 오류 발생:', error);
+            notify({ message: '사진 목록을 불러오는데 실패했습니다.', level: 'error' });
+        }
+    }
+    _isImageFile(filepath) {
+        if (!filepath)
+            return false;
+        const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
+        const extension = filepath.toLowerCase().split('.').pop();
+        return imageExtensions.includes(extension || '');
+    }
+    _getFileExtension(filepath) {
+        if (!filepath)
+            return '';
+        const extension = filepath.toLowerCase().split('.').pop();
+        return extension || 'file';
+    }
+    _setActiveTab(tab) {
+        this.activeTab = tab;
+    }
+    _openFilePreview(files, startIndex) {
+        const file = files[startIndex];
+        if (this._isImageFile(file.fullpath)) {
+            // 이미지들만 필터링해서 이미지 미리보기 팝업 열기
+            const imageFiles = files.filter(f => this._isImageFile(f.fullpath));
+            const imageIndex = imageFiles.findIndex(f => f.id === file.id);
+            openPopup(html ` <image-preview-popup .images=${imageFiles} .currentIndex=${Math.max(0, imageIndex)}></image-preview-popup> `, { backdrop: true, size: 'large', title: '사진 미리보기' });
+        }
+        else {
+            // 일반 파일은 새 탭에서 열기 또는 다운로드
+            window.open(file.fullpath, '_blank');
+        }
+    }
+    _onImageError(e, file) {
+        const target = e.target;
+        target.style.display = 'none';
+        // 오류 발생 시 기본 아이콘 표시
+        const container = target.parentElement;
+        container.innerHTML += `
+      <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #f5f5f5;">
+        <md-icon style="--md-icon-size: 48px; color: #ccc;">broken_image</md-icon>
+      </div>
+    `;
+    }
+    _formatDate(date) {
+        const _date = new Date(date);
+        if (isNaN(_date.getTime())) {
+            return '날짜 없음';
+        }
+        const year = _date.getFullYear();
+        const month = String(_date.getMonth() + 1).padStart(2, '0');
+        const day = String(_date.getDate()).padStart(2, '0');
+        const hours = String(_date.getHours()).padStart(2, '0');
+        const minutes = String(_date.getMinutes()).padStart(2, '0');
+        return `${year}.${month}.${day} ${hours}:${minutes}`;
+    }
+    _close() {
+        history.back();
+    }
+};
+PhotoAlbumPopup.styles = [
+    ButtonContainerStyles,
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        width: 100%;
+        max-height: 80vh;
+      }
+
+      div[body] {
+        flex: 1;
+        overflow-y: auto;
+        padding: 20px;
+      }
+
+      .tabs-container {
+        margin-bottom: 20px;
+        border-bottom: 2px solid #ddd;
+      }
+
+      md-tabs {
+        --md-primary-tab-container-color: transparent;
+        --md-primary-tab-active-indicator-color: #2196f3;
+        --md-primary-tab-label-text-color: #666;
+        --md-primary-tab-active-label-text-color: #2196f3;
+      }
+
+      .photo-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 15px;
+        margin-bottom: 20px;
+      }
+
+      .photo-item {
+        position: relative;
+        aspect-ratio: 1;
+        border-radius: 8px;
+        overflow: hidden;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border: 2px solid #ddd;
+      }
+
+      .photo-item:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        border-color: #2196f3;
+      }
+
+      .photo-item img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .photo-overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+        color: white;
+        padding: 10px 8px 8px;
+        font-size: 12px;
+        line-height: 1.2;
+      }
+
+      .photo-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .photo-name {
+        font-weight: bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .photo-creator {
+        font-size: 10px;
+        opacity: 0.9;
+        display: flex;
+        align-items: center;
+        gap: 3px;
+      }
+
+      .photo-date {
+        font-size: 10px;
+        opacity: 0.8;
+      }
+
+      .file-icon-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background-color: #f5f5f5;
+        position: relative;
+      }
+
+      .file-icon {
+        --md-icon-size: 48px;
+        color: #666;
+        margin-bottom: 8px;
+      }
+
+      .file-extension {
+        font-size: 12px;
+        font-weight: bold;
+        color: #444;
+        background-color: #e0e0e0;
+        padding: 2px 6px;
+        border-radius: 3px;
+        text-transform: uppercase;
+      }
+
+      .empty-state {
+        text-align: center;
+        color: #666;
+        padding: 60px 20px;
+      }
+
+      .empty-state md-icon {
+        --md-icon-size: 64px;
+        color: #ccc;
+        margin-bottom: 16px;
+      }
+
+      .tab-content {
+        min-height: 300px;
+      }
+
+      .photo-count {
+        color: #666;
+        font-size: 14px;
+        margin-bottom: 15px;
+        padding: 10px;
+        background-color: #f5f5f5;
+        border-radius: 5px;
+        text-align: center;
+      }
+
+      h3 {
+        position: relative;
+        color: rgb(5, 149, 229);
+        font-size: 17px;
+        font-weight: 700;
+        margin: 0px 0px 20px 0px;
+        padding-top: 0px;
+      }
+
+      .button-container {
+        display: flex;
+        justify-content: center;
+        padding: 15px;
+        border-top: 1px solid #ddd;
+        background-color: #f9f9f9;
+        margin-left: unset;
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], PhotoAlbumPopup.prototype, "checklistId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], PhotoAlbumPopup.prototype, "activeTab", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], PhotoAlbumPopup.prototype, "constructorFiles", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], PhotoAlbumPopup.prototype, "supervisorFiles", void 0);
+PhotoAlbumPopup = __decorate([
+    customElement('photo-album-popup')
+], PhotoAlbumPopup);
+export { PhotoAlbumPopup };
+//# sourceMappingURL=photo-album-popup.js.map

package/dist-client/pages/building-inspection/component/inspection-document/photo-album-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"photo-album-popup.js","sourceRoot":"","sources":["../../../../../client/pages/building-inspection/component/inspection-document/photo-album-popup.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,4BAA4B,CAAA;AACnC,OAAO,4BAA4B,CAAA;AACnC,OAAO,mCAAmC,CAAA;AAE1C,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACxE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,wBAAwB,CAAA;AAC/B,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAA;AAEzE,MAAM,CAAN,IAAY,QAGX;AAHD,WAAY,QAAQ;IAClB,uCAA2B,CAAA;IAC3B,qCAAyB,CAAA;AAC3B,CAAC,EAHW,QAAQ,KAAR,QAAQ,QAGnB;AAGM,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QA2KuB,gBAAW,GAAW,EAAE,CAAA;QAE3C,cAAS,GAAa,QAAQ,CAAC,WAAW,CAAA;QAC1C,qBAAgB,GAAU,EAAE,CAAA;QAC5B,oBAAe,GAAU,EAAE,CAAA;IAqNtC,CAAC;IAnNC,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAA;QAC3G,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAA;QACrD,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAA;QAEnD,OAAO,IAAI,CAAA;;;;;wBAKS,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,WAAW;uBACxC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC;;qBAEhD,gBAAgB;;;wBAGb,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,UAAU;uBACvC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC;;qBAE/C,eAAe;;;;;;;cAOtB,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,UAAU,YAAY,CAAC,MAAM;;;YAGtF,YAAY,CAAC,MAAM,GAAG,CAAC;YACvB,CAAC,CAAC,IAAI,CAAA;;oBAEE,YAAY,CAAC,GAAG,CAChB,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;gBAAC,OAAA,IAAI,CAAA;uDACc,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,KAAK,CAAC;0BAC7E,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC;oBAChC,CAAC,CAAC,IAAI,CAAA;qCACK,IAAI,CAAC,QAAQ;qCACb,IAAI,CAAC,IAAI;uCACP,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,IAAI,CAAC;+BACjD;oBACL,CAAC,CAAC,IAAI,CAAA;;;8DAG8B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;;6BAEtE;;;sDAGyB,IAAI,CAAC,IAAI;;;gCAG/B,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,IAAI,KAAI,EAAE;;sDAEF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;;;;qBAIjE,CAAA;aAAA,CACF;;eAEJ;YACH,CAAC,CAAC,IAAI,CAAA;;;yBAGO,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;;eAEjE;;;;;qCAKsB,IAAI,CAAC,MAAM;;KAE3C,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,IAAI,CAAC,WAAW,EAAE,CAAA;IAC1B,CAAC;IAEO,KAAK,CAAC,WAAW;;QACvB,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;SAsBT;gBACD,SAAS,EAAE;oBACT,WAAW,EAAE,IAAI,CAAC,WAAW;iBAC9B;aACF,CAAC,CAAA;YAEF,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACpB,MAAM,CAAC,EAAE,OAAO,EAAE,sBAAsB,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAA;gBAC3D,OAAM;YACR,CAAC;YAED,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAA;YACzC,yCAAyC;YACzC,MAAM,cAAc,GAClB,CAAA,MAAA,SAAS,CAAC,cAAc,0CAAE,OAAO,CAC/B,CAAC,IAAS,EAAE,EAAE;;gBACZ,OAAA,CAAA,MAAA,IAAI,CAAC,wBAAwB,0CAAE,GAAG,CAAC,CAAC,UAAe,EAAE,EAAE,CAAC,iCACnD,UAAU,KACb,YAAY,EAAE,WAAW,IAAI,CAAC,IAAI,EAAE,IACpC,CAAC,KAAI,EAAE,CAAA;aAAA,CACZ,KAAI,EAAE,CAAA;YAET,kCAAkC;YAClC,IAAI,CAAC,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,CACzD,CAAC,wBAAwB,CAAC,IAAI,EAAE,wBAAwB,CAAC,YAAY,EAAE,wBAAwB,CAAC,IAAI,CAAC,CAAC,QAAQ,CAC5G,UAAU,CAAC,WAAW,CACvB,CACF,CAAA;YAED,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,CACxD,CAAC,wBAAwB,CAAC,OAAO,EAAE,wBAAwB,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,CAC9G,CAAA;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAA;YACzC,MAAM,CAAC,EAAE,OAAO,EAAE,sBAAsB,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAA;QAC7D,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,QAAgB;QACnC,IAAI,CAAC,QAAQ;YAAE,OAAO,KAAK,CAAA;QAC3B,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,CAAA;QAC3E,MAAM,SAAS,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAA;QACzD,OAAO,eAAe,CAAC,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAC,CAAA;IAClD,CAAC;IAEO,iBAAiB,CAAC,QAAgB;QACxC,IAAI,CAAC,QAAQ;YAAE,OAAO,EAAE,CAAA;QACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAA;QACzD,OAAO,SAAS,IAAI,MAAM,CAAA;IAC5B,CAAC;IAEO,aAAa,CAAC,GAAa;QACjC,IAAI,CAAC,SAAS,GAAG,GAAG,CAAA;IACtB,CAAC;IAEO,gBAAgB,CAAC,KAAY,EAAE,UAAkB;QACvD,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAA;QAE9B,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YACrC,6BAA6B;YAC7B,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAA;YACnE,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAA;YAE9D,SAAS,CACP,IAAI,CAAA,iCAAiC,UAAU,kBAAkB,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,CAAC,0BAA0B,EAClH,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,CACpD,CAAA;QACH,CAAC;aAAM,CAAC;YACN,0BAA0B;YAC1B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QACtC,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,CAAQ,EAAE,IAAS;QACvC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC3C,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;QAE7B,oBAAoB;QACpB,MAAM,SAAS,GAAG,MAAM,CAAC,aAAc,CAAA;QACvC,SAAS,CAAC,SAAS,IAAI;;;;KAItB,CAAA;IACH,CAAC;IAEO,WAAW,CAAC,IAAmB;QACrC,MAAM,KAAK,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAA;QAE5B,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC;YAC3B,OAAO,OAAO,CAAA;QAChB,CAAC;QAED,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,EAAE,CAAA;QAChC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;QAC3D,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;QACpD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;QACvD,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;QAE3D,OAAO,GAAG,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,KAAK,IAAI,OAAO,EAAE,CAAA;IACtD,CAAC;IAEO,MAAM;QACZ,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;;AAlYM,sBAAM,GAAG;IACd,qBAAqB;IACrB,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoKF;CACF,AAxKY,CAwKZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAyB;AAE3C;IAAR,KAAK,EAAE;;kDAA2C;AAC1C;IAAR,KAAK,EAAE;;yDAA6B;AAC5B;IAAR,KAAK,EAAE;;wDAA4B;AA/KzB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAoY3B","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/icon/icon.js'\nimport '@material/web/tabs/tabs.js'\nimport '@material/web/tabs/primary-tab.js'\n\nimport gql from 'graphql-tag'\nimport { client } from '@operato/graphql'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\nimport { notify, openPopup } from '@operato/layout'\nimport '../image-preview-popup'\nimport { BuildingInspectionStatus } from '../../building-inspection-list'\n\nexport enum PhotoTab {\n  CONSTRUCTOR = 'constructor',\n  SUPERVISOR = 'supervisor'\n}\n\n@customElement('photo-album-popup')\nexport class PhotoAlbumPopup extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: #fff;\n        width: 100%;\n        max-height: 80vh;\n      }\n\n      div[body] {\n        flex: 1;\n        overflow-y: auto;\n        padding: 20px;\n      }\n\n      .tabs-container {\n        margin-bottom: 20px;\n        border-bottom: 2px solid #ddd;\n      }\n\n      md-tabs {\n        --md-primary-tab-container-color: transparent;\n        --md-primary-tab-active-indicator-color: #2196f3;\n        --md-primary-tab-label-text-color: #666;\n        --md-primary-tab-active-label-text-color: #2196f3;\n      }\n\n      .photo-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n        gap: 15px;\n        margin-bottom: 20px;\n      }\n\n      .photo-item {\n        position: relative;\n        aspect-ratio: 1;\n        border-radius: 8px;\n        overflow: hidden;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        border: 2px solid #ddd;\n      }\n\n      .photo-item:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        border-color: #2196f3;\n      }\n\n      .photo-item img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n\n      .photo-overlay {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));\n        color: white;\n        padding: 10px 8px 8px;\n        font-size: 12px;\n        line-height: 1.2;\n      }\n\n      .photo-info {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n\n      .photo-name {\n        font-weight: bold;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .photo-creator {\n        font-size: 10px;\n        opacity: 0.9;\n        display: flex;\n        align-items: center;\n        gap: 3px;\n      }\n\n      .photo-date {\n        font-size: 10px;\n        opacity: 0.8;\n      }\n\n      .file-icon-container {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        background-color: #f5f5f5;\n        position: relative;\n      }\n\n      .file-icon {\n        --md-icon-size: 48px;\n        color: #666;\n        margin-bottom: 8px;\n      }\n\n      .file-extension {\n        font-size: 12px;\n        font-weight: bold;\n        color: #444;\n        background-color: #e0e0e0;\n        padding: 2px 6px;\n        border-radius: 3px;\n        text-transform: uppercase;\n      }\n\n      .empty-state {\n        text-align: center;\n        color: #666;\n        padding: 60px 20px;\n      }\n\n      .empty-state md-icon {\n        --md-icon-size: 64px;\n        color: #ccc;\n        margin-bottom: 16px;\n      }\n\n      .tab-content {\n        min-height: 300px;\n      }\n\n      .photo-count {\n        color: #666;\n        font-size: 14px;\n        margin-bottom: 15px;\n        padding: 10px;\n        background-color: #f5f5f5;\n        border-radius: 5px;\n        text-align: center;\n      }\n\n      h3 {\n        position: relative;\n        color: rgb(5, 149, 229);\n        font-size: 17px;\n        font-weight: 700;\n        margin: 0px 0px 20px 0px;\n        padding-top: 0px;\n      }\n\n      .button-container {\n        display: flex;\n        justify-content: center;\n        padding: 15px;\n        border-top: 1px solid #ddd;\n        background-color: #f9f9f9;\n        margin-left: unset;\n      }\n    `\n  ]\n\n  @property({ type: String }) checklistId: string = ''\n\n  @state() activeTab: PhotoTab = PhotoTab.CONSTRUCTOR\n  @state() constructorFiles: any[] = []\n  @state() supervisorFiles: any[] = []\n\n  render() {\n    const currentFiles = this.activeTab === PhotoTab.CONSTRUCTOR ? this.constructorFiles : this.supervisorFiles\n    const constructorCount = this.constructorFiles.length\n    const supervisorCount = this.supervisorFiles.length\n\n    return html`\n      <div body>\n        <div class=\"tabs-container\">\n          <md-tabs>\n            <md-primary-tab\n              ?active=${this.activeTab === PhotoTab.CONSTRUCTOR}\n              @click=${() => this._setActiveTab(PhotoTab.CONSTRUCTOR)}\n            >\n              시공자 (${constructorCount})\n            </md-primary-tab>\n            <md-primary-tab\n              ?active=${this.activeTab === PhotoTab.SUPERVISOR}\n              @click=${() => this._setActiveTab(PhotoTab.SUPERVISOR)}\n            >\n              감리자 (${supervisorCount})\n            </md-primary-tab>\n          </md-tabs>\n        </div>\n\n        <div class=\"tab-content\">\n          <div class=\"photo-count\">\n            ${this.activeTab === PhotoTab.CONSTRUCTOR ? '시공자' : '감리자'} 첨부파일: ${currentFiles.length}건\n          </div>\n\n          ${currentFiles.length > 0\n            ? html`\n                <div class=\"photo-grid\">\n                  ${currentFiles.map(\n                    (file, index) => html`\n                      <div class=\"photo-item\" @click=${() => this._openFilePreview(currentFiles, index)}>\n                        ${this._isImageFile(file.fullpath)\n                          ? html`<img\n                              src=\"${file.fullpath}\"\n                              alt=\"${file.name}\"\n                              @error=${(e: Event) => this._onImageError(e, file)}\n                            />`\n                          : html`\n                              <div class=\"file-icon-container\">\n                                <md-icon class=\"file-icon\">description</md-icon>\n                                <div class=\"file-extension\">${this._getFileExtension(file.fullpath)}</div>\n                              </div>\n                            `}\n                        <div class=\"photo-overlay\">\n                          <div class=\"photo-info\">\n                            <div class=\"photo-name\">${file.name}</div>\n                            <div class=\"photo-creator\">\n                              <md-icon style=\"--md-icon-size: 10px;\">account_circle</md-icon>\n                              ${file.creator?.name || ''}\n                            </div>\n                            <div class=\"photo-date\">${this._formatDate(file.createdAt)}</div>\n                          </div>\n                        </div>\n                      </div>\n                    `\n                  )}\n                </div>\n              `\n            : html`\n                <div class=\"empty-state\">\n                  <md-icon>attach_file</md-icon>\n                  <div>${this.activeTab === PhotoTab.CONSTRUCTOR ? '시공자' : '감리자'}가 업로드한 첨부파일이 없습니다.</div>\n                </div>\n              `}\n        </div>\n      </div>\n\n      <div class=\"button-container\">\n        <md-elevated-button @click=${this._close}> <md-icon slot=\"icon\">close</md-icon>닫기 </md-elevated-button>\n      </div>\n    `\n  }\n\n  async firstUpdated() {\n    await this._loadPhotos()\n  }\n\n  private async _loadPhotos() {\n    try {\n      const response = await client.query({\n        query: gql`\n          query ChecklistPhotos($checklistId: String!) {\n            checklist(id: $checklistId) {\n              id\n              checklistItems {\n                id\n                name\n                checklistItemAttachments {\n                  id\n                  name\n                  fullpath\n                  description\n                  creator {\n                    id\n                    name\n                    email\n                  }\n                  createdAt\n                }\n              }\n            }\n          }\n        `,\n        variables: {\n          checklistId: this.checklistId\n        }\n      })\n\n      if (response.errors) {\n        notify({ message: '사진 목록을 불러오는데 실패했습니다.', level: 'error' })\n        return\n      }\n\n      const checklist = response.data.checklist\n      // 모든 체크리스트 아이템의 첨부파일을 수집 (이미지와 일반 파일 모두)\n      const allAttachments =\n        checklist.checklistItems?.flatMap(\n          (item: any) =>\n            item.checklistItemAttachments?.map((attachment: any) => ({\n              ...attachment,\n              previewTitle: `[검사 항목] ${item.name}`\n            })) || []\n        ) || []\n\n      // 시공자와 감리자로 분류 (이메일 도메인이나 역할로 구분)\n      this.constructorFiles = allAttachments.filter(attachment =>\n        [BuildingInspectionStatus.WAIT, BuildingInspectionStatus.OVERALL_WAIT, BuildingInspectionStatus.FAIL].includes(\n          attachment.description\n        )\n      )\n\n      this.supervisorFiles = allAttachments.filter(attachment =>\n        [BuildingInspectionStatus.REQUEST, BuildingInspectionStatus.OVERALL_REQUEST].includes(attachment.description)\n      )\n    } catch (error) {\n      console.error('사진 목록 로딩 중 오류 발생:', error)\n      notify({ message: '사진 목록을 불러오는데 실패했습니다.', level: 'error' })\n    }\n  }\n\n  private _isImageFile(filepath: string): boolean {\n    if (!filepath) return false\n    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']\n    const extension = filepath.toLowerCase().split('.').pop()\n    return imageExtensions.includes(extension || '')\n  }\n\n  private _getFileExtension(filepath: string): string {\n    if (!filepath) return ''\n    const extension = filepath.toLowerCase().split('.').pop()\n    return extension || 'file'\n  }\n\n  private _setActiveTab(tab: PhotoTab) {\n    this.activeTab = tab\n  }\n\n  private _openFilePreview(files: any[], startIndex: number) {\n    const file = files[startIndex]\n\n    if (this._isImageFile(file.fullpath)) {\n      // 이미지들만 필터링해서 이미지 미리보기 팝업 열기\n      const imageFiles = files.filter(f => this._isImageFile(f.fullpath))\n      const imageIndex = imageFiles.findIndex(f => f.id === file.id)\n\n      openPopup(\n        html` <image-preview-popup .images=${imageFiles} .currentIndex=${Math.max(0, imageIndex)}></image-preview-popup> `,\n        { backdrop: true, size: 'large', title: '사진 미리보기' }\n      )\n    } else {\n      // 일반 파일은 새 탭에서 열기 또는 다운로드\n      window.open(file.fullpath, '_blank')\n    }\n  }\n\n  private _onImageError(e: Event, file: any) {\n    const target = e.target as HTMLImageElement\n    target.style.display = 'none'\n\n    // 오류 발생 시 기본 아이콘 표시\n    const container = target.parentElement!\n    container.innerHTML += `\n      <div style=\"display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #f5f5f5;\">\n        <md-icon style=\"--md-icon-size: 48px; color: #ccc;\">broken_image</md-icon>\n      </div>\n    `\n  }\n\n  private _formatDate(date: string | Date): string {\n    const _date = new Date(date)\n\n    if (isNaN(_date.getTime())) {\n      return '날짜 없음'\n    }\n\n    const year = _date.getFullYear()\n    const month = String(_date.getMonth() + 1).padStart(2, '0')\n    const day = String(_date.getDate()).padStart(2, '0')\n    const hours = String(_date.getHours()).padStart(2, '0')\n    const minutes = String(_date.getMinutes()).padStart(2, '0')\n\n    return `${year}.${month}.${day} ${hours}:${minutes}`\n  }\n\n  private _close() {\n    history.back()\n  }\n}\n"]}

package/dist-client/pages/building-inspection/component/photo-album-popup.d.ts

@@ -0,0 +1,41 @@
+import '@material/web/button/elevated-button.js';
+import '@material/web/icon/icon.js';
+import '@material/web/tabs/tabs.js';
+import '@material/web/tabs/primary-tab.js';
+import { LitElement } from 'lit';
+import { User } from '@operato/shell';
+import './image-preview-popup';
+export declare enum PhotoTab {
+    CONSTRUCTOR = "constructor",
+    SUPERVISOR = "supervisor"
+}
+declare const PhotoAlbumPopup_base: (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & typeof LitElement;
+export declare class PhotoAlbumPopup extends PhotoAlbumPopup_base {
+    static styles: import("lit").CSSResult[];
+    checklistId: string;
+    title: string;
+    activeTab: PhotoTab;
+    constructorPhotos: any[];
+    supervisorPhotos: any[];
+    user: User;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): Promise<void>;
+    private _loadPhotos;
+    private _isImageFile;
+    private _isConstructor;
+    private _isSupervisor;
+    private _checkUserRole;
+    private _setActiveTab;
+    private _onTabChange;
+    private _openPhotoPreview;
+    private _onImageError;
+    private _formatDate;
+    private _close;
+}
+export {};