From e801d4aeff02d3f4ac8d354fc5e40abb001e0a5c Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Thu, 6 Jun 2024 15:18:03 -0600
Subject: [PATCH] add create org page

---
 frontend/src/lib/i18n/locales/en.json         |  6 +++
 .../(authenticated)/org/create/+page.svelte   | 38 +++++++++++++++++++
 .../(authenticated)/org/create/+page.ts       | 22 +++++++++++
 3 files changed, 66 insertions(+)
 create mode 100644 frontend/src/routes/(authenticated)/org/create/+page.svelte
 create mode 100644 frontend/src/routes/(authenticated)/org/create/+page.ts

diff --git a/frontend/src/lib/i18n/locales/en.json b/frontend/src/lib/i18n/locales/en.json
index 1a0e14c75..abc3d090a 100644
--- a/frontend/src/lib/i18n/locales/en.json
+++ b/frontend/src/lib/i18n/locales/en.json
@@ -152,6 +152,12 @@ the [Linguistics Institute at Payap University](https://li.payap.ac.th/) in Chia
       "created_at": "Created",
       "members": "Members"
     },
+    "create": {
+      "title": "Create Organization",
+      "name": "Name",
+      "name_missing": "Organization name required",
+      "submit": "Create Organization",
+    }
   },
   "project": {
     "create": {
diff --git a/frontend/src/routes/(authenticated)/org/create/+page.svelte b/frontend/src/routes/(authenticated)/org/create/+page.svelte
new file mode 100644
index 000000000..51ab2fdb4
--- /dev/null
+++ b/frontend/src/routes/(authenticated)/org/create/+page.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+import t from '$lib/i18n';
+import {TitlePage} from '$lib/layout';
+import {Form, FormError, Input, lexSuperForm, SubmitButton} from '$lib/forms';
+import {z} from 'zod';
+import {goto} from '$app/navigation';
+import {_createOrg} from './+page';
+
+const formSchema = z.object({
+  name: z.string().trim().min(1, $t('org.create.name_missing')),
+});
+let {form, errors, message, enhance, submitting} = lexSuperForm(formSchema, async () => {
+  const result = await _createOrg({
+    name: $form.name,
+  });
+  if (result.error) {
+    $message = result.error.message;
+  } else {
+    await goto(`/org/${result.data?.createOrganization.organization?.id}`);
+  }
+});
+</script>
+
+<TitlePage title={$t('org.create.title')}>
+  <Form {enhance}>
+    <Input
+      label={$t('org.create.name')}
+      bind:value={$form.name}
+      error={$errors.name}
+      autofocus
+    />
+
+    <FormError error={$message}/>
+    <SubmitButton loading={$submitting}>
+        {$t('org.create.submit')}
+    </SubmitButton>
+  </Form>
+</TitlePage>
diff --git a/frontend/src/routes/(authenticated)/org/create/+page.ts b/frontend/src/routes/(authenticated)/org/create/+page.ts
new file mode 100644
index 000000000..7996e362e
--- /dev/null
+++ b/frontend/src/routes/(authenticated)/org/create/+page.ts
@@ -0,0 +1,22 @@
+import {getClient, graphql} from '$lib/gql';
+import type {CreateOrganizationInput, CreateOrgMutation} from '$lib/gql/generated/graphql';
+import type {$OpResult} from '$lib/gql/types';
+
+export async function _createOrg(input: CreateOrganizationInput): $OpResult<CreateOrgMutation> {
+  const result = await getClient().mutation(
+    graphql(`
+        mutation createOrg($input: CreateOrganizationInput!) {
+          createOrganization(input: $input) {
+                organization {
+                  id
+                }
+                errors {
+                    ... on DbError {
+                        code
+                    }
+                }
+            }
+        }
+        `), {input});
+  return result;
+}