@dssp/project 0.0.36 → 1.0.0-alpha.1

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

@@ -238,7 +238,7 @@ ProjectSchedule.styles = [
         color: #4e5055;
 
         width: 100%;
-        background-color: #f7f7f7;
+        background-color: var(--md-sys-color-background, #f6f6f6);
         overflow-y: auto;
 
         --grid-record-emphasized-background-color: red;
@@ -251,11 +251,12 @@ ProjectSchedule.styles = [
 
       div[header] {
         display: flex;
-        margin: 0px 20px;
+        margin: 0px var(--spacing-large, 12px);
 
         h2 {
           flex: 0.5;
           color: #3f71a0;
+          font-size:18px;
         }
 
         div[button-container] {
@@ -265,20 +266,20 @@ ProjectSchedule.styles = [
           flex: 0.5;
 
           md-elevated-button {
-            margin: 0px 3px;
+            margin: 0px margin-left: var(--spacing-small, 4px);
 
-            --md-elevated-button-container-height: 35px;
+            --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: #fff;
-            --md-elevated-button-hover-label-text-color: #fff;
-            --md-elevated-button-pressed-label-text-color: #fff;
-            --md-elevated-button-focus-label-text-color: #fff;
-            --md-elevated-button-icon-color: #fff;
-            --md-elevated-button-hover-icon-color: #fff;
-            --md-elevated-button-pressed-icon-color: #fff;
-            --md-elevated-button-focus-icon-color: #fff;
+            --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);
           }
         }
       }
@@ -288,13 +289,14 @@ ProjectSchedule.styles = [
 
         display: flex;
         flex-direction: column;
-        margin: 0px 25px 25px 25px;
-        gap: 15px;
+        margin: var(--spacing-large, 12px);
+        margin-top:0;
+        gap: var(--spacing-medium, 8px);
         overflow: hidden;
 
         h3 {
           color: #2e79be;
-          font-size: 18px;
+          font-size: 16px;
           margin: 0px;
         }
 
@@ -313,7 +315,7 @@ ProjectSchedule.styles = [
         }
 
         div[select-container] {
-          gap: 15px;
+          gap: var(--spacing-medium, 8px);
 
           div[date] {
             display: flex;
@@ -322,13 +324,19 @@ ProjectSchedule.styles = [
             background-color: #2ea4df1a;
             border: 1px solid #2ea4df33;
             border-radius: 5px;
-            gap: 12px;
+            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] {
@@ -337,17 +345,18 @@ ProjectSchedule.styles = [
             border-radius: 5px;
             border: 1px solid #cccccc80;
             background-color: #fff;
-            padding: 8px 10px;
-            gap: 10px;
+            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: 15px;
-              --md-outlined-button-leading-space: 15px;
+              --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: 8px 16px;
+              padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
               font-weight: 700;
             }
           }

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

@@ -1 +1 @@
-{"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'\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: #f7f7f7;\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 20px;\n\n        h2 {\n          flex: 0.5;\n          color: #3f71a0;\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 3px;\n\n            --md-elevated-button-container-height: 35px;\n            --md-elevated-button-label-text-size: 16px;\n            --md-elevated-button-container-color: #0595e5;\n\n            --md-elevated-button-label-text-color: #fff;\n            --md-elevated-button-hover-label-text-color: #fff;\n            --md-elevated-button-pressed-label-text-color: #fff;\n            --md-elevated-button-focus-label-text-color: #fff;\n            --md-elevated-button-icon-color: #fff;\n            --md-elevated-button-hover-icon-color: #fff;\n            --md-elevated-button-pressed-icon-color: #fff;\n            --md-elevated-button-focus-icon-color: #fff;\n          }\n        }\n      }\n\n      div[body] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: column;\n        margin: 0px 25px 25px 25px;\n        gap: 15px;\n        overflow: hidden;\n\n        h3 {\n          color: #2e79be;\n          font-size: 18px;\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: 15px;\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: 12px;\n            padding: 12px 36px 12px 15px;\n\n            span[name] {\n              font-size: 16px;\n              font-weight: bold;\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: 8px 10px;\n            gap: 10px;\n            overflow-x: auto;\n\n            md-outlined-button {\n              --md-outlined-button-container-height: 30px;\n              --md-outlined-button-trailing-space: 15px;\n              --md-outlined-button-leading-space: 15px;\n              --md-outlined-button-label-text-color: #586878;\n              box-shadow: 1px 1px 1px #0000001a;\n              padding: 8px 16px;\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}>${constructionType.title}</md-outlined-button>`\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"]}
+{"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'\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}>${constructionType.title}</md-outlined-button>`\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"]}