Merge pull request #127 from GSG-G8/122-types-dashboard

Booking type at client side

client/package.json

@@ -18,6 +18,7 @@
     "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
+    "react-color": "^2.18.1",
     "react-dom": "^16.13.1",
     "react-google-login": "^5.1.20",
     "react-router-dom": "^5.1.2",

client/src/components/DayView/Calendar.js

@@ -6,7 +6,7 @@ import moment from 'moment';
 import Tooltip from 'tooltip.js';
 import React from 'react';
 import BookingForm from '../Form/Reservation';
-import { getBusinessHours } from './functions';
+import { getBusinessHours, getBookingTypes, fetchRoomName } from './functions';
 import './style.css';
 
 class Calendar extends React.Component {
@@ -29,19 +29,21 @@ class Calendar extends React.Component {
     minTime: '00:00',
     maxTime: '20:00',
     currentDate: moment(),
+    types: [],
   };
 
   componentDidMount() {
     this.setState({ loading: true });
-    this.fetchRoomName().then(() => this.setState({ loading: false }));
+    fetchRoomName(this, message).then(() => this.setState({ loading: false }));
     getBusinessHours(this, message);
+    getBookingTypes(this, message);
   }
 
   handleHide = () => {
     this.setState({ visible: false });
   };
 
-  bookRoom = () => {
+  clearData = () => {
     this.setState({
       modalData: {
         roomId: '1',
@@ -60,22 +62,6 @@ class Calendar extends React.Component {
     this.setState({ visible: true });
   };
 
-  fetchRoomName = () =>
-    fetch(`/api/v1/rooms`)
-      .then((res) => {
-        if (!res.ok) {
-          res.json().then(({ message: msg }) => message.error(msg));
-          throw res.statusText;
-        }
-        return res.json();
-      })
-      .then((results) => {
-        this.setState({ rooms: results });
-      })
-      .catch((err) => {
-        message.error(err);
-      });
-
   fetchRoomEvent = (date) =>
     fetch(`/api/v1/booking/${date}`)
       .then((res) => {
@@ -97,45 +83,23 @@ class Calendar extends React.Component {
             resourceId: event.room_id,
             userid: event.user_id,
             userName: event.name,
+            color: event.color,
             noOfPeople: event.noofpeople,
+            typeID: event.bookingtype_id,
           })),
         });
       })
       .catch((err) => {
         message.error(err);
       });
 
-  resourcesFunc = ({ start }, successCallback, failureCallback) => {
-    const { rooms } = this.state;
-    successCallback(rooms.map((room) => ({ id: room.id, title: room.name })));
-
-    this.fetchRoomEvent(moment(start).format('YYYY-MM-DD')).catch(
-      failureCallback
-    );
-  };
-
-  handleDateSelect = ({ resource: { id: roomId }, start, end }) => {
-    this.setState({
-      modalData: {
-        roomId,
-        start,
-        end,
-        title: '',
-        description: '',
-        readOnly: false,
-        noOfPeople: null,
-      },
-    });
-    this.showModal();
-  };
-
   showEventForm = ({ event }) => {
     const {
       id,
       start,
       end,
       title,
-      extendedProps: { description, userName, userid, noOfPeople },
+      extendedProps: { description, userName, userid, noOfPeople, typeID },
     } = event;
     this.setState({
       modalData: {
@@ -149,6 +113,31 @@ class Calendar extends React.Component {
         userid,
         readOnly: true,
         noOfPeople,
+        typeID,
+      },
+    });
+    this.showModal();
+  };
+
+  resourcesFunc = ({ start }, successCallback, failureCallback) => {
+    const { rooms } = this.state;
+    successCallback(rooms.map((room) => ({ id: room.id, title: room.name })));
+
+    this.fetchRoomEvent(moment(start).format('YYYY-MM-DD')).catch(
+      failureCallback
+    );
+  };
+
+  handleDateSelect = ({ resource: { id: roomId }, start, end }) => {
+    this.setState({
+      modalData: {
+        roomId,
+        start,
+        end,
+        title: '',
+        description: '',
+        readOnly: false,
+        noOfPeople: null,
       },
     });
     this.showModal();
@@ -168,6 +157,7 @@ class Calendar extends React.Component {
     const { loading } = this.state;
     const {
       rooms,
+      types,
       events,
       visible,
       modalData,
@@ -190,6 +180,7 @@ class Calendar extends React.Component {
             maxTime={maxTime}
             minTime={minTime}
             hiddenDays={hiddenDays}
+            types={types}
           />
         )}
 
@@ -227,7 +218,7 @@ class Calendar extends React.Component {
           customButtons={{
             myCustomButton: {
               text: 'Book Your Room',
-              click: this.bookRoom,
+              click: this.clearData,
             },
           }}
           header={{

client/src/components/DayView/functions.js

@@ -21,4 +21,37 @@ export const getBusinessHours = (component, message) => {
     });
 };
 
-export const fetchRoomName = () => {};
+export const getBookingTypes = (component, message) => {
+  component.setState({ loading: true });
+  fetch('/api/v1/bookingTypes')
+    .then((res) => {
+      if (!res.ok) {
+        message.error('could not fetch data');
+        throw res.statusText;
+      }
+      return res.json();
+    })
+    .then((results) => {
+      const resultsWithKey = results.map((row) => ({ key: row.id, ...row }));
+      component.setState({ loading: false, types: resultsWithKey });
+    })
+    .catch(() => {
+      component.setState({ loading: false });
+    });
+};
+
+export const fetchRoomName = (component, message) =>
+  fetch(`/api/v1/rooms`)
+    .then((res) => {
+      if (!res.ok) {
+        res.json().then(({ message: msg }) => message.error(msg));
+        throw res.statusText;
+      }
+      return res.json();
+    })
+    .then((results) => {
+      component.setState({ rooms: results });
+    })
+    .catch((err) => {
+      message.error(err);
+    });

client/src/components/Form/AddType/index.js

@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react';
+import { message, Modal, Form, Input } from 'antd';
+import PropTypes from 'prop-types';
+import { SliderPicker } from 'react-color';
+
+const onModalOk = (form, updateID, onUpdate, onCreate) => {
+  form
+    .validateFields()
+    .then((values) => {
+      if (updateID > 0) onUpdate({ id: updateID, ...values });
+      else onCreate(values);
+    })
+    .then(() => {
+      form.resetFields();
+      form.setFieldsValue({ color: '', category: '' });
+    })
+    .catch((error) => message.error(error));
+};
+
+function AddType({
+  visible,
+  onCreate,
+  onCancel,
+  onUpdate,
+  updateID,
+  category,
+  color,
+}) {
+  const [colorSlide, setColorSlide] = useState('');
+  const [form] = Form.useForm();
+
+  const handleChangeComplete = (result) => {
+    setColorSlide(result.hex);
+    form.setFieldsValue({
+      color: result.hex,
+    });
+  };
+  useEffect(() => form.resetFields(), [form, color, category]);
+
+  return (
+    <Modal
+      visible={visible}
+      title="Create a new type"
+      okText={updateID > 0 ? 'Update' : 'Create'}
+      cancelText="Cancel"
+      onCancel={onCancel}
+      onOk={() => {
+        onModalOk(form, updateID, onUpdate, onCreate);
+        setColorSlide('');
+      }}
+    >
+      <Form form={form} initialValues={{ category, color }}>
+        <Form.Item
+          name="category"
+          label="Booking Type"
+          rules={[
+            {
+              required: true,
+              message: 'Booking Type required',
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="color"
+          label="Type Color"
+          rules={[
+            {
+              required: true,
+              message: 'Booking color required',
+            },
+          ]}
+        >
+          <SliderPicker
+            color={colorSlide || color}
+            onChange={handleChangeComplete}
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+
+AddType.propTypes = {
+  visible: PropTypes.bool.isRequired,
+  updateID: PropTypes.number.isRequired,
+  category: PropTypes.string.isRequired,
+  color: PropTypes.string.isRequired,
+  onCreate: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+};
+export default AddType;