fields rename, styles

package-lock.json

@@ -13565,6 +13565,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.11.0.tgz",
       "integrity": "sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw=="
     },
+    "react-moment": {
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.9.6.tgz",
+      "integrity": "sha512-GAnd5NRIpGjDqLoGahJCkiCEQS1d8+dIZbIfPuy/eQ0O5Rio43fEkj5G+qrKbZCQY55fiNafpHpuirVIHqPoSg=="
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",

package.json

@@ -22,9 +22,11 @@
     "@types/webpack-env": "1.13.1",
     "chart.js": "^2.9.2",
     "chartjs-plugin-datalabels": "^0.7.0",
+    "moment": "^2.24.0",
     "react": "15.6.2",
     "react-chartjs-2": "^2.8.0",
-    "react-dom": "15.6.2"
+    "react-dom": "15.6.2",
+    "react-moment": "^0.9.6"
   },
   "resolutions": {
     "@types/react": "15.6.6"

src/webparts/summaryWebPart/components/Structure/Structure.tsx

@@ -47,14 +47,14 @@ export default class TrafficLight extends React.Component<IComponentProps, IComp
           columns={[
             {
               key: 'column1',
-              name: 'Название',
+              name: 'Основные исполнители',
               fieldName: 'name',
               minWidth: 16,
               maxWidth: 150
             },
             {
               key: 'column2',
-              name: 'Статус',
+              name: 'Структурное подразделение',
               fieldName: 'department',
               minWidth: 16,
               maxWidth: 80

src/webparts/summaryWebPart/components/SummaryContainer/SummaryContainer.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ISummaryProjectData } from '../../interfaces/ISummaryProjectData';
 import { DetailsList, SelectionMode, DetailsListLayoutMode } from 'office-ui-fabric-react/lib/DetailsList';
+import { values } from '@uifabric/utilities/lib';
 
 export interface IComponentProps{
   projectInfo: ISummaryProjectData
@@ -22,6 +23,7 @@ export default class SummaryContainer extends React.Component<IComponentProps, I
 
   componentDidMount(){
     const {projectInfo} =this.props;
+    let missCount = 0;
     let rows = [
       {
         key: 1,
@@ -78,9 +80,11 @@ export default class SummaryContainer extends React.Component<IComponentProps, I
         fieldName: 'Координатор проекта',
         value: projectInfo.coordinator,
       },
-    ]
+    ].filter(e=>{
+      return  e.value !== ""
+    });
 
-    this.setState({items: rows})
+    this.setState({items: rows});
   }
 
 

src/webparts/summaryWebPart/components/SummaryGlobalComponent/SummaryGlobalComponent.tsx

@@ -16,12 +16,13 @@ export interface IComponentProps{
 export default class SummaryGlobalComponent extends React.Component<IComponentProps, {}> {
   public render(): React.ReactElement<IComponentProps> {
     const { data } = this.props;
+    
     return (
       <div className={styles.SummaryPageContainer}>
         <SummaryContainer projectInfo={data.PrjInfo} />
 
         <div className={styles.SummaryPageRowOne}>
-          <TrafficLight statuses={data.Status} taskStats={data.TaskStats}/>
+          <TrafficLight statuses={data.Status} taskStats={data.TaskStats} dateInfo={data.HighLvlPrjInfo}/>
           <TaskStatusesChart taskStats={data.TaskStats}/>
         </div>
 

src/webparts/summaryWebPart/components/SummaryWebPart.tsx

@@ -20,7 +20,7 @@ export default class SummaryWebPart extends React.Component<ISummaryWebPartProps
     let relUrl = context.pageContext.web.serverRelativeUrl
     let projectCode = relUrl ? relUrl.split('/')[relUrl.split('/').length - 1] : '';
 
-    fetch(requestUrl + projectCode)
+    fetch(requestUrl + 'test01_test02_001')
       .then((response)=>{
         return response.json()
       }).then(result=>{

src/webparts/summaryWebPart/components/TaskStatusesChart/TaskStatusesChart.tsx

@@ -12,14 +12,14 @@ export default class TaskStatusesChart extends React.Component<IComponentProps,
   public getChartData = () =>{
     const { taskStats } = this.props;
     return {
-      labels: ['Выполняемые', 'Планируемые', 'Завершенные', 'Всего задач'],
+      labels: ['Выполняемые', 'Планируемые', 'Завершенные'],
       datasets: [
         {
           label: '',
           backgroundColor: '#407855',
           borderColor: '#407855',
           borderWidth: 1,
-          data: [taskStats.exec, taskStats.plan, taskStats.compl, taskStats.plan + taskStats.compl + taskStats.exec]
+          data: [taskStats.exec, taskStats.plan, taskStats.compl ]/* taskStats.plan + taskStats.compl + taskStats.exec */
         }
       ]
     };
@@ -48,7 +48,7 @@ export default class TaskStatusesChart extends React.Component<IComponentProps,
             },
             title: {
               display: true,
-              text: 'Текущие состояние проекта',
+              text: 'Текущee  состояние проекта',
               fontSize: 16
             },
             scales: {

src/webparts/summaryWebPart/components/TrafficLight/TrafficLight.tsx

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import styles from '../SummaryGlobalComponent/SummaryGlobalComponent.module.scss'
+import Moment from "react-moment";
+import moment from "moment/min/moment-with-locales";
 
 import { DetailsList, SelectionMode, DetailsListLayoutMode } from 'office-ui-fabric-react/lib/DetailsList';
 
 export interface IComponentProps{
   statuses: {[key: string]: string;};
   taskStats: {[key: string]: number;};
+  dateInfo: { dateFinish: string, dateStart: string };
 }
 export default class TrafficLight extends React.Component<IComponentProps, {}> {
   public renderItemColumn = (item, index: number, column) => {
@@ -24,44 +27,46 @@ export default class TrafficLight extends React.Component<IComponentProps, {}> {
     }
   }
   public render(): React.ReactElement<IComponentProps> {
-    const { statuses, taskStats} = this.props;
+    const { statuses, taskStats, dateInfo} = this.props;
     let procent = (taskStats.compl/(taskStats.plan + taskStats.compl + taskStats.exec))* 100;
 
+    let startDate = moment(dateInfo.dateStart).format("DD.MM.YY");
+    let finDate = moment(dateInfo.dateFinish).format("DD.MM.YY");
+    let totalDays = new moment.duration((new Date(dateInfo.dateFinish) as any) -(new Date(dateInfo.dateStart) as any)).asDays();
+    
     return (
       <div className={styles.statusesContainer}>
         <DetailsList
           onRenderItemColumn={this.renderItemColumn}
-          items={
+          items={[
-            [
+            {
-              {
+              key: 1,
-                key: 1,
+              fieldName: "Статус по сроку",
-                fieldName: 'Статус по сроку',
+              status: statuses.term
-                status: statuses.term,
+            },
-              },
+            {
-              {
+              key: 2,
-                key: 2,
+              fieldName: "Статус по бюджету",
-                fieldName: 'Статус по бюджету',
+              status: statuses.budget
-                status: statuses.budget,
+            },
-              },
+            {
-              {
+              key: 3,
-                key: 3,
+              fieldName: "Статус по % выполнения",
-                fieldName: 'Статус по % выполнения',
+              status: statuses.percCompl
-                status: statuses.percCompl,
+            }
-              },
+          ]}
-            ]
-          }
           columns={[
             {
-              key: 'column1',
+              key: "column1",
-              name: 'Название',
+              name: "Название",
-              fieldName: 'fieldName',
+              fieldName: "fieldName",
               minWidth: 16,
               maxWidth: 150
             },
             {
-              key: 'column2',
+              key: "column2",
-              name: 'Статус',
+              name: "Статус",
-              fieldName: 'status',
+              fieldName: "status",
               minWidth: 16,
               maxWidth: 80
             }
@@ -71,35 +76,40 @@ export default class TrafficLight extends React.Component<IComponentProps, {}> {
           selectionMode={SelectionMode.none}
         />
         <DetailsList
-          items={
+          items={[
-            [
+            {
-              {
+              key: 1,
-                key: 1,
+              start: startDate,
-                start: '10.10.10',
+              end: finDate,
-                end: '10.10.11',
+              time: totalDays,
-                time: '10.10.12'
+              allTasks: taskStats.plan + taskStats.compl + taskStats.exec
-              },
+            }
-            ]
+          ]}
-          }
           columns={[
             {
-              key: 'column1',
+              key: "column1",
-              name: 'Дата начала',
+              name: "Дата начала",
-              fieldName: 'start',
+              fieldName: "start",
-              minWidth: 80,
+              minWidth: 40,
+              maxWidth: 60 
             },
             {
-              key: 'column2',
+              key: "column2",
-              name: 'Дата окончания',
+              name: "Дата окончания",
-              fieldName: 'end',
+              fieldName: "end",
-              minWidth: 80,
+              minWidth: 80
-              
+            },
+            {
+              key: "column3",
+              name: "Срок выполнения",
+              fieldName: "time",
+              minWidth: 90
             },
             {
-              key: 'column3',
+              key: "column4",
-              name: 'Срок выполнения',
+              name: "Всего задач",
-              fieldName: 'time',
+              fieldName: "allTasks",
-              minWidth: 100,
+              minWidth: 60,
             }
           ]}
           compact={true}
@@ -107,7 +117,14 @@ export default class TrafficLight extends React.Component<IComponentProps, {}> {
           selectionMode={SelectionMode.none}
           layoutMode={DetailsListLayoutMode.justified}
         />
-        <div style={{ marginLeft: '9', fontSize: '13px' }}>{`Актуальный статус выполнения ${procent.toFixed(2)}%`}</div>
+        <div
+          style={{
+            marginLeft: "9",
+            fontSize: "13px",
+            marginTop: 15,
+            marginBottom: 15
+          }}
+        >{`Актуальный статус выполнения ${procent.toFixed(2)}%`}</div>
       </div>
     );
   }

src/webparts/summaryWebPart/interfaces/IPageData.ts

@@ -5,5 +5,6 @@ export interface IPageData {
   PrjInfo: ISummaryProjectData;
   Status: {[key: string]: string;};
   TaskStats: {[key: string]: number;};
-  MainExec: IMainExecItem[]
+  MainExec: IMainExecItem[],
+  HighLvlPrjInfo: { dateFinish: string, dateStart:string};
 }