@agilemotion/oui-react-js 1.3.8 → 1.3.9

package/dist/components/Calendar.js

@@ -0,0 +1,478 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Utils = _interopRequireDefault(require("../Utils"));
+
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+
+var _react2 = _interopRequireDefault(require("@fullcalendar/react"));
+
+var _list = _interopRequireDefault(require("@fullcalendar/list"));
+
+var _rrule = _interopRequireDefault(require("@fullcalendar/rrule"));
+
+var _daygrid = _interopRequireDefault(require("@fullcalendar/daygrid"));
+
+var _timegrid = _interopRequireDefault(require("@fullcalendar/timegrid"));
+
+var _interaction = _interopRequireDefault(require("@fullcalendar/interaction"));
+
+require("./Calender.css");
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _reactHotToast = _interopRequireDefault(require("react-hot-toast"));
+
+var _Event = _interopRequireDefault(require("../event/Event"));
+
+var _EventType = _interopRequireDefault(require("../event/EventType"));
+
+var _ApplicationContext = _interopRequireDefault(require("../ApplicationContext"));
+
+var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _Icon = _interopRequireDefault(require("./Icon"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const eventTemplate = {
+  id: '',
+  title: '',
+  start: '',
+  end: '',
+  allDay: false,
+  extendedProps: {
+    description: '',
+    attendees: [{
+      id: '',
+      identifier: '',
+      name: '',
+      optional: false
+    }],
+    schedule: {
+      id: '',
+      startDate: '',
+      endDate: '',
+      startTime: '',
+      endTime: ''
+    },
+    locations: [{
+      id: '',
+      name: ''
+    }]
+  }
+};
+
+const status = response => {
+  if (response.ok) {
+    return Promise.resolve(response);
+  } else {
+    let error = new Error(response.statusText);
+    error.code = response.status;
+    return Promise.reject(error);
+  }
+};
+
+const json = response => {
+  return response.text();
+};
+
+const location = window.location.protocol + "//" + window.location.hostname;
+
+const Calendar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    isRtl
+  } = props;
+  const [events, setEvents] = (0, _react.useState)([]);
+  const [loading, setLoading] = (0, _react.useState)(true);
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [selectedEvent, setSelectedEvent] = (0, _react.useState)(null);
+  const calendarRef = (0, _react.useRef)(null);
+  const dialogRef = (0, _react.useRef)(null);
+  const [dialogTop, setDialogTop] = (0, _react.useState)(null);
+  const [dialogLeft, setDialogLeft] = (0, _react.useState)(null);
+  const StyledDialog = (0, _withStyles.default)({
+    root: {
+      pointerEvents: "none"
+    },
+    paper: {
+      pointerEvents: 'auto',
+      width: '400px',
+      height: '228px',
+      minWidth: '400px',
+      padding: '0',
+      overflow: 'hidden',
+      position: 'absolute',
+      top: dialogTop,
+      left: dialogLeft,
+      borderRadius: '4px'
+    }
+  })(props => /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({
+    hideBackdrop: true
+  }, props)));
+
+  const loadEvents = (track = true) => {
+    fetch(encodeURI(location + _ApplicationContext.default.getContextRoot() + '/calendar/api/v1/event/list'), {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + sessionStorage.getItem("accessToken"),
+        'idToken': sessionStorage.getItem("idToken")
+      }
+    }).then(status).then(json).then(response => {
+      setEvents(JSON.parse(response));
+    }).catch(ignored => {});
+  };
+
+  (0, _react.useEffect)(() => {
+    loadEvents();
+  }, []);
+
+  const calenderScrollListener = () => {
+    setOpen(false);
+  };
+
+  const calendarOptions = {
+    events: events,
+    plugins: [_interaction.default, _daygrid.default, _timegrid.default, _list.default, _rrule.default],
+    initialView: 'dayGridMonth',
+    headerToolbar: {
+      start: 'sidebarToggle, prev,next, title',
+      end: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
+    },
+
+    /*
+      Enable dragging and resizing event
+      ? Docs: https://fullcalendar.io/docs/editable
+    */
+    editable: true,
+    height: '100%',
+    stickyHeaderDates: true,
+    eventTimeFormat: {
+      // like '14:30:00'
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false
+    },
+
+    /*
+      Enable resizing event from start
+      ? Docs: https://fullcalendar.io/docs/eventResizableFromStart
+    */
+    eventResizableFromStart: true,
+
+    /*
+      Automatically scroll the scroll-containers during event drag-and-drop and date selecting
+      ? Docs: https://fullcalendar.io/docs/dragScroll
+    */
+    dragScroll: true,
+
+    /*
+      Max number of events within a given day
+      ? Docs: https://fullcalendar.io/docs/dayMaxEvents
+    */
+    dayMaxEvents: 2,
+
+    /*
+      Determines if day names and week names are clickable
+      ? Docs: https://fullcalendar.io/docs/navLinks
+    */
+    navLinks: true,
+
+    eventClassNames({
+      event: calendarEvent
+    }) {
+      // eslint-disable-next-line no-underscore-dangle
+      const colorName = '#945c33';
+      return ["bg-light-".concat(colorName)];
+    },
+
+    viewDidMount() {
+      setOpen(false);
+    },
+
+    eventClick({
+      el: el,
+      event: event
+    }) {
+      // * Only grab required field otherwise it goes in infinity loop
+      // ! Always grab all fields rendered by form (even if it get `undefined`) otherwise due to Vue3/Composition API you might get: "object is not extensible"
+      // event.value = grabEventDataFromEventApi(clickedEvent)
+      // eslint-disable-next-line no-use-before-define
+      // isAddNewEventSidebarActive.value = true
+      setOpen(true);
+      var rect = el.getBoundingClientRect();
+      let topOffset = rect.bottom + 250 > document.body.getBoundingClientRect().bottom ? -1 * (rect.bottom + 250 - document.body.getBoundingClientRect().bottom) : 8;
+      let leftOffset = rect.right + 400 > document.body.getBoundingClientRect().right ? rect.right + 400 - document.body.getBoundingClientRect().right : 64;
+      setDialogTop(rect.top + topOffset + 'px');
+      setDialogLeft(rect.left - leftOffset + 'px');
+      setSelectedEvent(event);
+      let elementsByClassName = document.getElementsByClassName('fc-scroller-liquid-absolute');
+
+      if (elementsByClassName && elementsByClassName.length > 0) {
+        elementsByClassName[0].removeEventListener("scroll", calenderScrollListener);
+        elementsByClassName[0].addEventListener('scroll', calenderScrollListener);
+      }
+
+      elementsByClassName = document.getElementsByClassName('fc-scroller-liquid');
+
+      if (elementsByClassName && elementsByClassName.length > 0) {
+        elementsByClassName[0].removeEventListener("scroll", calenderScrollListener);
+        elementsByClassName[0].addEventListener('scroll', calenderScrollListener);
+      }
+    },
+
+    dateClick(info) {
+      let date = new Date(info.dateStr);
+      let timeDate = new Date();
+      let startTime = (0, _moment.default)(info.dateStr, 'ddd MMM D YYYY HH:mm:ss ZZ');
+      timeDate.setHours(timeDate.getHours() + 1);
+      startTime.set({
+        h: timeDate.getHours(),
+        m: 0
+      });
+      let endTime = (0, _moment.default)(info.dateStr, 'ddd MMM D YYYY HH:mm:ss ZZ');
+      timeDate.setHours(timeDate.getHours() + 1);
+      endTime.set({
+        h: timeDate.getHours(),
+        m: 0
+      });
+      const calendarEvent = { ...eventTemplate,
+        schedule: {
+          startDate: date,
+          endDate: date,
+          startTime: startTime.toDate(),
+          endTime: endTime.toDate(),
+          recurringStartDate: date,
+          recurringEndDate: date
+        },
+        eventType: _Utils.default.getComponentAttribute(props.config, 'eventType', 'TRAINING')
+      };
+
+      if (_Utils.default.isStringEmpty(calendarEvent.id)) {
+        calendarEvent.id = null;
+      }
+
+      if (!open && (0, _moment.default)(new Date()).startOf('day') <= (0, _moment.default)(date).startOf('day')) {
+        console.log("CALENDAR DATE CLICK");
+        let event = new _Event.default(props.handle, props.viewId, calendarEvent);
+
+        _Observable.default.fireEvent(_EventType.default.CALENDAR_DATE_CLICK, event);
+      }
+    },
+
+    /*
+      Handle event drop (Also include dragged event)
+      ? Docs: https://fullcalendar.io/docs/eventDrop
+      ? We can use `eventDragStop` but it doesn't return updated event so we have to use `eventDrop` which returns updated event
+    */
+    eventDrop({
+      event: droppedEvent
+    }) {
+      //dispatch(updateEvent(droppedEvent));
+      _reactHotToast.default.success('Event Updated');
+    },
+
+    /*
+      Handle event resize
+      ? Docs: https://fullcalendar.io/docs/eventResize
+    */
+    eventResize({
+      event: resizedEvent
+    }) {
+      //dispatch(updateEvent(resizedEvent));
+      _reactHotToast.default.success('Event Updated');
+    },
+
+    /*
+      Handle event mouse enter
+      ? Docs: https://fullcalendar.io/docs/eventMouseEnter
+    */
+    eventMouseEnter({
+      el: el,
+      event: event
+    }) {},
+
+    /*
+      Handle event mouse enter
+      ? Docs: https://fullcalendar.io/docs/eventMouseEnter
+    */
+    eventMouseLeave({
+      el: el
+    }) {},
+
+    ref: calendarRef,
+    // Get direction from app state (store)
+    direction: isRtl ? 'rtl' : 'ltr'
+  };
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+    let eventHandlingConfig = _Utils.default.isNull(parsedConfig.eventHandlingConfig) ? {} : parsedConfig.eventHandlingConfig;
+    eventHandlingConfig.subscriptions = _Utils.default.isNull(eventHandlingConfig.subscriptions) ? [] : eventHandlingConfig.subscriptions;
+
+    _Observable.default.addSubscriptions(eventHandlingConfig, props.handle, props.viewId);
+
+    _Observable.default.addSystemSubscriptions(parsedConfig);
+  }, []);
+
+  const toDateTimeString = date => {
+    let dateStr = selectedEvent.start.toLocaleDateString();
+    let timeStrTokens = selectedEvent.start.toLocaleTimeString().split(':');
+    return dateStr + ' ' + timeStrTokens[0] + ':' + timeStrTokens[1];
+  };
+
+  const getEndDate = event => {
+    if (event.end) {
+      return new Date(event.end);
+    } else if (event.extendedProps.schedule.rrule) {
+      let startDate = new Date(event.start);
+      return (0, _moment.default)(startDate).add("minutes", event.extendedProps.duration).toDate();
+    }
+
+    new Date();
+  };
+
+  const getFormObject = event => {
+    let end = getEndDate(event);
+    return {
+      id: event.id,
+      title: event.title,
+      locations: event.extendedProps.locations,
+      description: event.extendedProps.description,
+      status: event.extendedProps.status,
+      host: event.extendedProps.host,
+      attendees: event.extendedProps.attendees,
+      privacyType: event.extendedProps.privacyType,
+      documents: event.extendedProps.documents,
+      schedule: {
+        startDate: event.start,
+        startTime: event.start,
+        endDate: end,
+        endTime: end,
+        scheduleId: event.extendedProps.schedule.id,
+        recurringFreq: event.extendedProps.schedule.rrule.freq,
+        recurringInterval: event.extendedProps.schedule.rrule.interval,
+        recurringDtstart: new Date(event.extendedProps.schedule.rrule.dtstart),
+        recurringUntil: new Date(event.extendedProps.schedule.rrule.until),
+        recurringByweekday: event.extendedProps.schedule.rrule.byweekday,
+        recurringBysetpos: event.extendedProps.schedule.rrule.bysetpos,
+        recurringBymonthday: event.extendedProps.schedule.rrule.bymonthday
+      },
+      askToJoin: _Utils.default.isNull(event.extendedProps.askToJoin) ? false : event.extendedProps.askToJoin
+    };
+  };
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      getChildren: () => {
+        return [];
+      }
+    };
+  };
+
+  const createEventPopup = el => {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, selectedEvent && /*#__PURE__*/_react.default.createElement("div", {
+      className: 'event-popup'
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: 'top-toolbar row no-padding no-margin'
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: 'left col no-padding no-margin'
+    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      onClick: () => setOpen(false)
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'CLOSE',
+      color: '#01476C'
+    }))), /*#__PURE__*/_react.default.createElement("div", {
+      className: 'right col no-padding no-margin'
+    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      onClick: () => {
+        console.log("SELECTED EVENT : ", getFormObject(selectedEvent));
+        let event = new _Event.default(props.handle, props.viewId, getFormObject(selectedEvent));
+
+        _Observable.default.fireEvent(_EventType.default.CALENDAR_DATE_CLICK, event);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'MAXIMIZE',
+      color: '#01476C'
+    })))), /*#__PURE__*/_react.default.createElement("div", {
+      className: 'summary'
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: 'modal-title'
+    }, selectedEvent.title), /*#__PURE__*/_react.default.createElement("div", null, toDateTimeString(selectedEvent.start)), /*#__PURE__*/_react.default.createElement("div", {
+      className: 'organiser'
+    }, "Organiser: ", selectedEvent.extendedProps.host.name), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginTop: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      variant: 'contained',
+      size: "large",
+      color: "primary",
+      style: {
+        color: '#ffffff',
+        borderRadius: '4px',
+        marginRight: '2px'
+      },
+      onClick: e => {
+        let event = new _Event.default(props.handle, props.viewId, getFormObject(selectedEvent));
+
+        _Observable.default.fireEvent(_EventType.default.CALENDAR_EVENT_START, event);
+      }
+    }, "JOIN")))));
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: props.className,
+    ref: ref,
+    style: _Utils.default.mergeStyles({
+      padding: '16px 0',
+      margin: '0',
+      overflow: 'auto',
+      width: '100%',
+      height: '100%',
+      maxHeight: '100%'
+    }, props.config)
+  }, /*#__PURE__*/_react.default.createElement(_react2.default, calendarOptions), ' ', /*#__PURE__*/_react.default.createElement(StyledDialog, {
+    open: open,
+    ref: dialogRef,
+    onClose: () => {
+      setOpen(false);
+    },
+    "aria-labelledby": "alert-dialog-title",
+    "aria-describedby": "alert-dialog-description",
+    "aria-modal": false,
+    fullWidth: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'w-100 h-100'
+  }, createEventPopup())));
+}));
+
+var _default = Calendar;
+exports.default = _default;