@dssp/project 1.0.0-y.0 → 1.0.0

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

@@ -1,621 +0,0 @@
-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 } from '@operato/shell';
-import { connect } from 'pwa-helpers/connect-mixin.js';
-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