External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

working on restore form.

Browse Source
This commit is contained in:
killian-larcher
2024-11-17 19:13:51 +01:00
parent ff9e3ffa67
commit 5d19970373
19 changed files with 1381 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wrappers/Database/RestoreForm.tsx
+207
View File
@@ -0,0 +1,207 @@
"use client";
import {useState} from "react";
import {DateTimePicker} from "@/components/wrappers/daytime-picker";
import {Button} from "@/components/ui/button";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
useZodForm
} from "@/components/ui/form";
import {Input} from "@/components/ui/input";
import {RestoreSchema} from "@/components/wrappers/Database/restore-form.schema";
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
import {useMutation} from "@tanstack/react-query";
import {ComboBox, ComboBoxFormItem} from "@/components/wrappers/combobox";
import {Label} from "@/components/ui/label";
export type restoreFormProps = {
databaseToRestore: any
databases: any[]
backups: any[]
}
export const RestoreForm = (props: restoreFormProps) => {
const {databaseToRestore, databases, backups} = props
console.log("bacups", backups)
console.log("bacups", databaseToRestore)
const backupLocations = [
{
value: "remote-file",
label: "Remote File",
},
{
value: "desktop-file",
label: "Desktop File",
},
]
const executionModes = [
{
value: "immediate",
label: "Immediate",
},
{
value: "scheduled",
label: "Scheduled",
},
]
const [selectedDatabaseId, setSelectedDatabaseId] = useState(databaseToRestore.id)
const filteredBackups = backups.filter(backup => backup.databaseId == selectedDatabaseId)
const defaultValues = {
executionMode: "immediate",
backupLocation: "remote-file",
}
const form = useZodForm({
schema: RestoreSchema,
defaultValues: defaultValues
});
const values = form.getValues()
console.log("values", values)
const mutation = useMutation({})
return (
<div>
<Form
form={form}
onSubmit={async (values) => {
console.log(values);
}}
>
<FormField
control={form.control}
name="backupLocation"
render={({field}) => (
<FormItem>
<FormLabel>Backup location</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue/>
</SelectTrigger>
</FormControl>
<SelectContent>
{backupLocations.map((backupLocation, key) =>
<SelectItem key={key} value={backupLocation.value}>
{backupLocation.label}
</SelectItem>
)}
</SelectContent>
</Select>
<FormMessage/>
</FormItem>
)}
/>
{values.backupLocation == "remote-file" ?
<>
<div className="flex flex-col">
<Label>Database</Label>
<ComboBox
values={databases.map(database =>
({"value": database.id, "label": database.name})
)}
onValueChange={setSelectedDatabaseId}
defaultValue={selectedDatabaseId}
searchField
/>
</div>
<FormField
control={form.control}
name="remoteBackup"
render={({field}) => (
<FormItem className="flex flex-col">
<FormLabel>Remote backup</FormLabel>
<ComboBoxFormItem
values={filteredBackups.map(backup => ({
"value": backup.id,
"label": backup.createdAt.toString()
})
)}
{...field}
/>
<FormMessage/>
</FormItem>
)}
/>
</>
: null}
{values.backupLocation == "desktop-file" ?
<FormField
control={form.control}
name="uploadedBackupFile"
render={({field}) => (
<FormItem>
<FormLabel>File</FormLabel>
<FormControl>
<Input id="uploadedBackupFile" type="file" {...field}/>
</FormControl>
<FormMessage/>
</FormItem>
)}
/> : null}
<FormField
control={form.control}
name="executionMode"
render={({field}) => (
<FormItem>
<FormLabel>Execution mode</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue/>
</SelectTrigger>
</FormControl>
<SelectContent>
{executionModes.map((executionMode, key) =>
<SelectItem key={key} value={executionMode.value}>
{executionMode.label}
</SelectItem>
)}
</SelectContent>
</Select>
<FormMessage/>
</FormItem>
)}
/>
{values.executionMode == "scheduled" ?
<FormField
control={form.control}
name="scheduledDatetime"
render={({field}) => (
<FormItem>
<FormLabel>Scheduled date</FormLabel>
<FormControl>
<DateTimePicker value={field.value} onChange={field.onChange}/>
</FormControl>
<FormMessage/>
</FormItem>
)}
/> : null}
<Button type="submit">Launch restore</Button>
</Form>
</div>
)
}
src/components/wrappers/Database/restore-form.schema.ts
+24
View File
@@ -0,0 +1,24 @@
import {z} from "zod";
const ImmediateExecutionSchema = z.object({
executionMode: z.literal('immediate'),
});
const ScheduledExecutionSchema = z.object({
executionMode: z.literal('scheduled'),
scheduledDatetime: z.date(),
});
const CommonBackupSchema = z.union([ImmediateExecutionSchema, ScheduledExecutionSchema]);
const RemoteBackupSchema = z.object({
backupLocation: z.literal('remote-file'),
}).merge(CommonBackupSchema);
const DesktopBackupSchema = z.object({
backupLocation: z.literal('desktop-file'),
uploadedBackupFile: z.instanceof(File),
}).merge(CommonBackupSchema);
export const RestoreSchema = z.union([RemoteBackupSchema, DesktopBackupSchema]);
export type RestoreType = z.infer<typeof RestoreSchema>;