Skip to content

Commit

Permalink
vinvoor: admin day selector
Browse files Browse the repository at this point in the history
  • Loading branch information
Topvennie committed Aug 6, 2024
1 parent 87d0c00 commit 1662dbd
Show file tree
Hide file tree
Showing 15 changed files with 658 additions and 104 deletions.
2 changes: 1 addition & 1 deletion vingo/database/models.go
Original file line number Diff line number Diff line change
Expand Up @@ -77,5 +77,5 @@ type Season struct {

type StreakDay struct {
BaseModel
Date time.Time
Date time.Time `json:"date"`
}
4 changes: 2 additions & 2 deletions vingo/handlers/days.go
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import (
type Days struct{}

type DaysBody struct {
StartDate time.Time `json:"start_date"`
EndDate time.Time `json:"end_date"`
StartDate time.Time `json:"startDate"`
EndDate time.Time `json:"endDate"`
}

func (Days) CreateMultiple(c *fiber.Ctx) error {
Expand Down
6 changes: 1 addition & 5 deletions vinvoor/src/components/LoadingSkeleton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,5 @@ export const LoadingSkeleton: FC<LoadingSkeletonProps> = ({
children,
...props
}) => {
return loading ? (
<Skeleton animation="wave" height={300} {...props} />
) : (
children
);
return loading ? <Skeleton height={300} {...props} /> : children;
};
4 changes: 2 additions & 2 deletions vinvoor/src/overview/checkin/CheckIn.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const CheckIn = () => {
}}
>
<AlertTitle>Checked in</AlertTitle>
Nice of you to stop by!
Nice of you to stop by !
</Alert>
) : (
<Alert
Expand All @@ -32,7 +32,7 @@ export const CheckIn = () => {
}}
>
<AlertTitle>Not checked in</AlertTitle>
We miss you!
We miss you !
</Alert>
);
};
2 changes: 1 addition & 1 deletion vinvoor/src/scans/Scans.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { LoadingSkeleton } from "../components/LoadingSkeleton";
import { useFetch } from "../hooks/useFetch";
import { Card, convertCardJSON } from "../types/cards";
import { convertScanJSON, Scan } from "../types/scans";
import { ScansTableBody } from "./ScansBody";
import { ScansTableBody } from "./ScansTableBody";
import { ScansTableHead } from "./ScansTableHead";

