@dssp/supervision 1.0.0-alpha.9 → 1.0.0-y.0

package/dist-client/pages/building-inspection-grid/building-inspection-grid-detail.js

@@ -13,9 +13,11 @@ import { notify, openPopup } from '@operato/layout';
 import './component/notice-comment-popup';
 import './component/grid-inspection-create-popup';
 import { BUILDING_INSPECTION_STATUS_DISPLAY, BuildingInspectionStatus } from '../building-inspection/building-inspection-list';
+import '../checklist/inspection-tab-popup';
 import { verifyBiometric } from '@things-factory/auth-base/dist-client';
 import { OxPrompt } from '@operato/popup';
 import './component/plan-preview-popup';
+import './component/grid-inspection-list-layer';
 let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends ScopedElementsMixin(PageView) {
     constructor() {
         super(...arguments);
@@ -27,12 +29,14 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
         };
         this.project = Object.assign({}, this.defaultProject);
         this.buildingInspections = [];
+        this.cellToInspections = {};
         this.buildingInspectionSummaryOfProject = {};
         this.buildingInspectionSummaryOfBuildingLevel = {};
         this.selectedBuilding = {};
         this.selectedLevel = {};
         this.selectedInspection = {};
         this.cell = '';
+        this.listLayer = { open: false, cell: '', items: [] };
     }
     get context() {
         return {
@@ -40,13 +44,16 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
         };
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
         // 그리드 가로, 세로 길이 배열 생성
         const planXScale = Array.from({ length: ((_b = (_a = this.project) === null || _a === void 0 ? void 0 : _a.buildingComplex) === null || _b === void 0 ? void 0 : _b.planXScale) || 0 }, (_, i) => i);
         const planYScale = Array.from({ length: ((_d = (_c = this.project) === null || _c === void 0 ? void 0 : _c.buildingComplex) === null || _d === void 0 ? void 0 : _d.planYScale) || 0 }, (_, i) => i);
         return html `
       <div header>
-        <h2>${this.project.name} ${(_e = this.selectedBuilding) === null || _e === void 0 ? void 0 : _e.name} ${(_f = this.selectedLevel) === null || _f === void 0 ? void 0 : _f.floorDisplayName}층</h2>
+        <h2>
+          <md-icon slot="icon" back @click=${() => history.back()}>arrow_back</md-icon>
+          ${this.project.name} ${(_e = this.selectedBuilding) === null || _e === void 0 ? void 0 : _e.name} ${(_f = this.selectedLevel) === null || _f === void 0 ? void 0 : _f.floorDisplayName}층
+        </h2>
         <div button-container>
           <md-elevated-button href=${`project-update/${this.project.id}`}>
             <md-icon slot="icon">assignment</md-icon>프로젝트 정보 수정
@@ -110,20 +117,30 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
             <div grid>
               ${planXScale.map(v => html ` <div row=${v}>
                     ${planYScale.map(vv => {
-            const buildingInspection = this.buildingInspections.find(i => i.cellX === v && i.cellY === vv);
-            const status = (buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.status) || '';
-            return html `<div
-                        column=${vv}
-                        cell=${`${v},${vv}`}
-                        buildingInspectionId=${buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.id}
-                        status=${status}
-                        @click=${this._onClickGrid}
-                      >
-                        ${this._getIconHtmlByStatus(status)}
+            const cellKey = `${v},${vv}`;
+            const inspections = this.cellToInspections[cellKey] || [];
+            const count = inspections.length;
+            let countClass = '';
+            if (count > 0) {
+                const allPass = inspections.every(i => i.status === BuildingInspectionStatus.PASS);
+                const anyFail = inspections.some(i => i.status === BuildingInspectionStatus.FAIL);
+                countClass = allPass ? 'green' : anyFail ? 'red' : 'black';
+            }
+            return html `<div column=${vv} cell=${cellKey} @click=${this._onClickGrid}>
+                        ${count > 0 ? html `<span class="cell-count ${countClass}">${count}</span>` : ''}
                       </div>`;
         })}
                   </div>`)}
             </div>
+            ${this.listLayer.open
+            ? html `<grid-inspection-list-layer
+                  .items=${this.listLayer.items}
+                  .anchorEl=${this._getCellElement(this.listLayer.cell)}
+                  .containerEl=${this.drawingContainer}
+                  @select=${this._onSelectListItem}
+                  @close=${this._closeListLayer}
+                ></grid-inspection-list-layer>`
+            : ''}
           </div>
         </div>
 
@@ -175,6 +192,7 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
                 </div>
 
                 <hr />
+
                 <div>
                   <div date>검측일 : ${this.selectedInspection.requestDate}</div>
                 </div>
@@ -185,7 +203,28 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
                   담당자 : ${(_u = (_t = this.selectedInspection) === null || _t === void 0 ? void 0 : _t.manager) === null || _u === void 0 ? void 0 : _u.name} <br />
                   ${(_w = (_v = this.selectedInspection) === null || _v === void 0 ? void 0 : _v.manager) === null || _w === void 0 ? void 0 : _w.phone}
                 </div>
+
                 <hr />
+
+                ${this.selectedInspection.memo
+            ? html `
+                      <div>
+                        <div date>메모 : ${this.selectedInspection.memo}</div>
+                      </div>
+                      <hr />
+                    `
+            : html ``}
+                ${((_x = this.selectedInspection.attachments) === null || _x === void 0 ? void 0 : _x.length) > 0
+            ? html `
+                      <div class="attachment-info">
+                        <span class="attachment-count">첨부파일: ${this.selectedInspection.attachments.length}개</span>
+                        <md-elevated-button @click=${() => this._onClickUpdateInspection(1)}>
+                          <md-icon slot="icon">attach_file</md-icon>첨부파일 보기
+                        </md-elevated-button>
+                      </div>
+                      <hr />
+                    `
+            : html ``}
               </div>
 
               <!-- 전층 동일 적용 버튼 -->
@@ -194,13 +233,22 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
             : html ``}
 
               <!-- 검측 정보 등록, 수정 버튼 -->
-              ${!this.cell || this.selectedInspection.status == BuildingInspectionStatus.PASS
+              ${!this.cell
             ? html ``
             : !this.selectedInspection.status
                 ? html `<md-outlined-button @click=${() => this._onClickCreateInspection()}>검측 정보 등록 </md-outlined-button>`
-                : html `<md-filled-button update @click=${() => this._onClickUpdateInspection()}
-                      >검측 정보 수정
-                    </md-filled-button> `}
+                : this.selectedInspection.status == BuildingInspectionStatus.PASS
+                    ? html `<md-filled-button @click=${() => this._onClickUpdateInspection()}>검측 정보 보기 </md-filled-button> `
+                    : html `
+                        <md-filled-button update @click=${() => this._onClickUpdateInspection()}>
+                          검측 정보 수정
+                        </md-filled-button>
+                        ${this.selectedInspection.status == BuildingInspectionStatus.WAIT
+                        ? html `<md-filled-button delete @click=${() => this._onClickDeleteInspection()}>
+                              삭제
+                            </md-filled-button>`
+                        : html ``}
+                      `}
             `}
           </div>
         </div>
@@ -227,6 +275,7 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
           project(id: $id) {
             id
             name
+            projectType
             buildingComplex {
               id
               planXScale
@@ -264,6 +313,10 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
               cellY
               status
               requestDate
+              checklist {
+                constructionType
+                constructionDetailType
+              }
               creator {
                 id
                 name
@@ -283,6 +336,7 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
             return;
         this.project = (_a = response.data) === null || _a === void 0 ? void 0 : _a.project;
         this.buildingInspections = (_c = (_b = response.data) === null || _b === void 0 ? void 0 : _b.buildingInspectionsOfBuildingLevel) === null || _c === void 0 ? void 0 : _c.items;
+        this._groupInspectionsByCell();
         this.buildingInspectionSummaryOfProject = (_d = response.data) === null || _d === void 0 ? void 0 : _d.buildingInspectionSummaryOfProject;
         this.buildingInspectionSummaryOfBuildingLevel = (_e = response.data) === null || _e === void 0 ? void 0 : _e.buildingInspectionSummaryOfBuildingLevel;
         // buildingId 파라미터가 있으면 선택된 빌딩, 없으면 첫번째 빌딩 선택
@@ -343,6 +397,10 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
             cellY
             status
             requestDate
+            memo
+            attachments {
+              id
+            }
 
             checklist {
               id
@@ -405,14 +463,22 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
     async _onClickGrid(e) {
         var _a;
         const target = e.currentTarget;
-        const buildingInspectionId = target.getAttribute('buildingInspectionId');
         const cell = target.getAttribute('cell');
         // active 속성 모두 제거후 클릭한 셀만 active로 변경
-        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('div[cell][active]').forEach(e => e.removeAttribute('active'));
-        target.setAttribute('active', true);
-        const [cellX, cellY] = cell.split(',');
-        this.selectedInspection = buildingInspectionId ? await this._getBuildingInspection(buildingInspectionId) : { cellX, cellY };
-        this.cell = cell;
+        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('div[cell][active]').forEach(el => el.removeAttribute('active'));
+        target.setAttribute('active', 'true');
+        const [cellX, cellY] = (cell || '').split(',');
+        const items = this.cellToInspections[cell || ''] || [];
+        // 검측이 없으면 기존처럼 등록 가능하도록 선택만 처리
+        if (items.length === 0) {
+            this._closeListLayer();
+            this.selectedInspection = { cellX, cellY };
+            this.cell = cell || '';
+            return;
+        }
+        // 검측이 있으면 레이어 오픈
+        this.cell = cell || '';
+        this._openListLayer(target, items, this.cell);
     }
     _onClicPopupNotice() {
         var _a, _b;
@@ -447,26 +513,17 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
         ></grid-inspection-create-popup>
       `, { backdrop: true, size: 'large', title: '검측 요청서 등록' });
     }
