feat: dashboard v2, esm, upgrades (#211)
* esm * wip * wip * wip * wip * wip * wip * subscription notice * wip * wip * wip * fix envs * fix: update docker build * fix * esm/types * delete dashboard :D * add patches to dockerfiles * update packages + catalogs + ts * wip * remove native libs * ts * improvements * fix redirects and fetching session * try fix favicon * fixes * fix * order and resize reportds within a dashboard * improvements * wip * added userjot to dashboard * fix * add op * wip * different cache key * improve date picker * fix table * event details loading * redo onboarding completely * fix login * fix * fix * extend session, billing and improve bars * fix * reduce price on 10M
This commit is contained in:
committed by
GitHub
parent
436e81ecc9
commit
81a7e5d62e
69
apps/start/src/modals/edit-client.tsx
Normal file
69
apps/start/src/modals/edit-client.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import { ButtonContainer } from '@/components/button-container';
|
||||
import { InputWithLabel } from '@/components/forms/input-with-label';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useTRPC } from '@/integrations/trpc/react';
|
||||
import { handleError } from '@/integrations/trpc/react';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useRouter } from '@tanstack/react-router';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { toast } from 'sonner';
|
||||
import { z } from 'zod';
|
||||
|
||||
import type { IServiceClient } from '@openpanel/db';
|
||||
|
||||
import { popModal } from '.';
|
||||
import { ModalContent, ModalHeader } from './Modal/Container';
|
||||
|
||||
type EditClientProps = IServiceClient;
|
||||
|
||||
const validator = z.object({
|
||||
id: z.string().min(1),
|
||||
name: z.string().min(1),
|
||||
});
|
||||
|
||||
type IForm = z.infer<typeof validator>;
|
||||
|
||||
export default function EditClient({ id, name }: EditClientProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const { register, handleSubmit, reset, formState, control, setError } =
|
||||
useForm<IForm>({
|
||||
resolver: zodResolver(validator),
|
||||
defaultValues: {
|
||||
id,
|
||||
name,
|
||||
},
|
||||
});
|
||||
|
||||
const trpc = useTRPC();
|
||||
const mutation = useMutation(
|
||||
trpc.client.update.mutationOptions({
|
||||
onError: handleError,
|
||||
onSuccess() {
|
||||
reset();
|
||||
toast('Success', {
|
||||
description: 'Client updated.',
|
||||
});
|
||||
popModal();
|
||||
queryClient.invalidateQueries(trpc.client.list.pathFilter());
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
return (
|
||||
<ModalContent>
|
||||
<ModalHeader title="Edit client" />
|
||||
<form onSubmit={handleSubmit((values) => mutation.mutate(values))}>
|
||||
<InputWithLabel label="Name" placeholder="Name" {...register('name')} />
|
||||
<ButtonContainer>
|
||||
<Button type="button" variant="outline" onClick={() => popModal()}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={!formState.isDirty}>
|
||||
Save
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
</form>
|
||||
</ModalContent>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user