@dssp/supervision 0.0.31 → 0.0.33

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

@@ -141,7 +141,7 @@ export class BuildingInspectionDetailChecklist extends PageView {
                 inspctionCriteria
                 constructionConfirmStatus
                 supervisoryConfirmStatus
-                comment
+                checklistItemCommentCount
               }
             }
             buildingLevel {

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

@@ -28,11 +28,11 @@ export class BuildingInspectionDetailDrawing extends ScopedElementsMixin(PageVie
     css`
       :host {
         display: grid;
-        grid-template-rows: 75px auto;
+        grid-template-rows: 55px auto;
         color: #4e5055;
 
         width: 100%;
-        background-color: #f7f7f7;
+        background-color: var(--md-sys-color-background, #f6f6f6);
         overflow-y: auto;
 
         --grid-record-emphasized-background-color: red;

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

@@ -51,11 +51,11 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
     css`
       :host {
         display: grid;
-        grid-template-rows: 75px auto;
+        grid-template-rows: 55px auto;
         color: #4e5055;
 
         width: 100%;
-        background-color: #f7f7f7;
+        background-color: var(--md-sys-color-background, #f6f6f6);
         overflow-y: auto;
 
         --grid-record-emphasized-background-color: red;
@@ -71,8 +71,9 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
 
       md-outlined-button {
         --md-outlined-button-container-height: 30px;
-        --md-outlined-button-trailing-space: 15px;
-        --md-outlined-button-leading-space: 15px;
+        --md-outlined-button-trailing-space: var(--spacing-medium, 8px);
+        --md-outlined-button-leading-space: var(--spacing-medium, 8px);
+        --md-sys-color-outline: rgba(51,51,51,.20);
       }
 
       *[bold] {
@@ -81,32 +82,35 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
 
       div[header] {
         display: flex;
-        margin: 0px 20px;
+        margin: 0px var(--spacing-large, 12px);
+        margin-bottom:var(--spacing-small, 5px);
       }
 
       div[header] h2 {
         flex: 0.5;
         color: #3f71a0;
+        font-size:18px;
       }
 
       div[body] {
         display: flex;
         flex-direction: column;
-        margin: 0px 25px 0px 25px;
-        gap: 10px;
+        margin: var(--spacing-large, 12px);
+        margin-top:0;
+        gap: var(--spacing-medium, 8px);
         min-height: fit-content;
         overflow-x: hidden;
       }
 
       div[body] h3 {
         color: #2e79be;
-        font-size: 18px;
+        font-size: 16px;
         margin: 0px;
       }
 
       div[body] > div {
         display: flex;
-        gap: 10px;
+        gap: var(--spacing-medium, 8px);
         border-radius: 5px;
       }
 
@@ -118,10 +122,10 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
       }
 
       div[drawing] {
-        flex: 0.4;
+        flex: 1;
         border: 1px solid #cccccc80;
-        background-color: #fff;
-        padding: 10px;
+        background-color: var(--md-sys-color-on-primary);
+        padding: var(--spacing-large, 12px);
         border-radius: 5px;
 
         img {
@@ -134,52 +138,65 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
       }
 
       div[inspection-container] {
-        flex: 0.6;
-        gap: 5px;
+        flex: 1;
+        gap: var(--spacing-medium, 8px);
 
         display: flex;
         flex-direction: column;
 
         div[inspection] {
           display: grid;
-          grid-template-columns: 120px 0.9fr 0.9fr 0.9fr 0.9fr;
-          margin-top: 5px;
+          grid-template-columns: 90px 1fr 1fr 1fr 1fr;
           background: #ebc8321a;
-          border-radius: 7px;
-          padding: 7px 0px;
+          border-radius: 5px;
+          padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
 
-          & > span {
+          & > div {
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
 
-            div[status='wait'] {
-              color: #4e5055;
+            span::before{
+              display: inline-block;
+              position: relative;
+              content: "";
+              width: 10px;
+              height: 10px;
+              border-radius: 6px;
+              top: -1px;
+              margin-right: 2px;
+            }
+
+            span[status='wait']::before{
+              background-color: #4e5055;
             }
-            div[status='request'] {
-              color: #3395f1;
+            span[status='request']::before {
+              background-color: #3395f1;
             }
-            div[status='pass'] {
-              color: #1bb401;
+            span[status='pass']::before {
+              background-color: #1bb401;
             }
-            div[status='fail'] {
-              color: #ff4444;
+            span[status='fail']::before {
+              background-color: #ff4444;
             }
             span[dot] {
               font-size: 1.3em;
             }
           }
-          & > span[name] {
+          & > div[name] {
             flex-direction: row;
             text-align: right;
-            gap: 10px;
+            gap: var(--spacing-small, 4px);
+            padding-right:var(--spacing-large, 12px);
             border-right: 2px dotted #ccc;
+            max-width: 100%;
+            line-height:1.3; 
 
             md-icon {
               width: 40px;
               height: 40px;
-              border-radius: 7px;
+              border-radius: 5px;
               color: #fff;
               background: #f16154;
             }
@@ -259,35 +276,35 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
 
           <div inspection-container>
             <div inspection>
-              <span name bold>
+              <div name bold>
                 <md-icon slot="icon">fact_check</md-icon>
-                검측<br />현황
-              </span>
-
-              <span>
-                <div>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.WAIT]}</div>
-                <div bold status=${BuildingInspectionStatus.WAIT.toLowerCase()}>
-                  <span dot>●</span> ${this.buildingInspectionSummary[BuildingInspectionStatus.WAIT.toLowerCase()]}
-                </div>
-              </span>
-              <span>
-                <div>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.REQUEST]}</div>
-                <div bold status=${BuildingInspectionStatus.REQUEST.toLowerCase()}>
-                  <span dot>●</span> ${this.buildingInspectionSummary[BuildingInspectionStatus.REQUEST.toLowerCase()]}
-                </div>
-              </span>
-              <span>
-                <div>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.PASS]}</div>
-                <div bold status=${BuildingInspectionStatus.PASS.toLowerCase()}>
-                  <span dot>●</span> ${this.buildingInspectionSummary[BuildingInspectionStatus.PASS.toLowerCase()]}
-                </div>
-              </span>
-              <span>
-                <div>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.FAIL]}</div>
-                <div bold status=${BuildingInspectionStatus.FAIL.toLowerCase()}>
-                  <span dot>●</span> ${this.buildingInspectionSummary[BuildingInspectionStatus.FAIL.toLowerCase()]}
-                </div>
-              </span>
+                검측 현황
+              </div>
+
+              <div>
+                <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.WAIT]}</label>
+                <span bold status=${BuildingInspectionStatus.WAIT.toLowerCase()}>
+                  ${this.buildingInspectionSummary[BuildingInspectionStatus.WAIT.toLowerCase()]}
+                </span>
+              </div>
+              <div>
+                <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.REQUEST]}</label>
+                <span bold status=${BuildingInspectionStatus.REQUEST.toLowerCase()}>
+                  ${this.buildingInspectionSummary[BuildingInspectionStatus.REQUEST.toLowerCase()]}
+                </span>
+              </div>
+              <div>
+                <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.PASS]}</label>
+                <span bold status=${BuildingInspectionStatus.PASS.toLowerCase()}>
+                  ${this.buildingInspectionSummary[BuildingInspectionStatus.PASS.toLowerCase()]}
+                </span>
+              </div>
+              <div>
+                <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.FAIL]}</label>
+                <span bold status=${BuildingInspectionStatus.FAIL.toLowerCase()}>
+                  ${this.buildingInspectionSummary[BuildingInspectionStatus.FAIL.toLowerCase()]}
+                </span>
+              </div>
             </div>
 
             <ox-event-view

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

