@dssp/supervision 0.0.9 → 0.0.10

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

@@ -0,0 +1,186 @@
+import '@material/web/icon/icon.js'
+import '@operato/data-grist'
+
+import { CommonGristStyles, CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { PageView } from '@operato/shell'
+import { css, html } from 'lit'
+import { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'
+import { customElement, query, state } from 'lit/decorators.js'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { client } from '@operato/graphql'
+import { notify } from '@operato/layout'
+import gql from 'graphql-tag'
+import { openPopup } from '@operato/layout'
+
+import './component/building-inspection-detail-header'
+import '../checklist/checklist-view'
+import { ChecklistMode } from '../checklist/checklist-view'
+
+@customElement('building-inspection-detail-checklist')
+export class BuildingInspectionDetailChecklist extends ScopedElementsMixin(PageView) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: grid;
+        grid-template-rows: 75px auto;
+        color: #4e5055;
+
+        width: 100%;
+        background-color: #f7f7f7;
+        overflow-y: auto;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+
+      *[bold] {
+        font-weight: bold;
+      }
+
+      div[body] {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+
+        div[button-container] {
+          display: flex;
+          justify-content: flex-end;
+          width: 100%;
+          gap: 10px;
+          margin-right: 50px;
+          margin-bottom: 15px;
+        }
+      }
+    `
+  ]
+
+  @state() project: any = {}
+  @state() buildingInspection: any = {}
+
+  get context() {
+    return {
+      title: '검측 관리 상세 - 검측 체크리스트'
+    }
+  }
+
+  render() {
+    return html`
+      <building-inspection-detail-header
+        .buildingInspectionId=${this.buildingInspection?.id}
+        .buildingLevelId=${this.buildingInspection?.buildingLevel?.id}
+        .projectName=${this.project.name}
+        .buildingName=${this.buildingInspection?.buildingLevel?.building?.name}
+        .buildingLevelFloor=${this.buildingInspection?.buildingLevel?.floor}
+      ></building-inspection-detail-header>
+
+      <div body>
+        <checklist-view
+          .mode=${ChecklistMode.EDITOR}
+          status=${this.buildingInspection.status}
+          .checklist=${this.buildingInspection.checklist || {}}
+        ></checklist-view>
+
+        <div button-container>
+          <md-elevated-button @click=${this._onClickModifyChecklist}>
+            <md-icon slot="icon">assignment</md-icon>등록
+          </md-elevated-button>
+          <md-elevated-button> <md-icon slot="icon">assignment</md-icon>취소 </md-elevated-button>
+        </div>
+      </div>
+    `
+  }
+
+  async pageUpdated(changes: any, lifecycle: PageLifecycle) {
+    if (this.active) {
+      const buildingInspectionId = lifecycle.resourceId || ''
+      await this.initBuildingInspection(buildingInspectionId)
+    }
+  }
+
+  async initBuildingInspection(buildingInspectionId: string = '') {
+    const response = await client.query({
+      query: gql`
+        query BuildingInspection($buildingInspectionId: String!) {
+          buildingInspection(id: $buildingInspectionId) {
+            id
+            status
+            requestDate
+            checklist {
+              id
+              name
+              constructionType
+              constructionDetailType
+              location
+              inspectionParts
+              documentNo
+              checklistItems {
+                id
+                name
+                sequence
+                mainType
+                detailType
+                inspctionCriteria
+                constructionConfirmStatus
+                supervisoryConfirmStatus
+                comment
+              }
+            }
+            buildingLevel {
+              id
+              floor
+              mainDrawing {
+                id
+                name
+                fullpath
+              }
+              mainDrawingImage
+              building {
+                id
+                name
+                buildingComplex {
+                  id
+                }
+              }
+            }
+          }
+        }
+      `,
+      variables: {
+        buildingInspectionId
+      }
+    })
+
+    if (response.errors) return
+
+    this.buildingInspection = response.data.buildingInspection
+
+    await this._getProjectByBuildingComplexId(this.buildingInspection?.buildingLevel?.building?.buildingComplex?.id)
+  }
+
+  private async _getProjectByBuildingComplexId(buildingComplexId) {
+    const response = await client.query({
+      query: gql`
+        query ProjectByBuildingComplexId($buildingComplexId: String!) {
+          project: projectByBuildingComplexId(buildingComplexId: $buildingComplexId) {
+            id
+            name
+          }
+        }
+      `,
+      variables: {
+        buildingComplexId
+      }
+    })
+
+    if (response.errors) return
+
+    this.project = response.data.project
+  }
+
+  private _onClickModifyChecklist() {
+    console.log('checklist : ', this.buildingInspection.checklist)
+  }
+}

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

@@ -0,0 +1,160 @@
+import '@material/web/icon/icon.js'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { PageView } from '@operato/shell'
+import { css, html } from 'lit'
+import { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'
+import { customElement, query, state } from 'lit/decorators.js'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { client } from '@operato/graphql'
+import { notify } from '@operato/layout'
+import gql from 'graphql-tag'
+import './component/building-inspection-detail-header'
+import '@operato/image-marker/ox-image-marker.js'
+
+@customElement('building-inspection-detail-drawing')
+export class BuildingInspectionDetailDrawing extends ScopedElementsMixin(PageView) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: grid;
+        grid-template-rows: 75px auto;
+        color: #4e5055;
+
+        width: 100%;
+        background-color: #f7f7f7;
+        overflow-y: auto;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+
+      div[body] {
+        display: flex;
+        justify-content: center;
+      }
+    `
+  ]
+
+  @state() project: any = {}
+  @state() buildingInspection: any = {}
+  @state() buildingInspectionId: string = ''
+
+  get context() {
+    return {
+      title: '검측 관리 상세 - 검측 도면'
+    }
+  }
+
+  render() {
+    return html`
+      <building-inspection-detail-header
+        .buildingInspectionId=${this.buildingInspection?.id}
+        .buildingLevelId=${this.buildingInspection?.buildingLevel?.id}
+        .projectName=${this.project.name}
+        .buildingName=${this.buildingInspection?.buildingLevel?.building?.name}
+        .buildingLevelFloor=${this.buildingInspection?.buildingLevel?.floor}
+      ></building-inspection-detail-header>
+
+      <div body>
+        <ox-image-marker
+          .imageUrl=${this.buildingInspection?.buildingLevel?.mainDrawingImage || '/assets/images/img-drawing-default.png'}
+          .shapes=${JSON.parse(this.buildingInspection?.drawingMarker || [])}
+          @shapes-changed=${this.onClickMarkerSave}
+        ></ox-image-marker>
+      </div>
+    `
+  }
+
+  async pageUpdated(changes: any, lifecycle: PageLifecycle) {
+    if (this.active) {
+      this.buildingInspectionId = lifecycle.resourceId || ''
+      await this.initBuildingInspection(this.buildingInspectionId)
+    }
+  }
+
+  async initBuildingInspection(buildingInspectionId: string = '') {
+    const response = await client.query({
+      query: gql`
+        query BuildingInspection($buildingInspectionId: String!) {
+          buildingInspection(id: $buildingInspectionId) {
+            id
+            status
+            requestDate
+            drawingMarker
+            buildingLevel {
+              id
+              floor
+              mainDrawing {
+                id
+                name
+                fullpath
+              }
+              mainDrawingImage
+              building {
+                id
+                name
+                buildingComplex {
+                  id
+                }
+              }
+            }
+          }
+        }
+      `,
+      variables: {
+        buildingInspectionId
+      }
+    })
+
+    if (response.errors) return
+
+    this.buildingInspection = response.data.buildingInspection
+
+    await this._getProjectByBuildingComplexId(this.buildingInspection?.buildingLevel?.building?.buildingComplex?.id)
+  }
+
+  private async _getProjectByBuildingComplexId(buildingComplexId) {
+    const response = await client.query({
+      query: gql`
+        query ProjectByBuildingComplexId($buildingComplexId: String!) {
+          project: projectByBuildingComplexId(buildingComplexId: $buildingComplexId) {
+            id
+            name
+          }
+        }
+      `,
+      variables: {
+        buildingComplexId
+      }
+    })
+
+    if (response.errors) return
+
+    this.project = response.data.project
+  }
+
+  private async onClickMarkerSave(e) {
+    const response = await client.query({
+      query: gql`
+        mutation UpdateBuildingInspection($patch: UpdateBuildingInspection!) {
+          updateBuildingInspection(patch: $patch) {
+            id
+            drawingMarker
+          }
+        }
+      `,
+      variables: {
+        patch: {
+          id: this.buildingInspectionId,
+          drawingMarker: JSON.stringify(e.detail)
+        }
+      }
+    })
+
+    if (response.errors) return
+
+    notify({ message: '저장되었습니다.' })
+  }
+}