allow editing existing roles

src/routes/[id]/manage/+page.svelte

@@ -11,21 +11,21 @@
 
 <div class="flex items-center justify-between">
   <h2 class="text-3xl font-bold tracking-tight">Manage Facility</h2>
-  <Button href="/{data.facility.id}/manage/createrole">
-    <Plus class="mr-2 w-4 h-4" />
-    Create
-  </Button>
 </div>
 
 <div class="grid grid-cols-3 gap-4">
   <div>
     <Card.Root>
       <Card.Header>
         <Card.Title>Roles</Card.Title>
+        <Button href="/{data.facility.id}/manage/createrole">
+          <Plus class="mr-2 w-4 h-4" />
+          Create
+        </Button>
       </Card.Header>
       <Card.Content class="space-y-1.5">
         {#each data.facility.roles as role}
-          <Badge style="background-color: {color(role.color)};">
+          <Badge href="/{data.facility.id}/manage/editrole/{role.id}" style="background-color: {color(role.color)};">
             {role.name}
           </Badge>
         {/each}

src/routes/[id]/manage/editrole/[roleId]/+page.server.ts

@@ -0,0 +1,94 @@
+import type { PageServerLoad, Actions } from "./$types";
+import { can } from "$lib/perms/can";
+import { EDIT_DETAILS, PERMISSIONS } from "$lib/perms/permissions";
+import { redirect } from "sveltekit-flash-message/server";
+import { superValidate } from "sveltekit-superforms/server";
+import { formSchema } from "./schema";
+import { fail } from "@sveltejs/kit";
+import { loadUserData } from "$lib/auth";
+import prisma from "$lib/prisma";
+import { ulid } from "ulid";
+
+export const load: PageServerLoad = async ({ params, cookies }) => {
+  if (!can(EDIT_DETAILS)) {
+    redirect(
+      307,
+      `/${params.id}`,
+      { type: "error", message: "You don't have permission for that." },
+      cookies,
+    );
+  }
+
+  let role = await prisma.role.findUnique({
+    where: {
+      id: params.roleId,
+      facilityId: params.id
+    }
+  });
+
+  if (!role) {
+    return redirect(307, `/${params.id}/manage`, {type: 'error', message: 'Could not find that role.'}, cookies);
+  }
+
+  let form = await superValidate(formSchema);
+
+  form.data.color = role.color;
+  form.data.name = role.name;
+
+  for (let permission of role.permissions) {
+    // @ts-ignore
+    form.data[permission] = true;
+  }
+
+  console.log(form.data);
+
+  return {
+    form,
+  };
+};
+
+export const actions: Actions = {
+  default: async (event) => {
+    const form = await superValidate(event, formSchema);
+    if (!form.valid) {
+      return fail(400, {
+        form,
+      });
+    }
+
+    await loadUserData(event.cookies, event.params.id);
+
+    if (!can(EDIT_DETAILS)) {
+      return fail(403, {
+        form,
+      });
+    }
+
+    let permissions = [];
+
+    for (let permission of PERMISSIONS) {
+      if (Object.keys(form.data).includes(permission.id)) {
+        // @ts-ignore
+        if (form.data[permission.id] && can(permission)) {
+          permissions.push(permission.id);
+        }
+      }
+    }
+
+    await prisma.role.update({
+      where: {
+        id: event.params.roleId,
+        facilityId: event.params.id
+      },
+      data: {
+        name: form.data.name,
+        permissions,
+        color: form.data.color,
+      },
+    });
+
+    return {
+      form,
+    };
+  },
+};

src/routes/[id]/manage/editrole/[roleId]/+page.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import * as Card from "$lib/components/ui/card";
+  import type { PageData } from "./$types";
+  import * as Form from "$lib/components/ui/form";
+  import { formSchema } from "./schema";
+  import { goto, invalidateAll } from "$app/navigation";
+  import { toast } from "svelte-sonner";
+  import { page } from "$app/stores";
+  import { PERMISSIONS } from "$lib/perms/permissions";
+  import { can } from "$lib/perms/can";
+  import { Button, buttonVariants } from "$lib/components/ui/button";
+  import * as Dialog from "$lib/components/ui/dialog";
+
+  export let data: PageData;
+
+  let options = {
+    onUpdated: async ({ form }) => {
+      if (form.valid) {
+        await invalidateAll();
+        await goto(`/${$page.params.id}/manage`);
+        toast.success("Role updated!");
+      }
+    },
+  };
+  let deleteOpen = false;
+</script>
+
+<div class="flex items-center justify-between space-y-2">
+  <h2 class="text-3xl font-bold tracking-tight">Edit Role</h2>
+</div>
+
+<Form.Root
+  method="POST"
+  form={data.form}
+  schema={formSchema}
+  {options}
+  let:config>
+  <Form.Item>
+    <Form.Field {config} name="name">
+      <Form.Label>Role Name</Form.Label>
+      <Form.Input />
+      <Form.Validation />
+    </Form.Field>
+  </Form.Item>
+  <Form.Item>
+    <Form.Field {config} name="color">
+      <Form.Label>Role Color</Form.Label>
+      <Form.Input />
+      <Form.Validation />
+      <Form.Description>
+        A <a
+          class="underline-offset-4 underline"
+          href="https://tailwindcss.com/docs/customizing-colors">
+          Tailwind color
+        </a>
+        , e.g. sky-500
+      </Form.Description>
+    </Form.Field>
+  </Form.Item>
+  {#each PERMISSIONS as permission}
+    {#if can(permission)}
+      <Form.Field {config} name={permission.id}>
+        <Form.Item
+          class="mt-2 flex flex-row items-center justify-between rounded-lg border p-4">
+          <div class="space-y-0.5">
+            <Form.Label>{permission.id}</Form.Label>
+            <Form.Description>
+              {permission.description}
+            </Form.Description>
+          </div>
+          <Form.Switch checked={data.form.data[permission.id]} />
+        </Form.Item>
+      </Form.Field>
+    {/if}
+  {/each}
+  <Form.Button>Save</Form.Button>
+</Form.Root>

src/routes/[id]/manage/editrole/[roleId]/schema.ts

@@ -0,0 +1,16 @@
+import { z } from "zod";
+import { PERMISSIONS } from "$lib/perms/permissions";
+
+let baseSchema = {
+  name: z.string(),
+  color: z.string(),
+};
+
+for (let permission of PERMISSIONS) {
+  // @ts-ignore
+  baseSchema[permission.id] = z.preprocess((x) => String(x) === 'on', z.any());
+}
+
+export const formSchema = z.object(baseSchema);
+
+export type FormSchema = typeof formSchema;