diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js index 994187c5718b3cdb755fe06b716e1f7bf84e12ae..985515d80e8f1c90b85d7ce3ee468b7e5dbe43f5 100644 --- a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js +++ b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js @@ -328,18 +328,8 @@ function MultiSelectColumnFilter({ column: { filterValue, setFilter, preFilteredRows, id, Header }, }) { const [value, setValue] = useState(''); + const [filtered, setFiltered] = useState(false); const [filtertype, setFiltertype] = useState('Any'); - // Set Any / All Filter type - const setSelectTypeOption = (option) => { - setFiltertype(option); - multiSelectOption[Header] = option - if (value !== '') { - if (storeFilter) { - TableUtil.saveFilter(currentTableName, `${Header}-FilterOption`, option); - } - setFilter(value); - } - }; React.useEffect(() => { if (!filterValue && value) { @@ -357,6 +347,38 @@ function MultiSelectColumnFilter({ } } }, [filterValue, value, filtertype]); + // Set Any / All Filter type + const setSelectTypeOption = (option) => { + setFiltertype(option); + multiSelectOption[Header] = option + if (value !== '') { + if (storeFilter) { + TableUtil.saveFilter(currentTableName, `${Header}-FilterOption`, option); + } + setFilter(value); + } + }; + function callSearchFunc(e) { + callServerFilter(e); + //console.log('called',e) + } + + // Function to call the server side filtering + const callServerFilter = (event, isCleared) => { + hasFilters = true; + //_.remove(tableOptionsState.filters, function(filter) { return filter.id === Header }); + //tableOptionsState.filters.push({id: Header, value: event.target.value}); + tableOptionsState.filters.push({id: 'stationFilterType', value: filtertype}); + if (isCleared) { + hasFilters = false; + if (filtered) { + _.remove(tableOptionsState.filters, function(filter) { return filter.id === Header }); + filterCallback(tableOptionsState, setLoaderFunction); + } + } else { + filterCallback(tableOptionsState, setLoaderFunction); + } + }; multiSelectOption[Header] = filtertype; const options = React.useMemo(() => { @@ -387,36 +409,50 @@ function MultiSelectColumnFilter({ return ( <div onClick={e => { e.stopPropagation() }} > <div className="p-field-radiobutton"> - <RadioButton inputId="filtertype1" name="filtertype" value="Any" onChange={(e) => setSelectTypeOption(e.value)} checked={filtertype === 'Any'} /> + <RadioButton inputId="filtertype1" name="filtertype" value="Any" + onChange={(e) => setSelectTypeOption(e.value)} checked={filtertype === '' || filtertype === 'Any'} + tooltip= "Search the row if the Station contains at least one of the selected value" /> <label htmlFor="filtertype1">Any</label> </div> <div className="p-field-radiobutton"> - <RadioButton inputId="filtertype2" name="filtertype" value="All" onChange={(e) => setSelectTypeOption(e.value)} checked={filtertype === 'All'} /> + <RadioButton inputId="filtertype2" name="filtertype" value="All" + onChange={(e) => setSelectTypeOption(e.value)} checked={filtertype === 'All'} + tooltip= "Search the row if the Station contains all of the selected value" /> <label htmlFor="filtertype2">All</label> </div> - <div style={{ position: 'relative' }} > - <MultiSelect data-testid="multi-select" id="multi-select" optionLabel="value" optionValue="value" filter={true} - value={value} - options={options} - onChange={e => { - setValue(e.target.value); - setFilter(e.target.value || undefined); - setFiltertype(filtertype); - if(storeFilter) { - if (e.target.value.length > 0) { - TableUtil.saveFilter(currentTableName, Header, e.target.value); - TableUtil.saveFilter(currentTableName, `${Header}-FilterOption`, filtertype); - } else { - TableUtil.clearColumnFilter(currentTableName, Header); - TableUtil.clearColumnFilter(currentTableName, `${Header}-FilterOption`); + <div style={{ position: 'relative', display: 'flex'}} > + <div> + <MultiSelect data-testid="multi-select" id="multi-select" optionLabel="value" optionValue="value" filter={true} + value={value} + options={options} + onChange={e => { + setValue(e.target.value); + setFilter(e.target.value || undefined); + setFiltertype(filtertype); + setFiltered(true); + if(storeFilter) { + if (e.target.value.length > 0) { + TableUtil.saveFilter(currentTableName, Header, e.target.value); + TableUtil.saveFilter(currentTableName, `${Header}-FilterOption`, filtertype); + } else { + TableUtil.clearColumnFilter(currentTableName, Header); + TableUtil.clearColumnFilter(currentTableName, `${Header}-FilterOption`); + } } - } - }} - maxSelectedLabels="1" - selectedItemsLabel="{0} Selected" - className="multi-select" - tooltip={(tableToolTipsState[Header])?tableToolTipsState[Header]:"Select one or more value from list to search"} - /> + }} + maxSelectedLabels="1" + selectedItemsLabel="{0} Selected" + className="multi-select" + tooltip={(tableToolTipsState[Header])?tableToolTipsState[Header]:"Select one or more value from list to search"} + /> + </div> + {doServersideFilter && + <div> + <button className="p-link" onClick={callSearchFunc} > + <i className="pi pi-search search-btn" /> + </button> + </div> + } </div> </div> ) @@ -1869,6 +1905,10 @@ const filterTypes = { 'durationMinMax': { fn: DurationRangeFilter, type: durationTimeFilterFn + }, + 'durationWithDaysMinMax': { + fn: DurationRangeFilterWithDays, + type: 'between' } }; diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.list.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.list.js index 27a4e40387d6c7bff3073c2e6f102b955023fcd8..d11c104b81635d09439fb592494766b1e86bdfb7 100644 --- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.list.js +++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.list.js @@ -122,7 +122,8 @@ export class ReservationList extends Component{ } this.reservationTypeOptionList = []; this.subjectsOptionList = []; - let optionsList = new Set(); + this.stationList = []; + // let optionsList = new Set(); this.filterQry = ''; this.orderBy = ''; this.limit = 10; @@ -132,6 +133,7 @@ export class ReservationList extends Component{ // fStartTime: {required: true, message: "Start Date can not be empty"}, // fEndTime: {required: true, message: "Stop Date can not be empty"} }; + this.reservations= []; this.cycleList= []; this.selectedRows = []; @@ -429,10 +431,10 @@ export class ReservationList extends Component{ columnDef[key]['disableSortBy'] = !_.includes(apiFilters.data.ordering, 'project'); columnDef[key]['disableFilters'] = false; columnDef[key]['filter'] = ''; - } else if (key === 'stations' && apiFilters.data.filters['specifications_doc']) { + } else if (key === 'stations' && apiFilters.data.filters['stations_any']) { columnDef[key]['disableSortBy'] = false; columnDef[key]['disableFilters'] = false; - columnDef[key]['filter'] = '' // comment this line if want exisitng clint side filter + //columnDef[key]['filter'] = '' // comment this line if want exisitng clint side filter } else if (key === 'duration' && apiFilters.data.filters['duration_min']) { columnDef[key]['disableSortBy'] = !_.includes(apiFilters.data.ordering, 'duration_min'); columnDef[key]['disableFilters'] = false; @@ -493,6 +495,8 @@ export class ReservationList extends Component{ getDropDownOptionList(apiFilters) { this.getOptions('reservation_type', apiFilters); this.getOptions('subject', apiFilters); + this.stationList = []; + this.getOptions('stations_any', apiFilters); } getOptions(key, apiFilter) { @@ -502,6 +506,8 @@ export class ReservationList extends Component{ this.subjectsOptionList.push(choice.value); } else if(key === 'reservation_type') { this.reservationTypeOptionList.push(choice.value); + } else if (key === 'stations_any') { + this.stationList.push({name: choice.display_name, value:choice.value}); } }) } @@ -542,9 +548,17 @@ export class ReservationList extends Component{ } else if (filter.id === 'Project') { this.filterQry += 'project='+ filter.value+'&' ; } else if (filter.id === 'Stations') { - const values = _.split(filter.value, ","); - for ( const value of values) { - this.filterQry += 'specifications_doc='+value+"&"; + const stationFilterType = _.find(filters, {id:'stationFilterType'}); + if(filter.value.length>0) { + const values = _.split(filter.value, ","); + for ( const value of values) { + if(stationFilterType && stationFilterType.value === 'All') { + this.filterQry += 'stations_all='+value+"&"; + } else { + this.filterQry += 'stations_any='+value+"&"; + } + + } } } else if (filter.id === 'Duration (Days HH:mm:ss)' && filter.value != '') { let columnDetails = _.find(this.state.columnMap, {displayName:filter.id}); @@ -614,7 +628,7 @@ export class ReservationList extends Component{ reservation.duration = 'Unknown'; reservation['stop_time']= 'Unknown'; } else { - let duration = reservation.duration; + //let duration = reservation.duration; reservation.duration = UnitService.getSecsToDDHHmmss(reservation.duration); reservation['stop_time']= moment(reservation['stop_time']).format(UIConstants.CALENDAR_DATETIME_FORMAT); } @@ -647,6 +661,9 @@ export class ReservationList extends Component{ options = this.reservationTypeOptionList; } else if (id && id === 'Subject') { options = this.subjectsOptionList; + } else if (id === 'Stations') { + this.stationList = _.orderBy(this.stationList, ['name'], ['asc']); + return this.stationList; } return options; } diff --git a/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js b/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js index ece0007aa7541e1dba4d6861960700668029d5ba..27b8de3fe82a560327974d9faaa6f73721f86960 100644 --- a/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js +++ b/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js @@ -60,7 +60,7 @@ const Validator = { var timeFormat = /^([0-9]|[0-9][0-9]):([0-9]|[0-5][0-9]):([0-9]|[0-5][0-9])$/; isValid = timeFormat.test(time); } else { - var timeFormat = /^([0-9]|[0-2][0-3]):([0-9]|[0-5][0-9]):([0-9]|[0-5][0-9])$/; + var timeFormat = /^([0-9]|[0-1][0-9]|[0-2][0-3]):([0-9]|[0-5][0-9]):([0-9]|[0-5][0-9])$/; isValid = timeFormat.test(time); }