estimate progress view completed

ArunaTebel · Sep 29, 2019 · d7d5dee · d7d5dee
1 parent 9e12376
commit d7d5dee
Show file tree

Hide file tree

Showing 10 changed files with 314 additions and 4 deletions.
diff --git a/src/components/ArchestEstimateProgressComponent.js b/src/components/ArchestEstimateProgressComponent.js
@@ -0,0 +1,79 @@
+import React, {Component} from "react";
+import ArchestAuthEnabledComponent from "./ArchestAuthEnabledComponent";
+import ArchestMainContainerComponent from "./ArchestMainContainerComponent";
+import ArchestFeatureProgressComponent from "./ArchestFeatureProgressComponent";
+import {BACKEND_ESTIMATOR_API_URL} from "../constants";
+import ArchestHttp from "../modules/archest_http";
+import {Col, Row, Card, Table, ProgressBar, Dropdown} from "react-bootstrap";
+import './styles/ArchestEstimateProgressComponent.scss';
+
+const _ = require('lodash');
+
+class ArchestEstimateProgressComponent extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            estimateId: this.props.match.params.estimateId,
+            estimate: {},
+            estimateProgress: {},
+            breadcrumbs: []
+        };
+    }
+
+    componentDidMount() {
+
+        let requestConfigs = [
+            {
+                name: 'estimate',
+                url: `${BACKEND_ESTIMATOR_API_URL}/estimates/${this.state.estimateId}/`,
+                params: {}
+            },
+            {
+                name: 'estimateProgress',
+                url: `${BACKEND_ESTIMATOR_API_URL}/estimates/${this.state.estimateId}/progress/`,
+                params: {}
+            },
+        ];
+
+        ArchestHttp.BATCH_GET(requestConfigs, (responses) => {
+            let estimate = responses.estimate.data;
+            this.setState({
+                estimate: estimate,
+                estimateProgress: responses.estimateProgress.data.results,
+                breadcrumbs: [
+                    {title: 'Home', url: '/'},
+                    {
+                        title: estimate.phase.name + ' - Estimates',
+                        url: `/phase/${estimate.phase.id}/estimates/`
+                    },
+                    {title: estimate.name, url: '#', active: true},
+                ]
+            });
+        });
+    }
+
+    render() {
+        let featureProgressComponents = _.map(
+            this.state.estimateProgress.features,
+            feature => <ArchestFeatureProgressComponent key={feature.id} feature={feature}/>
+        );
+        return (
+            <ArchestAuthEnabledComponent>
+                <ArchestMainContainerComponent breadcrumbs={this.state.breadcrumbs}>
+                    <Row className="archest-card-container-row">
+                        <Col>
+                            <Card className="archest-card">
+                                <Card.Body className="archest-card-body archest-estimate-progress-card-body">
+                                    {featureProgressComponents}
+                                </Card.Body>
+                            </Card>
+                        </Col>
+                    </Row>
+                </ArchestMainContainerComponent>
+            </ArchestAuthEnabledComponent>
+        );
+    }
+}
+
+export default ArchestEstimateProgressComponent;
diff --git a/src/components/ArchestFeatureActivityProgressComponent.js b/src/components/ArchestFeatureActivityProgressComponent.js
@@ -0,0 +1,68 @@
+import React, {Component} from "react";
+import {Col, Dropdown, OverlayTrigger, ProgressBar, Row, Tooltip} from "react-bootstrap";
+import ArchestFeatureSubActivityProgressComponent from "./ArchestFeatureSubActivityProgressComponent";
+
+const _ = require('lodash');
+
+class ArchestFeatureActivityProgressComponent extends Component {
+
+    render() {
+        let activity = this.props.activity;
+        let subActivityComponents = _.map(
+            activity.sub_activities,
+            subActivity => <ArchestFeatureSubActivityProgressComponent key={subActivity.id} subActivity={subActivity}/>
+        );
+        return (
+            <Row className='archest-feature-progress-activity-container'>
+                <Col lg={12}>
+                    <Row className='archest-feature-progress-activity'>
+                        <Col lg={6} className='archest-feature-progress-activity-name'>
+                            {activity.name}
+                        </Col>
+                        <Col lg={2} className='archest-feature-progress-activity-completion'>
+                            <OverlayTrigger placement="top" overlay={
+                                <Tooltip variant='primary'>{activity.completion_percentage}</Tooltip>
+                            }>
+                                <ProgressBar striped variant="success" now={activity.completion_percentage}/>
+                            </OverlayTrigger>
+                        </Col>
+                        <Col lg={1} className='archest-feature-progress-activity-estimated'>
+                            {activity.estimated_time}
+                        </Col>
+                        <Col lg={1} className='archest-feature-progress-activity-entered'>
+                            <OverlayTrigger placement="top" overlay={
+                                <Tooltip variant='primary'>
+                                    Activity {activity.entered_time_directly_to_activity} Hrs, Sub
+                                    Activities {activity.entered_time_to_sub_activities} Hrs
+                                </Tooltip>
+                            }>
+
+                                <div>
+                                    {activity.total_entered_time}
+                                    <i className="material-icons archest-inline-icon archest-feature-progress-activity-entered-icon">schedule</i>
+                                </div>
+                            </OverlayTrigger>
+                        </Col>
+                        <Col lg={1} className='archest-feature-progress-activity-remaining'>
+                            {activity.remaining_time}
+                        </Col>
+                        <Col lg={1} className='archest-feature-progress-activity-actions'>
+                            <Dropdown>
+                                <Dropdown.Toggle variant="link" size="sm">
+                                    <span className='oi oi-cog'/>
+                                </Dropdown.Toggle>
+                                <Dropdown.Menu>
+                                    <Dropdown.Item>Delete</Dropdown.Item>
+                                </Dropdown.Menu>
+                            </Dropdown>
+                        </Col>
+                    </Row>
+                    {subActivityComponents}
+                </Col>
+            </Row>
+        );
+    }
+
+}
+
+export default ArchestFeatureActivityProgressComponent;
diff --git a/src/components/ArchestFeatureProgressComponent.js b/src/components/ArchestFeatureProgressComponent.js
@@ -0,0 +1,52 @@
+import React, {Component} from "react";
+import {Col, Row} from "react-bootstrap";
+import ArchestFeatureActivityProgressComponent from "./ArchestFeatureActivityProgressComponent";
+
+const _ = require('lodash');
+
+class ArchestFeatureProgressComponent extends Component {
+
+    render() {
+        let feature = this.props.feature;
+        let activityComponents = _.map(
+            feature.activities,
+            activity => <ArchestFeatureActivityProgressComponent key={activity.id} activity={activity}/>
+        );
+        return (
+            <Row key={feature.id}>
+                <Col lg={12}>
+                    <Row className='archest-feature-progress-feature'>
+                        <Col lg={12} className='archest-feature-progress-feature-name'>
+                            {feature.name}
+                        </Col>
+                    </Row>
+                    <Row className='archest-feature-progress-headings'>
+                        <Col lg={6} className='archest-feature-progress-heading'>
+                            Activity/Sub Activity
+                        </Col>
+                        <Col lg={2} className='archest-feature-progress-heading'>
+                            Completion (%)
+                        </Col>
+                        <Col lg={1} className='archest-feature-progress-heading'>
+                            Est.
+                        </Col>
+                        <Col lg={1} className='archest-feature-progress-heading'>
+                            Ent.
+                        </Col>
+                        <Col lg={1} className='archest-feature-progress-heading'>
+                            Rem.
+                        </Col>
+                        <Col lg={1} className='archest-feature-progress-heading'>
+                            Actions
+                        </Col>
+                    </Row>
+                    <hr/>
+                    {activityComponents}
+                </Col>
+            </Row>
+        );
+    }
+
+}
+
+export default ArchestFeatureProgressComponent;
diff --git a/src/components/ArchestFeatureSubActivityProgressComponent.js b/src/components/ArchestFeatureSubActivityProgressComponent.js
@@ -0,0 +1,44 @@
+import React, {Component} from "react";
+import {Col, Dropdown, OverlayTrigger, ProgressBar, Row, Tooltip} from "react-bootstrap";
+
+class ArchestFeatureSubActivityProgressComponent extends Component {
+
+    render() {
+        let subActivity = this.props.subActivity;
+        return (
+            <Row className='archest-feature-progress-sub-activity'>
+                <Col lg={6} className='archest-feature-progress-sub-activity-name'>
+                    {subActivity.name}
+                </Col>
+                <Col lg={2} className='archest-feature-progress-sub-activity-completion'>
+                    <OverlayTrigger placement="top" overlay={
+                        <Tooltip variant='primary'>{subActivity.completion_percentage}</Tooltip>
+                    }>
+                        <ProgressBar striped variant="success" now={subActivity.completion_percentage}/>
+                    </OverlayTrigger>
+                </Col>
+                <Col lg={1} className='archest-feature-progress-sub-activity-estimated'>
+                    {subActivity.estimated_time}
+                </Col>
+                <Col lg={1} className='archest-feature-progress-sub-activity-entered'>
+                    {subActivity.entered_time}
+                </Col>
+                <Col lg={1} className='archest-feature-progress-sub-activity-remaining'>
+                    {subActivity.remaining_time}
+                </Col>
+                <Col lg={1} className='archest-feature-progress-sub-activity-actions'>
+                    <Dropdown>
+                        <Dropdown.Toggle variant="link" size="sm">
+                            <span className='oi oi-cog'/>
+                        </Dropdown.Toggle>
+                        <Dropdown.Menu>
+                            <Dropdown.Item>Delete</Dropdown.Item>
+                        </Dropdown.Menu>
+                    </Dropdown>
+                </Col>
+            </Row>
+        );
+    }
+}
+
+export default ArchestFeatureSubActivityProgressComponent;
diff --git a/src/components/ArchestTimelineComponent.js b/src/components/ArchestTimelineComponent.js
@@ -1,10 +1,9 @@
 import React, {Component} from "react";
 import ArchestAuthEnabledComponent from "./ArchestAuthEnabledComponent";
 import ArchestMainContainerComponent from "./ArchestMainContainerComponent";
