reservation.summary.js

import React, {Component} from 'react';
import { Link } from 'react-router-dom/cjs/react-router-dom.min';
import moment from 'moment';
import _ from 'lodash';
import { JsonToTable } from "react-json-to-table";
import UIConstants from '../../utils/ui.constants';
import UnitConverter from '../../utils/unit.converter';
import DetailsSummary from "../Timeline/components/DetailsSummary";

/**
 * Component to view summary of the Reservation
 */
export class ReservationSummary extends Component {

    constructor(props) {
        super(props);
        this.closeSUDets = this.closeSUDets.bind(this);
    }

    componentDidMount() {}

    /**
     * Function to close the summary panel and call parent callback function to close.
     */
    closeSUDets() {
        if(this.props.closeCallback) {
            this.props.closeCallback();
        }
    }

    /**
     * Function to order or format all specifications to readable values
     * @param {Object} specifications
     */
    getOrderedSpecifications(specifications) {
        for (const specKey of _.keys(specifications)) {
            let specification = this.getFormattedSpecification(specifications[specKey]);
            specifications[specKey] = specification;
        }
        return specifications;
    }

    /**
     * Function to format date, boolean, array object to readable values
     * @param {Object} specification
     */
    getFormattedSpecification(specification) {
        if (specification !== null) {
            const objectType = typeof specification;
            switch(objectType) {
                case "string": {
                    try {
                        const dateValue = moment.utc(specification);
                        if (dateValue.isValid()) {
                            specification = dateValue.format(UIConstants.CALENDAR_DATETIME_FORMAT);
                        }
                    } catch (error) { /* empty */ }
                    break;
                }
                case "boolean": {
                    specification = specification?'True':'False';
                    break;
                }
                case "object": {
                    if (Array.isArray(specification)) {
                        let newArray = [], isStringArray = false;
                        for (let arrayObj of specification) {
                            arrayObj = this.getFormattedSpecification(arrayObj);
                            if (arrayObj) {
                                if ((typeof arrayObj) === "string") {
                                    isStringArray = true;
                                }
                                newArray.push(arrayObj);
                            }
                        }
                        specification = newArray.length > 0?(isStringArray?newArray.join(", "):newArray):null;
                    }   else {
                        let newObject = {};
                        for (const objectKey of _.keys(specification)) {
                            let object = this.getFormattedSpecification(specification[objectKey]);
                            if (object) {
                                newObject[objectKey.replace(/_/g, ' ')] = object;
                            }
                        }
                        specification = (!_.isEmpty(newObject))? newObject:null;
                    }
                    break;
                }
               
            }
        }
        return specification;
    }

    /**
     * Funtion to open the reservation view page in same or new tab/window.
     */
    redirectToReservDetails = () => {
        if (this.props.viewInNewWindow) {
            window.open(`/reservation/view/${this.props.reservation.id}`, '_blank');
        } else {
            this.props.history.push(`/reservation/view/${this.props.reservation.id}`);
        }
    }

    render() {
        const reservation = this.props.reservation;
        let specifications = reservation?_.cloneDeep(reservation.specifications_doc):null;
        if (specifications) {
            // Remove $schema variable
            delete specifications['$schema'];
        }

        const hasStopTime = !!reservation.stop_time
        let summaryFields = [
            {labelName:"Name", value: reservation.name, formatTime: false},
            {labelName:"Description", value: reservation.description, formatTime: false},
            {labelName:"Project", value: reservation.project_id, formatTime: false},
            {labelName:"Start Time", value: reservation.start_time, formatTime: true},
            {labelName:"Stop Time", value: hasStopTime ? reservation.stop_time : "-", formatTime: hasStopTime},
            {labelName:"Duration (HH:mm:ss)", value: reservation.stop_time ? UnitConverter.getSecsToHHmmss(reservation.duration) : "Unknown", formatTime: false},
          ]

        return (
            <React.Fragment>
            { reservation &&
                <div className="p-grid timeline-details-pane" style={{marginTop: '10px'}}>
                    <div className="timeline-details-header">
                        <h6 className="col-lg-10 col-sm-10">Reservation Details</h6>
                        <Link onClick={this.redirectToReservDetails} title="View Full Details" ><i className="fa fa-eye"></i></Link>
                        {/* <i className="fa fa-eye" style={{color: 'grey'}}></i> */}
                        <Link to={this.props.location?this.props.location.pathname:"/su/timelineview/week"} onClick={this.closeSUDets} title="Close Details"><i className="pi pi-times"></i></Link>
                    </div>
                    <DetailsSummary fields={summaryFields}/>
                    {/* Reservation parameters Display in table format */}
                    {reservation.specifications_doc &&
                        <>
                        <div className="col-12 constraints-summary">
                            <label>Parameters:</label>
                            <JsonToTable json={this.getOrderedSpecifications(specifications)} />
                        </div>
                        </>
                    }
                </div>
            }
            </React.Fragment>
        );
    }
}

export default ReservationSummary;