Add filtering for projects

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

@@ -88,6 +88,7 @@ export class ReservationList extends Component {
                 },
                 projects: {
                     name: "Projects",
+                    filter: "multiselect-filter"
                 },
                 expert: {
                     name: "Expert",
@@ -165,6 +166,7 @@ export class ReservationList extends Component {
         }
         this.reservationTypeOptionList = [];
         this.subjectsOptionList = [];
+        this.projects =[];
         this.stationList = [];
         this.filterQry = '';
         this.orderBy = '';
@@ -605,20 +607,28 @@ export class ReservationList extends Component {
         this.getOptions('subject', apiFilters);
         this.stationList = [];
         this.getOptions('stations_any', apiFilters);
+        this.getOptions('projects',apiFilters);
+
+
     }
 
     getOptions(key, apiFilter) {
+        console.log("apifilter " + key,apiFilter)
         if (apiFilter.data.filters[key]) {
-            apiFilter.data.filters[key].choices.forEach(choice => {
+            apiFilter.data.filters[key].choices?.forEach(choice => {
                 if (key === 'subject') {
                     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 });
+                } else if (key === 'projects') {
+                    this.projects.push({ name: choice.display_name, value: choice.value });
                 }
+                
             })
         }
+
     }
 
     /**
@@ -653,7 +663,13 @@ export class ReservationList extends Component {
                         this.filterQry += 'stop_time_before=' + moment(new Date(values[1])).format("YYYY-MM-DD 23:59:59&");
                     }
                 } else if (filter.id === 'Projects') {
-                    this.filterQry += 'project=' + encodeURIComponent(filter.value) + '&';
+                    if (filter.value.length > 0) {
+                        const values = _.split(filter.value, ",");
+                        for (const value of values) {
+                            this.filterQry += 'projects=' + encodeURIComponent(value) + '&';
+                        }
+                    }
+
                 } else if (filter.id === 'Stations') {
                     const stationFilterType = _.find(filters, { id: 'stationFilterType' });
                     if (filter.value.length > 0) {
@@ -703,6 +719,7 @@ export class ReservationList extends Component {
 
         this.currentPageSize = (state?.pageSize) ? state.pageSize : this.currentPageSize;
         let offset = (state?.pageIndex) ? state.pageIndex * this.currentPageSize : 0;
+        
         await this.getReservationList(this.filterQry, this.orderBy, this.currentPageSize, offset);
 
         
@@ -783,7 +800,10 @@ export class ReservationList extends Component {
             options = this.reservationTypeOptionList;
         } else if (id && id === 'Subject') {
             options = this.subjectsOptionList;
-        } else if (id === 'Stations') {
+        } else if (id && id === 'Projects') {
+            options = this.projects;
+        } 
+        else if (id === 'Stations') {
             this.stationList = _.orderBy(this.stationList, ['name'], ['asc']);
             return this.stationList;
         }