@dssp/project 1.0.0-alpha.8 → 1.0.0-y.0

package/dist-client/pages/project/project-task.js

@@ -0,0 +1,686 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@material/web/textfield/outlined-text-field.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/outlined-button.js';
+import { PageView } from '@operato/shell';
+import { css, html } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { client } from '@operato/graphql';
+import { i18next } from '@operato/i18n';
+import { notify, openPopup } from '@operato/layout';
+import gql from 'graphql-tag';
+import { ScrollbarStyles } from '@operato/styles';
+import { verifyBiometric } from '@things-factory/auth-base/dist-client';
+import { BuildingInspectionStatus } from './popup/checklist/task-checklist-view';
+import '@operato/gantt/ox-gantt.js';
+import './popup/popup-task-upload';
+import './popup/checklist/task-checklist-create-popup';
+import './popup/checklist/task-checklist-view';
+const TaskFragment = gql `
+  fragment TaskFragment on Task {
+    type
+    title: name
+    id: code
+    duration
+    startDate
+    endDate
+    dependsOn
+    progress
+    style
+    taskChecklistBinding {
+      id
+      status
+    }
+    resources {
+      type
+      allocated
+    }
+  }
+`;
+let ProjectTask = class ProjectTask extends ScopedElementsMixin(PageView) {
+    constructor() {
+        super(...arguments);
+        this.defaultProject = {
+            name: '',
+            buildingComplex: {
+                address: '',
+                area: 0,
+                constructionCompany: '',
+                clientCompany: '',
+                supervisoryCompany: '',
+                designCompany: '',
+                constructionType: '',
+                buildings: []
+            }
+        };
+        this.projectId = '';
+        this.project = Object.assign({}, this.defaultProject);
+        this.selectedBuildingIdx = 0;
+        this.constructionTypeList = [];
+        this.selectedChecklist = {};
+        this.selectedConstructionTypeId = '';
+        this.fromDate = '2024-01-01';
+        this.toDate = '2026-12-31';
+        this.selectedFromDate = '';
+        this.selectedToDate = '';
+        this.timeScale = 'week-day';
+        this.extendGridLines = false;
+        this.columnConfigProvider = function () {
+            return [
+                { name: 'title', label: i18next.t('label.gantt-task-title') || 'title', visible: true, width: 150, order: 1 },
+                {
+                    name: 'startDate',
+                    label: i18next.t('label.gantt-task-start-date') || 'start date',
+                    visible: true,
+                    width: 100,
+                    order: 2
+                },
+                {
+                    name: 'resources',
+                    label: i18next.t('label.gantt-task-resources') || 'resources',
+                    visible: true,
+                    width: 100,
+                    order: 3
+                },
+                {
+                    name: 'duration',
+                    label: i18next.t('label.gantt-task-duration') || 'duration',
+                    visible: true,
+                    width: 30,
+                    order: 4
+                }
+            ];
+        };
+    }
+    get context() {
+        return {
+            title: '공정표'
+        };
+    }
+    render() {
+        var _a;
+        return html `
+      <div header>
+        <h2>
+          <md-icon slot="icon" back @click=${() => history.back()}>arrow_back</md-icon>
+          ${this.project.name}
+        </h2>
+        <div button-container>
+          <md-elevated-button @click=${this._openUploadSchedulePopup}>
+            <md-icon slot="icon">event_note</md-icon>공정표 관리
+          </md-elevated-button>
+        </div>
+      </div>
+
+      <div body>
+        <ox-gantt
+          from-date=${new Date(this.fromDate).toISOString().split('T')[0]}
+          to-date=${new Date(this.toDate).toISOString().split('T')[0]}
+          .timeScale=${this.timeScale}
+          .tasks=${this.tasks}
+          @date-range-selected=${this.onRangeSelected}
+          @task-clicked=${(e) => {
+            console.log('task-clicked', e.detail);
+        }}
+          ?extend-grid-lines=${this.extendGridLines}
+          .columnConfigProvider=${this.columnConfigProvider}
+          .colorProvider=${task => {
+            return task.style || 'gray';
+        }}
+        >
+        </ox-gantt>
+        <div select-container>
+          <div date>
+            <span name>기간선택</span>
+            <div @change=${() => this.onChangePeriodRange()}>
+              <input type="date" name="startDate" project .value=${this.project.startDate || ''} max="9999-12-31" />
+              ~
+              <input type="date" name="endDate" project .value=${this.project.endDate || ''} max="9999-12-31" />
+            </div>
+          </div>
+          <div construction-list-container>
+            ${(_a = this.constructionTypeList) === null || _a === void 0 ? void 0 : _a.map((constructionType) => {
+            var _a, _b, _c;
+            return html ` <md-outlined-button
+                  id=${constructionType.id}
+                  ?selected=${this.selectedConstructionTypeId === constructionType.id}
+                  ?pass=${((_a = constructionType.taskChecklistBinding) === null || _a === void 0 ? void 0 : _a.status) === BuildingInspectionStatus.PASS}
+                  ?fail=${((_b = constructionType.taskChecklistBinding) === null || _b === void 0 ? void 0 : _b.status) === BuildingInspectionStatus.FAIL}
+                  @click=${() => this.onClickTaskChecklist(constructionType)}
+                >
+                  <div icon-container>
+                    ${this._getIconHtmlByStatus((_c = constructionType.taskChecklistBinding) === null || _c === void 0 ? void 0 : _c.status)} ${constructionType.title}
+                  </div>
+                </md-outlined-button>`;
+        })}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    async pageInitialized(lifecycle) { }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            this.projectId = lifecycle.resourceId || '';
+            await this.initProject(this.projectId);
+        }
+    }
+    async initProject(projectId = '') {
+        var _a, _b;
+        const response = await client.query({
+            query: gql `
+        query Project($id: String!, $sortings: [Sorting!]) {
+          project(id: $id) {
+            id
+            name
+            startDate
+            endDate
+            rootTasks {
+              ...TaskFragment
+              children(sortings: $sortings) {
+                ...TaskFragment
+                children(sortings: $sortings) {
+                  ...TaskFragment
+                }
+              }
+            }
+            scheduleTable {
+              id
+              name
+            }
+            buildingComplex {
+              id
+              planXScale
+              planYScale
+              taskConstructorEmails
+              overallConstructorEmails
+              taskSupervisoryEmails
+              overallSupervisoryEmails
+              buildings {
+                id
+                name
+                drawing {
+                  id
+                  name
+                }
+                buildingLevels {
+                  id
+                  floor
+                  mainDrawing {
+                    id
+                    name
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        ${TaskFragment}
+      `,
+            variables: {
+                id: projectId,
+                sortings: [{ name: 'startDate' }]
+            }
+        });
+        this.project = (_a = response.data) === null || _a === void 0 ? void 0 : _a.project;
+        this.tasks = (_b = response.data) === null || _b === void 0 ? void 0 : _b.project.rootTasks;
+        if (this.project) {
+            this.fromDate = this.project.startDate || '2024-01-01'; /* TODO default: start date of this year - 3 */
+            this.toDate = this.project.endDate || '2026-12-31'; /* TODO defaule: end date of this year + 3 */
+        }
+    }
+    onChangePeriodRange() {
+        this.fromDate = this.inputStartDate.value;
+        this.toDate = this.inputEndDate.value;
+    }
+    onRangeSelected(event) {
+        var _a, _b;
+        if (event) {
+            this.selectedFromDate = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.start;
+            this.selectedToDate = (_b = event.detail) === null || _b === void 0 ? void 0 : _b.end;
+        }
+        const selectedFromDate = new Date(this.selectedFromDate + 'T00:00:00.000Z');
+        const selectedToDate = new Date(this.selectedToDate + 'T23:59:59.000Z');
+        this.constructionTypeList = this.tasks.filter(constuction => {
+            const constuctionStartDate = new Date(constuction.startDate);
+            const constuctionEndDate = new Date(constuction.endDate);
+            return constuctionStartDate <= selectedToDate && constuctionEndDate >= selectedFromDate;
+        });
+    }
+    _openUploadSchedulePopup() {
+        var _a;
+        openPopup(html `<popup-task-upload
+        .projectId=${this.projectId}
+        .scheduleTable=${(_a = this.project) === null || _a === void 0 ? void 0 : _a.scheduleTable}
+        @uploaded=${() => this.initProject(this.projectId)}
+      ></popup-task-upload>`, { backdrop: true, size: 'medium', title: '공정표 업로드' });
+    }
+    async onClickTaskChecklist(constructionType) {
+        // 선택된 공종 설정
+        this.selectedConstructionTypeId = constructionType.id;
+        // 체크리스트가 있으면 수정 모드, 없으면 생성 모드
+        if (constructionType.taskChecklistBinding) {
+            const taskChecklistBinding = await this._getTaskChecklistBindingById(constructionType.taskChecklistBinding.id);
+            this.selectedChecklist = Object.assign(Object.assign({}, taskChecklistBinding.checklist), { status: taskChecklistBinding.status });
+            this._openUpdateTaskChecklistPopup(constructionType);
+        }
+        else {
+            this._openCreateChecklistPopup(constructionType);
+        }
+    }
+    _openCreateChecklistPopup(constructionType) {
+        openPopup(html `<task-checklist-create-popup
+        .projectId=${this.projectId}
+        .taskCode=${constructionType.id}
+        @requestRefresh="${async () => {
+            await this.initProject(this.projectId);
+            this.onRangeSelected(null);
+        }}"
+      ></task-checklist-create-popup>`, {
+            backdrop: true,
+            size: 'large',
+            title: `체크리스트 생성`
+        });
+    }
+    _openUpdateTaskChecklistPopup(constructionType) {
+        var _a;
+        openPopup(html `
+        <div style="overflow-y: auto; height: 100%;">
+          <task-checklist-view
+            .mode=${"EDITOR" /* ChecklistMode.EDITOR */}
+            .status=${this.selectedChecklist.status}
+            .checklist=${this.selectedChecklist || {}}
+            .buildingComplex=${((_a = this.project) === null || _a === void 0 ? void 0 : _a.buildingComplex) || {}}
+          ></task-checklist-view>
+
+          <div style="text-align: right; margin-right: 20px; margin-bottom: 15px">
+            <md-elevated-button
+              ?disabled=${this.selectedChecklist.status == BuildingInspectionStatus.PASS}
+              @click=${this._onClickModifyChecklist.bind(this)}
+            >
+              <md-icon slot="icon">assignment</md-icon>등록
+            </md-elevated-button>
+          </div>
+        </div>
+      `, { backdrop: true, size: 'large', title: constructionType.title });
+    }
+    _onClickModifyChecklist() {
+        this.validateChecklist(this.selectedChecklist);
+    }
+    async validateChecklist(checklist) {
+        var _a, _b;
+        try {
+            const result = await verifyBiometric();
+            if (result.verified) {
+                console.log('Verification successful. Proceeding with sensitive action.');
+            }
+            else {
+                notify({ message: 'Verification failed:' + result.message });
+                return;
+            }
+        }
+        catch (error) {
+            notify({ message: 'Error during biometric verification:' + error });
+            return;
+        }
+        const response = await client.mutate({
+            mutation: gql `
+        mutation UpdateTaskChecklist($taskChecklist: UpdateTaskChecklistSubmitType!) {
+          updateTaskChecklist(taskChecklist: $taskChecklist)
+        }
+      `,
+            variables: {
+                taskChecklist: {
+                    checklistId: checklist.id,
+                    checklist: {
+                        id: checklist.id,
+                        overallConstructorSignature: checklist.overallConstructorSignature,
+                        taskConstructorSignature: checklist.taskConstructorSignature,
+                        overallSupervisorySignature: checklist.overallSupervisorySignature,
+                        taskSupervisorySignature: checklist.taskSupervisorySignature
+                    },
+                    checklistItem: checklist.checklistItems.map(item => ({
+                        id: item.id,
+                        constructionConfirmStatus: item.constructionConfirmStatus,
+                        supervisoryConfirmStatus: item.supervisoryConfirmStatus
+                    }))
+                }
+            }
+        });
+        if (!response.errors) {
+            notify({ message: '검측 요청서를 등록하였습니다.' });
+            await this.initProject(this.projectId);
+            this.onRangeSelected(null);
+            history.back();
+        }
+        else {
+            notify({ message: ((_b = (_a = response.errors) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) || '검측 요청서 등록에 실패하였습니다.', level: 'error' });
+        }
+    }
+    _getIconHtmlByStatus(status) {
+        if (!status)
+            return '';
+        if (status == BuildingInspectionStatus.WAIT || status == BuildingInspectionStatus.OVERALL_WAIT) {
+            return html `<md-icon request>frame_inspect</md-icon>`;
+        }
+        if (status == BuildingInspectionStatus.REQUEST || status == BuildingInspectionStatus.OVERALL_REQUEST) {
+            return html `<md-icon request>exclamation</md-icon>`;
+        }
+        if (status == BuildingInspectionStatus.PASS) {
+            return html `<md-icon pass>check</md-icon>`;
+        }
+        return html `<md-icon fail>close</md-icon>`;
+    }
+    async _getTaskChecklistBindingById(id) {
+        var _a;
+        const response = await client.query({
+            query: gql `
+        query TaskChecklistBinding($id: String!) {
+          taskChecklistBinding(id: $id) {
+            id
+            status
+
+            checklist {
+              id
+              name
+              constructionType
+              constructionDetailType
+              location
+              inspectionParts
+              documentNo
+              constructionInspectionDate
+              supervisorInspectionDate
+              overallConstructorSignature
+              taskConstructorSignature
+              overallSupervisorySignature
+              taskSupervisorySignature
+
+              checklistItems {
+                id
+                name
+                sequence
+                mainType
+                detailType
+                inspctionCriteria
+                constructionConfirmStatus
+                supervisoryConfirmStatus
+                checklistItemCommentCount
+                checklistItemAttachmentCount
+              }
+            }
+
+            manager {
+              userId
+              name
+            }
+          }
+        }
+      `,
+            variables: { id }
+        });
+        if (response.errors)
+            return;
+        return ((_a = response.data) === null || _a === void 0 ? void 0 : _a.taskChecklistBinding) || {};
+    }
+};
+ProjectTask.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        color: #4e5055;
+
+        width: 100%;
+        background-color: var(--md-sys-color-background, #f6f6f6);
+        overflow-y: auto;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+
+      *[bold] {
+        font-weight: bold;
+      }
+
+      div[header] {
+        display: flex;
+        margin: 0px var(--spacing-large, 12px);
+
+        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] {
+          display: flex;
+          align-items: center;
+          justify-content: end;
+          flex: 0.5;
+
+          md-elevated-button {
+            margin: 0px;
+            margin-left: var(--spacing-small, 4px);
+
+            --md-elevated-button-container-height: 32px;
+            --md-elevated-button-label-text-size: 16px;
+            --md-elevated-button-container-color: #0595e5;
+
+            --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-icon-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);
+          }
+        }
+      }
+
+      div[body] {
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+        margin: var(--spacing-large, 12px);
+        margin-top: 0;
+        gap: var(--spacing-medium, 8px);
+        overflow: hidden;
+
+        h3 {
+          color: #2e79be;
+          font-size: 16px;
+          margin: 0px;
+        }
+
+        & > div {
+          display: flex;
+          border-radius: 5px;
+        }
+
+        ox-gantt {
+          flex: 1;
+          box-sizing: border-box;
+          overflow: hidden;
+
+          background-color: var(--md-sys-color-primary-container);
+          color: var(--md-sys-color-on-primary-container);
+        }
+
+        div[select-container] {
+          gap: var(--spacing-medium, 8px);
+
+          div[date] {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background-color: #2ea4df1a;
+            border: 1px solid #2ea4df33;
+            border-radius: 5px;
+            gap: var(--spacing-medium, 8px);
+            padding: 12px 36px 12px 15px;
+
+            span[name] {
+              font-size: 16px;
+              font-weight: bold;
+            }
+
+            input[type='date'] {
+              border: 1px solid rgba(51, 51, 51, 0.2);
+              padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+              border-radius: 5px;
+            }
+          }
+
+          div[construction-list-container] {
+            flex: 1;
+            display: flex;
+            border-radius: 5px;
+            border: 1px solid #cccccc80;
+            background-color: #fff;
+            padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+            gap: var(--spacing-medium, 8px);
+            overflow-x: auto;
+
+            md-outlined-button {
+              --md-outlined-button-container-height: 30px;
+              --md-outlined-button-trailing-space: var(--spacing-medium, 8px);
+              --md-outlined-button-leading-space: var(--spacing-medium, 8px);
+              --md-outlined-button-label-text-color: #586878;
+              --md-sys-color-outline: rgba(51, 51, 51, 0.2);
+              box-shadow: 1px 1px 1px #0000001a;
+              padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+              font-weight: 700;
+
+              &[selected] {
+                --md-outlined-button-label-text-color: #0595e5 !important;
+                --md-sys-color-outline: #0595e5 !important;
+                background-color: #0595e51a !important;
+              }
+
+              &[pass] {
+                --md-outlined-button-label-text-color: #4bbb4a;
+                --md-sys-color-outline: #4bbb4a;
+                background-color: #4bbb4a1a;
+              }
+              &[fail] {
+                --md-outlined-button-label-text-color: #ff4444;
+                --md-sys-color-outline: #ff4444;
+                background-color: #ff44441a;
+              }
+            }
+
+            div[icon-container] {
+              display: flex;
+              align-items: center;
+              gap: 4px;
+
+              md-icon[request],
+              md-icon[pass],
+              md-icon[fail] {
+                width: 16px;
+                height: 16px;
+                margin-right: 4px;
+                border-radius: 3px;
+                font-size: 14px;
+                font-weight: 700;
+                color: #fff;
+              }
+              md-icon[request] {
+                background-color: #4e5055;
+              }
+              md-icon[pass] {
+                background-color: #4bbb4a;
+              }
+              md-icon[fail] {
+                background-color: #ff4444;
+              }
+            }
+          }
+        }
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], ProjectTask.prototype, "projectId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectTask.prototype, "project", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], ProjectTask.prototype, "selectedBuildingIdx", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectTask.prototype, "tasks", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectTask.prototype, "constructionTypeList", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectTask.prototype, "selectedChecklist", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], ProjectTask.prototype, "selectedConstructionTypeId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectTask.prototype, "fromDate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectTask.prototype, "toDate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectTask.prototype, "selectedFromDate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectTask.prototype, "selectedToDate", void 0);
+__decorate([
+    query('input[name="startDate"]'),
+    __metadata("design:type", HTMLInputElement)
+], ProjectTask.prototype, "inputStartDate", void 0);
+__decorate([
+    query('input[name="endDate"]'),
+    __metadata("design:type", HTMLInputElement)
+], ProjectTask.prototype, "inputEndDate", void 0);
+ProjectTask = __decorate([
+    customElement('project-task')
+], ProjectTask);
+export { ProjectTask };
+//# sourceMappingURL=project-task.js.map