@dssp/project 1.0.0-alpha.8 → 1.0.0-alpha.80

package/dist-client/pages/project/popup/checklist/task-checklist-view.js

@@ -0,0 +1,620 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import gql from 'graphql-tag';
+import { client } from '@operato/graphql';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles';
+import '@operato/input/ox-input-signature.js';
+import { store, connect } from '@operato/shell';
+import { openPopup } from '@operato/layout';
+import './task-checklist-comment-list-popup';
+import './task-checklist-attachment-list-popup';
+export var ChecklistTypeMainType;
+(function (ChecklistTypeMainType) {
+    ChecklistTypeMainType["BASIC"] = "10";
+    ChecklistTypeMainType["NON_BASIC"] = "20";
+})(ChecklistTypeMainType || (ChecklistTypeMainType = {}));
+export const CHECKLIST_MAIN_TYPE_LIST = {
+    [ChecklistTypeMainType.BASIC]: '기본 업무',
+    [ChecklistTypeMainType.NON_BASIC]: '기본 외 업무'
+};
+export var BuildingInspectionStatus;
+(function (BuildingInspectionStatus) {
+    BuildingInspectionStatus["WAIT"] = "WAIT";
+    BuildingInspectionStatus["OVERALL_WAIT"] = "OVERALL_WAIT";
+    BuildingInspectionStatus["REQUEST"] = "REQUEST";
+    BuildingInspectionStatus["OVERALL_REQUEST"] = "OVERALL_REQUEST";
+    BuildingInspectionStatus["PASS"] = "PASS";
+    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]: '조치 필요'
+};
+let TaskChecklistView = class TaskChecklistView extends connect(store)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.mode = "VIEWER" /* ChecklistMode.VIEWER */;
+        this.checklist = {};
+        this.buildingComplex = {
+            id: '',
+            taskConstructorEmails: [],
+            overallConstructorEmails: [],
+            taskSupervisoryEmails: [],
+            overallSupervisoryEmails: []
+        };
+        this.status = BuildingInspectionStatus.WAIT;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const today = this._getDate(new Date());
+        // 시공자 스탭 여부
+        const isConstructorStep = this.status == BuildingInspectionStatus.WAIT ||
+            this.status == BuildingInspectionStatus.OVERALL_WAIT ||
+            this.status == BuildingInspectionStatus.FAIL;
+        // 감리자 스탭 여부
+        const isSupervisoryStep = this.status == BuildingInspectionStatus.REQUEST || this.status == BuildingInspectionStatus.OVERALL_REQUEST;
+        // 현재 스탭에 해당하는 계정인지 체크 (편집모드만)
+        let havePermissionByStatus = false;
+        let isTaskConstructor = false;
+        let isOverallConstructor = false;
+        let isTaskSupervisory = false;
+        let isOverallSupervisory = false;
+        if (this.mode == "EDITOR" /* ChecklistMode.EDITOR */ && this.status) {
+            const email = (_b = (_a = store.getState().auth) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.email;
+            // 현재 유저가 "공종별 시공 관리자" 인지 체크
+            isTaskConstructor = ((_c = this.buildingComplex.taskConstructorEmails) === null || _c === void 0 ? void 0 : _c.includes(email)) || false;
+            // 현재 유저가 "총괄 시공 책임자" 인지 체크
+            isOverallConstructor = ((_d = this.buildingComplex.overallConstructorEmails) === null || _d === void 0 ? void 0 : _d.includes(email)) || false;
+            // 현재 유저가 "공종별 감리 책임자" 인지 체크
+            isTaskSupervisory = ((_e = this.buildingComplex.taskSupervisoryEmails) === null || _e === void 0 ? void 0 : _e.includes(email)) || false;
+            // 현재 유저가 "총괄 감리 책임자" 인지 체크
+            isOverallSupervisory = ((_f = this.buildingComplex.overallSupervisoryEmails) === null || _f === void 0 ? void 0 : _f.includes(email)) || false;
+            // 스탭이 시공자 스탭일때에 내가 시공자 권한이 있는지 체크
+            havePermissionByStatus = isConstructorStep
+                ? isTaskConstructor || isOverallConstructor
+                : isTaskSupervisory || isOverallSupervisory;
+        }
+        // 체크리스트 아이템 정렬
+        (_h = (_g = this.checklist) === null || _g === void 0 ? void 0 : _g.checklistItems) === null || _h === void 0 ? void 0 : _h.sort((a, b) => {
+            // 1순위: mainType 오름차순
+            if (a.mainType < b.mainType)
+                return -1;
+            if (a.mainType > b.mainType)
+                return 1;
+            // 2순위: detailType 오름차순
+            if (a.detailType < b.detailType)
+                return -1;
+            if (a.detailType > b.detailType)
+                return 1;
+            // 3순위: sequence 오름차순
+            return a.sequence - b.sequence;
+        });
+        const processedItems = this.drawChecklistItems(((_j = this.checklist) === null || _j === void 0 ? void 0 : _j.checklistItems) || []);
+        return html `
+      <div title-row>
+        <div name>${this.checklist.name}</div>
+      </div>
+      <table header>
+        <tr>
+          <th>공종</th>
+          <td>${this.checklist.constructionType}</td>
+          <th>문서 번호</th>
+          <td>${this.checklist.documentNo}</td>
+        </tr>
+        <tr>
+          <th>세부 공종</th>
+          <td>${this.checklist.constructionDetailType}</td>
+          <th>검측 상태</th>
+          <td>${BUILDING_INSPECTION_STATUS_DISPLAY[this.status]}</td>
+        </tr>
+      </table>
+
+      <table body>
+        <thead>
+          <tr>
+            <th colspan="2" rowspan="3" type>구분</th>
+            <th rowspan="3" inspection-name>검사항목</th>
+            <th rowspan="3" criteria>검사기준</th>
+            <th colspan="4" result>검사결과</th>
+            <th rowspan="3" small>첨부자료</th>
+            <th rowspan="3" small>조치사항</th>
+          </tr>
+          <tr>
+            <th colspan="2">시공자</th>
+            <th colspan="2">감리자</th>
+          </tr>
+          <tr>
+            <th>적합</th>
+            <th>부적합</th>
+            <th>적합</th>
+            <th>부적합</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${processedItems.map(({ item, showMainTypeCell, mainTypeRowspan, showDetailTypeCell, detailTypeRowspan }, idx) => {
+            return html ` <tr>
+              ${showMainTypeCell
+                ? html `<td main-type bold rowspan="${mainTypeRowspan}">${CHECKLIST_MAIN_TYPE_LIST[item.mainType]}</td>`
+                : ''}
+              ${showDetailTypeCell ? html ` <td bold rowspan="${detailTypeRowspan}">${item.detailType}</td> ` : ''}
+
+              <td>${idx + 1}. ${item.name}</td>
+              <td>${item.inspctionCriteria}</td>
+              <td radio>
+                <md-radio
+                  item-id=${item.id}
+                  item-name="constructionConfirmStatus"
+                  name=${'radio-construction-' + item.id}
+                  value="T"
+                  .checked=${item.constructionConfirmStatus === 'T'}
+                  ?disabled=${!isConstructorStep || !havePermissionByStatus}
+                  @change=${this._onChangeConfirmStatus}
+                ></md-radio>
+              </td>
+              <td radio>
+                <md-radio
+                  item-id=${item.id}
+                  item-name="constructionConfirmStatus"
+                  name=${'radio-construction-' + item.id}
+                  value="F"
+                  .checked=${item.constructionConfirmStatus === 'F'}
+                  ?disabled=${!isConstructorStep || !havePermissionByStatus}
+                  @change=${this._onChangeConfirmStatus}
+                ></md-radio>
+              </td>
+              <td radio>
+                <md-radio
+                  item-id=${item.id}
+                  item-name="supervisoryConfirmStatus"
+                  name=${'radio-supervisory-' + item.id}
+                  value="T"
+                  .checked=${item.supervisoryConfirmStatus === 'T'}
+                  ?disabled=${!isSupervisoryStep || !havePermissionByStatus}
+                  @change=${this._onChangeConfirmStatus}
+                ></md-radio>
+              </td>
+              <td radio>
+                <md-radio
+                  item-id=${item.id}
+                  item-name="supervisoryConfirmStatus"
+                  name=${'radio-supervisory-' + item.id}
+                  value="F"
+                  .checked=${item.supervisoryConfirmStatus === 'F'}
+                  ?disabled=${!isSupervisoryStep || !havePermissionByStatus}
+                  @change=${this._onChangeConfirmStatus}
+                ></md-radio>
+              </td>
+              <td
+                attachment
+                ?disabled=${this.status == BuildingInspectionStatus.PASS}
+                @click=${() => this._onClickAttachment(item.id)}
+              >
+                <md-icon slot="icon">attach_file</md-icon>
+                <span>${(item === null || item === void 0 ? void 0 : item.checklistItemAttachmentCount) || ''}</span>
+              </td>
+              <td comment ?disabled=${this.status == BuildingInspectionStatus.PASS} @click=${() => this._onClickComment(item.id)}>
+                <md-icon slot="icon">chat</md-icon>
+                <span>${(item === null || item === void 0 ? void 0 : item.checklistItemCommentCount) || ''}</span>
+              </td>
+            </tr>`;
+        })}
+        </tbody>
+      </table>
+
+      <table tail>
+        <tbody>
+          <tr first>
+            <th rowspan="2">시공자 점검일</th>
+            <td rowspan="2">
+              ${this.mode == "VIEWER" /* ChecklistMode.VIEWER */ ? today : this._getDate(this.checklist.constructionInspectionDate)}
+            </td>
+            <th>공종별 시공 관리자</th>
+            <td>
+              <span sign-text>(인)</span>
+              <ox-input-signature
+                .value=${this.checklist.taskConstructorSignature}
+                name="taskConstructorSignature"
+                @change=${this._onChangeSignature}
+                ?disabled=${(this.status != BuildingInspectionStatus.WAIT && this.status != BuildingInspectionStatus.FAIL) ||
+            !isTaskConstructor}
+              >
+              </ox-input-signature>
+            </td>
+          </tr>
+          <tr>
+            <th>총괄 시공 책임자</th>
+            <td>
+              <span sign-text>(인)</span>
+              <ox-input-signature
+                .value=${this.checklist.overallConstructorSignature}
+                name="overallConstructorSignature"
+                @change=${this._onChangeSignature}
+                ?disabled=${this.status != BuildingInspectionStatus.OVERALL_WAIT || !isOverallConstructor}
+              >
+              </ox-input-signature>
+            </td>
+          </tr>
+          <tr>
+            <th rowspan="2">감리자 점검일</th>
+            <td rowspan="2">
+              ${this.mode == "VIEWER" /* ChecklistMode.VIEWER */ ? today : this._getDate(this.checklist.supervisorInspectionDate)}
+            </td>
+            <th>공종별 감리 책임자</th>
+            <td>
+              <span sign-text>(인)</span>
+              <ox-input-signature
+                .value=${this.checklist.taskSupervisorySignature}
+                name="taskSupervisorySignature"
+                @change=${this._onChangeSignature}
+                ?disabled=${this.status != BuildingInspectionStatus.REQUEST || !isTaskSupervisory}
+              >
+              </ox-input-signature>
+            </td>
+          </tr>
+          <tr>
+            <th>총괄 감리 책임자</th>
+            <td>
+              <span sign-text>(인)</span>
+              <ox-input-signature
+                .value=${this.checklist.overallSupervisorySignature}
+                name="overallSupervisorySignature"
+                @change=${this._onChangeSignature}
+                ?disabled=${this.status != BuildingInspectionStatus.OVERALL_REQUEST || !isOverallSupervisory}
+              >
+              </ox-input-signature>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div footer>
+        <div>
+          - 검사결과는 1차, 2차로 구분 재검측시 2차에 기록하고 검사기준도 검사결과와 비교될 수 있도록 시방서 또는 도면 등에 있는
+          수치를 작성하며, 수치가 없는 검사항목은 시방서 또는 설계도서에 있는 내용과 검사한 내용으로 작성함
+        </div>
+        <div>- 검사항목 및 검사기준은 각 공종별로 감리원과 협의하여 작성할 것</div>
+      </div>
+    `;
+    }
+    _onChangeConfirmStatus(e) {
+        var _a, _b;
+        const target = e.target;
+        const itemId = target.getAttribute('item-id');
+        const name = target.getAttribute('item-name') || '';
+        const value = target.value;
+        this.checklist.checklistItems = (_b = (_a = this.checklist) === null || _a === void 0 ? void 0 : _a.checklistItems) === null || _b === void 0 ? void 0 : _b.map(item => item.id == itemId ? Object.assign(Object.assign({}, item), { [name]: value }) : item);
+    }
+    _onChangeSignature(e) {
+        const target = e.target;
+        this.checklist[target.name] = target.value;
+    }
+    _getDate(date) {
+        if (!date)
+            return ' 년 월 일';
+        const _date = new Date(date) || new Date();
+        return _date.toLocaleDateString('ko-KR', {
+            timeZone: 'Asia/Seoul',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+        });
+    }
+    drawChecklistItems(checklistItems) {
+        const mainTypeRowspans = {};
+        const detailTypeRowspans = {};
+        let previousMainType = null;
+        let previousDetailType = null;
+        return checklistItems.map((item, index) => {
+            const mainType = item.mainType;
+            const detailType = item.detailType;
+            // mainType이 변경되면 rowspan을 계산
+            if (mainType !== previousMainType) {
+                mainTypeRowspans[mainType] = checklistItems.filter(i => i.mainType === mainType).length;
+                previousDetailType = null; // detailType 초기화
+            }
+            // detailType이 변경되면 rowspan을 계산
+            if (detailType !== previousDetailType) {
+                detailTypeRowspans[`${mainType}-${detailType}`] = checklistItems.filter(i => i.mainType === mainType && i.detailType === detailType).length;
+            }
+            const showMainTypeCell = mainType !== previousMainType;
+            const showDetailTypeCell = detailType !== previousDetailType;
+            const mainTypeRowspan = mainTypeRowspans[mainType];
+            const detailTypeRowspan = detailTypeRowspans[`${mainType}-${detailType}`];
+            // 이전 값을 업데이트
+            previousMainType = mainType;
+            previousDetailType = detailType;
+            return {
+                item,
+                showMainTypeCell,
+                mainTypeRowspan,
+                showDetailTypeCell,
+                detailTypeRowspan
+            };
+        });
+    }
+    _onClickComment(checklistItemId) {
+        openPopup(html `
+        <task-checklist-comment-list-popup
+          .checklistItemId=${checklistItemId}
+          .status=${this.status}
+          @change-comment=${this._refreshItem.bind(this)}
+        ></task-checklist-comment-list-popup>
+      `, { backdrop: true, size: 'medium', title: '조치 사항' });
+    }
+    _onClickAttachment(checklistItemId) {
+        openPopup(html `
+        <task-checklist-attachment-list-popup
+          .checklistItemId=${checklistItemId}
+          .status=${this.status}
+          @change-attachment=${this._refreshItem.bind(this)}
+        ></task-checklist-attachment-list-popup>
+      `, { backdrop: true, size: 'medium', title: '첨부 자료' });
+    }
+    async _refreshItem(e) {
+        var _a;
+        const { checklistItemId } = e.detail;
+        const response = await client.query({
+            query: gql `
+        query ChecklistItem($checklistItemId: String!) {
+          checklistItem(id: $checklistItemId) {
+            id
+            checklistItemCommentCount
+            checklistItemAttachmentCount
+          }
+        }
+      `,
+            variables: {
+                checklistItemId: checklistItemId
+            }
+        });
+        const checklistItem = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.checklistItem) || [];
+        this.checklist.checklistItems = this.checklist.checklistItems.map(item => {
+            return item.id != checklistItemId ? item : Object.assign(Object.assign({}, item), checklistItem);
+        });
+        this.requestUpdate();
+    }
+};
+TaskChecklistView.styles = [
+    ButtonContainerStyles,
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        padding: var(--spacing-large, 12px);
+        padding-top: 0;
+        font-size: 14px;
+        min-width: 800px;
+      }
+
+      [bold] {
+        font-weight: bold;
+      }
+
+      div[name] {
+        display: flex;
+        color: #586878;
+        font-size: 24px;
+        align-items: center;
+        justify-content: center;
+      }
+
+      table {
+        width: 100%;
+        font-size: 15px;
+        color: #586878;
+        text-align: left;
+        border-collapse: collapse;
+        td,
+        th {
+          border: 1px rgba(51, 51, 51, 0.2) solid;
+          padding-inline: var(--spacing-medium, 8px);
+          vertical-align: middle;
+        }
+        th {
+          background-color: #efefef;
+          font-weight: bold;
+        }
+        td {
+          height: 33px;
+          background-color: var(--md-sys-color-on-primary);
+          &[radio] {
+            text-align: center;
+            width: 50px;
+          }
+        }
+      }
+
+      table[header] {
+        margin-top: var(--spacing-small, 4px);
+
+        td {
+          min-width: 180px;
+          border-left: none;
+        }
+        th {
+          width: 110px;
+          border-right: none;
+        }
+      }
+
+      table[body] {
+        border: 2px solid var(--md-sys-color-on-primary-container);
+        border-bottom: none;
+        margin-top: var(--spacing-medium, 8px);
+
+        th {
+          text-align: center;
+
+          &[type] {
+            min-width: 150px;
+          }
+          &[inspection-name] {
+            min-width: 250px;
+          }
+          &[result] {
+            width: 270px;
+          }
+          &[criteria] {
+            width: 90px;
+          }
+          &[small] {
+            width: 60px;
+          }
+        }
+        td {
+          &[main-type] {
+            width: 50px;
+            text-align: center;
+            word-break: keep-all;
+          }
+
+          &[attachment] {
+            text-align: center;
+            cursor: pointer;
+
+            * {
+              vertical-align: middle;
+            }
+          }
+          &[comment] {
+            cursor: pointer;
+            text-align: center;
+
+            * {
+              vertical-align: middle;
+            }
+          }
+          &[disabled] * {
+            opacity: 0.6;
+          }
+        }
+      }
+
+      table[tail] {
+        border: 2px solid var(--md-sys-color-on-primary-container);
+        border-top: none;
+        margin-top: -1px;
+
+        td {
+          width: 25%;
+          border-left: none;
+          text-align: center;
+          position: relative;
+          background-color: var(--md-sys-color-on-primary);
+          font-size: 14px;
+        }
+        th {
+          width: 25%;
+          border-right: none;
+        }
+
+        span[sign-text] {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          pointer-events: none;
+        }
+        ox-input-signature {
+          margin: var(--spacing-medium, 8px);
+
+          &[disabled] {
+            background: #eee;
+          }
+        }
+      }
+
+      div[footer] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-tiny, 2px);
+        font-size: 12px;
+        margin-top: var(--spacing-medium, 8px);
+        color: #586878;
+        text-indent: -9px;
+        padding-left: var(--spacing-medium, 8px);
+      }
+
+      .stt-float-btns {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        gap: 8px;
+        z-index: 10;
+      }
+      .stt-float-btns button {
+        background: #fff;
+        border: 1px solid #ccc;
+        border-radius: 50%;
+        width: 38px;
+        height: 38px;
+        font-size: 18px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        cursor: pointer;
+        transition: background 0.2s;
+        outline: none;
+      }
+      .stt-float-btns button:hover {
+        background: #f2f2f2;
+      }
+      div[title-row] {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 8px;
+      }
+      div[name] {
+        color: #586878;
+        font-size: 24px;
+        font-weight: bold;
+        flex: 1;
+        text-align: center;
+      }
+
+      @keyframes pulse {
+        0% {
+          filter: drop-shadow(0 0 0 #d32f2f);
+        }
+        70% {
+          filter: drop-shadow(0 0 8px #d32f2f);
+        }
+        100% {
+          filter: drop-shadow(0 0 0 #d32f2f);
+        }
+      }
+      .stt-fab[active] md-icon {
+        color: #d32f2f;
+        animation: pulse 1s infinite;
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], TaskChecklistView.prototype, "mode", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], TaskChecklistView.prototype, "checklist", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], TaskChecklistView.prototype, "buildingComplex", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], TaskChecklistView.prototype, "status", void 0);
+TaskChecklistView = __decorate([
+    customElement('task-checklist-view')
+], TaskChecklistView);
+//# sourceMappingURL=task-checklist-view.js.map