@dssp/project 1.0.0-alpha.0 → 1.0.0-alpha.14

package/client/pages/project/popup/popup-project-create.ts

@@ -1,147 +0,0 @@
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { client } from '@operato/graphql'
-import { notify } from '@operato/layout'
-import gql from 'graphql-tag'
-import '@material/web/textfield/outlined-text-field.js'
-import '@material/web/button/elevated-button.js'
-
-@customElement('popup-project-create')
-export class PopupProjectCreate extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: #fff;
-        width: 100%;
-      }
-
-      div[body] {
-        flex: 1;
-
-        label {
-          color: #4e5055;
-          font-size: 16px;
-        }
-
-        div[input-container] {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-top: 22px;
-
-          md-outlined-text-field {
-            width: 60%;
-            margin-left: 15px;
-
-            --md-outlined-text-field-container-shape: 9px;
-            --md-sys-color-primary: #586878;
-            --md-sys-color-surface-container-highest: transparent;
-            --md-outlined-text-field-label-text-color: #999999;
-            --md-outlined-text-field-input-text-line-height: 20px;
-            --md-outlined-text-field-input-text-size: 16px;
-            --md-outlined-field-bottom-space: 10px;
-            --md-outlined-field-top-space: 10px;
-          }
-        }
-
-        div[button-container] {
-          margin-top: 50px;
-          margin-bottom: 20px;
-          text-align: center;
-
-          md-elevated-button {
-            margin: 0px 5px;
-
-            --md-elevated-button-container-height: 40px;
-            --md-elevated-button-container-color: #fff;
-            --md-elevated-button-label-text-size: 16px;
-          }
-          md-elevated-button:first-child {
-            --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;
-          }
-        }
-      }
-    `
-  ]
-
-  @state() private projectName: string = ''
-  @property({ type: Function }) private refreshFn!: Function
-
-  render() {
-    return html`
-      <div body>
-        <div input-container>
-          <label>프로젝트 이름</label>
-          <md-outlined-text-field
-            name="projectName"
-            type="text"
-            placeholder="신규 프로젝트명"
-            .value=${this.projectName}
-            @input=${this._onInputChange}
-          >
-          </md-outlined-text-field>
-        </div>
-
-        <div button-container>
-          <md-elevated-button @click=${this._createProject}>
-            <md-icon slot="icon">add</md-icon>프로젝트 생성
-          </md-elevated-button>
-          <md-elevated-button @click=${this._close}> <md-icon slot="icon">close</md-icon>취소 </md-elevated-button>
-        </div>
-      </div>
-    `
-  }
-
-  // 프로젝트 생성
-  private async _createProject() {
-    if (!this.projectName) {
-      notify({ level: 'warn', message: '프로젝트 이름은 필수 값 입니다.' })
-      return
-    }
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation CreateProject($project: NewProject!) {
-          response: createProject(project: $project) {
-            id
-          }
-        }
-      `,
-      variables: {
-        project: {
-          name: this.projectName
-        }
-      }
-    })
-
-    if (!response.errors) {
-      notify({ message: '저장되었습니다.' })
-    }
-
-    // 설정 정보 리스트 다시 조회
-    this.refreshFn()
-
-    // 팝업 템플릿을 닫기 위한 동작
-    history.back()
-  }
-
-  private _close() {
-    history.back()
-  }
-
-  // Input 요소의 값이 변경될 때 호출되는 콜백 함수
-  private _onInputChange(event: InputEvent) {
-    const target = event.target as HTMLInputElement
-    this.projectName = target.value
-  }
-}

package/client/pages/project/popup/popup-schedule-upload.ts

