Skip to content

Commit 5f52fe3

Browse files
elad-nelad-n
committed
pulling changes
1 parent eb01685 commit 5f52fe3

File tree

3 files changed

+180
-145
lines changed

3 files changed

+180
-145
lines changed

‎src/components/elements/dateManager/Presets.tsx

+12-17
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
1+
import React from 'react';
12
import { List, ListItem, ListItemButton, ListItemText, Typography } from '@mui/material';
23
import { Box } from '@mui/system';
3-
import React from 'react';
4+
import dayjs, { Dayjs } from 'dayjs';
45

5-
interface ListItemType {
6+
export type PresetType = {
67
name: string;
7-
value: Date;
8-
}
9-
10-
type PresetType = {
11-
name: string;
12-
value: Date;
8+
value: dayjs.Dayjs;
139
};
1410

1511
const PresetsList = ({
1612
list,
17-
onPresetClick
13+
onPresetClick,
1814
}: {
19-
list: ListItemType[];
20-
onPresetClick: (value: Date) => void;
15+
list: PresetType[];
16+
onPresetClick: (value: Dayjs) => void;
2117
}) => {
2218
return (
2319
<List>
@@ -29,10 +25,9 @@ const PresetsList = ({
2925
'&:hover': {
3026
background: '#F1F5F9',
3127
padding: '8px',
32-
borderRadius: '6px'
33-
}
28+
borderRadius: '6px',
29+
},
3430
}}
35-
href="#simple-list"
3631
onClick={(e) => {
3732
e.stopPropagation();
3833
onPresetClick(item.value);
@@ -42,7 +37,7 @@ const PresetsList = ({
4237
primaryTypographyProps={{
4338
fontSize: '14px',
4439
fontWeight: '500',
45-
lineHeight: '20px'
40+
lineHeight: '20px',
4641
}}
4742
primary={item.name}
4843
/>
@@ -55,9 +50,9 @@ const PresetsList = ({
5550

5651
const Presets = ({
5752
onPresetClick,
58-
presets
53+
presets,
5954
}: {
60-
onPresetClick: (date: Date) => void;
55+
onPresetClick: (date: Dayjs) => void;
6156
presets: PresetType[];
6257
}) => {
6358
return (

‎src/components/elements/dateManager/SearchForm.tsx

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { Box } from '@mui/system';
2+
import { createSvgIcon, TextField, Typography } from '@mui/material';
3+
import { DatePicker, TimeField } from '@mui/x-date-pickers';
4+
import React, { Dispatch, SetStateAction } from 'react';
5+
import { Dayjs } from 'dayjs';
6+
7+
interface SearchFormProps {
8+
setDisplayName: Dispatch<SetStateAction<string>>;
9+
setDisplayNameTouched: (value: boolean) => void;
10+
setDate: Dispatch<SetStateAction<Dayjs | null>>;
11+
setErrorDate: (value: boolean) => void;
12+
date: Dayjs | null;
13+
hour: Dayjs | null;
14+
displayName: string;
15+
setHour: Dispatch<SetStateAction<Dayjs | null>>;
16+
}
17+
export const SearchForm = ({
18+
setDisplayName,
19+
setDisplayNameTouched,
20+
setDate,
21+
setErrorDate,
22+
date,
23+
hour,
24+
setHour,
25+
displayName,
26+
}: SearchFormProps) => {
27+
return (
28+
<Box width={'50%'} py={2} px={1} display={'inline-grid'} gap={2}>
29+
<Box display={'inline-grid'} gap={1}>
30+
<Typography variant={'mediumBold'} component={'div'}>
31+
Date
32+
</Typography>
33+
<DatePicker
34+
slotProps={{
35+
day: {
36+
sx: {
37+
'&.MuiPickersDay-root.Mui-selected': {
38+
backgroundColor: '#5467de',
39+
},
40+
},
41+
},
42+
}}
43+
format="YYYY-MM-DD"
44+
value={date}
45+
onChange={setDate}
46+
onError={(reason, value) => {
47+
if (reason) {
48+
setErrorDate(true);
49+
} else {
50+
setErrorDate(false);
51+
}
52+
}}
53+
slots={{
54+
openPickerIcon: createSvgIcon(
55+
<svg
56+
width="18"
57+
height="18"
58+
viewBox="0 0 20 20"
59+
fill="#64748B"
60+
xmlns="http://www.w3.org/2000/svg"
61+
>
62+
<path
63+
fill-rule="evenodd"
64+
clip-rule="evenodd"
65+
d="M6.66666 1.66663C7.1269 1.66663 7.5 2.03972 7.5 2.49996V3.33329H12.5V2.49996C12.5 2.03972 12.8731 1.66663 13.3333 1.66663C13.7936 1.66663 14.1667 2.03972 14.1667 2.49996V3.33329H15.8333C17.214 3.33329 18.3333 4.45258 18.3333 5.83329V15.8333C18.3333 17.214 17.214 18.3333 15.8333 18.3333H4.16666C2.78595 18.3333 1.66666 17.214 1.66666 15.8333V5.83329C1.66666 4.45258 2.78595 3.33329 4.16666 3.33329H5.83333V2.49996C5.83333 2.03972 6.20643 1.66663 6.66666 1.66663ZM5.83333 4.99996H4.16666C3.70643 4.99996 3.33333 5.37306 3.33333 5.83329V15.8333C3.33333 16.2935 3.70643 16.6666 4.16666 16.6666H15.8333C16.2936 16.6666 16.6667 16.2935 16.6667 15.8333V5.83329C16.6667 5.37306 16.2936 4.99996 15.8333 4.99996H14.1667V5.83329C14.1667 6.29353 13.7936 6.66663 13.3333 6.66663C12.8731 6.66663 12.5 6.29353 12.5 5.83329V4.99996H7.5V5.83329C7.5 6.29353 7.1269 6.66663 6.66666 6.66663C6.20643 6.66663 5.83333 6.29353 5.83333 5.83329V4.99996ZM5 9.16663C5 8.70639 5.37309 8.33329 5.83333 8.33329H14.1667C14.6269 8.33329 15 8.70639 15 9.16663C15 9.62686 14.6269 9.99996 14.1667 9.99996H5.83333C5.37309 9.99996 5 9.62686 5 9.16663Z"
66+
fill="#64748B"
67+
/>
68+
</svg>,
69+
'calendar'
70+
),
71+
}}
72+
/>
73+
</Box>
74+
75+
<Box display={'inline-grid'} gap={1}>
76+
<Typography variant={'mediumBold'} component={'div'}>
77+
Time
78+
</Typography>
79+
<TimeField format="HH:mm:ss" value={hour} onChange={setHour} />
80+
</Box>
81+
82+
<Box display={'inline-grid'} gap={1}>
83+
<Typography variant={'mediumBold'} component={'div'}>
84+
Alias
85+
</Typography>
86+
<TextField
87+
placeholder={'as of YYYY-MM-DD hh:mm:ss'}
88+
value={displayName}
89+
onChange={(e) => {
90+
setDisplayName(e?.target?.value);
91+
setDisplayNameTouched(true);
92+
}}
93+
/>
94+
<Typography variant={'small'} color={'#64748B'}>
95+
Optional
96+
</Typography>
97+
</Box>
98+
</Box>
99+
);
100+
};

‎src/components/elements/dateManager/index.tsx

+68-128
Original file line numberDiff line numberDiff line change
@@ -1,161 +1,101 @@
1-
import { createSvgIcon, Divider, TextField, ThemeProvider, Typography } from '@mui/material';
1+
import { Divider, ThemeProvider, Typography } from '@mui/material';
22
import { Box } from '@mui/system';
33
import dayjs, { Dayjs } from 'dayjs';
44
import React, { useEffect, useState } from 'react';
5-
import { DatePicker, LocalizationProvider, TimeField } from '@mui/x-date-pickers';
5+
import { LocalizationProvider } from '@mui/x-date-pickers';
66
import { Button, ButtonStretch, ButtonVariant } from '../button';
77
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
88
import theme from '../../../theme';
9-
import PresetsContent from './Presets';
10-
import { Icon } from '../../icons';
9+
import PresetsContent, {PresetType} from './Presets';
10+
import { SearchForm } from './SearchForm';
1111

12-
const NoResultsState = () => {
13-
return (
14-
<Box display={'flex'} alignItems={'center'} justifyContent={'center'} flexDirection={'column'}>
15-
<Box>
16-
<Icon icon={'no-results'} />
17-
</Box>
18-
<Typography variant={'mediumBold'}>
19-
There are no metadata versions that match the search criteria. <br /> Please double-check
20-
the timestamp you entered and try again.
21-
</Typography>
22-
</Box>
23-
)
12+
export interface DateManagerProps {
13+
presets: PresetType[];
14+
addClickedHandler: ({ alias, value }: { alias: string; value: number }) => void;
15+
close: () => void;
16+
loading: boolean;
17+
}
18+
19+
const formattedDate = (
20+
date: string | number | dayjs.Dayjs | Date | null | undefined,
21+
hour: string | number | dayjs.Dayjs | Date | null | undefined
22+
) => {
23+
return `${dayjs(date).format('YYYY-MM-DD')} ${dayjs(hour).format('HH:mm:ss')}`;
2424
};
25-
export const DateManager = ({
26-
presets,
27-
showNoResults
28-
}: {
29-
presets: { name: string; value: Date }[];
30-
showNoResults?: boolean;
31-
}) => {
25+
26+
export const DateManager = ({ presets, addClickedHandler, close, loading }: DateManagerProps) => {
3227
const defaultDisplayName = `as of ${dayjs().format('YYYY-MM-DD')} ${dayjs().format('HH:mm:ss')}`;
33-
const [date, setDate] = useState<Dayjs | null>(dayjs());
34-
const [hour, setHour] = useState<Dayjs | null>(dayjs());
28+
29+
const [date, setDate] = useState<null | Dayjs>(dayjs());
30+
const [hour, setHour] = useState<null | Dayjs>(dayjs());
31+
const [value, setValue] = useState<number>(dayjs(formattedDate(date, hour)).unix());
3532
const [displayName, setDisplayName] = useState(defaultDisplayName);
3633
const [displayNameTouched, setDisplayNameTouched] = useState(false);
34+
const [errorDate, setErrorDate] = useState(false);
3735

3836
// update the display name unless the display name area is touched.
3937
useEffect(() => {
38+
const value = formattedDate(date, hour);
4039
if (!displayNameTouched) {
41-
setDisplayName(`as of ${date?.format('YYYY-MM-DD')} ${hour?.format('HH:mm:ss')}`);
40+
setDisplayName(`as of ${value}`);
4241
}
42+
setValue(dayjs(value).unix());
4343
}, [hour, date]);
4444

4545
return (
46-
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'en-gb'}>
47-
<ThemeProvider theme={theme}>
48-
<Box width={'530px'} height={'100%'} color={'#172D32'} px={1}>
49-
<Typography component={'div'} p={1} variant={'mediumBold'}>
50-
Compare to previous version
51-
</Typography>
52-
<Divider sx={{ backgroundColor: '#F8FAFC' }} />
46+
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'en-gb'}>
47+
<ThemeProvider theme={theme}>
48+
<Box width={'530px'} height={'100%'} color={'#172D32'} px={1}>
49+
<Typography component={'div'} p={1} variant={'mediumBold'}>
50+
Compare to previous version
51+
</Typography>
52+
<Divider sx={{ backgroundColor: '#F8FAFC' }} />
5353

54-
{showNoResults ? (
55-
<NoResultsState />
56-
) : (
5754
<Box display={'flex'}>
58-
<Box width={'50%'} py={2} px={1} display={'inline-grid'} gap={2}>
59-
<Box display={'inline-grid'} gap={1}>
60-
<Typography variant={'mediumBold'} component={'div'}>
61-
Date
62-
</Typography>
63-
<DatePicker
64-
slotProps={{
65-
day: {
66-
sx: {
67-
'&.MuiPickersDay-root.Mui-selected': {
68-
backgroundColor: '#5467de'
69-
}
70-
}
71-
}
72-
}}
73-
format="YYYY-MM-DD"
74-
value={date}
75-
onChange={setDate}
76-
slots={{
77-
openPickerIcon: createSvgIcon(
78-
<svg
79-
width="20"
80-
height="20"
81-
viewBox="0 0 20 20"
82-
fill="#64748B"
83-
xmlns="http://www.w3.org/2000/svg"
84-
>
85-
<path
86-
fill-rule="evenodd"
87-
clip-rule="evenodd"
88-
d="M6.66666 1.66663C7.1269 1.66663 7.5 2.03972 7.5 2.49996V3.33329H12.5V2.49996C12.5 2.03972 12.8731 1.66663 13.3333 1.66663C13.7936 1.66663 14.1667 2.03972 14.1667 2.49996V3.33329H15.8333C17.214 3.33329 18.3333 4.45258 18.3333 5.83329V15.8333C18.3333 17.214 17.214 18.3333 15.8333 18.3333H4.16666C2.78595 18.3333 1.66666 17.214 1.66666 15.8333V5.83329C1.66666 4.45258 2.78595 3.33329 4.16666 3.33329H5.83333V2.49996C5.83333 2.03972 6.20643 1.66663 6.66666 1.66663ZM5.83333 4.99996H4.16666C3.70643 4.99996 3.33333 5.37306 3.33333 5.83329V15.8333C3.33333 16.2935 3.70643 16.6666 4.16666 16.6666H15.8333C16.2936 16.6666 16.6667 16.2935 16.6667 15.8333V5.83329C16.6667 5.37306 16.2936 4.99996 15.8333 4.99996H14.1667V5.83329C14.1667 6.29353 13.7936 6.66663 13.3333 6.66663C12.8731 6.66663 12.5 6.29353 12.5 5.83329V4.99996H7.5V5.83329C7.5 6.29353 7.1269 6.66663 6.66666 6.66663C6.20643 6.66663 5.83333 6.29353 5.83333 5.83329V4.99996ZM5 9.16663C5 8.70639 5.37309 8.33329 5.83333 8.33329H14.1667C14.6269 8.33329 15 8.70639 15 9.16663C15 9.62686 14.6269 9.99996 14.1667 9.99996H5.83333C5.37309 9.99996 5 9.62686 5 9.16663Z"
89-
fill="#64748B"
90-
/>
91-
</svg>,
92-
'calendar'
93-
)
94-
}}
95-
/>
96-
</Box>
97-
98-
<Box display={'inline-grid'} gap={1}>
99-
<Typography variant={'mediumBold'} component={'div'}>
100-
Time
101-
</Typography>
102-
<TimeField format="HH:mm:ss" value={hour} onChange={setHour} />
103-
</Box>
104-
105-
<Box display={'inline-grid'} gap={1}>
106-
<Typography variant={'mediumBold'} component={'div'}>
107-
Change display name
108-
</Typography>
109-
<TextField
110-
placeholder={'as of YYYY-MM-DD hh:mm:ss'}
111-
value={displayName}
112-
onChange={(e) => {
113-
setDisplayName(e?.target?.value);
114-
setDisplayNameTouched(true);
115-
}}
116-
/>
117-
<Typography variant={'small'} color={'#64748B'}>
118-
Optional
119-
</Typography>
120-
</Box>
121-
</Box>
55+
<SearchForm
56+
setErrorDate={setErrorDate}
57+
setDisplayName={setDisplayName}
58+
setDisplayNameTouched={setDisplayNameTouched}
59+
setHour={setHour}
60+
hour={hour}
61+
setDate={setDate}
62+
date={date}
63+
displayName={displayName}
64+
/>
12265

12366
<Divider flexItem orientation={'vertical'} sx={{ backgroundColor: '#F8FAFC' }} />
12467

12568
<Box px={1} py={2} width={'50%'}>
126-
<PresetsContent
127-
presets={presets}
128-
onPresetClick={(value) => setDate(dayjs(value))}
129-
/>
69+
<PresetsContent presets={presets} onPresetClick={(value) => setDate(dayjs(value))} />
13070
</Box>
13171
</Box>
132-
)}
13372

134-
<Divider sx={{ backgroundColor: '#F8FAFC' }} />
135-
<Box p={1} display={'flex'} alignItems={'center'} justifyContent={'space-between'}>
136-
<Box display={'flex'} justifyContent={'flex-end'}>
137-
<Typography color={'#64748B'} component="div" variant={'small'}>
138-
Browser time: (GMT {dayjs(new Date()).format('Z')})
139-
</Typography>
140-
</Box>
73+
<Divider sx={{ backgroundColor: '#F8FAFC' }} />
74+
<Box p={1} display={'flex'} alignItems={'center'} justifyContent={'space-between'}>
75+
<Box display={'flex'} justifyContent={'flex-end'}>
76+
<Typography color={'#64748B'} component="div" variant={'small'}>
77+
Browser time: (GMT {dayjs(new Date()).format('Z')})
78+
</Typography>
79+
</Box>
14180

142-
<Box gap={1} display={'flex'} justifyContent={'flex-end'}>
143-
<Button
144-
stretch={ButtonStretch.Slim}
145-
variant={ButtonVariant.OutlineSecondary}
146-
onClick={() => {}}
147-
label={'Cancel'}
148-
/>
149-
<Button
150-
stretch={ButtonStretch.Slim}
151-
variant={ButtonVariant.Primary}
152-
onClick={() => {}}
153-
label={'Search'}
154-
/>
81+
<Box gap={1} display={'flex'} justifyContent={'flex-end'}>
82+
<Button
83+
stretch={ButtonStretch.Slim}
84+
variant={ButtonVariant.OutlineSecondary}
85+
onClick={close}
86+
label={'Cancel'}
87+
/>
88+
<Button
89+
stretch={ButtonStretch.Slim}
90+
variant={ButtonVariant.Primary}
91+
onClick={() => addClickedHandler({ alias: displayName, value })}
92+
disabled={!date || errorDate || loading}
93+
label={loading ? 'loading...' : 'Add Field'}
94+
/>
95+
</Box>
15596
</Box>
15697
</Box>
157-
</Box>
158-
</ThemeProvider>
159-
</LocalizationProvider>
98+
</ThemeProvider>
99+
</LocalizationProvider>
160100
);
161101
};

0 commit comments

Comments
 (0)