@dssp/project 0.0.18 → 0.0.20

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

@@ -0,0 +1,281 @@
+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()
+    }
+  }
+}

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

@@ -228,6 +228,12 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
                 align-items: center;
                 justify-content: center;
 
+                div[wait] {
+                  color: #4e5055;
+                }
+                div[request] {
+                  color: #2e79be;
+                }
                 div[pass] {
                   color: #1bb401;
                 }
@@ -404,7 +410,7 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
               <div>
                 <div row>
                   <span>- 면적 : </span>
-                  <span>${this.project.buildingComplex?.area?.toLocaleString()}</span>
+                  <span>${this.project.buildingComplex?.area?.toLocaleString()} ㎡</span>
                 </div>
                 <div row>
                   <span>- 착공 ~ 준공 : </span>
@@ -574,7 +580,7 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
                       <td>${inspection.checklist?.inspectionParts?.join(', ') || ''}</td>
                       <td>${this._formatDate(inspection.requestDate)}</td>
                       <td bold>${inspection.status && BUILDING_INSPECTION_STATUS[inspection.status]}</td>
-                      <td>ㅁㅁㅁㅁㅁㅁ</td>
+                      <td></td>
                     </tr>`
                   })}
                 </tbody>

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

@@ -9,7 +9,7 @@ import gql from 'graphql-tag'
 import { Attachment } from '@things-factory/attachment-base'
 import type { FileUpload } from 'graphql-upload/GraphQLUpload.js'
 
-export enum ProjectStatus {
+export enum ProjectState {
   'ONGOING' = '10',
   'COMPLETED' = '20'
 }
@@ -293,8 +293,8 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
                 <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>면적: ${project.buildingComplex?.area?.toLocaleString() || ''}㎡</div>
+                  <div content>착공~준공: ${project.startDate} ~ ${project.endDate}</div>
                   <div content>발주처: <strong>${project.buildingComplex.clientCompany}</strong></div>
                 </span>
 
@@ -338,12 +338,12 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
     `
   }
 
