@dssp/supervision 0.0.33 → 0.0.35

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

@@ -142,6 +142,7 @@ export class BuildingInspectionDetailChecklist extends PageView {
                 constructionConfirmStatus
                 supervisoryConfirmStatus
                 checklistItemCommentCount
+                checklistItemAttachmentCount
               }
             }
             buildingLevel {

package/client/pages/checklist/attachment-list-popup.ts

@@ -0,0 +1,283 @@
+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, query, state } from 'lit/decorators.js'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
+import { notify } from '@operato/layout'
+import { store, User } from '@operato/shell'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
+import { openPopup } from '@operato/layout'
+import './file-preview-popup'
+
+@customElement('attachment-list-popup')
+class AttachmentListPopup extends connect(store)(LitElement) {
+  static styles = [
+    ButtonContainerStyles,
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 15px 20px;
+        background-color: var(--md-sys-color-surface);
+      }
+
+      div[body] {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      div[attachment-container] {
+        overflow-y: auto;
+        gap: 10px;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+
+        div[attachment-row] {
+          display: flex;
+          flex-direction: column;
+
+          div[creator-container] {
+            display: flex;
+            justify-content: space-between;
+
+            span[creator] {
+              font-weight: 600;
+              display: flex;
+              align-items: center;
+              gap: 3px;
+            }
+            span[createdAt] {
+              display: flex;
+              align-items: center;
+              gap: 3px;
+
+              md-icon[delete] {
+                cursor: pointer;
+              }
+
+              a[button-download] {
+                display: flex;
+                color: #000;
+              }
+            }
+          }
+
+          a[attachment] {
+            margin-left: 20px;
+            text-decoration: none;
+            color: #000;
+          }
+        }
+      }
+
+      h3 {
+        position: relative;
+        color: rgb(5, 149, 229);
+        font-size: 17px;
+        font-weight: 700;
+        background-color: var(--md-sys-color-surface);
+        margin-top: 0px;
+        margin-bottom: 5px;
+      }
+
+      div[button-container] {
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+      }
+    `
+  ]
+
+  @property({ type: String }) checklistItemId: string = ''
+
+  @state() item: any = { count: 0 }
+  @state() checklistItemAttachments: any = []
+  @state() checklistItemAttachmentCount: number = 0
+  @state() user: User = {}
+  @query('div[attachment-container]') attachmentContainer!: HTMLDivElement
+
+  render() {
+    return html`
+      <div body>
+        <h3>제품검사에 대한 파일: ${this.checklistItemAttachmentCount || 0}건</h3>
+
+        <div attachment-container>
+          ${this.checklistItemAttachments.map(attachment => {
+            return html`
+              <div attachment-row>
+                <div creator-container>
+                  <span creator><md-icon slot="icon">account_circle</md-icon> ${attachment.creator.name}</span>
+                  <span createdAt>
+                    <md-icon slot="icon">schedule</md-icon> ${this._formatDate(attachment.createdAt)}
+                    ${attachment.creator.email === this.user.email
+                      ? html` <md-icon delete slot="icon" @click=${() => this._deleteAttachment(attachment.id)}>delete</md-icon>`
+                      : ''}
+                    <a button-download href=${attachment.fullpath} download=${attachment.name}>
+                      <md-icon slot="icon">download</md-icon></a
+                    >
+                  </span>
+                </div>
+                <a attachment @click=${() => this._onClickPreview(attachment.fullpath)}>${attachment.name}</a>
+              </div>
+            `
+          })}
+        </div>
+
+        <ox-input-file accept="*/*" multiple="true" hide-filelist @change=${this.onCreateAttachment.bind(this)}></ox-input-file>
+
+        <div button-container>
+          <md-elevated-button @click=${this._close}> <md-icon slot="icon">cancel</md-icon>취소 </md-elevated-button>
+        </div>
+      </div>
+    `
+  }
+
+  async firstUpdated() {
+    this.user = (store.getState() as any).auth?.user
+
+    await this._loadAttachments()
+  }
+
+  private async _loadAttachments() {
+    const response = await client.query({
+      query: gql`
+        query ChecklistItem($id: String!) {
+          checklistItem(id: $id) {
+            id
+            checklistItemAttachmentCount
+            checklistItemAttachments {
+              id
+              name
+              fullpath
+              creator {
+                id
+                name
+                email
+              }
+              createdAt
+            }
+          }
+        }
+      `,
+      variables: {
+        id: this.checklistItemId
+      }
+    })
+
+    if (response.errors) return
+
+    this.checklistItemAttachments = response.data.checklistItem.checklistItemAttachments || []
+    this.checklistItemAttachmentCount = response.data.checklistItem.checklistItemAttachmentCount
+  }
+
+  private async _deleteAttachment(attachmentId: string) {
+    if (
+      await OxPrompt.open({
+        title: '첨부 자료를 삭제',
+        text: '첨부 자료를 삭제 하시겠습니까?',
+        confirmButton: { text: '삭제' },
+        cancelButton: { text: '취소' }
+      })
+    ) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation DeleteAttachment($deleteAttachmentId: String!) {
+            deleteAttachment(id: $deleteAttachmentId)
+          }
+        `,
+        variables: {
+          deleteAttachmentId: attachmentId
+        }
+      })
+
+      if (!response.errors) {
+        this.checklistItemAttachments = [...this.checklistItemAttachments.filter(attachment => attachment.id != attachmentId)]
+        notify({ message: '첨부 자료를 삭제하였습니다.', level: 'info' })
+      } else {
+        notify({ message: response.errors?.[0]?.message || '첨부 자료 삭제에 실패하였습니다.', level: 'error' })
+      }
+
+      this._dispatchEvent()
+    }
+  }
+
+  private _close() {
+    history.back()
+  }
+
+  // 파일 변경 시 파일을 저장할 핸들러
+  private async onCreateAttachment(e: CustomEvent) {
+    const files = e.detail
+
+    await this._createAttachments(files)
+
+    this._dispatchEvent()
+  }
+
+  async _createAttachments(files: File[]) {
+    const checklistItemId = this.checklistItemId
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($attachments: [NewAttachment!]!) {
+          createAttachments(attachments: $attachments) {
+            id
+            name
+            fullpath
+            creator {
+              id
+              name
+              email
+            }
+            createdAt
+          }
+        }
+      `,
+      variables: {
+        attachments: files.map(file => {
+          return { file, refBy: checklistItemId, refType: 'ChecklistItem' }
+        })
+      },
+      context: {
+        hasUpload: true
+      }
+    })
+
+    const attachments = response.data.createAttachments
+
+    this.checklistItemAttachments = [...attachments, ...this.checklistItemAttachments]
+    this.checklistItemAttachmentCount = this.checklistItemAttachmentCount + attachments.length
+  }
+
+  private _formatDate(date) {
+    const _date = new Date(date.toLocaleString('en-US', { timeZone: 'Asia/Seoul' }))
+
+    const year = _date.getFullYear()
+    const month = String(_date.getMonth() + 1).padStart(2, '0')
+    const day = String(_date.getDate()).padStart(2, '0')
+    const hours = String(_date.getHours()).padStart(2, '0')
+    const minutes = String(_date.getMinutes()).padStart(2, '0')
+    const seconds = String(_date.getSeconds()).padStart(2, '0')
+
+    return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`
+  }
+
+  // 첨부 자료 변경 이벤트 디스패치
+  _dispatchEvent() {
+    this.dispatchEvent(new CustomEvent('change-attachment', { detail: { checklistItemId: this.checklistItemId } }))
+  }
+
+  private _onClickPreview(filepath: string) {
+    openPopup(html` <file-preview-popup .filepath=${filepath}></file-preview-popup> `, {
+      backdrop: true,
+      size: 'large',
+      title: '미리보기'
+    })
+  }
+}

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