-    _onClickUpdateInspection() {
-        var _a;
+    _onClickUpdateInspection(initialTab = 0) {
         openPopup(html `
-        <div style="overflow-y: auto; height: 100%;">
-          <checklist-view
-            .mode=${"EDITOR" /* ChecklistMode.EDITOR */}
-            .status=${this.selectedInspection.status}
-            .checklist=${this.selectedInspection.checklist || {}}
-            .buildingComplex=${((_a = this.project) === null || _a === void 0 ? void 0 : _a.buildingComplex) || {}}
-          ></checklist-view>
-
-          <div style="text-align: right; margin-right: 20px; margin-bottom: 15px">
-            <md-elevated-button
-              ?disabled=${this.selectedInspection.status == BuildingInspectionStatus.PASS}
-              @click=${this._onClickModifyChecklist.bind(this)}
-            >
-              <md-icon slot="icon">assignment</md-icon>등록
-            </md-elevated-button>
-          </div>
-        </div>
+        <inspection-tab-popup
+          .selectedInspection=${this.selectedInspection}
+          .project=${this.project}
+          .initialTab=${initialTab}
+          @modify-checklist=${(e) => this.validateChecklist(e.detail.checklist)}
+          @requestRefresh=${async (e) => {
+            await this.refresh(e.detail.buildingInspectionId);
+        }}
+        ></inspection-tab-popup>
       `, { backdrop: true, size: 'large', title: '검측 요청서 수정' });
     }
     async refresh(buildingInspectionId = '') {
@@ -489,8 +546,38 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
         }
         return html `<md-icon fail slot="icon">close</md-icon>`;
     }
