@dssp/project 0.0.8 → 0.0.10

package/client/pages/resource/construction-detail-type-popup.ts

@@ -0,0 +1,201 @@
+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'
+
+@customElement('construction-detail-type-popup')
+class ConstructionDetailTypePopup 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 }) constructionType: 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._deleteConstructionDetailType.bind(this)}><md-icon>delete</md-icon>삭제</button>
+        <button @click=${this._updateConstructionDetailType.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: 'string',
+          name: 'name',
+          header: '세부 공종 이름',
+          record: {
+            editable: true
+          },
+          width: 200
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: true
+        }
+      },
+      pagination: {
+        infinite: true
+      },
+      sorters: [{ name: 'sequence' }]
+    }
+  }
+
+  async fetchHandler({ page, limit, sorters = [] }: FetchOption) {
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          constructionDetailTypes(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              sequence
+              name
+            }
+          }
+        }
+      `,
+      variables: {
+        filters: {
+          name: 'constructionTypeId',
+          value: this.constructionType.id,
+          operator: 'eq'
+        },
+        sortings: [{ name: 'sequence' }]
+      }
+    })
+
+    return {
+      total: response.data.constructionDetailTypes.total || 0,
+      records: response.data.constructionDetailTypes.items || []
+    }
+  }
+
+  private async _deleteConstructionDetailType() {
+    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!]!) {
+              deleteConstructionDetailTypes(ids: $ids)
+            }
+          `,
+          variables: {
+            ids
+          }
+        })
+
+        if (!response.errors) {
+          this.grist.fetch()
+          notify({ message: '삭제되었습니다.' })
+        }
+      }
+    }
+  }
+
+  async _updateConstructionDetailType() {
+    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 UpdateMultipleConstructionDetailType($constructionTypeId: String!, $patches: [ConstructionDetailTypePatch!]!) {
+            updateMultipleConstructionDetailType(constructionTypeId: $constructionTypeId, patches: $patches) {
+              id
+            }
+          }
+        `,
+        variables: {
+          constructionTypeId: this.constructionType.id,
+          patches
+        }
+      })
+
+      if (!response.errors) {
+        this.grist.fetch()
+        notify({ message: '저장되었습니다.' })
+        this.requestRefresh()
+      } else {
+        notify({ message: '저장에 실패하였습니다.', level: 'error' })
+      }
+    }
+  }
+
+  requestRefresh() {
+    this.dispatchEvent(new CustomEvent('requestRefresh'))
+  }
+}

package/client/pages/resource/construction-type-management.ts

@@ -1,14 +1,15 @@
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 
-import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonGristStyles, CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
 import { PageView } from '@operato/shell'
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { DataGrist } from '@operato/data-grist'
 import { client } from '@operato/graphql'
-import { notify } from '@operato/layout'
+import { notify, openPopup } from '@operato/layout'
 import gql from 'graphql-tag'
+import './construction-detail-type-popup'
 
 @customElement('construction-type-management')
 export class ConstructionTypeManagement extends PageView {
@@ -25,32 +26,6 @@ export class ConstructionTypeManagement extends PageView {
         --grid-record-emphasized-background-color: red;
         --grid-record-emphasized-color: yellow;
       }
-
-      md-elevated-button {
-        margin: 0px 3px;
-
-        --md-elevated-button-container-height: 35px;
-        --md-elevated-button-label-text-size: 16px;
-        --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;
-
-        &[red] {
-          --md-elevated-button-container-color: #e15757;
-        }
-      }
-
-      div[button-container] {
-        padding: 0 5px 10px 0;
-        text-align: right;
-      }
     `
   ]
 
