@dssp/supervision 0.0.32 → 0.0.34

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

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

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/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.reverse().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 = [...this.checklistItemAttachments, ...attachments]
+    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

@@ -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,11 @@ 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'
+import './attachment-list-popup'
 
 export const enum ChecklistMode {
   VIEWER = 'VIEWER',
@@ -56,6 +60,7 @@ class ChecklistView extends connect(store)(LitElement) {
         th {
           border: 1px #999999 solid;
           padding-inline: 8px;
+          vertical-align: middle;
         }
         th {
           background-color: #efefef;
@@ -65,12 +70,8 @@ class ChecklistView extends connect(store)(LitElement) {
           height: 35px;
           &[radio] {
             text-align: center;
-            vertical-align: middle;
             width: 55px;
           }
-          &[attachment] {
-            width: 90px;
-          }
         }
       }
 
@@ -117,6 +118,23 @@ class ChecklistView extends connect(store)(LitElement) {
             text-align: center;
             word-break: keep-all;
           }
+
+          &[attachment] {
+            text-align: center;
+            cursor: pointer;
+
+            * {
+              vertical-align: middle;
+            }
+          }
+          &[comment] {
+            cursor: pointer;
+            text-align: center;
+
+            * {
+              vertical-align: middle;
+            }
+          }
         }
       }
 
@@ -331,8 +349,14 @@ class ChecklistView extends connect(store)(LitElement) {
                     @change=${this._onChangeConfirmStatus}
                   ></md-radio>
                 </td>
-                <td attachment></td>
-                <td></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>
+                </td>
               </tr>`
             })}
           </tbody>
@@ -486,4 +510,61 @@ class ChecklistView extends connect(store)(LitElement) {
       }
     })
   }
+
+  private _onClickComment(checklistItemId: string) {
+    openPopup(
+      html`
+        <comment-list-popup
+          .checklistItemId=${checklistItemId}
+          @change-comment=${this._refreshItem.bind(this)}
+        ></comment-list-popup>
+      `,
+      {
+        backdrop: true,
+        size: 'medium',
+        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 _refreshItem(e) {
+    const { checklistItemId } = e.detail
+    const response = await client.query({
+      query: gql`
+        query ChecklistItem($checklistItemId: String!) {
+          checklistItem(id: $checklistItemId) {
+            id
+            checklistItemCommentCount
+            checklistItemAttachmentCount
+          }
+        }
+      `,
+      variables: {
+        checklistItemId: checklistItemId
+      }
+    })
+
+    const checklistItem = response.data?.checklistItem || []
+    this.checklist.checklistItems = this.checklist.checklistItems.map(item => {
+      return item.id != checklistItemId ? item : { ...item, ...checklistItem }
+    })
+
+    this.requestUpdate()
+  }
 }