@dssp/supervision 1.0.16 → 1.0.18

package/dist-client/pages/project-checklist/project-checklist-management.js

@@ -31,8 +31,10 @@ let ProjectChecklistManagement = class ProjectChecklistManagement extends PageVi
         this.templateItems = [];
         this.isEditMode = false;
         this.selectedChecklistId = null;
-        this.siteSpecPdfUrl = '';
-        this.siteSpecPdfName = '';
+        /** 프로젝트에 등록된 공사 시방서 첨부 목록 (여러 건, PDF·한글 혼합 가능) */
+        this.siteSpecFiles = [];
+        this.siteSpecSyncing = false;
+        this.siteSpecListOpen = false;
         this.siteSpecDetail = null;
         this.siteSpecDetailItem = '';
         /** 뮤테이션 가능 여부('dcsp guest' 권한 보유 시 false) — 게스트에게는 생성/수정/삭제 버튼을 숨긴다 */
@@ -60,23 +62,57 @@ let ProjectChecklistManagement = class ProjectChecklistManagement extends PageVi
           <input
             id="siteSpecFileInput"
             type="file"
-            accept="application/pdf,.pdf,.hwp,.hwpx"
+            multiple
+            accept="application/pdf,.pdf,.hwp"
             style="display: none"
-            @change=${this._onUploadSiteSpecPdf}
+            @change=${this._onUploadSiteSpecs}
           />
