VAR-163 | Manage reservation filter buttons

CHANGELOG.md

@@ -7,6 +7,7 @@
   - Replace failure message and add a return button for reservation payment.
   - Fix manage reservation page only display `can_approve` reservation, now display *all* reservations. Add strict rules for staff to be able to edit/cancel specific reservation.
   - Fix missing reservation metadata fields data in manage reservation view. Trim empty field row.
+  - Add `show_only` filter section to filter reservation list. Fix some minor styling issues as well as typos.
 
   **HOTFIX**
   - Fix resource information headlines and icon.
@@ -16,8 +17,9 @@
   - [#968](https://github.com/City-of-Helsinki/varaamo/pull/968) Support payments for Varaamo.
   - [#999](https://github.com/City-of-Helsinki/varaamo/pull/968) Add reusable FullCalendar component. Used in resource page.
   - [#1002](https://github.com/City-of-Helsinki/varaamo/pull/1002) Replace failure message and add a return button.
-  - [#1004](https://github.com/City-of-Helsinki/varaamo/pull/1004) Staff cannot see normal reservations
-  - [#1005](https://github.com/City-of-Helsinki/varaamo/pull/1005) Reservation information modal is missing metadata fields
+  - [#1004](https://github.com/City-of-Helsinki/varaamo/pull/1004) Staff cannot see normal reservations.
+  - [#1005](https://github.com/City-of-Helsinki/varaamo/pull/1005) Reservation information modal is missing metadata fields.
+  - [#1006](https://github.com/City-of-Helsinki/varaamo/pull/1006) Manage reservation filter buttons.
 
 # 0.4.2
   **HOTFIX**
@@ -66,12 +68,12 @@
 
     - Add new selection field to sort filtered resources. Currently support to search by name, type, premise, people.
     - Temporarily only show warning messages in 3 languages for IE11 user.
-    - Ability to favourite resources straight on search view instead going to resource detail page.
+    - Ability to favorite resources straight on search view instead going to resource detail page.
 
   **CHANGELOG**
 
   - [#895](https://github.com/City-of-Helsinki/varaamo/pull/895) Add sort to sort filtered resources.
-  - [#904](https://github.com/City-of-Helsinki/varaamo/pull/904) Favourite Resource on search view.
+  - [#904](https://github.com/City-of-Helsinki/varaamo/pull/904) Favorite Resource on search view.
   - [#909](https://github.com/City-of-Helsinki/varaamo/pull/909) Show warning message for IE11 users.
 
 # 0.1.1

app/i18n/messages/en.json

@@ -345,6 +345,11 @@
   "ManageReservationsFilters.startDatePlaceholder": "Start date",
   "ManageReservationsFilters.endDatePlaceholder": "End date",
   "ManageReservationsFilters.resetButton": "Reset filters",
+
+  "ManageReservationsFilters.showOnly.title": "Show only",
+  "ManageReservationsFilters.showOnly.favoriteButtonLabel": "Favorite",
+  "ManageReservationsFilters.showOnly.canModifyButtonLabel": "Can modify",
+
   "Reservation.stateLabelCancelled": "Cancelled",
   "Reservation.stateLabelConfirmed": "Approved",
   "Reservation.stateLabelDenied": "Denied",
@@ -353,4 +358,4 @@
   "ResourceReservationCalendar.selectedDateLabel": "Selected time:",
   "ResourceReservationCalendar.selectedDateValue": "{date} at {start} - at {end} ({duration})",
   "ResourceReservationCalendar.selectedDateValueWithPrice": "{date} at {start} - at {end} ({duration}) for {price}€"
-}
+}

app/i18n/messages/fi.json

@@ -354,6 +354,11 @@
   "ManageReservationsFilters.startDatePlaceholder": "Aloituspäivämäärä",
   "ManageReservationsFilters.endDatePlaceholder": "Lopetuspäivämäärä",
   "ManageReservationsFilters.resetButton": "Tyhjennä suodattimet",
+
+  "ManageReservationsFilters.showOnly.title": "Näytä vain",
+  "ManageReservationsFilters.showOnly.favoriteButtonLabel": "Suosikit",
+  "ManageReservationsFilters.showOnly.canModifyButtonLabel": "Toimipisteeni",
+
   "Reservation.stateLabelCancelled": "Peruttu",
   "Reservation.stateLabelConfirmed": "Hyväksytty",
   "Reservation.stateLabelDenied": "Evätty",
@@ -362,4 +367,4 @@
   "ResourceReservationCalendar.selectedDateLabel": "Valittu aika:",
   "ResourceReservationCalendar.selectedDateValue": "{date} klo {start} - klo {end} ({duration})",
   "ResourceReservationCalendar.selectedDateValueWithPrice": "{date} klo {start} - klo {end} ({duration}) yht {price}€"
-}
+}

app/i18n/messages/sv.json

@@ -346,6 +346,11 @@
   "ManageReservationsFilters.startDatePlaceholder": "Startdatum",
   "ManageReservationsFilters.endDatePlaceholder": "Slutdatum",
   "ManageReservationsFilters.resetButton": "Återställ sökfilter",
+
+  "ManageReservationsFilters.showOnly.title": "Visa bara",
+  "ManageReservationsFilters.showOnly.favoriteButtonLabel": "Mina favoriter",
+  "ManageReservationsFilters.showOnly.canModifyButtonLabel": "Mina utrymmen",
+
   "Reservation.stateLabelCancelled": "Avbokad",
   "Reservation.stateLabelConfirmed": "Godkänd",
   "Reservation.stateLabelDenied": "Nekad",
@@ -354,4 +359,4 @@
   "ResourceReservationCalendar.selectedDateLabel": "Utvald tidpunkt:",
   "ResourceReservationCalendar.selectedDateValue": "{date} kl. {start} - kl. {end} ({duration})",
   "ResourceReservationCalendar.selectedDateValueWithPrice": "{date} kl. {start} - kl. {end} ({duration}) for {price}€"
-}
+}

app/state/selectors/dataSelectors.js

@@ -1,12 +1,17 @@
 import { createSelector } from 'reselect';
 
 import { createTranslatedSelector } from './translationSelectors';
+import { currentUserSelector } from './authSelectors';
 
 const purposesSelector = createTranslatedSelector(state => state.data.purposes);
 const reservationsSelector = state => state.data.reservations;
 const resourcesSelector = createTranslatedSelector(state => state.data.resources);
 const unitsSelector = createTranslatedSelector(state => state.data.units);
 
+const userFavouriteResourcesSelector = createSelector(
+  currentUserSelector, userData => userData && userData.favoriteResources
+);
+
 function createResourceSelector(idSelector) {
   return createSelector(
     resourcesSelector,
@@ -21,4 +26,5 @@ export {
   reservationsSelector,
   resourcesSelector,
   unitsSelector,
+  userFavouriteResourcesSelector
 };

src/common/form/fields/__tests__/__snapshots__/DateField.test.js.snap

@@ -136,6 +136,9 @@ exports[`DateField renders correctly 1`] = `
               "ManageReservationsFilters.resetButton": "ManageReservationsFilters.resetButton",
               "ManageReservationsFilters.searchLabel": "ManageReservationsFilters.searchLabel",
               "ManageReservationsFilters.searchPlaceholder": "ManageReservationsFilters.searchPlaceholder",
+              "ManageReservationsFilters.showOnly.canModifyButtonLabel": "ManageReservationsFilters.showOnly.canModifyButtonLabel",
+              "ManageReservationsFilters.showOnly.favoriteButtonLabel": "ManageReservationsFilters.showOnly.favoriteButtonLabel",
+              "ManageReservationsFilters.showOnly.title": "ManageReservationsFilters.showOnly.title",
               "ManageReservationsFilters.startDateLabel": "ManageReservationsFilters.startDateLabel",
               "ManageReservationsFilters.startDatePlaceholder": "ManageReservationsFilters.startDatePlaceholder",
               "ManageReservationsFilters.statusLabel": "ManageReservationsFilters.statusLabel",
@@ -546,6 +549,9 @@ exports[`DateField renders correctly 1`] = `
                     "ManageReservationsFilters.resetButton": "ManageReservationsFilters.resetButton",
                     "ManageReservationsFilters.searchLabel": "ManageReservationsFilters.searchLabel",
                     "ManageReservationsFilters.searchPlaceholder": "ManageReservationsFilters.searchPlaceholder",
+                    "ManageReservationsFilters.showOnly.canModifyButtonLabel": "ManageReservationsFilters.showOnly.canModifyButtonLabel",
+                    "ManageReservationsFilters.showOnly.favoriteButtonLabel": "ManageReservationsFilters.showOnly.favoriteButtonLabel",
+                    "ManageReservationsFilters.showOnly.title": "ManageReservationsFilters.showOnly.title",
                     "ManageReservationsFilters.startDateLabel": "ManageReservationsFilters.startDateLabel",
                     "ManageReservationsFilters.startDatePlaceholder": "ManageReservationsFilters.startDatePlaceholder",
                     "ManageReservationsFilters.statusLabel": "ManageReservationsFilters.statusLabel",

src/common/form/fields/_dateField.scss

@@ -32,7 +32,7 @@
   }
 
   &__icon {
-    width: 22px;
+    width: 21px;
   }
 
   &__triangle {

src/domain/reservation/constants.js

@@ -17,3 +17,8 @@ export const RESERVATION_METADATA = [
   'reserver_name',
   'reserver_phone_number'
 ];
+
+export const RESERVATION_SHOWONLY_FILTERS = {
+  FAVORITE: 'favorite',
+  CAN_MODIFY: 'can_modify'
+};

src/domain/reservation/manage/filters/ManageReservationsFilters.js

@@ -21,20 +21,22 @@ import iconTimes from '../../../search/filters/images/times.svg';
 import * as dataUtils from '../../../../common/data/utils';
 import constants from '../../../../../app/constants/AppConstants';
 import { RESERVATION_STATE } from '../../../../constants/ReservationState';
+import { RESERVATION_SHOWONLY_FILTERS } from '../../constants';
 
 class ManageReservationsFilters extends React.Component {
   static propTypes = {
     t: PropTypes.func,
     filters: PropTypes.object,
     units: PropTypes.array,
-    onChange: PropTypes.func.isRequired,
+    onSearchChange: PropTypes.func.isRequired,
+    onListFilterChange: PropTypes.func.isRequired,
     intl: intlShape,
   };
 
   onFilterChange = (filterName, filterValue) => {
     const {
       filters,
-      onChange,
+      onSearchChange,
     } = this.props;
 
     const newFilters = {
@@ -45,12 +47,12 @@ class ManageReservationsFilters extends React.Component {
       newFilters[filterName] = filterValue;
     }
 
-    onChange(omit(newFilters, 'page'));
+    onSearchChange(omit(newFilters, 'page'));
   };
 
   onReset = () => {
-    const { onChange } = this.props;
-    onChange({});
+    const { onSearchChange } = this.props;
+    onSearchChange({});
   };
 
   hasFilters = () => {
@@ -70,12 +72,30 @@ class ManageReservationsFilters extends React.Component {
     ];
   };
 
+  getShowOnlyOptions = () => {
+    const { t } = this.props;
+
+    return [
+      {
+        value:
+        RESERVATION_SHOWONLY_FILTERS.FAVORITE,
+        label: t('ManageReservationsFilters.showOnly.favoriteButtonLabel')
+      },
+      {
+        value:
+        RESERVATION_SHOWONLY_FILTERS.CAN_MODIFY,
+        label: t('ManageReservationsFilters.showOnly.canModifyButtonLabel')
+      },
+    ];
+  };
+
   render() {
     const {
       t,
       filters,
       units,
       intl,
+      onListFilterChange
     } = this.props;
 
     const state = get(filters, 'state', null);
@@ -124,7 +144,7 @@ class ManageReservationsFilters extends React.Component {
                 </Col>
               </Row>
               <Row>
-                <Col md={12}>
+                <Col md={3}>
                   <SelectField
                     id="unitField"
                     label={t('ManageReservationsFilters.unitLabel')}
@@ -136,6 +156,15 @@ class ManageReservationsFilters extends React.Component {
                     value={get(filters, 'unit', null)}
                   />
                 </Col>
+                <Col md={3}>
+                  <ButtonGroupField
+                    id="showOnlyField"
+                    label={t('ManageReservationsFilters.showOnly.title')}
+                    onChange={value => onListFilterChange(value)}
+                    options={this.getShowOnlyOptions()}
+                    type="checkbox"
+                  />
+                </Col>
               </Row>
             </Col>
             <Col md={3}>

src/domain/reservation/manage/filters/__tests__/__snapshots__/ManageReservationsFilters.test.js.snap

@@ -92,7 +92,7 @@ exports[`ManageReservationsFilters renders correctly 1`] = `
           <Col
             bsClass="col"
             componentClass="div"
-            md={12}
+            md={3}
           >
             <InjectT(SelectField)
               id="unitField"
@@ -109,6 +109,30 @@ exports[`ManageReservationsFilters renders correctly 1`] = `
               value={null}
             />
           </Col>
+          <Col
+            bsClass="col"
+            componentClass="div"
+            md={3}
+          >
+            <ButtonGroupField
+              id="showOnlyField"
+              label="ManageReservationsFilters.showOnly.title"
+              onChange={[Function]}
+              options={
+                Array [
+                  Object {
+                    "label": "ManageReservationsFilters.showOnly.favoriteButtonLabel",
+                    "value": "favorite",
+                  },
+                  Object {
+                    "label": "ManageReservationsFilters.showOnly.canModifyButtonLabel",
+                    "value": "can_modify",
+                  },
+                ]
+              }
+              type="checkbox"
+            />
+          </Col>
         </Row>
       </Col>
       <Col