IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

time picker was added

Browse Source
This commit is contained in:
Vladimir Khvan 2023-04-18 15:19:45 +05:00
parent 951da0ebfc
commit 203cab608f
1 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog.js
View File

@ -10,6 +10,7 @@ import { SelectedItem } from "@docspace/components";
import { Calendar } from "@docspace/components"; import { Calendar } from "@docspace/components";
import { Button } from "@docspace/components"; import { Button } from "@docspace/components";
import { TimePicker } from "../../sub-components/TimePicker";
const Footer = styled.div` const Footer = styled.div`
width: 100%; width: 100%;
@ -45,16 +46,26 @@ const RoundedButton = styled(Button)`
export const FilterDialog = (props) => { export const FilterDialog = (props) => {
const { visible, closeModal, applyFilters } = props; const { visible, closeModal, applyFilters } = props;
const [isCalendarOpen, setIsCalendarOpen] = useState(false); const [isCalendarOpen, setIsCalendarOpen] = useState(false);
const [isTimeOpen, setIsTimeOpen] = useState(false);
const toggleCalendar = () => setIsCalendarOpen((prevIsCalendarOpen) => !prevIsCalendarOpen); const toggleCalendar = () => setIsCalendarOpen((prevIsCalendarOpen) => !prevIsCalendarOpen);
const closeCalendar = () => setIsCalendarOpen(false); const closeCalendar = () => setIsCalendarOpen(false);
const showTimePicker = () => setIsTimeOpen(true);
const [filterSettings, setFilterSettings] = useState({ const [filterSettings, setFilterSettings] = useState({
deliveryDate: null, deliveryDate: null,
deliveryTime: null, deliveryFrom: moment().startOf("day"),
deliveryTo: moment().startOf("day"),
status: [], status: [],
}); });
const setDeliveryFrom = (date) =>
setFilterSettings((prevFilterSetting) => ({ ...prevFilterSetting, deliveryFrom: date }));
const setDeliveryTo = (date) =>
setFilterSettings((prevFilterSetting) => ({ ...prevFilterSetting, deliveryTo: date }));
const setDeliveryDate = (date) => const setDeliveryDate = (date) =>
setFilterSettings((prevFilterSetting) => ({ ...prevFilterSetting, deliveryDate: date })); setFilterSettings((prevFilterSetting) => ({ ...prevFilterSetting, deliveryDate: date }));
@ -98,14 +109,12 @@ export const FilterDialog = (props) => {
<Text isInline fontWeight={600} color="#A3A9AE"> <Text isInline fontWeight={600} color="#A3A9AE">
Select date Select date
</Text> </Text>
{isCalendarOpen ? ( {isCalendarOpen && (
<Calendar <Calendar
selectedDate={filterSettings.deliveryDate} selectedDate={filterSettings.deliveryDate}
setSelectedDate={setDeliveryDate} setSelectedDate={setDeliveryDate}
onChange={closeCalendar} onChange={closeCalendar}
/> />
) : (
<></>
)} )}
</span> </span>
) : ( ) : (
@ -114,23 +123,30 @@ export const FilterDialog = (props) => {
text={moment(filterSettings.deliveryDate).format("DD MMM YYYY")} text={moment(filterSettings.deliveryDate).format("DD MMM YYYY")}
/> />
)} )}
{/* {filterSettings.deliveryDate !== null ? ( {filterSettings.deliveryDate !== null &&
<span> (isTimeOpen ? (
<SelectorAddButton <span>
title="add" <Text isInline fontWeight={600} color="#A3A9AE">
onClick={toggleCalendar} From
style={{ marginRight: "8px" }} </Text>
/> <TimePicker date={filterSettings.deliveryFrom} setDate={setDeliveryFrom} />
<Text isInline fontWeight={600} color="#A3A9AE"> <Text isInline fontWeight={600} color="#A3A9AE">
Select Delivery time Before
</Text> </Text>
</span> <TimePicker date={filterSettings.deliveryTo} setDate={setDeliveryTo} />
) : ( </span>
<SelectedItem ) : (
onClose={deleteSelectedDate} <span>
text={moment(filterSettings.deliveryDate).format("DD MMM YYYY")} <SelectorAddButton
/> title="add"
)} */} onClick={showTimePicker}
style={{ marginRight: "8px" }}
/>
<Text isInline fontWeight={600} color="#A3A9AE">
Select Delivery time
</Text>
</span>
))}
</Selectors> </Selectors>
<Separator /> <Separator />
<Text fontWeight={600} fontSize="15px"> <Text fontWeight={600} fontSize="15px">