feat(components): add custom Select component and improve bulk list e…

…diting Signed-off-by: Robert Goniszewski <[email protected]>
goniszewski · Nov 9, 2024 · cf985ab · cf985ab
1 parent b130237
commit cf985ab
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 38 deletions.
diff --git a/src/lib/components/BulkList/BulkList.svelte b/src/lib/components/BulkList/BulkList.svelte
@@ -31,16 +31,17 @@ const selectAllItems = ({ target }: Event) => {
 				</tr>
 			</thead>
 			<tbody>
-				{#each $itemList as { id, icon, url, title, category, selected, contentHtml } (id)}
+				{#each $itemList as item (item.id)}
 					<BulkListItem
-						id={id}
-						icon={icon}
-						url={url}
-						title={title}
-						category={category}
-						selected={selected}
-						isLoading={isLoading}
-						metadataFetched={!!contentHtml} />
+						id={item.id}
+						icon={item.icon}
+						url={item.url}
+						title={item.title}
+						category={item.category}
+						selected={item.selected}
+						isLoading={item.isLoading}
+						metadataFetched={!!item.contentHtml}
+						metadata={item} />
 				{/each}
 			</tbody>
 			<!-- foot -->

diff --git a/src/lib/components/BulkListItem/BulkListItem.svelte b/src/lib/components/BulkListItem/BulkListItem.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { editBookmarkStore } from '$lib/stores/edit-bookmark.store';
 import { importBookmarkStore } from '$lib/stores/import-bookmarks.store';
 import {
 	IconCircleDashedCheck,
@@ -15,10 +16,23 @@ export let title: string;
 export let category: string;
 export let isLoading: boolean;
 export let metadataFetched: boolean;
+export let metadata: any;
 
 let urlObj = new URL(url);
 
-const removeItem = () => {
+const onEditItem = () => {
+	editBookmarkStore.set({
+		description: '',
+		note: '',
+		...metadata,
+		category: {
+			id: category,
+			name: category
+		}
+	});
+};
+
+const onRemoveItem = () => {
 	importBookmarkStore.removeItem(id);
 };
 </script>
@@ -78,7 +92,7 @@ const removeItem = () => {
 	</td>
 	<td><span class="link hover:link-secondary">{category}</span></td>
 	<th>
-		<button class="btn btn-ghost btn-xs text-secondary">edit</button>
-		<button class="btn btn-ghost btn-xs text-error" on:click={removeItem}>remove</button>
+		<button class="btn btn-ghost btn-xs text-secondary" on:click={onEditItem}>edit</button>
+		<button class="btn btn-ghost btn-xs text-error" on:click={onRemoveItem}>remove</button>
 	</th>
 </tr>
diff --git a/src/lib/components/EditBookmarkForm/EditBookmarkForm.svelte b/src/lib/components/EditBookmarkForm/EditBookmarkForm.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
 import { page } from '$app/stores';
+import Select from '$lib/components/Select/Select.svelte';
 import _ from 'lodash';
-import Select from 'svelte-select';
+import SvelteSelect from 'svelte-select';
+
 import { writable, type Writable } from 'svelte/store';
 
 import { invalidate } from '$app/navigation';
@@ -198,20 +200,21 @@ const onGetMetadata = _.debounce(
 					<div class="flex w-full flex-col items-start justify-between gap-2 md:flex-row">
 						<div class="flex w-full flex-col items-center justify-between gap-2 md:flex-row">
 							<div class="flex flex-none flex-col">
-								{#if $bookmark.category?.id}
+								{#if $bookmark.category?.id || $bookmark.category?.name}
 									<label for="category" class="label">Category</label>
 									<Select
 										name="category"
 										searchable
 										items={categoryItems}
 										value={`${$bookmark.category?.id}`}
 										placeholder={'Select category'}
-										class="this-select input input-bordered w-full md:min-w-28" />
+										border={false}
+										className="this-select input input-bordered w-full md:min-w-28" />
 								{/if}
 							</div>
 							<div class="flex w-full flex-1 flex-col">
 								<label for="tags" class="label">Tags</label>
-								<Select
+								<SvelteSelect
 									name="tags"
 									searchable
 									multiple
@@ -227,7 +230,7 @@ const onGetMetadata = _.debounce(
 										{item.created ? 'Create tag: ' : ''}
 										{item.label}
 									</div>
-								</Select>
+								</SvelteSelect>
 							</div>
 						</div>
 						<div class="ml-4 flex w-full gap-4 md:w-4/12">

diff --git a/src/lib/components/Select/Select.svelte b/src/lib/components/Select/Select.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+import Select from 'svelte-select';
+import { writable } from 'svelte/store';
+
+const containerStyles = writable({
+	'min-height': '32px',
+	'max-width': '10rem',
+	'background-color': 'oklch(var(--b1) / var(--tw-bg-opacity, 1))',
+	'border-color': 'oklch(var(--p) / var(--tw-bg-opacity, 1))',
+	'border-radius': '0.375rem',
+	'border-width': '1px',
+	'border-style': 'solid',
+	'font-size': '14px'
+});
+const inputStyles = writable({
+	'font-size': '14px'
+});
+
+const sizes = {
+	sm: {
+		container: {
+			'min-height': '24px'
+		},
+		input: {
+			'font-size': '12px'
+		}
+	},
+	md: {
+		container: {
+			'min-height': '32px'
+		},
+		input: {
+			'font-size': '14px'
+		}
+	},
+	lg: {
+		container: {
+			'min-height': '40px'
+		},
+		input: {
+			'font-size': '16px'
+		}
+	}
+};
+
+export let border: boolean = true;
+export let children: any = null;
+export let className: string | undefined = undefined;
+export let filterText: string | undefined = undefined;
+export let groupBy = false;
+export let items: { value: string; label: string; group?: string }[] = [];
+export let listAutoWidth: boolean = false;
+export let maxWidth: string | null = null;
+export let multiple: boolean = false;
+export let name = 'Search';
+export let onFilter: any = () => {};
+export let onInput: any = () => {};
+export let onSelect: any = () => {};
+export let placeholder = 'Please select';
+export let searchable: boolean = true;
+export let size: 'sm' | 'md' | 'lg' = 'md';
+export let value: any = null;
+
+$: {
+	containerStyles.set({
+		...$containerStyles,
+		...sizes[size].container,
+		...(maxWidth ? { 'max-width': maxWidth } : {}),
+		...(border ? {} : { border: 'none' })
+	});
+	inputStyles.set({
+		...$inputStyles,
+		...sizes[size].input
+	});
+}
+</script>
+
+<Select
+	name={name}
+	searchable={searchable}
+	placeholder={placeholder}
+	items={items}
+	containerStyles="border-color: oklch(var(--p));	max-width: 10rem; background: oklch(var(--b1) / var(--tw-bg-opacity, 1)); min-height: 32px;"
+	inputStyles="font-size: 14px;"
+	groupBy={groupBy ? (item) => item.group : undefined}
+	value={value}
+	filterText={filterText}
+	class={className}
+	listAutoWidth={listAutoWidth}
+	multiple={multiple}
+	on:change={onSelect}
+	on:filter={onFilter}
+	on:input={onInput}>
+	{children}
+</Select>
diff --git a/src/routes/import/+page.svelte b/src/routes/import/+page.svelte
@@ -2,11 +2,11 @@
 import { page } from '$app/stores';
 import BulkList from '$lib/components/BulkList/BulkList.svelte';
 import Pagination from '$lib/components/Pagination/Pagination.svelte';
+import Select from '$lib/components/Select/Select.svelte';
 import { importBookmarkStore } from '$lib/stores/import-bookmarks.store';
 import type { BulkListItem } from '$lib/types/common/BulkList.type';
 import { importBookmarks } from '$lib/utils/import-bookmarks';
 import { showToast } from '$lib/utils/show-toast';
-import Select from 'svelte-select';
 import { derived, writable } from 'svelte/store';
 
 const step = writable<number>(1);
@@ -130,23 +130,7 @@ const onSetSelectedCategory = () => {
 
 <div class="flex max-w-4xl flex-col">
 	{#if $step === 1}
-		<!-- remove -->
-		<div class="my-10 flex flex-col">
-			<h1 class="text-2xl font-bold">WIP</h1>
-		</div>
-		<div class="flex gap-2">
-			<Select
-				name="category"
-				searchable
-				placeholder="Change category"
-				items={$categoriesOptions}
-				containerStyles="border-color: oklch(var(--p));	max-width: 10rem; background: oklch(var(--b1) / var(--tw-bg-opacity, 1)); min-height: 32px;"
-				inputStyles="font-size: 14px;"
-				groupBy={(item) => item.group}
-				on:change={onSelectCategory} />
-			<button class="btn btn-primary btn-sm" on:click={onSetSelectedCategory}> SET </button>
-		</div>
-		<!-- remove -->
+		<h1 class="mb-4 text-2xl font-bold">Import bookmarks from HTML file</h1>
 		<input
 			type="file"
 			title="Select backup file"
@@ -168,10 +152,9 @@ const onSetSelectedCategory = () => {
 					name="category"
 					searchable
 					placeholder="Change category"
+					size="md"
 					items={$categoriesOptions}
-					containerStyles="border: 1;	border-color: oklch(var(--p));	max-width: 10rem; background: oklch(var(--b1) / var(--tw-bg-opacity, 1)); max-height: 32px;"
-					inputStyles=""
-					on:change={onSelectCategory} />
+					onSelect={onSelectCategory} />
 				<button class="btn btn-primary btn-sm" on:click={onSetSelectedCategory}> SET </button>
 			{/if}