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

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

@@ -1,422 +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 { openPopup } from '@operato/layout';
-import gql from 'graphql-tag';
-import { ScrollbarStyles } from '@operato/styles';
-import '@operato/gantt/ox-gantt.js';
-import './popup/popup-schedule-upload';
-import './popup/checklist/schedule-checklist-create-popup';
-const TaskFragment = gql `
-  fragment TaskFragment on Task {
-    type
-    title: name
-    id: code
-    duration
-    startDate
-    endDate
-    dependsOn
-    progress
-    style
-    resources {
-      type
-      allocated
-    }
-  }
-`;
-let ProjectSchedule = class ProjectSchedule 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.fromDate = '2024-01-01';
-        this.toDate = '2026-12-31';
-        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>${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) => html ` <md-outlined-button id=${constructionType.id} @click=${() => this.onConstructionTypeClick(constructionType)}
-                  >${constructionType.title}</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
-              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 */
-        }
-        console.log('init project : ', this.project);
-    }
-    onChangePeriodRange() {
-        this.fromDate = this.inputStartDate.value;
-        this.toDate = this.inputEndDate.value;
-    }
-    onRangeSelected(e) {
-        const selectedFromDate = new Date(e.detail.start + 'T00:00:00.000Z');
-        const selectedToDate = new Date(e.detail.end + '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-schedule-upload
-        .projectId=${this.projectId}
-        .scheduleTable=${(_a = this.project) === null || _a === void 0 ? void 0 : _a.scheduleTable}
-        @uploaded=${() => this.initProject(this.projectId)}
-      ></popup-schedule-upload>`, {
-            backdrop: true,
-            size: 'medium',
-            title: `공정표 업로드`
-        });
-    }
-    onConstructionTypeClick(constructionType) {
-        openPopup(html `<schedule-checklist-create-popup
-        .projectId=${this.projectId}
-        .taskCode=${constructionType.id}
-        @requestRefresh="${() => this.initProject(this.projectId)}"
-      ></schedule-checklist-create-popup>`, {
-            backdrop: true,
-            size: 'large',
-            title: `체크리스트 생성`
-        });
-        console.log('constructionType', constructionType);
-    }
-};
-ProjectSchedule.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 {
-          flex: 0.5;
-          color: #3f71a0;
-          font-size:18px;
-        }
-
-        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,.20);
-              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,.20);
-              box-shadow: 1px 1px 1px #0000001a;
-              padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
-              font-weight: 700;
-            }
-          }
-        }
-      }
-    `
-];
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], ProjectSchedule.prototype, "projectId", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ProjectSchedule.prototype, "project", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Number)
-], ProjectSchedule.prototype, "selectedBuildingIdx", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ProjectSchedule.prototype, "tasks", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ProjectSchedule.prototype, "constructionTypeList", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ProjectSchedule.prototype, "fromDate", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ProjectSchedule.prototype, "toDate", void 0);
-__decorate([
-    query('input[name="startDate"]'),
-    __metadata("design:type", HTMLInputElement)
-], ProjectSchedule.prototype, "inputStartDate", void 0);
-__decorate([
-    query('input[name="endDate"]'),
-    __metadata("design:type", HTMLInputElement)
-], ProjectSchedule.prototype, "inputEndDate", void 0);
-ProjectSchedule = __decorate([
-    customElement('project-schedule')
-], ProjectSchedule);
-export { ProjectSchedule };
-//# sourceMappingURL=project-schedule.js.map

package/dist-client/pages/project/project-schedule.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"project-schedule.js","sourceRoot":"","sources":["../../../client/pages/project/project-schedule.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/button/filled-button.js'\nimport '@material/web/button/outlined-button.js'\n\nimport { PageView } from '@operato/shell'\nimport { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'\nimport { css, html } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\nimport gql from 'graphql-tag'\nimport { Project } from './project-list'\nimport { keyed } from 'lit/directives/keyed.js'\nimport { ScrollbarStyles } from '@operato/styles'\nimport '@operato/gantt/ox-gantt.js'\nimport './popup/popup-schedule-upload'\nimport './popup/checklist/schedule-checklist-create-popup'\n\nconst TaskFragment = gql`\n  fragment TaskFragment on Task {\n    type\n    title: name\n    id: code\n    duration\n    startDate\n    endDate\n    dependsOn\n    progress\n    style\n    resources {\n      type\n      allocated\n    }\n  }\n`\n\n@customElement('project-schedule')\nexport class ProjectSchedule extends ScopedElementsMixin(PageView) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        color: #4e5055;\n\n        width: 100%;\n        background-color: var(--md-sys-color-background, #f6f6f6);\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      *[bold] {\n        font-weight: bold;\n      }\n\n      div[header] {\n        display: flex;\n        margin: 0px var(--spacing-large, 12px);\n\n        h2 {\n          flex: 0.5;\n          color: #3f71a0;\n          font-size:18px;\n        }\n\n        div[button-container] {\n          display: flex;\n          align-items: center;\n          justify-content: end;\n          flex: 0.5;\n\n          md-elevated-button {\n            margin: 0px margin-left: var(--spacing-small, 4px);\n\n            --md-elevated-button-container-height: 32px;\n            --md-elevated-button-label-text-size: 16px;\n            --md-elevated-button-container-color: #0595e5;\n\n            --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-icon-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);\n          }\n        }\n      }\n\n      div[body] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: column;\n        margin: var(--spacing-large, 12px);\n        margin-top:0;\n        gap: var(--spacing-medium, 8px);\n        overflow: hidden;\n\n        h3 {\n          color: #2e79be;\n          font-size: 16px;\n          margin: 0px;\n        }\n\n        & > div {\n          display: flex;\n          border-radius: 5px;\n        }\n\n        ox-gantt {\n          flex: 1;\n          box-sizing: border-box;\n          overflow: hidden;\n\n          background-color: var(--md-sys-color-primary-container);\n          color: var(--md-sys-color-on-primary-container);\n        }\n\n        div[select-container] {\n          gap: var(--spacing-medium, 8px);\n\n          div[date] {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #2ea4df1a;\n            border: 1px solid #2ea4df33;\n            border-radius: 5px;\n            gap: var(--spacing-medium, 8px);\n            padding: 12px 36px 12px 15px;\n\n            span[name] {\n              font-size: 16px;\n              font-weight: bold;\n            }\n\n            input[type=\"date\"] {\n              border:1px solid rgba(51,51,51,.20);\n              padding:var(--spacing-small, 4px) var(--spacing-medium, 8px);\n              border-radius: 5px;\n            }\n          }\n\n          div[construction-list-container] {\n            flex: 1;\n            display: flex;\n            border-radius: 5px;\n            border: 1px solid #cccccc80;\n            background-color: #fff;\n            padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);\n            gap: var(--spacing-medium, 8px);\n            overflow-x: auto;\n\n            md-outlined-button {\n              --md-outlined-button-container-height: 30px;\n              --md-outlined-button-trailing-space: var(--spacing-medium, 8px);\n              --md-outlined-button-leading-space: var(--spacing-medium, 8px);\n              --md-outlined-button-label-text-color: #586878;\n              --md-sys-color-outline: rgba(51,51,51,.20);\n              box-shadow: 1px 1px 1px #0000001a;\n              padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);\n              font-weight: 700;\n            }\n          }\n        }\n      }\n    `\n  ]\n\n  get context() {\n    return {\n      title: '공정표'\n    }\n  }\n\n  private defaultProject = {\n    name: '',\n    buildingComplex: {\n      address: '',\n      area: 0,\n      constructionCompany: '',\n      clientCompany: '',\n      supervisoryCompany: '',\n      designCompany: '',\n      constructionType: '',\n      buildings: []\n    }\n  }\n  @state() projectId: string = ''\n  @state() project: Project = { ...this.defaultProject }\n  @state() selectedBuildingIdx: number = 0\n  @state() tasks\n  @state() constructionTypeList = []\n\n  @state() private fromDate = '2024-01-01'\n  @state() private toDate = '2026-12-31'\n\n  @query('input[name=\"startDate\"]') inputStartDate!: HTMLInputElement\n  @query('input[name=\"endDate\"]') inputEndDate!: HTMLInputElement\n\n  private timeScale = 'week-day'\n  private extendGridLines = false\n\n  private columnConfigProvider = function () {\n    return [\n      { name: 'title', label: i18next.t('label.gantt-task-title') || 'title', visible: true, width: 150, order: 1 },\n      {\n        name: 'startDate',\n        label: i18next.t('label.gantt-task-start-date') || 'start date',\n        visible: true,\n        width: 100,\n        order: 2\n      },\n      {\n        name: 'resources',\n        label: i18next.t('label.gantt-task-resources') || 'resources',\n        visible: true,\n        width: 100,\n        order: 3\n      },\n      {\n        name: 'duration',\n        label: i18next.t('label.gantt-task-duration') || 'duration',\n        visible: true,\n        width: 30,\n        order: 4\n      }\n    ]\n  }\n\n  render() {\n    return html`\n      <div header>\n        <h2>${this.project.name}</h2>\n        <div button-container>\n          <md-elevated-button @click=${this._openUploadSchedulePopup}>\n            <md-icon slot=\"icon\">event_note</md-icon>공정표 관리\n          </md-elevated-button>\n        </div>\n      </div>\n\n      <div body>\n        <ox-gantt\n          from-date=${new Date(this.fromDate).toISOString().split('T')[0]}\n          to-date=${new Date(this.toDate).toISOString().split('T')[0]}\n          .timeScale=${this.timeScale}\n          .tasks=${this.tasks}\n          @date-range-selected=${this.onRangeSelected}\n          @task-clicked=${(e: CustomEvent) => {\n            console.log('task-clicked', e.detail)\n          }}\n          ?extend-grid-lines=${this.extendGridLines}\n          .columnConfigProvider=${this.columnConfigProvider}\n          .colorProvider=${task => {\n            return task.style || 'gray'\n          }}\n        >\n        </ox-gantt>\n        <div select-container>\n          <div date>\n            <span name>기간선택</span>\n            <div @change=${() => this.onChangePeriodRange()}>\n              <input type=\"date\" name=\"startDate\" project .value=${this.project.startDate || ''} max=\"9999-12-31\" />\n              ~\n              <input type=\"date\" name=\"endDate\" project .value=${this.project.endDate || ''} max=\"9999-12-31\" />\n            </div>\n          </div>\n          <div construction-list-container>\n            ${this.constructionTypeList?.map(\n              (constructionType: any) =>\n                html` <md-outlined-button id=${constructionType.id} @click=${() => this.onConstructionTypeClick(constructionType)}\n                  >${constructionType.title}</md-outlined-button\n                >`\n            )}\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  async pageInitialized(lifecycle: PageLifecycle) {}\n\n  async pageUpdated(changes: any, lifecycle: PageLifecycle) {\n    if (this.active) {\n      this.projectId = lifecycle.resourceId || ''\n      await this.initProject(this.projectId)\n    }\n  }\n\n  async initProject(projectId: string = '') {\n    const response = await client.query({\n      query: gql`\n        query Project($id: String!, $sortings: [Sorting!]) {\n          project(id: $id) {\n            id\n            name\n            startDate\n            endDate\n            rootTasks {\n              ...TaskFragment\n              children(sortings: $sortings) {\n                ...TaskFragment\n                children(sortings: $sortings) {\n                  ...TaskFragment\n                }\n              }\n            }\n            scheduleTable {\n              id\n              name\n            }\n            buildingComplex {\n              id\n              planXScale\n              planYScale\n              buildings {\n                id\n                name\n                drawing {\n                  id\n                  name\n                }\n                buildingLevels {\n                  id\n                  floor\n                  mainDrawing {\n                    id\n                    name\n                  }\n                }\n              }\n            }\n          }\n        }\n\n        ${TaskFragment}\n      `,\n      variables: {\n        id: projectId,\n        sortings: [{ name: 'startDate' }]\n      }\n    })\n\n    this.project = response.data?.project\n    this.tasks = response.data?.project.rootTasks\n\n    if (this.project) {\n      this.fromDate = this.project.startDate || '2024-01-01' /* TODO default: start date of this year - 3 */\n      this.toDate = this.project.endDate || '2026-12-31' /* TODO defaule: end date of this year + 3 */\n    }\n\n    console.log('init project : ', this.project)\n  }\n\n  onChangePeriodRange() {\n    this.fromDate = this.inputStartDate.value\n    this.toDate = this.inputEndDate.value\n  }\n\n  onRangeSelected(e: CustomEvent) {\n    const selectedFromDate = new Date(e.detail.start + 'T00:00:00.000Z')\n    const selectedToDate = new Date(e.detail.end + 'T23:59:59.000Z')\n\n    this.constructionTypeList = this.tasks.filter(constuction => {\n      const constuctionStartDate = new Date(constuction.startDate)\n      const constuctionEndDate = new Date(constuction.endDate)\n\n      return constuctionStartDate <= selectedToDate && constuctionEndDate >= selectedFromDate\n    })\n  }\n\n  private _openUploadSchedulePopup() {\n    openPopup(\n      html`<popup-schedule-upload\n        .projectId=${this.projectId}\n        .scheduleTable=${this.project?.scheduleTable}\n        @uploaded=${() => this.initProject(this.projectId)}\n      ></popup-schedule-upload>`,\n      {\n        backdrop: true,\n        size: 'medium',\n        title: `공정표 업로드`\n      }\n    )\n  }\n\n  private onConstructionTypeClick(constructionType: any) {\n    openPopup(\n      html`<schedule-checklist-create-popup\n        .projectId=${this.projectId}\n        .taskCode=${constructionType.id}\n        @requestRefresh=\"${() => this.initProject(this.projectId)}\"\n      ></schedule-checklist-create-popup>`,\n      {\n        backdrop: true,\n        size: 'large',\n        title: `체크리스트 생성`\n      }\n    )\n\n    console.log('constructionType', constructionType)\n  }\n}\n"]}