-import {ACTIVITY_WORK_ENTRY_TYPE, BACKEND_ESTIMATOR_API_URL, SUB_ACTIVITY_WORK_ENTRY_TYPE} from "../constants";
+import {BACKEND_ESTIMATOR_API_URL} from "../constants";
 import ArchestHttp from "../modules/archest_http";
 import ArchestWorkEntryComponent from "./ArchestWorkEntryComponent";
-import ArchestFloatingButtonComponent from "./ArchestFloatingButtonComponent";
 import './styles/ArchestTimeline.scss';
 import ArchestWorkEntryFormComponent from "./ArchestWorkEntryFormComponent";
 

diff --git a/src/components/ArchestWorkEntryFormComponent.js b/src/components/ArchestWorkEntryFormComponent.js
@@ -1,5 +1,5 @@
-import React, {Component, useState} from "react";
-import {Button, Card, Col, Form, Modal, Row} from "react-bootstrap";
+import React, {Component} from "react";
+import {Button, Col, Form, Modal, Row} from "react-bootstrap";
 import {ACTIVITY_WORK_ENTRY_TYPE, BACKEND_ESTIMATOR_API_URL, SUB_ACTIVITY_WORK_ENTRY_TYPE} from "../constants";
 import ArchestHttp from "../modules/archest_http";
 import ArchestFloatingButtonComponent from "./ArchestFloatingButtonComponent";

