Added group checkbox tests

Author: ciscoheat

src/routes/tests/multiselect-2/+page.server.ts

@@ -0,0 +1,36 @@
+import type { PageServerLoad } from './$types';
+import { superValidate } from '$lib/server';
+import { schema } from './schema';
+import { error } from '@sveltejs/kit';
+import type { z } from 'zod';
+
+const groups = [
+  {
+    id: 1,
+    name: 'Group 1',
+    start_date: new Date(),
+    end_date: new Date(),
+    course_id: 10
+  },
+  {
+    id: 2,
+    name: 'Group 2',
+    start_date: new Date(),
+    end_date: new Date(),
+    course_id: 20
+  }
+];
+
+export const load: PageServerLoad = async () => {
+  const account: z.infer<typeof schema> = {
+    email: '[email protected]',
+    name: 'Test',
+    group: [groups[0]]
+  };
+
+  if (!account) throw error(404);
+
+  const form = await superValidate(account, schema);
+
+  return { form, groups };
+};

src/routes/tests/multiselect-2/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { superForm } from '$lib/client';
+  import type { PageData } from './$types';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { schema } from './schema';
+  import type { z } from 'zod';
+
+  export let data: PageData;
+
+  type Group = z.infer<typeof schema>['group'] extends (infer U)[]
+    ? U
+    : never;
+
+  const { form, enhance, message, errors } = superForm(data.form, {
+    validators: schema,
+    dataType: 'json'
+  });
+
+  function toggleGroup(group: Group, add: boolean) {
+    form.update(($form) => {
+      if (add) $form.group.push(group);
+      else $form.group = $form.group.filter((g) => g.id != group.id);
+      return $form;
+    });
+  }
+</script>
+
+<SuperDebug data={$form} />
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+  {#each data.groups as group (group.id)}
+    <label>
+      <input
+        class="checkbox"
+        type="checkbox"
+        checked={!!$form.group.find((g) => g.id == group.id)}
+        on:click={(e) => toggleGroup(group, e.currentTarget.checked)}
+      />
+      <span>{group.name}</span>
+    </label>
+  {/each}
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+<style lang="scss">
+  form {
+    margin: 2rem 0;
+  }
+</style>

src/routes/tests/multiselect-2/schema.ts

@@ -0,0 +1,15 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+  email: z.string().email().nullable(),
+  name: z.string().nullable(),
+  group: z
+    .object({
+      id: z.number(),
+      name: z.string(),
+      start_date: z.date(),
+      end_date: z.date(),
+      course_id: z.number()
+    })
+    .array()
+});