66 lines
1.4 KiB
Svelte
66 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { applicationStore } from '$lib/ApplicationsStore.svelte';
|
|
import { onMount } from 'svelte';
|
|
|
|
let filter = $state('');
|
|
|
|
onMount(() => {
|
|
applicationStore.loadApplications();
|
|
});
|
|
</script>
|
|
|
|
<div class="w-2/12 card p-3 flex flex-col">
|
|
<h1>To Apply</h1>
|
|
<div class="flex">
|
|
<input placeholder="Filter" class="p-2 flex-grow" bind:value={filter} />
|
|
<div>
|
|
{applicationStore.applications.length}
|
|
</div>
|
|
</div>
|
|
<div class="overflow-auto flex-grow p-2">
|
|
{#each applicationStore.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"
|
|
draggable="true"
|
|
ondragstart={() => applicationStore.dragStart(item)}
|
|
ondragend={() => {
|
|
window.requestAnimationFrame(() => {
|
|
applicationStore.dragEnd();
|
|
});
|
|
}}
|
|
role="none"
|
|
>
|
|
<div class:animate-pulse={applicationStore.dragging?.id === item.id}>
|
|
<h2 class="text-lg text-blue-500">
|
|
{item.title}
|
|
{#if item.company}
|
|
<div class="text-violet-800" >
|
|
@ {item.company}
|
|
</div>
|
|
{/if}
|
|
</h2>
|
|
<a
|
|
href={item.url}
|
|
class="text-violet-600 overflow-hidden whitespace-nowrap block"
|
|
>
|
|
{item.url}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|