chaulmark/caddy-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rough copy of edit menu

Browse source
This commit is contained in:
brian 2023-11-18 07:31:36 -05:00
parent c89a6e7758
commit c5d5c94125
3 changed files with 50 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
components/RouteCards.tsx
View file

@ -10,8 +10,9 @@ import { deleteRoute } from '@/lib/clientActions';
import { Dialog, DialogContent, DialogHeader } from './ui/dialog'; import { Dialog, DialogContent, DialogHeader } from './ui/dialog';
import { DialogDescription, DialogTitle } from '@radix-ui/react-dialog'; import { DialogDescription, DialogTitle } from '@radix-ui/react-dialog';
import { Form, FormControl, FormField, FormItem, FormLabel } from './ui/form'; import { Form, FormControl, FormField, FormItem, FormLabel } from './ui/form';
import { useForm } from 'react-hook-form'; import { useFieldArray, useForm } from 'react-hook-form';
import { Input } from './ui/input'; import { Input } from './ui/input';
import { get, set } from 'lodash';
export default function RouteCards({ routes }: { routes: Route[] }) { export default function RouteCards({ routes }: { routes: Route[] }) {
@ -41,7 +42,7 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
return ( return (
<> <>
<EditRouteDialog route={route} /> {route && <EditRouteDialog route={route} />}
{ {
routes.map((route, index) => ( routes.map((route, index) => (
<div key={index} className='p-2'> <div key={index} className='p-2'>
@ -68,49 +69,42 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
) )
} }
export function EditRouteDialog({ route }: { route?: Route }) { export function EditRouteDialog({ route }: { route: Route }) {
const [modifiedRoute, setRoute] = useState(route);
let validHosts: any[] = getHosts(route);
let validUpstreams: any[] = getRouteUpstreams(route).map((upstream) => upstream.dial);
const form = useForm({ const form = useForm({
defaultValues: { values: {
handler: route?.handle[0].handler, handler: route.handle[0].routes[0].handle[0].handler,
upstreams: route?.handle[0].upstreams, upstreams: validUpstreams,
//hosts: route?.match[0].host, hosts: validHosts,
} }
}); });
let test: RouteHandle = { const { fields: upstreams, append: appendUpstreams } = useFieldArray({
handle: [ control: form.control,
{ name: "upstreams",
handler: 'subroutes', })
routes: [
{
handle: [
{
handler: 'reverse_proxy',
upstreams: [
{
dial: 'localhost:8080'
}
]
}
]
}
]
}
],
match: [ const { fields: hosts, append: appendHosts } = useFieldArray({
{ control: form.control,
host: [ name: "hosts",
'example.com' })
]
} let onSubmit = ((data: any) => {
]
})
console.log(getHosts(route))
let handleChange = (value: any, path: any) => {
let updatedRoute = set(modifiedRoute, path, value.target.value);
setRoute(updatedRoute);
console.log(value.target.name, value.target.value)
form.setValue(value.target.name, value.target.value)
} }
let onSubmit = ((data: any) => {
console.log('Original Route', JSON.stringify(route))
console.log(data)
})
return ( return (
<Dialog open={route as Route != null}> <Dialog open={route as Route != null}>
@ -124,46 +118,47 @@ export function EditRouteDialog({ route }: { route?: Route }) {
<FormItem> <FormItem>
<FormLabel>Handler</FormLabel> <FormLabel>Handler</FormLabel>
<FormControl> <FormControl>
<Input {...field} value={route?.handle[0].handler} /> <Input {...field} onChange={(value) => handleChange(value, `modifiedRoute.handle[0].handler`)} />
</FormControl> </FormControl>
</FormItem> </FormItem>
)} )}
></FormField> ></FormField>
{route ? getRouteUpstreams(route)?.map((upstream, index) => ( {upstreams.map((upstream, index) => (
<FormField <FormField
key={index} key={upstream.id}
control={form.control} control={form.control}
name="upstreams" name={`upstreams.${index}`}
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Upstream {index + 1}</FormLabel> <FormLabel>Upstream {index + 1}</FormLabel>
<FormControl> <FormControl>
<Input {...field} value={upstream.dial} /> <Input {...field} onChange={(value) => handleChange(value, `modifiedRoute.handle[0].upstreams`)} />
</FormControl> </FormControl>
</FormItem> </FormItem>
)} )}
> >
</FormField> </FormField>
)) : <></>} ))}
{route ? getHosts(route)?.map((host, index) => ( {hosts.map((host, index) => (
<FormField <FormField
key={index} key={host.id}
control={form.control} control={form.control}
name="hosts" name={`hosts.${index}`}
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Host {index + 1}</FormLabel> <FormLabel>Host {index + 1}</FormLabel>
<FormControl> <FormControl>
<Input {...field} defaultValue={host} /> <Input {...field} onChange={(value) => handleChange(value, `modifiedRoute.handle[0].hosts`)} />
</FormControl> </FormControl>
</FormItem> </FormItem>
)} )}
> >
</FormField> </FormField>
)) : <></>} ))}
<Button type="submit">Save</Button> <Button type="submit">Save</Button>
</form> </form>
</Form> </Form>

4
lib/types.ts
View file

@ -15,8 +15,8 @@ interface Match {
interface Handle { interface Handle {
handler: string; handler: string;
upstreams?: Upstream[]; upstreams: Upstream[];
routes?: Route[]; routes: Route[];
} }
interface Upstream { interface Upstream {

4
package.json
View file

@ -18,8 +18,12 @@
"@radix-ui/react-navigation-menu": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-toast": "^1.1.5",
"@types/lodash": "^4.14.201",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.0.0", "clsx": "^2.0.0",
"lodash": "^4.17.21",
"lodash.get": "^4.4.2",
"lodash.set": "^4.3.2",
"next": "14.0.2", "next": "14.0.2",
"next-themes": "^0.2.1", "next-themes": "^0.2.1",
"react": "^18", "react": "^18",