add schedule override form
This commit is contained in:
Maxim
parent
d5227ae420
commit
48240522ba
25 changed files with 544 additions and 435 deletions
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"extends": "stylelint-config-standard",
|
||||
"rules": {
|
||||
"block-no-empty": [true,{ "severity": "warning"}],
|
||||
"selector-pseudo-class-no-unknown": [
|
||||
true,
|
||||
{
|
||||
|
|
@ -8,4 +9,4 @@
|
|||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,33 @@
|
|||
.root {
|
||||
position: fixed;
|
||||
width: 750px;
|
||||
max-width: 100%;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
top: 10%;
|
||||
max-height: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-image: initial;
|
||||
outline: none;
|
||||
padding: 15px;
|
||||
background: #181B1F;
|
||||
border: 1px solid #2D2E35;
|
||||
box-shadow: 0px 2px 4px 2px rgba(10, 10, 16, 0.1), 0px 8px 16px rgba(10, 10, 16, 0.2), 0px 12px 24px rgba(3, 3, 8, 0.3), 0px 16px 32px rgba(3, 3, 8, 0.8);
|
||||
border-radius: 2px;
|
||||
position: fixed;
|
||||
width: 750px;
|
||||
max-width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
top: 10%;
|
||||
max-height: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-image: initial;
|
||||
outline: none;
|
||||
padding: 15px;
|
||||
background: #181b1f;
|
||||
border: 1px solid #2d2e35;
|
||||
box-shadow: 0 2px 4px 2px rgba(10, 10, 16, 0.1), 0 8px 16px rgba(10, 10, 16, 0.2), 0 12px 24px rgba(3, 3, 8, 0.3), 0 16px 32px rgba(3, 3, 8, 0.8);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0px;
|
||||
z-index: 10;
|
||||
/*background-color: rgba(0, 0, 0, 0.45);
|
||||
backdrop-filter: blur(1px);*/
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10;
|
||||
|
||||
/* background-color: rgba(0, 0, 0, 0.45);
|
||||
backdrop-filter: blur(1px); */
|
||||
}
|
||||
|
||||
.body-open {
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,44 +1,41 @@
|
|||
.root {
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.control {
|
||||
width: 195px;
|
||||
width: 195px;
|
||||
}
|
||||
|
||||
|
||||
.date-time-picker {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.inline-switch {
|
||||
height: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
|
||||
.days {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.day {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--secondary-background-shade);
|
||||
border-radius: 2px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--secondary-background-shade);
|
||||
border-radius: 2px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.days .day__selected {
|
||||
background: #3D71D9;
|
||||
background: #3d71d9;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
.root {
|
||||
border: var(--border-medium);
|
||||
border-radius: 2px;
|
||||
background: var(--primary-background);
|
||||
border: var(--border-medium);
|
||||
border-radius: 2px;
|
||||
background: var(--primary-background);
|
||||
}
|
||||
|
||||
.current-time {
|
||||
position: absolute;
|
||||
left: 650px;
|
||||
width: 1px;
|
||||
background: #fff;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 650px;
|
||||
width: 1px;
|
||||
background: #fff;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 19px;
|
||||
line-height: 24px;
|
||||
color: rgba(204, 204, 220, 0.65);
|
||||
margin: 16px 0;
|
||||
font-weight: 500;
|
||||
font-size: 19px;
|
||||
line-height: 24px;
|
||||
color: rgba(204, 204, 220, 0.65);
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.rotations-plus-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.layer {
|
||||
|
|
@ -36,47 +36,47 @@
|
|||
}
|
||||
|
||||
.layer-title {
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.1em;
|
||||
color: rgba(204, 204, 220, 0.65);
|
||||
text-transform: uppercase;
|
||||
padding: 8px;
|
||||
background: var(--secondary-background);
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.1em;
|
||||
color: rgba(204, 204, 220, 0.65);
|
||||
text-transform: uppercase;
|
||||
padding: 8px;
|
||||
background: var(--secondary-background);
|
||||
}
|
||||
|
||||
.layer-title:hover {
|
||||
background: rgba(204, 204, 220, 0.12);
|
||||
background: rgba(204, 204, 220, 0.12);
|
||||
}
|
||||
|
||||
.header-plus-content {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layer-header {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.layer-header-title {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: rgba(204, 204, 220, 0.65);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: rgba(204, 204, 220, 0.65);
|
||||
}
|
||||
|
||||
.layer-content {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.add-rotations-layer {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
color: rgba(204, 204, 220, 0.65);
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
color: rgba(204, 204, 220, 0.65);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ class Rotations extends Component<RotationsProps, RotationsState> {
|
|||
<div className={cx('add-rotations-layer')}>Add rotations layer +</div>
|
||||
</div>
|
||||
</div>
|
||||
{layerIdToCreateRotation && (
|
||||
{!isNaN(layerIdToCreateRotation) && (
|
||||
<RotationForm
|
||||
layerId={layerIdToCreateRotation}
|
||||
onHide={() => {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { Button, HorizontalGroup, Icon, ValuePicker } from '@grafana/ui';
|
|||
import cn from 'classnames/bind';
|
||||
import { observer } from 'mobx-react';
|
||||
|
||||
import OverrideForm from 'components/OverrideForm/OverrideForm';
|
||||
import RotationForm from 'components/RotationForm/RotationForm';
|
||||
import ScheduleOverrideForm from 'components/ScheduleOverrideForm/ScheduleOverrideForm';
|
||||
import TimelineMarks from 'components/TimelineMarks/TimelineMarks';
|
||||
|
|
|
|||
|
|
@ -1,33 +1,32 @@
|
|||
.root {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.root__type_link {
|
||||
padding: 2px 4px;
|
||||
background: rgba(27, 133, 94, 0.15);
|
||||
border: 1px solid var(--success-text-color);
|
||||
border-radius: 2px;
|
||||
|
||||
padding: 2px 4px;
|
||||
background: rgba(27, 133, 94, 0.15);
|
||||
border: 1px solid var(--success-text-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.root__type_warning {
|
||||
padding: 2px 4px;
|
||||
background: rgba(245, 183, 61, 0.18);
|
||||
border: 1px solid var(--warning-text-color);
|
||||
border-radius: 2px;
|
||||
padding: 2px 4px;
|
||||
background: rgba(245, 183, 61, 0.18);
|
||||
border: 1px solid var(--warning-text-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.icon__type_link {
|
||||
color: var(--success-text-color);
|
||||
color: var(--success-text-color);
|
||||
}
|
||||
|
||||
.icon__type_warning {
|
||||
color: var(--warning-text-color);
|
||||
color: var(--warning-text-color);
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
width: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -41,4 +40,3 @@
|
|||
background: #3A301E;
|
||||
}
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,21 @@
|
|||
.root {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.control {
|
||||
width: 195px;
|
||||
}
|
||||
|
||||
.date-time-picker {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.inline-switch {
|
||||
height: 22px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,100 @@
|
|||
import React, { FC } from 'react';
|
||||
import React, { FC, useCallback, useState } from 'react';
|
||||
|
||||
import { dateTime, DateTime } from '@grafana/data';
|
||||
import {
|
||||
IconButton,
|
||||
VerticalGroup,
|
||||
HorizontalGroup,
|
||||
Field,
|
||||
Input,
|
||||
Button,
|
||||
DateTimePicker,
|
||||
Select,
|
||||
InlineSwitch,
|
||||
} from '@grafana/ui';
|
||||
import cn from 'classnames/bind';
|
||||
import dayjs from 'dayjs';
|
||||
import Draggable from 'react-draggable';
|
||||
|
||||
import Modal from 'components/Modal/Modal';
|
||||
import Text from 'components/Text/Text';
|
||||
import UserGroups from 'components/UserGroups/UserGroups';
|
||||
import { getTzOffsetString } from 'models/timezone/timezone.helpers';
|
||||
|
||||
import styles from './ScheduleOverrideForm.module.css';
|
||||
|
||||
interface ScheduleOverrideFormProps {
|
||||
|
||||
interface RotationFormProps {
|
||||
layerId: string;
|
||||
onHide: () => void;
|
||||
id: number | 'new';
|
||||
}
|
||||
|
||||
const cx = cn.bind(styles);
|
||||
|
||||
const ScheduleOverrideForm: FC<ScheduleOverrideFormProps> = props => {
|
||||
const { } = props;
|
||||
const ScheduleOverrideForm: FC<RotationFormProps> = (props) => {
|
||||
const { onHide } = props;
|
||||
|
||||
return (
|
||||
<div className={cx('root')} />
|
||||
);
|
||||
const [shiftStart, setShiftStart] = useState<DateTime>(dateTime('2021-05-05 12:00:00'));
|
||||
const [shiftEnd, setShiftEnd] = useState<DateTime>(dateTime('2021-05-05 12:00:00'));
|
||||
|
||||
const moment = dayjs();
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width="430px"
|
||||
title="New Rotation"
|
||||
onDismiss={onHide}
|
||||
contentElement={(props, children) => (
|
||||
<Draggable handle=".drag-handler" positionOffset={{ x: 0, y: 0 }}>
|
||||
<div {...props}>{children}</div>
|
||||
</Draggable>
|
||||
)}
|
||||
>
|
||||
<VerticalGroup>
|
||||
<HorizontalGroup justify="space-between">
|
||||
<Text size="medium">Rotation 1</Text>
|
||||
<HorizontalGroup>
|
||||
<IconButton variant="secondary" tooltip="Copy" name="copy" />
|
||||
<IconButton variant="secondary" tooltip="Code" name="brackets-curly" />
|
||||
<IconButton variant="secondary" tooltip="Delete" name="trash-alt" />
|
||||
<IconButton variant="secondary" className={cx('drag-handler')} name="draggabledots" />
|
||||
</HorizontalGroup>
|
||||
</HorizontalGroup>
|
||||
<UserGroups />
|
||||
{/*<hr />*/}
|
||||
<VerticalGroup>
|
||||
<HorizontalGroup>
|
||||
<Field
|
||||
className={cx('date-time-picker')}
|
||||
label={
|
||||
<Text type="primary" size="small">
|
||||
Override start
|
||||
</Text>
|
||||
}
|
||||
>
|
||||
<DateTimePicker date={shiftStart} onChange={setShiftStart} />
|
||||
</Field>
|
||||
<Field
|
||||
className={cx('date-time-picker')}
|
||||
label={
|
||||
<Text type="primary" size="small">
|
||||
Override end
|
||||
</Text>
|
||||
}
|
||||
>
|
||||
<DateTimePicker date={shiftEnd} onChange={setShiftEnd} />
|
||||
</Field>
|
||||
</HorizontalGroup>
|
||||
</VerticalGroup>
|
||||
<HorizontalGroup justify="space-between">
|
||||
<Text type="secondary">Timezone: {getTzOffsetString(moment)}</Text>
|
||||
<HorizontalGroup>
|
||||
<Button variant="primary">Save</Button>
|
||||
</HorizontalGroup>
|
||||
</HorizontalGroup>
|
||||
</VerticalGroup>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ScheduleOverrideForm;
|
||||
|
|
|
|||
|
|
@ -1,46 +1,46 @@
|
|||
.root {
|
||||
padding: 4px 10px;
|
||||
gap: 10px;
|
||||
background: var(--primary-background);
|
||||
border: var(--border-medium);
|
||||
border-radius: 2px;
|
||||
padding: 4px 10px;
|
||||
gap: 10px;
|
||||
background: var(--primary-background);
|
||||
border: var(--border-medium);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.details {
|
||||
width: auto;
|
||||
padding: 10px 0;
|
||||
width: auto;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.progress{
|
||||
width:100%;
|
||||
height: 16px;
|
||||
background-color: var( --secondary-background-shade);
|
||||
position: relative;
|
||||
.progress {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
background-color: var(--secondary-background-shade);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-filler{
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
.progress-filler {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.progress-filler__type_success{
|
||||
background-color: var(--success-text-color);
|
||||
.progress-filler__type_success {
|
||||
background-color: var(--success-text-color);
|
||||
}
|
||||
|
||||
.progress-filler__type_warning{
|
||||
background-color: var(--warning-text-color);
|
||||
.progress-filler__type_warning {
|
||||
background-color: var(--warning-text-color);
|
||||
}
|
||||
|
||||
.quality-text{
|
||||
float: right;
|
||||
line-height: 16px;
|
||||
margin-right: 3px;
|
||||
.quality-text {
|
||||
float: right;
|
||||
line-height: 16px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.quality-text__type_success{
|
||||
color: var(--primary-text-color);
|
||||
.quality-text__type_success {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.quality-text__type_warning{
|
||||
color: #111217
|
||||
.quality-text__type_warning {
|
||||
color: #111217;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,70 +1,70 @@
|
|||
.root {
|
||||
height: 28px;
|
||||
background: #3274D9;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
height: 28px;
|
||||
background: #3274d9;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.working-hours{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.working-hours {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:1px;
|
||||
transition: left 500ms ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
transition: left 500ms ease;
|
||||
}
|
||||
|
||||
.stack > .root {
|
||||
margin: 0 2px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.root__type_gap {
|
||||
background: rgba(209, 14, 92, 0.2);
|
||||
border: 1px dashed #FF5286;
|
||||
color: rgba(209, 14, 92, .5);
|
||||
visibility: hidden;
|
||||
background: rgba(209, 14, 92, 0.2);
|
||||
border: 1px dashed #ff5286;
|
||||
color: rgba(209, 14, 92, 0.5);
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.root__inactive {
|
||||
opacity: 0.5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 5px;
|
||||
z-index: 1;
|
||||
color: #ffffff;
|
||||
font-sizrooe: 12px;
|
||||
font-weight: 500;
|
||||
padding: 5px;
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.label {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
padding: 2px 4px;
|
||||
margin: 4px;
|
||||
line-height: 16px;
|
||||
z-index: 1;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
padding: 2px 4px;
|
||||
margin: 4px;
|
||||
line-height: 16px;
|
||||
z-index: 1;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.details {
|
||||
width: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.details-user-status {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.details-user-status__type_success {
|
||||
background-color: var(--success-text-color);
|
||||
background-color: var(--success-text-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +1,38 @@
|
|||
.root {
|
||||
width: 220px;
|
||||
padding: 10px;
|
||||
width: 220px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.oncall-badge {
|
||||
line-height: 16px;
|
||||
color: var(--primary-background);
|
||||
padding: 2px 7px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
line-height: 16px;
|
||||
color: var(--primary-background);
|
||||
padding: 2px 7px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.oncall-badge__type_now{
|
||||
background: #6CCF8E;
|
||||
.oncall-badge__type_now {
|
||||
background: #6ccf8e;
|
||||
}
|
||||
|
||||
.oncall-badge__type_inside{
|
||||
background: #CCCCDC;
|
||||
.oncall-badge__type_inside {
|
||||
background: #ccccdc;
|
||||
}
|
||||
|
||||
.oncall-badge__type_outside{
|
||||
background: rgba(204, 204, 220, 0.4);
|
||||
.oncall-badge__type_outside {
|
||||
background: rgba(204, 204, 220, 0.4);
|
||||
}
|
||||
|
||||
.hr{
|
||||
width: 100%;
|
||||
margin:0 -11px;
|
||||
.hr {
|
||||
width: 100%;
|
||||
margin: 0 -11px;
|
||||
}
|
||||
|
||||
.times{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.icon{
|
||||
color: #CCCCDC;
|
||||
.times {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.icon {
|
||||
color: #ccccdc;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +1,37 @@
|
|||
.root {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.root table{
|
||||
width: 100%;
|
||||
.root table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.root tr {
|
||||
border-bottom: 1px solid #33363B;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #33363b;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.root tr:hover {
|
||||
background: var(--secondary-background)
|
||||
|
||||
background: var(--secondary-background);
|
||||
}
|
||||
|
||||
|
||||
.root td {
|
||||
min-height: 60px;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
padding: 10px;
|
||||
pointer-events: none;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
transition: transform 0.2s;
|
||||
padding: 10px;
|
||||
pointer-events: none;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.expand-icon__expanded {
|
||||
transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,53 +1,52 @@
|
|||
.root {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: rgba(204, 204, 220, 0.65);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: rgba(204, 204, 220, 0.65);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.weekday {
|
||||
width: calc(100% / 7);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: calc(100% / 7);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.weekday-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 4px;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 4px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.weekday:not(:last-child) .weekday-title{
|
||||
border-right: var(--border-medium)
|
||||
.weekday:not(:last-child) .weekday-title {
|
||||
border-right: var(--border-medium);
|
||||
}
|
||||
|
||||
.weekday-times {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 16px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.weekday-time {
|
||||
width: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.weekday-time-title {
|
||||
display: inline-block;
|
||||
transform: translate(-50%, 0);
|
||||
display: inline-block;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.weekday-time-title__hidden{
|
||||
visibility: hidden;
|
||||
.weekday-time-title__hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -55,8 +54,8 @@ for debug purposes only
|
|||
*/
|
||||
|
||||
.debug-scale {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,89 +1,87 @@
|
|||
.root {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sortable-helper {
|
||||
z-index: 1062;
|
||||
box-shadow: var(--focused-box-shadow);
|
||||
background: var(--hover-selected-hardcoded) !important;
|
||||
z-index: 1062;
|
||||
box-shadow: var(--focused-box-shadow);
|
||||
background: var(--hover-selected-hardcoded) !important;
|
||||
}
|
||||
|
||||
|
||||
.separator {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
color: rgba(204, 204, 220, 0.4);
|
||||
margin: 4px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
color: rgba(204, 204, 220, 0.4);
|
||||
margin: 4px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.separator__clickable{
|
||||
cursor: pointer;
|
||||
.separator__clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.separator::before {
|
||||
display: block;
|
||||
content: "";
|
||||
flex-grow: 1;
|
||||
border-bottom: 1px solid rgba(204, 204, 220, 0.15);
|
||||
height: 0;
|
||||
margin-right: 5px;
|
||||
display: block;
|
||||
content: "";
|
||||
flex-grow: 1;
|
||||
border-bottom: 1px solid rgba(204, 204, 220, 0.15);
|
||||
height: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.separator::after {
|
||||
display: block;
|
||||
content: "";
|
||||
flex-grow: 1;
|
||||
border-bottom: 1px solid rgba(204, 204, 220, 0.15);
|
||||
height: 0;
|
||||
margin-left: 5px;
|
||||
display: block;
|
||||
content: "";
|
||||
flex-grow: 1;
|
||||
border-bottom: 1px solid rgba(204, 204, 220, 0.15);
|
||||
height: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.groups {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.user {
|
||||
background: #22252B;
|
||||
border-radius: 2px;
|
||||
padding: 6px 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: #22252b;
|
||||
border-radius: 2px;
|
||||
padding: 6px 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.user:hover{
|
||||
background: var(--hover-selected-hardcoded);
|
||||
.user:hover {
|
||||
background: var(--hover-selected-hardcoded);
|
||||
}
|
||||
|
||||
.delete-icon{
|
||||
/*display: none;*/
|
||||
display: block;
|
||||
.delete-icon {
|
||||
/* display: none; */
|
||||
display: block;
|
||||
}
|
||||
|
||||
.user:hover .delete-icon{
|
||||
display: block;
|
||||
.user:hover .delete-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.add-user-group {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: var(--secondary-text-color);
|
||||
cursor: pointer;
|
||||
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: var(--secondary-text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select{
|
||||
width: 100%;
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.root {
|
||||
width: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,90 +1,94 @@
|
|||
.root {
|
||||
border: var(--border-medium);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 2px;
|
||||
background: var(--primary-background);
|
||||
border: var(--border-medium);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 2px;
|
||||
background: var(--primary-background);
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 19px;
|
||||
line-height: 24px;
|
||||
color: rgba(204, 204, 220, 0.65);
|
||||
margin: 16px 0;
|
||||
font-weight: 500;
|
||||
font-size: 19px;
|
||||
line-height: 24px;
|
||||
color: rgba(204, 204, 220, 0.65);
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.current-time {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
background: #fff;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
background: #fff;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@-webkit-keyframes run {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.users {
|
||||
position: relative;
|
||||
height: 76px;
|
||||
position: relative;
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
.user {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
border: 2px solid #C65210;
|
||||
transition: left 1s linear;
|
||||
transform: translate(-50%,0);
|
||||
z-index: 0;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
border: 2px solid #c65210;
|
||||
transition: left 1s linear;
|
||||
transform: translate(-50%, 0);
|
||||
z-index: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.time-stripe {
|
||||
position: relative;
|
||||
height: 4px;
|
||||
--color: rgba(61, 113, 217, 0.2);
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
var(--color),
|
||||
var(--color) 4px,
|
||||
transparent 4px,
|
||||
transparent 8px
|
||||
position: relative;
|
||||
height: 4px;
|
||||
|
||||
--color: rgba(61, 113, 217, 0.2);
|
||||
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
-45deg,
|
||||
var(--color),
|
||||
var(--color) 4px,
|
||||
transparent 4px,
|
||||
transparent 8px
|
||||
);
|
||||
}
|
||||
|
||||
.current-user-stripe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 4px;
|
||||
background: #3D71D9;
|
||||
border-radius: 2px;
|
||||
left: calc((3 / 8) * 100%);
|
||||
right: calc((2 / 8) * 100%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 4px;
|
||||
background: #3d71d9;
|
||||
border-radius: 2px;
|
||||
left: calc((3 / 8) * 100%);
|
||||
right: calc((2 / 8) * 100%);
|
||||
}
|
||||
|
||||
.time-marks {
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: rgba(204, 204, 220, 0.65);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: rgba(204, 204, 220, 0.65);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.time-mark {
|
||||
|
|
@ -92,18 +96,16 @@
|
|||
}
|
||||
|
||||
.time-mark-text {
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.time-mark-text__translated {
|
||||
transform: translate(-50%, 0);
|
||||
padding: 0;
|
||||
transform: translate(-50%, 0);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.time-mark:last-child{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
.time-mark:last-child {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.root {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,46 +1,42 @@
|
|||
.root {
|
||||
transition: background-color 300ms;
|
||||
min-height: 28px;
|
||||
transition: background-color 300ms;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.root:last-child{
|
||||
padding-bottom: 26px;
|
||||
.root:last-child {
|
||||
padding-bottom: 26px;
|
||||
}
|
||||
|
||||
.root:hover{
|
||||
background: var(--secondary-background);
|
||||
.root:hover {
|
||||
background: var(--secondary-background);
|
||||
}
|
||||
|
||||
.timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
padding-bottom: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.root:first-child .timeline {
|
||||
padding-top: 26px;
|
||||
padding-top: 26px;
|
||||
}
|
||||
|
||||
.root:last-child .timeline {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
/* overflow: hidden; */
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.slots {
|
||||
display: flex;
|
||||
transition: transform 500ms ease;
|
||||
display: flex;
|
||||
transition: transform 500ms ease;
|
||||
}
|
||||
|
||||
.current-time {
|
||||
position: absolute;
|
||||
left: 450px;
|
||||
width: 1px;
|
||||
background: #fff;
|
||||
top: -10px;
|
||||
bottom: -10px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 450px;
|
||||
width: 1px;
|
||||
background: #fff;
|
||||
top: -10px;
|
||||
bottom: -10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const Rotation: FC<RotationProps> = observer((props) => {
|
|||
useEffect(() => {
|
||||
const startMomentString = startMoment.utc().format('YYYY-MM-DDTHH:mm:ss.000Z');
|
||||
|
||||
store.scheduleStore.updateRotation(id, startMomentString);
|
||||
store.scheduleStore.updateRotationMock(id, startMomentString);
|
||||
}, [startMoment]);
|
||||
|
||||
const rotation = store.scheduleStore.rotations[id];
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.root {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -143,7 +143,27 @@ export class ScheduleStore extends BaseStore {
|
|||
});
|
||||
}
|
||||
|
||||
async updateRotation(rotationId: Rotation['id'], fromString: string) {
|
||||
// ------- NEW SCHEDULES API ENDPOINTS ---------
|
||||
|
||||
async createRotation(scheduleId: Schedule['id'], isOverride: boolean, params) {
|
||||
const type = isOverride ? 3 : 2;
|
||||
|
||||
const { name, shift_start, shift_end, rotation_start } = params;
|
||||
|
||||
return await makeRequest(`/oncall_shifts/`, {
|
||||
data: { name, type, schedule: scheduleId, shift_start, shift_end, rotation_start },
|
||||
method: 'POST',
|
||||
});
|
||||
}
|
||||
|
||||
async updateRotation(rotationId: Rotation['id']) {
|
||||
return await makeRequest(`/oncall_shifts/`, {
|
||||
params: { shift_id: rotationId },
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
|
||||
async updateRotationMock(rotationId: Rotation['id'], fromString: string) {
|
||||
const response = await new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
if (!fromString) {
|
||||
|
|
@ -173,4 +193,16 @@ export class ScheduleStore extends BaseStore {
|
|||
[rotationId]: response as Rotation,
|
||||
};
|
||||
}
|
||||
|
||||
async updateFrequencyOptions(scheduleId: Schedule['id']) {
|
||||
return await makeRequest(`/oncall_shifts/frequency_options/`, {
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
|
||||
async updateDaysOptions(scheduleId: Schedule['id']) {
|
||||
return await makeRequest(`/oncall_shifts/days_options/`, {
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,31 @@
|
|||
.root {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
margin-top: 24px;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.header{
|
||||
position: sticky; /* TODO check */
|
||||
width: 100%;
|
||||
.header {
|
||||
position: sticky; /* TODO check */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.desc{
|
||||
width: 736px;
|
||||
.desc {
|
||||
width: 736px;
|
||||
}
|
||||
|
||||
.users-timezones{
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.users-timezones {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.controls{
|
||||
width: 100%;
|
||||
.controls {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rotations {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,15 @@
|
|||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.quality__type_success{
|
||||
.quality__type_success {
|
||||
color: var(--warning-text-color);
|
||||
}
|
||||
|
||||
|
||||
.schedule{
|
||||
.schedule {
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.root .expanded-row{
|
||||
.root .expanded-row {
|
||||
background: var(--secondary-background);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,15 +45,9 @@
|
|||
--primary-text-link: #6e9fff;
|
||||
--timeline-icon-background: rgba(70, 76, 84, 1);
|
||||
--timeline-icon-background-resolution-note: rgba(50, 116, 217, 1);
|
||||
|
||||
|
||||
--focused-box-shadow: rgb(17 18 23) 0px 0px 0px 2px, rgb(61 113 217) 0px 0px 0px 4px;
|
||||
--focused-box-shadow: rgb(17 18 23) 0 0 0 2px, rgb(61 113 217) 0 0 0 4px;
|
||||
--border-medium: 1px solid rgba(204, 204, 220, 0.15);
|
||||
|
||||
--hover-selected: rgba(204,204,220,0.12);
|
||||
--hover-selected: rgba(204, 204, 220, 0.12);
|
||||
--hover-selected-hardcoded: #34363d;
|
||||
|
||||
--secondary-background-shade: rgba(204, 204, 220, 0.2);
|
||||
|
||||
|
||||
--secondary-background-shade: rgba(204, 204, 220, 0.2);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue