diff --git a/server/auth/index.js b/server/auth/auth.js
similarity index 100%
rename from server/auth/index.js
rename to server/auth/auth.js
diff --git a/server/main.js b/server/main.js
index 3dcf9fef9..a2c3864ca 100644
--- a/server/main.js
+++ b/server/main.js
@@ -8,7 +8,7 @@ import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
-import auth from './auth';
+import auth from './auth/auth';
import webpackConfig from '../config/webpack.development';
import serverConfig from './config';
import render from './render';
diff --git a/src/common/_common.scss b/src/common/_common.scss
new file mode 100644
index 000000000..9caed0819
--- /dev/null
+++ b/src/common/_common.scss
@@ -0,0 +1,3 @@
+@import './pagination/pagination';
+@import './form/form';
+@import './calendar/timePickerCalendar';
diff --git a/src/common/api/__test__/client.test.js b/src/common/api/__test__/client.test.js
new file mode 100644
index 000000000..dae39bd6b
--- /dev/null
+++ b/src/common/api/__test__/client.test.js
@@ -0,0 +1,139 @@
+import axios from 'axios';
+
+import { ApiClient } from '../client';
+import constants from '../../../../app/constants/AppConstants';
+
+jest.mock('axios');
+let client;
+
+const mockRequest = () => {
+ client.request = jest.fn();
+};
+
+const baseUrl = 'http://www.foo.com';
+const data = { foo: 'bar' };
+const config = { conf1: 'foo', conf2: 'bar' };
+
+describe('domain/common/api/client.js', () => {
+ beforeEach(() => {
+ client = new ApiClient(baseUrl);
+ });
+
+ test('getUrl', () => {
+ const url = client.getUrl('endpoint');
+ expect(url).toBe(`${baseUrl}/endpoint/`);
+ });
+
+ describe('getHeaders', () => {
+ test('does have required api headers', () => {
+ const headers = client.getHeaders();
+ expect(headers).toMatchObject(constants.REQUIRED_API_HEADERS);
+ });
+
+ // TODO: Check that headers include auth token when logged in.
+ });
+
+ test('request', () => {
+ const headers = { testHeader: 'foo' };
+ axios.request.mockResolvedValue({ data: [] });
+
+ client.request({
+ endpoint: 'endpoint',
+ method: 'GET',
+ data,
+ headers,
+ });
+
+ client.request({
+ endpoint: 'endpoint',
+ method: 'POST',
+ data,
+ headers,
+ });
+
+ expect(axios.request.mock.calls.length).toBe(2);
+
+ expect(axios.request.mock.calls[0][0].method).toBe('GET');
+ expect(axios.request.mock.calls[0][0].url).toBe(`${baseUrl}/endpoint/`);
+ expect(axios.request.mock.calls[0][0].params).toMatchObject(data);
+ expect(axios.request.mock.calls[0][0].headers).toMatchObject(headers);
+
+ expect(axios.request.mock.calls[1][0].method).toBe('POST');
+ expect(axios.request.mock.calls[1][0].url).toBe(`${baseUrl}/endpoint/`);
+ expect(axios.request.mock.calls[1][0].data).toMatchObject(data);
+ expect(axios.request.mock.calls[1][0].headers).toMatchObject(headers);
+ });
+
+ test('get', () => {
+ mockRequest();
+ client.get('endpoint', data, config);
+
+ expect(client.request.mock.calls.length).toBe(1);
+ expect(client.request.mock.calls[0][0].method).toBe('GET');
+ expect(client.request.mock.calls[0][0].endpoint).toBe('endpoint');
+ expect(client.request.mock.calls[0][0].data).toMatchObject(data);
+ expect(client.request.mock.calls[0][0]).toMatchObject(config);
+ });
+
+ test('post', () => {
+ mockRequest();
+ client.post('endpoint', data, config);
+
+ expect(client.request.mock.calls.length).toBe(1);
+ expect(client.request.mock.calls[0][0].method).toBe('POST');
+ expect(client.request.mock.calls[0][0].endpoint).toBe('endpoint');
+ expect(client.request.mock.calls[0][0].data).toMatchObject(data);
+ expect(client.request.mock.calls[0][0]).toMatchObject(config);
+ });
+
+ test('delete', () => {
+ mockRequest();
+ client.delete('endpoint', data, config);
+
+ expect(client.request.mock.calls.length).toBe(1);
+ expect(client.request.mock.calls[0][0].method).toBe('DELETE');
+ expect(client.request.mock.calls[0][0].endpoint).toBe('endpoint');
+ expect(client.request.mock.calls[0][0].data).toMatchObject(data);
+ expect(client.request.mock.calls[0][0]).toMatchObject(config);
+ });
+
+ test('put', () => {
+ mockRequest();
+ client.put('endpoint', data, config);
+
+ expect(client.request.mock.calls.length).toBe(1);
+ expect(client.request.mock.calls[0][0].method).toBe('PUT');
+ expect(client.request.mock.calls[0][0].endpoint).toBe('endpoint');
+ expect(client.request.mock.calls[0][0].data).toMatchObject(data);
+ expect(client.request.mock.calls[0][0]).toMatchObject(config);
+ });
+
+ test('patch', () => {
+ mockRequest();
+ client.patch('endpoint', data, config);
+
+ expect(client.request.mock.calls.length).toBe(1);
+ expect(client.request.mock.calls[0][0].method).toBe('PATCH');
+ expect(client.request.mock.calls[0][0].endpoint).toBe('endpoint');
+ expect(client.request.mock.calls[0][0].data).toMatchObject(data);
+ expect(client.request.mock.calls[0][0]).toMatchObject(config);
+ });
+
+ test('body data will be trimmed all empty values', () => {
+ mockRequest();
+
+ const dataWithEmptyField = {
+ foo: 'bar',
+ testi: '',
+ bar: ''
+ };
+
+ const expectTrimmedData = {
+ foo: 'bar'
+ };
+
+ client.post('endpoint', dataWithEmptyField, config);
+
+ expect(client.request.mock.calls[0][0].data).toMatchObject(expectTrimmedData);
+ });
+});
diff --git a/src/common/api/client.js b/src/common/api/client.js
new file mode 100644
index 000000000..bcee9d473
--- /dev/null
+++ b/src/common/api/client.js
@@ -0,0 +1,157 @@
+import axios from 'axios';
+import get from 'lodash/get';
+
+import constants from '../../../app/constants/AppConstants';
+import store from '../../store';
+import { parseData } from '../data/utils';
+
+let authToken;
+
+// Response interceptor to be able to handle errors.
+axios.interceptors.response.use((response) => {
+ return response;
+}, (error) => {
+ if (error.response) {
+ // The request was made and the server responded with a status code that falls out of the range of 2xx.
+ // TODO: Find all the forms Respa may send us errors in.
+ // TODO: Create a way to translate these messages.
+ const nonFieldError = get(error, 'response.data.non_field_errors', '');
+ const permissionError = get(error, 'data.detail', '');
+ throw new Error(`${nonFieldError} ${permissionError}`);
+ } else if (error.request) {
+ // The request was made but no response was received.
+ // `error.request` is an instance of XMLHttpRequest in the browser.
+ console.error(error.request);
+ } else {
+ // Something happened in setting up the request that triggered an Error.
+ console.error(error.message);
+ }
+ return Promise.reject(error);
+});
+
+const getToken = () => {
+ const state = store.getState();
+ return get(state, 'auth.token');
+};
+
+store.subscribe(() => {
+ authToken = getToken();
+});
+
+export class ApiClient {
+ baseUrl;
+
+ constructor(baseUrl) {
+ this.baseUrl = baseUrl;
+ authToken = getToken();
+ }
+
+ getUrl = (endpoint) => {
+ // URLs in Django must have a trailing slash
+ const endsWithTrailingSlash = endpoint.substring(endpoint.length - 1) === '/';
+ return `${this.baseUrl}/${endpoint}${endsWithTrailingSlash ? '' : '/'}`;
+ };
+
+ getHeaders = () => ({
+ ...constants.REQUIRED_API_HEADERS,
+ ...(authToken
+ ? { Authorization: `JWT ${authToken}` }
+ : {}),
+ });
+
+ request = async ({
+ method,
+ endpoint,
+ data = {},
+ headers = {},
+ }) => {
+ const dataOrParams = ['GET', 'DELETE'].includes(method.toUpperCase()) ? 'params' : 'data';
+
+ return axios
+ .request({
+ method,
+ url: this.getUrl(endpoint),
+ headers: {
+ ...this.getHeaders(),
+ ...headers,
+ },
+ [dataOrParams]: data,
+ })
+ .then(response => ({
+ data: get(response, 'data'),
+ error: null,
+ }));
+ };
+
+ /**
+ * Make a GET request into the API.
+ * @param endpoint
+ * @param data
+ * @param config
+ * @returns {Promise}
+ */
+ get = (endpoint, data = {}, config = {}) => this.request({
+ method: 'GET',
+ endpoint,
+ data: parseData(data),
+ ...config,
+ });
+
+ /**
+ * Make a POST request into the API.
+ * @param endpoint
+ * @param data
+ * @param config
+ * @returns {Promise}
+ */
+ post = (endpoint, data = {}, config = {}) => this.request({
+ method: 'POST',
+ endpoint,
+ data: parseData(data),
+ ...config,
+ });
+
+ /**
+ * Make a DELETE request into the API.
+ * @param endpoint
+ * @param data
+ * @param config
+ * @returns {Promise}
+ */
+ delete = (endpoint, data = {}, config = {}) => this.request({
+ method: 'DELETE',
+ endpoint,
+ data: parseData(data),
+ ...config,
+ });
+
+ /**
+ * Make a PUT request into the API.
+ * @param endpoint
+ * @param data
+ * @param config
+ * @returns {Promise}
+ */
+ put = (endpoint, data = {}, config = {}) => this.request({
+ method: 'PUT',
+ endpoint,
+ data: parseData(data),
+ ...config,
+ });
+
+ /**
+ * Make a PATCH request into the API.
+ * @param endpoint
+ * @param data
+ * @param config
+ * @returns {Promise}
+ */
+ patch = (endpoint, data = {}, config = {}) => this.request({
+ method: 'PATCH',
+ endpoint,
+ data: parseData(data),
+ ...config,
+ });
+}
+
+export default new ApiClient(constants.API_URL);
diff --git a/src/common/calendar/TimePickerCalendar.js b/src/common/calendar/TimePickerCalendar.js
new file mode 100644
index 000000000..fb04a2603
--- /dev/null
+++ b/src/common/calendar/TimePickerCalendar.js
@@ -0,0 +1,385 @@
+import React, { Component } from 'react';
+import FullCalendar from '@fullcalendar/react';
+import PropTypes from 'prop-types';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import momentTimezonePlugin from '@fullcalendar/moment-timezone';
+import interactionPlugin from '@fullcalendar/interaction';
+import enLocale from '@fullcalendar/core/locales/en-gb';
+import svLocale from '@fullcalendar/core/locales/sv';
+import fiLocale from '@fullcalendar/core/locales/fi';
+import moment from 'moment';
+import get from 'lodash/get';
+import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+
+import * as resourceUtils from '../../domain/resource/utils';
+import constants from '../../../app/constants/AppConstants';
+import injectT from '../../../app/i18n/injectT';
+import * as calendarUtils from './utils';
+import { createNotification } from '../notification/utils';
+import { NOTIFICATION_TYPE } from '../notification/constants';
+
+const NEW_RESERVATION = 'NEW_RESERVATION';
+
+moment.tz.setDefault(SETTINGS.TIME_ZONE);
+// Re-apply moment-timezone default timezone, cause FullCalendar import have override the import
+
+class TimePickerCalendar extends Component {
+ calendarRef = React.createRef();
+
+ static propTypes = {
+ date: PropTypes.string,
+ isStaff: PropTypes.bool.isRequired,
+ resource: PropTypes.object.isRequired,
+ onDateChange: PropTypes.func.isRequired,
+ t: PropTypes.func.isRequired,
+ onTimeChange: PropTypes.func.isRequired,
+ locale: PropTypes.string.isRequired,
+ edittingReservation: PropTypes.object
+ };
+
+ state = {
+ viewType: 'timeGridWeek',
+ selected: calendarUtils.getDefaultSelectedTimeRange(this.props.edittingReservation),
+ header: {
+ left: 'prev,next today',
+ center: 'title',
+ right: 'timeGridDay,timeGridWeek'
+ }
+ };
+
+ componentDidUpdate(prevProps, prevState) {
+ const { date } = this.props;
+ const { viewType } = this.state;
+
+ const calendarApi = this.calendarRef.current.getApi();
+
+ if (date !== prevProps.date) {
+ calendarApi.gotoDate(date);
+ }
+ if (viewType !== prevState.viewType) {
+ calendarApi.changeView(viewType);
+ }
+ }
+
+ isSelectionValid = (selection) => {
+ const { resource } = this.props;
+
+ const events = this.getReservedEvents();
+ return resourceUtils.isTimeRangeReservable(resource, selection.start, selection.end, events);
+ };
+
+ onChange = (selected) => {
+ this.setState({ selected });
+
+ // Invoke select handler callback from props
+ this.props.onTimeChange(selected);
+ }
+
+ onCancel = () => {
+ // Revert to default timerange if cancel
+ const defaultSelectedTimeRange = calendarUtils.getDefaultSelectedTimeRange(this.props.edittingReservation);
+ this.onChange(defaultSelectedTimeRange);
+ }
+
+ onEventRender = (info) => {
+ // add cancel button for new selected event
+ if (info.event.id === NEW_RESERVATION) {
+ const cancelBtn = document.createElement('span');
+ cancelBtn.classList.add('app-TimePickerCalendar__cancelEvent');
+ cancelBtn.addEventListener('click', () => this.onCancel(), { once: true });
+ info.el.append(cancelBtn);
+ }
+ }
+
+ onSelect = (selectionInfo) => {
+ const { t } = this.props;
+
+ const calendarApi = this.calendarRef.current.getApi();
+ calendarApi.unselect();
+ // Clear FullCalendar select tooltip
+
+ const selectable = this.getSelectableTimeRange(selectionInfo);
+ // Make sure selected time alway furfill period check.
+
+ const isValid = this.isSelectionValid(selectable);
+
+ if (isValid) {
+ this.onChange(selectable);
+ } else {
+ // Display error notifications if selection is not valid
+ createNotification(NOTIFICATION_TYPE.ERROR, t('Notifications.selectTimeToReserve.warning'));
+ }
+ };
+
+ // Check if event resize allowed
+ onEventResize = (selectionInfo) => {
+ const { event } = selectionInfo;
+ const selectable = this.getSelectableTimeRange(event, selectionInfo);
+
+ this.onChange(selectable);
+ }
+
+ onDatesRender = (info) => {
+ const { viewType, header } = this.state;
+ let view = info.view.type;
+ let headerConfig = header;
+
+ if (window.innerWidth < 768) {
+ // mobile view config
+ view = 'timeGridDay';
+ headerConfig = {
+ left: 'today,prev',
+ center: 'title',
+ right: 'next,timeGridDay,timeGridWeek'
+ };
+ }
+
+ if (viewType !== view) {
+ this.setState({ viewType: view, header: headerConfig });
+ }
+ }
+
+ /**
+ * To ensure the selected time range will always between min and max period
+ * Return a selectable timerange if input timerange is somehow not between min and max period
+ * Display info text to user about those changes.
+ *
+ * @return {Object} Normalized selected time range
+ */
+ getSelectableTimeRange = (selected, eventCallback) => {
+ const { resource, isStaff, t } = this.props;
+
+ let selectable = {
+ start: selected.start,
+ end: selected.end
+ };
+
+ const isUnderMinPeriod = calendarUtils.isTimeRangeUnderMinPeriod(
+ resource, selectable.start, selectable.end
+ );
+
+ const isOverMaxPeriod = calendarUtils.isTimeRangeOverMaxPeriod(
+ resource, selectable.start, selectable.end, isStaff
+ );
+
+ if (isUnderMinPeriod) {
+ const minPeriod = get(resource, 'min_period', null);
+ const minPeriodDuration = moment.duration(minPeriod).asHours();
+
+ if (eventCallback) {
+ eventCallback.revert();
+ createNotification(
+ NOTIFICATION_TYPE.INFO, t('TimePickerCalendar.info.minPeriodText', { duration: minPeriodDuration })
+ );
+ }
+
+ selectable = calendarUtils.getMinPeriodTimeRange(resource, selected.start, selected.end);
+ // Make sure selected time will always bigger than min period
+ }
+
+ if (isOverMaxPeriod) {
+ const maxPeriod = get(resource, 'max_period', null);
+ const maxPeriodDuration = moment.duration(maxPeriod).asHours();
+
+ if (eventCallback) {
+ eventCallback.revert();
+ }
+
+ createNotification(
+ NOTIFICATION_TYPE.INFO, t('TimePickerCalendar.info.maxPeriodText', { duration: maxPeriodDuration })
+ );
+
+ selectable = calendarUtils.getMaxPeriodTimeRange(
+ resource, selectable.start, selectable.end, isStaff
+ );
+ // Make sure selected time will always smaller than max period
+ }
+
+ return selectable;
+ }
+
+ getDurationText = () => {
+ const { selected } = this.state;
+ const start = moment(selected.start);
+ const end = moment(selected.end);
+ const duration = moment.duration(end.diff(start));
+ const days = duration.days();
+ const hours = duration.hours();
+ const minutes = duration.minutes();
+
+ let text = '';
+ if (days) {
+ text = `${days}d`;
+ }
+
+ if (hours) {
+ text += `${hours}h`;
+ }
+
+ if (minutes) {
+ text += `${minutes}min`;
+ }
+
+ return text;
+ };
+
+ getSelectedDateText = () => {
+ const { t, resource } = this.props;
+ const { selected } = this.state;
+
+ if (selected) {
+ const start = moment(selected.start);
+ const end = moment(selected.end);
+ const price = resourceUtils.getReservationPrice(selected.start, selected.end, resource);
+
+ const tVariables = {
+ date: start.format('dd D.M.Y'),
+ start: start.format('HH:mm'),
+ end: end.format('HH:mm'),
+ duration: this.getDurationText(),
+ price,
+ };
+
+ if (price) {
+ return t('TimePickerCalendar.selectedDateValueWithPrice', tVariables);
+ }
+
+ return t('TimePickerCalendar.selectedDateValue', tVariables);
+ }
+
+ return '';
+ };
+
+ getReservedEvents = () => {
+ const { resource, date } = this.props;
+
+ const getClassNames = (reservation) => {
+ const isOwn = get(reservation, 'is_own', false);
+ return classNames('app-TimePickerCalendar__event', {
+ 'app-TimePickerCalendar__event--reserved': !isOwn,
+ });
+ };
+ // Add the resources reservations as normal FullCalendar events.
+ const reservations = get(resource, 'reservations', []);
+ const events = isEmpty(reservations) ? [] : reservations.map(reservation => ({
+ classNames: [getClassNames(reservation)],
+ editable: false,
+ id: reservation.id,
+ start: moment(reservation.begin).toDate(),
+ end: moment(reservation.end).toDate(),
+ }));
+
+ // Check resources reservation rules and disable days if needed.
+ const now = moment();
+ const momentDate = moment(date)
+ .startOf('week');
+
+ for (let i = 0; i < 7; i++) {
+ if (
+ momentDate.isBefore(now, 'date')
+ || !resourceUtils.isDateReservable(resource, momentDate.format(constants.DATE_FORMAT))
+ ) {
+ events.push({
+ allDay: true,
+ classNames: [
+ 'app-TimePickerCalendar__backgroundEvent',
+ 'app-TimePickerCalendar__restrictedDate',
+ ],
+ id: momentDate.format(constants.DATE_FORMAT),
+ start: momentDate.toDate(),
+ end: momentDate.toDate(),
+ rendering: 'background',
+ });
+ }
+
+ momentDate.add(1, 'day');
+ }
+ return events;
+ }
+
+ getCalendarOptions = () => {
+ return {
+ timeZone: SETTINGS.TIME_ZONE,
+ height: 'auto',
+ editable: true,
+ eventConstraint: 'businessHours',
+ eventOverlap: false,
+ firstDay: 1,
+ locale: this.props.locale,
+ locales: [enLocale, svLocale, fiLocale],
+ nowIndicator: true,
+ plugins: [timeGridPlugin, momentTimezonePlugin, interactionPlugin],
+ selectable: true,
+ selectOverlap: false,
+ selectConstraint: 'businessHours',
+ selectMirror: true,
+ dragScroll: true,
+ slotLabelFormat: {
+ hour: 'numeric',
+ minute: '2-digit',
+ omitZeroMinute: false,
+ meridiem: 'short'
+ },
+ unselectAuto: false,
+ longPressDelay: '500',
+ // Almost invoke click event on mobile immediatelly without any delay
+ };
+ };
+
+ getEvents = () => {
+ const {
+ resource, isStaff
+ } = this.props;
+ const { selected } = this.state;
+
+ const events = this.getReservedEvents();
+
+ if (selected) {
+ events.push({
+ classNames: [
+ 'app-TimePickerCalendar__event',
+ 'app-TimePickerCalendar__newReservation',
+ ],
+ editable: true,
+ durationEditable: !calendarUtils.isTimeRangeOverMaxPeriod(
+ resource, selected.start, selected.end, isStaff
+ ),
+ id: NEW_RESERVATION,
+ ...selected,
+ });
+ }
+ return events;
+ };
+
+ render() {
+ const { resource, date } = this.props;
+ const { viewType, header } = this.state;
+
+ return (
+
+
+ );
+ }
+}
+
+export default injectT(TimePickerCalendar);
diff --git a/src/common/calendar/__tests__/TimePickerCalendar.test.js b/src/common/calendar/__tests__/TimePickerCalendar.test.js
new file mode 100644
index 000000000..77cade142
--- /dev/null
+++ b/src/common/calendar/__tests__/TimePickerCalendar.test.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import toJson from 'enzyme-to-json';
+
+import TimePickerCalendar from '../TimePickerCalendar';
+import resource from '../../data/fixtures/resource';
+import reservation from '../../data/fixtures/reservation';
+import { globalDateMock, shallowWithIntl } from '../../../../app/utils/testUtils';
+
+describe('TimePickerCalendar', () => {
+ globalDateMock();
+
+ const defaultProps = {
+ resource: resource.build(),
+ date: '2019-08-15',
+ isStaff: false,
+ onDateChange: jest.fn(),
+ onReserve: jest.fn(),
+ onTimeChange: jest.fn(),
+ };
+
+ const selected = {
+ start: '2019-09-05T10:30:00+03:00',
+ end: '2019-09-05T12:00:00+03:00'
+ };
+
+
+ const getWrapper = props => shallowWithIntl(
);
+
+ describe('FullCalendar', () => {
+ test('render normally', () => {
+ const wrapper = getWrapper();
+
+ expect(toJson(wrapper)).toMatchSnapshot();
+ });
+ });
+
+ describe('edittingReservation', () => {
+ const defaultSelected = {
+ begin: '2019-09-05T10:30:00+03:00',
+ end: '2019-09-05T12:00:00+03:00'
+ };
+
+ const edittingReservation = reservation.build(defaultSelected);
+
+ const wrapper = getWrapper({ edittingReservation });
+
+ test('will have selected state intitialize from edittingReservation props', () => {
+ expect(wrapper.state('selected')).toEqual(selected);
+ });
+
+ test('will populate new reservation event with timeslot selected from edittingReservation', () => {
+ const events = wrapper.instance().getEvents();
+ expect(events[0].classNames[1]).toContain('newReservation');
+ });
+
+ test('will render edittingReservation slot when cancel current selected slot', () => {
+ wrapper.setState({
+ selected: {
+ start: '2019-09-05T13:30:00+03:00',
+ end: '2019-09-05T14:00:00+03:00'
+ }
+ });
+
+ // select random time range
+ const instance = wrapper.instance();
+
+ // override calendar context with mock
+ instance.calendarRef = {
+ current: {
+ getApi: () => ({
+ unselect: jest.fn()
+ })
+ }
+ };
+
+ wrapper.update();
+
+ // Mock on clicking cancel button
+ instance.onCancel();
+
+ // Return data match default from reservation
+ expect(wrapper.state('selected')).toEqual(selected);
+ });
+ });
+});
diff --git a/src/common/calendar/__tests__/__snapshots__/TimePickerCalendar.test.js.snap b/src/common/calendar/__tests__/__snapshots__/TimePickerCalendar.test.js.snap
new file mode 100644
index 000000000..2f2416b3f
--- /dev/null
+++ b/src/common/calendar/__tests__/__snapshots__/TimePickerCalendar.test.js.snap
@@ -0,0 +1,273 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TimePickerCalendar FullCalendar render normally 1`] = `
+
+
+`;
diff --git a/src/common/calendar/__tests__/utils.test.js b/src/common/calendar/__tests__/utils.test.js
new file mode 100644
index 000000000..f59e641db
--- /dev/null
+++ b/src/common/calendar/__tests__/utils.test.js
@@ -0,0 +1,135 @@
+import resourceFixture from '../../data/fixtures/resource';
+import * as calendarUtils from '../utils';
+
+describe('TimePickerCalendar utils ', () => {
+ const resource = resourceFixture.build();
+
+ const selection = {
+ start: new Date('2019-08-16T00:00:00Z'),
+ end: new Date('2019-08-16T00:30:00Z'),
+ };
+
+ const MIN_PERIOD = '01:00:00';
+ const resourceWithMinPeriod = resourceFixture.build({ min_period: MIN_PERIOD });
+
+ const MAX_PERIOD = '04:00:00';
+ const resourceWithMaxPeriod = resourceFixture.build({ max_period: MAX_PERIOD });
+
+ const selectionLargerThanMinPeriod = { ...selection, end: new Date('2019-08-16T01:30:00Z') };
+ const selectionSmallerThanMaxPeriod = { ...selection, end: new Date('2019-08-16T03:30:00Z') };
+
+ const selectionMinPeriodExpect = { ...selection, end: new Date('2019-08-16T01:00:00Z') };
+ const selectionMaxPeriodExpect = { ...selection, end: new Date('2019-08-16T04:00:00Z') };
+
+ describe('getMinPeriodTimeRange', () => {
+ test('should return default selected if resource does not have min_period defined', () => {
+ const minPeriodTimeRange = calendarUtils.getMinPeriodTimeRange(resource, selection.start, selection.end);
+
+ expect(minPeriodTimeRange).toEqual(selection);
+ });
+
+ test('should return default end if end time argument already fulfill the min_period', () => {
+ const minPeriod = calendarUtils.getMinPeriodTimeRange(
+ resourceWithMinPeriod, selectionLargerThanMinPeriod.start, selectionLargerThanMinPeriod.end
+ );
+
+ expect(minPeriod).toEqual(selectionLargerThanMinPeriod);
+ });
+
+ test('should return new end time fulfill min_period if selected end time is smaller than that', () => {
+ const minPeriod = calendarUtils.getMinPeriodTimeRange(
+ resourceWithMinPeriod, selection.start, selection.end
+ );
+
+ expect(minPeriod).toEqual(selectionMinPeriodExpect);
+ });
+ });
+
+ describe('getMaxPeriodTimeRange', () => {
+ test('should return default selected if resource does not have max_period defined', () => {
+ const maxPeriodTimeRange = calendarUtils.getMaxPeriodTimeRange(resource, selection.start, selection.end);
+
+ expect(maxPeriodTimeRange).toEqual(selection);
+ });
+
+ test('should return default selected if end time argument already smaller than the max_period', () => {
+ const maxPeriod = calendarUtils.getMaxPeriodTimeRange(
+ resourceWithMaxPeriod, selectionSmallerThanMaxPeriod.start, selectionSmallerThanMaxPeriod.end
+ );
+
+ expect(maxPeriod).toEqual(selectionSmallerThanMaxPeriod);
+ });
+
+ test('should return new end time fulfill max_period if selected end time is bigger than that', () => {
+ const maxPeriod = calendarUtils.getMaxPeriodTimeRange(
+ resourceWithMaxPeriod, selection.start, new Date('2019-08-16T04:30:00Z')
+ );
+
+ expect(maxPeriod).toEqual(selectionMaxPeriodExpect);
+ });
+
+ test('should return default even when its bigger than max_period when user is staff', () => {
+ const maxPeriod = calendarUtils.getMaxPeriodTimeRange(
+ resourceWithMaxPeriod, selection.start, new Date('2019-08-16T04:30:00Z'), true
+ );
+
+ expect(maxPeriod.end).toEqual(new Date('2019-08-16T04:30:00Z'));
+ });
+ });
+
+ describe('isTimeRangeUnderMinPeriod', () => {
+ test('should return false by default if no min_period', () => {
+ const isUnder = calendarUtils.isTimeRangeUnderMinPeriod(resource, selection.start, selection.end);
+
+ expect(isUnder).toBeFalsy();
+ });
+
+ test('should return false if end time already >= min_period', () => {
+ const isUnder = calendarUtils.isTimeRangeUnderMinPeriod(
+ resourceWithMinPeriod, selectionLargerThanMinPeriod.start, selectionLargerThanMinPeriod.end
+ );
+
+ expect(isUnder).toBeFalsy();
+ });
+
+ test('should return true if end time < min_period', () => {
+ const isUnder = calendarUtils.isTimeRangeUnderMinPeriod(
+ resourceWithMinPeriod, selection.start, selection.end
+ );
+
+ expect(isUnder).toBeTruthy();
+ });
+ });
+
+ describe('isTimeRangeOverMaxPeriod', () => {
+ test('should return false by default if no max_period', () => {
+ const isOver = calendarUtils.isTimeRangeOverMaxPeriod(resource, selection.start, selection.end);
+
+ expect(isOver).toBeFalsy();
+ });
+
+ test('should return false if end time already <= max_period', () => {
+ const isOver = calendarUtils.isTimeRangeOverMaxPeriod(
+ resourceWithMaxPeriod, selectionSmallerThanMaxPeriod.start, selectionSmallerThanMaxPeriod.end
+ );
+
+ expect(isOver).toBeFalsy();
+ });
+
+ test('should return true if end time > max_period', () => {
+ const isOver = calendarUtils.isTimeRangeOverMaxPeriod(
+ resourceWithMaxPeriod, selection.start, new Date('2019-08-16T04:30:00Z')
+ );
+
+ expect(isOver).toBeTruthy();
+ });
+
+ test('should return false if end time > max_period, user is staff', () => {
+ const isOver = calendarUtils.isTimeRangeOverMaxPeriod(
+ resourceWithMaxPeriod, selection.start, new Date('2019-08-16T04:30:00Z'), true
+ );
+
+ expect(isOver).toBeFalsy();
+ });
+ });
+});
diff --git a/src/common/calendar/_timePickerCalendar.scss b/src/common/calendar/_timePickerCalendar.scss
new file mode 100644
index 000000000..25449a263
--- /dev/null
+++ b/src/common/calendar/_timePickerCalendar.scss
@@ -0,0 +1,112 @@
+.app-TimePickerCalendar {
+ &__event {
+ color: $white !important;
+ border-radius: 0 !important;
+
+ &--reserved {
+ background-color: $red !important;
+ border-color: $red !important;
+ }
+ }
+
+ &__restrictedDate {
+ background-color: $gray-light !important;
+ }
+
+ &__newReservation {
+ position: relative;
+ }
+
+ &__cancelEvent {
+ position: absolute;
+ right: 0.25em;
+ top: 0;
+ z-index: 2;
+
+ &::after {
+ display: inline;
+ content: '\00D7';
+ font-size: 1.25em;
+ font-weight: bold;
+ line-height: 0.75;
+ }
+ }
+
+ @media (max-width: $screen-xs-max) {
+ .fc-time-grid .fc-slats td {
+ height: 2em !important;
+ }
+
+ .fc-view-container {
+ overflow: scroll;
+
+ .fc-timeGridWeek-view {
+ width: 700px;
+ }
+ }
+
+ .fc-header-toolbar {
+ display: flex;
+
+ .fc-left,
+ .fc-right {
+ width: 30%
+ }
+
+
+ .fc-button {
+ border: none;
+ border-radius: 0;
+ padding: 0.2em 0.3em;
+ background: $hel-coat;
+ font-weight: $font-weight-bold;
+
+ &:disabled {
+ border: 1px solid $black;
+ color: $black;
+ background: $white !important;
+ }
+
+ &.fc-timeGridDay-button,
+ &.fc-timeGridWeek-button {
+ &.fc-button-active {
+ display: none;
+ }
+ }
+ }
+
+ .fc-prev-button,
+ .fc-next-button {
+ margin: 0 !important;
+ background: $white;
+ padding: 0;
+ }
+
+ .fc-icon {
+ color: $black;
+ }
+
+ .fc-right, .fc-left {
+ .fc-button-group {
+ .fc-button {
+ flex-grow: 0;
+ }
+
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ }
+ }
+
+ .fc-center {
+ text-align: center;
+ h2 {
+ font-size: 1em;
+ }
+ }
+ }
+ }
+
+}
+
+
diff --git a/src/common/calendar/utils.js b/src/common/calendar/utils.js
new file mode 100644
index 000000000..d33bf387a
--- /dev/null
+++ b/src/common/calendar/utils.js
@@ -0,0 +1,165 @@
+import moment from 'moment';
+import get from 'lodash/get';
+
+/**
+ * getDefaultSelectedTimeRange()
+ * Get default selected time range from reservation data.
+ * @returns {Object} selected time range
+ */
+export const getDefaultSelectedTimeRange = (reservation) => {
+ return reservation ? {
+ start: reservation.begin,
+ end: reservation.end
+ } : null;
+};
+
+
+/**
+ * isTimeRangeOverMaxPeriod();
+ * Reservation cannot be longer than the resources max period if max period is set.
+ *
+ * @param {Object} resource Resource data
+ * @param {Date} start Start time
+ * @param {Date} end End time
+ * @param {boolean} isStaff Bypass this check if user is staff member
+ * @returns {boolean} Selected time range is larger than max_period or not
+ */
+export const isTimeRangeOverMaxPeriod = (resource, start, end, isStaff = false) => {
+ const period = get(resource, 'max_period', null);
+
+ if (!isStaff && period) {
+ const startMoment = moment(start);
+ const endMoment = moment(end);
+
+ const periodDuration = moment.duration(period);
+ const durationInMinutes = periodDuration.hours() * 60 + periodDuration.minutes();
+
+ if (endMoment.diff(startMoment, 'minutes') > durationInMinutes) {
+ return true;
+ }
+ }
+
+ return false;
+};
+
+/**
+ * isTimeRangeUnderMinPeriod();
+ * Reservation must longer than the resources min period if min period is set.
+ *
+ * @param {Object} resource Resource data
+ * @param {Date} start Start time
+ * @param {Date} end End time
+ * @param {boolean} isStaff Bypass this check if user is staff member
+ * @returns {boolean} Selected time range is larger than min_period or not
+ */
+export const isTimeRangeUnderMinPeriod = (resource, start, end) => {
+ const period = get(resource, 'min_period', null);
+
+ if (period) {
+ const startMoment = moment(start);
+ const endMoment = moment(end);
+
+ const periodDuration = moment.duration(period);
+ const durationInMinutes = periodDuration.hours() * 60 + periodDuration.minutes();
+
+ if (endMoment.diff(startMoment, 'minutes') < durationInMinutes) {
+ return true;
+ }
+ }
+
+ return false;
+};
+
+/**
+ * addPeriodToTime()
+ * Add period to input time
+ * For example: period 00:30:00, time: moment(12:00:00) -> moment(12:30:00)
+ *
+ * @param {Moment} time
+ * @param {string} period
+ * @returns {Moment}
+ */
+
+const addPeriodToTime = (time, period) => {
+ if (period) {
+ const periodInMinute = moment.duration(period).as('minutes');
+ return time.add(periodInMinute, 'minutes');
+ }
+
+ // Return original if no period
+ return time;
+};
+
+/**
+ * getMinPeriodTimeRange
+ * Populate the end time with resource min_period
+ * For example: start time 1pm, min_period: 1:00:00 ->
+ * end time should be 1pm + 1hour = 2pm
+ *
+ * @param {Object} resource
+ * @param {Date} start
+ * @param {Date} end
+ * @returns {Date} return new end date if time range < min_period given, otherwise return original end
+ */
+
+export const getMinPeriodTimeRange = (resource, start, end) => {
+ const minPeriod = get(resource, 'min_period', null);
+
+ if (!minPeriod) {
+ return {
+ start, end
+ };
+ }
+
+ const minPeriodEnd = addPeriodToTime(moment(start), minPeriod);
+
+ if (minPeriodEnd.diff(moment(end)) > 0) {
+ // time range smaller than min_period, return min_period
+ return {
+ start,
+ end: minPeriodEnd.toDate()
+ };
+ }
+
+ return {
+ start,
+ end
+ };
+};
+
+/**
+ * getMaxPeriodEndTime
+ * Populate the end time with resource min_period
+ * For example: start time 1pm, min_period: 1:00:00 ->
+ * end time should be 1pm + 1hour = 2pm
+ *
+ * @param {Object} resource
+ * @param {Date} start
+ * @param {Date} end
+ * @returns {Date} return new end date if time range < min_period given, otherwise return original end
+ */
+
+export const getMaxPeriodTimeRange = (resource, start, end, isStaff) => {
+ const maxPeriod = get(resource, 'max_period', null);
+
+ if (!maxPeriod || isStaff) {
+ return {
+ start, end
+ };
+ }
+
+ const maxPeriodEnd = addPeriodToTime(moment(start), maxPeriod);
+
+ if (moment(end).diff(maxPeriodEnd) > 0) {
+ // time range is over max_period not allowed, return max_period
+ return {
+ start,
+ end: maxPeriodEnd.toDate()
+ };
+ }
+
+ return {
+ start,
+ end
+ };
+};
diff --git a/src/common/data/__tests__/utils.test.js b/src/common/data/__tests__/utils.test.js
new file mode 100644
index 000000000..1ea3dfe7c
--- /dev/null
+++ b/src/common/data/__tests__/utils.test.js
@@ -0,0 +1,39 @@
+import * as dataUtils from '../utils';
+
+describe('common/data/utils.js', () => {
+ describe('getLocalizedFieldValue', () => {
+ const field = {
+ en: 'Foo Bar',
+ };
+
+ test('Get defined locale', () => {
+ const actual = dataUtils.getLocalizedFieldValue(field, 'en');
+ expect(actual).toBe(field.en);
+ });
+
+ test('Get undefined locale', () => {
+ const actual = dataUtils.getLocalizedFieldValue(field, 'fi');
+ expect(actual).toBeNull();
+ });
+ });
+
+ describe('parseData', () => {
+ const data = {
+ foo: 'Foo Bar',
+ bar: '',
+ foobar: 0
+ };
+
+ test('All empty and 0 value will be trimmed', () => {
+ const actual = dataUtils.parseData(data);
+ expect(actual).toMatchObject({
+ foo: 'Foo Bar'
+ });
+ });
+
+ test('Wont throw error in case data is empty', () => {
+ const actual = dataUtils.parseData({});
+ expect(actual).toMatchObject({});
+ });
+ });
+});
diff --git a/src/common/data/fixtures/__tests__/utils.test.js b/src/common/data/fixtures/__tests__/utils.test.js
new file mode 100644
index 000000000..071385a0b
--- /dev/null
+++ b/src/common/data/fixtures/__tests__/utils.test.js
@@ -0,0 +1,17 @@
+import isFunction from 'lodash/isFunction';
+
+import * as fixtureUtils from '../utils';
+
+describe('src/common/data/fixtures/utils.js', () => {
+ test('getLocalizedFieldSequenceGeneratorFunction', () => {
+ const generatorFunction = fixtureUtils
+ .getLocalizedFieldSequenceGeneratorFunction('FooBar', ['en', 'fi', 'sv']);
+
+ expect(isFunction(generatorFunction)).toBe(true);
+ expect(generatorFunction(1)).toEqual({
+ en: 'FooBar (en) - 1',
+ fi: 'FooBar (fi) - 1',
+ sv: 'FooBar (sv) - 1',
+ });
+ });
+});
diff --git a/src/common/data/fixtures/purpose.js b/src/common/data/fixtures/purpose.js
new file mode 100644
index 000000000..59e8f6596
--- /dev/null
+++ b/src/common/data/fixtures/purpose.js
@@ -0,0 +1,8 @@
+import { Factory } from 'rosie';
+
+import * as fixtureUtils from './utils';
+
+export default new Factory()
+ .sequence('id')
+ .sequence('name', fixtureUtils.getLocalizedFieldSequenceGeneratorFunction('Purpose'))
+ .attr('parent', null);
diff --git a/src/common/data/fixtures/reservation.js b/src/common/data/fixtures/reservation.js
new file mode 100644
index 000000000..4c5cc7dc8
--- /dev/null
+++ b/src/common/data/fixtures/reservation.js
@@ -0,0 +1,17 @@
+import { Factory } from 'rosie';
+
+export default new Factory()
+ .sequence('id')
+ .attr('url', 'https://respa.koe.hel.ninja/v1/reservation/192388/')
+ .sequence('resource')
+ .attr('begin', '')
+ .attr('end', '')
+ .attr('event_description', '')
+ .attr('event_subject', '')
+ .attr('has_catering_order', false)
+ .attr('its_own', false)
+ .attr('staff_event', false)
+ .attr('state', 'requested')
+ .attr('user', {})
+ .attr('user_permissions', null)
+ .attr('comments', '');
diff --git a/src/common/data/fixtures/resource.js b/src/common/data/fixtures/resource.js
new file mode 100644
index 000000000..28d33399a
--- /dev/null
+++ b/src/common/data/fixtures/resource.js
@@ -0,0 +1,22 @@
+import { Factory } from 'rosie';
+
+import { DEFAULT_SLOT_SIZE } from '../../../../app/constants/SlotConstants';
+import * as fixtureUtils from './utils';
+
+export default new Factory()
+ .sequence('id')
+ .sequence('name', fixtureUtils.getLocalizedFieldSequenceGeneratorFunction('Resource'))
+ .attr('public', true)
+ .sequence('unit')
+ .attr('available_hours', [])
+ .attr('equipment', [])
+ .attr('need_manual_confirmation', false)
+ .attr('opening_hours', [])
+ .attr('required_reservation_extra_fields', [])
+ .attr('reservable', true)
+ .attr('reservable_after', null)
+ .attr('supported_reservation_extra_fields', [])
+ .attr('user_permissions', { isAdmin: false, canMakeReservations: true })
+ .attr('is_favorite', false)
+ .attr('slot_size', DEFAULT_SLOT_SIZE)
+ .attr('products', []);
diff --git a/src/common/data/fixtures/unit.js b/src/common/data/fixtures/unit.js
new file mode 100644
index 000000000..e9c842b7c
--- /dev/null
+++ b/src/common/data/fixtures/unit.js
@@ -0,0 +1,9 @@
+import { Factory } from 'rosie';
+
+import * as fixtureUtils from './utils';
+
+export default new Factory()
+ .sequence('id')
+ .sequence('name', fixtureUtils.getLocalizedFieldSequenceGeneratorFunction('Unit'))
+ .attr('location', { type: 'Point', coordinates: [25.01571, 60.249935] })
+ .attr('opening_hours_today', {});
diff --git a/src/common/data/fixtures/utils.js b/src/common/data/fixtures/utils.js
new file mode 100644
index 000000000..00b06577d
--- /dev/null
+++ b/src/common/data/fixtures/utils.js
@@ -0,0 +1,9 @@
+export const getLocalizedFieldSequenceGeneratorFunction = (fieldValue, locales = ['en', 'fi', 'sv']) => {
+ return (i) => {
+ const value = {};
+ locales.forEach((locale) => {
+ value[locale] = `${fieldValue} (${locale}) - ${i}`;
+ });
+ return value;
+ };
+};
diff --git a/src/common/data/utils.js b/src/common/data/utils.js
new file mode 100644
index 000000000..c7a8ecfef
--- /dev/null
+++ b/src/common/data/utils.js
@@ -0,0 +1,24 @@
+import get from 'lodash/get';
+import values from 'lodash/values';
+import pickBy from 'lodash/pickBy';
+
+export const getLocalizedFieldValue = (field, locale, fallback = false) => {
+ const localeValue = get(field, locale, null);
+
+ if (localeValue || !fallback) {
+ return localeValue;
+ }
+
+ return values(field).find(fallbackValue => !!fallbackValue);
+};
+
+/**
+ * Trim empty values from data object
+ *
+ * @param {Object} data
+ * @returns {Object} Trimmed empty values object
+ */
+
+export const parseData = (data) => {
+ return pickBy(data, value => value || value === 0);
+};
diff --git a/src/common/form/_form.scss b/src/common/form/_form.scss
new file mode 100644
index 000000000..03d5e46e2
--- /dev/null
+++ b/src/common/form/_form.scss
@@ -0,0 +1,4 @@
+@import './fields/textField';
+@import './fields/buttonGroupField';
+@import './fields/selectField';
+@import './fields/dateField';
diff --git a/src/common/form/fields/ButtonGroupField.js b/src/common/form/fields/ButtonGroupField.js
new file mode 100644
index 000000000..00be7262c
--- /dev/null
+++ b/src/common/form/fields/ButtonGroupField.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FormGroup from 'react-bootstrap/lib/FormGroup';
+import ControlLabel from 'react-bootstrap/lib/ControlLabel';
+import ToggleButtonGroup from 'react-bootstrap/lib/ToggleButtonGroup';
+import ToggleButton from 'react-bootstrap/lib/ToggleButton';
+
+const ButtonGroupField = ({
+ onChange,
+ label,
+ options,
+ value,
+ type,
+ id,
+}) => (
+
+
+ {label && {label} }
+
+ {options.map(option => (
+
+ {option.label}
+
+ ))}
+
+
+
+);
+
+const OptionShape = PropTypes.shape({
+ value: PropTypes.oneOfType([
+ PropTypes.number,
+ PropTypes.string,
+ ]).isRequired,
+ label: PropTypes.string.isRequired,
+});
+
+ButtonGroupField.propTypes = {
+ id: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+ label: PropTypes.string,
+ value: PropTypes.oneOfType([
+ PropTypes.number,
+ PropTypes.string,
+ PropTypes.array,
+ ]),
+ type: PropTypes.string.isRequired,
+ options: PropTypes.arrayOf(OptionShape),
+};
+
+export default ButtonGroupField;
diff --git a/src/common/form/fields/DateField.js b/src/common/form/fields/DateField.js
new file mode 100644
index 000000000..1de945417
--- /dev/null
+++ b/src/common/form/fields/DateField.js
@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import DayPicker from 'react-day-picker';
+import MomentLocaleUtils from 'react-day-picker/moment';
+import ControlLabel from 'react-bootstrap/lib/ControlLabel';
+import FormGroup from 'react-bootstrap/lib/FormGroup';
+import Glyphicon from 'react-bootstrap/lib/Glyphicon';
+import InputGroup from 'react-bootstrap/lib/InputGroup';
+import Overlay from 'react-bootstrap/lib/Overlay';
+
+import iconCalendar from './images/calendar.svg';
+import injectT from '../../../../app/i18n/injectT';
+
+const DatePickerWrapper = ({ children }) => (
+
+ {children}
+
+);
+
+DatePickerWrapper.propTypes = {
+ children: PropTypes.any,
+};
+
+class UntranslatedDateField extends React.Component {
+ static propTypes = {
+ value: PropTypes.instanceOf(Date),
+ locale: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+ label: PropTypes.string,
+ placeholder: PropTypes.string,
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ isOpen: false,
+ };
+ }
+
+ onChange = (newDate) => {
+ const { onChange } = this.props;
+
+ this.setState({
+ isOpen: false,
+ });
+
+ onChange(newDate);
+ };
+
+ render() {
+ const {
+ locale,
+ label,
+ placeholder,
+ value,
+ } = this.props;
+ const { isOpen } = this.state;
+ const date = value || moment().toDate();
+
+ return (
+
+
this.setState({ isOpen: !isOpen })}>
+ {label && {label} }
+
+
+ {moment(value).format('L')} }
+ {(!value && placeholder) && (
+ {placeholder}
+ )}
+
+
+
+
+
+
this.setState({ isOpen: false })}
+ placement="bottom"
+ rootClose
+ show={isOpen}
+ >
+
+ this.onChange(newDate)}
+ selectedDays={date}
+ showOutsideDays
+ showWeekNumbers
+ />
+
+
+
+ );
+ }
+}
+
+export { UntranslatedDateField };
+export default injectT(UntranslatedDateField);
diff --git a/src/common/form/fields/SelectField.js b/src/common/form/fields/SelectField.js
new file mode 100644
index 000000000..194c27b3e
--- /dev/null
+++ b/src/common/form/fields/SelectField.js
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import ControlLabel from 'react-bootstrap/lib/ControlLabel';
+import FormGroup from 'react-bootstrap/lib/FormGroup';
+import Select from 'react-select';
+
+import injectT from '../../../../app/i18n/injectT';
+
+export const getOption = (value, options) => {
+ if (!value) {
+ return null;
+ }
+
+ if (Array.isArray(value)) {
+ return value.map(item => options.find(option => option.value === item));
+ }
+
+ return options.find(option => option.value === value);
+};
+
+const SelectField = ({
+ t,
+ id,
+ label,
+ isClearable,
+ isMulti,
+ isSearchable,
+ onChange,
+ placeholder = t('common.select'),
+ options,
+ value,
+}) => {
+ return (
+
+
+ {label && {label} }
+ t('SelectFilter.noOptionsMessage')}
+ onChange={(selected, { action }) => {
+ if (action === 'clear') {
+ onChange(isMulti ? [] : {}, action);
+ return;
+ }
+
+ onChange(selected, action);
+ }}
+ options={options}
+ placeholder={placeholder}
+ value={getOption(value, options)}
+ />
+
+
+ );
+};
+
+SelectField.propTypes = {
+ id: PropTypes.string.isRequired,
+ isClearable: PropTypes.bool,
+ isSearchable: PropTypes.bool,
+ isMulti: PropTypes.bool,
+ label: PropTypes.string,
+ placeholder: PropTypes.string,
+ onChange: PropTypes.func.isRequired,
+ options: PropTypes.array.isRequired,
+ t: PropTypes.func.isRequired,
+ value: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.array,
+ PropTypes.number,
+ ]),
+};
+
+export default injectT(SelectField);
diff --git a/src/common/form/fields/TextField.js b/src/common/form/fields/TextField.js
new file mode 100644
index 000000000..c474e81a7
--- /dev/null
+++ b/src/common/form/fields/TextField.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FormGroup from 'react-bootstrap/lib/FormGroup';
+import ControlLabel from 'react-bootstrap/lib/ControlLabel';
+import FormControl from 'react-bootstrap/lib/FormControl';
+
+const TextField = ({
+ onChange,
+ onKeyPress,
+ label,
+ placeholder,
+ value,
+ id,
+}) => (
+
+
+ {label && {label} }
+
+
+);
+
+TextField.propTypes = {
+ id: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+ onKeyPress: PropTypes.func,
+ label: PropTypes.string,
+ placeholder: PropTypes.string,
+ value: PropTypes.string.isRequired,
+};
+
+export default TextField;
diff --git a/src/common/form/fields/__tests__/ButtonGroupField.test.js b/src/common/form/fields/__tests__/ButtonGroupField.test.js
new file mode 100644
index 000000000..9c0054485
--- /dev/null
+++ b/src/common/form/fields/__tests__/ButtonGroupField.test.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import toJSON from 'enzyme-to-json';
+import { shallow } from 'enzyme';
+
+import ButtonGroupField from '../ButtonGroupField';
+
+describe('ButtonGroupField', () => {
+ test('renders correctly', () => {
+ const props = {
+ onChange: jest.fn(),
+ label: 'foo',
+ options: [
+ { value: 'foo', label: 'Foo' },
+ { value: 'bar', label: 'Bar' },
+ ],
+ value: 'foo',
+ type: 'checkbox',
+ id: 'foo',
+ };
+
+ const wrapper = shallow(
+
+ );
+
+ expect(toJSON(wrapper)).toMatchSnapshot();
+ });
+});
diff --git a/src/common/form/fields/__tests__/DateField.test.js b/src/common/form/fields/__tests__/DateField.test.js
new file mode 100644
index 000000000..3728a60d2
--- /dev/null
+++ b/src/common/form/fields/__tests__/DateField.test.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import toJSON from 'enzyme-to-json';
+import { shallow } from 'enzyme';
+
+import { globalDateMock } from '../../../../../app/utils/testUtils';
+import { UntranslatedDateField as DateField } from '../DateField';
+
+describe('DateField', () => {
+ test('renders correctly', () => {
+ const props = {
+ onChange: jest.fn(),
+ label: 'foo',
+ id: 'foo',
+ value: new Date(2019, 8, 9),
+ locale: 'en'
+ };
+
+ globalDateMock();
+
+ const wrapper = shallow(
+
+ );
+
+ expect(toJSON(wrapper)).toMatchSnapshot();
+ });
+});
diff --git a/src/common/form/fields/__tests__/SelectField.test.js b/src/common/form/fields/__tests__/SelectField.test.js
new file mode 100644
index 000000000..bdbc447de
--- /dev/null
+++ b/src/common/form/fields/__tests__/SelectField.test.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import toJSON from 'enzyme-to-json';
+
+import { shallowWithIntl } from '../../../../../app/utils/testUtils';
+import SelectField from '../SelectField';
+
+describe('SelectField', () => {
+ test('renders correctly', () => {
+ const props = {
+ onChange: jest.fn(),
+ label: 'foo',
+ options: [
+ { value: 'foo', label: 'Foo' },
+ { value: 'bar', label: 'Bar' },
+ ],
+ value: 'foo',
+ id: 'foo',
+ };
+
+ const wrapper = shallowWithIntl(
+
+ );
+
+ expect(toJSON(wrapper)).toMatchSnapshot();
+ });
+});
diff --git a/src/common/form/fields/__tests__/TextField.test.js b/src/common/form/fields/__tests__/TextField.test.js
new file mode 100644
index 000000000..68a6b92fd
--- /dev/null
+++ b/src/common/form/fields/__tests__/TextField.test.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import toJSON from 'enzyme-to-json';
+
+import { shallowWithIntl } from '../../../../../app/utils/testUtils';
+import TextField from '../TextField';
+
+describe('ButtonGroupField', () => {
+ test('renders correctly', () => {
+ const props = {
+ onChange: jest.fn(),
+ label: 'foo',
+ value: 'foo',
+ id: 'foo',
+ };
+
+ const wrapper = shallowWithIntl(
+
+ );
+
+ expect(toJSON(wrapper)).toMatchSnapshot();
+ });
+});
diff --git a/src/common/form/fields/__tests__/__snapshots__/ButtonGroupField.test.js.snap b/src/common/form/fields/__tests__/__snapshots__/ButtonGroupField.test.js.snap
new file mode 100644
index 000000000..47463d53f
--- /dev/null
+++ b/src/common/form/fields/__tests__/__snapshots__/ButtonGroupField.test.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonGroupField renders correctly 1`] = `
+
+
+
+ foo
+
+
+
+ Foo
+
+
+ Bar
+
+
+
+
+`;
diff --git a/src/common/form/fields/__tests__/__snapshots__/DateField.test.js.snap b/src/common/form/fields/__tests__/__snapshots__/DateField.test.js.snap
new file mode 100644
index 000000000..bef7c8e85
--- /dev/null
+++ b/src/common/form/fields/__tests__/__snapshots__/DateField.test.js.snap
@@ -0,0 +1,459 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DateField renders correctly 1`] = `
+
+
+
+ foo
+
+
+
+
+ 09.09.2019
+
+
+
+
+
+
+
,
+ "_firstWorkInProgressHook": null,
+ "_forcedUpdate": false,
+ "_instance": [Circular],
+ "_isReRender": false,
+ "_newState": null,
+ "_numberOfReRenders": 0,
+ "_previousComponentIdentity": null,
+ "_renderPhaseUpdates": null,
+ "_rendered":
+
+
+ foo
+
+
+
+
+ 09.09.2019
+
+
+
+
+
+
+
+
+
+
+
,
+ "_rendering": false,
+ "_updater": [Circular],
+ "_workInProgressHook": null,
+ },
+ },
+ }
+ }
+ onHide={[Function]}
+ placement="bottom"
+ rootClose={true}
+ show={false}
+ >
+
+
+
+
+`;
diff --git a/src/common/form/fields/__tests__/__snapshots__/SelectField.test.js.snap b/src/common/form/fields/__tests__/__snapshots__/SelectField.test.js.snap
new file mode 100644
index 000000000..0a138ab89
--- /dev/null
+++ b/src/common/form/fields/__tests__/__snapshots__/SelectField.test.js.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectField renders correctly 1`] = `
+
+
+
+ foo
+
+
+
+`;
diff --git a/src/common/form/fields/__tests__/__snapshots__/TextField.test.js.snap b/src/common/form/fields/__tests__/__snapshots__/TextField.test.js.snap
new file mode 100644
index 000000000..0b6cc15fd
--- /dev/null
+++ b/src/common/form/fields/__tests__/__snapshots__/TextField.test.js.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonGroupField renders correctly 1`] = `
+
+
+
+ foo
+
+
+
+`;
diff --git a/src/common/form/fields/_buttonGroupField.scss b/src/common/form/fields/_buttonGroupField.scss
new file mode 100644
index 000000000..4dc31f5c9
--- /dev/null
+++ b/src/common/form/fields/_buttonGroupField.scss
@@ -0,0 +1,19 @@
+.app-ButtonGroupField {
+ &__buttons {
+ display: block;
+ overflow: hidden;
+ margin: 0 -2px;
+ }
+
+ &__button {
+ margin: 0 5px 5px 0 !important;
+ font-size: 14px;
+ font-weight: 500;
+
+ &.active,
+ &:hover {
+ background-color: #000000 !important;
+ color: #dedfe1 !important;
+ }
+ }
+}
diff --git a/src/common/form/fields/_dateField.scss b/src/common/form/fields/_dateField.scss
new file mode 100644
index 000000000..e8dcb1fde
--- /dev/null
+++ b/src/common/form/fields/_dateField.scss
@@ -0,0 +1,165 @@
+.app-DateField {
+ display: inline-block;
+ margin-bottom: $form-group-margin-bottom;
+ position: relative;
+ width: 100%;
+
+ &__label {
+
+ }
+
+ &__input {
+ border-right-width: 0;
+ text-align: left;
+ vertical-align: middle;
+
+ img {
+ margin-right: 6px;
+ }
+
+ img,
+ span {
+ vertical-align: middle;
+ }
+
+ .placeholder {
+ color: $input-color-placeholder;
+ }
+
+ .value {
+
+ }
+ }
+
+ &__icon {
+ width: 21px;
+ }
+
+ &__triangle {
+ font-size: 10px;
+ text-align: right;
+ }
+
+ &__datePicker {
+ background: $white;
+ border: 2px solid $black;
+ position: absolute;
+ left: 0;
+ top: 100% !important;
+ z-index: 3; // above bootstrap button
+ margin-top: -2px;
+ padding: 20px;
+ min-width: 100%;
+
+ .DayPicker {
+ width: 100%;
+ }
+ }
+
+ .form-group {
+ margin-bottom: 0;
+ }
+
+ .DayPicker-NavBar {
+ position: absolute;
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ }
+
+ .DayPicker-Caption {
+ height: auto;
+ font-weight: 600;
+ line-height: 3rem;
+ font-size: 16px;
+ text-transform: capitalize;
+ text-align: center;
+ }
+
+ .DayPicker-NavButton--prev {
+ @include icon-angle-left($black);
+ width: $line-height-computed;
+ height: $line-height-computed;
+ position: static;
+ margin-right: 0;
+ }
+
+ .DayPicker-NavButton--next {
+ @include icon-angle-right($black);
+ width: $line-height-computed;
+ height: $line-height-computed;
+ position: static;
+ }
+
+ .DayPicker-Month {
+ margin: 0;
+ border-collapse: separate;
+ width: 100%;
+ }
+
+ .DayPicker-Day {
+ border: 2px solid $white;
+ margin: 1px;
+ line-height: 1rem;
+ color: $black;
+ background-color: $light-gray;
+ border-radius: 0;
+ font-size: 1.6rem;
+
+ &:focus {
+ outline: none;
+ }
+
+ &--available:not(.DayPicker-Day--disabled) {
+ background-color: $light-gray;
+
+ &.DayPicker-Day--selected {
+ background-color: $light-gray;
+ }
+ }
+
+ &--outside {
+ color: $medium-gray;
+ }
+
+ &--disabled {
+ cursor: pointer;
+ background-color: $medium-gray;
+ color: $dark-gray;
+ }
+
+ &--selected,
+ &--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
+ color: $white;
+ background-color: $dark-gray;
+ }
+ }
+
+ .DayPicker-Day--today {
+ border: 2px solid $black;
+ }
+
+ .DayPicker-WeekdaysRow {
+ padding: 0.2rem;
+ font-size: 1.4rem;
+ }
+
+ .DayPicker-Weekdays {
+ text-transform: uppercase;
+ font-weight: normal;
+
+ abbr {
+ border: none;
+ cursor: default;
+ vertical-align: text-top;
+ }
+ }
+
+ .DayPicker-Weekday {
+ color: $black;
+ }
+
+ .DayPicker-WeekNumber {
+ font-size: 14px;
+ }
+}
diff --git a/src/common/form/fields/_selectField.scss b/src/common/form/fields/_selectField.scss
new file mode 100644
index 000000000..3ba12d5bf
--- /dev/null
+++ b/src/common/form/fields/_selectField.scss
@@ -0,0 +1,3 @@
+.app-SelectField {
+
+}
diff --git a/src/common/form/fields/_textField.scss b/src/common/form/fields/_textField.scss
new file mode 100644
index 000000000..3c59ccefb
--- /dev/null
+++ b/src/common/form/fields/_textField.scss
@@ -0,0 +1,3 @@
+.app-TextField {
+
+}
diff --git a/src/common/form/fields/images/calendar.svg b/src/common/form/fields/images/calendar.svg
new file mode 100644
index 000000000..adc66b08a
--- /dev/null
+++ b/src/common/form/fields/images/calendar.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/common/map/UnitMarker.js b/src/common/map/UnitMarker.js
new file mode 100644
index 000000000..81309aa0b
--- /dev/null
+++ b/src/common/map/UnitMarker.js
@@ -0,0 +1,47 @@
+import L from 'leaflet';
+import icon from 'leaflet/dist/images/marker-icon-2x.png';
+import PropTypes from 'prop-types';
+import React from 'react';
+import get from 'lodash/get';
+import { Marker } from 'react-leaflet';
+
+import highlightedIcon from '../../../app/assets/map/highlighted-marker-icon-2x.png';
+
+const getIcon = (count, isHighlighted = false) => {
+ return L.divIcon({
+ className: 'marker-icon',
+ iconAnchor: [12, 48],
+ iconSize: [25, 48],
+ html: `
${count}
`,
+ });
+};
+
+const UnitMarker = ({
+ unit,
+ resources,
+ isHighlighted,
+ onClick,
+}) => {
+ const coordinates = get(unit, 'location.coordinates');
+
+ return (
+
{
+ if (onClick) {
+ onClick(unit, resources);
+ }
+ }}
+ position={[coordinates[1], coordinates[0]]}
+ />
+ );
+};
+
+UnitMarker.propTypes = {
+ unit: PropTypes.object.isRequired,
+ resources: PropTypes.array,
+ onClick: PropTypes.func,
+ isHighlighted: PropTypes.bool,
+};
+
+export default UnitMarker;
diff --git a/src/common/map/UserMarker.js b/src/common/map/UserMarker.js
new file mode 100644
index 000000000..412abf537
--- /dev/null
+++ b/src/common/map/UserMarker.js
@@ -0,0 +1,30 @@
+import L from 'leaflet';
+import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Marker } from 'react-leaflet';
+
+import iconRetinaUrl from '../../../app/assets/map/usermarker-icon-2x.png';
+import iconUrl from '../../../app/assets/map/usermarker-icon.png';
+
+const UserMarker = ({ position }) => (
+ 1