@dssp/project 0.0.8 → 0.0.10

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

@@ -7,22 +7,40 @@ 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 = [
     css`
       :host {
-        display: grid;
-        grid-template-rows: 75px auto;
+        display: flex;
+        flex-direction: column;
+
         color: #4e5055;
 
         width: 100%;
@@ -72,10 +90,13 @@ export class ProjectSchedule extends ScopedElementsMixin(PageView) {
       }
 
       div[body] {
+        flex: 1;
+
         display: flex;
         flex-direction: column;
         margin: 0px 25px 25px 25px;
         gap: 15px;
+        overflow: hidden;
 
         h3 {
           color: #2e79be;
@@ -88,29 +109,13 @@ export class ProjectSchedule extends ScopedElementsMixin(PageView) {
           border-radius: 5px;
         }
 
-        div[chart-container] {
+        ox-gantt {
           flex: 1;
-          flex-direction: column;
-          border: 1px solid #cccccc80;
-
-          div[chart] {
-            flex: 0.7;
-            background: #03a9f44d;
+          box-sizing: border-box;
+          overflow: hidden;
 
-            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] {
-            flex: 0.3;
-            background: #8fd170b8;
-          }
+          background-color: var(--md-sys-color-primary-container);
+          color: var(--md-sys-color-on-primary-container);
         }
 
         div[select-container] {
@@ -165,271 +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'],
-      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: []
-    }
-  ]
+
+  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`
@@ -449,31 +226,28 @@ export class ProjectSchedule extends ScopedElementsMixin(PageView) {
       </div>
 
       <div body>
-        <div chart-container>
-          <div chart>
-            <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>
-          </div>
-        </div>
+        <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}
+          .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" />
@@ -497,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
@@ -524,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}%`
+              }
+            ]
+          : []
       }
     })