feat: added the linked application system

site/src/lib/ApplicationsStore.svelte.ts

@@ -40,8 +40,9 @@ export type Application = {
 	status: number;
     recruiter: string;
     company: string;
-	flairs: Flair[];
     message: string;
+    linked_application: string;
+	flairs: Flair[];
     views: View[];
 };
 

site/src/routes/work-area/LinkApplication.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { Application } from '$lib/ApplicationsStore.svelte';
+	import { post, put } from '$lib/utils';
+
+	let {
+		application,
+		dialog = $bindable(),
+		onreload
+	}: {
+		application: Application;
+		dialog: HTMLDialogElement;
+		onreload: (item: Application) => void;
+	} = $props();
+
+	let filter = $state('');
+	let applications: Application[] = $state([]);
+
+	async function getApplicationList() {
+		const app: Application[] = await post('application/list', {});
+        applications = app.filter((a) => a.id != application.id);
+	}
+
+	$effect(() => {
+		getApplicationList();
+	});
+
+	async function submit(item: Application) {
+		try {
+			application.linked_application = item.id;
+			await put('application/update', application);
+			dialog.close();
+			onreload(item);
+		} catch (e) {
+			// Show message to the user
+			console.log(e);
+		}
+	}
+</script>
+
+<dialog class="card max-w-[50vw]" bind:this={dialog}>
+	<div class="flex">
+		<input placeholder="Filter" class="p-2 flex-grow" bind:value={filter} />
+		<div>
+			{applications.length}
+		</div>
+	</div>
+	<div class="overflow-y-auto overflow-x-hidden flex-grow p-2">
+		{#each applications.filter((i) => {
+			if (!filter) {
+				return true;
+			}
+			const f = new RegExp(filter, 'ig');
+
+			let x = i.title;
+
+			if (i.company) {
+				x = `${x} @ ${i.company}`;
+			}
+
+			return x.match(f);
+		}) as item}
+			<div class="card p-2 my-2 bg-slate-100 max-w-full" role="none">
+				<button class="text-left max-w-full" type="button" onclick={() => submit(item)}>
+					<h2 class="text-lg text-blue-500">
+						{item.title}
+						{#if item.company}
+							<div class="text-violet-800">
+								@ {item.company}
+							</div>
+						{/if}
+					</h2>
+					<span class="text-violet-600 overflow-hidden whitespace-nowrap block max-w-full">
+						{item.url}
+					</span>
+				</button>
+			</div>
+		{/each}
+	</div>
+</dialog>

site/src/routes/work-area/WorkArea.svelte

@@ -13,11 +13,13 @@
 	import NewUrlDialog from './NewUrlDialog.svelte';
 	import DropZone from './DropZone.svelte';
 	import { userStore } from '$lib/UserStore.svelte';
+	import LinkApplication from './LinkApplication.svelte';
 
 	let activeItem: Application | undefined = $state();
 
 	let extractTokens: HTMLDialogElement;
 	let changeUrl: HTMLDialogElement;
+	let linkApplication: HTMLDialogElement;
 
 	let lastExtData: any = $state(undefined);
 	let autoExtData = false;
@@ -268,29 +270,28 @@
 						onchange={save}
 					/>
 				</fieldset>
-				<fieldset
-					draggable="false"
-					onmouseenter={() => (drag = false)}
-					onmouseleave={() => (drag = true)}
-					class="max-w-full min-w-0 overflow-hidden"
-				>
+				<fieldset draggable="false" class="max-w-full min-w-0 overflow-hidden">
 					<div class="flabel">Url</div>
 					<div class="finput bg-white w-full break-keep">
 						{activeItem.url}
 					</div>
 				</fieldset>
-				{#if activeItem.unique_url}
-					<fieldset
-						draggable="false"
-						onmouseenter={() => (drag = false)}
-						onmouseleave={() => (drag = true)}
-					>
+				{#if activeItem.unique_url && activeItem.unique_url !== activeItem.url}
+					<fieldset draggable="false">
 						<div class="flabel">Unique Url</div>
 						<div class="finput bg-white">
 							{activeItem.unique_url}
 						</div>
 					</fieldset>
 				{/if}
+				{#if activeItem.linked_application}
+					<fieldset draggable="false">
+						<div class="flabel">Linked Application</div>
+						<div class="finput bg-white">
+							{activeItem.linked_application}
+						</div>
+					</fieldset>
+				{/if}
 				<div>
 					<div class="flabel">Tags</div>
 					<div class="flex gap-2 flex-wrap">
@@ -342,6 +343,7 @@
 					Open
 				</button>
 				<button class="btn-primary" onclick={() => openCV()}> Open CV </button>
+				<div class="px-10"></div>
 				<button class="btn-primary" onclick={() => extractTokens.showModal()}>
 					Extract Flair
 				</button>
@@ -363,9 +365,14 @@
 						Update Url
 					</button>
 				{/if}
+				<div class="px-10"></div>
+				<button class="btn-primary" onclick={() => linkApplication.showModal()}>
+					Link Application
+				</button>
 				{#if activeItem.original_url != null}
 					<button class="btn-danger" onclick={resetUrl}> Reset Url </button>
 				{/if}
+				<button class:btn-primary={drag} class:btn-danger={!drag} onclick={() => (drag = !drag)}> 👋 </button>
 			</div>
 		</div>
 		{#if applicationStore.dragging}
@@ -462,3 +469,11 @@
 		onreload={(item) => (activeItem = item)}
 	/>
 {/if}
+
+{#if activeItem}
+	<LinkApplication
+		application={activeItem}
+		bind:dialog={linkApplication}
+		onreload={(item) => (activeItem = item)}
+	/>
+{/if}