fix: cron.ts (#365)

Co-authored-by: charles-gauthereau <charles.gauthereau@soluce-technologies.com>
This commit is contained in:
Charles GTE
2026-07-09 09:36:44 +02:00
committed by GitHub
co-authored by charles-gauthereau
parent 5e4a430049
commit 3e8a6d5006
3 changed files with 79 additions and 18 deletions
@@ -1,4 +1,4 @@
import { useState } from "react";
import { useEffect, useState } from "react";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Input } from "@/components/ui/input";
@@ -12,6 +12,7 @@ export const AdvancedCronSelect = ({
value,
defaultValue,
onValueChange,
onValidityChange,
}: {
id: string;
label: string;
@@ -20,11 +21,21 @@ export const AdvancedCronSelect = ({
value: string;
defaultValue: string;
onValueChange: (value: string) => void;
onValidityChange?: (valid: boolean) => void;
}) => {
const [isAdvanced, setIsAdvanced] = useState(false);
const [customValue, setCustomValue] = useState(defaultValue || value);
const [customValue, setCustomValue] = useState(value || defaultValue);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
setCustomValue(value || defaultValue);
}, [value, defaultValue]);
useEffect(() => {
const valid = !isAdvanced || isValidCronPart(type, customValue);
onValidityChange?.(valid);
}, [isAdvanced, customValue, type, onValidityChange]);
const handleBlur = () => {
if (customValue.trim() === "") {
setIsAdvanced(false);
@@ -46,7 +57,7 @@ export const AdvancedCronSelect = ({
// @ts-ignore
id={id}
className="col-span-4"
value={defaultValue}
value={value}
onValueChange={(value: string) => {
if (value === "advanced") {
setIsAdvanced(true);
@@ -2,7 +2,7 @@ import {AdvancedCronSelect} from "@/features/database/components/cron-advanced-s
import {updateDatabaseBackupPolicyAction} from "@/features/database/actions/cron.action";
import {useMutation, useQueryClient} from "@tanstack/react-query";
import {useRouter} from "next/navigation";
import {useState} from "react";
import {useCallback, useState} from "react";
import {toast} from "sonner";
import {Button} from "@/components/ui/button";
import {Separator} from "@/components/ui/separator";
@@ -14,10 +14,17 @@ export type CronInputProps = {
};
export const CronInput = ({database, onSuccess}: CronInputProps) => {
const [cron, setCron] = useState<string>(database.backupPolicy ?? "* * * * *");
const [cron, setCron] = useState<string>(database.backupPolicy ?? "0 0 * * *");
const [fieldValidity, setFieldValidity] = useState<Record<string, boolean>>({});
const queryClient = useQueryClient();
const router = useRouter();
const setFieldValid = useCallback((id: string) => (valid: boolean) => {
setFieldValidity((prev) => (prev[id] === valid ? prev : {...prev, [id]: valid}));
}, []);
const hasInvalidField = Object.values(fieldValidity).some((valid) => !valid);
const updateBackupPolicy = useMutation({
mutationFn: (value: string) => updateDatabaseBackupPolicyAction({databaseId: database.id, backupPolicy: value}),
onSuccess: () => {
@@ -48,38 +55,42 @@ export const CronInput = ({database, onSuccess}: CronInputProps) => {
<AdvancedCronSelect
id="minute"
label="Minute"
options={Array.from({length: 60}, (_, i) => String(i).padStart(2, "0"))}
options={Array.from({length: 60}, (_, i) => String(i))}
type="minute"
value={cron.split(" ")[0]}
defaultValue={cron.split(" ")[0]}
onValueChange={(value) => handleChangeCron("minute", value)}
onValidityChange={setFieldValid("minute")}
/>
<AdvancedCronSelect
id="hour"
label="Hour"
options={Array.from({length: 24}, (_, i) => String(i).padStart(2, "0"))}
options={Array.from({length: 24}, (_, i) => String(i))}
type="hour"
value={cron.split(" ")[1]}
defaultValue={cron.split(" ")[1]}
onValueChange={(value) => handleChangeCron("hour", value)}
onValidityChange={setFieldValid("hour")}
/>
<AdvancedCronSelect
id="day-of-month"
label="Day of Month"
options={Array.from({length: 31}, (_, i) => String(i + 1).padStart(2, "0"))}
options={Array.from({length: 31}, (_, i) => String(i + 1))}
type="day-of-month"
value={cron.split(" ")[2]}
defaultValue={cron.split(" ")[2]}
onValueChange={(value) => handleChangeCron("day-of-month", value)}
onValidityChange={setFieldValid("day-of-month")}
/>
<AdvancedCronSelect
id="month"
label="Month"
options={["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]}
options={Array.from({length: 12}, (_, i) => String(i + 1))}
type="month"
value={cron.split(" ")[3]}
defaultValue={cron.split(" ")[3]}
onValueChange={(value) => handleChangeCron("month", value)}
onValidityChange={setFieldValid("month")}
/>
<AdvancedCronSelect
id="day-of-week"
@@ -89,6 +100,7 @@ export const CronInput = ({database, onSuccess}: CronInputProps) => {
value={cron.split(" ")[4]}
defaultValue={cron.split(" ")[4]}
onValueChange={(value) => handleChangeCron("day-of-week", value)}
onValidityChange={setFieldValid("day-of-week")}
/>
<Separator/>
<div className="grid gap-2">
@@ -113,6 +125,7 @@ export const CronInput = ({database, onSuccess}: CronInputProps) => {
onClick={async () => {
await handleUpdateCron(cron);
}}
disabled={hasInvalidField || updateBackupPolicy.isPending}
>
Save cron
</Button>