@dssp/project 0.0.2

package/client/pages/project/project-plan-management.ts

@@ -0,0 +1,437 @@
+import { PageView } from '@operato/shell'
+import { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'
+import { css, html } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { client } from '@operato/graphql'
+import { notify } from '@operato/layout'
+
+import gql from 'graphql-tag'
+import { Building, Project } from './project-list'
+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'
+
+@customElement('project-plan-management')
+export class ProjectPlanManagement extends ScopedElementsMixin(PageView) {
+  static styles = [
+    css`
+      :host {
+        display: grid;
+        grid-template-rows: 75px auto;
+        color: #4e5055;
+
+        width: 100%;
+        background-color: #f7f7f7;
+        overflow-y: auto;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+
+      md-outlined-text-field {
+        width: 100%;
+
+        --md-outlined-text-field-container-shape: 5px;
+        --md-sys-color-primary: #586878;
+        --md-outlined-text-field-input-text-size: 14px;
+        --md-outlined-field-bottom-space: 4px;
+        --md-outlined-field-top-space: 4px;
+      }
+
+      ox-input-image {
+        width: 100px;
+        height: 100px;
+      }
+
+      div[header] {
+        display: flex;
+        margin: 0px 20px;
+
+        h2 {
+          flex: 0.5;
+          color: #3f71a0;
+        }
+
+        div[button-container] {
+          display: flex;
+          align-items: center;
+          justify-content: end;
+          flex: 0.5;
+
+          md-elevated-button {
+            margin: 0px 3px;
+
+            --md-elevated-button-container-height: 35px;
+            --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;
+
+            &[green] {
+              --md-elevated-button-container-color: #42b382;
+            }
+          }
+        }
+      }
+
+      div[body] {
+        display: grid;
+        grid-template-rows: 240px 400px 60px;
+        margin: 0px 25px 25px 25px;
+        gap: 8px;
+
+        & > div {
+          display: grid;
+          grid-template-rows: 25px auto;
+          padding: 15px;
+          background-color: #ffffff;
+          border: 1px solid #cccccc80;
+          border-radius: 5px;
+          gap: 14px;
+
+          h3 {
+            color: #2e79be;
+            font-size: 18px;
+            margin: 0px;
+          }
+        }
+
+        & > div[building-container] > div {
+          display: flex;
+          gap: 16px;
+          overflow-x: auto;
+          overflow-y: hidden;
+
+          ox-input-file {
+            height: 120px;
+          }
+          span[building] {
+            width: 125px;
+            text-align: center;
+
+            div {
+              color: #586878;
+              margin-top: 7px;
+            }
+          }
+        }
+
+        & > div[floor-container] {
+          div[floor-title] {
+            display: flex;
+            justify-content: space-between;
+            height: fit-content;
+
+            span[building-button] {
+              display: flex;
+              max-width: 500px;
+              gap: 10px;
+              overflow-x: auto;
+              overflow-y: hidden;
+
+              md-filled-button {
+                --md-filled-button-container-color: #0595e5;
+                --md-filled-button-container-height: 30px;
+                --md-filled-button-trailing-space: 15px;
+                --md-filled-button-leading-space: 15px;
+              }
+              md-outlined-button {
+                --md-outlined-button-container-height: 30px;
+                --md-outlined-button-trailing-space: 15px;
+                --md-outlined-button-leading-space: 15px;
+              }
+            }
+          }
+
+          div[floor-plan] {
+            overflow-y: auto;
+            margin-top: 10px;
+
+            & > span {
+              width: 150px;
+              display: inline-block;
+              text-align: center;
+              margin: 0px 10px 15px 0px;
+
+              & > div {
+                margin-top: 7px;
+
+                &[no-data] {
+                  color: #f16154;
+                  font-weight: bold;
+                }
+              }
+            }
+          }
+        }
+
+        & > div[plan-scale-container] {
+          display: flex;
+
+          & > div {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-left: 10px;
+
+            md-outlined-text-field {
+              width: 100px;
+              --md-outlined-text-container-height: 30px;
+            }
+          }
+        }
+      }
+    `
+  ]
+
+  get context() {
+    return {
+      title: '도면 관리'
+    }
+  }
+
+  private defaultProject = {
+    name: '',
+    buildingComplex: {
+      address: '',
+      area: 0,
+      constructionCompany: '',
+      clientCompany: '',
+      supervisoryCompany: '',
+      designCompany: '',
+      constructionType: '',
+      buildings: []
+    }
+  }
+  @state() projectId: string = ''
+  @state() project: Project = { ...this.defaultProject }
+  @state() selectedBuildingIdx: number = 0
+
+  render() {
+    return html`
+      <div header>
+        <h2>도면 관리</h2>
+        <div button-container>
+          <md-elevated-button green @click=${this._saveProject}>
+            <md-icon slot="icon">save</md-icon>정보 저장
+          </md-elevated-button>
+          <md-elevated-button href=${`project-update/${this.project.id}`}>
+            <md-icon slot="icon">assignment</md-icon>프로젝트 정보 수정
+          </md-elevated-button>
+          <md-elevated-button href=${`project-task-update/${this.project.id}`}>
+            <md-icon slot="icon">event_note</md-icon>공정표 관리
+          </md-elevated-button>
+        </div>
+      </div>
+
+      <div body>
+        <div building-container>
+          <h3>동별 도면(BIM)</h3>
+          <div>
+            ${this.project.buildingComplex?.buildings?.map((building, idx) => {
+              return html`
+                <span building>
+                  <ox-input-file
+                    name="building-drawing"
+                    .value=${building?.drawing || undefined}
+                    label=" "
+                    description="동 도면 업로드"
+                    idx=${idx}
+                    @change=${this.onCreateAttachment.bind(this)}
+                  ></ox-input-file>
+                  <div>${building.name}</div>
+                </span>
+              `
+            })}
+          </div>
+        </div>
+
+        <div floor-container>
+          <div floor-title>
+            <h3>${this.project.buildingComplex?.buildings?.[this.selectedBuildingIdx]?.name} 층별 도면(PDF)</h3>
+            <span building-button>
+              ${this.project.buildingComplex.buildings?.map((building, idx) => {
+                return this.project.buildingComplex?.buildings?.[this.selectedBuildingIdx]?.id === building.id
+                  ? html`
+                      <md-filled-button @click=${() => this._onClickBuildingChange(idx)}>
+                        ${building.name}
+                      </md-filled-button>
+                    `
+                  : html`
+                      <md-outlined-button @click=${() => this._onClickBuildingChange(idx)}>
+                        ${building.name}
+                      </md-outlined-button>
+                    `
+              })}
+            </span>
+          </div>
+
+          <div floor-plan>
+            ${this.project.buildingComplex?.buildings?.[this.selectedBuildingIdx]?.buildingLevels?.map(
+              (buildingLevel, idx) => {
+                return html`
+                  <span plan>
+                    <ox-input-file
+                      name="building-plan"
+                      .value=${buildingLevel?.mainDrawing || undefined}
+                      label=" "
+                      description="층 도면 업로드"
+                      idx=${idx}
+                      @change=${this.onCreateAttachment.bind(this)}
+                    ></ox-input-file>
+                    <div ?no-data=${!buildingLevel?.mainDrawing}>${buildingLevel.floor}층</div>
+                  </span>
+                `
+              }
+            )}
+          </div>
+        </div>
+
+        <div plan-scale-container>
+          <h3>도면 축척 설정</h3>
+          <div>
+            <span>가로</span>
+            <md-outlined-text-field
+              type="text"
+              name="planXScale"
+              numeric
+              .value=${this.project.buildingComplex.planXScale?.toString() || ''}
+              @input=${this._onInputChange}
+              suffix-text="mm"
+            >
+            </md-outlined-text-field>
+            <span>X</span>
+            <span>세로</span>
+            <md-outlined-text-field
+              type="text"
+              name="planYScale"
+              numeric
+              .value=${this.project.buildingComplex.planYScale?.toString() || ''}
+              @input=${this._onInputChange}
+              suffix-text="mm"
+            >
+            </md-outlined-text-field>
+          </div>
+        </div>
+      </div>
+    `
+  }
+
+  async pageInitialized(lifecycle: PageLifecycle) {}
+
+  async pageUpdated(changes: any, lifecycle: PageLifecycle) {
+    if (this.active) {
+      this.projectId = lifecycle.resourceId || ''
+      await this.initProject(this.projectId)
+    }
+  }
+
+  async initProject(projectId: string = '') {
+    const response = await client.query({
+      query: gql`
+        query Project($id: String!) {
+          project(id: $id) {
+            id
+            name
+            buildingComplex {
+              id
+              planXScale
+              planYScale
+              buildings {
+                id
+                name
+                drawing {
+                  id
+                  name
+                }
+                buildingLevels {
+                  id
+                  floor
+                  mainDrawing {
+                    id
+                    name
+                  }
+                }
+              }
+            }
+          }
+        }
+      `,
+      variables: {
+        id: projectId
+      }
+    })
+
+    this.project = response.data?.project
+    this.selectedBuildingIdx = 0
+
+    console.log('init project : ', this.project)
+  }
+
+  private async _saveProject() {
+    // 첨부 파일 필드 제거 (첨부 파일은 {filename}Upload 로 전송)
+    for (let buildingKey in this.project.buildingComplex.buildings) {
+      const building = this.project.buildingComplex.buildings[buildingKey]
+      delete this.project.buildingComplex.buildings[buildingKey].drawing
+
+      for (let levelKey in building.buildingLevels) {
+        delete this.project.buildingComplex.buildings[buildingKey].buildingLevels[levelKey].mainDrawing
+      }
+    }
+
+    console.log('this.project :', this.project)
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation UpdateProjectPlan($project: ProjectPatch!) {
+          updateProjectPlan(project: $project) {
+            id
+          }
+        }
+      `,
+      variables: {
+        project: this.project
+      },
+      context: {
+        hasUpload: true
+      }
+    })
+
+    if (!response.errors) {
+      notify({ message: '저장에 성공하였습니다.' })
+    }
+  }
+
+  // Input 요소의 값이 변경될 때 호출되는 콜백 함수
+  private _onInputChange(event: InputEvent, idx: number) {
+    const target = event.target as HTMLInputElement
+    let inputVal: any = target.value
+    this.project.buildingComplex![target.name] = Number(inputVal.replace(/\D/g, ''))
+  }
+
+  // 이미지 업로드
+  async onCreateAttachment(e: CustomEvent) {
+    const target = e.target as HTMLInputElement
+    const file = e.detail[0] || null
+    const idx = Number(target.getAttribute('idx')) || 0
+
+    if (target.name === 'building-drawing') {
+      this.project.buildingComplex!.buildings![idx].drawingUpload = file
+    } else {
+      this.project.buildingComplex!.buildings![this.selectedBuildingIdx].buildingLevels![idx].mainDrawingUpload = file
+    }
+  }
+
+  _onClickBuildingChange(idx: number) {
+    this.selectedBuildingIdx = idx
+  }
+}

package/client/pages/project/project-schedule-list.ts

@@ -0,0 +1,280 @@
+import { PageView } from '@operato/shell'
+import { css, html } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { client } from '@operato/graphql'
+import gql from 'graphql-tag'
+import { Project } from './project-list'
+
+@customElement('project-schedule-list')
+export class ProjectScheduleListPage extends ScopedElementsMixin(PageView) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+
+        width: 100%;
+        height: 100%;
+        background-color: #f7f7f7;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+
+      div[header] {
+        display: flex;
+        height: 100px;
+        align-items: center;
+        background-color: #2ea4df1a;
+        border: 1px solid #2ea4df33;
+        margin: 15px 23px;
+        font-size: 18px;
+        padding: 7px;
+        border-radius: 5px;
+
+        md-filled-text-field[type='search'] {
+          margin-left: 5px;
+          margin-right: 26px;
+
+          --md-filled-text-field-container-shape: 0px;
+          --md-sys-color-primary: #006a6a;
+          --md-sys-color-surface-container-highest: transparent;
+          --md-filled-text-field-label-text-color: #999999;
+          --md-filled-text-field-input-text-color: #4e5055;
+        }
+
+        md-elevated-button[add-project] {
+          font-weight: bold;
+          font-size: 16px;
+          margin-left: 17px;
+          padding: 13px 20px;
+
+          --md-sys-color-surface-container-low: #24be7b;
+          --md-sys-color-primary: #ffffff;
+          --md-elevated-button-container-shape: 7px;
+        }
+      }
+
+      div[body] {
+        div[project-container] {
+          height: 140px;
+          margin: 17px 23px;
+          background-color: #ffffff;
+          border: 1px solid #cccccc80;
+          border-radius: 5px;
+
+          & > a {
+            display: flex;
+            width: 100%;
+            height: 100%;
+            text-decoration: none;
+            color: #000;
+          }
+
+          img[project-img] {
+            width: 285px;
+            background-color: #cccccc80;
+          }
+
+          span[project-info] {
+            flex: 0.45;
+            padding: 6px 15px;
+            font-size: 16px;
+
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            div[name] {
+              color: #2e79be;
+              font-weight: bold;
+              font-size: 19px;
+              margin-bottom: 2px;
+            }
+          }
+
+          span[project-state] {
+            flex: 0.55;
+            padding: 10px 20px;
+
+            & > div {
+              margin-bottom: 3px;
+            }
+
+            div[progress] {
+              position: relative;
+
+              md-linear-progress {
+                --md-linear-progress-track-height: 18px;
+                --md-linear-progress-active-indicator-height: 18px;
+                --md-linear-progress-track-shape: 5px;
+                --md-sys-color-primary: #0595e51a;
+                --md-sys-color-surface-container-highest: #0595e533;
+              }
+
+              span {
+                position: absolute;
+                top: 0;
+                left: 12px;
+                font-size: 12px;
+                font-weight: bold;
+                color: #2e79be;
+
+                &:last-child {
+                  left: unset;
+                  right: 12px;
+                }
+              }
+            }
+          }
+        }
+      }
+    `
+  ]
+
+  get context() {
+    return {
+      title: '진행중 프로젝트'
+    }
+  }
+
+  @state() private projectName: string = ''
+  @state() private projectList: Project[] = []
+  @state() private projectCount: number = 0
+
+  render() {
+    return html`
+      <div header>
+        <label>프로젝트 이름</label>
+        <md-filled-text-field
+          name="projectName"
+          type="search"
+          label="프로젝트 이름"
+          .value=${this.projectName}
+          @input=${this._onInputChange}
+          @keypress=${this._onKeypress}
+        >
+          <md-icon slot="leading-icon">search</md-icon>
+        </md-filled-text-field>
+
+        <strong>총 ${this.projectCount}개</strong>
+      </div>
+
+      <div body>
+        ${this.projectList?.map((project: Project) => {
+          return html`
+            <div project-container>
+              <a href=${`project-schedule/${project.id}`}>
+                <img project-img src=${project.mainPhoto?.fullpath || ''} />
+
+                <span project-info>
+                  <div name>${project.name}</div>
+                  <div content>${project.buildingComplex.address}</div>
+                  <div content>면적: ${project.buildingComplex.area}㎡</div>
+                  <div content>착공~준공: ${project.startDate}~${project.endDate}</div>
+                  <div content>발주처: <strong>${project.buildingComplex.clientCompany}</strong></div>
+                </span>
+
+                <span project-state>
+                  <div progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.totalProgress || 0}>
+                    </md-linear-progress>
+                    <span>전체</span>
+                    <span>${project.totalProgress || 0}%</span>
+                  </div>
+                  <div progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.weeklyProgress || 0}>
+                    </md-linear-progress>
+                    <span>주간</span>
+                    <span>${project.weeklyProgress || 0}%</span>
+                  </div>
+                  <div progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.kpi || 0}> </md-linear-progress>
+                    <span>KPI</span>
+                    <span>${project.kpi || 0}%</span>
+                  </div>
+                  <div progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.inspPassRate || 0}> </md-linear-progress>
+                    <span>Inspection Passing Rate</span>
+                    <span>${project.inspPassRate || 0}%</span>
+                  </div>
+                  <div progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.robotProgressRate || 0}>
+                    </md-linear-progress>
+                    <span>Robot Progress</span>
+                    <span>${project.robotProgressRate || 0}%</span>
+                  </div>
+                  <div progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.structuralSafetyRate || 0}>
+                    </md-linear-progress>
+                    <span>Structural safety</span>
+                    <span>${project.structuralSafetyRate || 0}%</span>
+                  </div>
+                </span>
+              </a>
+            </div>
+          `
+        })}
+      </div>
+    `
+  }
+
+  async pageInitialized(lifecycle: any) {
+    this.getProjectList()
+  }
+
+  async pageUpdated(changes: any, lifecycle: any) {}
+
+  async getProjectList() {
+    const response = await client.query({
+      query: gql`
+        query Projects($projectName: String!) {
+          projects(projectName: $projectName) {
+            items {
+              id
+              name
+              startDate
+              endDate
+              mainPhoto {
+                fullpath
+              }
+              totalProgress
+              weeklyProgress
+              kpi
+              inspPassRate
+              robotProgressRate
+              structuralSafetyRate
+              buildingComplex {
+                address
+                area
+                clientCompany
+              }
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        projectName: this.projectName || ''
+      }
+    })
+
+    this.projectList = response.data.projects?.items || []
+    this.projectCount = response.data.projects?.total || 0
+  }
+
+  // Input 요소의 값이 변경될 때 호출되는 콜백 함수
+  private _onInputChange(event: InputEvent) {
+    const target = event.target as HTMLInputElement
+    this[target.name] = target.value
+  }
+
+  // 검색창에서 엔터입력시 검색
+  private _onKeypress(event: KeyboardEvent) {
+    if (event.code === 'Enter') {
+      this.getProjectList()
+    }
+  }
+}