@@ -27,12 +27,13 @@ class BuildingInspectionDetailHeader extends LitElement {
 
       div[header] {
         display: flex;
-        margin: 0px 20px;
+        margin: 0px var(--spacing-large, 12px);
       }
 
       h2 {
         flex: 0.5;
         color: #3f71a0;
+        font-size:18px;
       }
 
       div[button-container] {
@@ -43,20 +44,23 @@ class BuildingInspectionDetailHeader extends LitElement {
       }
 
       md-elevated-button {
-        margin: 0px 3px;
+        margin-left: var(--spacing-small, 4px);
 
-        --md-elevated-button-container-height: 35px;
+        --md-elevated-button-container-height: 32px;
         --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;
+        --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);
+        --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);
+        --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);
+        --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);
+        --md-elevated-button-icon-color: var(--md-sys-color-on-primary);
+        --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);
+        --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);
+        --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);
+
+        --_with-leading-icon-leading-space: var(--spacing-medium, 8px);
+        --_with-leading-icon-trailing-space: var(--spacing-medium, 8px);
       }
     `
   ]

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

@@ -43,7 +43,7 @@ export class InspectionEventProvider implements EventProvider {
     const calendarData = this.getCalendarTemplate(response.data?.buildingInspectionDateSummaryOfLevelAndPeriod)
 
     calendar.forEach(({ date }) => {
-      const formattedDate = date.toISOString().split('T')[0]
+      const formattedDate = date.toLocaleDateString('en-CA') // 'en-CA'는 'YYYY-MM-DD' 형식으로 반환됩니다.
       const template = calendarData[formattedDate]
 
       if (!template) return

package/client/pages/checklist/checklist-view.ts

@@ -1,4 +1,6 @@
 import '@material/web/icon/icon.js'
+import gql from 'graphql-tag'
+import { client } from '@operato/graphql'
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
@@ -8,9 +10,10 @@ import {
   BUILDING_INSPECTION_STATUS_DISPLAY
 } from '../building-inspection/building-inspection-list'
 import '@operato/input/ox-input-signature.js'
-// import { BuildingComplex } from '@dssp/building-complex'
 import { store } from '@operato/shell'
 import { connect } from 'pwa-helpers/connect-mixin.js'
+import { openPopup } from '@operato/layout'
+import './comment-list-popup'
 
 export const enum ChecklistMode {
   VIEWER = 'VIEWER',
@@ -56,6 +59,7 @@ class ChecklistView extends connect(store)(LitElement) {
         th {
           border: 1px #999999 solid;
           padding-inline: 8px;
+          vertical-align: middle;
         }
         th {
           background-color: #efefef;
@@ -65,12 +69,8 @@ class ChecklistView extends connect(store)(LitElement) {
           height: 35px;
           &[radio] {
             text-align: center;
-            vertical-align: middle;
             width: 55px;
           }
-          &[attachment] {
-            width: 90px;
-          }
         }
       }
 
@@ -117,6 +117,19 @@ class ChecklistView extends connect(store)(LitElement) {
             text-align: center;
             word-break: keep-all;
           }
+
+          &[attachment] {
+            width: 90px;
+            text-align: center;
+          }
+          &[comment] {
+            cursor: pointer;
+            text-align: center;
+
+            * {
+              vertical-align: middle;
+            }
+          }
         }
       }
 
@@ -331,8 +344,11 @@ class ChecklistView extends connect(store)(LitElement) {
                     @change=${this._onChangeConfirmStatus}
                   ></md-radio>
                 </td>
-                <td attachment></td>
-                <td></td>
+                <td attachment><md-icon slot="icon">attach_file</md-icon></td>
+                <td comment @click=${() => this._onClickComment(item.id)}>
+                  <md-icon slot="icon">chat</md-icon>
+                  <span>${item?.checklistItemCommentCount || ''}</span>
+                </td>
               </tr>`
             })}
           </tbody>
@@ -486,4 +502,44 @@ class ChecklistView extends connect(store)(LitElement) {
       }
     })
   }
+
+  private _onClickComment(checklistItemId: string) {
+    openPopup(
+      html`
+        <comment-list-popup
+          .checklistItemId=${checklistItemId}
+          @change-comment=${this._refreshComment.bind(this)}
+        ></comment-list-popup>
+      `,
+      {
+        backdrop: true,
+        size: 'medium',
+        title: '조치사항'
+      }
+    )
+  }
+
+  private async _refreshComment(e) {
+    const { checklistItemId } = e.detail
+    const response = await client.query({
+      query: gql`
+        query ChecklistItem($checklistItemId: String!) {
+          checklistItem(id: $checklistItemId) {
+            id
+            checklistItemCommentCount
+          }
+        }
+      `,
+      variables: {
+        checklistItemId: checklistItemId
+      }
+    })
+
+    const checklistItemCommentCount = response.data?.checklistItem?.checklistItemCommentCount || []
+    this.checklist.checklistItems = this.checklist.checklistItems.map(item => {
+      return item.id != checklistItemId ? item : { ...item, checklistItemCommentCount: checklistItemCommentCount }
+    })
+
+    this.requestUpdate()
+  }
 }