@dssp/project 0.0.9 → 0.0.11

package/client/pages/project/project-schedule.ts

@@ -7,15 +7,32 @@ import '@material/web/button/outlined-button.js'
 import { PageView } from '@operato/shell'
 import { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'
 import { css, html } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
+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 { i18next } from '@operato/i18n'
 
 import gql from 'graphql-tag'
-import { Building, Project } from './project-list'
+import { Project } from './project-list'
 import '@operato/gantt/ox-gantt.js'
 
+const TaskFragment = gql`
+  fragment TaskFragment on Task {
+    type
+    title: name
+    id: code
+    duration
+    startDate
+    endDate
+    dependsOn
+    progress
+    resources {
+      type
+      allocated
+    }
+  }
+`
+
 @customElement('project-schedule')
 export class ProjectSchedule extends ScopedElementsMixin(PageView) {
   static styles = [
@@ -153,342 +170,43 @@ export class ProjectSchedule extends ScopedElementsMixin(PageView) {
   @state() projectId: string = ''
   @state() project: Project = { ...this.defaultProject }
   @state() selectedBuildingIdx: number = 0
+  @state() tasks
+
+  @state() private fromDate = '2024-01-01'
+  @state() private toDate = '2024-12-31'
+
+  @query('input[name="startDate"]') inputStartDate!: HTMLInputElement
+  @query('input[name="endDate"]') inputEndDate!: HTMLInputElement
 
-  private fromDate = '2022-12-27'
-  private toDate = '2024-12-31'
   private timeScale = 'week-day'
   private extendGridLines = false
-  private tasks = [
-    {
-      id: '1',
-      title: 'Design',
-      type: 'task',
-      // section: developmentSection,
-      startDate: '2023-01-01',
-      endDate: '2023-01-05',
-      progress: 60,
-      dependsOn: '',
-      length: '5d',
-      tags: ['active'],
-      resources: [{ type: '철근/형틀공', allocated: 6 }],
-      children: []
-    },
-    {
-      id: '2',
-      title: 'Development',
-      type: 'milestone',
-      // section: developmentSection,
-      startDate: '2023-01-06',
-      endDate: '2023-01-06',
-      progress: 30,
-      dependsOn: '1',
-      length: '1d',
-      tags: ['milestone'],
-      resources: [{ type: '철근/형틀공', allocated: 6 }],
-      children: []
-    },
-    {
-      id: '3',
-      title: 'Coding',
-      type: 'phase',
-      // section: developmentSection,
-      startDate: '2023-01-07',
-      endDate: '2023-01-15',
-      progress: 10,
-      dependsOn: '2',
-      length: '9d',
-      tags: ['critical'],
-      children: [
-        {
-          id: '3-1',
-          title: 'Coding-A',
-          type: 'task',
-          // section: developmentSection,
-          startDate: '2023-01-07',
-          endDate: '2023-01-10',
-          progress: 60,
-          dependsOn: '',
-          length: '4d',
-          tags: ['done'],
-          children: [
-            {
-              id: '3-1-1',
-              title: 'Coding-A',
-              type: 'task',
-              // section: developmentSection,
-              startDate: '2023-01-07',
-              endDate: '2023-01-10',
-              progress: 60,
-              dependsOn: '',
-              length: '4d',
-              tags: ['active'],
-              resources: [{ type: '창호공', allocated: 5 }],
-              children: []
-            },
-            {
-              id: '3-1-2',
-              title: 'Coding-B',
-              type: 'task',
-              // section: developmentSection,
-              startDate: '2023-01-11',
-              endDate: '2023-01-15',
-              dependsOn: '3-1-1',
-              length: '5d',
-              tags: ['active'],
-              resources: [{ type: '창호공', allocated: 3 }],
-              children: []
-            }
-          ]
-        },
-        {
-          id: '3-2',
-          title: 'Coding-B',
-          type: 'task',
-          // section: developmentSection,
-          startDate: '2023-01-11',
-          endDate: '2023-01-15',
-          dependsOn: '3-1',
-          length: '5d',
-          tags: ['active'],
-          resources: [{ type: '창호공', allocated: 6 }],
-          children: []
-        }
-      ]
-    },
-    {
-      id: '4',
-      title: 'Test',
-      type: 'milestone',
-      // section: developmentSection,
-      startDate: '2023-01-07',
-      endDate: '2023-01-10',
-      progress: 100,
-      dependsOn: '1',
-      length: '1d',
-      tags: ['done'],
-      resources: [{ type: '방수공', allocated: 5 }],
-      children: []
-    },
-    {
-      id: '5',
-      title: 'Deploy',
-      type: 'milestone',
-      // section: developmentSection,
-      startDate: '2023-01-15',
-      endDate: '2023-01-21',
-      dependsOn: '4',
-      length: '1d',
-      tags: ['milestone'],
-      resources: [{ type: '목공', allocated: 3 }],
-      children: []
-    },
-    {
-      id: '6',
-      title: 'Publishing',
-      type: 'milestone',
-      // section: developmentSection,
-      startDate: '2023-01-11',
-      endDate: '2023-01-15',
-      dependsOn: '5',
-      length: '1d',
-      tags: ['milestone'],
-      resources: [{ type: '금속공', allocated: 1 }],
-      children: []
-    },
-    {
-      id: '7',
-      title: 'Provisioning',
-      type: 'milestone',
-      // section: developmentSection,
-      startDate: '2023-01-12',
-      endDate: '2023-01-15',
-      dependsOn: '6',
-      length: '1d',
-      tags: ['milestone'],
-      resources: [{ type: '타일공', allocated: 6 }],
-      children: []
-    },
-    {
-      id: '8',
-      title: 'Alpha Test',
-      type: 'milestone',
-      // section: testSection,
-      startDate: '2023-01-15',
-      endDate: '2023-01-17',
-      dependsOn: '7',
-      length: '1d',
-      tags: ['critical'],
-      resources: [{ type: '창호공', allocated: 7 }],
-      children: []
-    },
-    {
-      id: '9',
-      title: 'Beta Task',
-      type: 'milestone',
-      // section: testSection,
-      startDate: '2023-01-15',
-      endDate: '2023-01-18',
-      dependsOn: '8',
-      length: '1d',
-      tags: ['active'],
-      resources: [{ type: '도배공', allocated: 8 }],
-      children: []
-    },
-    {
-      id: '10',
-      title: 'Gamma Test',
-      type: 'milestone',
-      // section: testSection,
-      startDate: '2023-01-18',
-      endDate: '2023-01-19',
-      dependsOn: '9',
-      length: '1d',
-      tags: ['critical'],
-      resources: [{ type: '조적공', allocated: 6 }],
-      children: []
-    },
-    {
-      id: '11',
-      title: 'Zeta Test',
-      type: 'milestone',
-      // section: testSection,
-      startDate: '2023-01-18',
-      endDate: '2023-01-22',
-      dependsOn: '9',
-      length: '1d',
-      tags: ['milestone'],
-      resources: [{ type: '철근/형틀공', allocated: 6 }],
-      children: []
-    },
-    {
-      id: '12',
-      title: 'Release',
-      type: 'milestone',
-      // section: releaseSection,
-      startDate: '2023-01-18',
-      endDate: '2023-01-23',
-      dependsOn: '9',
-      length: '1d',
-      resources: [{ type: '방수공', allocated: 6 }],
-      tags: ['milestone'],
-      children: [
-        {
-          id: '12-1',
-          title: 'Coding-A',
-          type: 'task',
-          // section: developmentSection,
-          startDate: '2023-01-07',
-          endDate: '2023-01-10',
-          progress: 60,
-          dependsOn: '',
-          length: '4d',
-          tags: ['done'],
-          resources: [{ type: '방수공', allocated: 6 }],
-          children: []
-        },
-        {
-          id: '12-2',
-          title: 'Coding-B',
-          type: 'task',
-          // section: developmentSection,
-          startDate: '2023-01-11',
-          endDate: '2023-01-15',
-          dependsOn: '12-1',
-          length: '5d',
-          tags: ['active'],
-          resources: [{ type: '조적공', allocated: 6 }],
-          children: []
-        }
-      ]
-    },
-    {
-      id: '13',
-      title: 'Release',
-      type: 'milestone',
-      // section: releaseSection,
-      startDate: '2023-01-22',
-      endDate: '2023-01-27',
-      dependsOn: '12',
-      length: '1d',
-      tags: ['done'],
-      children: []
-    },
-    {
-      id: '14',
-      title: 'Release',
-      type: 'milestone',
-      // section: releaseSection,
-      startDate: '2023-01-27',
-      endDate: '2023-01-30',
-      dependsOn: '13',
-      length: '1d',
-      tags: ['milestone'],
-      resources: [{ type: '금속공', allocated: 1 }],
-      children: []
-    },
-    {
-      id: '15',
-      title: 'Release',
-      type: 'milestone',
-      // section: releaseSection,
-      startDate: '2023-01-30',
-      endDate: '2023-01-31',
-      dependsOn: '14',
-      length: '1d',
-      tags: ['milestone'],
-      children: []
-    },
-    {
-      id: '16',
-      title: 'Release',
-      type: 'milestone',
-      // section: releaseSection,
-      startDate: '2023-01-31',
-      endDate: '2023-02-05',
-      dependsOn: '15',
-      length: '1d',
-      resources: [{ type: '창호공', allocated: 1 }],
-      tags: ['active'],
-      children: []
-    },
-    {
-      id: '17',
-      title: 'Release',
-      type: 'milestone',
-      // section: releaseSection,
-      startDate: '2023-02-06',
-      endDate: '2023-02-07',
-      dependsOn: '16',
-      length: '1d',
-      tags: ['milestone'],
-      children: []
-    },
-    {
-      id: '18',
-      title: 'Release',
-      type: 'milestone',
-      // section: releaseSection,
-      startDate: '2023-02-08',
-      endDate: '2023-02-09',
-      dependsOn: '17',
-      length: '1d',
-      tags: ['critical'],
-      children: []
-    },
-    {
-      id: '19',
-      title: 'Release',
-      type: 'milestone',
-      // section: releaseSection,
-      startDate: '2023-02-10',
-      endDate: '2023-02-25',
-      dependsOn: '18',
-      length: '1d',
-      tags: ['milestone'],
-      resources: [{ type: '창호공', allocated: 7 }],
-      children: []
-    }
-  ]
+
+  private columnConfigProvider = function () {
+    return [
+      { name: 'title', label: i18next.t('label.gantt-task-title') || 'title', visible: true, width: 150, order: 1 },
+      {
+        name: 'startDate',
+        label: i18next.t('label.gantt-task-start-date') || 'start date',
+        visible: true,
+        width: 100,
+        order: 2
+      },
+      {
+        name: 'resources',
+        label: i18next.t('label.gantt-task-resources') || 'resources',
+        visible: true,
+        width: 100,
+        order: 3
+      },
+      {
+        name: 'duration',
+        label: i18next.t('label.gantt-task-duration') || 'duration',
+        visible: true,
+        width: 30,
+        order: 4
+      }
+    ]
+  }
 
   render() {
     return html`
@@ -520,12 +238,16 @@ export class ProjectSchedule extends ScopedElementsMixin(PageView) {
             console.log('task-clicked', e.detail)
           }}
           ?extend-grid-lines=${this.extendGridLines}
+          .columnConfigProvider=${this.columnConfigProvider}
+          .colorProvider=${task => {
+            return task.type == 'group' ? 'green' : 'orange'
+          }}
         >
         </ox-gantt>
         <div select-container>
           <div date>
             <span name>기간선택</span>
-            <div>
+            <div @change=${() => this.onChangePeriodRange()}>
               <input type="date" name="startDate" project .value=${this.project.startDate || ''} max="9999-12-31" />
               ~
               <input type="date" name="endDate" project .value=${this.project.endDate || ''} max="9999-12-31" />
@@ -549,10 +271,21 @@ export class ProjectSchedule extends ScopedElementsMixin(PageView) {
   async initProject(projectId: string = '') {
     const response = await client.query({
       query: gql`
-        query Project($id: String!) {
+        query Project($id: String!, $sortings: [Sorting!]) {
           project(id: $id) {
             id
             name
+            startDate
+            endDate
+            rootTasks {
+              ...TaskFragment
+              children(sortings: $sortings) {
+                ...TaskFragment
+                children(sortings: $sortings) {
+                  ...TaskFragment
+                }
+              }
+            }
             buildingComplex {
               id
               planXScale
@@ -576,14 +309,28 @@ export class ProjectSchedule extends ScopedElementsMixin(PageView) {
             }
           }
         }
+
+        ${TaskFragment}
       `,
       variables: {
-        id: projectId
+        id: projectId,
+        sortings: [{ name: 'startDate' }]
       }
     })
 
     this.project = response.data?.project
+    this.tasks = response.data?.project.rootTasks
+
+    if (this.project) {
+      this.fromDate = this.project.startDate || '2024-01-01' /* TODO default: start date of this year - 3 */
+      this.toDate = this.project.endDate || '2024-12-31' /* TODO defaule: end date of this year + 3 */
+    }
 
     console.log('init project : ', this.project)
   }
+
+  onChangePeriodRange() {
+    this.fromDate = this.inputStartDate.value
+    this.toDate = this.inputEndDate.value
+  }
 }

package/client/pages/project/project-setting-list.ts

@@ -257,8 +257,8 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
   async getProjectList() {
     const response = await client.query({
       query: gql`
-        query Projects($projectName: String!) {
-          projects(projectName: $projectName) {
+        query Projects($filters: [Filter!]) {
+          projects(filters: $filters) {
             items {
               id
               name
@@ -279,7 +279,15 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
         }
       `,
       variables: {
-        projectName: this.projectName || ''
+        filters: this.projectName
+          ? [
+              {
+                name: 'name',
+                operator: 'search',
+                value: `%${this.projectName}%`
+              }
+            ]
+          : []
       }
     })
 

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'))
+  }
+}