-          ${this.siteSpecPdfName
-            ? html `<span site-spec-name title=${this.siteSpecPdfName}>
-                  <md-icon>description</md-icon>
-                  <span filename>${this.siteSpecPdfName}</span>
-                  ${this.canMutate ? html `<md-icon clickable @click=${this._removeSiteSpecPdf}>close</md-icon>` : ''}
-                </span>`
+          ${
+        // 파일이 수십 개가 되어도 헤더가 밀리지 않도록 개수만 표시하고, 목록은 펼침 패널로 본다
+        this.siteSpecFiles.length
+            ? html `<div site-spec-box>
+                  <span site-spec-count @click=${() => (this.siteSpecListOpen = !this.siteSpecListOpen)}>
+                    <md-icon>description</md-icon>
+                    공사 시방서 ${this.siteSpecFiles.length}건
+                    <md-icon>${this.siteSpecListOpen ? 'expand_less' : 'expand_more'}</md-icon>
+                  </span>
+                  ${this.siteSpecListOpen
+                ? html `<div site-spec-list>
+                        ${this.canMutate
+                    ? html `<div site-spec-tools>
+                              <span delete-all @click=${this._removeAllSiteSpecs}>
+                                <md-icon>delete_sweep</md-icon>전체 삭제
+                              </span>
+                            </div>`
+                    : ''}
+                        ${this.siteSpecFiles.map(file => html `<div site-spec-row title=${file.name}>
+                            <md-icon>description</md-icon>
+                            <span filename>${file.name}</span>
+                            ${this.canMutate
+                    ? html `<md-icon clickable @click=${() => this._removeSiteSpec(file)}>close</md-icon>`
+                    : ''}
+                          </div>`)}
+                      </div>`
+                : ''}
+                </div>`
             : ''}
           ${this.canMutate
-            ? html `<md-elevated-button
-                  @click=${() => { var _a; return (_a = this.renderRoot.querySelector('#siteSpecFileInput')) === null || _a === void 0 ? void 0 : _a.click(); }}
-                >
-                  <md-icon slot="icon">upload_file</md-icon>공사 시방서 업로드
-                </md-elevated-button>`
+            ? html `${this.siteSpecFiles.length
+                ? html `<md-elevated-button
+                        ?disabled=${this.siteSpecSyncing}
+                        title="첨부된 시방서를 매칭 엔진에 다시 등록합니다"
+                        @click=${this._onReregisterSiteSpecs}
+                      >
+                        <md-icon slot="icon">sync</md-icon>시방서 재등록
+                      </md-elevated-button>`
+                : ''}
+                  <md-elevated-button
+                    ?disabled=${this.siteSpecSyncing}
+                    @click=${() => { var _a; return (_a = this.renderRoot.querySelector('#siteSpecFileInput')) === null || _a === void 0 ? void 0 : _a.click(); }}
+                  >
+                    <md-icon slot="icon">upload_file</md-icon>
+                    ${this.siteSpecSyncing ? '시방서 등록 중...' : '공사 시방서 업로드'}
+                  </md-elevated-button>`
             : ''}
           <md-elevated-button href=${`project-detail/${this.projectId}`}>
             <md-icon slot="icon">home</md-icon>프로젝트 홈
@@ -178,7 +214,7 @@ let ProjectChecklistManagement = class ProjectChecklistManagement extends PageVi
         this._buildRightGristConfig();
     }
     async _fetchProjectName() {
-        var _a, _b, _c, _d;
+        var _a, _b;
         if (!this.projectId)
             return;
         const response = await client.query({
@@ -186,30 +222,29 @@ let ProjectChecklistManagement = class ProjectChecklistManagement extends PageVi
         query Project($id: String!) {
           project(id: $id) {
             name
-            siteSpecPdfUrl
           }
         }
       `,
             variables: { id: this.projectId }
         });
         this.projectName = ((_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.project) === null || _b === void 0 ? void 0 : _b.name) || '';
-        // 공사 시방서 PDF는 프로젝트 단위로 저장되므로 프로젝트에서 로드
-        this.siteSpecPdfUrl = ((_d = (_c = response.data) === null || _c === void 0 ? void 0 : _c.project) === null || _d === void 0 ? void 0 : _d.siteSpecPdfUrl) || '';
-        this.siteSpecPdfName = this.siteSpecPdfUrl ? await this._fetchSiteSpecPdfName(this.siteSpecPdfUrl) : '';
+        await this._fetchSiteSpecs();
         this.updateContext();
     }
-    // 공사 시방서 URL(S3 key 기반)에 해당하는 첨부파일의 원본 파일명 조회
-    async _fetchSiteSpecPdfName(url) {
-        var _a, _b, _c;
-        const key = decodeURIComponent(url.split('/').pop() || '');
+    // 프로젝트에 등록된 공사 시방서 첨부 목록 조회 (여러 건)
+    async _fetchSiteSpecs() {
+        var _a, _b;
+        if (!this.projectId)
+            return;
         try {
             const response = await client.query({
                 query: gql `
           query ($filters: [Filter!]) {
             attachments(filters: $filters) {
               items {
+                id
                 name
-                path
+                fullpath
               }
             }
           }
@@ -217,80 +252,128 @@ let ProjectChecklistManagement = class ProjectChecklistManagement extends PageVi
                 variables: {
                     filters: [
                         { name: 'refBy', value: this.projectId, operator: 'eq' },
-                        { name: 'refType', value: 'Project', operator: 'eq' }
+                        { name: 'refType', value: 'Project', operator: 'eq' },
+                        { name: 'description', value: 'site-spec', operator: 'eq' }
                     ]
-                }
+                },
+                fetchPolicy: 'no-cache'
             });
             const items = ((_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.items) || [];
-            return ((_c = items.find(a => a.path === key)) === null || _c === void 0 ? void 0 : _c.name) || key;
+            // fullpath 는 /attachment/... 상대경로 → location.origin 을 붙여 전체 URL 생성
+            this.siteSpecFiles = items.map(a => ({ id: a.id, name: a.name, url: `${location.origin}${a.fullpath}` }));
         }
-        catch (_d) {
-            return key;
+        catch (_c) {
+            this.siteSpecFiles = [];
         }
     }