@@ -14,6 +14,7 @@ import { store } from '@operato/shell'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { openPopup } from '@operato/layout'
 import './comment-list-popup'
+import './attachment-list-popup'
 
 export const enum ChecklistMode {
   VIEWER = 'VIEWER',
@@ -119,8 +120,12 @@ class ChecklistView extends connect(store)(LitElement) {
           }
 
           &[attachment] {
-            width: 90px;
             text-align: center;
+            cursor: pointer;
+
+            * {
+              vertical-align: middle;
+            }
           }
           &[comment] {
             cursor: pointer;
@@ -344,7 +349,10 @@ class ChecklistView extends connect(store)(LitElement) {
                     @change=${this._onChangeConfirmStatus}
                   ></md-radio>
                 </td>
-                <td attachment><md-icon slot="icon">attach_file</md-icon></td>
+                <td attachment @click=${() => this._onClickAttachment(item.id)}>
+                  <md-icon slot="icon">attach_file</md-icon>
+                  <span>${item?.checklistItemAttachmentCount || ''}</span>
+                </td>
                 <td comment @click=${() => this._onClickComment(item.id)}>
                   <md-icon slot="icon">chat</md-icon>
                   <span>${item?.checklistItemCommentCount || ''}</span>
@@ -508,18 +516,34 @@ class ChecklistView extends connect(store)(LitElement) {
       html`
         <comment-list-popup
           .checklistItemId=${checklistItemId}
-          @change-comment=${this._refreshComment.bind(this)}
+          @change-comment=${this._refreshItem.bind(this)}
         ></comment-list-popup>
       `,
       {
         backdrop: true,
         size: 'medium',
-        title: '조치사항'
+        title: '조치 사항'
+      }
+    )
+  }
+
+  private _onClickAttachment(checklistItemId: string) {
+    openPopup(
+      html`
+        <attachment-list-popup
+          .checklistItemId=${checklistItemId}
+          @change-attachment=${this._refreshItem.bind(this)}
+        ></attachment-list-popup>
+      `,
+      {
+        backdrop: true,
+        size: 'medium',
+        title: '첨부 자료'
       }
     )
   }
 
-  private async _refreshComment(e) {
+  private async _refreshItem(e) {
     const { checklistItemId } = e.detail
     const response = await client.query({
       query: gql`
@@ -527,6 +551,7 @@ class ChecklistView extends connect(store)(LitElement) {
           checklistItem(id: $checklistItemId) {
             id
             checklistItemCommentCount
+            checklistItemAttachmentCount
           }
         }
       `,
@@ -535,9 +560,9 @@ class ChecklistView extends connect(store)(LitElement) {
       }
     })
 
-    const checklistItemCommentCount = response.data?.checklistItem?.checklistItemCommentCount || []
+    const checklistItem = response.data?.checklistItem || []
     this.checklist.checklistItems = this.checklist.checklistItems.map(item => {
-      return item.id != checklistItemId ? item : { ...item, checklistItemCommentCount: checklistItemCommentCount }
+      return item.id != checklistItemId ? item : { ...item, ...checklistItem }
     })
 
     this.requestUpdate()

package/client/pages/checklist/comment-list-popup.ts

@@ -8,7 +8,6 @@ import { notify } from '@operato/layout'
 import { store, User } from '@operato/shell'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
-import './checklist-view'
 
 @customElement('comment-list-popup')
 class CommentListPopup extends connect(store)(LitElement) {
@@ -80,6 +79,7 @@ class CommentListPopup extends connect(store)(LitElement) {
 
       textarea {
         height: 75px;
+        border: 1px solid #ccc;
       }
 
       div[button-container] {
@@ -172,6 +172,7 @@ class CommentListPopup extends connect(store)(LitElement) {
             creator {
               id
               email
+              name
             }
             createdAt
           }

package/client/pages/checklist/file-preview-popup.ts

@@ -0,0 +1,70 @@
+import '@material/web/icon/icon.js'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
+
+@customElement('file-preview-popup')
+class FilePreviewPopup extends LitElement {
+  static styles = [
+    ButtonContainerStyles,
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 15px 20px;
+        overflow-y: auto;
+        background-color: var(--md-sys-color-surface);
+      }
+
+      .modal-content {
+        margin: 5% auto;
+        width: 90%;
+        background-color: white;
+        text-align: center;
+      }
+    `
+  ]
+
+  @property({ type: String }) filepath: string = ''
+
+  @query('#previewContent') previewContent!: HTMLDivElement
+
+  render() {
+    return html` <div class="modal-content" id="previewContent"></div>`
+  }
+
+  async firstUpdated() {
+    this.showPreview(this.filepath)
+  }
+
+  showPreview(fileUrl) {
+    // 파일 확장자 확인
+    const fileExtension = fileUrl.split('.').pop().toLowerCase()
+    this.previewContent.innerHTML = ''
+
+    console.log(fileExtension)
+
+    if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(fileExtension)) {
+      // 이미지 미리보기
+      const img = document.createElement('img')
+      img.src = fileUrl
+      img.alt = '미리보기 이미지'
+      img.style.width = '100%'
+      this.previewContent.appendChild(img)
+    } else if (fileExtension === 'pdf') {
+      // PDF 미리보기
+      const iframe = document.createElement('iframe')
+      iframe.src = `${fileUrl}#toolbar=0&navpanes=0&scrollbar=0` // 툴바, 내비게이션 및 스크롤바 숨기기
+      iframe.style.width = '100%'
+      iframe.style.height = '100vh'
+      iframe.style.border = 'none'
+      this.previewContent.appendChild(iframe)
+    } else {
+      // 미리보기가 지원되지 않는 파일 형식 안내
+      const message = document.createElement('p')
+      message.innerText = '미리보기가 지원되지 않는 파일 형식입니다.'
+      this.previewContent.appendChild(message)
+    }
+  }
+}

package/dist-client/pages/building-inspection/building-inspection-detail-checklist.js

@@ -94,6 +94,7 @@ let BuildingInspectionDetailChecklist = class BuildingInspectionDetailChecklist
                 constructionConfirmStatus
                 supervisoryConfirmStatus
                 checklistItemCommentCount
+                checklistItemAttachmentCount
               }
             }
             buildingLevel {

package/dist-client/pages/building-inspection/building-inspection-detail-checklist.js.map

@@ -1 +1 @@
-{"version":3,"file":"building-inspection-detail-checklist.js","sourceRoot":"","sources":["../../../client/pages/building-inspection/building-inspection-detail-checklist.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\n\nimport { CommonGristStyles, CommonButtonStyles, ScrollbarStyles } from '@operato/styles'\nimport { PageView } from '@operato/shell'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\nimport { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'\nimport { client } from '@operato/graphql'\nimport { notify } from '@operato/layout'\nimport gql from 'graphql-tag'\nimport { openPopup } from '@operato/layout'\n\nimport { verifyBiometric } from '@things-factory/auth-base/client'\n\nimport './component/building-inspection-detail-header'\nimport '../checklist/checklist-view'\nimport { ChecklistMode } from '../checklist/checklist-view'\n\n@customElement('building-inspection-detail-checklist')\nexport class BuildingInspectionDetailChecklist extends PageView {\n  static styles = [\n    ScrollbarStyles,\n    CommonGristStyles,\n    css`\n      :host {\n        display: grid;\n        grid-template-rows: 75px auto;\n        color: #4e5055;\n\n        width: 100%;\n        background-color: #f7f7f7;\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      *[bold] {\n        font-weight: bold;\n      }\n\n      div[body] {\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        align-items: center;\n\n        div[button-container] {\n          display: flex;\n          justify-content: flex-end;\n          width: 100%;\n          gap: 10px;\n          margin-right: 50px;\n          margin-bottom: 15px;\n        }\n      }\n    `\n  ]\n\n  @state() project: any = {}\n  @state() buildingInspection: any = {}\n\n  get context() {\n    return {\n      title: '검측 관리 상세 - 검측 체크리스트'\n    }\n  }\n\n  render() {\n    return html`\n      <building-inspection-detail-header\n        .buildingInspectionId=${this.buildingInspection?.id}\n        .buildingLevelId=${this.buildingInspection?.buildingLevel?.id}\n        .projectName=${this.project.name}\n        .buildingName=${this.buildingInspection?.buildingLevel?.building?.name}\n        .buildingLevelFloor=${this.buildingInspection?.buildingLevel?.floor}\n      ></building-inspection-detail-header>\n\n      <div body>\n        ${keyed(\n          this.buildingInspection.id,\n          html`\n            <checklist-view\n              .mode=${ChecklistMode.EDITOR}\n              status=${this.buildingInspection.status}\n              .checklist=${this.buildingInspection.checklist || {}}\n              .buildingComplex=${this.buildingInspection?.buildingLevel?.building?.buildingComplex || {}}\n            ></checklist-view>\n          `\n        )}\n\n        <div button-container>\n          <md-elevated-button @click=${this._onClickModifyChecklist}>\n            <md-icon slot=\"icon\">assignment</md-icon>등록\n          </md-elevated-button>\n        </div>\n      </div>\n    `\n  }\n\n  async pageUpdated(changes: any, lifecycle: PageLifecycle) {\n    if (this.active) {\n      const buildingInspectionId = lifecycle.resourceId || ''\n      await this.initBuildingInspection(buildingInspectionId)\n    }\n  }\n\n  async initBuildingInspection(buildingInspectionId: string = '') {\n    const response = await client.query({\n      query: gql`\n        query BuildingInspection($buildingInspectionId: String!) {\n          buildingInspection(id: $buildingInspectionId) {\n            id\n            status\n            requestDate\n            checklist {\n              id\n              name\n              constructionType\n              constructionDetailType\n              location\n              inspectionParts\n              documentNo\n              constructionInspectionDate\n              supervisorInspectionDate\n              overallConstructorSignature\n              taskConstructorSignature\n              overallSupervisorySignature\n              taskSupervisorySignature\n              buildingInspection {\n                status\n              }\n              checklistItems {\n                id\n                name\n                sequence\n                mainType\n                detailType\n                inspctionCriteria\n                constructionConfirmStatus\n                supervisoryConfirmStatus\n                checklistItemCommentCount\n              }\n            }\n            buildingLevel {\n              id\n              floor\n              mainDrawing {\n                id\n                name\n                fullpath\n              }\n              mainDrawingImage\n              building {\n                id\n                name\n                buildingComplex {\n                  id\n                  overallConstructorEmails\n                  taskConstructorEmails\n                  overallSupervisoryEmails\n                  taskSupervisoryEmails\n                }\n              }\n            }\n          }\n        }\n      `,\n      variables: {\n        buildingInspectionId\n      }\n    })\n\n    if (response.errors) return\n\n    this.buildingInspection = response.data.buildingInspection\n\n    await this._getProjectByBuildingComplexId(this.buildingInspection?.buildingLevel?.building?.buildingComplex?.id)\n  }\n\n  private async _getProjectByBuildingComplexId(buildingComplexId) {\n    const response = await client.query({\n      query: gql`\n        query ProjectByBuildingComplexId($buildingComplexId: String!) {\n          project: projectByBuildingComplexId(buildingComplexId: $buildingComplexId) {\n            id\n            name\n          }\n        }\n      `,\n      variables: {\n        buildingComplexId\n      }\n    })\n\n    if (response.errors) return\n\n    this.project = response.data.project\n  }\n\n  private _onClickModifyChecklist() {\n    this.validateChecklist(this.buildingInspection.checklist)\n  }\n\n  private async validateChecklist(checklist: any) {\n    try {\n      const result = await verifyBiometric()\n      if (result.verified) {\n        console.log('Verification successful. Proceeding with sensitive action.')\n      } else {\n        notify({ message: 'Verification failed:' + result.message })\n        return\n      }\n    } catch (error) {\n      notify({ message: 'Error during biometric verification:' + error })\n      return\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation UpdateBuildingInspectionChecklist($buildingInspection: UpdateBuildingInspectionSubmitType!) {\n          updateBuildingInspectionChecklist(buildingInspection: $buildingInspection)\n        }\n      `,\n      variables: {\n        buildingInspection: {\n          id: this.buildingInspection.id,\n          checklist: {\n            id: checklist.id,\n            overallConstructorSignature: checklist.overallConstructorSignature,\n            taskConstructorSignature: checklist.taskConstructorSignature,\n            overallSupervisorySignature: checklist.overallSupervisorySignature,\n            taskSupervisorySignature: checklist.taskSupervisorySignature\n          },\n          checklistItem: checklist.checklistItems.map(item => ({\n            id: item.id,\n            constructionConfirmStatus: item.constructionConfirmStatus,\n            supervisoryConfirmStatus: item.supervisoryConfirmStatus\n          }))\n        }\n      }\n    })\n\n    if (!response.errors) {\n      notify({ message: '검측요청서를 등록하였습니다.' })\n      this.initBuildingInspection(this.buildingInspection.id)\n    } else {\n      notify({ message: response.errors?.[0]?.message || '검측 요청서 등록에 실패하였습니다.', level: 'error' })\n    }\n  }\n}\n"]}
+{"version":3,"file":"building-inspection-detail-checklist.js","sourceRoot":"","sources":["../../../client/pages/building-inspection/building-inspection-detail-checklist.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\n\nimport { CommonGristStyles, CommonButtonStyles, ScrollbarStyles } from '@operato/styles'\nimport { PageView } from '@operato/shell'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\nimport { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'\nimport { client } from '@operato/graphql'\nimport { notify } from '@operato/layout'\nimport gql from 'graphql-tag'\nimport { openPopup } from '@operato/layout'\n\nimport { verifyBiometric } from '@things-factory/auth-base/client'\n\nimport './component/building-inspection-detail-header'\nimport '../checklist/checklist-view'\nimport { ChecklistMode } from '../checklist/checklist-view'\n\n@customElement('building-inspection-detail-checklist')\nexport class BuildingInspectionDetailChecklist extends PageView {\n  static styles = [\n    ScrollbarStyles,\n    CommonGristStyles,\n    css`\n      :host {\n        display: grid;\n        grid-template-rows: 75px auto;\n        color: #4e5055;\n\n        width: 100%;\n        background-color: #f7f7f7;\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      *[bold] {\n        font-weight: bold;\n      }\n\n      div[body] {\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        align-items: center;\n\n        div[button-container] {\n          display: flex;\n          justify-content: flex-end;\n          width: 100%;\n          gap: 10px;\n          margin-right: 50px;\n          margin-bottom: 15px;\n        }\n      }\n    `\n  ]\n\n  @state() project: any = {}\n  @state() buildingInspection: any = {}\n\n  get context() {\n    return {\n      title: '검측 관리 상세 - 검측 체크리스트'\n    }\n  }\n\n  render() {\n    return html`\n      <building-inspection-detail-header\n        .buildingInspectionId=${this.buildingInspection?.id}\n        .buildingLevelId=${this.buildingInspection?.buildingLevel?.id}\n        .projectName=${this.project.name}\n        .buildingName=${this.buildingInspection?.buildingLevel?.building?.name}\n        .buildingLevelFloor=${this.buildingInspection?.buildingLevel?.floor}\n      ></building-inspection-detail-header>\n\n      <div body>\n        ${keyed(\n          this.buildingInspection.id,\n          html`\n            <checklist-view\n              .mode=${ChecklistMode.EDITOR}\n              status=${this.buildingInspection.status}\n              .checklist=${this.buildingInspection.checklist || {}}\n              .buildingComplex=${this.buildingInspection?.buildingLevel?.building?.buildingComplex || {}}\n            ></checklist-view>\n          `\n        )}\n\n        <div button-container>\n          <md-elevated-button @click=${this._onClickModifyChecklist}>\n            <md-icon slot=\"icon\">assignment</md-icon>등록\n          </md-elevated-button>\n        </div>\n      </div>\n    `\n  }\n\n  async pageUpdated(changes: any, lifecycle: PageLifecycle) {\n    if (this.active) {\n      const buildingInspectionId = lifecycle.resourceId || ''\n      await this.initBuildingInspection(buildingInspectionId)\n    }\n  }\n\n  async initBuildingInspection(buildingInspectionId: string = '') {\n    const response = await client.query({\n      query: gql`\n        query BuildingInspection($buildingInspectionId: String!) {\n          buildingInspection(id: $buildingInspectionId) {\n            id\n            status\n            requestDate\n            checklist {\n              id\n              name\n              constructionType\n              constructionDetailType\n              location\n              inspectionParts\n              documentNo\n              constructionInspectionDate\n              supervisorInspectionDate\n              overallConstructorSignature\n              taskConstructorSignature\n              overallSupervisorySignature\n              taskSupervisorySignature\n              buildingInspection {\n                status\n              }\n              checklistItems {\n                id\n                name\n                sequence\n                mainType\n                detailType\n                inspctionCriteria\n                constructionConfirmStatus\n                supervisoryConfirmStatus\n                checklistItemCommentCount\n                checklistItemAttachmentCount\n              }\n            }\n            buildingLevel {\n              id\n              floor\n              mainDrawing {\n                id\n                name\n                fullpath\n              }\n              mainDrawingImage\n              building {\n                id\n                name\n                buildingComplex {\n                  id\n                  overallConstructorEmails\n                  taskConstructorEmails\n                  overallSupervisoryEmails\n                  taskSupervisoryEmails\n                }\n              }\n            }\n          }\n        }\n      `,\n      variables: {\n        buildingInspectionId\n      }\n    })\n\n    if (response.errors) return\n\n    this.buildingInspection = response.data.buildingInspection\n\n    await this._getProjectByBuildingComplexId(this.buildingInspection?.buildingLevel?.building?.buildingComplex?.id)\n  }\n\n  private async _getProjectByBuildingComplexId(buildingComplexId) {\n    const response = await client.query({\n      query: gql`\n        query ProjectByBuildingComplexId($buildingComplexId: String!) {\n          project: projectByBuildingComplexId(buildingComplexId: $buildingComplexId) {\n            id\n            name\n          }\n        }\n      `,\n      variables: {\n        buildingComplexId\n      }\n    })\n\n    if (response.errors) return\n\n    this.project = response.data.project\n  }\n\n  private _onClickModifyChecklist() {\n    this.validateChecklist(this.buildingInspection.checklist)\n  }\n\n  private async validateChecklist(checklist: any) {\n    try {\n      const result = await verifyBiometric()\n      if (result.verified) {\n        console.log('Verification successful. Proceeding with sensitive action.')\n      } else {\n        notify({ message: 'Verification failed:' + result.message })\n        return\n      }\n    } catch (error) {\n      notify({ message: 'Error during biometric verification:' + error })\n      return\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation UpdateBuildingInspectionChecklist($buildingInspection: UpdateBuildingInspectionSubmitType!) {\n          updateBuildingInspectionChecklist(buildingInspection: $buildingInspection)\n        }\n      `,\n      variables: {\n        buildingInspection: {\n          id: this.buildingInspection.id,\n          checklist: {\n            id: checklist.id,\n            overallConstructorSignature: checklist.overallConstructorSignature,\n            taskConstructorSignature: checklist.taskConstructorSignature,\n            overallSupervisorySignature: checklist.overallSupervisorySignature,\n            taskSupervisorySignature: checklist.taskSupervisorySignature\n          },\n          checklistItem: checklist.checklistItems.map(item => ({\n            id: item.id,\n            constructionConfirmStatus: item.constructionConfirmStatus,\n            supervisoryConfirmStatus: item.supervisoryConfirmStatus\n          }))\n        }\n      }\n    })\n\n    if (!response.errors) {\n      notify({ message: '검측요청서를 등록하였습니다.' })\n      this.initBuildingInspection(this.buildingInspection.id)\n    } else {\n      notify({ message: response.errors?.[0]?.message || '검측 요청서 등록에 실패하였습니다.', level: 'error' })\n    }\n  }\n}\n"]}

package/dist-client/pages/checklist/attachment-list-popup.d.ts

@@ -0,0 +1,2 @@
+import '@material/web/icon/icon.js';
+import './file-preview-popup';