@dssp/supervision 0.0.31 → 0.0.33

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

@@ -0,0 +1,318 @@
+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 './checklist-view'
+
+@customElement('comment-list-popup')
+class CommentListPopup 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[comments-container] {
+        overflow-y: auto;
+        gap: 10px;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+
+        div[comment-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;
+              }
+            }
+          }
+
+          div[comment] {
+            margin-left: 20px;
+          }
+        }
+      }
+
+      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;
+      }
+
+      textarea {
+        height: 75px;
+      }
+
+      div[button-container] {
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+
+        md-elevated-button[blue] {
+          --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;
+        }
+      }
+    `
+  ]
+
+  @property({ type: String }) checklistItemId: string = ''
+
+  @state() item: any = { count: 0 }
+  @state() checklistItemComments: any = []
+  @state() comment: string = ''
+  @state() checklistItemCommentCount: number = 0
+  @state() user: User = {}
+  @state() page: number = 1
+  @state() loading: boolean = false
+  @state() hasMoreComments: boolean = true
+
+  @query('div[comments-container]') commentsContainer!: HTMLDivElement
+
+  render() {
+    return html`
+      <div body>
+        <h3>제품검사에 대한 확인: ${this.checklistItemCommentCount || 0}건</h3>
+
+        <div comments-container @scroll=${this._onScroll}>
+          ${this.checklistItemComments.map(comment => {
+            return html`
+              <div comment-row>
+                <div creator-container>
+                  <span creator><md-icon slot="icon">account_circle</md-icon> ${comment.creator.name}</span>
+                  <span createdAt>
+                    <md-icon slot="icon">schedule</md-icon> ${this._formatDate(comment.createdAt)}
+                    ${comment.creator.email === this.user.email
+                      ? html` <md-icon delete slot="icon" @click=${() => this._deleteComment(comment.id)}>delete</md-icon>`
+                      : ''}
+                  </span>
+                </div>
+                <div comment>${comment.comment}</div>
+              </div>
+            `
+          })}
+        </div>
+
+        <textarea .value=${this.comment || ''} @input=${this._onInputChange}></textarea>
+
+        <div button-container>
+          <md-elevated-button blue @click=${this._createComment}> <md-icon slot="icon">task</md-icon>저장 </md-elevated-button>
+          <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
+    this.comment = ''
+    this.page = 1
+    await this._loadComments()
+    this._scrollBottom()
+  }
+
+  private async _loadComments() {
+    if (this.loading || !this.hasMoreComments) return
+
+    this.loading = true
+
+    const response = await client.query({
+      query: gql`
+        query ChecklistItemComments($pagination: Pagination!, $checklistItemId: String!) {
+          checklistItemComments(pagination: $pagination, checklistItemId: $checklistItemId) {
+            id
+            comment
+            creator {
+              id
+              email
+            }
+            createdAt
+          }
+
+          checklistItem(id: $checklistItemId) {
+            id
+            checklistItemCommentCount
+          }
+        }
+      `,
+      variables: {
+        checklistItemId: this.checklistItemId,
+        pagination: {
+          page: this.page,
+          limit: 10
+        }
+      }
+    })
+
+    if (response.errors) return
+
+    const items = response.data.checklistItemComments
+    if (items.length < 10) this.hasMoreComments = false
+
+    this.checklistItemComments = [...items.reverse(), ...this.checklistItemComments]
+    this.page += 1
+    this.checklistItemCommentCount = response.data.checklistItem.checklistItemCommentCount
+    this.loading = false
+  }
+
+  // 스크롤이 맨 위에 가까울 때 데이터 요청
+  private _onScroll() {
+    const { scrollTop } = this.commentsContainer
+    if (scrollTop <= 5) {
+      this._loadComments()
+    }
+  }
+
+  private async _createComment() {
+    if (!this.comment) {
+      notify({ message: '조치사항을 입력해주세요.', level: 'warn' })
+      return
+    }
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation CreateChecklistItemComment($checklistItemComment: NewChecklistItemComment!) {
+          createChecklistItemComment(checklistItemComment: $checklistItemComment) {
+            id
+            comment
+            creator {
+              id
+              email
+            }
+            createdAt
+          }
+        }
+      `,
+      variables: {
+        checklistItemComment: {
+          comment: this.comment,
+          checklistItemId: this.checklistItemId
+        }
+      }
+    })
+
+    if (!response.errors) {
+      this.comment = ''
+      this.checklistItemComments = [...this.checklistItemComments, { ...response.data.createChecklistItemComment }]
+      this._scrollBottom()
+      this.checklistItemCommentCount++
+    } else {
+      notify({ message: response.errors?.[0]?.message || '조치사항 등록에 실패하였습니다.', level: 'error' })
+    }
+
+    this._dispatchEvent()
+  }
+
+  private async _deleteComment(commentId: string) {
+    if (
+      await OxPrompt.open({
+        title: '조치 사항을 삭제',
+        text: '조치 사항을 삭제 하시겠습니까?',
+        confirmButton: { text: '삭제' },
+        cancelButton: { text: '취소' }
+      })
+    ) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation DeleteChecklistItemComment($id: String!) {
+            deleteChecklistItemComment(id: $id)
+          }
+        `,
+        variables: {
+          id: commentId
+        }
+      })
+
+      if (!response.errors) {
+        this.checklistItemComments = [...this.checklistItemComments.filter(comment => comment.id != commentId)]
+        notify({ message: '조치사항을 삭제하였습니다.', level: 'info' })
+      } else {
+        notify({ message: response.errors?.[0]?.message || '조치사항 삭제에 실패하였습니다.', level: 'error' })
+      }
+
+      this._dispatchEvent()
+    }
+  }
+
+  private _close() {
+    history.back()
+  }
+
+  // Input 요소의 값이 변경될 때 호출되는 콜백 함수
+  private _onInputChange(event: InputEvent) {
+    const target = event.target as HTMLInputElement
+    this.comment = target.value
+  }
+
+  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}`
+  }
+
+  // 댓글 스크롤 맨 밑으로
+  private async _scrollBottom() {
+    setTimeout(() => {
+      this.commentsContainer.scrollTop = this.commentsContainer.scrollHeight
+    }, 100)
+  }
+
+  // 조치사항 변경 이벤트 디스패치
+  _dispatchEvent() {
+    this.dispatchEvent(new CustomEvent('change-comment', { detail: { checklistItemId: this.checklistItemId } }))
+  }
+}

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

@@ -93,7 +93,7 @@ let BuildingInspectionDetailChecklist = class BuildingInspectionDetailChecklist
                 inspctionCriteria
                 constructionConfirmStatus
                 supervisoryConfirmStatus
-                comment
+                checklistItemCommentCount
               }
             }
             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                comment\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              }\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/building-inspection/building-inspection-detail-drawing.js

@@ -223,11 +223,11 @@ BuildingInspectionDetailDrawing.styles = [
     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/dist-client/pages/building-inspection/building-inspection-detail-drawing.js.map

@@ -1 +1 @@
-{"version":3,"file":"building-inspection-detail-drawing.js","sourceRoot":"","sources":["../../../client/pages/building-inspection/building-inspection-detail-drawing.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/image-marker/ox-image-marker.js'\nimport '@operato/image-marker/ox-image-marker-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\nimport { consume } from '@lit/context'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { PageView } from '@operato/shell'\nimport { CommonGristStyles, ScrollbarStyles } from '@operato/styles'\nimport { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'\nimport { client } from '@operato/graphql'\nimport { notify } from '@operato/layout'\nimport { Shape } from '@operato/image-marker'\n\nimport { DrawingImageProvider } from '@dssp/drawing/dist-client/drawing-management/drawing-image-provider.js'\n\nimport './component/building-inspection-detail-header'\nimport { BuildingInspectionStatus } from './building-inspection-list'\n\n@customElement('building-inspection-detail-drawing')\nexport class BuildingInspectionDetailDrawing extends ScopedElementsMixin(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      div[body] {\n        display: flex;\n        justify-content: center;\n\n        ox-image-marker-view {\n          width: 100%;\n        }\n      }\n\n      dialog ox-image-marker-view {\n        width: 80vw;\n        height: 80vh;\n      }\n    `\n  ]\n\n  @state() project: any = {}\n  @state() buildingInspection: any = {}\n  @state() buildingInspectionId: string = ''\n  @state() imageUrl?: string\n  @state() shapes: Shape[] = []\n  @state() linkUrl?: string\n  @state() linkShapes: Shape[] = []\n\n  @state() drawingImageProvider: DrawingImageProvider = new DrawingImageProvider()\n  // @consume({ context: OxUserPreferencesContext, subscribe: true })\n\n  @query('#image-marker') imageMarker!: any\n  @query('#link-viewer') linkViewer!: any\n  @query('dialog') dialog!: HTMLDialogElement\n\n  get context() {\n    return {\n      title: '검측 관리 상세 - 검측 도면'\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    requestAnimationFrame(() => {\n      this.imageMarker.setImageProvider(this.drawingImageProvider)\n      this.linkViewer.setImageProvider(this.drawingImageProvider)\n\n      this.dialog.addEventListener('click', event => {\n        const rect = this.dialog.getBoundingClientRect()\n        const isInDialog =\n          rect.top <= event.clientY && event.clientY <= rect.bottom && rect.left <= event.clientX && event.clientX <= rect.right\n\n        // 다이아로그 내부를 클릭한 것이 아니면 다이아로그 닫기\n        if (!isInDialog) {\n          this.dialog.close()\n        }\n      })\n    })\n  }\n\n  disconnectedCallback(): void {\n    this.imageMarker?.setImageProvider(null)\n    this.linkViewer?.setImageProvider(null)\n\n    super.disconnectedCallback()\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\n        body\n        @link-clicked=${async (e: CustomEvent) => {\n          this.linkViewer.reset()\n\n          const { link } = e.detail\n          const { id, type, symbol, box, dwgId } = JSON.parse(link)\n          const [x, y, width, height] = box?.split(',').map(Number) || []\n\n          this.linkUrl = `DWGID:${dwgId}`\n          this.linkShapes = [\n            {\n              id: id!,\n              type: 'link',\n              x,\n              y,\n              width,\n              height,\n              link: '{}'\n            }\n          ]\n\n          if (this.dialog) {\n            this.dialog.showModal()\n          }\n        }}\n      >\n        ${this.buildingInspection?.status == BuildingInspectionStatus.PASS\n          ? html`<ox-image-marker-view\n              id=\"image-marker\"\n              .imageUrl=${this.imageUrl}\n              .shapes=${this.shapes}\n            ></ox-image-marker-view>`\n          : html` <ox-image-marker\n              id=\"image-marker\"\n              .imageUrl=${this.imageUrl}\n              .shapes=${this.shapes}\n              @shapes-changed=${this.onClickMarkerSave}\n              .currentMode=${'view'}\n            ></ox-image-marker>`}\n      </div>\n\n      <dialog>\n        <ox-image-marker-view id=\"link-viewer\" .imageUrl=${this.linkUrl} .shapes=${this.linkShapes}></ox-image-marker-view>\n      </dialog>\n    `\n  }\n\n  protected async updated(changes: PropertyValues): Promise<void> {\n    if (changes.has('buildingInspection') && this.buildingInspection?.checklist) {\n      // 1-1. 위치 정보 - 체크리스트에 들어가는 위치정보 텍스트\n      const location_1 = this.buildingInspection.checklist?.location\n\n      // 1-2. 위치 정보 - 실제 위치정보 텍스트 (동 + 층) - ID 필드를 사용하면 DB ID 필드입니다.\n      const location_building = this.buildingInspection.buildingLevel.building.name\n      const location_floor = this.buildingInspection.buildingLevel.floor\n\n      // 2. 평면도 pdf 파일\n      // mainDrawing {\n      //   id\n      //   name\n      //   fullpath\n      // }\n      const mainDrawing = this.buildingInspection.buildingLevel.mainDrawing\n\n      // 3. 선택 도면\n      const inspectionDrawingType = this.buildingInspection.checklist.inspectionDrawingType\n\n      const shapes = JSON.parse(this.buildingInspection?.drawingMarker || null) || []\n      const markers = await this.drawingImageProvider.getMarkers(inspectionDrawingType)\n\n      this.imageUrl = String(inspectionDrawingType).normalize('NFC')\n      this.shapes = [...shapes, ...markers]\n    }\n  }\n\n  async pageUpdated(changes: any, lifecycle: PageLifecycle) {\n    if (this.active) {\n      this.buildingInspectionId = lifecycle.resourceId || ''\n      await this.initBuildingInspection(this.buildingInspectionId)\n\n      this.imageMarker.reset()\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            drawingMarker\n            checklist {\n              location\n              inspectionDrawingType\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                }\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 async onClickMarkerSave(e) {\n    const response = await client.query({\n      query: gql`\n        mutation UpdateBuildingInspection($patch: UpdateBuildingInspectionDrawingMarker!) {\n          updateBuildingInspection(patch: $patch) {\n            id\n            drawingMarker\n          }\n        }\n      `,\n      variables: {\n        patch: {\n          id: this.buildingInspectionId,\n          drawingMarker: JSON.stringify(e.detail)\n        }\n      }\n    })\n\n    if (response.errors) return\n\n    notify({ message: '저장되었습니다.' })\n  }\n}\n"]}
+{"version":3,"file":"building-inspection-detail-drawing.js","sourceRoot":"","sources":["../../../client/pages/building-inspection/building-inspection-detail-drawing.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/image-marker/ox-image-marker.js'\nimport '@operato/image-marker/ox-image-marker-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\nimport { consume } from '@lit/context'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { PageView } from '@operato/shell'\nimport { CommonGristStyles, ScrollbarStyles } from '@operato/styles'\nimport { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'\nimport { client } from '@operato/graphql'\nimport { notify } from '@operato/layout'\nimport { Shape } from '@operato/image-marker'\n\nimport { DrawingImageProvider } from '@dssp/drawing/dist-client/drawing-management/drawing-image-provider.js'\n\nimport './component/building-inspection-detail-header'\nimport { BuildingInspectionStatus } from './building-inspection-list'\n\n@customElement('building-inspection-detail-drawing')\nexport class BuildingInspectionDetailDrawing extends ScopedElementsMixin(PageView) {\n  static styles = [\n    ScrollbarStyles,\n    CommonGristStyles,\n    css`\n      :host {\n        display: grid;\n        grid-template-rows: 55px auto;\n        color: #4e5055;\n\n        width: 100%;\n        background-color: var(--md-sys-color-background, #f6f6f6);\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      div[body] {\n        display: flex;\n        justify-content: center;\n\n        ox-image-marker-view {\n          width: 100%;\n        }\n      }\n\n      dialog ox-image-marker-view {\n        width: 80vw;\n        height: 80vh;\n      }\n    `\n  ]\n\n  @state() project: any = {}\n  @state() buildingInspection: any = {}\n  @state() buildingInspectionId: string = ''\n  @state() imageUrl?: string\n  @state() shapes: Shape[] = []\n  @state() linkUrl?: string\n  @state() linkShapes: Shape[] = []\n\n  @state() drawingImageProvider: DrawingImageProvider = new DrawingImageProvider()\n  // @consume({ context: OxUserPreferencesContext, subscribe: true })\n\n  @query('#image-marker') imageMarker!: any\n  @query('#link-viewer') linkViewer!: any\n  @query('dialog') dialog!: HTMLDialogElement\n\n  get context() {\n    return {\n      title: '검측 관리 상세 - 검측 도면'\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    requestAnimationFrame(() => {\n      this.imageMarker.setImageProvider(this.drawingImageProvider)\n      this.linkViewer.setImageProvider(this.drawingImageProvider)\n\n      this.dialog.addEventListener('click', event => {\n        const rect = this.dialog.getBoundingClientRect()\n        const isInDialog =\n          rect.top <= event.clientY && event.clientY <= rect.bottom && rect.left <= event.clientX && event.clientX <= rect.right\n\n        // 다이아로그 내부를 클릭한 것이 아니면 다이아로그 닫기\n        if (!isInDialog) {\n          this.dialog.close()\n        }\n      })\n    })\n  }\n\n  disconnectedCallback(): void {\n    this.imageMarker?.setImageProvider(null)\n    this.linkViewer?.setImageProvider(null)\n\n    super.disconnectedCallback()\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\n        body\n        @link-clicked=${async (e: CustomEvent) => {\n          this.linkViewer.reset()\n\n          const { link } = e.detail\n          const { id, type, symbol, box, dwgId } = JSON.parse(link)\n          const [x, y, width, height] = box?.split(',').map(Number) || []\n\n          this.linkUrl = `DWGID:${dwgId}`\n          this.linkShapes = [\n            {\n              id: id!,\n              type: 'link',\n              x,\n              y,\n              width,\n              height,\n              link: '{}'\n            }\n          ]\n\n          if (this.dialog) {\n            this.dialog.showModal()\n          }\n        }}\n      >\n        ${this.buildingInspection?.status == BuildingInspectionStatus.PASS\n          ? html`<ox-image-marker-view\n              id=\"image-marker\"\n              .imageUrl=${this.imageUrl}\n              .shapes=${this.shapes}\n            ></ox-image-marker-view>`\n          : html` <ox-image-marker\n              id=\"image-marker\"\n              .imageUrl=${this.imageUrl}\n              .shapes=${this.shapes}\n              @shapes-changed=${this.onClickMarkerSave}\n              .currentMode=${'view'}\n            ></ox-image-marker>`}\n      </div>\n\n      <dialog>\n        <ox-image-marker-view id=\"link-viewer\" .imageUrl=${this.linkUrl} .shapes=${this.linkShapes}></ox-image-marker-view>\n      </dialog>\n    `\n  }\n\n  protected async updated(changes: PropertyValues): Promise<void> {\n    if (changes.has('buildingInspection') && this.buildingInspection?.checklist) {\n      // 1-1. 위치 정보 - 체크리스트에 들어가는 위치정보 텍스트\n      const location_1 = this.buildingInspection.checklist?.location\n\n      // 1-2. 위치 정보 - 실제 위치정보 텍스트 (동 + 층) - ID 필드를 사용하면 DB ID 필드입니다.\n      const location_building = this.buildingInspection.buildingLevel.building.name\n      const location_floor = this.buildingInspection.buildingLevel.floor\n\n      // 2. 평면도 pdf 파일\n      // mainDrawing {\n      //   id\n      //   name\n      //   fullpath\n      // }\n      const mainDrawing = this.buildingInspection.buildingLevel.mainDrawing\n\n      // 3. 선택 도면\n      const inspectionDrawingType = this.buildingInspection.checklist.inspectionDrawingType\n\n      const shapes = JSON.parse(this.buildingInspection?.drawingMarker || null) || []\n      const markers = await this.drawingImageProvider.getMarkers(inspectionDrawingType)\n\n      this.imageUrl = String(inspectionDrawingType).normalize('NFC')\n      this.shapes = [...shapes, ...markers]\n    }\n  }\n\n  async pageUpdated(changes: any, lifecycle: PageLifecycle) {\n    if (this.active) {\n      this.buildingInspectionId = lifecycle.resourceId || ''\n      await this.initBuildingInspection(this.buildingInspectionId)\n\n      this.imageMarker.reset()\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            drawingMarker\n            checklist {\n              location\n              inspectionDrawingType\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                }\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 async onClickMarkerSave(e) {\n    const response = await client.query({\n      query: gql`\n        mutation UpdateBuildingInspection($patch: UpdateBuildingInspectionDrawingMarker!) {\n          updateBuildingInspection(patch: $patch) {\n            id\n            drawingMarker\n          }\n        }\n      `,\n      variables: {\n        patch: {\n          id: this.buildingInspectionId,\n          drawingMarker: JSON.stringify(e.detail)\n        }\n      }\n    })\n\n    if (response.errors) return\n\n    notify({ message: '저장되었습니다.' })\n  }\n}\n"]}