Initial commit

src/pages/DomainsPage.tsx

@@ -0,0 +1,93 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  Button,
+  Field,
+  Input,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "@fluentui/react-components";
+import { useState } from "react";
+import { portalApi } from "../api/portalApi";
+import { DataState } from "../components/DataState";
+import { FormActions, FormGrid, FormSection } from "../components/FormSection";
+import { PageHeader } from "../components/PageHeader";
+
+export function DomainsPage() {
+  const queryClient = useQueryClient();
+  const [name, setName] = useState("");
+  const [fqdn, setFqdn] = useState("");
+  const [netBIOS, setNetBIOS] = useState("");
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["domains"],
+    queryFn: ({ signal }) => portalApi.getDomains(signal),
+  });
+  const addDomain = useMutation({
+    mutationFn: portalApi.addDomain,
+    onSuccess: async () => {
+      setName("");
+      setFqdn("");
+      setNetBIOS("");
+      await queryClient.invalidateQueries({ queryKey: ["domains"] });
+    },
+  });
+
+  return (
+    <>
+      <PageHeader title="Domains" description="Verfuegbare Active Directory Domaenen." />
+      <FormSection
+        onSubmit={(event) => {
+          event.preventDefault();
+          addDomain.mutate({ fqdn, name, netBIOS });
+        }}
+      >
+        <FormGrid>
+          <Field label="Name" required>
+            <Input value={name} onChange={(_, data) => setName(data.value)} />
+          </Field>
+          <Field label="FQDN" required>
+            <Input value={fqdn} onChange={(_, data) => setFqdn(data.value)} />
+          </Field>
+          <Field label="NetBIOS" required validationMessage={addDomain.error?.message}>
+            <Input value={netBIOS} onChange={(_, data) => setNetBIOS(data.value)} />
+          </Field>
+        </FormGrid>
+        <FormActions>
+          <Button
+            appearance="primary"
+            disabled={!name || !fqdn || !netBIOS || addDomain.isPending}
+            type="submit"
+          >
+            Add domain
+          </Button>
+        </FormActions>
+      </FormSection>
+      <DataState isLoading={isLoading} error={error} />
+      {data && (
+        <Table aria-label="Domains">
+          <TableHeader>
+            <TableRow>
+              <TableHeaderCell>Name</TableHeaderCell>
+              <TableHeaderCell>FQDN</TableHeaderCell>
+              <TableHeaderCell>NetBIOS</TableHeaderCell>
+              <TableHeaderCell>Id</TableHeaderCell>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map((domain) => (
+              <TableRow key={domain.id}>
+                <TableCell>{domain.name}</TableCell>
+                <TableCell>{domain.fqdn}</TableCell>
+                <TableCell>{domain.netBIOS}</TableCell>
+                <TableCell>{domain.id}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </>
+  );
+}