From 9db0f70f75886ab1f97e231a3f9c16fcbbbe04bd Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Wed, 1 Jun 2022 22:20:31 +0200
Subject: refactor: Move projects-web to projects

---
 apps/projects/src/app/pages/ui-workbench.svelte | 48 +++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 apps/projects/src/app/pages/ui-workbench.svelte

(limited to 'apps/projects/src/app/pages/ui-workbench.svelte')

diff --git a/apps/projects/src/app/pages/ui-workbench.svelte b/apps/projects/src/app/pages/ui-workbench.svelte
new file mode 100644
index 0000000..5e92c9d
--- /dev/null
+++ b/apps/projects/src/app/pages/ui-workbench.svelte
@@ -0,0 +1,48 @@
+<script>
+	import Dropdown from "$shared/components/dropdown.svelte";
+	import {generate_random_hex_color} from "$shared/lib/colors";
+	import {uuid_v4} from "$shared/lib/helpers";
+
+	let entries = [];
+
+	let dropdown;
+
+	for (let i = 1; i < 20; i++) {
+		entries.push({
+			id: uuid_v4(),
+			name: "Option " + i,
+			selected: false,
+			color: generate_random_hex_color(true)
+		});
+	}
+
+	function on_create({detail}) {
+		const copy = entries;
+		const entry = {id: uuid_v4(), name: detail.name};
+		copy.push(entry);
+		entries = copy;
+		console.log("Created", entry);
+		dropdown.select_entry(entry.id);
+	}
+
+	function on_select({detail}) {
+		console.log(detail);
+	}
+</script>
+
+<main class="grid gap-y-lg padding-md">
+    <div class="row">
+        <label for="dropdown">Choose an entry</label>
+        <Dropdown id="dropdown"
+                  name="dropdown"
+                  placeholder="Search or create"
+                  maxlength="50"
+                  creatable="true"
+                  multiple="false"
+                  {entries}
+                  bind:this={dropdown}
+                  on:create={on_create}
+                  on:select={on_select}
+        />
+    </div>
+</main>
-- 
cgit v1.3