-  async pageInitialized(lifecycle: any) {
-    this.getProjectList()
+  async pageUpdated(changes: any, lifecycle: any) {
+    if (this.active) {
+      this.getProjectList()
+    }
   }
 
-  async pageUpdated(changes: any, lifecycle: any) {}
-
   async getProjectList() {
     const response = await client.query({
       query: gql`
@@ -374,15 +374,18 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
         }
       `,
       variables: {
-        filters: this.projectName
-          ? [
-              {
-                name: 'name',
-                operator: 'search',
-                value: `%${this.projectName}%`
-              }
-            ]
-          : []
+        filters: [
+          {
+            name: 'name',
+            operator: 'search',
+            value: `%${this.projectName}%`
+          },
+          {
+            name: 'state',
+            operator: 'eq',
+            value: ProjectState.ONGOING
+          }
+        ]
       }
     })
 

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

@@ -432,8 +432,6 @@ export class ProjectPlanManagement extends ScopedElementsMixin(PageView) {
       }
     }
 
-    console.log('upload project :', this.project)
-
     const response = await client.mutate({
       mutation: gql`
         mutation UpdateProjectPlan($project: ProjectPatch!) {

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

@@ -182,7 +182,7 @@ export class ProjectScheduleListPage extends ScopedElementsMixin(PageView) {
                 <span project-info>
                   <div name>${project.name}</div>
                   <div content>${project.buildingComplex.address}</div>
-                  <div content>면적: ${project.buildingComplex.area}㎡</div>
+                  <div content>면적: ${project.buildingComplex?.area?.toLocaleString() || ''}㎡</div>
                   <div content>착공~준공: ${project.startDate}~${project.endDate}</div>
                   <div content>발주처: <strong>${project.buildingComplex.clientCompany}</strong></div>
                 </span>
@@ -227,12 +227,12 @@ export class ProjectScheduleListPage extends ScopedElementsMixin(PageView) {
     `
   }
 
-  async pageInitialized(lifecycle: any) {
-    this.getProjectList()
+  async pageUpdated(changes: any, lifecycle: any) {
+    if (this.active) {
+      this.getProjectList()
+    }
   }
 
-  async pageUpdated(changes: any, lifecycle: any) {}
-
   async getProjectList() {
     const response = await client.query({
       query: gql`

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

@@ -32,6 +32,45 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
         --grid-record-emphasized-color: yellow;
       }
 
+      div[management-header-container] {
+        display: flex;
+        margin: 15px 23px 0px 23px;
+        gap: 13px;
+        overflow-x: auto;
+
+        a {
+          min-width: 140px;
+          text-align: center;
+          padding: 12px 15px;
+          background-color: #fff;
+          color: #586878;
+          font-weight: 700;
+          border-radius: 7px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          gap: 5px;
+          border: solid 1px #0000004d;
+          text-decoration: none;
+          cursor: pointer;
+
+          md-icon {
+            font-size: 40px;
+            width: auto;
+            height: auto;
+          }
+          div[label] {
+            font-size: 15px;
+          }
+        }
+
+        a[green] {
+          background-color: #24be7b;
+          color: #fff;
+        }
+      }
+
       div[header] {
         display: flex;
         height: 100px;
@@ -184,6 +223,35 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
 
   render() {
     return html`
+      <div management-header>
+        <div management-header-container>
+          <a @click=${this._openCreateProjectPopup} green>
+            <md-icon slot="leading-icon">add</md-icon>
+            <div label>신규 프로젝트 생성</div>
+          </a>
+          <a href="employee-list">
+            <md-icon slot="leading-icon">badge</md-icon>
+            <div label>인력 관리</div>
+          </a>
+          <a href="construction-type-management">
+            <md-icon slot="leading-icon">construction</md-icon>
+            <div label>공종 관리</div>
+          </a>
+          <a href="inspection-drawing-type-management">
+            <md-icon slot="leading-icon">stacks</md-icon>
+            <div label>도면타입/검측부위 관리</div>
+          </a>
+          <a href="checklist-type-management">
+            <md-icon slot="leading-icon">rule</md-icon>
+            <div label>체크리스트 구분 관리</div>
+          </a>
+          <a href="checklist-template-list">
+            <md-icon slot="leading-icon">fact_check</md-icon>
+            <div label>체크리스트 템플릿 관리</div>
+          </a>
+        </div>
+      </div>
+
       <div header>
         <label>프로젝트 이름</label>
         <md-filled-text-field
@@ -198,7 +266,6 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
         </md-filled-text-field>
 
         <strong>총 ${this.projectCount}개</strong>
-        <md-elevated-button add-project @click=${this._openCreateProjectPopup}>+ 신규 프로젝트 추가</md-elevated-button>
       </div>
 
       <div body>
@@ -221,7 +288,7 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
               <span project-info>
                 <div name>${project.name}</div>
                 <div content>${project.buildingComplex.address}</div>
-                <div content>면적: ${project.buildingComplex.area}㎡</div>
+                <div content>면적: ${project.buildingComplex?.area?.toLocaleString() || ''}㎡</div>
                 <div content>착공~준공: ${project.startDate}~${project.endDate}</div>
                 <div content>발주처: <strong>${project.buildingComplex.clientCompany}</strong></div>
               </span>
@@ -250,8 +317,10 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
     `
   }
 
-  async pageInitialized(lifecycle: any) {
-    this.getProjectList()
+  async pageUpdated(changes: any, lifecycle: any) {
+    if (this.active) {
+      this.getProjectList()
+    }
   }
 
   async getProjectList() {

package/client/pages/resource/inspection-drawing-type-management.ts

@@ -1,31 +1,42 @@
-import '@operato/data-grist'
+import '@material/web/icon/icon.js'
 import '@operato/context/ox-context-page-toolbar.js'
+import '@operato/data-grist'
 
-import { CommonGristStyles, CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonGristStyles, CommonButtonStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { PageView } from '@operato/shell'
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
-import { DataGrist } from '@operato/data-grist'
+import { DataGrist, FetchOption } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { notify, openPopup } from '@operato/layout'
 import gql from 'graphql-tag'
+import { p13n } from '@operato/p13n'
+import { i18next, localize } from '@operato/i18n'
 import './inspection-part-popup'
 
 @customElement('inspection-drawing-type-management')
-export class InspectionDrawingTypeManagement extends PageView {
+export class InspectionDrawingTypeManagement extends p13n(localize(i18next)(PageView)) {
   static styles = [
     ScrollbarStyles,
     CommonGristStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        width: 100%;
-
         --grid-record-emphasized-background-color: red;
         --grid-record-emphasized-color: yellow;
       }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      .header {
+        grid-template-areas: 'filters actions';
+      }
     `
   ]
 
@@ -35,6 +46,17 @@ export class InspectionDrawingTypeManagement extends PageView {
   get context() {
     return {
       title: '도면 타입 관리',
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        value: this.grist?.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
       actions: [
         {
           title: '저장',
@@ -46,13 +68,29 @@ export class InspectionDrawingTypeManagement extends PageView {
           action: this._deleteInspectionDrawingTypes.bind(this),
           ...CommonButtonStyles.delete
         }
-      ]
+      ],
+      toolbar: false
     }
   }
 
   render() {
     return html`
-      <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}> </ox-grist>
+      <ox-grist
+        .mode=${'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}
+      >
+        <div slot="headroom" class="header">
+          <div class="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
+          </div>
+
+          <ox-context-page-toolbar class="actions" .context=${this.context}> </ox-context-page-toolbar>
+        </div>
+
+        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
+      </ox-grist>
     `
   }
 
@@ -92,6 +130,7 @@ export class InspectionDrawingTypeManagement extends PageView {
           record: {
             editable: true
           },
+          filter: 'search',
           width: 150
         },
         {
@@ -112,16 +151,16 @@ export class InspectionDrawingTypeManagement extends PageView {
           multiple: true
         }
       },
-      sorters: [{ name: 'updatedAt', desc: true }],
+      sorters: [{ name: 'name', desc: true }],
       pagination: { infinite: true }
     }
   }
 
-  async fetchHandler() {
+  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
     const response = await client.query({
       query: gql`
-        query InspectionDrawingTypes($sortings: [Sorting!]) {
-          inspectionDrawingTypes(sortings: $sortings) {
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          inspectionDrawingTypes(filters: $filters, pagination: $pagination, sortings: $sortings) {
             items {
               id
               name
@@ -133,16 +172,12 @@ export class InspectionDrawingTypeManagement extends PageView {
         }
       `,
       variables: {
-        sortings: [
-          {
-            name: 'name'
-          }
-        ]
+        filters,
+        pagination: { page, limit },
+        sortings
       }
     })
 
-    if (response.errors) return {}
-
     return {
       total: response.data.inspectionDrawingTypes.total || 0,
       records: response.data.inspectionDrawingTypes.items || []

package/client/route.ts

@@ -8,6 +8,10 @@ export default function route(page: string) {
       import('./pages/project/project-detail')
       return page
 
+    case 'project-completed-list':
+      import('./pages/project/project-completed-list')
+      return page
+
     case 'project-schedule-list':
       import('./pages/project/project-schedule-list')
       return page
@@ -28,10 +32,6 @@ export default function route(page: string) {
       import('./pages/project/project-plan-management')
       return page
 
-    case 'manager-management':
-      import('./pages/resource/manager-management')
-      return page
-
     case 'worker-type-management':
       import('./pages/resource/worker-type-management')
       return page