@dssp/supervision 0.0.18 → 0.0.20

package/client/pages/building-inspection/building-inspection-detail-checklist.ts

@@ -4,9 +4,9 @@ import '@operato/data-grist'
 import { CommonGristStyles, CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
 import { PageView } from '@operato/shell'
 import { css, html } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import { keyed } from 'lit/directives/keyed.js'
 import { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'
-import { customElement, query, 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'
@@ -17,7 +17,7 @@ import '../checklist/checklist-view'
 import { ChecklistMode } from '../checklist/checklist-view'
 
 @customElement('building-inspection-detail-checklist')
-export class BuildingInspectionDetailChecklist extends ScopedElementsMixin(PageView) {
+export class BuildingInspectionDetailChecklist extends PageView {
   static styles = [
     ScrollbarStyles,
     CommonGristStyles,
@@ -77,11 +77,16 @@ export class BuildingInspectionDetailChecklist extends ScopedElementsMixin(PageV
       ></building-inspection-detail-header>
 
       <div body>
-        <checklist-view
-          .mode=${ChecklistMode.EDITOR}
-          status=${this.buildingInspection.status}
-          .checklist=${this.buildingInspection.checklist || {}}
-        ></checklist-view>
+        ${keyed(
+          this.buildingInspection.id,
+          html`
+            <checklist-view
+              .mode=${ChecklistMode.EDITOR}
+              status=${this.buildingInspection.status}
+              .checklist=${this.buildingInspection.checklist || {}}
+            ></checklist-view>
+          `
+        )}
 
         <div button-container>
           <md-elevated-button @click=${this._onClickModifyChecklist}>
@@ -121,6 +126,9 @@ export class BuildingInspectionDetailChecklist extends ScopedElementsMixin(PageV
               taskConstructorSignature
               overallSupervisorySignature
               taskSupervisorySignature
+              buildingInspection {
+                status
+              }
               checklistItems {
                 id
                 name
@@ -186,8 +194,6 @@ export class BuildingInspectionDetailChecklist extends ScopedElementsMixin(PageV
   }
 
   private _onClickModifyChecklist() {
-    console.log('checklist : ', this.buildingInspection.checklist)
-
     this.validateChecklist(this.buildingInspection.checklist)
   }
 

package/client/pages/building-inspection/building-inspection-detail-drawing.ts

@@ -10,6 +10,8 @@ import { notify } from '@operato/layout'
 import gql from 'graphql-tag'
 import './component/building-inspection-detail-header'
 import '@operato/image-marker/ox-image-marker.js'
+import '@operato/image-marker/ox-image-marker-view.js'
+import { BuildingInspectionStatus } from './building-inspection-list'
 
 @customElement('building-inspection-detail-drawing')
 export class BuildingInspectionDetailDrawing extends ScopedElementsMixin(PageView) {
@@ -33,6 +35,10 @@ export class BuildingInspectionDetailDrawing extends ScopedElementsMixin(PageVie
       div[body] {
         display: flex;
         justify-content: center;
+
+        ox-image-marker-view {
+          width: 100%;
+        }
       }
     `
   ]
@@ -48,6 +54,9 @@ export class BuildingInspectionDetailDrawing extends ScopedElementsMixin(PageVie
   }
 
   render() {
+    const imageUrl = this.buildingInspection?.buildingLevel?.mainDrawingImage || '/assets/images/img-drawing-default.png'
+    const shapes = JSON.parse(this.buildingInspection?.drawingMarker || null) || []
+
     return html`
       <building-inspection-detail-header
         .buildingInspectionId=${this.buildingInspection?.id}
@@ -58,11 +67,14 @@ export class BuildingInspectionDetailDrawing extends ScopedElementsMixin(PageVie
       ></building-inspection-detail-header>
 
       <div body>
-        <ox-image-marker
-          .imageUrl=${this.buildingInspection?.buildingLevel?.mainDrawingImage || '/assets/images/img-drawing-default.png'}
-          .shapes=${JSON.parse(this.buildingInspection?.drawingMarker || null) || []}
-          @shapes-changed=${this.onClickMarkerSave}
-        ></ox-image-marker>
+        ${this.buildingInspection?.status == BuildingInspectionStatus.PASS
+          ? html`<ox-image-marker-view .imageUrl=${imageUrl} .shapes=${shapes}></ox-image-marker-view>`
+          : html` <ox-image-marker
+              .imageUrl=${imageUrl}
+              .shapes=${shapes}
+              @shapes-changed=${this.onClickMarkerSave}
+              .currentMode=${'view'}
+            ></ox-image-marker>`}
       </div>
     `
   }

package/client/pages/building-inspection/building-inspection-list.ts

@@ -3,7 +3,7 @@ import '@operato/data-grist'
 
 import { CommonGristStyles, CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
 import { PageView, navigate } from '@operato/shell'
-import { css, html } from 'lit'
+import { css, html, TemplateResult } from 'lit'
 import { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'
 import { customElement, query, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
@@ -14,6 +14,8 @@ import gql from 'graphql-tag'
 import { openPopup } from '@operato/layout'
 import './inspection-create-popup'
 import '@operato/event-view/ox-event-view.js'
+import { InspectionEventProvider } from './component/inspection-event-provider'
+import { EventProvider } from '@operato/event-view'
 
 export enum ChecklistTypeMainType {
   BASIC = '10',
@@ -100,7 +102,6 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
       div[body] > div {
         display: flex;
         gap: 10px;
-        padding: 15px;
         border-radius: 5px;
       }
 
@@ -108,30 +109,77 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
         flex: 1;
 
         display: flex;
-        background-color: #ffffff;
-        border: 1px solid #cccccc80;
+        background-color: #f7f7f7;
       }
 
-      img[drawing] {
-        width: 400px;
+      div[drawing] {
+        flex: 0.4;
+        border: 1px solid #cccccc80;
+        background-color: #fff;
+        padding: 10px;
+        border-radius: 5px;
+
+        img {
+          width: 100%;
 
-        display: block;
-        object-fit: contain; /* 이미지 비율 유지하고 컨테이너에 맞춰서 축소/확대 */
-        object-position: center; /* 이미지를 중앙에 배치 */
+          display: block;
+          object-fit: contain;
+          object-position: center;
+        }
       }
 
-      div[status] {
-        flex: 1;
+      div[inspection-container] {
+        flex: 0.6;
+        gap: 5px;
 
         display: flex;
         flex-direction: column;
-      }
-
-      div[inspection-data] {
-        flex: 1;
 
-        display: flex;
-        gap: 10px;
+        div[inspection] {
+          display: grid;
+          grid-template-columns: 120px 0.9fr 0.9fr 0.9fr 0.9fr;
+          margin-top: 5px;
+          background: #ebc8321a;
+          border-radius: 7px;
+          padding: 7px 0px;
+
+          & > span {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+            div[status='wait'] {
+              color: #4e5055;
+            }
+            div[status='request'] {
+              color: #3395f1;
+            }
+            div[status='pass'] {
+              color: #1bb401;
+            }
+            div[status='fail'] {
+              color: #ff4444;
+            }
+            span[dot] {
+              font-size: 1.3em;
+            }
+          }
+          & > span[name] {
+            flex-direction: row;
+            text-align: right;
+            gap: 10px;
+            border-right: 2px dotted #ccc;
+
+            md-icon {
+              width: 40px;
+              height: 40px;
+              border-radius: 7px;
+              color: #fff;
+              background: #f16154;
+            }
+          }
+        }
       }
 
       ox-event-view {
@@ -167,6 +215,7 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
   @state() building: any = {}
   @state() drawingImage: string = ''
   @state() buildingInspectionSummary: any = {}
+  @state() calendarData?: EventProvider
 
   @query('ox-grist') private grist!: DataGrist
   @query('ox-event-view') private eventView!: HTMLElement
@@ -192,22 +241,44 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
   render() {
     return html`
       <div header>
-        <h2>${this.project.name} ${this.location}</h2>
+        <h2>${this.project.name}</h2>
       </div>
 
       <div body>
         <div top>
-          <img drawing src=${this.drawingImage || '/assets/images/img-drawing-default.png'} />
-          <div status>
-            <h3>${this.location} 검측 현황</h3>
-            <div inspection-data>
-              <div>
-                ${Object.entries(BUILDING_INSPECTION_STATUS).map(
-                  status => html` <div>${status[1]} ${this.buildingInspectionSummary[status[0].toLowerCase()]}건</div> `
-                )}
-              </div>
-              <ox-event-view mode=${'monthly'}> </ox-event-view>
+          <div drawing>
+            <h3>도면: ${this.location}</h3>
+            <img src=${this.drawingImage || '/assets/images/img-drawing-default.png'} />
+          </div>
+
+          <div inspection-container>
+            <div inspection>
+              <span name bold>
+                <md-icon slot="icon">fact_check</md-icon>
+                검측<br />현황
+              </span>
+
+              ${Object.entries(BUILDING_INSPECTION_STATUS).map(inspectionStatus => {
+                const displayName = inspectionStatus[1]
+                const status = inspectionStatus[0].toLowerCase()
+
+                return html`
+                  <span>
+                    <div>${displayName}</div>
+                    <div bold status=${status}><span dot>●</span> ${this.buildingInspectionSummary[status]}</div>
+                  </span>
+                `
+              })}
             </div>
+
+            <ox-event-view
+              .mode=${'monthly'}
+              .eventProvider=${this.calendarData}
+              @select-date=${(e: CustomEvent) => {
+                console.log('select-date', e.detail)
+              }}
+            >
+            </ox-event-view>
           </div>
         </div>
 
@@ -230,7 +301,7 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
   async initProject(buildingLevelId: string = '') {
     const response = await client.query({
       query: gql`
-        query ProjectByBuildingLevelId($buildingLevelId: String!) {
+        query ProjectByBuildingLevelId($buildingLevelId: String!, $yearMonth: String!) {
           projectByBuildingLevelId(buildingLevelId: $buildingLevelId) {
             id
             name
@@ -257,10 +328,19 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
             pass
             fail
           }
+
+          buildingInspectionDateSummaryOfLevelAndMonth(buildingLevelId: $buildingLevelId, yearMonth: $yearMonth) {
+            requestDate
+            wait
+            request
+            pass
+            fail
+          }
         }
       `,
       variables: {
-        buildingLevelId
+        buildingLevelId,
+        yearMonth: '2024-10'
       }
     })
 
@@ -269,6 +349,9 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
     this.project = response.data?.projectByBuildingLevelId
     this.buildingInspectionSummary = response.data?.buildingInspectionSummaryOfBuildingLevel
 
+    const calendarData = this.getCalendarTemplate(response.data?.buildingInspectionDateSummaryOfLevelAndMonth)
+    this.calendarData = new InspectionEventProvider(calendarData)
+
     // 캘린더 최소 높이 속성 수정
     this.eventView.style.setProperty('--calendar-monthly-date-min-height', '50px')
   }
@@ -346,25 +429,12 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
 
     const response = await client.query({
       query: gql`
-        query BuildingInspectionsOfBuildingLevel($params: BuildingInspectionsOfBuildingLevel!) {
+        query BuildingInspectionsOfBuildingLevel($params: BuildingInspectionsOfBuildingLevel!, $buildingLevelId: String!) {
           buildingInspectionsOfBuildingLevel(params: $params) {
             items {
               id
               status
               requestDate
-              buildingLevel {
-                floor
-                building {
-                  id
-                  name
-                }
-                mainDrawing {
-                  id
-                  name
-                  fullpath
-                }
-                mainDrawingImage
-              }
               checklist {
                 checklistId: id
                 name
@@ -376,13 +446,29 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
             }
             total
           }
+
+          buildingLevel(id: $buildingLevelId) {
+            id
+            floor
+            building {
+              id
+              name
+            }
+            mainDrawing {
+              id
+              name
+              fullpath
+            }
+            mainDrawingImage
+          }
         }
       `,
       variables: {
         params: {
           buildingLevelId: this.buildingLevelId,
           limit: 0
-        }
+        },
+        buildingLevelId: this.buildingLevelId
       }
     })
 
@@ -392,10 +478,11 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
       ...item.checklist,
       requestDate: this._formatDate(item.requestDate)
     }))
+    const buildingLevel = response.data?.buildingLevel
 
-    this.location = items[0]?.checklist?.location || ''
-    this.drawingImage = items[0]?.buildingLevel?.mainDrawingImage || ''
-    this.building = items[0]?.buildingLevel?.building || {}
+    this.location = `${buildingLevel.building.name} ${buildingLevel.floor}층` || ''
+    this.drawingImage = buildingLevel?.mainDrawingImage || ''
+    this.building = buildingLevel?.building || {}
 
     return {
       total: response.data?.buildingInspectionsOfBuildingLevel?.total || 0,
@@ -454,4 +541,21 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
         }).format(new Date(date))
       : ''
   }
+
+  // 검측 개수가 있는 데이터들만 날짜별로 템플릿 만들기
+  private getCalendarTemplate(inspectionData: any[] = []): { [date: string]: TemplateResult } {
+    const template = {}
+    for (let date of inspectionData) {
+      template[date.requestDate] = html`
+        <div style="display: grid; grid-template-columns: repeat(2, 1fr); padding-inline: 7px;">
+          ${date.wait !== 0 ? html`<div><span style="font-size: 1.3em; color: #4e5055">●</span> ${date.wait}</div>` : ''}
+          ${date.request !== 0 ? html`<div><span style="font-size: 1.3em; color: #3395f1">●</span> ${date.request}</div>` : ''}
+          ${date.pass !== 0 ? html`<div><span style="font-size: 1.3em; color: #1bb401">●</span> ${date.pass}</div>` : ''}
+          ${date.fail !== 0 ? html`<div><span style="font-size: 1.3em; color: #ff4444">●</span> ${date.fail}</div>` : ''}
+        </div>
+      `
+    }
+
+    return template
+  }
 }

package/client/pages/building-inspection/component/building-inspection-detail-header.ts

@@ -81,9 +81,12 @@ class buildingInspectionDetailHeader extends LitElement {
           <md-elevated-button href=${`building-inspection-detail-checklist/${this.buildingInspectionId}`}>
             <md-icon slot="icon">description</md-icon>검측 체크리스트
           </md-elevated-button>
-          <md-elevated-button href=${`building-inspection-detail-photo/${this.buildingInspectionId}`}>
+          <md-elevated-button href=${`building-inspection-detail-photo/${this.buildingInspectionId}`} disabled>
             <md-icon slot="icon">description</md-icon>사진촬영
           </md-elevated-button>
+          <md-elevated-button href=${`building-inspection-detail-history/${this.buildingInspectionId}`} disabled>
+            <md-icon slot="icon">description</md-icon>감리이력
+          </md-elevated-button>
         </div>
       </div>
     `

package/client/pages/building-inspection/component/inspection-event-provider.ts

@@ -0,0 +1,32 @@
+import { BizEvent, CALENDAR, EventProvider } from '@operato/event-view'
+
+export class InspectionEventProvider implements EventProvider {
+  calendarData = {}
+
+  constructor(calendarData = {}) {
+    this.calendarData = calendarData
+  }
+
+  fetchEventsForCalendar(calendar: CALENDAR) {
+    const result = new Map<Date, BizEvent[]>()
+
+    calendar.forEach(({ date }) => {
+      const formattedDate = date.toISOString().split('T')[0]
+      const template = this.calendarData[formattedDate]
+
+      if (!template) return
+
+      result.set(date, [
+        {
+          due: formattedDate,
+          template: template,
+          title: '',
+          color: '',
+          clickEvent: e => console.log('e :', e, template)
+        }
+      ])
+    })
+
+    return result
+  }
+}