@pinuts/bsr-uikit-relaunch/dist/items/eventWizardItems/EventDatePicker/CalendarEventPicker.js

BSR UI-KIT Relaunch

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactBigCalendar = require("react-big-calendar");
var PropTypes = _interopRequireWildcard(require("prop-types"));
var _luxon = require("luxon");
var _formBuilder = require("@pinuts/form-builder");
var _CalendarToolbar = _interopRequireDefault(require("./CalendarToolbar.jsx"));
var _CalendarEventRenderer = _interopRequireDefault(require("./CalendarEventRenderer.jsx"));
var _luxonLocalizer = _interopRequireDefault(require("./luxonLocalizer.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// bookablesForBezirk={bookablesForBezirk}
// infoMonthlyContingent={infoMonthlyContingent}
// unlimitedContingent={unlimitedContingent}

const {
  useFormikContext
} = _formBuilder.formik;
_luxon.Settings.defaultLocale = 'de';
const localizer = (0, _luxonLocalizer.default)(_luxon.DateTime, {
  firstDayOfWeek: 0
});
const CalendarEventPicker = _ref => {
  let {
    id,
    eventdates,
    bookablesForBezirk,
    infoMonthlyContingent,
    unlimitedContingent
  } = _ref;
  const isKieztage = !!bookablesForBezirk;
  const [date, setDate] = (0, _react.useState)(eventdates?.[0]?.timestamp ? new Date(eventdates[0].timestamp) : new Date());
  const month = `${new Date(date).getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
  const availableDates = bookablesForBezirk?.find(elem => elem.month === month)?.availableDates || 0;
  const {
    values: {
      eventdate,
      blockedVerantwortlicher = {},
      events = {}
    },
    setFieldValue
  } = useFormikContext();
  const selectedEventdate = isKieztage ? eventdate : events[id].eventdate;
  const selectedEventdateObj = isKieztage ? new Date(selectedEventdate) : null;
  const onSelectDate = event => {
    const fieldId = isKieztage ? id : `events.${id}.eventdate`;
    const value = isKieztage ? event.start : event.eventdate;
    setFieldValue(fieldId, value);
  };
  const parsedDates = eventdates.map(event => {
    const subtext = event.subtext || `${_luxon.DateTime.fromISO(event.timestamp).toLocaleString(_luxon.DateTime.TIME_24_SIMPLE)} Uhr`;
    const dateToPick = {
      ...event,
      title: subtext,
      subtext: subtext,
      onSelectDate: onSelectDate
    };
    if (isKieztage) {
      dateToPick.start = new Date(event.start);
      dateToPick.end = new Date(event.end);
      dateToPick.allDay = false;
    } else {
      dateToPick.start = new Date(event.timestamp);
    }
    return dateToPick;
  });
  const earliestDate = parsedDates[0]?.start;
  const onNavigate = (0, _react.useCallback)(newDate => {
    return setDate(newDate);
  }, [setDate]);

  // filter dates by verantwortlicher - if an event date with the same verantwortlicher has been  booked on the same day already, then remove that event date from parsedDates
  const filteredDates = isKieztage ? parsedDates : parsedDates.filter(event => {
    if (!event.verantwortlicher) {
      return true;
    }
    const date = event.timestamp.split('T')[0];
    return !blockedVerantwortlicher[date]?.includes(event.verantwortlicher);
  });
  const selectedEventItem = isKieztage ? filteredDates.find(event => event.start.getTime() === selectedEventdateObj.getTime()) : filteredDates.find(event => event.eventdate === selectedEventdate);
  const eventPropGetter = (0, _react.useCallback)(event => {
    const isFullyAvailable = event.tuv && event.infostand;
    const eventStyle = {
      borderWidth: '2px'
    };
    return {
      className: isFullyAvailable ? 'isFullyAvailable' : 'isPartiallyAvailable',
      style: eventStyle
    };
  }, []);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "mt-3 bg-secondary rbc-wrapper"
  }, /*#__PURE__*/_react.default.createElement(_reactBigCalendar.Calendar, {
    date: date,
    localizer: localizer,
    events: filteredDates,
    selectable: true,
    selected: selectedEventItem
    // onSelectEvent={event => onSelectDate(event)}
    ,
    startAccessor: "start",
    endAccessor: "start",
    style: {
      height: 480
    },
    views: [_reactBigCalendar.Views.MONTH, _reactBigCalendar.Views.DAY],
    components: {
      event: _CalendarEventRenderer.default,
      toolbar: _CalendarToolbar.default
    },
    drilldownView: null,
    defaultDate: earliestDate,
    onNavigate: onNavigate,
    eventPropGetter: isKieztage ? eventPropGetter : null
  })), isKieztage && /*#__PURE__*/_react.default.createElement("div", {
    className: "mt-3 bg-secondary rbc-wrapper"
  }, /*#__PURE__*/_react.default.createElement("i", {
    className: "pi-icon pi-icon-calendar mr-2"
  }), availableDates === -1 ? unlimitedContingent : infoMonthlyContingent + ' ' + availableDates));
};
CalendarEventPicker.propTypes = {
  id: PropTypes.string,
  eventdates: PropTypes.array,
  bookablesForBezirk: PropTypes.array,
  infoMonthlyContingent: PropTypes.number,
  unlimitedContingent: PropTypes.string
};
var _default = exports.default = CalendarEventPicker;