Fixed colors and columns not matching content #134 (#138)

* Fixed colors and columns not matching content #134 * Updated CHANGELOG
Puzzlepart · Oct 30, 2019 · f0356a8 · f0356a8
1 parent a3897b4
commit f0356a8
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 38 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Added list 'Interessentregister' to portfolio level
 - Using list fields instead of content type for 'Dokumenter' to keep the OOTB document type dropdown #136
 - Updated Standardmal.txt to include Parameters
+- Fixed colors and columns not matching content for resource allocation #134
 
 ## 1.1.3 - 2019-10-15
 

diff --git a/SharePointFramework/PortfolioWebParts/package.json b/SharePointFramework/PortfolioWebParts/package.json
@@ -51,7 +51,7 @@
         "office-ui-fabric-react": "6.200.1",
         "projectwebparts": "link:..\\ProjectWebParts",
         "react": "16.7.0",
-        "react-calendar-timeline": "0.23.1",
+        "react-calendar-timeline": "^0.26.6",
         "react-dom": "16.7.0",
         "react-highcharts": "16.0.2",
         "react-image-fade-in": "1.0.2",
@@ -72,6 +72,7 @@
         "@types/chai": "3.4.34",
         "@types/mocha": "2.2.38",
         "@types/object-assign": "4.0.30",
+        "@types/react-calendar-timeline": "^0.26.0",
         "@types/string-format": "2.0.0",
         "@types/underscore": "1.9.2",
         "ajv": "~5.2.2",

diff --git a/SharePointFramework/PortfolioWebParts/pnpm-lock.yaml b/SharePointFramework/PortfolioWebParts/pnpm-lock.yaml
diff --git a/...Framework/PortfolioWebParts/src/components/ResourceAllocation/IResourceAllocationProps.ts b/...Framework/PortfolioWebParts/src/components/ResourceAllocation/IResourceAllocationProps.ts
@@ -1,4 +1,5 @@
 import { IBaseComponentProps } from '../IBaseComponentProps';
+import * as moment from 'moment';
 
 export interface IResourceAllocationProps extends IBaseComponentProps {
    /**
@@ -15,4 +16,14 @@ export interface IResourceAllocationProps extends IBaseComponentProps {
     * Background color for absence items
     */
    itemAbsenceBgColor?: string;
+
+   /**
+    * Default time start
+    */
+   defaultTimeStart?: [number,  moment.unitOfTime.DurationConstructor];
+
+   /**
+    * Default time end
+    */
+   defaultTimeEnd?: [number, moment.unitOfTime.DurationConstructor];
 }
diff --git a/...mework/PortfolioWebParts/src/components/ResourceAllocation/ResourceAllocation.module.scss b/...mework/PortfolioWebParts/src/components/ResourceAllocation/ResourceAllocation.module.scss
@@ -1,6 +1,6 @@
-@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
 
-.resourceAllocation {  
+.resourceAllocation {
   margin: 15px 0 0 0;
   .container {
     margin: 0px auto;
@@ -26,7 +26,30 @@
       margin: 0px auto;
       padding: 0 32px 0 32px;
       font-size: 12px !important;
+
+      [class="react-calendar-timeline"] [class*="rct-header-root"] {
+        background: #f4f4f4 !important;
+      }
+
+      [class="react-calendar-timeline"] [class*="rct-dateHeader-primary"] {
+        color: #444;
+        border: none;
+      }
+
+      [class="react-calendar-timeline"] [class*="rct-calendar-header"] {
+        border: none;
+      }
+
+      [class="react-calendar-timeline"] [class*="rct-dateHeader"] {
+        font-size: 10px;
+        border: none;
+      }
+
+      [class="react-calendar-timeline"] [class*="rct-item"] [class*="rct-item-content"] {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+      }
     }
   }
 }
