@agilemotion/oui-react-js 1.3.8 → 1.4.0

package/dist/components/Calendar.js

@@ -0,0 +1,442 @@
+"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 _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
+
+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"));
+
+var _Calendar = _interopRequireDefault(require("../js/Calendar"));
+
+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 = props => {
+  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 + _ApplicationManager.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(props.viewId, parsedConfig);
+  }, []);
+
+  const toDateTimeString = date => {
+    let dateStr = selectedEvent.start.toLocaleDateString();
+    let timeStrTokens = selectedEvent.start.toLocaleTimeString().split(':');
+    return dateStr + ' ' + timeStrTokens[0] + ':' + timeStrTokens[1];
+  };
+
+  const getFormObject = event => {
+    return _Calendar.default.calendarEventToFormObject(event);
+  };
+
+  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: {
+        borderRadius: '4px',
+        marginRight: '2px'
+      },
+      onClick: e => {
+        setOpen(false);
+        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,
+    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;

package/dist/components/Calender.css

@@ -0,0 +1,244 @@
+.no-margin {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.no-padding {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.app-calendar,
+.fc-view-harness {
+  margin: unset !important;
+}
+
+.fc-header-toolbar button:hover {
+  transform: scale(1);
+}
+
+.event-popup {
+  background-color: #ffffff;
+  height: 100%;
+  width: 100%;
+  padding: 8px;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.fc-popover-body .fc-event-time,
+.fc-popover-body .fc-event-title {
+  color: #01476C;
+}
+
+.event-popup .pointer {
+  width: 100%;
+  height: 8px;
+}
+
+.event-popup .top-toolbar {
+  width: 100%;
+  height: 48px;
+}
+
+.event-popup .top-toolbar .left {
+  width: 50%;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.event-popup .top-toolbar .right {
+  width: 50%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.event-popup .summary {
+  width: 376px;
+  height: calc(100% - 72px);
+  padding: 16px;
+}
+
+.event-popup .summary .title {
+  font-size: 20px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.event-popup .summary .organiser {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.event-button {
+  width: 50%;
+  border-radius: 4px;
+  background-color: #01476C;
+  color: #ffffff;
+}
+
+.fc-button-group .fc-toolbar-title {
+  padding: 8px;
+}
+
+.fc-direction-ltr .fc-list-day-text,
+.fc-event-main-frame,
+.fc-header-toolbar .fc-toolbar-chunk:nth-of-type(3) .fc-button-group button {
+  border-color: #dfe8ed !important;
+  color: #01476C !important;
+}
+
+.fc .fc-daygrid-event-harness {
+  margin: 0 8px 0 4px;
+}
+
+.fc .fc-daygrid-event-harness .fc-event:hover {
+  background-color: #dfe8ed !important;
+  border-color: #dfe8ed !important;
+}
+
+.fc .fc-toolbar .fc-button-group .fc-button-primary:not(.fc-prev-button):not(.fc-next-button).fc-button-active,
+.fc .fc-toolbar .fc-button-group .fc-button-primary:not(.fc-prev-button):not(.fc-next-button):hover {
+  border-color: #dfe8ed !important;
+  color: #01476C !important;
+  background-color: rgba(1, 71, 108, 0.2) !important;
+}
+
+.fc .fc-toolbar .fc-next-button .fc-icon,
+.fc .fc-toolbar .fc-prev-button .fc-icon {
+  border-color: #dfe8ed !important;
+  color: #01476C !important;
+  background-color: transparent !important;
+}
+
+.fc .fc-button-primary {
+  background-color: unset !important;
+  border-color: unset !important;
+}
+
+.fc-daygrid-day-top a {
+  color: #6e6b7b;
+}
+
+.fc-daygrid-day-top a:hover {
+  color: #4BB543;
+}
+
+.app-calendar .fc-day-past .fc-daygrid-day-number,
+.app-calendar .fc-day-future .fc-daygrid-day-number {
+  color: #6e6b7b !important;
+}
+
+.fc .fc-day-other .fc-daygrid-day-top,
+.fc .fc-day-other .fc-daygrid-day-botton {
+  opacity: .5;
+}
+
+.fc-button:hover {
+}
+
+.fc-v-event {
+  display: block;
+  border: none !important;
+  background-color: unset !important;
+}
+
+.modal-title {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 28px;
+  line-height: 36px;
+  color: #3E435D;
+}
+
+button:focus {
+  outline: none !important;
+}
+
+.fc-daygrid-day-events a {
+  color: #01476C;
+  border: 4px solid #dfe8ed;
+  background-color: #dfe8ed !important;
+  border-radius: 4px !important;
+}
+
+.fc-daygrid-body table {
+  border-bottom: 1px solid #ebe9f1 !important;
+}
+
+.fc-view-harness,
+.fc-view-harness-active {
+  min-height: unset !important;
+}
+
+.fc-daygrid-dot-event .fc-event-title {
+  font-weight: 500 !important;
+}
+
+.fc .fc-daygrid-event-harness .fc-event {
+  width: 100%;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background-color: #dfe8ed !important;
+  font-weight: 500 !important;
+}
+
+
+.fc-daygrid-day-events a:hover,
+.fc-daygrid-day-events a:focus {
+  color: #01476C !important;
+  border-color: #dfe8ed !important;
+}
+
+.fc-daygrid-event-dot {
+  border-color: #01476C;
+  display: none;
+}
+
+.fc-daygrid-event-dot:hover {
+  border-color: #dfe8ed;
+  display: none;
+}
+
+.fc-daygrid-day-events a:hover .fc-daygrid-event-dot {
+  border-color: #ffffff !important;
+}
+
+.fc-sidebarToggle-button {
+  display: none !important;
+}
+
+.fc .fc-list-event-dot {
+  border: 5px solid #dfe8ed !important;
+}
+
+.fc-scrollgrid-section-body table {
+  background-repeat: no-repeat;
+  background-size: 28% auto;
+  background-attachment: fixed;
+  background-position: center;
+}
+
+.fc .fc-daygrid-day.fc-day-today {
+  background-color: rgba(234, 223, 213, .5) !important;
+}
+
+.app-calendar .fc-day-past .fc-daygrid-day-number {
+  color: #000000
+}
+
+.fc .fc-day-other .fc-daygrid-day-top, .fc .fc-day-other .fc-daygrid-day-botton {
+  opacity: .5
+}
+
+/*
+
+.fc-day-past {
+  color: #6e6b7b
+}
+*/