@@ -59,21 +34,25 @@ export class ConstructionTypeManagement extends PageView {
 
   get context() {
     return {
-      title: '공종 관리'
+      title: '공종 관리',
+      actions: [
+        {
+          title: '저장',
+          action: this._updateConstructionTypes.bind(this),
+          ...CommonButtonStyles.save
+        },
+        {
+          title: '삭제',
+          action: this._deleteConstructionTypes.bind(this),
+          ...CommonButtonStyles.delete
+        }
+      ]
     }
   }
 
   render() {
     return html`
       <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}> </ox-grist>
-      <div button-container>
-        <md-elevated-button @click=${this._updateConstructionTypes.bind(this)}>
-          <md-icon slot="icon">save</md-icon>저장</md-elevated-button
-        >
-        <md-elevated-button red @click=${this._deleteConstructionTypes.bind(this)}>
-          <md-icon slot="icon">delete</md-icon>삭제</md-elevated-button
-        >
-      </div>
     `
   }
 
@@ -82,6 +61,30 @@ export class ConstructionTypeManagement extends PageView {
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
         { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          fixed: true,
+          icon: 'reorder',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              if (!record.id) return
+              openPopup(
+                html`
+                  <construction-detail-type-popup
+                    .constructionType=${record}
+                    @requestRefresh="${() => this.grist.fetch()}"
+                  ></construction-detail-type-popup>
+                `,
+                {
+                  backdrop: true,
+                  size: 'large',
+                  title: '세부 공종'
+                }
+              )
+            }
+          }
+        },
         {
           type: 'string',
           name: 'name',
@@ -186,8 +189,6 @@ export class ConstructionTypeManagement extends PageView {
 
   async _deleteConstructionTypes() {
     if (confirm('삭제하시겠습니까?')) {
-      const a = this.grist
-
       const ids = this.grist.selected.map(record => record.id)
       if (ids && ids.length > 0) {
         const response = await client.mutate({

package/client/pages/resource/inspection-drawing-type-management.ts

@@ -0,0 +1,210 @@
+import '@operato/data-grist'
+import '@operato/context/ox-context-page-toolbar.js'
+
+import { CommonGristStyles, CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { PageView } from '@operato/shell'
+import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { DataGrist } from '@operato/data-grist'
+import { client } from '@operato/graphql'
+import { notify, openPopup } from '@operato/layout'
+import gql from 'graphql-tag'
+import './inspection-part-popup'
+
+@customElement('inspection-drawing-type-management')
+export class InspectionDrawingTypeManagement extends PageView {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+    `
+  ]
+
+  @property({ type: Object }) gristConfig: any
+  @query('ox-grist') private grist!: DataGrist
+
+  get context() {
+    return {
+      title: '도면 타입 관리',
+      actions: [
+        {
+          title: '저장',
+          action: this._updateInspectionDrawingTypes.bind(this),
+          ...CommonButtonStyles.save
+        },
+        {
+          title: '삭제',
+          action: this._deleteInspectionDrawingTypes.bind(this),
+          ...CommonButtonStyles.delete
+        }
+      ]
+    }
+  }
+
+  render() {
+    return html`
+      <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}> </ox-grist>
+    `
+  }
+
+  async pageInitialized(lifecycle: any) {
+    this.gristConfig = {
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          fixed: true,
+          icon: 'reorder',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              if (!record.id) return
+              openPopup(
+                html`
+                  <inspection-part-popup
+                    .inspectionDrawingType=${record}
+                    @requestRefresh="${() => this.grist.fetch()}"
+                  ></inspection-part-popup>
+                `,
+                {
+                  backdrop: true,
+                  size: 'large',
+                  title: '검측 부위 관리'
+                }
+              )
+            }
+          }
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: '검측 도면 타입',
+          record: {
+            editable: true
+          },
+          width: 150
+        },
+        {
+          type: 'datetime',
+          name: 'createdAt',
+          header: '생성 시간',
+          width: 200
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: '수정 시간',
+          width: 200
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: true
+        }
+      },
+      sorters: [{ name: 'updatedAt', desc: true }],
+      pagination: { infinite: true }
+    }
+  }
+
+  async fetchHandler() {
+    const response = await client.query({
+      query: gql`
+        query InspectionDrawingTypes($sortings: [Sorting!]) {
+          inspectionDrawingTypes(sortings: $sortings) {
+            items {
+              id
+              name
+              createdAt
+              updatedAt
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        sortings: [
+          {
+            name: 'name'
+          }
+        ]
+      }
+    })
+
+    if (response.errors) return {}
+
+    return {
+      total: response.data.inspectionDrawingTypes.total || 0,
+      records: response.data.inspectionDrawingTypes.items || []
+    }
+  }
+
+  async _updateInspectionDrawingTypes() {
+    let patches = this.grist.dirtyRecords
+    if (patches && patches.length) {
+      patches = patches.map(patch => {
+        let patchField: any = patch.id ? { id: patch.id } : {}
+        const dirtyFields = patch.__dirtyfields__
+        for (let key in dirtyFields) {
+          patchField[key] = dirtyFields[key].after
+        }
+        patchField.cuFlag = patch.__dirty__
+
+        return patchField
+      })
+
+      const response = await client.mutate({
+        mutation: gql`
+          mutation UpdateMultipleInspectionDrawingType($patches: [InspectionDrawingTypePatch!]!) {
+            updateMultipleInspectionDrawingType(patches: $patches) {
+              id
+            }
+          }
+        `,
+        variables: {
+          patches
+        }
+      })
+
+      if (!response.errors) {
+        this.grist.fetch()
+        notify({ message: '저장되었습니다.' })
+      } else {
+        notify({ message: '저장에 실패하였습니다.', level: 'error' })
+      }
+    }
+  }
+
+  async _deleteInspectionDrawingTypes() {
+    if (confirm('삭제하시겠습니까?')) {
+      const ids = this.grist.selected.map(record => record.id)
+      if (ids && ids.length > 0) {
+        const response = await client.mutate({
+          mutation: gql`
+            mutation DeleteInspectionDrawingTypes($ids: [String!]!) {
+              deleteInspectionDrawingTypes(ids: $ids)
+            }
+          `,
+          variables: {
+            ids
+          }
+        })
+
+        if (!response.errors) {
+          this.grist.fetch()
+          notify({ message: '삭제되었습니다.' })
+        }
+      }
+    }
+  }
+}