From 9ca33114d27ca252522faf14588df4fb3aa099d9 Mon Sep 17 00:00:00 2001 From: Maxim Date: Tue, 26 Jul 2022 19:37:31 +0300 Subject: [PATCH] render rotation with real data --- .../src/components/Rotations/Rotations.tsx | 16 ++---- .../components/Rotations/ScheduleFinal.tsx | 25 +++++++-- .../Rotations/ScheduleOverrides.tsx | 17 +++++- .../components/ScheduleSlot/ScheduleSlot.tsx | 25 +++++---- .../components/WorkingHours/WorkingHours.tsx | 1 - .../src/containers/Rotation/Rotation.tsx | 36 +++++++------ .../containers/RotationForm/RotationForm.tsx | 52 +++++++++++-------- .../RotationForm/ScheduleOverrideForm.tsx | 29 +++++++++-- .../src/models/schedule/schedule.ts | 37 ++++++++++--- .../src/models/schedule/schedule.types.ts | 21 ++++++++ grafana-plugin/src/models/user/user.ts | 12 ++++- .../src/pages/schedule/Schedule.tsx | 26 ++++++++-- .../src/pages/schedules_NEW/Schedules.tsx | 14 ++++- 13 files changed, 227 insertions(+), 84 deletions(-) diff --git a/grafana-plugin/src/components/Rotations/Rotations.tsx b/grafana-plugin/src/components/Rotations/Rotations.tsx index 8e10f847..42601630 100644 --- a/grafana-plugin/src/components/Rotations/Rotations.tsx +++ b/grafana-plugin/src/components/Rotations/Rotations.tsx @@ -21,9 +21,9 @@ const cx = cn.bind(styles); interface RotationsProps { startMoment: dayjs.Dayjs; currentTimezone: Timezone; - onCreate: (date: RotationCreateData) => void; scheduleId: Schedule['id']; - onRotationUpdate: () => void; + onCreate: () => void; + onUpdate: () => void; } type Layer = { @@ -40,7 +40,7 @@ class Rotations extends Component { }; render() { - const { startMoment, currentTimezone, scheduleId, onRotationUpdate } = this.props; + const { scheduleId, startMoment, currentTimezone, onCreate, onUpdate } = this.props; const { layerIdToCreateRotation } = this.state; const layers = [ @@ -115,8 +115,8 @@ class Rotations extends Component { onHide={() => { this.setState({ layerIdToCreateRotation: undefined }); }} - onUpdate={onRotationUpdate} - onCreate={this.onRotationCreate} + onUpdate={onCreate} + onCreate={onUpdate} /> )} @@ -125,12 +125,6 @@ class Rotations extends Component { updateEvents = () => {}; - onRotationCreate = (data: RotationCreateData) => { - const { onCreate } = this.props; - - onCreate(data); - }; - handleAddLayer = () => {}; handleAddRotation = (option) => { diff --git a/grafana-plugin/src/components/Rotations/ScheduleFinal.tsx b/grafana-plugin/src/components/Rotations/ScheduleFinal.tsx index d74eba7a..46268a6c 100644 --- a/grafana-plugin/src/components/Rotations/ScheduleFinal.tsx +++ b/grafana-plugin/src/components/Rotations/ScheduleFinal.tsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component, useEffect } from 'react'; import { Button, HorizontalGroup, Icon, Input, ValuePicker } from '@grafana/ui'; import cn from 'classnames/bind'; @@ -9,6 +9,8 @@ import RotationForm from 'components/RotationForm/RotationForm'; import ScheduleOverrideForm from 'components/ScheduleOverrideForm/ScheduleOverrideForm'; import TimelineMarks from 'components/TimelineMarks/TimelineMarks'; import Rotation from 'containers/Rotation/Rotation'; +import { Schedule } from 'models/schedule/schedule.types'; +import { Timezone } from 'models/timezone/timezone.types'; import { WithStoreProps } from 'state/types'; import { withMobXProviderContext } from 'state/withStore'; @@ -16,7 +18,11 @@ import styles from './Rotations.module.css'; const cx = cn.bind(styles); -interface ScheduleOverridesProps extends WithStoreProps {} +interface ScheduleOverridesProps extends WithStoreProps { + startMoment: dayjs.Dayjs; + currentTimezone: Timezone; + scheduleId: Schedule['id']; +} interface ScheduleOverridesState {} @@ -24,8 +30,18 @@ interface ScheduleOverridesState {} class ScheduleOverrides extends Component { state: ScheduleOverridesState = {}; + componentDidMount() { + const { store, scheduleId, startMoment, currentTimezone } = this.props; + + const {} = this.props; + + const startMomentString = startMoment.utc().format('YYYY-MM-DD'); + + store.scheduleStore.updateEvents(scheduleId, startMomentString, 'final'); + } + render() { - const { title, startMoment, currentTimezone } = this.props; + const { scheduleId, startMoment, currentTimezone, store } = this.props; const { showAddOverrideForm, searchTerm } = this.state; const base = 7 * 24 * 60; // in minutes @@ -52,7 +68,8 @@ class ScheduleOverrides extends Component
void; + onUpdate: () => void; +} interface ScheduleOverridesState {} @@ -24,7 +33,7 @@ class ScheduleOverrides extends Component {showAddOverrideForm && ( { this.setState({ showAddOverrideForm: false }); }} + onUpdate={onCreate} + onCreate={onUpdate} /> )} diff --git a/grafana-plugin/src/components/ScheduleSlot/ScheduleSlot.tsx b/grafana-plugin/src/components/ScheduleSlot/ScheduleSlot.tsx index 4249bff5..10ecb1bb 100644 --- a/grafana-plugin/src/components/ScheduleSlot/ScheduleSlot.tsx +++ b/grafana-plugin/src/components/ScheduleSlot/ScheduleSlot.tsx @@ -8,7 +8,7 @@ import { observer } from 'mobx-react'; import Line from 'components/ScheduleUserDetails/img/line.svg'; import Text from 'components/Text/Text'; import WorkingHours from 'components/WorkingHours/WorkingHours'; -import { Shift } from 'models/schedule/schedule.types'; +import { Event } from 'models/schedule/schedule.types'; import { Timezone } from 'models/timezone/timezone.types'; import { User } from 'models/user/user.types'; import { useStore } from 'state/useStore'; @@ -21,7 +21,7 @@ interface ScheduleSlotProps { index: number; layerIndex: number; rotationIndex: number; - shift: Shift; + event: Event; startMoment: dayjs.Dayjs; currentTimezone: Timezone; color?: string; @@ -30,8 +30,13 @@ interface ScheduleSlotProps { const cx = cn.bind(styles); const ScheduleSlot: FC = observer((props) => { - const { index, layerIndex, rotationIndex, shift, startMoment, currentTimezone, color: propColor, x, basePx } = props; - const { duration, users } = shift; + const { index, layerIndex, rotationIndex, event, startMoment, currentTimezone, color: propColor } = props; + const { users } = event; + + const start = dayjs(event.start); + const end = dayjs(event.end); + + const duration = end.diff(start, 'seconds'); const store = useStore(); @@ -43,9 +48,9 @@ const ScheduleSlot: FC = observer((props) => { return (
- {!shift.is_gap ? ( - users.map((pk, userIndex) => { - const storeUser = store.userStore.items[pk]; + {!event.is_gap ? ( + users.map(({ pk: userPk }, userIndex) => { + const storeUser = store.userStore.items[userPk]; const inactive = false; @@ -64,10 +69,10 @@ const ScheduleSlot: FC = observer((props) => { )} {userIndex === 0 && label && ( diff --git a/grafana-plugin/src/components/WorkingHours/WorkingHours.tsx b/grafana-plugin/src/components/WorkingHours/WorkingHours.tsx index 3c62021c..fe891e33 100644 --- a/grafana-plugin/src/components/WorkingHours/WorkingHours.tsx +++ b/grafana-plugin/src/components/WorkingHours/WorkingHours.tsx @@ -18,7 +18,6 @@ interface WorkingHoursProps { workingHours: any; startMoment: dayjs.Dayjs; duration: number; // in seconds - width: number; // in pixels className: string; } diff --git a/grafana-plugin/src/containers/Rotation/Rotation.tsx b/grafana-plugin/src/containers/Rotation/Rotation.tsx index a15bc6d1..b582daa8 100644 --- a/grafana-plugin/src/containers/Rotation/Rotation.tsx +++ b/grafana-plugin/src/containers/Rotation/Rotation.tsx @@ -8,7 +8,7 @@ import { CSSTransitionGroup } from 'react-transition-group'; // ES6 import ScheduleSlot from 'components/ScheduleSlot/ScheduleSlot'; import Text from 'components/Text/Text'; -import { Rotation as RotationType } from 'models/schedule/schedule.types'; +import { Rotation as RotationType, Schedule } from 'models/schedule/schedule.types'; import { Timezone } from 'models/timezone/timezone.types'; import { useStore } from 'state/useStore'; import { usePrevious } from 'utils/hooks'; @@ -20,7 +20,8 @@ const cx = cn.bind(styles); interface ScheduleSlotState {} interface RotationProps { - id: RotationType['id']; + type: 'final' | 'rotation' | 'override'; + scheduleId: Schedule['id']; label: string; startMoment: dayjs.Dayjs; currentTimezone: Timezone; @@ -30,7 +31,7 @@ interface RotationProps { } const Rotation: FC = observer((props) => { - const { id, layerIndex, rotationIndex, label, startMoment, currentTimezone, color } = props; + const { type, scheduleId, layerIndex, rotationIndex, label, startMoment, currentTimezone, color } = props; const [animate, setAnimate] = useState(true); const [width, setWidth] = useState(); @@ -38,12 +39,15 @@ const Rotation: FC = observer((props) => { const store = useStore(); - const startMomentString = useMemo(() => startMoment.utc().format('YYYY-MM-DDTHH:mm:ss.000Z'), [startMoment]); + const startMomentString = useMemo(() => startMoment.utc().format('YYYY-MM-DD'), [startMoment]); const prevStartMomentString = usePrevious(startMomentString); - const rotation = store.scheduleStore.rotations[id]?.[startMomentString]; - //const rotation = store.scheduleStore.rotations[id]?.[prevStartMomentString]; + const events = store.scheduleStore.events[scheduleId]?.[type]?.[startMomentString]; + + console.log(events); + + // const rotation = store.scheduleStore.rotations[id]?.[prevStartMomentString]; /* useEffect(() => { setTransparent(false); @@ -58,7 +62,7 @@ const Rotation: FC = observer((props) => { console.log('CHANGE START MOMENT', startMomentString); - store.scheduleStore.updateRotationMock(id, startMomentString, currentTimezone); + // store.scheduleStore.updateEvents(scheduleId, startMomentString, currentTimezone); }, [startMomentString]); const slots = useCallback((node) => { @@ -68,21 +72,19 @@ const Rotation: FC = observer((props) => { }, []); const x = useMemo(() => { - if (!rotation) { + if (!events) { return 0; } - const { shifts } = rotation; + const firstShift = events[0]; - const firstShift = shifts[0]; - - const firstShiftOffset = firstShift.start.diff(startMoment, 'minutes'); + const firstShiftOffset = dayjs(firstShift.start).diff(startMoment, 'minutes'); const base = 60 * 24 * 7; // in minutes only const utcOffset = dayjs().tz(currentTimezone).utcOffset(); return firstShiftOffset / base; - }, [rotation]); + }, [events]); useEffect(() => {}); @@ -90,18 +92,18 @@ const Rotation: FC = observer((props) => {
{/*
*/}
- {rotation ? ( + {events ? (
- {rotation.shifts.map((shift, index) => { + {events.map((event, index) => { return ( void; - onCreate: (date: RotationCreateData) => void; id: number | 'new'; currentTimezone: Timezone; scheduleId: Schedule['id']; - onUpdate: (data: Rotation) => void; + onCreate: () => void; + onUpdate: () => void; } const cx = cn.bind(styles); @@ -46,8 +48,8 @@ const RotationForm: FC = (props) => { const { onHide, onCreate, currentTimezone, scheduleId, onUpdate } = props; const [repeatEveryValue, setRepeatEveryValue] = useState(1); - const [repeatEveryPeriod, setRepeatEveryPeriod] = useState('days'); - const [selectedDays, setSelectedDays] = useState(['Tuesday']); + const [repeatEveryPeriod, setRepeatEveryPeriod] = useState(0); + const [selectedDays, setSelectedDays] = useState([]); const [shiftStart, setShiftStart] = useState(dateTime('2022-07-26 17:00:00')); const [shiftEnd, setShiftEnd] = useState(dateTime('2022-07-26 19:00:00')); const [rotationStart, setRotationStart] = useState(dateTime('2022-07-26 17:00:00')); @@ -79,17 +81,17 @@ const RotationForm: FC = (props) => { */ store.scheduleStore - .createRotation(scheduleId, true, { - name: 'Rotation' + Math.floor(Math.random() * 100), + .createRotation(scheduleId, false, { + name: 'Rotation ' + Math.floor(Math.random() * 100), rotation_start: getUTCString(rotationStart), + until: endLess ? null : getUTCString(rotationEnd), shift_start: getUTCString(shiftStart), shift_end: getUTCString(shiftEnd), rolling_users: userGroups, - frequency: 0, + frequency: repeatEveryValue, + by_day: selectedDays, }) - .then((data) => { - onUpdate(data); - }); + .then(onUpdate); }, [ repeatEveryValue, repeatEveryPeriod, @@ -159,21 +161,21 @@ const RotationForm: FC = (props) => { /> -