TMSS-960 - updated top date filter logic

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

@@ -158,6 +158,18 @@ export class ReservationList extends Component{
         this. setToggleBySorting();
         await this.getFilterColumns();
         this.cycleList = await CycleService.getAllCycles();
+        this.setLocalFilters();
+        await this.setState({
+            isLoading: false,
+            cycleList: this.cycleList,
+            reservationsList: this.reservations,
+        });
+    }
+
+    /**
+     * Set Top filters when the state changed or while init the page
+     */
+    setLocalFilters() {
         let filters = UtilService.localStore({ type: 'get', key: "reservation_list"});
         if (filters) {
             let filter = _.find(filters, {'id': 'CycleId'});
@@ -168,18 +180,23 @@ export class ReservationList extends Component{
             if (filter) {
                 const values = filter.value;
                 this.setState({fStartTime: values[0]});
+            }   else {
+                this.setState({fStartTime: '', cycle: ''});
             }
             filter = _.find(filters, {'id': 'End Time'});
             if (filter) {
                 const values = filter.value;
                 this.setState({fEndTime:  values.length === 2 ? values[1] : values[0]});
+            }   else {
+                this.setState({fEndTime: '', cycle: ''});
             }
         }
-        await this.setState({
-            isLoading: false,
-            reservationsList: this.reservations,
-            cycleList: this.cycleList
+        let filter = _.find(filters, function(filter){
+            return (filter.id === 'Start Time' && filter.value.length>0) && (filter.id === 'End Time' && filter.value.length>0)
         });
+        if (!filter) {
+            this.setState({cycle: ''});
+        }
     }
 
     toggleBySorting=(sortData) => {       
@@ -253,6 +270,7 @@ export class ReservationList extends Component{
             return result;
         });
         UtilService.localStore({ type: 'set', key: 'reservation_list', value: filters});
+        this.setTableProperty(filters, 'Filter');
         await this.fetchTableData(null);
     }
 
@@ -267,6 +285,7 @@ export class ReservationList extends Component{
             return result;
         });
         UtilService.localStore({ type: 'set', key: 'reservation_list', value: filters});
+        this.setTableProperty(filters, 'Filter');
         await this.fetchTableData(null);
     }
 
@@ -309,9 +328,9 @@ export class ReservationList extends Component{
             let result =  filter.id === 'Start Time' ||  filter.id === 'End Time';
             return result;
         });
-            
-        let reservedTimeFilter = [{'id': 'Start Time', value:[Validator.isEmpty(this.state.fStartTime)?'':this.state.fStartTime, '']}];
-        reservedTimeFilter.push({'id': 'End Time', value:['', Validator.isEmpty(this.state.fEndTime)?'':this.state.fEndTime]});
+        await 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")]});
         filters = [...reservedTimeFilter, ...filters]; 
         this.setTableProperty(filters, 'Filter');
         UtilService.localStore({ type: 'set', key: 'reservation_list', value: filters});
@@ -511,6 +530,7 @@ export class ReservationList extends Component{
      */
     async fetchTableData(state) {
        // await this.getFilterColumns();
+        await this.setLocalFilters();
         this.filterQry = '';
         this.orderBy = '';
         this.pageUpdated = true;
@@ -635,7 +655,6 @@ export class ReservationList extends Component{
             this.setState({
                 isLoading: false,
                 reservationsList: this.reservations,
-               // filteredRowsList: this.reservations,
                 cycleList: this.cycleList
             });
         });
@@ -673,7 +692,7 @@ export class ReservationList extends Component{
                  <>
                  {permissions.list?
                  <>
-                    <div className="p-select " style={{position: 'relative'}}>
+                    <div className="p-select " style={{position: 'relative', marginTop: '-2em'}}>
                         <div className="p-field p-grid">
                             <div className="col-lg-3 col-md-3 col-sm-12 ms-height">
                                 <span className="p-float-label">