time & height controls added

MaTeMaTuK · Nov 15, 2020 · 7ba9b68 · 7ba9b68
1 parent d66c82c
commit 7ba9b68
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -8,21 +8,24 @@
 
 ![example](https://github.com/MaTeMaTuK/pcf-universal-gantt-chart/blob/master/DocumentationAssets/ganttStandartInstall.png)
 
-| Parameter Name            | Description                                                       |
-| :------------------------ | :---------------------------------------------------------------- |
-| Start Time\*              | Specifies start time display.                                     |
-| End Time\*                | Specifies end time display.                                       |
-| Record Display Name\*     | Specifies name on bar and list table.                             |
-| Progress                  | Specifies progress display.                                       |
-| IsSubgrid                 | Specifies gantt as subgrid control.                               |
-| Default Duration View     | Specifies default duration display.                               |
-| Default List`s Cell Width | Specifies cell width for list. Does not effect on duration width. |
-| Time Step                 | Specifies allowed step for move events. Sets in milliseconds.     |
-| Progress                  | Specifies progress display.                                       |
-| progressColor             | Specifies the taskbar progress fill color.                        |
-| progressSelectedColor     | Specifies the taskbar progress fill color on select.              |
-| backgroundColor           | Specifies the taskbar background fill color.                      |
-| backgroundSelectedColor   | Specifies the taskbar background fill color on select.            |
+| Parameter Name          | Description                                                   |
+| :---------------------- | :------------------------------------------------------------ |
+| Record Display Name\*   | Specifies name on bar and list table.                         |
+| Start Time\*            | Specifies start time display.                                 |
+| End Time\*              | Specifies end time display.                                   |
+| Progress                | Specifies progress display.                                   |
+| IsSubgrid\*             | Specifies gantt as subgrid control.                           |
+| Default Duration View\* | Specifies default duration display.                           |
+| Display Date Format\*   | Specifies date and time display format.                       |
+| List`s Cell Width\*     | Specifies date and time display format.                       |
+| Header Height\*         | Specifies header height.                                      |
+| Row Height\*            | Specifies row height.                                         |
+| Time Step               | Specifies allowed step for move events. Sets in milliseconds. |
+| Progress                | Specifies progress display.                                   |
+| progressColor           | Specifies the taskbar progress fill color.                    |
+| progressSelectedColor   | Specifies the taskbar progress fill color on select.          |
+| backgroundColor         | Specifies the taskbar background fill color.                  |
+| backgroundSelectedColor | Specifies the taskbar background fill color on select.        |
 
 \*Required
 

diff --git a/UniversalGanttChartComponent/ControlManifest.Input.xml b/UniversalGanttChartComponent/ControlManifest.Input.xml
@@ -1,29 +1,36 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
-  <control namespace="GanttGridComponent" constructor="UniversalGanttChartComponent" version="0.0.2" display-name-key="Universal Gantt Chart Component" description-key="UniversalGanttChartComponent description" control-type="standard">
+  <control namespace="GanttGridComponent" constructor="UniversalGanttChartComponent" version="0.0.3" display-name-key="Universal Gantt Chart Component" description-key="Component shows tasks on a timeline. You can move them on the chart." control-type="standard">
     <!-- dataset node represents a set of entity records on CDS; allow more than one datasets -->
-     <data-set name="entityDataSet" display-name-key="Entity-Grid" cds-data-set-options="displayCommandBar:true;displayViewSelector:true;displayQuickFind:true">
+    <data-set name="entityDataSet" display-name-key="Entity-Grid" cds-data-set-options="displayCommandBar:true;displayViewSelector:true;displayQuickFind:true">
       <property-set name="displayName" display-name-key="Record Display Name" description-key="Record Name for displaying on grid" of-type="SingleLine.Text" usage="bound" required="true" />
       <property-set name="scheduledStart" display-name-key="Start" description-key="Scheduled start date and time" of-type="DateAndTime.DateAndTime" usage="bound" required="true" />
       <property-set name="scheduledEnd" display-name-key="End" description-key="Scheduled end date and time" of-type="DateAndTime.DateAndTime" usage="bound" required="true" />
       <property-set name="progress" display-name-key="Progress" description-key="From 0 to 100. Whole Number" of-type="Whole.None" usage="bound" required="false" />
     </data-set>
 
-    <property name="isSubgrid" display-name-key="Is SubGrid" description-key="This flag is for views in subgrid only" of-type="Enum" usage="input" required="false" default-value="0">
+    <property name="isSubgrid" display-name-key="Is SubGrid" description-key="This flag is for views in subgrid only" of-type="Enum" usage="input" required="true" default-value="0">
       <value name="Yes" display-name-key="No">0</value>
       <value name="No" display-name-key="Yes">1</value>
     </property>
 
-    <property name="viewMode" display-name-key="Default Duration View" description-key=" " of-type="Enum" usage="input" required="false" default-value="Day">
+    <property name="viewMode" display-name-key="Default Duration View" description-key=" " of-type="Enum" usage="input" required="true" default-value="Day">
       <value name="quarter" display-name-key="Quarter of Day">Quarter Day</value>
       <value name="half" display-name-key="Half of Day">Half Day</value>
       <value name="day" display-name-key="Day">Day</value>
       <value name="week" display-name-key="Week">Week</value>
       <value name="Month" display-name-key="Month">Month</value>
     </property>
 
-    <property name="defaultListCellWidth" display-name-key="Default List`s Cell Width" description-key="Default Cell Width for List" of-type="Whole.None" usage="input" required="false" default-value="155"/>
-    <property name="timeStep" display-name-key="Time Step" description-key="Time step for task for drag event" of-type="Whole.None" usage="input" required="false" default-value="300000"/>
+    <property name="displayDateFormat" display-name-key="Display Date Format" description-key=" " of-type="Enum" usage="input" required="true" default-value="datetime">
+      <value name="dateAndTime" display-name-key="Date and Time">datetime</value>
+      <value name="date" display-name-key="Date">date</value>
+    </property>
+
+    <property name="listCellWidth" display-name-key="List`s Cell Width" description-key="Default cell width for list" of-type="Whole.None" usage="input" required="true" default-value="155"/>
+    <property name="headerHeight" display-name-key="Header Height" description-key="Default header height for gantt" of-type="Whole.None" usage="input" required="true" default-value="50"/>
+    <property name="rowHeight" display-name-key="Row Height" description-key="Default row height for gantt" of-type="Whole.None" usage="input" required="true" default-value="50"/>
+    <property name="timeStep" display-name-key="Time Step" description-key="Time step for task for drag event" of-type="Whole.None" usage="input" required="true" default-value="300000"/>
 
     <property name="backgroundColor" display-name-key="Background Color" description-key="Defines Bar background color" of-type="SingleLine.Text" usage="input" required="false"/>
     <property name="backgroundSelectedColor" display-name-key="Background Selected Color" description-key="Defines Bar background color on select" of-type="SingleLine.Text" usage="input" required="false"/>
@@ -36,7 +43,7 @@
       <css path="./components/css/gantt-footer.css" order="1"/>
       <css path="./components/css/task-list-table.css" order="1"/>
       <css path="./components/css/gantt-tooltip.css" order="2"/>
-       <css path="./components/css/universal-gantt.css" order="3"/>
+      <css path="./components/css/universal-gantt.css" order="3"/>
       <resx path="strings/UniversalGanttChartComponent.1033.resx" version="1.0.0" />
       <resx path="strings/UniversalGanttChartComponent.1031.resx" version="1.0.0" />
       <resx path="strings/UniversalGanttChartComponent.1053.resx" version="1.0.0" />

diff --git a/UniversalGanttChartComponent/components/gantt-tooltip.tsx b/UniversalGanttChartComponent/components/gantt-tooltip.tsx
@@ -7,6 +7,7 @@ export const createTooltip = (
   progressDisplayName: string,
   durationDisplayName: string,
   metricDisplayName: string,
+  includeTime: boolean,
   formatDateShort: (value: Date, includeTime?: boolean) => string
 ): React.FC<{
   task: Task;
@@ -31,11 +32,14 @@ export const createTooltip = (
 
         <p
           className={"Gantt-Tooltip_Paragraph"}
-        >{`${startDisplayName}: ${formatDateShort(task.start, true)}`}</p>
+        >{`${startDisplayName}: ${formatDateShort(
+          task.start,
+          includeTime
+        )}`}</p>
 
         <p
           className={"Gantt-Tooltip_Paragraph"}
-        >{`${endDisplayName}: ${formatDateShort(task.end, true)}`}</p>
+        >{`${endDisplayName}: ${formatDateShort(task.end, includeTime)}`}</p>
 
         <p className={"Gantt-Tooltip_Paragraph"}>{`${durationDisplayName}: ${~~(
           (task.end.getTime() - task.start.getTime()) /

diff --git a/UniversalGanttChartComponent/components/task-list-table.tsx b/UniversalGanttChartComponent/components/task-list-table.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import { Task } from "gantt-task-react";
 
 export const creatTaskListLocal = (
+  includeTime: boolean,
   onClick: (task: Task) => void,
   formatDateShort: (value: Date, includeTime?: boolean) => string
 ): React.FC<{
@@ -24,7 +25,6 @@ export const creatTaskListLocal = (
     selectedTaskId,
     setSelectedTask,
   }) => {
-    debugger;
     return (
       <div
         className="Gantt-Task-List_Wrapper"
@@ -85,9 +85,9 @@ export const creatTaskListLocal = (
                     setSelectedTask(t.id);
                   }
                 }}
-                title={formatDateShort(t.start, true)}
+                title={formatDateShort(t.start, includeTime)}
               >
-                &nbsp;{formatDateShort(t.start, true)}
+                &nbsp;{formatDateShort(t.start, includeTime)}
               </div>
               {/**
                * End Time
@@ -105,9 +105,9 @@ export const creatTaskListLocal = (
                     setSelectedTask(t.id);
                   }
                 }}
-                title={formatDateShort(t.end, true)}
+                title={formatDateShort(t.end, includeTime)}
               >
-                &nbsp;{formatDateShort(t.end, true)}
+                &nbsp;{formatDateShort(t.end, includeTime)}
               </div>
             </div>
           );

diff --git a/UniversalGanttChartComponent/components/universal-gantt.tsx b/UniversalGanttChartComponent/components/universal-gantt.tsx
@@ -19,6 +19,8 @@ export type UniversalGanttProps = {
   context: ComponentFramework.Context<IInputs>;
   tasks: Task[];
   ganttHeight?: number;
+  rowHeight: number;
+  headerHeight: number;
   recordDisplayName: string;
   startDisplayName: string;
   endDisplayName: string;
@@ -27,6 +29,7 @@ export type UniversalGanttProps = {
   startFieldName: string;
   endFieldName: string;
   progressFieldName: string;
+  includeTime: boolean;
   isProgressing: boolean;
   crmUserTimeOffset: number;
   onViewChange: (viewMode: ViewMode) => void;
@@ -138,8 +141,8 @@ export const UniversalGantt: React.FunctionComponent<UniversalGanttProps> = (
   let options: StylingOption & EventOption = {
     fontSize: "14px",
     fontFamily: "SegoeUI, Segoe UI",
-    headerHeight: 50,
-    rowHeight: 50,
+    headerHeight: props.headerHeight,
+    rowHeight: props.rowHeight,
     barCornerRadius: 0,
     listCellWidth: props.listCellWidth,
     TaskListHeader: createHeaderLocal(
@@ -153,9 +156,14 @@ export const UniversalGantt: React.FunctionComponent<UniversalGanttProps> = (
       props.progressDisplayName,
       context.resources.getString("Duration"),
       context.resources.getString("Duration_Metric"),
+      props.includeTime,
+      formatDateShort
+    ),
+    TaskListTable: creatTaskListLocal(
+      props.includeTime,
+      handleOpenRecord,
       formatDateShort
     ),
-    TaskListTable: creatTaskListLocal(handleOpenRecord, formatDateShort),
   };
 
   if (view === ViewMode.Month) {

diff --git a/UniversalGanttChartComponent/index.ts b/UniversalGanttChartComponent/index.ts
@@ -77,20 +77,28 @@ export class UniversalGanttChartComponent
         crmUserTimeOffset,
         !!progressField
       );
-      const listCellWidth = !!context.parameters.defaultListCellWidth.raw
-        ? `${context.parameters.defaultListCellWidth.raw}px`
+      const listCellWidth = !!context.parameters.listCellWidth.raw
+        ? `${context.parameters.listCellWidth.raw}px`
         : "";
 
       const progressFieldName = !!progressField ? progressField.name : "";
       const progressDisplayName = !!progressField
         ? progressField.displayName
         : "";
 
+      const rowHeight = !!context.parameters.rowHeight.raw
+        ? context.parameters.rowHeight.raw
+        : 50;
+      const headerHeight = !!context.parameters.headerHeight.raw
+        ? context.parameters.headerHeight.raw
+        : 50;
+
       let ganttHeight: number | undefined;
       if (context.parameters.isSubgrid.raw === "0") {
         ganttHeight = this._container.offsetHeight - 150;
       }
-      debugger;
+      let includeTime = context.parameters.displayDateFormat.raw === "datetime";
+
       const gantt = React.createElement(UniversalGantt, {
         context,
         tasks,
@@ -104,9 +112,12 @@ export class UniversalGanttChartComponent
         progressFieldName: progressFieldName,
         listCellWidth: listCellWidth,
         timeStep: context.parameters.timeStep.raw,
+        rowHeight: rowHeight,
+        headerHeight: headerHeight,
         isProgressing: !!progressField,
         locale: this.locale,
         viewMode: this.viewMode,
+        includeTime: includeTime,
         crmUserTimeOffset,
         onViewChange: this.handleViewModeChange,
       });

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pcf-universal-gantt-chart",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "author": "MaTeMaTuK <[email protected]>",
   "description": "Project containing your PowerApps Component Framework (PCF) control.",
   "license": "GPLv3",