Room Bookings

Added new filter

Room Bookings

Added new filter

src/actions/media-upload-actions.js

@@ -124,7 +124,6 @@ export const queryMediaUploads = _.debounce(async (summitId, input, callback) =>
     fetch(apiUrl.toString())
         .then(fetchResponseHandler)
         .then((json) => {
-            debugger
             const options = [...json.data];
             callback(options);
         })

src/actions/room-booking-actions.js

@@ -53,14 +53,30 @@ export const ROOM_BOOKING_CANCELED = 'ROOM_BOOKING_CANCELED';
 
 export const RECEIVE_ROOM_BOOKING_AVAILABILITY = 'RECEIVE_ROOM_BOOKING_AVAILABILITY';
 
-export const getRoomBookings = (term = null, page = 1, perPage = 10, order = 'start_datetime', orderDir = 1) => async (dispatch, getState) => {
+const parseFilters = (filters, term) => {
 
+    const filter = [];
+    if (term) {
+        const escapedTerm = escapeFilterValue(term);
+        filter.push(`owner_name=@${escapedTerm},room_name=@${escapedTerm}`);
+    }
+
+    if(filters.hasOwnProperty('email_filter')){
+        const email_filter = filters.email_filter;
+        if(email_filter.operator && email_filter.value)
+            filter.push(`${email_filter.operator}${escapeFilterValue(email_filter.value)}`);
+    }
+
+    return filter;
+}
+
+export const getRoomBookings = (term = null, page = 1, perPage = 10, order = 'start_datetime', orderDir = 1, filters = {}) => async (dispatch, getState) => {
     const { currentSummitState } = getState();
     const accessToken = await getAccessTokenSafely();
     const { currentSummit } = currentSummitState;
-    const filter = [];
 
     dispatch(startLoading());
+    const filter = parseFilters(filters, term);
 
     const params = {
         page: page,
@@ -71,11 +87,6 @@ export const getRoomBookings = (term = null, page = 1, perPage = 10, order = 'st
 
     filter.push('status==Paid||Reserved||RequestedRefund||Refunded');
 
-    if (term) {
-        const escapedTerm = escapeFilterValue(term);
-        filter.push(`owner_name=@${escapedTerm},room_name=@${escapedTerm}`);
-    }
-
     if (filter.length > 0) {
         params['filter[]'] = filter;
     }
@@ -91,30 +102,26 @@ export const getRoomBookings = (term = null, page = 1, perPage = 10, order = 'st
         createAction(RECEIVE_ROOM_BOOKINGS),
         `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/locations/bookable-rooms/all/reservations`,
         authErrorHandler,
-        { order, orderDir, term }
+        { order, orderDir, term, filters }
     )(params)(dispatch).then(() => {
         dispatch(stopLoading());
     }
     );
 };
 
-export const exportRoomBookings = (term = null, order = 'start_datetime', orderDir = 1) => async (dispatch, getState) => {
+export const exportRoomBookings = (term = null, order = 'start_datetime', orderDir = 1, filters = {}) => async (dispatch, getState) => {
 
     const { currentSummitState } = getState();
     const accessToken = await getAccessTokenSafely();
     const { currentSummit } = currentSummitState;
     const filename = currentSummit.name + '-Room-Bookings.csv';
-    const filter = [];
     const params = {
         access_token: accessToken
     };
 
-    filter.push('status==Paid||Reserved||RequestedRefund||Refunded');
+    const filter = parseFilters(filters, term);
 
-    if (term) {
-        const escapedTerm = escapeFilterValue(term);
-        filter.push(`owner_name=@${escapedTerm},room_name=@${escapedTerm}`);
-    }
+    filter.push('status==Paid||Reserved||RequestedRefund||Refunded');
 
     if (filter.length > 0) {
         params['filter[]'] = filter;

src/components/forms/room-form.js

@@ -81,7 +81,6 @@ class RoomForm extends React.Component {
     }
 
     handleClearHours() {
-        debugger;
         let entity = {...this.state.entity};
         const { locationHours } = this.props;
         entity['opening_hour'] = locationHours.opening_hour || null;

src/components/inputs/email-filter/index.js

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import T from 'i18n-react/dist/i18n-react';
+import Select from 'react-select'
+import {Input} from "openstack-uicore-foundation/lib/components";
+import styles from './index.module.less';
+const Index = ({ onChange, id, operatorInitialValue, filterInitialValue }) => {
+
+    const operatorOptions = [
+        { label: T.translate("email_filter.operator_contains"), value: 'owner_email=@' },
+        { label: T.translate("email_filter.operator_not_contains"), value: 'not_owner_email=@' },
+        { label:T.translate("email_filter.operator_equal"), value: 'owner_email==' },
+    ];
+
+    const [operatorValue, setOperatorValue] = useState(operatorInitialValue ? operatorOptions.find(o => o.value === operatorInitialValue) : null);
+    const [filterValue, setFilterValue] = useState(filterInitialValue? filterInitialValue : '');
+
+    const onChangeOperator = (newOperatorValue) => {
+        setOperatorValue(newOperatorValue);
+        if(!newOperatorValue) setFilterValue('');
+
+        let ev = {
+            target: {
+                id: id,
+                value: filterValue,
+                type: 'email_filter',
+                operator: newOperatorValue ? newOperatorValue.value: null,
+            }
+        };
+        onChange(ev);
+    }
+
+    const onChangeValue= (ev) => {
+        let {value} = ev.target;
+        setFilterValue(value);
+        let e = {
+            target: {
+                id: id,
+                value: value,
+                type: 'email_filter',
+                operator: operatorValue ? operatorValue?.value: null,
+            }
+        };
+        onChange(e);
+    }
+
+    return (
+        <div className={`${styles.filter_container} row`} id={id}>
+            <div className="col-md-5">
+                <Select
+                    id="email_filter_operator"
+                    value={operatorValue}
+                    placeholder={T.translate("email_filter.placeholders.operator")}
+                    options={operatorOptions}
+                    onChange={onChangeOperator}
+                    isClearable={true}
+                />
+            </div>
+            <div className="col-md-7">
+                <Input
+                    id='email_filter_value'
+                    value={filterValue}
+                    placeholder={T.translate("email_filter.placeholders.value")}
+                    onChange={onChangeValue}
+                />
+            </div>
+        </div>
+    );
+}
+
+export default Index;

src/components/inputs/email-filter/index.module.less

@@ -0,0 +1,4 @@
+.filter_container{
+  display: flex;
+  align-items: baseline;
+}

src/components/inputs/media-upload-type-input.js

@@ -31,7 +31,6 @@ const MediaUploadTypeInput = ({ summitId, id, value, onChange, ...rest }) => {
     }
 
     const getTemplates = (input, callback) => {
-        debugger;
         // we need to map into value/label because of a bug in react-select 2
         // https://github.com/JedWatson/react-select/issues/2998
 

src/i18n/en.json

@@ -1306,6 +1306,7 @@
     "refunded": "Refunded",
     "delete_booking_warning": "Are you sure you want to delete booking for ",
     "add_room_booking": "Add Offline Room Booking",
+    "apply_filters": "Apply Filters",
     "placeholders": {
       "search_bookings": "Search bookings."
     }
@@ -2690,5 +2691,14 @@
     "value": "Value",
     "reg_feed_metadata_saved": "Registration Feed Metadata saved successfully.",
     "reg_feed_metadata_created": "Registration Feed Metadata created successfully."
+  },
+  "email_filter": {
+    "operator_contains": "Contains",
+    "operator_not_contains": "Not Contains",
+    "operator_equal": "Equal",
+    "placeholders": {
+      "value": "Search by email address",
+      "operator": "Select Operator"
+    }
   }
 }