@dssp/project 0.0.8 → 0.0.10

package/client/pages/project/project-detail.ts

@@ -3,19 +3,21 @@ import '@material/web/button/elevated-button.js'
 import '@material/web/textfield/outlined-text-field.js'
 import '@material/web/button/outlined-button.js'
 
-import { PageView } from '@operato/shell'
+import { navigate, 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 { ScrollbarStyles } from '@operato/styles'
 
 import gql from 'graphql-tag'
-import { Project } from './project-list'
+import { BUILDING_INSPECTION_STATUS, BuildingInspection, BuildingInspectionStatus, Project } from './project-list'
 import _getWeather from '../lib/waether'
 import '@operato/chart/ox-progress-circle.js'
 
 export interface InspectionSummary {
+  wait: number
   request: number
   pass: number
   fail: number
@@ -31,6 +33,7 @@ interface Weather {
 @customElement('project-detail')
 export class ProjectDetail extends ScopedElementsMixin(PageView) {
   static styles = [
+    ScrollbarStyles,
     css`
       :host {
         display: grid;
@@ -98,6 +101,11 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
           color: #2e79be;
           font-size: 18px;
           margin: 0px;
+
+          a {
+            text-decoration: none;
+            color: #2e79be;
+          }
         }
 
         & > div {
@@ -167,8 +175,6 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
           }
 
           div[right-top] {
-            flex: 3;
-
             div[state] {
               display: grid;
               grid-template-columns: 0.95fr 0.95fr 1.1fr;
@@ -210,7 +216,7 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
             }
             div[inspection] {
               display: grid;
-              grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr;
+              grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 0.9fr;
               margin-top: 5px;
               background: #f6f6f6;
               border-radius: 7px;
@@ -260,8 +266,6 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
           }
 
           div[right-bottom] {
-            flex: 2;
-
             div[table-container] {
               width: 100%;
               height: 15rem;
@@ -295,6 +299,7 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
             thead th {
               padding: 5px;
               font-size: 15px;
+              text-wrap: pretty;
             }
 
             tbody td {
@@ -304,7 +309,28 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
               white-space: nowrap;
               text-overflow: ellipsis;
               overflow: hidden;
-              font-size: 15px;
+              font-size: 13px;
+            }
+
+            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;
+
+              &[red] {
+                --md-elevated-button-container-color: #e15757;
+              }
             }
           }
         }
@@ -334,7 +360,9 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
 
   @state() projectId: string = ''
   @state() project: Project = { ...this.defaultProject }
+  @state() buildingInspections: BuildingInspection[] = []
   @state() inspectionSummary: InspectionSummary = {
+    wait: 0,
     request: 0,
     pass: 0,
     fail: 0
@@ -376,7 +404,7 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
               <div>
                 <div row>
                   <span>- 면적 : </span>
-                  <span>${this.project.buildingComplex?.area}</span>
+                  <span>${this.project.buildingComplex?.area?.toLocaleString()}</span>
                 </div>
                 <div row>
                   <span>- 착공 ~ 준공 : </span>
@@ -408,11 +436,11 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
               </div>
               <div row>
                 <span>- 공사금액 : </span>
-                <span>${this.project.buildingComplex?.constructionCost}</span>
+                <span>${this.project.buildingComplex?.constructionCost?.toLocaleString()} 원</span>
               </div>
               <div row>
                 <span>- 세대수 : </span>
-                <span>${this.project.buildingComplex?.householdCount}</span>
+                <span>${this.project.buildingComplex?.householdCount?.toLocaleString()}</span>
               </div>
               <div row>
                 <span>- 기타 : </span>
@@ -445,7 +473,7 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
             <div state>
               <span progress>
                 <ox-progress-circle
-                  .value=${70}
+                  .value=${this.project.totalProgress}
                   titleText="전체"
                   suffix="%"
                   fontSize="27px"
@@ -460,8 +488,9 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
               </span>
               <span progress>
                 <ox-progress-circle
-                  .value=${30.4}
+                  .value=${this.project.weeklyProgress}
                   titleText="주간"
+                  suffix="%"
                   fontSize="27px"
                   fontColor="#4E5055"
                   borderStyle="none"
@@ -475,7 +504,7 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
               <span weather>
                 <div bold>현장현황</div>
                 <div>
-                  <span><md-icon slot="icon">rainy</md-icon> 강수확률</span>
+                  <span><md-icon slot="icon">rainy</md-icon>강수확률</span>
                   <span bold>${this.weather.rain}%</span>
                 </div>
                 <div>
@@ -499,6 +528,10 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
               </span>
               <span>
                 <div>검측요청</div>
+                <div bold>${this.inspectionSummary.wait}</div>
+              </span>
+              <span>
+                <div>검측대기</div>
                 <div bold>${this.inspectionSummary.request}</div>
               </span>
               <span>
@@ -517,25 +550,31 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
           </div>
 
           <div right-bottom>
-            <h3>기타 사항</h3>
+            <h3>검측 현황</h3>
             <div table-container>
               <hr />
               <table>
                 <thead>
                   <tr>
-                    <th width="20%">검측 위치</th>
-                    <th width="20%">공종</th>
-                    <th width="40%">내용</th>
-                    <th width="20%">검측결과</th>
+                    <th width="5%">순번</th>
+                    <th width="10%">검측 위치</th>
+                    <th width="10%">공종</th>
+                    <th width="20%">내용</th>
+                    <th width="15%">검측 요청일</th>
+                    <th width="10%">검측 결과</th>
+                    <th width="15%">검측 결과 데이터</th>
                   </tr>
                 </thead>
                 <tbody>
-                  ${[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1].map(inspection => {
-                    return html`<tr>
-                      <td>101동 3층</td>
-                      <td bold>단열공사</td>
-                      <td>단열재 시공 층간 차음재 시공 벽돌/블록 및 ALC 패널 공사</td>
-                      <td bold>검측완료</td>
+                  ${this.buildingInspections.map((inspection, idx) => {
+                    return html` <tr @click=${() => this._onClickInspection(inspection.id || '')}>
+                      <td>${idx + 1}</td>
+                      <td>${inspection?.buildingLevel?.building?.name} ${inspection?.buildingLevel?.floor}층</td>
+                      <td bold>${inspection.checklist?.constructionType}</td>
+                      <td>${inspection.checklist?.inspectionParts?.join(', ') || ''}</td>
+                      <td>${this._formatDate(inspection.requestDate)}</td>
+                      <td bold>${inspection.status && BUILDING_INSPECTION_STATUS[inspection.status]}</td>
+                      <td>ㅁㅁㅁㅁㅁㅁ</td>
                     </tr>`
                   })}
                 </tbody>
@@ -552,14 +591,14 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
   async pageUpdated(changes: any, lifecycle: PageLifecycle) {
     if (this.active) {
       this.projectId = lifecycle.resourceId || ''
-      await this.initProject(this.projectId)
+      await this.initProject(lifecycle.resourceId)
     }
   }
 
   async initProject(projectId: string = '') {
     const response = await client.query({
       query: gql`
-        query Project($id: String!, $projectId: String!) {
+        query Project($id: String!, $projectId: String!, $params: BuildingInspectionsOfProject!) {
           project(id: $id) {
             id
             name
@@ -603,16 +642,42 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
             }
           }
 
-          inspectionSummary(projectId: $projectId) {
+          inspectionSummary: buildingInspectionSummaryOfProject(projectId: $projectId) {
+            wait
             request
             pass
             fail
           }
+
+          buildingInspectionsOfProject(params: $params) {
+            items {
+              id
+              status
+              requestDate
+              buildingLevel {
+                floor
+                building {
+                  name
+                }
+              }
+              checklist {
+                name
+                constructionType
+                constructionDetailType
+                inspectionParts
+              }
+            }
+            total
+          }
         }
       `,
       variables: {
         id: projectId,
-        projectId
+        projectId,
+        params: {
+          projectId,
+          limit: 20
+        }
       }
     })
 
@@ -620,12 +685,26 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
 
     this.project = response.data?.project || {}
     this.inspectionSummary = response.data?.inspectionSummary || {}
+    this.buildingInspections = response.data?.buildingInspectionsOfProject?.items || []
 
     const { latitude, longitude } = this.project?.buildingComplex
     if (latitude && longitude) {
       this.weather = await _getWeather(latitude, longitude)
     }
+  }
+
+  private _onClickInspection(buildingInspectionId: string) {
+    navigate(`building-inspection-detail-drawing/${buildingInspectionId}`)
+  }
 
-    console.log('init project : ', this.project)
+  private _formatDate(date: Date | undefined) {
+    return date
+      ? new Intl.DateTimeFormat('en-CA', {
+          timeZone: 'Asia/Seoul',
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit'
+        }).format(new Date(date))
+      : ''
   }
 }

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

@@ -10,14 +10,21 @@ import { Attachment } from '@things-factory/attachment-base'
 import type { FileUpload } from 'graphql-upload/GraphQLUpload.js'
 
 export enum ProjectStatus {
-  'PROCEEDING' = '10',
-  'COMPLICATED' = '20'
+  'ONGOING' = '10',
+  'COMPLETED' = '20'
 }
-export enum InspectionStatus {
+export enum BuildingInspectionStatus {
+  WAIT = 'WAIT',
   REQUEST = 'REQUEST',
   PASS = 'PASS',
   FAIL = 'FAIL'
 }
+export const BUILDING_INSPECTION_STATUS = {
+  [BuildingInspectionStatus.WAIT]: '검측 대기',
+  [BuildingInspectionStatus.REQUEST]: '검측 요청',
+  [BuildingInspectionStatus.PASS]: '합격',
+  [BuildingInspectionStatus.FAIL]: '불합격'
+}
 
 export interface Project {
   id?: string
@@ -78,17 +85,38 @@ export interface BuildingLevel {
   rebarDistributionDrawing?: Attachment
   rebarDistributionDrawingThumbnail?: string
   rebarDistributionDrawingUpload?: FileUpload
+  building?: Building
   buildingInspections?: BuildingInspection[]
 }
 
 export interface BuildingInspection {
   id?: string
-  indexX?: number
-  indexY?: number
-  status?: InspectionStatus
-  detail?: string
   attatchments?: Attachment[]
   // buildingInspectionAttachments?: BuildingInspectionAttachment[]
+  status?: BuildingInspectionStatus
+  requestDate?: Date
+  buildingLevel?: BuildingLevel
+  checklist?: Checklist
+  createdAt?: Date
+  updatedAt?: Date
+  deletedAt?: Date
+}
+
+export interface Checklist {
+  id: string
+  name?: string
+  documentNo?: string
+  constructionType?: string
+  constructionDetailType?: string
+  location?: string
+  constructionInspectorDate?: Date
+  supervisorInspectorDate?: Date
+  overallConstructorSignature?: string
+  taskConstructorSignature?: string
+  overallSupervisorySignature?: string
+  taskSupervisorySignature?: string
+  inspectionParts?: string[]
+  // checklistItems?: ChecklistItem[]
 }
 
 @customElement('project-list')
@@ -319,8 +347,8 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
   async getProjectList() {
     const response = await client.query({
       query: gql`
-        query Projects($projectName: String!) {
-          projects(projectName: $projectName) {
+        query Projects($filters: [Filter!]) {
+          projects(filters: $filters) {
             items {
               id
               name
@@ -346,7 +374,15 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
         }
       `,
       variables: {
-        projectName: this.projectName || ''
+        filters: this.projectName
+          ? [
+              {
+                name: 'name',
+                operator: 'search',
+                value: `%${this.projectName}%`
+              }
+            ]
+          : []
       }
     })
 

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

@@ -236,8 +236,8 @@ export class ProjectScheduleListPage extends ScopedElementsMixin(PageView) {
   async getProjectList() {
     const response = await client.query({
       query: gql`
-        query Projects($projectName: String!) {
-          projects(projectName: $projectName) {
+        query Projects($filters: [Filter!]) {
+          projects(filters: $filters) {
             items {
               id
               name
@@ -263,7 +263,15 @@ export class ProjectScheduleListPage extends ScopedElementsMixin(PageView) {
         }
       `,
       variables: {
-        projectName: this.projectName || ''
+        filters: this.projectName
+          ? [
+              {
+                name: 'name',
+                operator: 'search',
+                value: `%${this.projectName}%`
+              }
+            ]
+          : []
       }
     })