= (props) => {
useEffect(() => {
Promise.all([
- props.dataAdapter.fetchEncrichedProjects(),
+ props.dataAdapter.fetchEnrichedProjects(),
props.dataAdapter.isUserInGroup(strings.PortfolioManagerGroupName)
]).then(([projects, isUserInPortfolioManagerGroup]) => {
setState({
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/DetailsCallout/DetailsCallout.module.scss b/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/DetailsCallout/DetailsCallout.module.scss
index 1d03281c5..5bc421136 100644
--- a/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/DetailsCallout/DetailsCallout.module.scss
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/DetailsCallout/DetailsCallout.module.scss
@@ -1,6 +1,7 @@
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
.detailsCallout {
+ border-style: none !important;
padding: 28px;
max-width: 500px;
}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/DetailsCallout/index.tsx b/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/DetailsCallout/index.tsx
index 514f5d777..c5960f474 100644
--- a/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/DetailsCallout/index.tsx
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/DetailsCallout/index.tsx
@@ -6,67 +6,134 @@ import styles from './DetailsCallout.module.scss'
import React from 'react'
export interface IDetailsCalloutProps {
- item: { data: ITimelineItem; element: HTMLElement }
+ timelineItem: { item: ITimelineItem; element: HTMLElement }
onDismiss: () => void
}
-export const DetailsCallout = ({ item, onDismiss }: IDetailsCalloutProps) => {
+export const DetailsCallout = ({ timelineItem, onDismiss }: IDetailsCalloutProps) => {
+ const item = timelineItem.item.data
+
+ const _calloutContent = (): JSX.Element => {
+ switch (item.type) {
+ case strings.MilestoneLabel: {
+ return (
+ <>
+
+ {item.type}: {timelineItem.item.title}
+
+
+ {strings.MilestoneDateLabel}:{' '}
+ {formatDate(timelineItem.item.end_time.toString())}
+
+ >
+ )
+ }
+ case strings.PhaseLabel:
+ case strings.SubPhaseLabel: {
+ return (
+ <>
+
+ {item.type}: {timelineItem.item.title}
+
+
+ {strings.StartDateLabel}:{' '}
+ {formatDate(timelineItem.item.start_time.toString())}
+
+
+ {strings.EndDateLabel}:{' '}
+ {formatDate(timelineItem.item.end_time.toString())}
+
+ >
+ )
+ }
+ case strings.ProjectLabel: {
+ return (
+ <>
+
+ {strings.ProjectLabel}:{' '}
+
+ {timelineItem.item.project}
+
+
+
+
+ {strings.LastPublishedStatusreport}
+
+
+
+ {strings.CurrentPhaseLabel}: {item.phase}
+
+
+ {strings.StartDateLabel}:{' '}
+ {formatDate(timelineItem.item.start_time.toString())}
+
+
+ {strings.EndDateLabel}:{' '}
+ {formatDate(timelineItem.item.end_time.toString())}
+
+ >
+ )
+ }
+ default: {
+ return (
+ <>
+
+ {strings.NameLabel}: {timelineItem.item.title}
+
+
+ {strings.DescriptionFieldLabel}: {item.description}
+
+
+ {strings.ColumnRenderOptionDate}:{' '}
+ {formatDate(timelineItem.item.end_time.toString())}
+
+
+ {strings.StartDateLabel}:{' '}
+ {formatDate(timelineItem.item.start_time.toString())}
+
+
+ {strings.EndDateLabel}:{' '}
+ {formatDate(timelineItem.item.end_time.toString())}
+
+ >
+ )
+ }
+ }
+ }
+
+ const boundRect = document.getElementsByClassName('rct-scroll')[0].getBoundingClientRect()
+ const bounds = {
+ top: boundRect.top,
+ left: boundRect.left,
+ right: boundRect.right,
+ bottom: boundRect.bottom + 450,
+ width: boundRect.width,
+ height: boundRect.height + 450
+ }
+
return (
-
-
- {item.data.type === strings.MilestoneLabel
- ? strings.MilestoneLabel
- : item.data.type === strings.PhaseLabel
- ? strings.PhaseLabel
- : strings.SubPhaseLabel}
- :
- {' '}
- {item.data.title}
-
-
- {strings.ProjectLabel}:{' '}
-
- {item.data.project}
-
-
-
- {strings.CurrentPhaseLabel}: {item.data.phase}
-
-
- {strings.MilestoneDateLabel}:{' '}
- {formatDate(item.data.end_time.toString())}
-
-
- {strings.StartDateLabel}: {formatDate(item.data.start_time.toString())}
-
-
- {strings.EndDateLabel}: {formatDate(item.data.end_time.toString())}
-
-
- {strings.BudgetTotalLabel}: {tryParseCurrency(item.data.budgetTotal)}
-
-
- {strings.CostsTotalLabel}: {tryParseCurrency(item.data.costsTotal)}
+ {_calloutContent()}
+
+ {strings.BudgetTotalLabel}: {tryParseCurrency(item.budgetTotal)}
-
-
- {strings.LastPublishedStatusreport}
-
+
+ {strings.CostsTotalLabel}: {tryParseCurrency(item.costsTotal)}
-
- {strings.TypeLabel}: {item.data.type}
+
+ {strings.TypeLabel}: {item.type}
)
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/Timeline/Timeline.module.scss b/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/Timeline/Timeline.module.scss
index 0fc9f193d..672b28651 100644
--- a/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/Timeline/Timeline.module.scss
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/Timeline/Timeline.module.scss
@@ -7,10 +7,11 @@
.timelineItem {
cursor: pointer !important;
+ min-width: 28px;
.itemContent {
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
}
-}
\ No newline at end of file
+}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/Timeline/index.tsx b/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/Timeline/index.tsx
index e9d8a9f50..11cbb59ac 100644
--- a/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/Timeline/index.tsx
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectTimeline/Timeline/index.tsx
@@ -57,37 +57,63 @@ export class Timeline extends Component {
private _itemRenderer(props: ReactCalendarItemRendererProps) {
const htmlProps = props.getItemProps(props.item.itemProps)
- if (props.item.type === strings.MilestoneLabel)
- return (
- this.props._onItemClick(event, props.item)}>
+ switch (props.item.data.elementType) {
+ case strings.DiamondLabel: {
+ return (
-
- )
-
- return (
- this.props._onItemClick(event, props.item)}>
-
- {props.item.title}
-
-
- )
+ {...htmlProps}
+ className={`${styles.timelineItem} rc-item`}
+ onClick={(event) => this.props._onItemClick(event, props.item)}>
+
+