From f5660dbfa306551d634695769707f70c68234ead Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Wed, 16 Oct 2024 13:30:56 -0400
Subject: [PATCH] Split project creation from add-to-project form Fixes #653

---
 src/lib/components/forms/EditProject.svelte |  3 +
 src/lib/components/forms/Projects.svelte    | 70 +++++++--------------
 2 files changed, 27 insertions(+), 46 deletions(-)

diff --git a/src/lib/components/forms/EditProject.svelte b/src/lib/components/forms/EditProject.svelte
index 7f6e6d375..acbd8b946 100644
--- a/src/lib/components/forms/EditProject.svelte
+++ b/src/lib/components/forms/EditProject.svelte
@@ -34,6 +34,9 @@ Edit project metadata
   function onSubmit({ submitter }) {
     submitter.disabled = true;
     return ({ result, update }) => {
+      if (result.type === "success") {
+        dispatch("success", result);
+      }
       update(result);
       dispatch("close");
     };
diff --git a/src/lib/components/forms/Projects.svelte b/src/lib/components/forms/Projects.svelte
index cb777ec88..556f2bce1 100644
--- a/src/lib/components/forms/Projects.svelte
+++ b/src/lib/components/forms/Projects.svelte
@@ -5,26 +5,24 @@ because it needs to load all of a user's projects
 and we don't want to do that everywhere.
 -->
 <script lang="ts">
-  import type { Writable } from "svelte/store";
-  import type { Document, Project, User } from "$lib/api/types";
+  import type { Document, Project } from "$lib/api/types";
 
-  import { enhance } from "$app/forms";
   import { invalidate } from "$app/navigation";
 
-  import { createEventDispatcher, getContext, onMount } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import { _ } from "svelte-i18n";
 
   import Button from "../common/Button.svelte";
-  import Field from "../inputs/Field.svelte";
   import Flex from "../common/Flex.svelte";
-  import Switch from "../inputs/Switch.svelte";
-  import Text from "../inputs/Text.svelte";
-  import TextArea from "../inputs/TextArea.svelte";
 
   import { getForUser, add, remove } from "$lib/api/projects";
   import { getCsrfToken } from "$lib/utils/api";
   import { intersection } from "@/util/array.js";
   import { getCurrentUser } from "@/lib/utils/permissions";
+  import { PlusCircle16 } from "svelte-octicons";
+  import EditProject from "./EditProject.svelte";
+  import Portal from "../layouts/Portal.svelte";
+  import Modal from "../layouts/Modal.svelte";
 
   export let documents: Document[] = [];
   export let projects: Project[] = [];
@@ -32,6 +30,7 @@ and we don't want to do that everywhere.
   const dispatch = createEventDispatcher();
   const me = getCurrentUser();
 
+  let createProjectOpen = false;
   let common: Set<number>;
 
   $: common = new Set(
@@ -66,15 +65,8 @@ and we don't want to do that everywhere.
     await invalidateDocs(documents);
   }
 
-  function onSubmit({ submitter }) {
-    submitter.disabled = true;
-    return async ({ result, update }) => {
-      if (result.type === "success") {
-        projects = [...projects, result.data.project];
-        update(result);
-      }
-      submitter.disabled = false;
-    };
+  function onCreateSuccess(event: CustomEvent<{ data: { project: Project } }>) {
+    projects = [...projects, event.detail.data.project];
   }
 
   function sort(projects: Project[]) {
@@ -85,33 +77,9 @@ and we don't want to do that everywhere.
 </script>
 
 <div class="container">
-  <form method="post" action="/projects/" use:enhance={onSubmit}>
-    <h2>{$_("projects.create")}</h2>
-    <Field title={$_("projects.fields.title")} required inline>
-      <Text name="title" placeholder={$_("projects.fields.title")} required />
-    </Field>
-
-    <details>
-      <summary>{$_("common.more")} &hellip;</summary>
-      <Flex direction="column">
-        <Field title={$_("projects.fields.description")}>
-          <TextArea name="description" />
-        </Field>
-        <Field title={$_("projects.fields.private")} inline>
-          <Switch name="private" />
-        </Field>
-        <Field title={$_("projects.fields.pinned")} inline>
-          <Switch name="pinned" />
-        </Field>
-      </Flex>
-    </details>
-    <Flex>
-      <Button mode="primary" type="submit">
-        {$_("common.add")} +
-      </Button>
-    </Flex>
-  </form>
-
+  <Button ghost mode="primary" on:click={() => (createProjectOpen = true)}>
+    <PlusCircle16 /> Create Project
+  </Button>
   {#if projects.length}
     <hr class="divider" />
     <Flex direction="column" class="projects">
@@ -139,13 +107,23 @@ and we don't want to do that everywhere.
     <Button on:click={() => dispatch("close")}>{$_("dialog.done")}</Button>
   </Flex>
 </div>
+{#if createProjectOpen}
+  <Portal>
+    <Modal on:close={() => (createProjectOpen = false)}>
+      <h1 slot="title">Create Project</h1>
+      <EditProject
+        on:close={() => (createProjectOpen = false)}
+        on:success={onCreateSuccess}
+      />
+    </Modal>
+  </Portal>
+{/if}
 
 <style>
-  form,
   .container {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 0.5rem;
     width: 100%;
   }