Skip to content

Commit 1c5aa71

Browse files
DefinitelyNotSimon13DefinitelyNotSimon13
committed
feat: improve creation form
1 parent 6fbb0ae commit 1c5aa71

File tree

4 files changed

+113
-82
lines changed

4 files changed

+113
-82
lines changed

‎src/lib/components/project/form-build-systems.svelte

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import { Button } from '$lib/components/ui/button';
55
import type { FormMetadata, BuildSystem } from '$lib/types';
66
import type { SuperForm } from 'sveltekit-superforms/client';
7+
import { CirclePlus, Trash2 } from 'lucide-svelte';
78
89
interface Props {
910
form: SuperForm<FormMetadata>;
@@ -35,15 +36,15 @@
3536
}
3637
</script>
3738

38-
Build Systems
39+
<h2 class="text-sm mb-1">Build Systems</h2>
3940
{#each $formData.buildSystems as _, i}
4041
<Form.Field {form} name="buildSystems">
4142
<Form.Control>
4243
{#snippet children({ props })}
43-
<div class="flex">
44+
<div class="flex gap-4">
4445
<Input {...props} bind:value={$formData.buildSystems[i].name} />
4546
<Input {...props} bind:value={$formData.buildSystems[i].version} />
46-
<Button variant="destructive" onclick={removeBuildSystem(i)}>Remove</Button>
47+
<Button variant="destructive" onclick={removeBuildSystem(i)}><Trash2 /></Button>
4748
</div>
4849
{/snippet}
4950
</Form.Control>
@@ -53,10 +54,10 @@ Build Systems
5354
<Form.Field {form} name="buildSystems">
5455
<Form.Control>
5556
{#snippet children({ props })}
56-
<div class="flex">
57+
<div class="flex gap-4">
5758
<Input {...props} bind:value={newBuildSystem.name} />
5859
<Input {...props} bind:value={newBuildSystem.version} />
59-
<Button variant="default" onclick={addBuildSystem}>Add</Button>
60+
<Button variant="secondary" onclick={addBuildSystem}><CirclePlus /></Button>
6061
</div>
6162
{/snippet}
6263
</Form.Control>

‎src/lib/components/project/form-categories.svelte

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
import { Badge } from '../ui/badge';
55
import Button from '../ui/button/button.svelte';
66
import { Input } from '../ui/input';
7+
import X from '@lucide/svelte/icons/x';
8+
import { Delete, Trash } from 'lucide-svelte';
79
810
interface Props {
911
form: SuperForm<FormMetadata>;
@@ -35,12 +37,16 @@
3537
}
3638
</script>
3739

38-
Categories
39-
{#each $formData.categories as _, i}
40-
<Badge
41-
>{$formData.categories[i].name}
42-
<Button variant="ghost" onclick={removeCategory(i)}>X</Button></Badge
43-
>&nbsp;
44-
{/each}
45-
<Input bind:value={newCategory} />
46-
<Button variant="default" onclick={addCategory}>Add</Button>
40+
<h2 class="text-sm mb-1">Categories</h2>
41+
<div class="flex gap-2 mb-2">
42+
{#each $formData.categories as _, i}
43+
<Badge class="hover:cursor-pointer hover:bg-destructive hover:text-destructive-foreground">
44+
<p>{$formData.categories[i].name}&nbsp;</p>
45+
<button onclick={removeCategory(i)}><Delete size={12} /></button>
46+
</Badge>
47+
{/each}
48+
</div>
49+
<div class="flex gap-5">
50+
<Input bind:value={newCategory} />
51+
<Button variant="secondary" onclick={addCategory}>Add</Button>
52+
</div>

‎src/lib/components/project/form-languages.svelte

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import { Button } from '$lib/components/ui/button';
55
import type { FormMetadata, Language } from '$lib/types';
66
import type { SuperForm } from 'sveltekit-superforms/client';
7+
import { CirclePlus, Trash2 } from 'lucide-svelte';
78
89
interface Props {
910
form: SuperForm<FormMetadata>;
@@ -36,15 +37,15 @@
3637
}
3738
</script>
3839

39-
Languages
40+
<h2 class="text-sm mb-1">Languages</h2>
4041
{#each $formData.languages as _, i}
4142
<Form.Field {form} name="languages">
4243
<Form.Control>
4344
{#snippet children({ props })}
44-
<div class="flex">
45+
<div class="flex gap-4">
4546
<Input {...props} bind:value={$formData.languages[i].name} />
4647
<Input {...props} bind:value={$formData.languages[i].version} />
47-
<Button variant="destructive" onclick={removeLanguage(i)}>Remove</Button>
48+
<Button variant="destructive" onclick={removeLanguage(i)}><Trash2 /></Button>
4849
</div>
4950
{/snippet}
5051
</Form.Control>
@@ -54,10 +55,10 @@ Languages
5455
<Form.Field {form} name="languages">
5556
<Form.Control>
5657
{#snippet children({ props })}
57-
<div class="flex">
58+
<div class="flex gap-4">
5859
<Input {...props} bind:value={newLanguage.name} />
5960
<Input {...props} bind:value={newLanguage.version} />
60-
<Button variant="default" onclick={addLanguage}>Add</Button>
61+
<Button variant="secondary" onclick={addLanguage}><CirclePlus /></Button>
6162
</div>
6263
{/snippet}
6364
</Form.Control>

‎src/lib/components/project/form.svelte

Lines changed: 86 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
import FormCategories from './form-categories.svelte';
1717
import FormIde from './form-ide.svelte';
1818
import { open } from '@tauri-apps/plugin-dialog';
19+
import { ArrowLeft } from 'lucide-svelte';
20+
import Separator from '../ui/separator/separator.svelte';
1921
2022
interface Props {
2123
metadata?: Metadata;
@@ -78,71 +80,92 @@
7880
return data;
7981
});
8082
}
83+
84+
function goBack() {
85+
history.back();
86+
}
8187
</script>
8288

83-
<h1>{formTitle}</h1>
84-
<form method="POST" use:enhance>
85-
<Form.Field {form} name="directory">
86-
<Form.Control>
87-
{#snippet children({ props })}
88-
<Form.Label>Directory</Form.Label>
89-
<div class="flex">
90-
<Input {...props} bind:value={$formData.directory} />
91-
<Button onclick={pickDirectory}>Choose</Button>
92-
</div>
93-
{/snippet}
94-
</Form.Control>
95-
<Form.FieldErrors />
96-
<Form.Description>TBC: Choose directory</Form.Description>
97-
</Form.Field>
98-
99-
<Form.Field {form} name="title">
100-
<Form.Control>
101-
{#snippet children({ props })}
102-
<Form.Label>Title</Form.Label>
103-
<Input {...props} bind:value={$formData.title} />
104-
{/snippet}
105-
</Form.Control>
106-
<Form.FieldErrors />
107-
<Form.Description>TBC: Title of the Project</Form.Description>
108-
</Form.Field>
109-
110-
<Form.Field {form} name="description">
111-
<Form.Control>
112-
{#snippet children({ props })}
113-
<Form.Label>Description</Form.Label>
114-
<Textarea {...props} bind:value={$formData.description} />
115-
{/snippet}
116-
</Form.Control>
117-
<Form.FieldErrors />
118-
<Form.Description>TBC: Description of the Project</Form.Description>
119-
</Form.Field>
120-
121-
<FormCategories {form} />
122-
<br />
123-
124-
<FormLanguages {form} />
125-
<br />
126-
127-
<FormBuildSystems {form} />
128-
<br />
129-
130-
<FormIde {form} />
131-
<br />
132-
133-
<Form.Field {form} name="repositoryUrl">
134-
<Form.Control>
135-
{#snippet children({ props })}
136-
<Form.Label>Repository Url</Form.Label>
137-
<Input {...props} bind:value={$formData.repositoryUrl} />
138-
{/snippet}
139-
</Form.Control>
140-
<Form.FieldErrors />
141-
<Form.Description>TBC: Repo Url of the Project</Form.Description>
142-
</Form.Field>
143-
144-
<Form.Button>Submit</Form.Button>
145-
</form>
89+
<div class="flex w-full justify-between">
90+
<Button onclick={goBack} variant="link">
91+
<ArrowLeft />
92+
Back
93+
</Button>
94+
<h1 class="text-3xl font-bold">{formTitle}</h1>
95+
<p></p>
96+
</div>
97+
<div class="w-full flex justify-center">
98+
<form class="w-[80%]" method="POST" use:enhance>
99+
<Form.Field {form} name="directory">
100+
<Form.Control>
101+
{#snippet children({ props })}
102+
<Form.Label>Location</Form.Label>
103+
<div class="flex gap-5">
104+
<Input {...props} bind:value={$formData.directory} />
105+
<Button onclick={pickDirectory} variant="secondary">Pick</Button>
106+
</div>
107+
{/snippet}
108+
</Form.Control>
109+
<Form.FieldErrors />
110+
<Form.Description>Where the manifest file will be placed</Form.Description>
111+
</Form.Field>
112+
<div class="divider"></div>
113+
114+
<Form.Field {form} name="title">
115+
<Form.Control>
116+
{#snippet children({ props })}
117+
<Form.Label>Title</Form.Label>
118+
<Input {...props} bind:value={$formData.title} />
119+
{/snippet}
120+
</Form.Control>
121+
<Form.FieldErrors />
122+
<Form.Description></Form.Description>
123+
</Form.Field>
124+
<Separator class="m-2" />
125+
126+
<Form.Field {form} name="description">
127+
<Form.Control>
128+
{#snippet children({ props })}
129+
<Form.Label class="flex flex-row"
130+
><p>Description&nbsp;</p>
131+
<p class="opacity-60">(Optional)</p></Form.Label
132+
>
133+
<Textarea {...props} bind:value={$formData.description} />
134+
{/snippet}
135+
</Form.Control>
136+
<Form.FieldErrors />
137+
<Form.Description></Form.Description>
138+
</Form.Field>
139+
140+
<div class="divider"></div>
141+
<FormCategories {form} />
142+
143+
<div class="divider"></div>
144+
<FormLanguages {form} />
145+
<br />
146+
147+
<FormBuildSystems {form} />
148+
<br />
149+
150+
<div class="divider"></div>
151+
<FormIde {form} />
152+
<br />
153+
154+
<Form.Field {form} name="repositoryUrl">
155+
<Form.Control>
156+
{#snippet children({ props })}
157+
<Form.Label>Repository Url</Form.Label>
158+
<Input {...props} bind:value={$formData.repositoryUrl} />
159+
{/snippet}
160+
</Form.Control>
161+
<Form.FieldErrors />
162+
<Form.Description>TBC: Repo Url of the Project</Form.Description>
163+
</Form.Field>
164+
165+
<div class="divider"></div>
166+
<Form.Button class="w-full">Submit</Form.Button>
167+
</form>
168+
</div>
146169

147170
<!--
148171
<div class="container mx-auto p-4">

0 commit comments

Comments
 (0)