@dssp/supervision 1.0.0-alpha.0 → 1.0.0-alpha.14

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

@@ -1,328 +0,0 @@
-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 { BuildingInspectionStatus } from '../building-inspection/building-inspection-list'
-
-@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;
-          padding-right: 10px;
-
-          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;
-        border: 1px solid #ccc;
-      }
-
-      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 = ''
-  @property({ type: String }) status: BuildingInspectionStatus = BuildingInspectionStatus.WAIT
-
-  @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 && this.status != BuildingInspectionStatus.PASS
-                      ? 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 || ''}
-          ?disabled=${this.status == BuildingInspectionStatus.PASS}
-          @input=${this._onInputChange}
-        ></textarea>
-
-        <div button-container>
-          <md-elevated-button blue ?disabled=${this.status == BuildingInspectionStatus.PASS} @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
-              name
-            }
-            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/client/pages/checklist/file-preview-popup.ts

@@ -1,70 +0,0 @@
-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/client/pages/checklist-template/checklist-template-item.ts

@@ -1,240 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/data-grist/ox-grist.js'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { DataGrist } from '@operato/data-grist/ox-grist.js'
-import { client } from '@operato/graphql'
-import { ButtonContainerStyles } from '@operato/styles'
-import { FetchOption } from '@operato/data-grist'
-import { notify } from '@operato/layout'
-import { CHECKLIST_MAIN_TYPE_LIST } from './checklist-type-management'
-
-@customElement('checklist-template-item')
-class ChecklistTemplateItem extends LitElement {
-  static styles = [
-    ButtonContainerStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: var(--md-sys-color-surface);
-      }
-
-      ox-grist {
-        flex: 1;
-      }
-    `
-  ]
-
-  @property({ type: Object }) checklistDetailTypes: any
-  @property({ type: Object }) checklistTemplate: any
-  @property({ type: Object }) gristConfig: any
-
-  @query('ox-grist') grist!: DataGrist
-
-  render() {
-    return html`
-      <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>
-      <div class="button-container">
-        <button danger @click=${this._deleteChecklistTemplateItems.bind(this)}><md-icon>delete</md-icon>삭제</button>
-        <button @click=${this._updateChecklistTemplateItems.bind(this)}><md-icon>save</md-icon>저장</button>
-      </div>
-    `
-  }
-
-  async firstUpdated() {
-    this.gristConfig = {
-      columns: [
-        { type: 'gutter', gutterName: 'row-selector', multiple: true },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          fixed: true,
-          icon: 'add',
-          handlers: {
-            click: 'record-copy'
-          }
-        },
-        { type: 'gutter', gutterName: 'sequence' },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          icon: 'arrow_upward',
-          handlers: {
-            click: 'move-up'
-          }
-        },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          icon: 'arrow_downward',
-          handlers: {
-            click: 'move-down'
-          }
-        },
-        {
-          type: 'number',
-          name: 'sequence',
-          hidden: true
-        },
-        {
-          type: 'string',
-          name: 'id',
-          hidden: true
-        },
-        {
-          type: 'select',
-          name: 'mainType',
-          header: '구분',
-          record: {
-            editable: true,
-            options: [{ display: '', value: '' }].concat(
-              Object.keys(CHECKLIST_MAIN_TYPE_LIST).map(key => ({ display: CHECKLIST_MAIN_TYPE_LIST[key], value: key }))
-            )
-          },
-          width: 150
-        },
-        {
-          type: 'select',
-          name: 'detailType',
-          header: '상세 구분',
-          record: {
-            editable: true,
-            options: (columns, data, column) => [
-              { display: '', value: '' },
-              ...this.checklistDetailTypes.filter(v => v.mainType == column.mainType)
-            ]
-          },
-          width: 250
-        },
-        {
-          type: 'string',
-          name: 'name',
-          header: '검사 항목',
-          record: {
-            editable: true
-          },
-          width: 200
-        },
-        {
-          type: 'string',
-          name: 'inspctionCriteria',
-          header: '검사 기준',
-          record: {
-            editable: true
-          },
-          width: 200
-        }
-      ],
-      rows: {
-        selectable: {
-          multiple: true
-        }
-      },
-      pagination: {
-        infinite: true
-      },
-      sorters: [{ name: 'mainType' }, { name: 'sequence' }]
-    }
-  }
-
-  async fetchHandler({ page, limit, sorters = [] }: FetchOption) {
-    const response = await client.query({
-      query: gql`
-        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          checklistTemplateItems(filters: $filters, pagination: $pagination, sortings: $sortings) {
-            items {
-              id
-              sequence
-              name
-              inspctionCriteria
-              mainType
-              detailType
-            }
-          }
-        }
-      `,
-      variables: {
-        filters: {
-          name: 'checklistTemplateId',
-          value: this.checklistTemplate.id,
-          operator: 'eq'
-        },
-        sortings: [{ name: 'mainType' }, { name: 'sequence' }]
-      }
-    })
-
-    return {
-      total: response.data.checklistTemplateItems.total || 0,
-      records: response.data.checklistTemplateItems.items || []
-    }
-  }
-
-  private async _deleteChecklistTemplateItems() {
-    if (confirm('삭제하시겠습니까?')) {
-      const ids = this.grist.selected.map(record => record.id)
-      if (ids && ids.length > 0) {
-        const response = await client.mutate({
-          mutation: gql`
-            mutation ($ids: [String!]!) {
-              deleteChecklistTemplateItems(ids: $ids)
-            }
-          `,
-          variables: {
-            ids
-          }
-        })
-
-        if (!response.errors) {
-          this.grist.fetch()
-          notify({ message: '삭제되었습니다.' })
-        }
-      }
-    }
-  }
-
-  async _updateChecklistTemplateItems() {
-    let patches = this.grist.dirtyData.records
-    if (patches) {
-      patches = patches.map(patch => {
-        const { __origin__: { __typename, ...patchField } = {}, __dirtyfields__ } = patch
-
-        for (let key in __dirtyfields__) {
-          patchField[key] = __dirtyfields__[key].after
-        }
-
-        return patchField
-      })
-
-      const response = await client.mutate({
-        mutation: gql`
-          mutation UpdateMultipleChecklistTemplateItems($checklistTemplateId: String!, $patches: [ChecklistTemplateItemPatch!]!) {
-            updateMultipleChecklistTemplateItems(checklistTemplateId: $checklistTemplateId, patches: $patches) {
-              id
-            }
-          }
-        `,
-        variables: {
-          checklistTemplateId: this.checklistTemplate.id,
-          patches
-        }
-      })
-
-      if (!response.errors) {
-        this.grist.fetch()
-        notify({ message: '저장되었습니다.' })
-        this.requestRefresh()
-      } else {
-        notify({ message: '저장에 실패하였습니다.', level: 'error' })
-      }
-    }
-  }
-
-  requestRefresh() {
-    this.dispatchEvent(new CustomEvent('requestRefresh'))
-  }
-}