@dssp/project 0.0.2 → 0.0.5

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

@@ -1,3 +1,9 @@
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+import '@material/web/textfield/outlined-text-field.js'
+import '@material/web/button/filled-button.js'
+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'
@@ -8,10 +14,7 @@ import { notify } from '@operato/layout'
 
 import gql from 'graphql-tag'
 import { Building, Project } from './project-list'
-import '@material/web/button/elevated-button.js'
-import '@material/web/textfield/outlined-text-field.js'
-import '@material/web/button/filled-button.js'
-import '@material/web/button/outlined-button.js'
+import '@operato/gantt/ox-gantt.js'
 
 @customElement('project-schedule')
 export class ProjectSchedule extends ScopedElementsMixin(PageView) {
@@ -93,6 +96,15 @@ export class ProjectSchedule extends ScopedElementsMixin(PageView) {
           div[chart] {
             flex: 0.7;
             background: #03a9f44d;
+
+            ox-gantt {
+              max-width: 91vw;
+              aspect-ratio: 3 / 1;
+              box-sizing: border-box;
+
+              background-color: var(--md-sys-color-primary-container);
+              color: var(--md-sys-color-on-primary-container);
+            }
           }
 
           div[table] {
@@ -154,6 +166,271 @@ export class ProjectSchedule extends ScopedElementsMixin(PageView) {
   @state() project: Project = { ...this.defaultProject }
   @state() selectedBuildingIdx: number = 0
 
+  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'],
+      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'],
+      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-2',
+          title: 'Coding-B',
+          type: 'task',
+          // section: developmentSection,
+          startDate: '2023-01-11',
+          endDate: '2023-01-15',
+          dependsOn: '3-1',
+          length: '5d',
+          tags: ['active'],
+          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'],
+      children: []
+    },
+    {
+      id: '5',
+      title: 'Deploy',
+      type: 'milestone',
+      // section: developmentSection,
+      startDate: '2023-01-15',
+      endDate: '2023-01-21',
+      dependsOn: '4',
+      length: '1d',
+      tags: ['milestone'],
+      children: []
+    },
+    {
+      id: '6',
+      title: 'Publishing',
+      type: 'milestone',
+      // section: developmentSection,
+      startDate: '2023-01-11',
+      endDate: '2023-01-15',
+      dependsOn: '5',
+      length: '1d',
+      tags: ['milestone'],
+      children: []
+    },
+    {
+      id: '7',
+      title: 'Provisioning',
+      type: 'milestone',
+      // section: developmentSection,
+      startDate: '2023-01-12',
+      endDate: '2023-01-15',
+      dependsOn: '6',
+      length: '1d',
+      tags: ['milestone'],
+      children: []
+    },
+    {
+      id: '8',
+      title: 'Alpha Test',
+      type: 'milestone',
+      // section: testSection,
+      startDate: '2023-01-15',
+      endDate: '2023-01-17',
+      dependsOn: '7',
+      length: '1d',
+      tags: ['critical'],
+      children: []
+    },
+    {
+      id: '9',
+      title: 'Beta Task',
+      type: 'milestone',
+      // section: testSection,
+      startDate: '2023-01-15',
+      endDate: '2023-01-18',
+      dependsOn: '8',
+      length: '1d',
+      tags: ['active'],
+      children: []
+    },
+    {
+      id: '10',
+      title: 'Gamma Test',
+      type: 'milestone',
+      // section: testSection,
+      startDate: '2023-01-18',
+      endDate: '2023-01-19',
+      dependsOn: '9',
+      length: '1d',
+      tags: ['critical'],
+      children: []
+    },
+    {
+      id: '11',
+      title: 'Zeta Test',
+      type: 'milestone',
+      // section: testSection,
+      startDate: '2023-01-18',
+      endDate: '2023-01-22',
+      dependsOn: '9',
+      length: '1d',
+      tags: ['milestone'],
+      children: []
+    },
+    {
+      id: '12',
+      title: 'Release',
+      type: 'milestone',
+      // section: releaseSection,
+      startDate: '2023-01-18',
+      endDate: '2023-01-23',
+      dependsOn: '9',
+      length: '1d',
+      tags: ['milestone'],
+      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'],
+      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',
+      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'],
+      children: []
+    }
+  ]
+
   render() {
     return html`
       <div header>
@@ -174,7 +451,20 @@ export class ProjectSchedule extends ScopedElementsMixin(PageView) {
       <div body>
         <div chart-container>
           <div chart>
-            <table></table>
+            <ox-gantt
+              from-date=${new Date(this.fromDate).toISOString().split('T')[0]}
+              to-date=${new Date(this.toDate).toISOString().split('T')[0]}
+              .timeScale=${this.timeScale}
+              .tasks=${this.tasks}
+              @date-range-selected=${(e: CustomEvent) => {
+                console.log('date-range-selected', e.detail)
+              }}
+              @task-clicked=${(e: CustomEvent) => {
+                console.log('task-clicked', e.detail)
+              }}
+              ?extend-grid-lines=${this.extendGridLines}
+            >
+            </ox-gantt>
           </div>
           <div table>
             <table></table>
@@ -186,7 +476,7 @@ export class ProjectSchedule extends ScopedElementsMixin(PageView) {
             <div>
               <input type="date" name="startDate" project .value=${this.project.startDate || ''} max="9999-12-31" />
               ~
-              <input type="date" name="startDate" project .value=${this.project.endDate || ''} max="9999-12-31" />
+              <input type="date" name="endDate" project .value=${this.project.endDate || ''} max="9999-12-31" />
             </div>
           </div>
           <div button></div>
@@ -241,7 +531,6 @@ export class ProjectSchedule extends ScopedElementsMixin(PageView) {
     })
 
     this.project = response.data?.project
-    this.selectedBuildingIdx = 0
 
     console.log('init project : ', this.project)
   }

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

@@ -1,16 +1,18 @@
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+import '@material/web/button/outlined-button.js'
+import '@material/web/progress/linear-progress.js'
+import '@material/web/textfield/filled-text-field.js'
+
 import { PageView } from '@operato/shell'
 import { css, html } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 import { client } from '@operato/graphql'
 import { openPopup } from '@operato/layout'
-import '@material/web/button/elevated-button.js'
-import '@material/web/button/outlined-button.js'
-import '@material/web/progress/linear-progress.js'
-import '@material/web/textfield/filled-text-field.js'
 
 import gql from 'graphql-tag'
-import './project-create-popup'
+import './popup/popup-project-create'
 import { Project } from './project-list'
 
 @customElement('project-setting-list')
@@ -80,9 +82,11 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
           background-color: #ffffff;
           border: 1px solid #cccccc80;
           border-radius: 5px;
+          align-items: center;
 
           img[project-img] {
             width: 285px;
+            aspect-ratio: 2;
             background-color: #cccccc80;
           }
 
@@ -276,7 +280,7 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
   }
 
   private _openCreateProjectPopup() {
-    openPopup(html`<project-create-popup .refreshFn=${this.getProjectList.bind(this)}></project-create-popup>`, {
+    openPopup(html`<popup-project-create .refreshFn=${this.getProjectList.bind(this)}></popup-project-create>`, {
       backdrop: true,
       size: 'small',
       title: '신규 프로젝트 생성'

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

@@ -1,3 +1,7 @@
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+import '@material/web/textfield/outlined-text-field.js'
+
 import { PageView } from '@operato/shell'
 import { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'
 import { css, html } from 'lit'
@@ -8,8 +12,6 @@ import { notify } from '@operato/layout'
 
 import gql from 'graphql-tag'
 import { Project } from './project-list'
-import '@material/web/button/elevated-button.js'
-import '@material/web/textfield/outlined-text-field.js'
 
 @customElement('project-update')
 export class ProjectUpdate extends ScopedElementsMixin(PageView) {
@@ -40,6 +42,7 @@ export class ProjectUpdate extends ScopedElementsMixin(PageView) {
       md-outlined-text-field[type='textarea'] {
         width: 100%;
         height: 130px;
+        resize: none;
       }
 
       ox-input-image {

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

@@ -0,0 +1,192 @@
+import '@operato/data-grist'
+import '@operato/context/ox-context-page-toolbar.js'
+
+import { CommonGristStyles, 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 gql from 'graphql-tag'
+
+@customElement('construction-type-management')
+export class ConstructionTypeManagement 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._updateConstructionTypes.bind(this),
+          icon: 'save'
+        },
+        {
+          title: '삭제',
+          action: this._deleteConstructionTypes.bind(this),
+          icon: 'delete'
+        }
+      ]
+    }
+  }
+
+  render() {
+    return html`
+      <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom" class="header">
+          <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
+        </div>
+      </ox-grist>
+      <div>
+        <button @click=${this._updateConstructionTypes.bind(this)}>저장</button>
+        <button @click=${this._deleteConstructionTypes.bind(this)}>삭제</button>
+      </div>
+    `
+  }
+
+  async pageInitialized(lifecycle: any) {
+    this.gristConfig = {
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'string',
+          name: 'name',
+          header: '이름',
+          record: {
+            editable: true
+          },
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: '설명',
+          record: {
+            editable: true
+          },
+          width: 200
+        },
+        {
+          type: 'datetime',
+          name: 'createdAt',
+          header: '생성 시간',
+          width: 200
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: '수정 시간',
+          width: 200
+        }
+      ],
+      pagination: { infinite: true }
+    }
+  }
+
+  async fetchHandler() {
+    const response = await client.query({
+      query: gql`
+        query ConstructionTypes {
+          constructionTypes {
+            items {
+              id
+              name
+              description
+              createdAt
+              updatedAt
+            }
+            total
+          }
+        }
+      `
+    })
+
+    if (response.errors) return {}
+
+    return {
+      total: response.data.constructionTypes.total || 0,
+      records: response.data.constructionTypes.items || []
+    }
+  }
+
+  async _updateConstructionTypes() {
+    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 UpdateMultipleConstructionType($patches: [ConstructionTypePatch!]!) {
+            updateMultipleConstructionType(patches: $patches) {
+              id
+            }
+          }
+        `,
+        variables: {
+          patches
+        }
+      })
+
+      if (!response.errors) {
+        this.grist.fetch()
+        notify({ message: '저장되었습니다.' })
+      } else {
+        notify({ message: '저장에 실패하였습니다.', level: 'error' })
+      }
+    }
+  }
+
+  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({
+          mutation: gql`
+            mutation DeleteConstructionTypes($ids: [String!]!) {
+              deleteConstructionTypes(ids: $ids)
+            }
+          `,
+          variables: {
+            ids
+          }
+        })
+
+        if (!response.errors) {
+          this.grist.fetch()
+          notify({ message: '삭제되었습니다.' })
+        }
+      }
+    }
+  }
+}