sapp-common-package-test-final 1.0.12 → 1.0.13

package/dist/components/SAPPCalendar/LMSWeeklyCalendar/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IWeeklyCalendarProps } from '../WeeklyCalendar/WeeklyCalendar';
+export default function LMSModeWeeklyCalendar({ startDate, endDate, events, norms, showWeeklyNorm, onOpenDetail, onOpenCreate, onEventDetail, loading }: IWeeklyCalendarProps): React.JSX.Element;

package/dist/components/SAPPCalendar/WeeklyCalendar/WeeklyCalendar.d.ts

@@ -1,16 +1,18 @@
 import { Dayjs } from 'dayjs';
 import React from 'react';
-import { IEvent, INorm } from '../../../types';
-interface IWeeklyCalendarProps {
+import { ICell, IEvent, INorm } from '../../../types';
+export interface IWeeklyCalendarProps {
     startDate: Dayjs;
     endDate: Dayjs;
     events: IEvent[];
     norms: INorm[];
-    showWeeklyNorm: boolean;
+    showWeeklyNorm?: boolean;
     onOpenDetail: (date: Date, events: IEvent[]) => void;
     onOpenCreate: (date: Date) => void;
     onEventDetail?: (event: IEvent) => void;
     loading?: boolean;
 }
+export declare const getEventAllDay: (events: IEvent[], targetDate: Dayjs) => Record<"Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday", ICell>;
+export declare const getEventsOfDay: (events: IEvent[], targetHour: Dayjs) => Record<"Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday", ICell>;
 declare const WeeklyCalendar: ({ startDate, endDate, events, norms, showWeeklyNorm, onOpenDetail, onOpenCreate, onEventDetail, loading }: IWeeklyCalendarProps) => React.JSX.Element;
 export default WeeklyCalendar;

package/dist/index.css

@@ -10,6 +10,10 @@
   cursor: pointer
 }
 
+._uCXxT {
+  resize: both
+}
+
 ._3EfQZ {
   border-radius: 0px
 }
@@ -1005,12 +1009,13 @@ div._1dZBN {
 @media screen and (max-width: 1024px) {
   ._1K0QG {
     position: absolute;
-    top: 5%;
+    top: 10%;
     z-index: 999;
     height: 100%;
     overflow: auto;
     --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    box-shadow: 0px 2px 4px 0px #70707014
   }
 }

package/dist/index.js

@@ -60,6 +60,7 @@ var useEffectAfterMounted = function useEffectAfterMounted(callback, dependencie
   }, dependencies);
 };
 
+var HOURS_PER_DAY = 24;
 var MINUTES_PER_HOUR = 60;
 var TIME_FORMAT = 'HH:mm';
 var DAYS_OF_WEEK;
@@ -411,7 +412,7 @@ var HiddenEyeIcon = function HiddenEyeIcon() {
   }));
 };
 
