fields rename, styles

5 years ago · c132b1db69
parent 5a65bde216
commit c132b1db69
9 changed files with 91 additions and 61 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
--- a/src/webparts/summaryWebPart/components/Structure/Structure.tsx
+++ b/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
--- a/src/webparts/summaryWebPart/components/SummaryContainer/SummaryContainer.tsx
+++ b/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});
  }


--- a/src/webparts/summaryWebPart/components/SummaryGlobalComponent/SummaryGlobalComponent.tsx
+++ b/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>

--- a/src/webparts/summaryWebPart/components/SummaryWebPart.tsx
+++ b/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=>{
--- a/src/webparts/summaryWebPart/components/TaskStatusesChart/TaskStatusesChart.tsx
+++ b/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: {
--- a/src/webparts/summaryWebPart/components/TrafficLight/TrafficLight.tsx
+++ b/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={
-            [
-              {
-                key: 1,
-                fieldName: 'Статус по сроку',
-                status: statuses.term,
-              },
-              {
-                key: 2,
-                fieldName: 'Статус по бюджету',
-                status: statuses.budget,
-              },
-              {
-                key: 3,
-                fieldName: 'Статус по % выполнения',
-                status: statuses.percCompl,
-              },
-            ]
-          }
+          items={[
+            {
+              key: 1,
+              fieldName: "Статус по сроку",
+              status: statuses.term
+            },
+            {
+              key: 2,
+              fieldName: "Статус по бюджету",
+              status: statuses.budget
+            },
+            {
+              key: 3,
+              fieldName: "Статус по % выполнения",
+              status: statuses.percCompl
+            }
+          ]}
          columns={[
            {
-              key: 'column1',
-              name: 'Название',
-              fieldName: 'fieldName',
+              key: "column1",
+              name: "Название",
+              fieldName: "fieldName",
              minWidth: 16,
              maxWidth: 150
            },
            {
-              key: 'column2',
-              name: 'Статус',
-              fieldName: 'status',
+              key: "column2",
+              name: "Статус",
+              fieldName: "status",
              minWidth: 16,
              maxWidth: 80
            }
@ -71,35 +76,40 @@ export default class TrafficLight extends React.Component<IComponentProps, {}> {
          selectionMode={SelectionMode.none}
        />
        <DetailsList
-          items={
-            [
-              {
-                key: 1,
-                start: '10.10.10',
-                end: '10.10.11',
-                time: '10.10.12'
-              },
-            ]
-          }
+          items={[
+            {
+              key: 1,
+              start: startDate,
+              end: finDate,
+              time: totalDays,
+              allTasks: taskStats.plan + taskStats.compl + taskStats.exec
+            }
+          ]}
          columns={[
            {
-              key: 'column1',
-              name: 'Дата начала',
-              fieldName: 'start',
-              minWidth: 80,
+              key: "column1",
+              name: "Дата начала",
+              fieldName: "start",
+              minWidth: 40,
+              maxWidth: 60 
+            },
+            {
+              key: "column2",
+              name: "Дата окончания",
+              fieldName: "end",
+              minWidth: 80
            },
            {
-              key: 'column2',
-              name: 'Дата окончания',
-              fieldName: 'end',
-              minWidth: 80,
-              
+              key: "column3",
+              name: "Срок выполнения",
+              fieldName: "time",
+              minWidth: 90
            },
            {
-              key: 'column3',
-              name: 'Срок выполнения',
-              fieldName: 'time',
-              minWidth: 100,
+              key: "column4",
+              name: "Всего задач",
+              fieldName: "allTasks",
+              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>
    );
  }
--- a/src/webparts/summaryWebPart/interfaces/IPageData.ts
+++ b/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};
 }