-    // 공사 시방서 PDF 업로드 → 첨부 후 전체 URL(https~)을 프로젝트에 저장
-    async _onUploadSiteSpecPdf(e) {
-        var _a, _b, _c;
+    // 공사 시방서 업로드 (여러 개 동시) → 첨부 저장 후 매칭 엔진에 재등록
+    async _onUploadSiteSpecs(e) {
+        var _a, _b;
         const input = e.target;
-        const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (!file)
+        const files = Array.from(input.files || []);
+        input.value = '';
+        if (!files.length)
             return;
-        // 허용 확장자: PDF, 한글(hwp/hwpx). MIME 은 브라우저/OS 마다 달라 확장자로 판정
-        const ext = file.name.toLowerCase().split('.').pop() || '';
-        if (!['pdf', 'hwp', 'hwpx'].includes(ext)) {
-            notify({ message: 'PDF 또는 한글(hwp, hwpx) 파일만 업로드할 수 있습니다.', level: 'warn' });
-            input.value = '';
+        // 허용 확장자: PDF, 한글(hwp). MIME 은 브라우저/OS 마다 달라 확장자로 판정
+        // hwpx 는 매칭 엔진 파서가 지원하지 않으므로 받지 않는다
+        const invalid = files.filter(f => !['pdf', 'hwp'].includes(f.name.toLowerCase().split('.').pop() || ''));
+        if (invalid.length) {
+            notify({ message: 'PDF 또는 한글(hwp) 파일만 업로드할 수 있습니다.', level: 'warn' });
             return;
         }
-        const response = await client.mutate({
-            mutation: gql `
-        mutation ($attachments: [NewAttachment!]!) {
-          createAttachments(attachments: $attachments) {
-            id
-            name
-            fullpath
+        this.siteSpecSyncing = true;
+        try {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($attachments: [NewAttachment!]!) {
+            createAttachments(attachments: $attachments) {
+              id
+            }
           }
+        `,
+                variables: {
+                    attachments: files.map(file => ({
+                        file,
+                        refBy: this.projectId,
+                        refType: 'Project',
+                        description: 'site-spec'
+                    }))
+                },
+                context: { hasUpload: true }
+            });
+            if (!((_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.createAttachments) === null || _b === void 0 ? void 0 : _b.length)) {
+                notify({ message: '업로드에 실패하였습니다.', level: 'error' });
+                return;
+            }
+            await this._fetchSiteSpecs();
+            await this._syncSiteSpecsToEngine();
+            notify({ message: '공사 시방서를 업로드하였습니다.' });
         }
-      `,
-            variables: {
-                attachments: [{ file, refBy: this.projectId, refType: 'Project', description: 'site-spec' }]
-            },
-            context: { hasUpload: true }
-        });
-        input.value = '';
-        const attachment = (_c = (_b = response.data) === null || _b === void 0 ? void 0 : _b.createAttachments) === null || _c === void 0 ? void 0 : _c[0];
-        if (!attachment) {
-            notify({ message: '업로드에 실패하였습니다.', level: 'error' });
-            return;
+        finally {
+            this.siteSpecSyncing = false;
         }
-        // fullpath 는 /attachment/... 형태의 상대경로 → location.origin 을 붙여 https 전체 URL 생성
-        this.siteSpecPdfUrl = `${location.origin}${attachment.fullpath}`;
-        this.siteSpecPdfName = attachment.name || file.name;
-        await this._saveSiteSpecPdfToProject();
-        notify({ message: '공사 시방서를 업로드하였습니다.' });
     }
-    async _removeSiteSpecPdf() {
-        if (!confirm('공사 시방서를 삭제하시겠습니까?'))
+    async _removeSiteSpec(file) {
+        if (!confirm(`'${file.name}' 을(를) 삭제하시겠습니까?`))
             return;
-        this.siteSpecPdfUrl = '';
-        this.siteSpecPdfName = '';
-        await this._saveSiteSpecPdfToProject();
-        notify({ message: '공사 시방서를 삭제하였습니다.' });
+        await this._deleteSiteSpecs([file.id], '공사 시방서를 삭제하였습니다.');
+    }
+    async _removeAllSiteSpecs() {
+        const count = this.siteSpecFiles.length;
+        if (!count || !confirm(`공사 시방서 ${count}건을 모두 삭제하시겠습니까?`))
+            return;
+        await this._deleteSiteSpecs(this.siteSpecFiles.map(f => f.id), `공사 시방서 ${count}건을 삭제하였습니다.`);
+    }
+    // 첨부 삭제 후 목록 갱신 + 매칭 엔진 재등록 (개별/전체 공통)
+    async _deleteSiteSpecs(ids, message) {
+        this.siteSpecSyncing = true;
+        try {
+            const mutation = gql `
+        mutation ($id: String!) {
+          deleteAttachment(id: $id)
+        }
+      `;
+            // 건수가 많을 수 있어 10건씩 나눠 병렬 처리 (한 번에 다 보내면 서버 부하가 커진다)
+            for (let i = 0; i < ids.length; i += 10) {
+                await Promise.all(ids.slice(i, i + 10).map(id => client.mutate({ mutation, variables: { id } })));
+            }
+            await this._fetchSiteSpecs();
+            await this._syncSiteSpecsToEngine();
+            notify({ message });
+        }
+        finally {
+            this.siteSpecSyncing = false;
+        }
     }
-    // 공사 시방서 PDF URL을 프로젝트에 저장 (프로젝트 단위 공통 값)
-    async _saveSiteSpecPdfToProject() {
-        await client.mutate({
+    // 수동 재등록 — 이 기능 도입 전에 올린 시방서나, 엔진 데이터가 초기화된 경우에 사용
+    async _onReregisterSiteSpecs() {
+        this.siteSpecSyncing = true;
+        try {
+            await this._syncSiteSpecsToEngine();
+            notify({ message: '공사 시방서를 매칭 엔진에 재등록하였습니다.' });
+        }
+        finally {
+            this.siteSpecSyncing = false;
+        }
+    }
+    // 현재 첨부 목록 전체를 매칭 엔진에 재등록한다 (엔진에 개별 삭제가 없어 전체 재등록 방식)
+    async _syncSiteSpecsToEngine() {
+        var _a;
+        const response = await client.mutate({
             mutation: gql `
-        mutation ($project: ProjectPatch!) {
-          updateProject(project: $project) {
-            id
-          }
+        mutation ($projectId: String!, $specFiles: [SiteSpecFileInput!]!) {
+          syncProjectSiteSpecs(projectId: $projectId, specFiles: $specFiles)
         }
       `,
             variables: {
-                project: { id: this.projectId, siteSpecPdfUrl: this.siteSpecPdfUrl || null }
+                projectId: this.projectId,
+                specFiles: this.siteSpecFiles.map(f => ({ url: f.url, name: f.name }))
             }
         });
+        const siteItems = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.syncProjectSiteSpecs) || 0;
+        if (this.siteSpecFiles.length && !siteItems) {
+            notify({ message: '시방서에서 조항을 추출하지 못했습니다. (스캔본 PDF 등)', level: 'warn' });
+        }
     }
     async _fetchConstructionTypes() {
         var _a, _b;
@@ -699,8 +782,8 @@ let ProjectChecklistManagement = class ProjectChecklistManagement extends PageVi
                 // 수정
                 const response = await client.mutate({
                     mutation: gql `
-            mutation ($id: String!, $name: String!, $items: [ProjectChecklistItemInput!]!, $siteSpecPdfUrl: String) {
-              updateProjectChecklist(id: $id, name: $name, items: $items, siteSpecPdfUrl: $siteSpecPdfUrl) {
+            mutation ($id: String!, $name: String!, $items: [ProjectChecklistItemInput!]!) {
+              updateProjectChecklist(id: $id, name: $name, items: $items) {
                 id
               }
             }
@@ -708,8 +791,7 @@ let ProjectChecklistManagement = class ProjectChecklistManagement extends PageVi
                     variables: {
                         id: this.selectedChecklistId,
                         name,
-                        items,
-                        siteSpecPdfUrl: this.siteSpecPdfUrl || null
+                        items
                     }
                 });
                 if (!response.errors) {
@@ -731,7 +813,6 @@ let ProjectChecklistManagement = class ProjectChecklistManagement extends PageVi
               $constructionDetailTypeId: String!
               $name: String!
               $items: [ProjectChecklistItemInput!]!
-              $siteSpecPdfUrl: String
             ) {
               createProjectChecklist(
                 projectId: $projectId
@@ -739,7 +820,6 @@ let ProjectChecklistManagement = class ProjectChecklistManagement extends PageVi
                 constructionDetailTypeId: $constructionDetailTypeId
                 name: $name
                 items: $items
-                siteSpecPdfUrl: $siteSpecPdfUrl
               ) {
                 id
               }
@@ -750,8 +830,7 @@ let ProjectChecklistManagement = class ProjectChecklistManagement extends PageVi
                         constructionTypeId: ctId,
                         constructionDetailTypeId: cdtId,
                         name,
-                        items,
-                        siteSpecPdfUrl: this.siteSpecPdfUrl || null
+                        items
                     }
                 });
                 if (!response.errors) {
@@ -908,11 +987,14 @@ ProjectChecklistManagement.styles = [
 
         h2 {
           display: flex;
+          align-items: center;
           gap: 7px;
           flex: 1;
           margin-bottom: 8px;
           color: #3f71a0;
           font-size: 18px;
+          /* 우측 버튼이 늘어나도 제목이 세로로 쪼개지지 않도록 */
+          white-space: nowrap;
 
           md-icon[back] {
             background: linear-gradient(135deg, #3f71a0 0%, #5a8cc7 100%);
@@ -936,25 +1018,79 @@ ProjectChecklistManagement.styles = [
           display: flex;
           align-items: center;
           justify-content: end;
-          flex: 1;
+          flex: none;
           padding-top: 8px;
 
-          span[site-spec-name] {
-            display: inline-flex;
-            align-items: center;
-            gap: 2px;
+          /* 시방서가 수십 건이어도 헤더 폭을 차지하지 않도록 개수 배지 + 펼침 목록으로 표시 */
+          div[site-spec-box] {
+            position: relative;
+            flex-shrink: 0;
             margin: 0 6px;
-            padding: 4px 8px;
-            font-size: 13px;
-            color: #3f71a0;
-            background-color: #eaf2fb;
-            border-radius: 4px;
-            max-width: 220px;
 
-            span[filename] {
-              overflow: hidden;
-              text-overflow: ellipsis;
+            span[site-spec-count] {
+              display: inline-flex;
+              align-items: center;
+              gap: 2px;
+              padding: 4px 8px;
+              font-size: 13px;
               white-space: nowrap;
+              color: #3f71a0;
+              background-color: #eaf2fb;
+              border-radius: 4px;
+              cursor: pointer;
+            }
+
+            div[site-spec-list] {
+              position: absolute;
+              top: calc(100% + 4px);
+              right: 0;
+              z-index: 10;
+              width: 320px;
+              max-height: 320px;
+              overflow-y: auto;
+              padding: 4px;
+              background-color: #fff;
+              border: 1px solid #ddd;
+              border-radius: 6px;
+              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+              div[site-spec-tools] {
+                display: flex;
+                justify-content: flex-end;
+                padding: 2px 6px 6px;
+                border-bottom: 1px solid #eee;
+                margin-bottom: 4px;
+
+                span[delete-all] {
+                  display: inline-flex;
+                  align-items: center;
+                  gap: 2px;
+                  font-size: 12px;
+                  color: #c0392b;
+                  cursor: pointer;
+                }
+              }
+
+              div[site-spec-row] {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                padding: 5px 6px;
+                font-size: 13px;
+                color: #3f71a0;
+                border-radius: 4px;
+
+                &:hover {
+                  background-color: #f4f8fd;
+                }
+
+                span[filename] {
+                  flex: 1;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+              }
             }
 
             md-icon {
@@ -1128,12 +1264,16 @@ __decorate([
 ], ProjectChecklistManagement.prototype, "selectedChecklistId", void 0);
 __decorate([
     state(),
-    __metadata("design:type", String)
-], ProjectChecklistManagement.prototype, "siteSpecPdfUrl", void 0);
+    __metadata("design:type", Array)
+], ProjectChecklistManagement.prototype, "siteSpecFiles", void 0);
 __decorate([
     state(),
-    __metadata("design:type", String)
-], ProjectChecklistManagement.prototype, "siteSpecPdfName", void 0);
+    __metadata("design:type", Boolean)
+], ProjectChecklistManagement.prototype, "siteSpecSyncing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], ProjectChecklistManagement.prototype, "siteSpecListOpen", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)