@dssp/project 1.0.0-y.0 → 1.0.0

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

@@ -1,686 +0,0 @@
-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