@dssp/supervision 1.0.0-alpha.9 → 1.0.0-alpha.92

package/dist-client/pages/building-inspection/component/field-document/field-document-list-panel.js

@@ -0,0 +1,545 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '../../component/image-preview-popup';
+import { ScrollbarStyles } from '@operato/styles';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { openPopup } from '@operato/layout';
+let FieldDocumentListPanel = class FieldDocumentListPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.projectId = '';
+        this.code = '';
+        this.folderName = '';
+        this.documents = [];
+        this.selectedIds = new Set();
+        this.isDragOver = false;
+        this.selectedDoc = null;
+    }
+    render() {
+        return html `
+      <div panel-header>
+        <h3>문서 목록${this.folderName ? ` - ${this.folderName}` : ''}</h3>
+        <span doc-count>${this.documents.length}건</span>
+      </div>
+
+      ${this.code
+            ? html `
+            <div table-header>
+              <div></div>
+              <div>
+                <input
+                  type="checkbox"
+                  @change=${this._toggleAll}
+                  .checked=${this.selectedIds.size > 0 && this.selectedIds.size === this.documents.length}
+                />
+              </div>
+              <div>문서번호</div>
+              <div style="justify-content:flex-start; padding-left:8px;">제 목</div>
+              <div>등록부서</div>
+              <div>등록자</div>
+              <div>자료분류</div>
+              <div>기술분야</div>
+              <div>등록일자</div>
+            </div>
+
+            <div
+              doc-list
+              @dragover=${this._onListDragOver}
+              @dragleave=${this._onListDragLeave}
+              @drop=${this._onListDrop}
+            >
+              ${this.isDragOver ? html `<div drop-zone><span>여기에 파일을 놓으세요</span></div>` : ''}
+
+              ${this.documents.length > 0
+                ? this.documents.map((doc, idx) => {
+                    var _a, _b;
+                    return html `
+                      <div
+                        doc-item
+                        draggable="true"
+                        ?selected=${((_a = this.selectedDoc) === null || _a === void 0 ? void 0 : _a.id) === doc.id}
+                        @dragstart=${(e) => this._onDocDragStart(e, doc)}
+                        @click=${() => this._selectDoc(doc)}
+                      >
+                        <div>
+                          <md-icon
+                            preview
+                            @click=${(e) => {
+                        e.stopPropagation();
+                        this._openPreview(doc);
+                    }}
+                          >visibility</md-icon>
+                        </div>
+                        <div>
+                          <input
+                            type="checkbox"
+                            .checked=${this.selectedIds.has(doc.id)}
+                            @change=${(e) => this._toggleDoc(e, doc.id)}
+                            @click=${(e) => e.stopPropagation()}
+                          />
+                        </div>
+                        <div>${doc.code}${String(idx + 1).padStart(2, '0')}</div>
+                        <div name-cell>
+                          ${doc.isFavorite ? html `<md-icon favorite>star</md-icon>` : ''}
+                          <span>${doc.name}</span>
+                        </div>
+                        <div></div>
+                        <div>${((_b = doc.creator) === null || _b === void 0 ? void 0 : _b.name) || ''}</div>
+                        <div></div>
+                        <div></div>
+                        <div>${this._formatDate(doc.createdAt)}</div>
+                      </div>
+                    `;
+                })
+                : html `
+                    <div empty-state>
+                      <md-icon>folder_open</md-icon>
+                      <div>등록된 문서가 없습니다.</div>
+                      <div style="font-size:12px; margin-top:4px;">파일을 드래그하여 업로드하세요.</div>
+                    </div>
+                  `}
+            </div>
+
+            ${this.selectedDoc
+                ? html `
+                  <div doc-detail>
+                    <div detail-content>
+                      <md-icon file-icon>description</md-icon>
+                      <div detail-info>
+                        <div file-name>${this.selectedDoc.name}</div>
+                        <div file-meta>
+                          <div>수정한 날짜: ${this._formatDateTime(this.selectedDoc.createdAt)}</div>
+                          ${this.selectedDoc.fileSize ? html `<div>크기: ${this._formatFileSize(this.selectedDoc.fileSize)}</div>` : ''}
+                        </div>
+                        ${this.selectedDoc.aiSummary
+                    ? html `
+                              <div ai-summary>
+                                <md-icon>auto_awesome</md-icon>
+                                <div>
+                                  <strong>AI 브리핑</strong><br />
+                                  ${this.selectedDoc.aiSummary}
+                                </div>
+                              </div>
+                            `
+                    : this.selectedDoc.aiSummaryStatus === '10'
+                        ? html `
+                                <div ai-pending>
+                                  <md-icon>hourglass_top</md-icon>
+                                  AI 요약 생성 중...
+                                </div>
+                              `
+                        : ''}
+                      </div>
+                    </div>
+                  </div>
+                `
+                : ''}
+          `
+            : html `
+            <div empty-state>
+              <md-icon>folder</md-icon>
+              <div>소분류 폴더를 선택해주세요.</div>
+            </div>
+          `}
+    `;
+    }
+    _selectDoc(doc) {
+        this.selectedDoc = doc;
+    }
+    _openPreview(doc) {
+        this.selectedDoc = doc;
+        if (!doc.fullpath)
+            return;
+        const ext = doc.fullpath.toLowerCase().split('.').pop() || '';
+        const isImage = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(ext);
+        if (isImage) {
+            openPopup(html `<image-preview-popup
+          .images=${[{ fullpath: doc.fullpath, name: doc.name }]}
+          .currentIndex=${0}
+        ></image-preview-popup>`, { backdrop: true, size: 'large', title: doc.name });
+        }
+        else {
+            // PDF 등 기타 파일은 새 탭에서 열기
+            window.open(doc.fullpath, '_blank');
+        }
+    }
+    _toggleDoc(e, id) {
+        const checked = e.target.checked;
+        const newSet = new Set(this.selectedIds);
+        if (checked) {
+            newSet.add(id);
+        }
+        else {
+            newSet.delete(id);
+        }
+        this.selectedIds = newSet;
+        this.dispatchEvent(new CustomEvent('document-selected', { detail: newSet }));
+    }
+    _toggleAll(e) {
+        const checked = e.target.checked;
+        if (checked) {
+            this.selectedIds = new Set(this.documents.map(d => d.id));
+        }
+        else {
+            this.selectedIds = new Set();
+        }
+        this.dispatchEvent(new CustomEvent('document-selected', { detail: this.selectedIds }));
+    }
+    /* Drag & Drop: 데스크톱 파일 업로드 */
+    _onListDragOver(e) {
+        var _a;
+        const types = ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) || [];
+        if (types.includes('Files')) {
+            e.preventDefault();
+            this.isDragOver = true;
+        }
+    }
+    _onListDragLeave() {
+        this.isDragOver = false;
+    }
+    _onListDrop(e) {
+        var _a;
+        e.preventDefault();
+        this.isDragOver = false;
+        const files = Array.from(((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) || []);
+        if (files.length > 0) {
+            this.dispatchEvent(new CustomEvent('documents-changed', { detail: { files } }));
+        }
+    }
+    /* Drag: 문서 이동용 */
+    _onDocDragStart(e, doc) {
+        var _a;
+        const ids = this.selectedIds.has(doc.id) ? Array.from(this.selectedIds) : [doc.id];
+        (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.setData('application/x-field-document-ids', JSON.stringify(ids));
+        e.dataTransfer.effectAllowed = 'move';
+    }
+    _formatDate(date) {
+        if (!date)
+            return '';
+        try {
+            const d = new Date(date);
+            return new Intl.DateTimeFormat('ko-KR', {
+                timeZone: 'Asia/Seoul',
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit'
+            }).format(d);
+        }
+        catch (_a) {
+            return '';
+        }
+    }
+    _formatFileSize(size) {
+        const bytes = Number(size);
+        if (isNaN(bytes))
+            return size;
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    _formatDateTime(date) {
+        if (!date)
+            return '';
+        try {
+            const d = new Date(date);
+            return new Intl.DateTimeFormat('ko-KR', {
+                timeZone: 'Asia/Seoul',
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: true
+            }).format(d);
+        }
+        catch (_a) {
+            return '';
+        }
+    }
+};
+FieldDocumentListPanel.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      div[panel-header] {
+        display: flex;
+        align-items: center;
+        padding: 10px 16px;
+        background: #fafafa;
+        border-bottom: 1px solid #e0e0e0;
+
+        h3 {
+          margin: 0;
+          font-size: 14px;
+          color: #333;
+          flex: 1;
+        }
+
+        span[doc-count] {
+          font-size: 12px;
+          color: #999;
+        }
+      }
+
+      div[table-header] {
+        display: grid;
+        grid-template-columns: 30px 40px 80px 1fr 80px 80px 80px 80px 100px;
+        padding: 8px 16px;
+        background: #f0e6e6;
+        font-size: 12px;
+        font-weight: bold;
+        color: #666;
+        border-bottom: 1px solid #ddd;
+
+        & > div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      div[doc-list] {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        position: relative;
+      }
+
+      div[doc-item] {
+        display: grid;
+        grid-template-columns: 30px 40px 80px 1fr 80px 80px 80px 80px 100px;
+        padding: 8px 16px;
+        border-bottom: 1px solid #f0f0f0;
+        font-size: 13px;
+        cursor: pointer;
+        transition: background-color 0.15s;
+        align-items: center;
+
+        &:hover {
+          background-color: #f5f5f5;
+        }
+
+        & > div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        md-icon[preview] {
+          --md-icon-size: 18px;
+          cursor: pointer;
+          color: #999;
+          border-radius: 50%;
+          padding: 2px;
+        }
+
+        md-icon[preview]:hover {
+          color: #0595e5;
+          background: #e3f2fd;
+        }
+
+        div[name-cell] {
+          justify-content: flex-start;
+          gap: 6px;
+
+          md-icon[favorite] {
+            --md-icon-size: 16px;
+            color: #ffc107;
+            flex-shrink: 0;
+          }
+
+          span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+
+        div[ai-cell] {
+          font-size: 11px;
+
+          span[ai-done] {
+            display: flex;
+            align-items: center;
+            gap: 2px;
+            color: #2e7d32;
+
+            md-icon {
+              --md-icon-size: 14px;
+              color: #4caf50;
+            }
+          }
+
+          span[ai-pending] {
+            color: #ef6c00;
+          }
+        }
+
+        input[type='checkbox'] {
+          cursor: pointer;
+        }
+      }
+
+      div[doc-item][selected] {
+        background-color: #e3f2fd;
+      }
+
+      div[doc-item][draggable='true'] {
+        cursor: grab;
+
+        &:active {
+          cursor: grabbing;
+        }
+      }
+
+      div[drop-zone] {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(33, 150, 243, 0.08);
+        border: 3px dashed #1976d2;
+        border-radius: 8px;
+        z-index: 10;
+        pointer-events: none;
+
+        span {
+          font-size: 16px;
+          color: #1976d2;
+          font-weight: bold;
+        }
+      }
+
+      div[empty-state] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 60px 20px;
+        color: #999;
+        flex: 1;
+
+        md-icon {
+          --md-icon-size: 48px;
+          color: #ddd;
+          margin-bottom: 12px;
+        }
+      }
+
+      div[doc-detail] {
+        padding: 12px 16px;
+        background: #fafafa;
+        border-top: 1px solid #e0e0e0;
+        overflow-y: auto;
+
+        div[detail-content] {
+          display: flex;
+          align-items: flex-start;
+          gap: 12px;
+
+          md-icon[file-icon] {
+            --md-icon-size: 36px;
+            color: #0595e5;
+            background: #e3f2fd;
+            padding: 8px;
+            border-radius: 8px;
+            flex-shrink: 0;
+          }
+
+          div[detail-info] {
+            flex: 1;
+
+            div[file-name] {
+              font-weight: bold;
+              font-size: 14px;
+              margin-bottom: 4px;
+            }
+
+            div[file-meta] {
+              font-size: 12px;
+              color: #666;
+              margin-bottom: 8px;
+            }
+
+            div[ai-summary] {
+              display: flex;
+              align-items: flex-start;
+              gap: 6px;
+              padding: 8px 12px;
+              background: #e8f5e9;
+              border-radius: 6px;
+              font-size: 12px;
+              color: #333;
+
+              md-icon {
+                --md-icon-size: 18px;
+                color: #4caf50;
+                flex-shrink: 0;
+              }
+            }
+
+            div[ai-pending] {
+              display: flex;
+              align-items: center;
+              gap: 6px;
+              padding: 8px 12px;
+              background: #fff3e0;
+              border-radius: 6px;
+              font-size: 12px;
+              color: #ef6c00;
+
+              md-icon {
+                --md-icon-size: 18px;
+                flex-shrink: 0;
+              }
+            }
+          }
+        }
+
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FieldDocumentListPanel.prototype, "projectId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FieldDocumentListPanel.prototype, "code", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FieldDocumentListPanel.prototype, "folderName", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], FieldDocumentListPanel.prototype, "documents", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Set)
+], FieldDocumentListPanel.prototype, "selectedIds", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], FieldDocumentListPanel.prototype, "isDragOver", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FieldDocumentListPanel.prototype, "selectedDoc", void 0);
+FieldDocumentListPanel = __decorate([
+    customElement('field-document-list-panel')
+], FieldDocumentListPanel);
+export { FieldDocumentListPanel };
+//# sourceMappingURL=field-document-list-panel.js.map

package/dist-client/pages/building-inspection/component/field-document/field-document-list-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-document-list-panel.js","sourceRoot":"","sources":["../../../../../client/pages/building-inspection/component/field-document/field-document-list-panel.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,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,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGpC,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IAA/C;;QA4PuB,cAAS,GAAW,EAAE,CAAA;QACtB,SAAI,GAAW,EAAE,CAAA;QACjB,eAAU,GAAW,EAAE,CAAA;QACxB,cAAS,GAAU,EAAE,CAAA;QAE/B,gBAAW,GAAgB,IAAI,GAAG,EAAE,CAAA;QACpC,eAAU,GAAY,KAAK,CAAA;QAC3B,gBAAW,GAAQ,IAAI,CAAA;IAwP1C,CAAC;IAtPC,MAAM;QACJ,OAAO,IAAI,CAAA;;mBAEI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE;0BACvC,IAAI,CAAC,SAAS,CAAC,MAAM;;;QAGvC,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,IAAI,CAAA;;;;;;4BAMc,IAAI,CAAC,UAAU;6BACd,IAAI,CAAC,WAAW,CAAC,IAAI,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM;;;;;;;;;;;;;;0BAc/E,IAAI,CAAC,eAAe;2BACnB,IAAI,CAAC,gBAAgB;sBAC1B,IAAI,CAAC,WAAW;;gBAEtB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,gDAAgD,CAAC,CAAC,CAAC,EAAE;;gBAE3E,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC;gBACzB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAChB,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;;oBAAC,OAAA,IAAI,CAAA;;;;oCAIF,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,EAAE,MAAK,GAAG,CAAC,EAAE;qCAC9B,CAAC,CAAY,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,GAAG,CAAC;iCAClD,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;;;;;qCAKtB,CAAC,CAAQ,EAAE,EAAE;wBACpB,CAAC,CAAC,eAAe,EAAE,CAAA;wBACnB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;oBACxB,CAAC;;;;;;uCAMU,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;sCAC7B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;qCACzC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;+BAGvC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;;4BAE9C,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,CAAC,CAAC,CAAC,EAAE;kCACtD,GAAG,CAAC,IAAI;;;+BAGX,CAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,IAAI,KAAI,EAAE;;;+BAGvB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC;;qBAEzC,CAAA;iBAAA,CACF;gBACH,CAAC,CAAC,IAAI,CAAA;;;;;;mBAMH;;;cAGL,IAAI,CAAC,WAAW;gBAChB,CAAC,CAAC,IAAI,CAAA;;;;;yCAKqB,IAAI,CAAC,WAAW,CAAC,IAAI;;yCAErB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;4BAC7D,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;0BAE1G,IAAI,CAAC,WAAW,CAAC,SAAS;oBAC1B,CAAC,CAAC,IAAI,CAAA;;;;;oCAKI,IAAI,CAAC,WAAW,CAAC,SAAS;;;6BAGjC;oBACH,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,eAAe,KAAK,IAAI;wBACzC,CAAC,CAAC,IAAI,CAAA;;;;;+BAKH;wBACH,CAAC,CAAC,EAAE;;;;iBAIf;gBACH,CAAC,CAAC,EAAE;WACP;YACH,CAAC,CAAC,IAAI,CAAA;;;;;WAKH;KACN,CAAA;IACH,CAAC;IAEO,UAAU,CAAC,GAAQ;QACzB,IAAI,CAAC,WAAW,GAAG,GAAG,CAAA;IACxB,CAAC;IAEO,YAAY,CAAC,GAAQ;QAC3B,IAAI,CAAC,WAAW,GAAG,GAAG,CAAA;QAEtB,IAAI,CAAC,GAAG,CAAC,QAAQ;YAAE,OAAM;QAEzB,MAAM,GAAG,GAAG,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAA;QAC7D,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;QAEjF,IAAI,OAAO,EAAE,CAAC;YACZ,SAAS,CACP,IAAI,CAAA;oBACQ,CAAC,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC;0BACtC,CAAC;gCACK,EACxB,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,CACnD,CAAA;QACH,CAAC;aAAM,CAAC;YACN,wBAAwB;YACxB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QACrC,CAAC;IACH,CAAC;IAEO,UAAU,CAAC,CAAQ,EAAE,EAAU;QACrC,MAAM,OAAO,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAA;QACtD,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;QACxC,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QAChB,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QACnB,CAAC;QACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;QACzB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,mBAAmB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAA;IAC9E,CAAC;IAEO,UAAU,CAAC,CAAQ;QACzB,MAAM,OAAO,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAA;QACtD,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,WAAW,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAC3D,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,GAAG,IAAI,GAAG,EAAE,CAAA;QAC9B,CAAC;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,mBAAmB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAA;IACxF,CAAC;IAED,8BAA8B;IACtB,eAAe,CAAC,CAAY;;QAClC,MAAM,KAAK,GAAG,CAAA,MAAA,CAAC,CAAC,YAAY,0CAAE,KAAK,KAAI,EAAE,CAAA;QACzC,IAAI,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;YAC5B,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;QACxB,CAAC;IACH,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAA;IACzB,CAAC;IAEO,WAAW,CAAC,CAAY;;QAC9B,CAAC,CAAC,cAAc,EAAE,CAAA;QAClB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAA;QAEvB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA,MAAA,CAAC,CAAC,YAAY,0CAAE,KAAK,KAAI,EAAE,CAAC,CAAA;QACrD,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACrB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,mBAAmB,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAA;QACjF,CAAC;IACH,CAAC;IAED,kBAAkB;IACV,eAAe,CAAC,CAAY,EAAE,GAAQ;;QAC5C,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QAClF,MAAA,CAAC,CAAC,YAAY,0CAAE,OAAO,CAAC,kCAAkC,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;QAChF,CAAC,CAAC,YAAa,CAAC,aAAa,GAAG,MAAM,CAAA;IACxC,CAAC;IAEO,WAAW,CAAC,IAAS;QAC3B,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAA;QACpB,IAAI,CAAC;YACH,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAA;YACxB,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;gBACtC,QAAQ,EAAE,YAAY;gBACtB,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,SAAS;gBAChB,GAAG,EAAE,SAAS;aACf,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;QACd,CAAC;QAAC,WAAM,CAAC;YACP,OAAO,EAAE,CAAA;QACX,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,IAAY;QAClC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;QAC1B,IAAI,KAAK,CAAC,KAAK,CAAC;YAAE,OAAO,IAAI,CAAA;QAC7B,IAAI,KAAK,GAAG,IAAI;YAAE,OAAO,GAAG,KAAK,IAAI,CAAA;QACrC,IAAI,KAAK,GAAG,IAAI,GAAG,IAAI;YAAE,OAAO,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAA;QACjE,OAAO,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAA;IACnD,CAAC;IAEO,eAAe,CAAC,IAAS;QAC/B,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAA;QACpB,IAAI,CAAC;YACH,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAA;YACxB,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;gBACtC,QAAQ,EAAE,YAAY;gBACtB,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,SAAS;gBAChB,GAAG,EAAE,SAAS;gBACd,IAAI,EAAE,SAAS;gBACf,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,IAAI;aACb,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;QACd,CAAC;QAAC,WAAM,CAAC;YACP,OAAO,EAAE,CAAA;QACX,CAAC;IACH,CAAC;;AAzfM,6BAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsPF;CACF,AAzPY,CAyPZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0DAAwB;AACxB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;yDAAsB;AAE/B;IAAhB,KAAK,EAAE;8BAAsB,GAAG;2DAAoB;AACpC;IAAhB,KAAK,EAAE;;0DAAoC;AAC3B;IAAhB,KAAK,EAAE;;2DAAgC;AAnQ7B,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CA2flC","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../../component/image-preview-popup'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { openPopup } from '@operato/layout'\n\n@customElement('field-document-list-panel')\nexport class FieldDocumentListPanel extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n\n      div[panel-header] {\n        display: flex;\n        align-items: center;\n        padding: 10px 16px;\n        background: #fafafa;\n        border-bottom: 1px solid #e0e0e0;\n\n        h3 {\n          margin: 0;\n          font-size: 14px;\n          color: #333;\n          flex: 1;\n        }\n\n        span[doc-count] {\n          font-size: 12px;\n          color: #999;\n        }\n      }\n\n      div[table-header] {\n        display: grid;\n        grid-template-columns: 30px 40px 80px 1fr 80px 80px 80px 80px 100px;\n        padding: 8px 16px;\n        background: #f0e6e6;\n        font-size: 12px;\n        font-weight: bold;\n        color: #666;\n        border-bottom: 1px solid #ddd;\n\n        & > div {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n      }\n\n      div[doc-list] {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        position: relative;\n      }\n\n      div[doc-item] {\n        display: grid;\n        grid-template-columns: 30px 40px 80px 1fr 80px 80px 80px 80px 100px;\n        padding: 8px 16px;\n        border-bottom: 1px solid #f0f0f0;\n        font-size: 13px;\n        cursor: pointer;\n        transition: background-color 0.15s;\n        align-items: center;\n\n        &:hover {\n          background-color: #f5f5f5;\n        }\n\n        & > div {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n\n        md-icon[preview] {\n          --md-icon-size: 18px;\n          cursor: pointer;\n          color: #999;\n          border-radius: 50%;\n          padding: 2px;\n        }\n\n        md-icon[preview]:hover {\n          color: #0595e5;\n          background: #e3f2fd;\n        }\n\n        div[name-cell] {\n          justify-content: flex-start;\n          gap: 6px;\n\n          md-icon[favorite] {\n            --md-icon-size: 16px;\n            color: #ffc107;\n            flex-shrink: 0;\n          }\n\n          span {\n            overflow: hidden;\n            text-overflow: ellipsis;\n          }\n        }\n\n        div[ai-cell] {\n          font-size: 11px;\n\n          span[ai-done] {\n            display: flex;\n            align-items: center;\n            gap: 2px;\n            color: #2e7d32;\n\n            md-icon {\n              --md-icon-size: 14px;\n              color: #4caf50;\n            }\n          }\n\n          span[ai-pending] {\n            color: #ef6c00;\n          }\n        }\n\n        input[type='checkbox'] {\n          cursor: pointer;\n        }\n      }\n\n      div[doc-item][selected] {\n        background-color: #e3f2fd;\n      }\n\n      div[doc-item][draggable='true'] {\n        cursor: grab;\n\n        &:active {\n          cursor: grabbing;\n        }\n      }\n\n      div[drop-zone] {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: rgba(33, 150, 243, 0.08);\n        border: 3px dashed #1976d2;\n        border-radius: 8px;\n        z-index: 10;\n        pointer-events: none;\n\n        span {\n          font-size: 16px;\n          color: #1976d2;\n          font-weight: bold;\n        }\n      }\n\n      div[empty-state] {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        padding: 60px 20px;\n        color: #999;\n        flex: 1;\n\n        md-icon {\n          --md-icon-size: 48px;\n          color: #ddd;\n          margin-bottom: 12px;\n        }\n      }\n\n      div[doc-detail] {\n        padding: 12px 16px;\n        background: #fafafa;\n        border-top: 1px solid #e0e0e0;\n        overflow-y: auto;\n\n        div[detail-content] {\n          display: flex;\n          align-items: flex-start;\n          gap: 12px;\n\n          md-icon[file-icon] {\n            --md-icon-size: 36px;\n            color: #0595e5;\n            background: #e3f2fd;\n            padding: 8px;\n            border-radius: 8px;\n            flex-shrink: 0;\n          }\n\n          div[detail-info] {\n            flex: 1;\n\n            div[file-name] {\n              font-weight: bold;\n              font-size: 14px;\n              margin-bottom: 4px;\n            }\n\n            div[file-meta] {\n              font-size: 12px;\n              color: #666;\n              margin-bottom: 8px;\n            }\n\n            div[ai-summary] {\n              display: flex;\n              align-items: flex-start;\n              gap: 6px;\n              padding: 8px 12px;\n              background: #e8f5e9;\n              border-radius: 6px;\n              font-size: 12px;\n              color: #333;\n\n              md-icon {\n                --md-icon-size: 18px;\n                color: #4caf50;\n                flex-shrink: 0;\n              }\n            }\n\n            div[ai-pending] {\n              display: flex;\n              align-items: center;\n              gap: 6px;\n              padding: 8px 12px;\n              background: #fff3e0;\n              border-radius: 6px;\n              font-size: 12px;\n              color: #ef6c00;\n\n              md-icon {\n                --md-icon-size: 18px;\n                flex-shrink: 0;\n              }\n            }\n          }\n        }\n\n      }\n    `\n  ]\n\n  @property({ type: String }) projectId: string = ''\n  @property({ type: String }) code: string = ''\n  @property({ type: String }) folderName: string = ''\n  @property({ type: Array }) documents: any[] = []\n\n  @state() private selectedIds: Set<string> = new Set()\n  @state() private isDragOver: boolean = false\n  @state() private selectedDoc: any = null\n\n  render() {\n    return html`\n      <div panel-header>\n        <h3>문서 목록${this.folderName ? ` - ${this.folderName}` : ''}</h3>\n        <span doc-count>${this.documents.length}건</span>\n      </div>\n\n      ${this.code\n        ? html`\n            <div table-header>\n              <div></div>\n              <div>\n                <input\n                  type=\"checkbox\"\n                  @change=${this._toggleAll}\n                  .checked=${this.selectedIds.size > 0 && this.selectedIds.size === this.documents.length}\n                />\n              </div>\n              <div>문서번호</div>\n              <div style=\"justify-content:flex-start; padding-left:8px;\">제 목</div>\n              <div>등록부서</div>\n              <div>등록자</div>\n              <div>자료분류</div>\n              <div>기술분야</div>\n              <div>등록일자</div>\n            </div>\n\n            <div\n              doc-list\n              @dragover=${this._onListDragOver}\n              @dragleave=${this._onListDragLeave}\n              @drop=${this._onListDrop}\n            >\n              ${this.isDragOver ? html`<div drop-zone><span>여기에 파일을 놓으세요</span></div>` : ''}\n\n              ${this.documents.length > 0\n                ? this.documents.map(\n                    (doc, idx) => html`\n                      <div\n                        doc-item\n                        draggable=\"true\"\n                        ?selected=${this.selectedDoc?.id === doc.id}\n                        @dragstart=${(e: DragEvent) => this._onDocDragStart(e, doc)}\n                        @click=${() => this._selectDoc(doc)}\n                      >\n                        <div>\n                          <md-icon\n                            preview\n                            @click=${(e: Event) => {\n                              e.stopPropagation()\n                              this._openPreview(doc)\n                            }}\n                          >visibility</md-icon>\n                        </div>\n                        <div>\n                          <input\n                            type=\"checkbox\"\n                            .checked=${this.selectedIds.has(doc.id)}\n                            @change=${(e: Event) => this._toggleDoc(e, doc.id)}\n                            @click=${(e: Event) => e.stopPropagation()}\n                          />\n                        </div>\n                        <div>${doc.code}${String(idx + 1).padStart(2, '0')}</div>\n                        <div name-cell>\n                          ${doc.isFavorite ? html`<md-icon favorite>star</md-icon>` : ''}\n                          <span>${doc.name}</span>\n                        </div>\n                        <div></div>\n                        <div>${doc.creator?.name || ''}</div>\n                        <div></div>\n                        <div></div>\n                        <div>${this._formatDate(doc.createdAt)}</div>\n                      </div>\n                    `\n                  )\n                : html`\n                    <div empty-state>\n                      <md-icon>folder_open</md-icon>\n                      <div>등록된 문서가 없습니다.</div>\n                      <div style=\"font-size:12px; margin-top:4px;\">파일을 드래그하여 업로드하세요.</div>\n                    </div>\n                  `}\n            </div>\n\n            ${this.selectedDoc\n              ? html`\n                  <div doc-detail>\n                    <div detail-content>\n                      <md-icon file-icon>description</md-icon>\n                      <div detail-info>\n                        <div file-name>${this.selectedDoc.name}</div>\n                        <div file-meta>\n                          <div>수정한 날짜: ${this._formatDateTime(this.selectedDoc.createdAt)}</div>\n                          ${this.selectedDoc.fileSize ? html`<div>크기: ${this._formatFileSize(this.selectedDoc.fileSize)}</div>` : ''}\n                        </div>\n                        ${this.selectedDoc.aiSummary\n                          ? html`\n                              <div ai-summary>\n                                <md-icon>auto_awesome</md-icon>\n                                <div>\n                                  <strong>AI 브리핑</strong><br />\n                                  ${this.selectedDoc.aiSummary}\n                                </div>\n                              </div>\n                            `\n                          : this.selectedDoc.aiSummaryStatus === '10'\n                            ? html`\n                                <div ai-pending>\n                                  <md-icon>hourglass_top</md-icon>\n                                  AI 요약 생성 중...\n                                </div>\n                              `\n                            : ''}\n                      </div>\n                    </div>\n                  </div>\n                `\n              : ''}\n          `\n        : html`\n            <div empty-state>\n              <md-icon>folder</md-icon>\n              <div>소분류 폴더를 선택해주세요.</div>\n            </div>\n          `}\n    `\n  }\n\n  private _selectDoc(doc: any) {\n    this.selectedDoc = doc\n  }\n\n  private _openPreview(doc: any) {\n    this.selectedDoc = doc\n\n    if (!doc.fullpath) return\n\n    const ext = doc.fullpath.toLowerCase().split('.').pop() || ''\n    const isImage = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(ext)\n\n    if (isImage) {\n      openPopup(\n        html`<image-preview-popup\n          .images=${[{ fullpath: doc.fullpath, name: doc.name }]}\n          .currentIndex=${0}\n        ></image-preview-popup>`,\n        { backdrop: true, size: 'large', title: doc.name }\n      )\n    } else {\n      // PDF 등 기타 파일은 새 탭에서 열기\n      window.open(doc.fullpath, '_blank')\n    }\n  }\n\n  private _toggleDoc(e: Event, id: string) {\n    const checked = (e.target as HTMLInputElement).checked\n    const newSet = new Set(this.selectedIds)\n    if (checked) {\n      newSet.add(id)\n    } else {\n      newSet.delete(id)\n    }\n    this.selectedIds = newSet\n    this.dispatchEvent(new CustomEvent('document-selected', { detail: newSet }))\n  }\n\n  private _toggleAll(e: Event) {\n    const checked = (e.target as HTMLInputElement).checked\n    if (checked) {\n      this.selectedIds = new Set(this.documents.map(d => d.id))\n    } else {\n      this.selectedIds = new Set()\n    }\n    this.dispatchEvent(new CustomEvent('document-selected', { detail: this.selectedIds }))\n  }\n\n  /* Drag & Drop: 데스크톱 파일 업로드 */\n  private _onListDragOver(e: DragEvent) {\n    const types = e.dataTransfer?.types || []\n    if (types.includes('Files')) {\n      e.preventDefault()\n      this.isDragOver = true\n    }\n  }\n\n  private _onListDragLeave() {\n    this.isDragOver = false\n  }\n\n  private _onListDrop(e: DragEvent) {\n    e.preventDefault()\n    this.isDragOver = false\n\n    const files = Array.from(e.dataTransfer?.files || [])\n    if (files.length > 0) {\n      this.dispatchEvent(new CustomEvent('documents-changed', { detail: { files } }))\n    }\n  }\n\n  /* Drag: 문서 이동용 */\n  private _onDocDragStart(e: DragEvent, doc: any) {\n    const ids = this.selectedIds.has(doc.id) ? Array.from(this.selectedIds) : [doc.id]\n    e.dataTransfer?.setData('application/x-field-document-ids', JSON.stringify(ids))\n    e.dataTransfer!.effectAllowed = 'move'\n  }\n\n  private _formatDate(date: any): string {\n    if (!date) return ''\n    try {\n      const d = new Date(date)\n      return new Intl.DateTimeFormat('ko-KR', {\n        timeZone: 'Asia/Seoul',\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit'\n      }).format(d)\n    } catch {\n      return ''\n    }\n  }\n\n  private _formatFileSize(size: string): string {\n    const bytes = Number(size)\n    if (isNaN(bytes)) return size\n    if (bytes < 1024) return `${bytes} B`\n    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n  }\n\n  private _formatDateTime(date: any): string {\n    if (!date) return ''\n    try {\n      const d = new Date(date)\n      return new Intl.DateTimeFormat('ko-KR', {\n        timeZone: 'Asia/Seoul',\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n        hour: '2-digit',\n        minute: '2-digit',\n        hour12: true\n      }).format(d)\n    } catch {\n      return ''\n    }\n  }\n}\n"]}

package/dist-client/pages/building-inspection/component/field-document/field-document-popup.d.ts

@@ -0,0 +1,39 @@
+import '@material/web/icon/icon.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/outlined-button.js';
+import './field-document-list-panel';
+import { LitElement } from 'lit';
+export declare class FieldDocumentPopup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    projectId: string;
+    private selectedMajor;
+    private selectedMiddle;
+    private selectedMinor;
+    private documents;
+    private selectedDocIds;
+    private codeCounts;
+    private dragOverItem;
+    private _tooltipText;
+    private _tooltipX;
+    private _tooltipY;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): Promise<void>;
+    private _selectMajor;
+    private _selectMiddle;
+    private _selectMinor;
+    private _loadDocuments;
+    private _loadCounts;
+    private _getMajorCount;
+    private _getMiddleCount;
+    private _shareDocuments;
+    private _toggleFavorites;
+    private _triggerUpload;
+    private _onNativeFileSelected;
+    private _uploadFiles;
+    private _deleteDocuments;
+    private _onFolderDragOver;
+    private _expandTimeout;
+    private _onFolderDrop;
+    private _onDocumentsChanged;
+    private _showTooltip;
+}