-
diff --git a/...PointFramework/PortfolioWebParts/src/components/ResourceAllocation/Timeline.overrides.css b/...PointFramework/PortfolioWebParts/src/components/ResourceAllocation/Timeline.overrides.css
@@ -1,8 +0,0 @@
-.react-calendar-timeline .rct-header .rct-label-group {    
-    background: #f4f4f4!important;
-    color: #444;
-}
-
-.react-calendar-timeline .rct-header-container.header-sticky > div {
-    width: 100% !important;
-}

diff --git a/SharePointFramework/PortfolioWebParts/src/components/ResourceAllocation/index.tsx b/SharePointFramework/PortfolioWebParts/src/components/ResourceAllocation/index.tsx
@@ -10,7 +10,7 @@ import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBa
 import { Spinner, SpinnerType } from 'office-ui-fabric-react/lib/Spinner';
 import * as strings from 'PortfolioWebPartsStrings';
 import * as React from 'react';
-import Timeline, { TimelineMarkers, TodayMarker } from 'react-calendar-timeline';
+import Timeline, { TimelineMarkers, TodayMarker, ReactCalendarItemRendererProps } from 'react-calendar-timeline';
 import 'react-calendar-timeline/lib/Timeline.css';
 import { tryParsePercentage } from 'shared/lib/helpers';
 import { DataSourceService } from 'shared/lib/services';
@@ -26,6 +26,8 @@ export class ResourceAllocation extends React.Component<IResourceAllocationProps
   public static defaultProps: Partial<IResourceAllocationProps> = {
     itemBgColor: '51,153,51',
     itemAbsenceBgColor: '26,111,179',
+    defaultTimeStart: [-1, 'months'],
+    defaultTimeEnd: [1, 'years'],
   };
 
   /**
@@ -83,7 +85,7 @@ export class ResourceAllocation extends React.Component<IResourceAllocationProps
           </div>
           <div className={styles.infoText}>
             <MessageBar>
-              <div dangerouslySetInnerHTML={{ __html: format(strings.ResourceAllocationInfoText, `../Lists/Ressursallokering/AllItems.aspx?Source=${encodeURIComponent(window.location.href)}`) }}></div>
+              <div dangerouslySetInnerHTML={{ __html: format(strings.ResourceAllocationInfoText, encodeURIComponent(window.location.href)) }}></div>
             </MessageBar>
           </div>
           <div className={styles.timeline}>
@@ -93,12 +95,12 @@ export class ResourceAllocation extends React.Component<IResourceAllocationProps
               stackItems={true}
               canMove={false}
               canChangeGroup={false}
-              sidebarWidth={220}
-              _itemRenderer={({ item, itemContext, getItemProps }) => this._itemRenderer(item, itemContext, getItemProps)}
-              defaultTimeStart={moment().subtract(1, 'months')}
-              defaultTimeEnd={moment().add(1, 'years')}>
+              sidebarWidth={250}
+              itemRenderer={this._itemRenderer.bind(this)}
+              defaultTimeStart={moment().add(...this.props.defaultTimeStart)}
+              defaultTimeEnd={moment().add(...this.props.defaultTimeEnd)}>
               <TimelineMarkers>
-                <TodayMarker />
+                <TodayMarker date={moment().toDate()} />
               </TimelineMarkers>
             </Timeline>
           </div>
@@ -188,16 +190,14 @@ export class ResourceAllocation extends React.Component<IResourceAllocationProps
 
   /**
    * Timeline item renderer
-   * 
-   * @param {ITimelineItem} item Item
-   * @param {any} itemContext Item context
-   * @param {function} getItemProps Get item props functoon 
    */