-    _onClickModifyChecklist() {
-        this.validateChecklist(this.selectedInspection.checklist);
+    _groupInspectionsByCell() {
+        const map = {};
+        for (const item of this.buildingInspections || []) {
+            const key = `${item.cellX},${item.cellY}`;
+            if (!map[key])
+                map[key] = [];
+            map[key].push(item);
+        }
+        this.cellToInspections = map;
+    }
+    _openListLayer(anchorEl, items, cell) {
+        this.listLayer = { open: true, cell, items };
+    }
+    _closeListLayer() {
+        if (!this.listLayer.open)
+            return;
+        this.listLayer = { open: false, cell: '', items: [] };
+    }
+    async _onSelectListItem(e) {
+        var _a;
+        const id = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.id;
+        if (!id)
+            return;
+        const inspection = await this._getBuildingInspection(id);
+        this.selectedInspection = inspection;
+        this._closeListLayer();
+    }
+    _getCellElement(cell) {
+        var _a;
+        if (!cell)
+            return null;
+        return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`div[cell='${cell}']`);
     }
     async validateChecklist(checklist) {
         var _a, _b;
@@ -576,6 +663,39 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
             title: '추가 도면 보기'
         });
     }
+    async _onClickDeleteInspection() {
+        var _a, _b, _c;
+        if (!((_a = this.selectedInspection) === null || _a === void 0 ? void 0 : _a.id)) {
+            notify({ message: '삭제할 검측을 선택해주세요.', level: 'info' });
+            return;
+        }
+        const confirmed = await OxPrompt.open({
+            title: '검측 삭제',
+            text: '해당 검측을 삭제하시겠습니까? 삭제 후 되돌릴 수 없습니다.',
+            confirmButton: { text: '삭제' },
+            cancelButton: { text: '취소' }
+        });
+        if (confirmed === false)
+            return;
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($ids: [String!]!) {
+          deleteBuildingInspections(ids: $ids)
+        }
+      `,
+            variables: {
+                ids: [this.selectedInspection.id]
+            }
+        });
+        if (!response.errors) {
+            notify({ message: '삭제되었습니다.' });
+            this.selectedInspection = {};
+            await this.refresh();
+        }
+        else {
+            notify({ message: ((_c = (_b = response.errors) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.message) || '삭제에 실패하였습니다.', level: 'error' });
+        }
+    }
 };
 BuildingInspectionGridDetail.styles = [
     css `
@@ -604,6 +724,9 @@ BuildingInspectionGridDetail.styles = [
       md-filled-button[apply-to-all] {
         --md-filled-button-container-color: #aaa;
       }
+      md-filled-button[delete] {
+        --md-filled-button-container-color: #ff4444;
+      }
       md-outlined-button {
         color: #586878;
         font-weight: bold;
@@ -656,8 +779,28 @@ BuildingInspectionGridDetail.styles = [
         margin: 0px 20px;
 
         h2 {
+          display: flex;
+          gap: 7px;
           flex: 0.5;
           color: #3f71a0;
+          font-size: 18px;
+
+          md-icon[back] {
+            background: linear-gradient(135deg, #3f71a0 0%, #5a8cc7 100%);
+            color: white;
+            padding: 8px;
+            border-radius: 50%;
+            cursor: pointer;
+            box-shadow: 0 2px 8px rgba(63, 113, 160, 0.3);
+            width: 14px;
+            height: 14px;
+            --md-icon-size: 20px;
+          }
+
+          md-icon[back]:hover {
+            background: linear-gradient(135deg, #2e5c89 0%, #4a7bb0 100%);
+            box-shadow: 0 4px 12px rgba(63, 113, 160, 0.4);
+          }
         }
 
         div[button-container] {
@@ -768,6 +911,7 @@ BuildingInspectionGridDetail.styles = [
                 display: flex;
                 justify-content: center;
                 align-items: center;
+                position: relative;
               }
             }
 
@@ -881,6 +1025,52 @@ BuildingInspectionGridDetail.styles = [
           }
         }
       }
+
+      .attachment-info {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+        gap: 5px;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .attachment-count {
+        font-size: 14px;
+        color: #586878;
+      }
+      .cell-count {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        justify-self: anchor-center;
+        align-self: anchor-center;
+        width: 22px;
+        height: 22px;
+        background: #ffffff;
+        border: 2px solid #cccccc;
+        border-radius: 50%;
+        font-weight: 700;
+        font-size: 13px;
+        line-height: 1;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+      }
+      .cell-count.green {
+        color: #2e7d32;
+        border-color: #4bbb4a;
+      }
+      .cell-count.red {
+        color: #b71c1c;
+        border-color: #ff4444;
+      }
+      .cell-count.black {
+        color: #333333;
+        border-color: #4e5055;
+      }
     `
 ];
 __decorate([
@@ -891,6 +1081,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], BuildingInspectionGridDetail.prototype, "buildingInspections", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionGridDetail.prototype, "cellToInspections", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -915,6 +1109,10 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], BuildingInspectionGridDetail.prototype, "cell", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionGridDetail.prototype, "listLayer", void 0);
 __decorate([
     query('md-filled-select[building]'),
     __metadata("design:type", Object)
@@ -923,6 +1121,10 @@ __decorate([
     query('md-filled-select[level]'),
     __metadata("design:type", Object)
 ], BuildingInspectionGridDetail.prototype, "htmlSelectLevel", void 0);
+__decorate([
+    query('div[drawing]'),
+    __metadata("design:type", HTMLDivElement)
+], BuildingInspectionGridDetail.prototype, "drawingContainer", void 0);
 BuildingInspectionGridDetail = __decorate([
     customElement('building-inspection-grid-detail')
 ], BuildingInspectionGridDetail);