export const Scans = () => {
Expand Down
File renamed without changes.
97 changes: 19 additions & 78 deletions vinvoor/src/settings/admin/Admin.tsx
Original file line number Diff line number Diff line change
@@ -1,89 +1,30 @@
import { Box, Button, Grid, Paper, Stack, Typography } from "@mui/material";
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs, { Dayjs } from "dayjs";
import { useSnackbar } from "notistack";
import { Dispatch, FC, SetStateAction, useState } from "react";
import { postApi } from "../../util/fetch";
import { Alert, Grid, Typography } from "@mui/material";
import { FC } from "react";
import { Days } from "./days/Days";

export const Admin: FC = () => {
const [startDate, setStartDate] = useState<Dayjs | null>(dayjs());
const [endDate, setEndDate] = useState<Dayjs | null>(dayjs());

const { enqueueSnackbar } = useSnackbar();

const handleDateChange = (
date: Dayjs | null,
setter: Dispatch<SetStateAction<Dayjs | null>>
) => setter(date);

const handleOnClick = () => {
if (!startDate || !endDate) {
enqueueSnackbar("Please select a start and end date", {
variant: "error",
});
return;
}

postApi("admin/days", {
start_date: startDate.toISOString(),
end_date: endDate.toISOString(),
})
.then(() =>
enqueueSnackbar("successfully saved days", {
variant: "success",
})
)
.catch((error) =>
// This is the admin page so just show the error
enqueueSnackbar(`Failed to save days: ${error}`, {
variant: "error",
})
);
};

return (
<Grid
container
alignItems="center"
justifyContent="space-between"
columnSpacing={4}
rowSpacing={1}
rowSpacing={6}
>
<Grid item xs={12} md={6}>
<Paper elevation={4} sx={{ p: "10px" }}>
<Stack
display="flex"
justifyContent="center"
alignItems="center"
spacing={4}
>
<Typography variant="h4">Set days</Typography>
<Stack direction="row" spacing={2}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
label="Start Date"
value={startDate}
onChange={(newValue) =>
handleDateChange(newValue, setStartDate)
}
/>
<DatePicker
label="End Date"
value={endDate}
onChange={(newValue) =>
handleDateChange(newValue, setEndDate)
}
/>
</LocalizationProvider>
</Stack>
<Box display="flex" justifyContent="end" width="100%">
<Button variant="outlined" onClick={handleOnClick}>
Save
</Button>
</Box>
</Stack>
</Paper>
<Grid item xs={12}>
<Alert
variant="outlined"
color="error"
icon={false}
sx={{ display: "flex", justifyContent: "center" }}
>
<Typography variant="h4">
This page doesn't ask for confirmation when modifying
data !
</Typography>
</Alert>
</Grid>
<Grid item xs={12}>
<Days />
</Grid>
</Grid>
);
Expand Down
63 changes: 63 additions & 0 deletions vinvoor/src/settings/admin/days/Days.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { Grid } from "@mui/material";
import { useSnackbar } from "notistack";
import { createContext, Dispatch, SetStateAction, useState } from "react";
import { LoadingSkeleton } from "../../../components/LoadingSkeleton";
import { useFetch } from "../../../hooks/useFetch";
import { convertDayJSON, Day } from "../../../types/days";
import { getApi } from "../../../util/fetch";
import { DaysAdd } from "./DaysAdd";
import { DaysTable } from "./DaysTable";

interface DayContextProps {
days: readonly Day[];
setDays: Dispatch<SetStateAction<readonly Day[]>>;
reloadDays: () => void;
}

export const DayContext = createContext<DayContextProps>({
days: [],
setDays: () => {},
reloadDays: () => null,
});

export const Days = () => {
const [days, setDays] = useState<readonly Day[]>([]);
const { loading } = useFetch<readonly Day[]>(
"admin/days",
setDays,
convertDayJSON
);

const { enqueueSnackbar } = useSnackbar();

const reloadDays = () => {
getApi<readonly Day[]>("admin/days", convertDayJSON)
.then((data) => setDays(data))
// This is the admin page so just show the error
.catch((error) =>
enqueueSnackbar(`Error getting all days: ${error}`, {
variant: "error",
})
);
};

return (
<LoadingSkeleton loading={loading}>
<DayContext.Provider value={{ days, setDays, reloadDays }}>
<Grid
container
justifyContent="space-between"
columnSpacing={4}
rowSpacing={6}
>
<Grid item xs={12} md={6}>
<DaysTable />
</Grid>
<Grid item xs={12} md={6}>
<DaysAdd />
</Grid>
</Grid>
</DayContext.Provider>
</LoadingSkeleton>
);
};
88 changes: 88 additions & 0 deletions vinvoor/src/settings/admin/days/DaysAdd.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { Box, Button, Paper, Stack } from "@mui/material";
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs, { Dayjs } from "dayjs";
import { useSnackbar } from "notistack";
import { Dispatch, SetStateAction, useContext, useState } from "react";
import { TypographyG } from "../../../components/TypographyG";
import { postApi } from "../../../util/fetch";
import { DayContext } from "./Days";
export const DaysAdd = () => {
const { reloadDays } = useContext(DayContext);
const [startDate, setStartDate] = useState<Dayjs | null>(dayjs());
const [endDate, setEndDate] = useState<Dayjs | null>(dayjs());

const { enqueueSnackbar } = useSnackbar();

const handleDateChange = (
date: Dayjs | null,
setter: Dispatch<SetStateAction<Dayjs | null>>
) => setter(date);

const handleOnClick = () => {
if (!startDate || !endDate) {
enqueueSnackbar("Please select a start and end date", {
variant: "error",
});
return;
}

postApi("admin/days", {
startDate: startDate.toISOString(),
endDate: endDate.toISOString(),
})
.then(() => {
enqueueSnackbar("successfully saved days", {
variant: "success",
});
reloadDays();
})
.catch((error) =>
// This is the admin page so just show the error
enqueueSnackbar(`Failed to save days: ${error}`, {
variant: "error",
})
);
};

return (
<Paper elevation={4} sx={{ py: 2 }}>
<Stack
display="flex"
justifyContent="center"
alignItems="center"
spacing={4}
>
<TypographyG variant="h4">Add days</TypographyG>
<Stack direction="row" spacing={2}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
label="Start Date"
value={startDate}
onChange={(newValue) =>
handleDateChange(newValue, setStartDate)
}
/>
<DatePicker
label="End Date"
value={endDate}
onChange={(newValue) =>
handleDateChange(newValue, setEndDate)
}
/>
</LocalizationProvider>
</Stack>
<Box
display="flex"
justifyContent="end"
width="100%"
sx={{ pr: 2 }}
>
<Button variant="outlined" onClick={handleOnClick}>
Add
</Button>
</Box>
</Stack>
</Paper>
);
};
Loading

0 comments on commit 1662dbd

Please sign in to comment.