Merge branch 'TMSS-2707-PartVI' into 'master'

Resolve TMSS-2707 "Partvi"

Closes TMSS-2707

See merge request !1241

SAS/TMSS/frontend/tmss_webapp/src/response.handler.js

@@ -11,12 +11,15 @@ import ShowErrorDetails from './show.error.details';
  * @returns 
  */
 const handleResponse= Wrapped => {
+   let lastReponse
+   
     function HandleResponse(props) {
         useEffect(()=>{
             axios.interceptors.response.use(function (response) {
                 return response;
             }, function (error) {
                 if (error.response.status !== 403) {
+                    if (lastReponse!==error.response)
                     showMessage(error.response);
                 }
                 return Promise.reject(error);

SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.list.js

@@ -196,12 +196,37 @@ export class ReservationList extends Component {
         this.refreshReservationList = this.refreshReservationList.bind(this);
         this.updateReservation = this.updateReservation.bind(this);
     }
+    setFromRedirection = async () => {
+
+        if (this.props.match.params.fromdate && this.props.match.params.todate) {
+            try {
+                const fromDate = new Date(this.props.match.params.fromdate)
+                const toDate = new Date(this.props.match.params.todate)
+                this.setState({ fStartTime: fromDate, fEndTime: toDate });
+              
+
+
+                let filters = []
+                let reservedTimeFilter = [{ 'id': 'Start Time', value: ['',moment(new Date(toDate)).format("YYYY-MM-DDTHH:mm:ss")] }];
+                reservedTimeFilter.push({ 'id': 'End Time', value: [moment(new Date(fromDate)).format("YYYY-MM-DDTHH:mm:ss",'')] });
+                filters = [...reservedTimeFilter];
+                this.setTableProperty(filters, 'Filter');
+                UtilService.localStore({ type: 'set', key: 'reservation_list', value: filters });
+                await this.fetchTableData(null);
+                this.pageUpdated = true;
+
+            }
+            catch (ex) { return false }
+        }
+        return true
+    }
+
 
     async componentDidMount() {
         this.setToggleBySorting();
         await this.getFilterColumns();
-        this.cycleList = await CycleService.getAllCycles();
-        this.setLocalFilters();
+        
+        this.prepareLoading()
         this.setState({
             isLoading: false,
             cycleList: this.cycleList,
@@ -210,6 +235,22 @@ export class ReservationList extends Component {
     }
 
 
+    prepareLoading= async ()=>{
+        if (this.setFromRedirection()) {
+            await  this.fetchTableData(null);
+            this.pageUpdated = true;    
+            return
+        } 
+        this.setLocalFilters();
+        this.cycleList = await CycleService.getAllCycles();
+    }
+
+
+    
+
+
+
+
 
 
     /**
@@ -275,6 +316,8 @@ export class ReservationList extends Component {
         return reservation;
     }
 
+
+    
     /**
      * Filter reservation based on cycle filter selected
      * Here to search use Cycle.start time as Reservation Start time and Cycle.stop time as Reservation End time
@@ -328,7 +371,7 @@ export class ReservationList extends Component {
     Reset the Reserved End Datetime filter
      */
     async resetEndDateTime() {
-        await this.setState({ 'fEndTime': '' });
+         this.setState({ 'fEndTime': '' });
         let filters = UtilService.localStore({ type: 'get', key: "reservation_list" });
         _.remove(filters, function (filter) {
             let result = filter.id === 'End Time';
@@ -372,15 +415,15 @@ export class ReservationList extends Component {
      * @param {*} type - Date Filter Name
      * @param {*} value - Date Value
      */
-    async setDateRange() {
+    async setDateRange(StartTime=this.state.fStartTime, EndTime=this.state.fEndTime) {
         let filters = UtilService.localStore({ type: 'get', key: "reservation_list" });
         _.remove(filters, function (filter) {
             let result = filter.id === 'Start Time' || filter.id === 'End Time';
             return result;
         });
         this.setState({ cycle: '' });
-        let reservedTimeFilter = [{ 'id': 'Start Time', value: [Validator.isEmpty(this.state.fStartTime) ? '' : moment(new Date(this.state.fStartTime)).format("YYYY-MM-DDTHH:mm:SS"), ''] }];
-        reservedTimeFilter.push({ 'id': 'End Time', value: ['', Validator.isEmpty(this.state.fEndTime) ? '' : moment(new Date(this.state.fEndTime)).format("YYYY-MM-DDTHH:mm:SS")] });
+        let reservedTimeFilter = [{ 'id': 'Start Time', value: [Validator.isEmpty(StartTime) ? '' : moment(new Date(StartTime)).format("YYYY-MM-DDTHH:mm:ss"), ''] }];
+        reservedTimeFilter.push({ 'id': 'End Time', value: ['', Validator.isEmpty(EndTime) ? '' : moment(new Date(EndTime)).format("YYYY-MM-DDTHH:mm:ss")] });
         filters = [...reservedTimeFilter, ...filters];
         this.setTableProperty(filters, 'Filter');
         UtilService.localStore({ type: 'set', key: 'reservation_list', value: filters });
@@ -584,8 +627,7 @@ export class ReservationList extends Component {
      * @returns 
      */
     async fetchTableData(state) {
-        // await this.getFilterColumns();
-        await this.setLocalFilters();
+        
         this.filterQry = '';
         this.orderBy = '';
         this.pageUpdated = true;
@@ -597,18 +639,18 @@ export class ReservationList extends Component {
                 if (filter.id === 'Start Time') {
                     const values = filter.value;
                     if (values[0] && values[0] !== '') {
-                        this.filterQry += 'start_time_min=' + moment(new Date(values[0])).format("YYYY-MM-DD HH:mm:SS&");
+                        this.filterQry += 'start_time_after=' + moment(new Date(values[0])).format("YYYY-MM-DD HH:mm:ss&");
                     }
                     if (values[1] && values[1] !== '') {
-                        this.filterQry += 'start_time_max=' + moment(new Date(values[1])).format("YYYY-MM-DD HH:mm:ss&");
+                        this.filterQry += 'start_time_before=' + moment(new Date(values[1])).format("YYYY-MM-DD HH:mm:ss&");
                     }
                 } else if (filter.id === 'End Time') {
                     const values = filter.value;
                     if (values[0] && values[0] !== '') {
-                        this.filterQry += 'stop_time_min=' + moment(new Date(values[0])).format("YYYY-MM-DD 00:00:00&");
+                        this.filterQry += 'stop_time_after=' + moment(new Date(values[0])).format("YYYY-MM-DD 00:00:00&");
                     }
                     if (values[1] && values[1] !== '') {
-                        this.filterQry += 'stop_time_max=' + moment(new Date(values[1])).format("YYYY-MM-DD 23:59:59&");
+                        this.filterQry += 'stop_time_before=' + moment(new Date(values[1])).format("YYYY-MM-DD 23:59:59&");
                     }
                 } else if (filter.id === 'Project') {
                     this.filterQry += 'project=' + encodeURIComponent(filter.value) + '&';
@@ -834,9 +876,11 @@ export class ReservationList extends Component {
                             disabled: permissions.create ? !permissions.create : true,
                             type: 'buttonv2',
                             actOn: 'click',
-                        props: { callback: this.movetoCreate
+                            props: {
+                                callback: this.movetoCreate
 
-                    }},
+                            }
+                        },
                         { icon: 'pi-trash', title: 'Delete selected Reservations', disabled: permissions.delete ? !permissions.delete : true, type: 'buttonv2', actOn: 'click', props: { callback: this.confirmDeleteReservations } },
 
                         { icon: 'pi-times', title: 'Click to close Reservation list', type: 'buttonv2', actOn: 'click', props: { callback: this.closeList } }
@@ -892,8 +936,6 @@ export class ReservationList extends Component {
                                         />
                                         <Button onClick={this.resetEndDateTime} title="Clear date range"> <i className="pi pi-times"  ></i>  </Button>
                                     </div>
-                    
-
                                 </Panel>
 
 

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/WeekView.js

@@ -4,6 +4,7 @@ import Filters from "./components/toolbar/Filters";
 import { useEffect, useRef, useState } from "react";
 import 'react-calendar-timeline/lib/Timeline.css';
 import "flatpickr/dist/flatpickr.css";
+import  PeriodSelection  from "../../shared/periodSelection"
 import Timeline, {
     CursorMarker,
     CustomMarker,
@@ -23,7 +24,6 @@ import {
     getHeaderActions,
     getPageHeaderOptionsMenuItems,
     getSchedulerActions,
-    getNavigationActions,
     getGroupedByActions,
     updateSchedulerStatuses,
 } from "./helpers/week.view.helper";
@@ -401,9 +401,9 @@ export default function WeekView(props) {
         </div>
         {!permissions ? <ProgressSpinner className="m-4" style={{ color: "var(--primary-300)" }} /> :
             <TieredMenu className="app-header-menu" popup ref={actionsMenuRef}
-                model={getPageHeaderOptionsMenuItems(permissions)} />}
+                model={getPageHeaderOptionsMenuItems(permissions,startTime,endTime)} />}
         <PageHeader location={location} title={'Scheduling Units - ' + weekNumbers + ' View'}
-            actions={getGroupedByActions(grouping, updateGrouping).concat(getNavigationActions(navigateToWeek)).concat(getSchedulerActions(schedulerSettings, setShowSchedulerSettingsDialog))
+            actions={getGroupedByActions(grouping, updateGrouping).concat(PeriodSelection.getPeriodNavigationActions(navigateToWeek,)).concat(getSchedulerActions(schedulerSettings, setShowSchedulerSettingsDialog))
                 .concat(getHeaderActions(isLoading, setRefetchToggle, actionsMenuRef, isExpanded, setIsExpanded, showLegendbar, toggleLegend))} />
         <div className="p-grid">
 

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/business/timelinegroupingbusiness.js

@@ -17,10 +17,9 @@ export function getTimelineGroups() {
                 { label: "Scheduler Type", value: "scheduler_group", id: 11, title: "Scheduler Type" }
         ]
 }
+
 export function getGroups(itemGroupKey, startTime, data, endTime) {
         let groups
-
-
         if (itemGroupKey == "group") { // then group is the default, date one
                 let days = moment(endTime).diff(moment(startTime), 'days') + 1;
                 groups = createDateGroups('', startTime, days);

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/helpers/week.view.helper.js

@@ -80,23 +80,10 @@ export function getGroupedByActions(selected, setGroupedBy) {
 
 }
 
-export function getNavigationActions(AddWeeks) {
-    return [
-        PageHeaderActions.actionButtonObject(
-            "previous 7 days",
-            "pi pi-angle-double-left",
-            "",
-            { callback: () => AddWeeks(-1) }
-        ),
-        PageHeaderActions.actionButtonObject(
-            "next 7 days",
-            "pi pi-angle-double-right",
-            "",
-            { callback: () => AddWeeks(1) }
-        ),
-        PageHeaderActions.actionDivider("navigationbreaker")
-    ];
-}
+
+
+
+
 
 
 export function getSchedulerActions(schedulerSettings, setShowSchedulerSettingsDialog) {
@@ -124,7 +111,7 @@ export function getSchedulerActions(schedulerSettings, setShowSchedulerSettingsD
     ];
 }
 
-export function getPageHeaderOptionsMenuItems(permissions) { //TODO factory method
+export function getPageHeaderOptionsMenuItems(permissions,fromdate,todate) { //TODO factory method
     return [
         {
             label: 'Add Reservation',
@@ -133,11 +120,10 @@ export function getPageHeaderOptionsMenuItems(permissions) { //TODO factory meth
             command: () => window.open('/reservation/create', '_blank')
         },
         {
-            label: 'Reservation List',
-            icon: "fa fa-bars",
+            label: 'Filtered Reservation List',
+            icon: "pi  pi-book",
             disabled: permissions == null || permissions.weekView == null || !permissions.weekView.listreservation,
-            command: () => window.open('/reservation/list', '_blank')
-
+            command: () => window.open("/reservation/list/from/" + fromdate.format("YYYY-MM-DDTHH:mm:ss") + "/to/"+ todate.format("YYYY-MM-DDTHH:mm:ss"), '_blank')
         },
         {
             separator: true

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

@@ -201,6 +201,13 @@ export const routes = [
         title: 'Reservation List',
         permissions: ['reservation', 'list']
     },
+    {
+        path: "/reservation/list/from/:fromdate/to/:todate",
+        component: ReservationList,
+        name: 'Reservation List',
+        title: 'Reservation List',
+        permissions: ['reservation', 'list']
+    },
     {
         path: "/reservation/create",
         component: ReservationCreate,

SAS/TMSS/frontend/tmss_webapp/src/shared/periodSelection.js

+import PageHeaderActions from "../utils/pageheaderactions.util.js";
+
+const periodOptions = [
+    { label: "Showing Day At", value: "showing_day_at", id: 0, title: "Showing Day At" },
+    { label: "Showing Week From", value: "showing_week_from", id: 1, title: "Showing Week From" },
+];
+
+const getPeriodNavigationActions = (AddWeeks, SetPeriod, selected) => {
+    return [
+   /*
+        PageHeaderActions.actionDropDownObject(
+            "Period",
+            PeriodSelection.periodOptions,
+            { callback: (period) => SetPeriod(period) },
+            selected,
+            "timeline-header-dropdown", "value", "label"
+        ),*/
+        PageHeaderActions.actionButtonObject(
+            "previous 7 days",
+            "pi pi-angle-double-left",
+            "",
+            { callback: () => AddWeeks(-1) }
+        ),
+        PageHeaderActions.actionButtonObject(
+            "next 7 days",
+            "pi pi-angle-double-right",
+            "",
+            { callback: () => AddWeeks(1) }
+        ),
+        PageHeaderActions.actionDivider("navigationbreaker")
+    ];
+};
+
+const PeriodSelection = {
+    periodOptions,
+    getPeriodNavigationActions,
+};
+
+export default PeriodSelection;