@dssp/supervision 1.0.0-alpha.76 → 1.0.0-alpha.78

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

@@ -0,0 +1,675 @@
+import { __decorate, __metadata } from "tslib";
+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 { ScrollbarStyles } from '@operato/styles';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { notify } from '@operato/layout';
+import gql from 'graphql-tag';
+import { FIELD_DOCUMENT_CLASSIFICATIONS, findClassificationPath } from './field-document-constants';
+let FieldDocumentPopup = class FieldDocumentPopup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.projectId = '';
+        this.selectedMajor = null;
+        this.selectedMiddle = null;
+        this.selectedMinor = null;
+        this.documents = [];
+        this.selectedDocIds = new Set();
+        this.codeCounts = new Map();
+        this.dragOverItem = '';
+        this._tooltipText = '';
+        this._tooltipX = 0;
+        this._tooltipY = 0;
+    }
+    render() {
+        var _a, _b, _c, _d;
+        const majors = FIELD_DOCUMENT_CLASSIFICATIONS;
+        const middles = ((_a = this.selectedMajor) === null || _a === void 0 ? void 0 : _a.children) || [];
+        const minors = ((_b = this.selectedMiddle) === null || _b === void 0 ? void 0 : _b.children) || [];
+        return html `
+      ${this._tooltipText
+            ? html `<div tooltip style="left:${this._tooltipX + 12}px;top:${this._tooltipY + 12}px">${this._tooltipText}</div>`
+            : ''}
+
+      <div header>
+        <h2>
+          <md-icon>folder_open</md-icon>
+          현장 문서 확인
+        </h2>
+        <span breadcrumb>
+          ${this.selectedMajor ? this.selectedMajor.name : ''} ${this.selectedMiddle ? ` > ${this.selectedMiddle.name}` : ''}
+          ${this.selectedMinor ? ` > ${this.selectedMinor.name}` : ''}
+        </span>
+      </div>
+
+      <div content>
+        <div classification-panel>
+          <div column>
+            <div column-header>대분류</div>
+            ${majors.map(item => {
+            var _a;
+            return html `
+                <div
+                  item
+                  ?selected=${((_a = this.selectedMajor) === null || _a === void 0 ? void 0 : _a.code) === item.code}
+                  @click=${() => this._selectMajor(item)}
+                  @mousemove=${(e) => this._showTooltip(e, item.name)}
+                  @mouseleave=${() => (this._tooltipText = '')}
+                  @dragover=${(e) => this._onFolderDragOver(e, item.code)}
+                  @dragleave=${() => (this.dragOverItem = '')}
+                  @drop=${(e) => this._onFolderDrop(e, item.code)}
+                  ?drag-over=${this.dragOverItem === item.code}
+                >
+                  <span name>${item.name}</span>
+                  ${this._getMajorCount(item.code) > 0 ? html `<span count>${this._getMajorCount(item.code)}</span>` : ''}
+                </div>
+              `;
+        })}
+          </div>
+
+          <div column>
+            <div column-header>중분류</div>
+            ${middles.map(item => {
+            var _a;
+            return html `
+                <div
+                  item
+                  ?selected=${((_a = this.selectedMiddle) === null || _a === void 0 ? void 0 : _a.code) === item.code}
+                  @click=${() => this._selectMiddle(item)}
+                  @mousemove=${(e) => this._showTooltip(e, item.name)}
+                  @mouseleave=${() => (this._tooltipText = '')}
+                  @dragover=${(e) => this._onFolderDragOver(e, item.code)}
+                  @dragleave=${() => (this.dragOverItem = '')}
+                  @drop=${(e) => this._onFolderDrop(e, item.code)}
+                  ?drag-over=${this.dragOverItem === item.code}
+                >
+                  <span name>${item.name}</span>
+                  ${this._getMiddleCount(item.code) > 0 ? html `<span count>${this._getMiddleCount(item.code)}</span>` : ''}
+                </div>
+              `;
+        })}
+          </div>
+
+          <div column>
+            <div column-header>소분류</div>
+            ${minors.map(item => {
+            var _a;
+            return html `
+                <div
+                  item
+                  ?selected=${((_a = this.selectedMinor) === null || _a === void 0 ? void 0 : _a.code) === item.code}
+                  @click=${() => this._selectMinor(item)}
+                  @mousemove=${(e) => this._showTooltip(e, item.name)}
+                  @mouseleave=${() => (this._tooltipText = '')}
+                  @dragover=${(e) => this._onFolderDragOver(e, item.code)}
+                  @dragleave=${() => (this.dragOverItem = '')}
+                  @drop=${(e) => this._onFolderDrop(e, item.code)}
+                  ?drag-over=${this.dragOverItem === item.code}
+                >
+                  <span code>${item.code}</span>
+                  <span name>${item.name}</span>
+                  ${(this.codeCounts.get(item.code) || 0) > 0 ? html `<span count>${this.codeCounts.get(item.code)}</span>` : ''}
+                </div>
+              `;
+        })}
+          </div>
+        </div>
+
+        <field-document-list-panel
+          .projectId=${this.projectId}
+          .code=${((_c = this.selectedMinor) === null || _c === void 0 ? void 0 : _c.code) || ''}
+          .folderName=${((_d = this.selectedMinor) === null || _d === void 0 ? void 0 : _d.name) || ''}
+          .documents=${this.documents}
+          @document-selected=${(e) => (this.selectedDocIds = e.detail)}
+          @documents-changed=${(e) => this._onDocumentsChanged(e)}
+        ></field-document-list-panel>
+      </div>
+
+      <div footer>
+        <md-filled-button share @click=${this._shareDocuments}> <md-icon slot="icon">share</md-icon>공유 </md-filled-button>
+        <md-filled-button favorite @click=${this._toggleFavorites}>
+          <md-icon slot="icon">star</md-icon>즐겨찾기
+        </md-filled-button>
+        <md-filled-button upload @click=${this._triggerUpload}> <md-icon slot="icon">upload</md-icon>업로드 </md-filled-button>
+        <md-filled-button delete @click=${this._deleteDocuments}> <md-icon slot="icon">delete</md-icon>삭제 </md-filled-button>
+
+        <input
+          type="file"
+          id="native-file-input"
+          multiple
+          accept="*/*"
+          style="display:none"
+          @change=${this._onNativeFileSelected}
+        />
+      </div>
+    `;
+    }
+    async firstUpdated() {
+        await this._loadCounts();
+        // 첫 번째 대분류 자동 선택
+        if (FIELD_DOCUMENT_CLASSIFICATIONS.length > 0) {
+            this._selectMajor(FIELD_DOCUMENT_CLASSIFICATIONS[0]);
+        }
+    }
+    _selectMajor(item) {
+        var _a;
+        this.selectedMajor = item;
+        this.selectedMiddle = null;
+        this.selectedMinor = null;
+        this.documents = [];
+        this.selectedDocIds = new Set();
+        if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+            this._selectMiddle(item.children[0]);
+        }
+    }
+    _selectMiddle(item) {
+        var _a;
+        this.selectedMiddle = item;
+        this.selectedMinor = null;
+        this.documents = [];
+        this.selectedDocIds = new Set();
+        if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+            this._selectMinor(item.children[0]);
+        }
+    }
+    async _selectMinor(item) {
+        this.selectedMinor = item;
+        this.selectedDocIds = new Set();
+        await this._loadDocuments();
+    }
+    async _loadDocuments() {
+        var _a, _b, _c;
+        if (!((_a = this.selectedMinor) === null || _a === void 0 ? void 0 : _a.code) || !this.projectId) {
+            this.documents = [];
+            return;
+        }
+        const response = await client.query({
+            query: gql `
+        query FieldDocumentsByCode($projectId: String!, $code: String!) {
+          fieldDocumentsByCode(projectId: $projectId, code: $code) {
+            items {
+              id
+              name
+              code
+              isFavorite
+              aiSummary
+              aiSummaryStatus
+              sourceType
+              fullpath
+              fileSize
+              createdAt
+              creator {
+                id
+                name
+              }
+            }
+            total
+          }
+        }
+      `,
+            variables: { projectId: this.projectId, code: this.selectedMinor.code }
+        });
+        this.documents = ((_c = (_b = response.data) === null || _b === void 0 ? void 0 : _b.fieldDocumentsByCode) === null || _c === void 0 ? void 0 : _c.items) || [];
+    }
+    async _loadCounts() {
+        var _a;
+        if (!this.projectId)
+            return;
+        const response = await client.query({
+            query: gql `
+        query FieldDocumentCountsByProject($projectId: String!) {
+          fieldDocumentCountsByProject(projectId: $projectId) {
+            code
+            count
+          }
+        }
+      `,
+            variables: { projectId: this.projectId }
+        });
+        const counts = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.fieldDocumentCountsByProject) || [];
+        this.codeCounts = new Map(counts.map((c) => [c.code, c.count]));
+    }
+    _getMajorCount(majorCode) {
+        let total = 0;
+        for (const [code, count] of this.codeCounts) {
+            if (code.startsWith(majorCode))
+                total += count;
+        }
+        return total;
+    }
+    _getMiddleCount(middleCode) {
+        let total = 0;
+        for (const [code, count] of this.codeCounts) {
+            if (code.startsWith(middleCode))
+                total += count;
+        }
+        return total;
+    }
+    async _shareDocuments() {
+        const selected = this.documents.filter(d => this.selectedDocIds.has(d.id));
+        if (!selected.length) {
+            notify({ message: '공유할 문서를 선택해주세요.', level: 'info' });
+            return;
+        }
+        if (navigator.share) {
+            try {
+                await navigator.share({
+                    title: '현장 문서',
+                    text: selected.map(d => d.name).join(', '),
+                    url: window.location.href
+                });
+            }
+            catch (_a) {
+                // 사용자 취소
+            }
+        }
+        else {
+            const links = selected.map(d => d.fullpath || d.name).join('\n');
+            await navigator.clipboard.writeText(links);
+            notify({ message: '링크가 복사되었습니다.' });
+        }
+    }
+    async _toggleFavorites() {
+        if (!this.selectedDocIds.size) {
+            notify({ message: '즐겨찾기할 문서를 선택해주세요.', level: 'info' });
+            return;
+        }
+        for (const id of this.selectedDocIds) {
+            await client.mutate({
+                mutation: gql `
+          mutation ToggleFieldDocumentFavorite($id: String!) {
+            toggleFieldDocumentFavorite(id: $id) {
+              id
+              isFavorite
+            }
+          }
+        `,
+                variables: { id }
+            });
+        }
+        await this._loadDocuments();
+        notify({ message: '즐겨찾기가 변경되었습니다.' });
+    }
+    _triggerUpload() {
+        var _a;
+        if (!((_a = this.selectedMinor) === null || _a === void 0 ? void 0 : _a.code)) {
+            notify({ message: '파일을 업로드할 소분류 폴더를 먼저 선택해주세요.', level: 'info' });
+            return;
+        }
+        const fileInput = this.renderRoot.querySelector('#native-file-input');
+        if (fileInput) {
+            fileInput.value = '';
+            fileInput.click();
+        }
+    }
+    async _onNativeFileSelected(e) {
+        var _a;
+        const input = e.target;
+        const files = Array.from(input.files || []);
+        if (!files.length || !((_a = this.selectedMinor) === null || _a === void 0 ? void 0 : _a.code))
+            return;
+        await this._uploadFiles(files, this.selectedMinor.code);
+    }
+    async _uploadFiles(files, code) {
+        for (const file of files) {
+            await client.mutate({
+                mutation: gql `
+          mutation CreateFieldDocument($patch: NewFieldDocument!) {
+            createFieldDocument(patch: $patch) {
+              id
+            }
+          }
+        `,
+                variables: {
+                    patch: {
+                        projectId: this.projectId,
+                        code,
+                        name: file.name,
+                        file
+                    }
+                },
+                context: { hasUpload: true }
+            });
+        }
+        await this._loadDocuments();
+        await this._loadCounts();
+        notify({ message: `${files.length}개 파일이 업로드되었습니다.` });
+    }
+    async _deleteDocuments() {
+        if (!this.selectedDocIds.size) {
+            notify({ message: '삭제할 문서를 선택해주세요.', level: 'info' });
+            return;
+        }
+        if (!confirm('선택한 문서를 삭제하시겠습니까?'))
+            return;
+        const ids = Array.from(this.selectedDocIds);
+        const response = await client.mutate({
+            mutation: gql `
+        mutation DeleteFieldDocuments($ids: [String!]!) {
+          deleteFieldDocuments(ids: $ids)
+        }
+      `,
+            variables: { ids }
+        });
+        if (!response.errors) {
+            this.selectedDocIds = new Set();
+            await this._loadDocuments();
+            await this._loadCounts();
+            notify({ message: '삭제되었습니다.' });
+        }
+    }
+    _onFolderDragOver(e, code) {
+        var _a, _b, _c, _d;
+        const types = ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) || [];
+        if (types.includes('application/x-field-document-ids')) {
+            e.preventDefault();
+            this.dragOverItem = code;
+            // 대분류/중분류 위에 hover 시 자동 확장
+            if (code.length === 2) {
+                const major = FIELD_DOCUMENT_CLASSIFICATIONS.find(m => m.code === code);
+                if (major && ((_b = this.selectedMajor) === null || _b === void 0 ? void 0 : _b.code) !== code) {
+                    clearTimeout(this._expandTimeout);
+                    this._expandTimeout = setTimeout(() => this._selectMajor(major), 500);
+                }
+            }
+            else if (code.length === 4) {
+                const middles = ((_c = this.selectedMajor) === null || _c === void 0 ? void 0 : _c.children) || [];
+                const middle = middles.find(m => m.code === code);
+                if (middle && ((_d = this.selectedMiddle) === null || _d === void 0 ? void 0 : _d.code) !== code) {
+                    clearTimeout(this._expandTimeout);
+                    this._expandTimeout = setTimeout(() => {
+                        this.selectedMiddle = middle;
+                        this.selectedMinor = null;
+                    }, 500);
+                }
+            }
+        }
+    }
+    async _onFolderDrop(e, code) {
+        var _a, _b;
+        e.preventDefault();
+        this.dragOverItem = '';
+        clearTimeout(this._expandTimeout);
+        const idsJson = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('application/x-field-document-ids');
+        if (!idsJson)
+            return;
+        const ids = JSON.parse(idsJson);
+        // 소분류 코드에만 이동 가능
+        if (code.length !== 6) {
+            notify({ message: '소분류 폴더에만 이동할 수 있습니다.', level: 'info' });
+            return;
+        }
+        const response = await client.mutate({
+            mutation: gql `
+        mutation MoveFieldDocuments($ids: [String!]!, $targetCode: String!) {
+          moveFieldDocuments(ids: $ids, targetCode: $targetCode)
+        }
+      `,
+            variables: { ids, targetCode: code }
+        });
+        if (!response.errors) {
+            const path = findClassificationPath(code);
+            notify({ message: `${ids.length}개 문서가 "${((_b = path.minor) === null || _b === void 0 ? void 0 : _b.name) || code}" 폴더로 이동되었습니다.` });
+            await this._loadDocuments();
+            await this._loadCounts();
+        }
+    }
+    async _onDocumentsChanged(e) {
+        var _a, _b;
+        const files = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.files;
+        if ((files === null || files === void 0 ? void 0 : files.length) && ((_b = this.selectedMinor) === null || _b === void 0 ? void 0 : _b.code)) {
+            await this._uploadFiles(files, this.selectedMinor.code);
+        }
+        else {
+            await this._loadDocuments();
+        }
+    }
+    _showTooltip(e, text) {
+        this._tooltipText = text;
+        const rect = this.getBoundingClientRect();
+        this._tooltipX = e.clientX - rect.left;
+        this._tooltipY = e.clientY - rect.top;
+    }
+};
+FieldDocumentPopup.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        background-color: #fff;
+        width: 100%;
+        height: 80vh;
+        overflow: hidden;
+        position: relative;
+      }
+
+      div[header] {
+        display: flex;
+        align-items: center;
+        padding: 12px 20px;
+        border-bottom: 1px solid #e0e0e0;
+        background: linear-gradient(135deg, #f8f9fa, #e8eef5);
+
+        h2 {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin: 0;
+          font-size: 16px;
+          color: #3f71a0;
+
+          md-icon {
+            --md-icon-size: 22px;
+          }
+        }
+
+        span[breadcrumb] {
+          margin-left: auto;
+          font-size: 12px;
+          color: #888;
+        }
+      }
+
+      div[content] {
+        display: grid;
+        grid-template-columns: 3.5fr 6.5fr;
+        overflow: hidden;
+      }
+
+      div[classification-panel] {
+        display: grid;
+        grid-template-columns: 0.8fr 1fr 2fr;
+        border-right: 1px solid #e0e0e0;
+        overflow: hidden;
+      }
+
+      div[tooltip] {
+        position: absolute;
+        background: rgba(0, 0, 0, 0.85);
+        color: #fff;
+        font-size: 12px;
+        padding: 4px 10px;
+        border-radius: 4px;
+        white-space: nowrap;
+        z-index: 9999;
+        pointer-events: none;
+      }
+
+      div[column] {
+        display: flex;
+        flex-direction: column;
+        border-right: 1px solid #eee;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        &:last-child {
+          border-right: none;
+        }
+
+        div[column-header] {
+          position: sticky;
+          top: 0;
+          background: #f5f5f5;
+          padding: 8px 12px;
+          font-size: 12px;
+          font-weight: bold;
+          color: #666;
+          border-bottom: 1px solid #e0e0e0;
+          z-index: 1;
+        }
+
+        div[item] {
+          display: flex;
+          align-items: center;
+          padding: 8px 12px;
+          cursor: pointer;
+          font-size: 13px;
+          color: #333;
+          border-bottom: 1px solid #f0f0f0;
+          transition: background-color 0.15s;
+          position: relative;
+
+          &:hover {
+            background-color: #e3f2fd;
+          }
+
+          span[code] {
+            font-size: 11px;
+            color: #999;
+            margin-right: 6px;
+            min-width: 32px;
+          }
+
+          span[name] {
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          span[count] {
+            position: absolute;
+            right: 3px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 8px;
+            color: #fff;
+            background: #0595e5;
+            border-radius: 7px;
+            padding: 0 3px;
+            min-width: 10px;
+            text-align: center;
+            line-height: 14px;
+          }
+        }
+
+        div[item][selected] {
+          background-color: #0595e5;
+          color: #fff;
+
+          span[code] {
+            color: rgba(255, 255, 255, 0.7);
+          }
+
+          span[count] {
+            background: rgba(255, 255, 255, 0.3);
+          }
+        }
+
+        div[item][drag-over] {
+          background-color: #bbdefb;
+          outline: 2px dashed #1976d2;
+        }
+      }
+
+      div[footer] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        padding: 12px 20px;
+        border-top: 1px solid #e0e0e0;
+        background: #f8f8f8;
+
+        md-filled-button {
+          cursor: pointer;
+          --md-filled-button-container-height: 36px;
+          --md-filled-button-trailing-space: 16px;
+          --md-filled-button-leading-space: 16px;
+          --md-filled-button-container-color: #0595e5;
+          --md-filled-button-label-text-color: var(--md-sys-color-on-primary);
+          --md-filled-button-hover-label-text-color: var(--md-sys-color-on-primary);
+          --md-filled-button-icon-color: var(--md-sys-color-on-primary);
+          --md-filled-button-hover-icon-color: var(--md-sys-color-on-primary);
+        }
+
+        md-filled-button[share] {
+          --md-filled-button-container-color: #3f71a0;
+        }
+        md-filled-button[upload] {
+          --md-filled-button-container-color: #008000;
+        }
+        md-filled-button[delete] {
+          --md-filled-button-container-color: #e15757;
+        }
+      }
+
+      ox-input-file {
+        display: none;
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FieldDocumentPopup.prototype, "projectId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FieldDocumentPopup.prototype, "selectedMajor", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FieldDocumentPopup.prototype, "selectedMiddle", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FieldDocumentPopup.prototype, "selectedMinor", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], FieldDocumentPopup.prototype, "documents", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Set)
+], FieldDocumentPopup.prototype, "selectedDocIds", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Map)
+], FieldDocumentPopup.prototype, "codeCounts", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FieldDocumentPopup.prototype, "dragOverItem", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FieldDocumentPopup.prototype, "_tooltipText", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], FieldDocumentPopup.prototype, "_tooltipX", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], FieldDocumentPopup.prototype, "_tooltipY", void 0);
+FieldDocumentPopup = __decorate([
+    customElement('field-document-popup')
+], FieldDocumentPopup);
+export { FieldDocumentPopup };
+//# sourceMappingURL=field-document-popup.js.map