@@ -1,102 +0,0 @@
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { client } from '@operato/graphql'
-import { notify } from '@operato/layout'
-import gql from 'graphql-tag'
-import { Attachment } from '@things-factory/attachment-base'
-
-@customElement('popup-schedule-upload')
-export class PopupScheduleUpload extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: #fff;
-        width: 100%;
-      }
-
-      div[body] {
-        flex: 1;
-
-        div[input-container] {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 25px;
-          background-color: #f7f7f7;
-          padding: 35px 27px 27px 27px;
-
-          ox-input-file {
-            height: 100px;
-            width: 120px;
-            line-height: 100%;
-          }
-        }
-
-        div[button-container] {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-top: 20px;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) private scheduleTable: Attachment | undefined
-  @property({ type: String }) private projectId: string | undefined
-
-  render() {
-    const icon = this.scheduleTable ? '' : 'upload'
-    const description = this.scheduleTable?.name ? ' ' : '공정표 업로드'
-
-    return html`
-      <div body>
-        <div input-container>
-          <ox-input-file
-            icon=${icon}
-            label=${this.scheduleTable?.name || ''}
-            description=${description}
-            @change=${this._onChangeAttachment.bind(this)}
-          ></ox-input-file>
-        </div>
-
-        <div button-container>
-          <md-outlined-button @click=${this._close}><md-icon slot="icon">cancel</md-icon>취소</md-outlined-button>
-        </div>
-      </div>
-    `
-  }
-
-  private _close() {
-    history.back()
-  }
-
-  // 공정표 업로드
-  async _onChangeAttachment(e: CustomEvent) {
-    const file = e.detail[0] || null
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation UploadProjectScheduleTable($param: UploadProjectScheduleTable!) {
-          uploadProjectScheduleTable(param: $param)
-        }
-      `,
-      variables: {
-        param: {
-          projectId: this.projectId,
-          scheduleTable: file
-        }
-      },
-      context: {
-        hasUpload: true
-      }
-    })
-
-    if (!response.errors) {
-      notify({ message: '공정표가 업로드 되었습니다.' })
-      this.dispatchEvent(new CustomEvent('uploaded'))
-    }
-  }
-}

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

@@ -1,281 +0,0 @@
-import '@material/web/icon/icon.js'
-
-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, ProjectState } from './project-list'
-
-@customElement('project-completed-list')
-export class ProjectCompletedListPage 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;
-          }
-          img[project-img][no-image] {
-            object-fit: contain;
-            opacity: 0.5;
-          }
-
-          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: #1bb40133;
-                --md-sys-color-surface-container-highest: #0595e533;
-                --md-linear-progress-track-color: #1bb4011a;
-              }
-
-              span {
-                position: absolute;
-                top: 0;
-                left: 12px;
-                font-size: 12px;
-                font-weight: bold;
-                color: #1bb401;
-
-                &: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-detail/${project.id}`}>
-                <img
-                  ?no-image=${!project.mainPhoto?.fullpath}
-                  project-img
-                  src=${project.mainPhoto?.fullpath || '/assets/images/no-image.png'}
-                />
-
-                <span project-info>
-                  <div name>${project.name}</div>
-                  <div content>${project.buildingComplex.address}</div>
-                  <div content>면적: ${project.buildingComplex?.area?.toLocaleString() || ''}㎡</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>시공사: ${project.buildingComplex.constructionCompany}</div>
-                  <div>건설구분: ${project.buildingComplex.constructionType}</div>
-                  <div>세대수: ${project.buildingComplex?.householdCount?.toLocaleString() || ''}세대</div>
-                  <div>기타: ${project.buildingComplex.etc}</div>
-                </span>
-              </a>
-            </div>
-          `
-        })}
-      </div>
-    `
-  }
-
-  async pageUpdated(changes: any, lifecycle: any) {
-    if (this.active) {
-      this.getProjectList()
-    }
-  }
-
-  async getProjectList() {
-    const response = await client.query({
-      query: gql`
-        query Projects($filters: [Filter!]) {
-          projects(filters: $filters) {
-            items {
-              id
-              name
-              startDate
-              endDate
-              mainPhoto {
-                fullpath
-              }
-              totalProgress
-              weeklyProgress
-              kpi
-              inspPassRate
-              robotProgressRate
-              structuralSafetyRate
-              buildingComplex {
-                address
-                area
-                clientCompany
-                constructionCompany
-                constructionType
-                householdCount
-                etc
-              }
-            }
-            total
-          }
-        }
-      `,
-      variables: {
-        filters: [
-          {
-            name: 'name',
-            operator: 'search',
-            value: `%${this.projectName}%`
-          },
-          {
-            name: 'state',
-            operator: 'eq',
-            value: ProjectState.COMPLETED
-          }
-        ]
-      }
-    })
-
-    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()
-    }
-  }
-}