diff --git a/src/components/phase_estimates.js b/src/components/phase_estimates.js
@@ -198,6 +198,15 @@ class PhaseEstimatesComponent extends Component {
                             <span className="oi oi-eye"/>
                         </Button>
                     </OverlayTrigger>
+                    <OverlayTrigger key="progress" placement="right"
+                                    overlay={
+                                        <Tooltip id="tooltip-right">Progress</Tooltip>
+                                    }>
+                        <Button onClick={() => this.handleEstimateNavigationBtnClick(estimate, 'progress')}
+                                style={{'float': 'right', 'marginLeft': '10px'}} variant="outline-primary" size="sm">
+                            <span className="oi oi-project"/>
+                        </Button>
+                    </OverlayTrigger>
                     <OverlayTrigger key="edit" placement="top"
                                     overlay={
                                         <Tooltip id="tooltip-top">Edit</Tooltip>

diff --git a/src/components/styles/ArchestEstimateProgressComponent.scss b/src/components/styles/ArchestEstimateProgressComponent.scss
@@ -0,0 +1,53 @@
+@import "../../res/archest-default-theme/variables.scss";
+
+.archest-estimate-progress-card-body {
+  font-size: 0.875em;
+}
+
+.archest-feature-progress-feature {
+  padding-bottom: 15px;
+}
+
+.archest-feature-progress-feature-name {
+  background-color: $primary;
+  font-size: 1em;
+  padding: 5px 5px 5px 15px;
+  font-weight: bold;
+  color: #ffffff;
+}
+
+.archest-feature-progress-sub-activity:hover, .archest-feature-progress-sub-activity-name:hover {
+  background-color: $gray-300;
+  cursor: default;
+}
+
+.archest-feature-progress-activity:hover, .archest-feature-progress-activity-name:hover {
+  background-color: $info;
+  color: #ffffff;
+  cursor: default;
+}
+
+.archest-feature-progress-sub-activity-name {
+  padding-left: 30px;
+  font-weight: 300;
+}
+
+.archest-feature-progress-activity-name {
+  font-weight: 600;
+  color: $info;
+  font-size: 0.95em;
+}
+
+.archest-feature-progress-activity-entered-icon {
+  font-size: 1.1em;
+  margin-left: 5px;
+}
+
+.archest-feature-progress-heading {
+  font-weight: bold;
+  color: $primary;
+}
+
+.archest-feature-progress-activity-completion, .archest-feature-progress-sub-activity-completion {
+  padding-top: 7px;
+}
diff --git a/src/index.js b/src/index.js
@@ -12,6 +12,7 @@ import NavbarComponent from "./components/navbar";
 import PhaseEstimatesComponent from "./components/phase_estimates";
 import EstimateViewComponent from "./components/estimate_view";
 import EstimateEditComponent from "./components/estimate_edit";
+import ArchestEstimateProgressComponent from "./components/ArchestEstimateProgressComponent";
 import TimelineComponent from "./components/ArchestTimelineComponent.js";
 import ArchestCalendarComponent from "./components/ArchestCalendarComponent";
 
@@ -27,6 +28,7 @@ ReactDOM.render(
             <Route path="/phase/:phaseId/estimates/" component={PhaseEstimatesComponent}/>
             <Route path="/estimates/:estimateId/view/" component={EstimateViewComponent}/>
             <Route path="/estimates/:estimateId/edit/" component={EstimateEditComponent}/>
+            <Route path="/estimates/:estimateId/progress/" component={ArchestEstimateProgressComponent}/>
             <Route path="/login/" component={LoginComponent}/>
             <Route path="/logout/" component={LogoutComponent}/>
         </div>

diff --git a/src/res/archest-default-theme/index.scss b/src/res/archest-default-theme/index.scss
@@ -80,6 +80,10 @@ ol.breadcrumb > .breadcrumb-item {
   background-color: white !important;
 }
 
+.archest-table {
+  font-size: 0.875em;
+}
+
 .archest-card-body {
   padding: 0.75rem !important;
 }