-  private _itemRenderer(item: ITimelineItem, itemContext: any, getItemProps: (props: React.HTMLProps<HTMLDivElement>) => React.HTMLProps<HTMLDivElement>) {
+  private _itemRenderer(props: ReactCalendarItemRendererProps<ITimelineItem>) {
+    let htmlProps = props.getItemProps(props.item.itemProps);
+    console.log('_itemRenderer', htmlProps);
     return (
-      <div {...getItemProps(item.itemProps)}>
-        <div className='rct-item-content' style={{ maxHeight: `${itemContext.dimensions.height}` }}>
-          {item.title}
+      <div {...htmlProps}>
+        <div className='rct-item-content' style={{ maxHeight: `${props.itemContext.dimensions.height}` }}>
+          {props.item.title}
         </div>
       </div >
     );
@@ -229,29 +229,29 @@ export class ResourceAllocation extends React.Component<IResourceAllocationProps
   private _transformItems(searchResults: IAllocationSearchResult[], groups: ITimelineGroup[], groupBy: string = 'RefinableString71'): ITimelineItem[] {
     const items: ITimelineItem[] = searchResults.map((res, idx) => {
       const group = _.find(groups, grp => grp.title === res[groupBy]);
-      const allocation = tryParsePercentage(res.GtResourceLoadOWSNMBR, true, 0) as number;
+      const allocation = tryParsePercentage(res.GtResourceLoadOWSNMBR, false, 0) as number;
       const isAbsence = res.ContentTypeId.indexOf('0x010029F45E75BA9CE340A83EFFB2927E11F4') !== -1;
       const itemOpacity = allocation < 30 ? 0.3 : (allocation / 100);
       const itemColor = allocation < 40 ? '#000' : '#fff';
       let backgroundColor = this.props.itemBgColor;
       if (isAbsence) {
         backgroundColor = this.props.itemAbsenceBgColor;
       }
-      let itemStyle: React.CSSProperties = {
+      let style: React.CSSProperties = {
         color: itemColor,
         border: 'none',
-        cursor: 'none',
+        cursor: 'auto',
         outline: 'none',
         background: `rgb(${backgroundColor})`,
         backgroundColor: `rgba(${backgroundColor}, ${itemOpacity})`,
       };
       return {
         id: idx,
         group: group.id,
-        title: isAbsence ? `${res.GtResourceAbsenceOWSCHCS} (${allocation})` : `${res.RefinableString72} - ${res.SiteTitle} (${allocation})`,
+        title: isAbsence ? `${res.GtResourceAbsenceOWSCHCS} (${allocation}%)` : `${res.RefinableString72} - ${res.SiteTitle} (${allocation}%)`,
         start_time: moment(new Date(res.GtStartDateOWSDATE)),
         end_time: moment(new Date(res.GtEndDateOWSDATE)),
-        itemProps: { style: itemStyle },
+        itemProps: { style },
         project: res.SiteTitle,
         role: res.RefinableString72,
         resource: group.title,

diff --git a/SharePointFramework/PortfolioWebParts/src/loc/nb-no.js b/SharePointFramework/PortfolioWebParts/src/loc/nb-no.js
@@ -67,7 +67,7 @@ define([], function () {
     ProjectOwner: 'Prosjekteier',
     ProjectStatusLinkText: 'Gå til prosjektstatus',
     RecommendationLabel: 'Anbefaling',
-    ResourceAllocationInfoText: "Ressursallokering eller fravær som gjelder på tvers av prosjekter legges inn i den<A HREF=\"{0}\">sentrale ressursallokeringslisten</A>. Disse oppføringene vil vises med blå og rød (fravær) farge i tabellen under. Prosjektallokeringer vises med grønn farge. Fargestyrken til allokeringen baserer seg på allokeringsprosenten.",
+    ResourceAllocationInfoText: "Ressursallokering eller fravær som gjelder på tvers av prosjekter legges inn i den<A HREF=\"../Lists/Ressursallokering/AllItems.aspx?Source={0}\">sentrale ressursallokeringslisten</A>. Disse oppføringene vil vises med blå og rød (fravær) farge i tabellen under. Prosjektallokeringer vises med grønn farge. Fargestyrken til allokeringen baserer seg på allokeringsprosenten.",
     ResourceLabel: "Ressurs",
     ResponsibleLabel: 'Ansvarlig',
     RiskActionLabel: 'Tiltak',