|
@@ -4,16 +4,85 @@ import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
|
|
import { Button } from "@app/components/ui/button";
|
|
import { Button } from "@app/components/ui/button";
|
|
import { useOrgContext } from "@app/hooks/useOrgContext";
|
|
import { useOrgContext } from "@app/hooks/useOrgContext";
|
|
import { userOrgUserContext } from "@app/hooks/useOrgUserContext";
|
|
import { userOrgUserContext } from "@app/hooks/useOrgUserContext";
|
|
|
|
+import { useToast } from "@app/hooks/useToast";
|
|
import { useState } from "react";
|
|
import { useState } from "react";
|
|
|
|
+import {
|
|
|
|
+ Form,
|
|
|
|
+ FormControl,
|
|
|
|
+ FormDescription,
|
|
|
|
+ FormField,
|
|
|
|
+ FormItem,
|
|
|
|
+ FormLabel,
|
|
|
|
+ FormMessage
|
|
|
|
+} from "@/components/ui/form";
|
|
|
|
+import { Input } from "@/components/ui/input";
|
|
|
|
+import { z } from "zod";
|
|
|
|
+import { useForm } from "react-hook-form";
|
|
|
|
+import { zodResolver } from "@hookform/resolvers/zod";
|
|
|
|
+import { createApiClient } from "@app/api";
|
|
|
|
+import { useEnvContext } from "@app/hooks/useEnvContext";
|
|
|
|
+import { formatAxiosError } from "@app/lib/utils";
|
|
|
|
+import { AlertTriangle, Trash2 } from "lucide-react";
|
|
|
|
+import {
|
|
|
|
+ Card,
|
|
|
|
+ CardContent,
|
|
|
|
+ CardFooter,
|
|
|
|
+ CardHeader,
|
|
|
|
+ CardTitle
|
|
|
|
+} from "@/components/ui/card";
|
|
|
|
+
|
|
|
|
+const GeneralFormSchema = z.object({
|
|
|
|
+ name: z.string()
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
|
|
|
|
|
|
export default function GeneralPage() {
|
|
export default function GeneralPage() {
|
|
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
|
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
|
|
|
|
|
const { orgUser } = userOrgUserContext();
|
|
const { orgUser } = userOrgUserContext();
|
|
const { org } = useOrgContext();
|
|
const { org } = useOrgContext();
|
|
|
|
+ const { toast } = useToast();
|
|
|
|
+ const api = createApiClient(useEnvContext());
|
|
|
|
+
|
|
|
|
+ const form = useForm<GeneralFormValues>({
|
|
|
|
+ resolver: zodResolver(GeneralFormSchema),
|
|
|
|
+ defaultValues: {
|
|
|
|
+ name: org?.org.name
|
|
|
|
+ },
|
|
|
|
+ mode: "onChange"
|
|
|
|
+ });
|
|
|
|
|
|
async function deleteOrg() {
|
|
async function deleteOrg() {
|
|
- console.log("not implemented");
|
|
|
|
|
|
+ await api
|
|
|
|
+ .delete(`/org/${org?.org.orgId}`)
|
|
|
|
+ .catch((e) => {
|
|
|
|
+ toast({
|
|
|
|
+ variant: "destructive",
|
|
|
|
+ title: "Failed to delete org",
|
|
|
|
+ description: formatAxiosError(
|
|
|
|
+ e,
|
|
|
|
+ "An error occurred while deleting the org."
|
|
|
|
+ ),
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ async function onSubmit(data: GeneralFormValues) {
|
|
|
|
+ await api
|
|
|
|
+ .post(`/org/${org?.org.orgId}`, {
|
|
|
|
+ name: data.name
|
|
|
|
+ })
|
|
|
|
+ .catch((e) => {
|
|
|
|
+ toast({
|
|
|
|
+ variant: "destructive",
|
|
|
|
+ title: "Failed to update org",
|
|
|
|
+ description: formatAxiosError(
|
|
|
|
+ e,
|
|
|
|
+ "An error occurred while updating the org."
|
|
|
|
+ )
|
|
|
|
+ });
|
|
|
|
+ });
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
return (
|
|
@@ -46,15 +115,55 @@ export default function GeneralPage() {
|
|
title="Delete organization"
|
|
title="Delete organization"
|
|
/>
|
|
/>
|
|
|
|
|
|
- <div className="space-y-8">
|
|
|
|
- {orgUser.isOwner ? (
|
|
|
|
- <Button onClick={() => setIsDeleteModalOpen(true)}>
|
|
|
|
- Delete Organization
|
|
|
|
|
|
+ <Form {...form}>
|
|
|
|
+ <form
|
|
|
|
+ onSubmit={form.handleSubmit(onSubmit)}
|
|
|
|
+ className="space-y-8 max-w-lg"
|
|
|
|
+ >
|
|
|
|
+ <FormField
|
|
|
|
+ control={form.control}
|
|
|
|
+ name="name"
|
|
|
|
+ render={({ field }) => (
|
|
|
|
+ <FormItem>
|
|
|
|
+ <FormLabel>Name</FormLabel>
|
|
|
|
+ <FormControl>
|
|
|
|
+ <Input {...field} />
|
|
|
|
+ </FormControl>
|
|
|
|
+ <FormDescription>
|
|
|
|
+ This is the display name of the org
|
|
|
|
+ </FormDescription>
|
|
|
|
+ <FormMessage />
|
|
|
|
+ </FormItem>
|
|
|
|
+ )}
|
|
|
|
+ />
|
|
|
|
+ <Button type="submit">Save Changes</Button>
|
|
|
|
+ </form>
|
|
|
|
+ </Form>
|
|
|
|
+
|
|
|
|
+ <Card className="max-w-lg border-red-900 mt-5">
|
|
|
|
+ <CardHeader>
|
|
|
|
+ <CardTitle className="flex items-center gap-2 text-red-600">
|
|
|
|
+ <AlertTriangle className="h-5 w-5" />
|
|
|
|
+ Danger Zone
|
|
|
|
+ </CardTitle>
|
|
|
|
+ </CardHeader>
|
|
|
|
+ <CardContent>
|
|
|
|
+ <p className="text-sm mb-4">
|
|
|
|
+ Once you delete this org, there is no going back. Please
|
|
|
|
+ be certain.
|
|
|
|
+ </p>
|
|
|
|
+ </CardContent>
|
|
|
|
+ <CardFooter className="flex justify-end gap-2">
|
|
|
|
+ <Button
|
|
|
|
+ variant="destructive"
|
|
|
|
+ onClick={() => setIsDeleteModalOpen(true)}
|
|
|
|
+ className="flex items-center gap-2"
|
|
|
|
+ >
|
|
|
|
+ <Trash2 className="h-4 w-4" />
|
|
|
|
+ Delete
|
|
</Button>
|
|
</Button>
|
|
- ) : (
|
|
|
|
- <p>Nothing to see here</p>
|
|
|
|
- )}
|
|
|
|
- </div>
|
|
|
|
|
|
+ </CardFooter>
|
|
|
|
+ </Card>
|
|
</>
|
|
</>
|
|
);
|
|
);
|
|
}
|
|
}
|