TMSS-213 - Implemented Find Object

SAS/TMSS/frontend/tmss_webapp/src/App.js

@@ -31,7 +31,8 @@ class App extends Component {
         overlayMenuActive: localStorage.getItem('overlayMenuActive') === 'true' ? true : false,
         mobileMenuActive: localStorage.getItem('mobileMenuActive') === 'true' ? true : false,
         authenticated: Auth.isAuthenticated(),
-        redirect: (Auth.isAuthenticated() && window.location.pathname === "/login")?"/":window.location.pathname
+        redirect: (Auth.isAuthenticated() && window.location.pathname === "/login")?"/":window.location.pathname,
+        findObjectPlaceholder: 'Sub Task',
         };
         this.onWrapperClick = this.onWrapperClick.bind(this);
         this.onToggleMenu = this.onToggleMenu.bind(this);
@@ -40,6 +41,7 @@ class App extends Component {
         this.setPageTitle = this.setPageTitle.bind(this);
         this.loggedIn = this.loggedIn.bind(this);
         this.logout = this.logout.bind(this);
+        this.setSearchField = this.setSearchField.bind(this);
 
         this.menu = [ {label: 'Dashboard', icon: 'pi pi-fw pi-home', to:'/dashboard',section: 'dashboard'},
                         {label: 'Cycle', icon:'pi pi-fw pi-spinner', to:'/cycle',section: 'cycle'},
@@ -127,6 +129,19 @@ class App extends Component {
         this.setState({authenticated: false, redirect:"/"});
     }
 
+    /**
+     * Set search param
+     * @param {*} key 
+     * @param {*} value 
+     */
+    setSearchField(key, value) {
+        this.setState({
+            objectType: key, 
+            findObjectId: value, 
+            redirect:"/find-object"
+        });
+    }
+
     render() {
         const wrapperClass = classNames('layout-wrapper', {
             'layout-overlay': this.state.layoutMode === 'overlay',
@@ -146,12 +161,17 @@ class App extends Component {
                     {/* Load main routes and application only if the application is authenticated */}
                     {this.state.authenticated &&
                     <>
-                        <AppTopbar onToggleMenu={this.onToggleMenu} isLoggedIn={this.state.authenticated} onLogout={this.logout}></AppTopbar>
+                        <AppTopbar 
+                            onToggleMenu={this.onToggleMenu} 
+                            isLoggedIn={this.state.authenticated} 
+                            onLogout={this.logout} 
+                            setSearchField={this.setSearchField}
+                        />
                         <Router basename={ this.state.currentPath }>
                             <AppMenu model={this.menu} onMenuItemClick={this.onMenuItemClick} layoutMode={this.state.la} active={this.state.menuActive}/>
                             <div className="layout-main">
                                 {this.state.redirect &&
-                                    <Redirect to={{pathname: this.state.redirect}} />}
+                                    <Redirect to={{pathname: this.state.redirect, state:{objectType: this.state.objectType, findObjectId: this.state.findObjectId}}}   />}
                                 <AppBreadCrumbWithRouter setPageTitle={this.setPageTitle} />
                                 <RoutedContent />
                             </div>

SAS/TMSS/frontend/tmss_webapp/src/layout/components/AppTopbar.js

@@ -5,19 +5,17 @@ import 'primereact/resources/themes/nova-light/theme.css';
 import 'primereact/resources/primereact.css';
 import 'primeflex/primeflex.css';
 import { PropTypes } from 'prop-types';
-
 import Auth from '../../authenticate/auth';
-
+import { FindObejct } from './FindObejct';
 export class AppTopbar extends Component {
 
     constructor(props) {
         super(props);
         this.state = {
-            username: Auth.getUser().name
+            username: Auth.getUser().name,
         };
     }
         
-    
     static defaultProps = {
         onToggleMenu: null
     }
@@ -31,9 +29,11 @@ export class AppTopbar extends Component {
             <React.Fragment>
                 <div className="layout-wrapper layout-static layout-static-sidebar-inactive">
                     <div className="layout-topbar clearfix">
+                        
                         <button className="p-link layout-menu-button" onClick={this.props.onToggleMenu}>
 						<i className="pi pi-bars"></i></button>
                         <span className="header-title">TMSS</span>
+                       
                         {this.props.isLoggedIn &&
                             <div className="top-right-bar">
                                 <span><i className="fa fa-user"></i>{this.state.username}</span>
@@ -41,6 +41,7 @@ export class AppTopbar extends Component {
                                 <i className="pi pi-power-off"></i></button>
                             </div>
                         }
+                       <FindObejct setSearchField={this.props.setSearchField} />
                     </div>
                         
                 </div>

SAS/TMSS/frontend/tmss_webapp/src/layout/components/FindObejct.js

+import React, {Component} from 'react';
+import { Dropdown } from 'primereact/dropdown';
+import _ from 'lodash';
+import { appGrowl , setAppGrowl } from './AppGrowl';
+import { Growl } from 'primereact/components/growl/Growl';
+
+export class FindObejct extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            // Find Object - dropdown list value
+            objectTypes: [
+                {name: 'Sub Task', code: 'subtask'},
+                {name: 'Task Blueprint', code: 'taskblueprint'},
+                {name: 'Task Draft', code: 'taskdraft'},
+                {name: 'SU Blueprint', code: 'sublueprint'},
+                {name: 'SU Draft', code: 'sudraft'},
+                {name: 'Project', code: 'project'},
+            ],
+            findObjectPlaceholder: 'Sub Task',
+            objectid: ''
+        };
+        this.findObject = this.findObject.bind(this);
+        this.setFindObject = this.setFindObject.bind(this);
+    }
+
+    /**
+     * Set Object Type & Search Object id value
+     * @param {*} value 
+     */
+    setFindObject(value) {
+        if (value.name) {
+            this.setState({findObjectPlaceholder: value.name, objectid: this.state.objectid})
+        }   else if(this.state.findObjectPlaceholder === 'Project') {
+            this.setState({objectid: value});
+        } else if (!isNaN(value)) {
+            this.setState({objectid: value});
+        }
+    }
+        
+    /**
+     * Callback function to find Object
+     */
+    findObject() {
+        let objectType = _.find(this.state.objectTypes, {name: this.state.findObjectPlaceholder })
+        if (this.state.objectid && this.state.objectid.length > 0) {
+            this.props.setSearchField(objectType.code, this.state.objectid);
+        }   else {
+            appGrowl.show({severity: 'info', summary: 'Information', detail: 'Enter Object id to search'});
+        }
+    }
+
+    render() {
+        return (
+            <React.Fragment>
+                <Growl ref={(el) => setAppGrowl(el)} />
+                <div className="top-right-bar find-object-search" style={{marginRight: '2em'}}>
+                    <span className="p-input-icon-right"  >
+                        <a href="#" > <i className="pi pi-search find-object-search-btn" 
+                        onClick={this.findObject} /> </a>
+                        <Dropdown  
+                            className="p-link layout-menu-button" 
+                            value={this.state.objectid} 
+                            options={this.state.objectTypes}   
+                            optionLabel="name"  
+                            editable 
+                            placeholder={this.state.findObjectPlaceholder}
+                            onChange={(e) => {this.setFindObject(e.value)}}
+                        /> 
+                    </span>
+                </div>
+            </React.Fragment>
+        )
+    }
+}

SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_content.scss

@@ -3,4 +3,9 @@
     padding: 60px 16px 16px 25px;
     min-height: 95vh;
     background-color: white;
+}
+
+.find-obj-tree-view {
+    margin-left: 1em;
+    margin-right: 1em;
 }
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_topbar.scss

@@ -143,4 +143,13 @@
 
 .top-right-bar button {
     padding-left: 5px;
+}
+.find-object-search {
+    padding-top: 0px;
+}
+.find-object-search-btn {
+    margin-left: 10px;
+    float: right;
+    margin-top: .3em;
+    color: white;
 }
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/routes/Search/find.object.result.js

+import React, {Component} from 'react';
+import PageHeader from '../../layout/components/PageHeader';
+import { Tree } from 'primereact/tree';
+import TaskService  from './../../services/task.service';
+import ScheduleService from './../../services/schedule.service';
+import ProjectService from './../../services/project.service';
+
+export class FindObjectResult extends Component{
+    constructor(props){
+        super(props);
+        this.state = {
+            findObjectId: '',
+            objNodes: [],
+        };
+        this.schedulingSetList= {};
+        this.projectsList= {};
+        this.data= {};
+    }
+
+    /**
+     * Find Object based in search id
+     */
+    async componentDidMount(){
+        const objectType = (this.props.location.state && this.props.location.state.objectType)?this.props.location.state.objectType:'';
+        if (objectType === 'subtask') {
+            let subtaskDetails = await this.findSubTask(this.props.location.state.findObjectId);
+            this.setState({objNodes: (subtaskDetails)?[this.data.subtask]:[]});
+        }   
+        else if (objectType === 'taskdraft') {
+            let taskDetails = await this.findTask('draft', this.props.location.state.findObjectId);
+            this.setState({objNodes: (taskDetails)?[this.data.task]:[]});
+        }   
+        else if (objectType === 'taskblueprint') {
+            let taskDetails = await this.findTask('blueprint', this.props.location.state.findObjectId);
+            this.setState({objNodes: (taskDetails)?[this.data.task]:[]});
+        }   
+        else if (objectType === 'sublueprint') {
+            let suDetails = await this.findSchedulingUnit('blueprint', this.props.location.state.findObjectId);
+            this.setState({objNodes: (suDetails)?[this.data.schedulingUnit]:[]});
+        }   
+        else if (objectType === 'sudraft') {
+            let suDetails = await this.findSchedulingUnit('draft', this.props.location.state.findObjectId);
+            this.setState({objNodes: (suDetails)?[this.data.schedulingUnit]:[]});
+        }   
+        else if (objectType === 'project') {
+            let projectDetails = await this.findProject(this.props.location.state.findObjectId);
+            this.setState({objNodes: (projectDetails)?[this.data.project]:[]});
+        }
+        else {
+            this.setState({objNodes: []});
+        }
+    }
+
+    /**
+     * Find SubTask for given id
+     * @param {*} id 
+     * @returns 
+     */
+    async findSubTask(id){
+        const subtaskDetails  = await TaskService.getSubtaskDetails(id);
+        if (subtaskDetails) {
+            await this.findTask('blueprint', subtaskDetails.task_blueprint_id);
+            let subtask = {};
+            subtask['key'] = 'subtask'+subtaskDetails.id;
+            subtask['label'] = <> SubTask ({subtaskDetails.id}) 
+                                {/*  -- View page not available yet --
+                                <span className="find-obj-tree-view"><a href="" target='_blank'>View</a></span> */}
+                                <span className="find-obj-tree-view"> <a href={subtaskDetails.url} target='_blank' 
+                                title=" View SubTask API"><i className="pi pi-info-circle" /></a></span></>;
+            subtask['icon'] = 'pi pi-fw pi-calendar';
+            subtask['children'] = [this.data.task];
+            this.data['subtask'] = subtask;
+        }
+        return subtaskDetails;
+    }
+
+    /**
+     * Find Task details for given id
+     * @param {*} taskType 
+     * @param {*} id 
+     * @returns 
+     */
+    async findTask(taskType, id){
+        const taskDetails  = await TaskService.getTaskDetails(taskType, id);
+        if (taskDetails) {
+            if (taskType === 'blueprint') {
+                await this.findSchedulingUnit('blueprint', taskDetails.scheduling_unit_blueprint_id);
+            }   else {
+                await this.findSchedulingUnit('draft', taskDetails.scheduling_unit_draft_id);
+            }
+            let task = {};
+            task['key'] = 'task'+taskDetails.id;
+            task['label'] = <> Task ({taskDetails.id}) 
+                                <span className="find-obj-tree-view">
+                                    <a href={`/task/view/${taskType}/${taskDetails.id}`} target='_blank' title=" View Task Details">
+                                            <i className="fa fa-eye" />
+                                    </a>
+                                </span> 
+                                <span> <a href={taskDetails.url} target='_blank' title=" View Task API"><i className="pi pi-info-circle" /></a></span></>;
+            task['icon'] = 'pi pi-fw pi-calendar';
+            task['children'] = [this.data.schedulingUnit];
+            this.data['task'] = task;
+            this.setState({objNodes: [this.data.task]});
+        }
+        return taskDetails;
+    }
+
+    /**
+     * Find Scheduling Unit for given id
+     * @param {*} suType 
+     * @param {*} id 
+     * @returns 
+     */
+    async findSchedulingUnit(suType, id){
+        let suDetails = null;
+        if (suType === ' blueprint') {
+            suDetails = await ScheduleService.getSchedulingUnitBlueprintById(id);
+        }   else {
+            suDetails = await ScheduleService.getSchedulingUnitDraftById(id);
+        }
+        if (suDetails) {
+            await this.findProjectBySUId(suDetails.id);
+            let schedulingUnit = {};
+            schedulingUnit['key'] = 'su'+suDetails.id;
+            schedulingUnit['label'] = <> Scheduling Unit ({suDetails.id}) 
+                                 <span className="find-obj-tree-view"><a href={`/schedulingunit/view/${suType}/${suDetails.id}`} 
+                                    target='_blank' title=" View Scheduling Unit Details"><i className="fa fa-eye" /></a> </span>
+                                <span><a href={suDetails.url} target='_blank' title=" View Scheduling Unit API" >
+                                    <i className="pi pi-info-circle" /></a></span></>;
+            schedulingUnit['icon'] = 'pi pi-fw pi-calendar';
+            schedulingUnit['children'] = [this.data.suSet];
+            this.data['schedulingUnit'] = schedulingUnit;
+            this.setState({objNodes: [this.data.schedulingUnit]});
+        }
+        return suDetails;
+    }
+
+    /**
+     * Find project for given SU id 
+     * @param {*} suId 
+     */
+    async findProjectBySUId(suId) {
+        this.schedulingSetList = await ScheduleService.getSchedulingSets();
+        this.projectsList = await ScheduleService.getProjectList();
+        const suSetDetails = this.schedulingSetList.find((suSet) => { return  suId === suSet.id });
+        if (suSetDetails) {
+            const project = this.projectsList.find((project) => { return suSetDetails.project_id === project.name});
+            this.getProjectDetails(project);
+            let suSet = {};
+            suSet['key'] = 'suset'+suSetDetails.id;
+            suSet['label'] = <> Scheduling Set ({suSetDetails.id})
+                                {/*  -- View page not available yet --
+                                <span className="find-obj-tree-view"><a href="" 
+                                target='_blank' title='View Project details'><i className="fa fa-eye" /></a></span> */}
+                                <span className="find-obj-tree-view">
+                                    <a href={suSetDetails.url} target='_blank' title='View Scheduling Set API'><i className="pi pi-info-circle" /></a></span></>;
+            suSet['icon'] = 'fab fa-fw fa-wpexplorer';
+            suSet['children'] = [this.data.project];
+            this.data['suSet'] = suSet;
+            this.setState({objNodes: [this.data.suSet]});
+        }
+    }
+
+    /**
+     * Prepare Project details for tree view
+     * @param {*} projectDetails 
+     */
+    getProjectDetails(projectDetails) {
+        if (projectDetails) {
+            let project = {};
+            project['key'] = projectDetails.name;
+            project['label'] = <> Project ({projectDetails.name})
+                                <span className="find-obj-tree-view"><a href={`/project/view/${projectDetails.name}`} 
+                                target='_blank' title='View Project details'><i className="fa fa-eye" /></a></span>
+                                <span><a href={projectDetails.url} target='_blank' title='View Project API'><i className="pi pi-info-circle" /></a></span></>;
+            project['icon'] = 'fab fa-fw fa-wpexplorer';
+            this.data['project'] = project;
+            this.setState({objNodes: [this.data.project]});
+        }
+    }
+
+    /**
+     * Find project details for given id
+     * @param {*} id 
+     * @returns 
+     */
+    async findProject(id){
+        const projectDetails = await ProjectService.getProjectDetails(id);
+        this.getProjectDetails(projectDetails);
+        return projectDetails;
+    }
+
+    render(){
+        return(
+            <>
+               <PageHeader location={this.props.location} title={'Find Object'} 
+                    actions={[]}
+                />
+                {this.state.objNodes.length>0 &&
+                    <>
+                        <Tree value={this.state.objNodes} selectionMode="single" expandedKeys={true} style={{width: 'auto'}} />
+                    </>
+                }
+                {this.state.objNodes.length === 0 &&
+                    <> No Object found ! </>
+                }
+            </>
+        )
+    } 
+}

SAS/TMSS/frontend/tmss_webapp/src/routes/Search/index.js

+import {FindObjectResult} from './find.object.result';
+
+export {FindObjectResult} ;

SAS/TMSS/frontend/tmss_webapp/src/routes/index.js

@@ -15,6 +15,7 @@ import SchedulingUnitCreate from './Scheduling/create';
 import EditSchedulingUnit from './Scheduling/edit';
 import { CycleList, CycleCreate, CycleView, CycleEdit } from './Cycle';
 import { TimelineView, WeekTimelineView, ReservationCreate, ReservationList } from './Timeline';
+import { FindObjectResult } from './Search/'
 import SchedulingSetCreate from './Scheduling/excelview.schedulingset';
 import Workflow from './Workflow';
 import { Growl } from 'primereact/components/growl/Growl';
@@ -165,6 +166,12 @@ export const routes = [
         component: ReservationCreate,
         name: 'Reservation Add',
         title: 'Reservation - Add'
+    },
+    {
+        path: "/find-object",
+        component: FindObjectResult,
+        name: 'Find Object',
+        title: 'Find Object'
     }
 ];