-var styles = {"flex":"_2hGgU","transform":"_3-Pu9","cursor-pointer":"_2Mcv6","rounded-none":"_3EfQZ","border-gray-4":"_3-NVJ","bg-button":"_3-gs3","bg-info/10":"_2ENMR","bg-white":"_rF-HF","!text-error":"_3mBZd","text-black":"_Irb_H","text-gray-600":"_1pL5w","text-info":"_NLvfI","text-secondary-text":"_H-zEU","filter":"_p0OEu","sapp-calendar":"_18t93","btn":"_1oiD_","icon":"_-E7rn","btn-default":"_3WrnL","btn-primary":"_2-qBL","event-info":"_xYqjb","event-warning":"_1oq3N","event-success":"_1hTMm","event-error":"_1hEJk","event-default":"_8FWXy","sapp-calendar__container":"_102cL","header-calendar":"_3Yvs5","header-calendar__nav":"_18m93","header-calendar__date-picker":"_2GTYD","header-calendar__title":"_35LQ0","header-calendar__controls":"_FqVqb","header-calendar__divider":"_3kHog","monthly-calendar":"_2NDGW","weekly-calendar":"_1QrJs","monthly-calendar__title":"_3Tsy4","monthly-calendar__title-active":"_1Dyjm","weekly-norm__cell":"_sGK9m","weekly-norm__value":"_1Jsb-","monthly-calendar__cell":"_2hVZ4","monthly-calendar__cell--active":"_1uenJ","calendar-tooltip":"_2Uo1f","monthly-event__title":"_2gsg7","monthly-event__date":"_2GtPn","weekly-calendar__title":"_5WuQ8","weekly-calendar__cell":"_3lPkV","weekly-event":"_hnHem","weekly-event__title":"_21a0T","weekly-event__date":"_PiKmX","weekly-event--collapse":"_1pvXT","btn-lms-default":"_1GA3p","text-lms-primary":"_1gLzS","select-mode":"_12I9I","ant-select-dropdown-placement-bottomLeft":"_1ZvuX","header-calendar_filter":"_1fd_Y","lms-calendar__tablet":"_1sVO3"};
+var styles = {"flex":"_2hGgU","transform":"_3-Pu9","cursor-pointer":"_2Mcv6","resize":"_uCXxT","rounded-none":"_3EfQZ","border-gray-4":"_3-NVJ","bg-button":"_3-gs3","bg-info/10":"_2ENMR","bg-white":"_rF-HF","!text-error":"_3mBZd","text-black":"_Irb_H","text-gray-600":"_1pL5w","text-info":"_NLvfI","text-secondary-text":"_H-zEU","filter":"_p0OEu","sapp-calendar":"_18t93","btn":"_1oiD_","icon":"_-E7rn","btn-default":"_3WrnL","btn-primary":"_2-qBL","event-info":"_xYqjb","event-warning":"_1oq3N","event-success":"_1hTMm","event-error":"_1hEJk","event-default":"_8FWXy","sapp-calendar__container":"_102cL","header-calendar":"_3Yvs5","header-calendar__nav":"_18m93","header-calendar__date-picker":"_2GTYD","header-calendar__title":"_35LQ0","header-calendar__controls":"_FqVqb","header-calendar__divider":"_3kHog","monthly-calendar":"_2NDGW","weekly-calendar":"_1QrJs","monthly-calendar__title":"_3Tsy4","monthly-calendar__title-active":"_1Dyjm","weekly-norm__cell":"_sGK9m","weekly-norm__value":"_1Jsb-","monthly-calendar__cell":"_2hVZ4","monthly-calendar__cell--active":"_1uenJ","calendar-tooltip":"_2Uo1f","monthly-event__title":"_2gsg7","monthly-event__date":"_2GtPn","weekly-calendar__title":"_5WuQ8","weekly-calendar__cell":"_3lPkV","weekly-event":"_hnHem","weekly-event__title":"_21a0T","weekly-event__date":"_PiKmX","weekly-event--collapse":"_1pvXT","btn-lms-default":"_1GA3p","text-lms-primary":"_1gLzS","select-mode":"_12I9I","ant-select-dropdown-placement-bottomLeft":"_1ZvuX","header-calendar_filter":"_1fd_Y","lms-calendar__tablet":"_1sVO3"};
 
 var Button = function Button(_ref) {
   var _ref$type = _ref.type,
@@ -908,8 +909,224 @@ var MonthlyCalendar = function MonthlyCalendar(_ref) {
 };
 
 var _getIconEvent;
+var calculateBoxSize = function calculateBoxSize(startTime, endTime, isAllDay) {
+  if (isAllDay) {
+    return {
+      top: 10,
+      height: 50
+    };
+  }
+  var minutes = dayjs(startTime).minute();
+  var diffMinutes = dayjs(endTime).diff(startTime, 'minute', true);
+  return {
+    top: Math.floor(minutes / MINUTES_PER_HOUR * 100),
+    height: Math.floor(diffMinutes / MINUTES_PER_HOUR * 100)
+  };
+};
 var getIconEvent = (_getIconEvent = {}, _getIconEvent[EVENT_TYPES.TEACHING] = React__default.createElement(Book, null), _getIconEvent[EVENT_TYPES.BUSY] = React__default.createElement(CalendarDelete, null), _getIconEvent[EVENT_TYPES.TIME_OFF] = React__default.createElement(Star, null), _getIconEvent[EVENT_TYPES.OTHER] = React__default.createElement(CalendarAccept, null), _getIconEvent);
-var calculateBoxSize = function calculateBoxSize(startTime, endTime) {
+var MIN_HEIGHT_HIDE_DETAILS = 140;
+var MIN_HEIGHT_HIDE_ALL = 105;
+var WeeklyEvent = function WeeklyEvent(_ref) {
+  var event = _ref.event,
+    onOpenDetail = _ref.onOpenDetail,
+    onEventDetail = _ref.onEventDetail;
+  var _calculateBoxSize = calculateBoxSize(event.startDate, event.endDate, event.isAllDay),
+    top = _calculateBoxSize.top,
+    height = _calculateBoxSize.height;
+  var formattedDate = customDateFormat(event.startDate, TIME_FORMAT) + ' - ' + customDateFormat(event.endDate, TIME_FORMAT);
+  return React__default.createElement("div", {
+    className: styles["event-" + convertType[event.type]],
+    onClick: function onClick() {
+      onOpenDetail(dayjs(event.startDate).toDate(), [event]);
+      onEventDetail && onEventDetail(event);
+    },
+    style: {
+      top: top + "%",
+      height: height + "%",
+      zIndex: event.type === EVENT_TYPES.BUSY ? 2 : 1
+    }
+  }, React__default.createElement("div", {
+    className: clsx__default(styles['weekly-event'], height <= MIN_HEIGHT_HIDE_ALL && styles['weekly-event--collapse'])
+  }, React__default.createElement("div", {
+    className: styles.flex
+  }, getIconEvent[event.type]), React__default.createElement("div", {
+    className: clsx__default(height <= MIN_HEIGHT_HIDE_DETAILS && styles['weekly-event--collapse'])
+  }, React__default.createElement("div", {
+    className: styles['weekly-event__title']
+  }, React__default.createElement(CustomTooltip, {
+    title: event.title
+  }, event.title)), React__default.createElement("div", {
+    className: styles['weekly-event__date']
+  }, React__default.createElement(CustomTooltip, {
+    title: formattedDate
+  }, formattedDate)))));
+};
+
+var WeeklyCell = function WeeklyCell(_ref) {
+  var _events;
+  var events = _ref.events,
+    date = _ref.date,
+    onOpenDetail = _ref.onOpenDetail,
+    onOpenCreate = _ref.onOpenCreate,
+    onEventDetail = _ref.onEventDetail;
+  var isToday = dayjs().isSame(date, 'day');
+  var handleOpenCreateModal = function handleOpenCreateModal(e) {
+    if (e.target !== e.currentTarget) return;
+    onOpenCreate(dayjs(date).toDate());
+  };
+  events = (_events = events) === null || _events === void 0 ? void 0 : _events.sort(function (a, b) {
+    return a.type === EVENT_TYPES.BUSY && b.type !== EVENT_TYPES.BUSY ? 1 : -1;
+  });
+  var renderWeeklyEvent = React.useMemo(function () {
+    var _events2, _events3, _events4;
+    var isAllDay = (_events2 = events) === null || _events2 === void 0 ? void 0 : _events2.some(function (item) {
+      return item.isAllDay;
+    });
+    if (isAllDay && ((_events3 = events) === null || _events3 === void 0 ? void 0 : _events3.length) > 1) {
+      return React__default.createElement(React__default.Fragment, null, React__default.createElement(WeeklyEvent, {
+        event: events[0],
+        onOpenDetail: onOpenDetail,
+        onEventDetail: onEventDetail
+      }), React__default.createElement("div", {
+        className: styles['see-more']
+      }, React__default.createElement(CustomTooltip, {
+        placement: 'bottom',
+        title: React__default.createElement("div", {
+          className: styles['calendar-tooltip']
+        }, events.slice(1, events.length).map(function (event, index) {
+          return React__default.createElement(WeeklyEvent, {
+            event: event,
+            onOpenDetail: onOpenDetail,
+            onEventDetail: onEventDetail,
+            key: index + 1
+          });
+        }))
+      }, "+", Math.max(events.length - 1, 0), " More")));
+    }
+    return (_events4 = events) === null || _events4 === void 0 ? void 0 : _events4.map(function (event, index) {
+      return React__default.createElement(WeeklyEvent, {
+        key: index,
+        event: event,
+        onOpenDetail: onOpenDetail,
+        onEventDetail: onEventDetail
+      });
+    });
+  }, [events]);
+  return React__default.createElement("div", {
+    className: styles['weekly-calendar__cell'] + " " + (isToday ? styles['bg-info/10'] : styles['bg-white']),
+    onClick: handleOpenCreateModal
+  }, renderWeeklyEvent);
+};
+
+dayjs.extend(isBetween);
+var getEventAllDay = function getEventAllDay(events, targetDate) {
+  return daysOfWeekKeys.reduce(function (acc, day, index) {
+    var currentDate = targetDate.add(index, 'day');
+    acc[day] = {
+      events: events.reduce(function (filteredEvents, event) {
+        if (dayjs(event.startDate).isSame(currentDate.startOf('day')) && checkIsAllday(dayjs(event.startDate), dayjs(event.endDate))) {
+          filteredEvents.push(_extends({}, event, {
+            isAllDay: true
+          }));
+        }
+        return filteredEvents;
+      }, []),
+      date: currentDate
+    };
+    return acc;
+  }, {});
+};
+var getEventsOfDay = function getEventsOfDay(events, targetHour) {
+  return daysOfWeekKeys.reduce(function (acc, day, index) {
+    var currentDate = targetHour.add(index, 'day');
+    acc[day] = {
+      events: events.filter(function (event) {
+        return dayjs(event.startDate).isSame(currentDate, 'hour') && !checkIsAllday(dayjs(event.startDate), dayjs(event.endDate));
+      }),
+      date: currentDate
+    };
+    return acc;
+  }, {});
+};
+var WeeklyCalendar = function WeeklyCalendar(_ref) {
+  var startDate = _ref.startDate,
+    endDate = _ref.endDate,
+    events = _ref.events,
+    norms = _ref.norms,
+    showWeeklyNorm = _ref.showWeeklyNorm,
+    onOpenDetail = _ref.onOpenDetail,
+    onOpenCreate = _ref.onOpenCreate,
+    onEventDetail = _ref.onEventDetail,
+    loading = _ref.loading;
+  var getTableColumns = function getTableColumns() {
+    var _calculateNormOfWeek = calculateNormOfWeek(norms, events, startDate, endDate),
+      normOfWeek = _calculateNormOfWeek.normOfWeek,
+      totalNorm = _calculateNormOfWeek.totalNorm;
+    var hourColumn = {
+      title: React__default.createElement("div", {
+        className: styles['weekly-calendar__title']
+      }, showWeeklyNorm && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", null, "Weekly Norm"), React__default.createElement("div", {
+        className: clsx__default(normOfWeek > totalNorm && styles['!text-error'])
+      }, normOfWeek + "/" + totalNorm))),
+      dataIndex: 'hour',
+      key: 'hour',
+      width: 1,
+      render: function render(value) {
+        return React__default.createElement("div", null, value);
+      }
+    };
+    var dayColumns = Object.values(DAYS_OF_WEEK).map(function (day, index) {
+      return {
+        title: React__default.createElement("div", {
+          className: styles['weekly-calendar__title']
+        }, React__default.createElement("div", null, day.slice(0, 3)), React__default.createElement("div", null, dayjs(startDate).add(index, 'day').format('DD/MM'))),
+        dataIndex: day,
+        key: day,
+        render: function render(value) {
+          return React__default.createElement(WeeklyCell, {
+            key: index,
+            events: value.events,
+            date: value.date,
+            onOpenDetail: onOpenDetail,
+            onOpenCreate: onOpenCreate,
+            onEventDetail: onEventDetail
+          });
+        }
+      };
+    });
+    return [hourColumn].concat(dayColumns);
+  };
+  var getTableData = function getTableData() {
+    var data = [];
+    data.push(_extends({
+      id: -1,
+      hour: 'All day'
+    }, getEventAllDay(events, startDate)));
+    for (var i = 0; i < HOURS_PER_DAY; i++) {
+      var targetHour = dayjs(startDate).add(i, 'hour');
+      data.push(_extends({
+        id: i,
+        hour: targetHour.format('HH:mm')
+      }, getEventsOfDay(events, targetHour)));
+    }
+    return data;
+  };
+  return React__default.createElement(antd.Table, {
+    rowKey: function rowKey(record) {
+      return record.id;
+    },
+    columns: getTableColumns(),
+    dataSource: getTableData(),
+    pagination: false,
+    rowHoverable: false,
+    className: styles['weekly-calendar'],
+    loading: loading
+  });
+};
+
+var _getIconEvent$1;
+var getIconEvent$1 = (_getIconEvent$1 = {}, _getIconEvent$1[EVENT_TYPES.TEACHING] = React__default.createElement(Book, null), _getIconEvent$1[EVENT_TYPES.BUSY] = React__default.createElement(CalendarDelete, null), _getIconEvent$1[EVENT_TYPES.TIME_OFF] = React__default.createElement(Star, null), _getIconEvent$1[EVENT_TYPES.OTHER] = React__default.createElement(CalendarAccept, null), _getIconEvent$1);
+var calculateBoxSize$1 = function calculateBoxSize(startTime, endTime) {
   var minutes = dayjs(startTime).minute();
   var diffMinutes = dayjs(endTime).diff(startTime, 'hour', true);
   return {
@@ -922,7 +1139,7 @@ var LMSWeeklyEvent = function LMSWeeklyEvent(_ref) {
     onOpenDetail = _ref.onOpenDetail,
     onEventDetail = _ref.onEventDetail;
   var formattedDate = customDateFormat(event.startDate, TIME_FORMAT) + ' - ' + customDateFormat(event.endDate, TIME_FORMAT);
-  var _calculateBoxSize = calculateBoxSize(event.startDate, event.endDate),
+  var _calculateBoxSize = calculateBoxSize$1(event.startDate, event.endDate),
     width = _calculateBoxSize.width,
     left = _calculateBoxSize.left;
   return React__default.createElement("div", {
@@ -944,7 +1161,7 @@ var LMSWeeklyEvent = function LMSWeeklyEvent(_ref) {
     className: clsx__default(styles['weekly-event--collapse'])
   }, React__default.createElement("div", {
     className: styles.flex
-  }, getIconEvent[event.type]), React__default.createElement("div", {
+  }, getIconEvent$1[event.type]), React__default.createElement("div", {
     className: styles['weekly-event__title']
   }, React__default.createElement(CustomTooltip, {
     title: event.title
@@ -1104,6 +1321,51 @@ var LMSWeeklyCalendar = function LMSWeeklyCalendar(_ref) {
   });
 };
 
+function LMSModeWeeklyCalendar(_ref) {
+  var startDate = _ref.startDate,
+    endDate = _ref.endDate,
+    events = _ref.events,
+    norms = _ref.norms,
+    _ref$showWeeklyNorm = _ref.showWeeklyNorm,
+    showWeeklyNorm = _ref$showWeeklyNorm === void 0 ? false : _ref$showWeeklyNorm,
+    onOpenDetail = _ref.onOpenDetail,
+    onOpenCreate = _ref.onOpenCreate,
+    onEventDetail = _ref.onEventDetail,
+    loading = _ref.loading;
+  var _useState = React.useState(window.innerWidth),
+    windowWidth = _useState[0],
+    setWindowWidth = _useState[1];
+  React.useEffect(function () {
+    var handleResize = function handleResize() {
+      setWindowWidth(window.innerWidth);
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return React__default.createElement(React__default.Fragment, null, windowWidth > 1024 ? React__default.createElement(WeeklyCalendar, {
+    startDate: startDate,
+    endDate: endDate,
+    events: events,
+    norms: norms,
+    showWeeklyNorm: showWeeklyNorm,
+    onOpenDetail: onOpenDetail,
+    onOpenCreate: onOpenCreate,
+    onEventDetail: onEventDetail,
+    loading: loading
+  }) : React__default.createElement(LMSWeeklyCalendar, {
+    startDate: startDate,
+    endDate: endDate,
+    events: events,
+    norms: norms,
+    onOpenDetail: onOpenDetail,
+    onOpenCreate: onOpenCreate,
+    onEventDetail: onEventDetail,
+    loading: loading
+  }));
+}
+
 var SAPPCalendar = function SAPPCalendar(_ref) {
   var teacherName = _ref.teacherName,
     events = _ref.events,
@@ -1204,10 +1466,11 @@ var SAPPCalendar = function SAPPCalendar(_ref) {
     onOpenCreate: onOpenCreate,
     onEventDetail: onEventDetail,
     loading: loading
-  }), calendarMode === 'week' && React__default.createElement(LMSWeeklyCalendar, {
+  }), calendarMode === 'week' && React__default.createElement(LMSModeWeeklyCalendar, {
     startDate: startDate,
     endDate: endDate,
     events: splittedEvents,
+    showWeeklyNorm: showWeeklyNorm,
     norms: norms,
     onOpenDetail: onOpenDetail,
     onOpenCreate: onOpenCreate,