@dssp/supervision 1.0.0-alpha.7 → 1.0.0-alpha.74

package/dist-client/pages/building-inspection/building-inspection-list.js

@@ -1,6 +1,7 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
 import '@operato/data-grist';
+import '@operato/image-marker/ox-image-marker-view.js';
 import { CommonGristStyles, CommonButtonStyles, ScrollbarStyles } from '@operato/styles';
 import { PageView, navigate } from '@operato/shell';
 import { css, html } from 'lit';
@@ -12,8 +13,18 @@ import { notify } from '@operato/layout';
 import gql from 'graphql-tag';
 import { openPopup } from '@operato/layout';
 import './inspection-create-popup';
+import './component/inspection-document/photo-album-popup';
+import './component/inspection-document/inspection-request-document';
+import './component/inspection-document/inspection-result-notification';
+import './component/image-preview-popup';
+import './component/daily-worklog-popup';
 import '@operato/event-view/ox-event-view.js';
 import { InspectionEventProvider } from './component/inspection-event-provider';
+import { getBuildingInspectionForChecklist } from '../../graphql/building-inspection';
+import { InspectionMode } from './component/inspection-document/inspection-request-document';
+import moment from 'moment-timezone';
+import { DailyWorklogMode } from './component/daily-worklog-popup';
+import { DrawingImageProvider } from '@dssp/drawing/dist-client/drawing-management/drawing-image-provider.js';
 export var ChecklistTypeMainType;
 (function (ChecklistTypeMainType) {
     ChecklistTypeMainType["BASIC"] = "10";
@@ -33,12 +44,20 @@ export var BuildingInspectionStatus;
     BuildingInspectionStatus["FAIL"] = "FAIL";
 })(BuildingInspectionStatus || (BuildingInspectionStatus = {}));
 export const BUILDING_INSPECTION_STATUS_DISPLAY = {
-    [BuildingInspectionStatus.WAIT]: '검측 대기',
-    [BuildingInspectionStatus.OVERALL_WAIT]: '검측 대기',
-    [BuildingInspectionStatus.REQUEST]: '검측 요청',
-    [BuildingInspectionStatus.OVERALL_REQUEST]: '검측 요청',
-    [BuildingInspectionStatus.PASS]: '합격',
-    [BuildingInspectionStatus.FAIL]: '불합격'
+    [BuildingInspectionStatus.WAIT]: '작업 완료',
+    [BuildingInspectionStatus.OVERALL_WAIT]: '작업 완료',
+    [BuildingInspectionStatus.REQUEST]: '김리 대기',
+    [BuildingInspectionStatus.OVERALL_REQUEST]: '김리 대기',
+    [BuildingInspectionStatus.PASS]: '검측 완료',
+    [BuildingInspectionStatus.FAIL]: '조치 필요'
+};
+export const BUILDING_INSPECTION_RE_STATUS_DISPLAY = {
+    [BuildingInspectionStatus.WAIT]: '재검측 대기',
+    [BuildingInspectionStatus.OVERALL_WAIT]: '재검측 대기',
+    [BuildingInspectionStatus.REQUEST]: '재검측 대기',
+    [BuildingInspectionStatus.OVERALL_REQUEST]: '재검측 대기',
+    [BuildingInspectionStatus.PASS]: '검측 완료',
+    [BuildingInspectionStatus.FAIL]: '조치 필요'
 };
 let BuildingInspectionList = class BuildingInspectionList extends ScopedElementsMixin(PageView) {
     constructor() {
@@ -55,6 +74,9 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
         this.building = {};
         this.drawingImage = '';
         this.buildingInspectionSummary = {};
+        this.selectedYearMonth = moment().tz('Asia/Seoul').format('YYYY-MM');
+        this.selectedDate = moment().tz('Asia/Seoul').format('YYYY-MM-DD');
+        this.dailyWorklog = {};
     }
     get context() {
         return {
@@ -68,7 +90,10 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
     render() {
         return html `
       <div header>
-        <h2>${this.project.name}</h2>
+        <h2>
+          <md-icon slot="icon" back @click=${() => history.back()}>arrow_back</md-icon>
+          ${this.project.name}
+        </h2>
       </div>
 
       <div body>
@@ -115,8 +140,15 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
               .mode=${'monthly'}
               .eventProvider=${this.calendarData}
               @select-date=${(e) => {
-            // TODO 선택된 날짜의 검측데이터만 그리드에 보여야함
-            console.log('select-date', e.detail);
+            this.selectedDate = moment(e.detail[0]).format('YYYY-MM-DD');
+            this._fetchDailyWorklog(this.selectedDate);
+        }}
+              @change-month=${(e) => {
+            var _a, _b, _c;
+            const year = e.detail.year;
+            const month = (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.month) === null || _b === void 0 ? void 0 : _b.toString()) === null || _c === void 0 ? void 0 : _c.padStart(2, '0');
+            this.selectedYearMonth = `${year}-${month}`;
+            this.grist.fetch();
         }}
             >
             </ox-event-view>
@@ -124,6 +156,15 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
         </div>
 
         <div bottom>
+          <div daily-worklog-actions>
+            ${this.dailyWorklog.id
+            ? html `<md-filled-button green @click=${this._openDailyWorklogPopup}>
+                  <md-icon slot="icon">edit</md-icon>일일 업무일지 수정
+                </md-filled-button>`
+            : html `<md-filled-button @click=${this._openDailyWorklogPopup}>
+                  <md-icon slot="icon">note_add</md-icon>일일 업무일지 작성
+                </md-filled-button>`}
+          </div>
           <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}> </ox-grist>
         </div>
       </div>
@@ -144,6 +185,7 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
           projectByBuildingLevelId(buildingLevelId: $buildingLevelId) {
             id
             name
+            projectType
             mainPhoto {
               fullpath
             }
@@ -177,7 +219,7 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
             return;
         this.project = (_a = response.data) === null || _a === void 0 ? void 0 : _a.projectByBuildingLevelId;
         this.buildingInspectionSummary = (_b = response.data) === null || _b === void 0 ? void 0 : _b.buildingInspectionSummaryOfBuildingLevel;
-        this.calendarData = new InspectionEventProvider(buildingLevelId);
+        this.calendarData = new InspectionEventProvider(buildingLevelId, this.project.id);
         // 캘린더 최소 높이 속성 수정
         this.eventView.style.setProperty('--calendar-monthly-date-min-height', '50px');
     }
@@ -186,6 +228,18 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
             columns: [
                 { type: 'gutter', gutterName: 'sequence' },
                 { type: 'gutter', gutterName: 'row-selector', multiple: true },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'open_in_new',
+                    header: '상세보기',
+                    width: 60,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            navigate(`building-inspection-detail-drawing/${record.id}`);
+                        }
+                    }
+                },
                 {
                     type: 'string',
                     name: 'id',
@@ -195,13 +249,23 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
                     type: 'string',
                     name: 'location',
                     header: '위치',
-                    width: 150
+                    width: 150,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            navigate(`building-inspection-detail-drawing/${record.id}`);
+                        }
+                    }
                 },
                 {
                     type: 'string',
                     name: 'constructionType',
                     header: '공종',
-                    width: 120
+                    width: 120,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            navigate(`building-inspection-detail-drawing/${record.id}`);
+                        }
+                    }
                 },
                 {
                     type: 'string',
@@ -210,34 +274,104 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
                     record: {
                         renderer: value => (value === null || value === void 0 ? void 0 : value.join(', ')) || ''
                     },
-                    width: 200
+                    width: 200,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            navigate(`building-inspection-detail-drawing/${record.id}`);
+                        }
+                    }
                 },
                 {
                     type: 'string',
                     name: 'requestDate',
                     header: '검측 요청일',
-                    width: 120
+                    width: 120,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            navigate(`building-inspection-detail-drawing/${record.id}`);
+                        }
+                    }
                 },
                 {
                     type: 'string',
                     name: 'status',
                     header: '검측 결과',
                     record: {
-                        renderer: value => BUILDING_INSPECTION_STATUS_DISPLAY[value]
+                        renderer: (value, column, record) => (record.failCount > 0 ? BUILDING_INSPECTION_RE_STATUS_DISPLAY : BUILDING_INSPECTION_STATUS_DISPLAY)[value]
                     },
-                    width: 120
+                    width: 120,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            navigate(`building-inspection-detail-drawing/${record.id}`);
+                        }
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'fact_check',
+                    header: '도면',
+                    width: 50,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            this._openDrawingPopup(record);
+                        }
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'edit_square',
+                    header: '요청서/결과통보',
+                    width: 100,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            this._openInspectionRequestDocument(record.id);
+                        }
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'task',
+                    header: '체크리스트',
+                    width: 70,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            this._openChecklistPopup(record.id);
+                        }
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'photo_camera',
+                    header: '사진대지',
+                    width: 60,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            this._openPhotoAlbumPopup(record.checklistId);
+                        }
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'engineering',
+                    header: '실명부',
+                    width: 50,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            this._showNameListPreview(record);
+                        }
+                    }
                 }
             ],
             rows: {
                 selectable: {
                     multiple: true
                 },
-                appendable: false,
-                handlers: {
-                    click: (columns, data, column, record, rowIndex) => {
-                        navigate(`building-inspection-detail-drawing/${record.id}`);
-                    }
-                }
+                appendable: false
             },
             sorters: [{ name: 'requestDate' }]
         };
@@ -253,7 +387,10 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
             items {
               id
               status
+              failCount
               requestDate
+              drawingMarker
+
               checklist {
                 checklistId: id
                 name
@@ -261,6 +398,13 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
                 constructionDetailType
                 location
                 inspectionParts
+                inspectionDrawingType
+
+                nameListAttachment {
+                  id
+                  name
+                  fullpath
+                }
               }
             }
             total
@@ -286,7 +430,9 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
             variables: {
                 params: {
                     buildingLevelId: this.buildingLevelId,
-                    limit: 0
+                    limit: 0,
+                    startDate: moment(this.selectedYearMonth).startOf('month').format('YYYY-MM-DD'),
+                    endDate: moment(this.selectedYearMonth).endOf('month').format('YYYY-MM-DD')
                 },
                 buildingLevelId: this.buildingLevelId
             }
@@ -318,6 +464,7 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
                 });
                 if (!response.errors) {
                     this.grist.fetch();
+                    this.initProject(this.buildingLevelId);
                     notify({ message: '삭제되었습니다.' });
                 }
             }
@@ -329,13 +476,12 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
           .projectId=${this.project.id}
           .selectedBuildingId=${this.building.id}
           .selectedBuildingLevelId=${this.buildingLevelId}
-          @requestRefresh="${() => this.grist.fetch()}"
+          @requestRefresh="${() => {
+            this.grist.fetch();
+            this.initProject(this.buildingLevelId);
+        }}"
         ></inspection-create-popup>
-      `, {
-            backdrop: true,
-            size: 'large',
-            title: '검측 요청서 등록'
-        });
+      `, { backdrop: true, size: 'large', title: '검측 등록' });
     }
     _formatDate(date) {
         return date
@@ -347,6 +493,160 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
             }).format(new Date(date))
             : '';
     }
+    async _openChecklistPopup(buildingInspectionId) {
+        var _a, _b;
+        const buildingInspection = await getBuildingInspectionForChecklist(buildingInspectionId);
+        openPopup(html `
+        <div style="overflow-y: auto;">
+          <checklist-view
+            .mode=${"VIEWER" /* ChecklistMode.VIEWER */}
+            .checklist=${buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.checklist}
+            .buildingComplex=${((_b = (_a = buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.buildingLevel) === null || _a === void 0 ? void 0 : _a.building) === null || _b === void 0 ? void 0 : _b.buildingComplex) || {}}
+            .status=${buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.status}
+            .failCount=${(buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.failCount) || 0}
+            .projectType=${this.project.projectType}
+          ></checklist-view>
+        </div>
+      `, { backdrop: true, size: 'large', title: '체크 리스트 미리보기' });
+    }
+    async _openPhotoAlbumPopup(checklistId) {
+        openPopup(html ` <photo-album-popup .checklistId=${checklistId}></photo-album-popup> `, {
+            backdrop: true,
+            size: 'large',
+            title: '사진대지'
+        });
+    }
+    async _openInspectionRequestDocument(buildingInspectionId) {
+        const buildingInspection = await getBuildingInspectionForChecklist(buildingInspectionId);
+        if (!buildingInspection.checklist.inspectionRequestUpdatedAt) {
+            notify({ message: '검측 요청서가 없습니다.', level: 'info' });
+            return;
+        }
+        openPopup(html `
+        <div style="overflow-y: auto;">
+          <inspection-request-document
+            .checklist=${buildingInspection.checklist}
+            .buildingInspection=${buildingInspection}
+            .mode=${InspectionMode.VIEW}
+          ></inspection-request-document>
+
+          ${buildingInspection.checklist.inspectionResultUpdatedAt
+            ? html `
+                <hr />
+
+                <inspection-result-notification
+                  .checklist=${buildingInspection.checklist}
+                  .buildingInspection=${buildingInspection}
+                  .mode=${InspectionMode.VIEW}
+                ></inspection-result-notification>
+              `
+            : ''}
+        </div>
+      `, { backdrop: true, size: 'large', title: '검측요청결과 통보내용' });
+    }
+    // 실명부 미리보기
+    _showNameListPreview(record) {
+        const nameListAttachment = record.nameListAttachment;
+        if (!nameListAttachment) {
+            notify({ message: '실명부 파일이 없습니다.', level: 'info' });
+            return;
+        }
+        // 이미지 미리보기 팝업
+        openPopup(html `
+        <image-preview-popup
+          .images=${[{ fullpath: nameListAttachment.fullpath, name: nameListAttachment.name }]}
+          .currentIndex=${0}
+        ></image-preview-popup>
+      `, { backdrop: true, size: 'large', title: '실명부' });
+    }
+    _openDailyWorklogPopup() {
+        const date = this.selectedDate;
+        openPopup(html `<daily-worklog-popup
+        .project=${this.project}
+        .date=${date}
+        .dailyWorklog=${this.dailyWorklog}
+        .mode=${this.dailyWorklog.id ? DailyWorklogMode.EDIT : DailyWorklogMode.CREATE}
+        @createdDailyWorklog=${this._refreshCalendar.bind(this)}
+        @updatedDailyWorklog=${() => this._fetchDailyWorklog(this.selectedDate)}
+      ></daily-worklog-popup>`, {
+            backdrop: true,
+            size: 'large',
+            title: '일일 업무일지 작성'
+        });
+    }
+    // 캘린더 객체 재 생성하여 재 랜더링
+    async _refreshCalendar() {
+        this.calendarData = new InspectionEventProvider(this.buildingLevelId, this.project.id);
+        await this._fetchDailyWorklog(this.selectedDate);
+    }
+    async _fetchDailyWorklog(date = '') {
+        var _a;
+        if (!date)
+            return;
+        const response = await client.query({
+            query: gql `
+        query ($projectId: String!, $date: String!) {
+          buildingInspectionDailyWorklogByProjectIdAndDate(projectId: $projectId, date: $date) {
+            id
+            date
+            documentNo
+            worklogs
+            memo
+            directiveMemo
+            taskSupervisorySignature
+            overallSupervisorySignature
+
+            taskSupervisory {
+              id
+              name
+            }
+            overallSupervisory {
+              id
+              name
+            }
+
+            buildingInspections {
+              id
+
+              checklist {
+                overallSupervisorySignature
+                taskSupervisorySignature
+                taskSupervisory {
+                  id
+                  name
+                }
+                overallSupervisory {
+                  id
+                  name
+                }
+              }
+            }
+          }
+        }
+      `,
+            variables: { projectId: this.project.id, date }
+        });
+        this.dailyWorklog = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.buildingInspectionDailyWorklogByProjectIdAndDate) || {};
+    }
+    async _openDrawingPopup(buildingInspection) {
+        const drawingImageProvider = new DrawingImageProvider();
+        const inspectionDrawingType = buildingInspection.checklist.inspectionDrawingType;
+        const drawingShapes = JSON.parse((buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.drawingMarker) || null) || [];
+        const markers = await drawingImageProvider.getMarkers(inspectionDrawingType);
+        const imageUrl = String(inspectionDrawingType).normalize('NFC');
+        const shapes = [...drawingShapes, ...markers];
+        openPopup(html `<ox-image-marker-view
+        style="pointer-events: none;"
+        id="image-marker"
+        .imageUrl=${imageUrl}
+        .shapes=${shapes}
+        .imageProvider=${drawingImageProvider}
+      ></ox-image-marker-view>`, {
+            backdrop: true,
+            size: 'large',
+            title: '검측 도면'
+        });
+    }
 };
 BuildingInspectionList.styles = [
     ScrollbarStyles,
@@ -372,6 +672,10 @@ BuildingInspectionList.styles = [
         --md-filled-button-leading-space: 15px;
       }
 
+      md-filled-button[green] {
+        --md-filled-button-container-color: #008000;
+      }
+
       md-outlined-button {
         --md-outlined-button-container-height: 30px;
         --md-outlined-button-trailing-space: var(--spacing-medium, 8px);
@@ -387,12 +691,31 @@ BuildingInspectionList.styles = [
         display: flex;
         margin: 0px var(--spacing-large, 12px);
         margin-bottom: var(--spacing-small, 5px);
-      }
 
-      div[header] h2 {
-        flex: 0.5;
-        color: #3f71a0;
-        font-size: 18px;
+        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[body] {
@@ -518,6 +841,12 @@ BuildingInspectionList.styles = [
         flex-direction: column;
         overflow: hidden;
         min-height: 300px;
+        gap: 0px !important;
+      }
+
+      div[daily-worklog-actions] {
+        display: flex;
+        justify-content: flex-end;
       }
 
       ox-grist {
@@ -558,6 +887,18 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], BuildingInspectionList.prototype, "calendarData", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionList.prototype, "selectedYearMonth", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionList.prototype, "selectedDate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionList.prototype, "dailyWorklog", void 0);
 __decorate([
     query('ox-grist'),
     __metadata("design:type", DataGrist)