refac
This commit is contained in:
Timothy Jaeryang Baek committed
1 parent
56f2cb5302
commit
e5e2cd7876
12 files changed
+1219
-686
No files matched your search
@@ -1,8 +1,12 @@
|
||||
<script lang="ts">
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import fileSaver from 'file-saver';
|
||||
const { saveAs } = fileSaver;
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
import { onMount, getContext, tick, onDestroy } from 'svelte';
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@@ -33,6 +37,8 @@
|
||||
import Switch from '../common/Switch.svelte';
|
||||
import SkillMenu from './Skills/SkillMenu.svelte';
|
||||
import Pagination from '../common/Pagination.svelte';
|
||||
import ChevronDown from '../icons/ChevronDown.svelte';
|
||||
import ChevronUp from '../icons/ChevronUp.svelte';
|
||||
|
||||
let shiftKey = false;
|
||||
let loaded = false;
|
||||
@@ -52,6 +58,9 @@
|
||||
|
||||
let tagsContainerElement: HTMLDivElement;
|
||||
let viewOption = '';
|
||||
let sortKey = 'updated_at';
|
||||
let sortDirection = 'desc';
|
||||
let openSkillMenuId: string | null = null;
|
||||
let page = 1;
|
||||
|
||||
$: if (loaded) {
|
||||
@@ -93,12 +102,17 @@
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
const res = await getSkillItems(localStorage.token, query, viewOption, page).catch(
|
||||
(error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
}
|
||||
);
|
||||
const res = await getSkillItems(
|
||||
localStorage.token,
|
||||
query,
|
||||
viewOption,
|
||||
page,
|
||||
sortKey,
|
||||
sortDirection
|
||||
).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res) {
|
||||
filteredItems = res.items;
|
||||
@@ -124,10 +138,33 @@
|
||||
};
|
||||
|
||||
// Immediate response to page/filter changes
|
||||
$: if (loaded && page && viewOption !== undefined) {
|
||||
$: if (
|
||||
loaded &&
|
||||
page &&
|
||||
viewOption !== undefined &&
|
||||
sortKey !== undefined &&
|
||||
sortDirection !== undefined
|
||||
) {
|
||||
loadSkillItems();
|
||||
}
|
||||
|
||||
const setSortKey = (key: string) => {
|
||||
if (sortKey === key) {
|
||||
sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
sortKey = key;
|
||||
sortDirection = key === 'updated_at' ? 'desc' : 'asc';
|
||||
}
|
||||
};
|
||||
|
||||
const openSkill = (skill) => {
|
||||
goto(`/workspace/skills/edit?id=${encodeURIComponent(skill.id)}`);
|
||||
};
|
||||
|
||||
const shouldIgnoreRowClick = (target: EventTarget | null) => {
|
||||
return target instanceof Element && !!target.closest('button, a, input, [role="menu"]');
|
||||
};
|
||||
|
||||
const cloneHandler = async (skill) => {
|
||||
const _skill = await getSkillById(localStorage.token, skill.id).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
@@ -343,141 +380,207 @@
|
||||
<Spinner className="size-5" />
|
||||
</div>
|
||||
{:else if (filteredItems ?? []).length !== 0}
|
||||
<div class="my-1 grid gap-x-2 gap-y-0.5 lg:grid-cols-2">
|
||||
{#each filteredItems as skill}
|
||||
<Tooltip content={skill?.description ?? skill?.id}>
|
||||
<div class="my-1">
|
||||
<div
|
||||
class="flex w-full items-center gap-2 px-1.5 pb-0.5 text-xs text-gray-400 dark:text-gray-600"
|
||||
>
|
||||
<button
|
||||
class="flex min-w-0 flex-1 items-center gap-1 py-0.5 text-left"
|
||||
type="button"
|
||||
on:click={() => setSortKey('name')}
|
||||
>
|
||||
{$i18n.t('Title')}
|
||||
{#if sortKey === 'name'}
|
||||
{#if sortDirection === 'asc'}
|
||||
<ChevronUp className="size-2" />
|
||||
{:else}
|
||||
<ChevronDown className="size-2" />
|
||||
{/if}
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<div class="hidden w-44 shrink-0 md:block"></div>
|
||||
|
||||
<button
|
||||
class="flex w-36 shrink-0 items-center justify-end gap-1 py-0.5 text-right"
|
||||
type="button"
|
||||
on:click={() => setSortKey('updated_at')}
|
||||
>
|
||||
{$i18n.t('Updated at')}
|
||||
{#if sortKey === 'updated_at'}
|
||||
{#if sortDirection === 'asc'}
|
||||
<ChevronUp className="size-2" />
|
||||
{:else}
|
||||
<ChevronDown className="size-2" />
|
||||
{/if}
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-y-0.5">
|
||||
{#each filteredItems as skill (skill.id)}
|
||||
<div
|
||||
class="flex w-full rounded-xl px-2 py-1 text-left transition {skill.write_access
|
||||
? 'cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-850/40'
|
||||
: 'cursor-not-allowed opacity-60'}"
|
||||
class="group flex min-h-8 w-full cursor-pointer items-center gap-2 overflow-hidden rounded-xl px-2 py-1 text-left"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:click={(e) => {
|
||||
if (shouldIgnoreRowClick(e.target)) return;
|
||||
openSkill(skill);
|
||||
}}
|
||||
on:keydown={(e) => {
|
||||
if (e.currentTarget !== e.target) return;
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
openSkill(skill);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{#if skill.write_access}
|
||||
<a
|
||||
class="flex w-full min-w-0 flex-1 cursor-pointer"
|
||||
href={`/workspace/skills/edit?id=${encodeURIComponent(skill.id)}`}
|
||||
>
|
||||
<div class="flex min-w-0 items-center text-left">
|
||||
<div class="min-w-0 flex-1 self-center">
|
||||
<Tooltip content={skill.id} placement="top-start">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<div class="line-clamp-1 text-sm">
|
||||
{skill.name}
|
||||
</div>
|
||||
{#if !skill.is_active}
|
||||
<Badge type="muted" content={$i18n.t('Inactive')} />
|
||||
{/if}
|
||||
<div class="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
|
||||
<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
|
||||
<div class="flex min-w-0 items-center gap-2 overflow-hidden">
|
||||
<div class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
|
||||
<Tooltip content={skill.id} className="min-w-0" placement="top-start">
|
||||
<div
|
||||
class="truncate text-[13px] leading-5 text-gray-800 group-hover:underline dark:text-gray-200"
|
||||
>
|
||||
{skill.name}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div class="px-0.5">
|
||||
<div class="shrink-0 text-xs text-gray-500">
|
||||
<Tooltip
|
||||
content={skill?.user?.email ?? $i18n.t('Deleted User')}
|
||||
className="flex shrink-0"
|
||||
placement="top-start"
|
||||
>
|
||||
{$i18n.t('By {{name}}', {
|
||||
name: capitalizeFirstLetter(
|
||||
skill?.user?.name ?? skill?.user?.email ?? $i18n.t('Deleted User')
|
||||
)
|
||||
})}
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="min-w-0 max-w-[40%] shrink-0 truncate text-[11px] leading-5 text-gray-500"
|
||||
>
|
||||
/{skill.id}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<div class="flex w-full min-w-0 flex-1">
|
||||
<div class="flex w-full min-w-0 items-center text-left">
|
||||
<div class="w-full min-w-0 flex-1 self-center">
|
||||
<div class="flex items-center justify-between w-full gap-2">
|
||||
<Tooltip content={skill.id} placement="top-start">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<div class="line-clamp-1 text-sm">
|
||||
{skill.name}
|
||||
</div>
|
||||
{#if !skill.is_active}
|
||||
<Badge type="muted" content={$i18n.t('Inactive')} />
|
||||
{/if}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip
|
||||
content={dayjs((skill.updated_at ?? skill.created_at) * 1000).format(
|
||||
'LLLL'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
class="shrink-0 truncate text-[11px] leading-5 text-gray-400 dark:text-gray-600"
|
||||
>
|
||||
{dayjs((skill.updated_at ?? skill.created_at) * 1000).fromNow()}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
{#if !skill.is_active}
|
||||
<Badge type="muted" content={$i18n.t('Inactive')} />
|
||||
{/if}
|
||||
|
||||
{#if !skill.write_access}
|
||||
<Badge type="muted" content={$i18n.t('Read Only')} />
|
||||
</div>
|
||||
<div class="px-0.5">
|
||||
<div class="shrink-0 text-xs text-gray-500">
|
||||
<Tooltip
|
||||
content={skill?.user?.email ?? $i18n.t('Deleted User')}
|
||||
className="flex shrink-0"
|
||||
placement="top-start"
|
||||
>
|
||||
{$i18n.t('By {{name}}', {
|
||||
name: capitalizeFirstLetter(
|
||||
skill?.user?.name ?? skill?.user?.email ?? $i18n.t('Deleted User')
|
||||
)
|
||||
})}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if skill.description}
|
||||
<Tooltip content={skill.description} className="min-w-0" placement="top-start">
|
||||
<div
|
||||
class="mt-0.5 truncate text-[0.6875rem] leading-4 text-gray-400 dark:text-gray-600"
|
||||
>
|
||||
{skill.description}
|
||||
</div>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="hidden max-w-44 shrink-0 self-center truncate text-right text-[11px] leading-5 text-gray-500 dark:text-gray-500 md:block"
|
||||
>
|
||||
<Tooltip
|
||||
content={skill?.user?.email ?? $i18n.t('Deleted User')}
|
||||
className="min-w-0"
|
||||
placement="top-start"
|
||||
>
|
||||
<div class="truncate">
|
||||
{capitalizeFirstLetter(
|
||||
skill?.user?.name ?? skill?.user?.email ?? $i18n.t('Deleted User')
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
{#if skill.write_access}
|
||||
<div class="flex flex-row gap-0.5 self-center">
|
||||
<div class="ml-2 flex shrink-0 flex-row items-center self-center">
|
||||
{#if shiftKey}
|
||||
<Tooltip content={$i18n.t('Delete')}>
|
||||
<button
|
||||
class="self-center w-fit rounded-lg p-1 text-sm hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white"
|
||||
class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition dark:text-gray-500"
|
||||
type="button"
|
||||
aria-label={$i18n.t('Delete')}
|
||||
on:click={() => {
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
deleteHandler(skill);
|
||||
}}
|
||||
>
|
||||
<GarbageBin />
|
||||
<GarbageBin className="size-4" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{:else}
|
||||
<SkillMenu
|
||||
editHandler={() => {
|
||||
goto(`/workspace/skills/edit?id=${encodeURIComponent(skill.id)}`);
|
||||
}}
|
||||
cloneHandler={() => {
|
||||
cloneHandler(skill);
|
||||
}}
|
||||
exportHandler={() => {
|
||||
exportHandler(skill);
|
||||
}}
|
||||
deleteHandler={async () => {
|
||||
selectedSkill = skill;
|
||||
showDeleteConfirm = true;
|
||||
}}
|
||||
onClose={() => {}}
|
||||
>
|
||||
<button
|
||||
class="self-center w-fit rounded-lg p-1 text-sm hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white"
|
||||
type="button"
|
||||
>
|
||||
<EllipsisHorizontal className="size-4" />
|
||||
</button>
|
||||
</SkillMenu>
|
||||
{/if}
|
||||
|
||||
<button on:click|stopPropagation|preventDefault>
|
||||
<Tooltip content={skill.is_active ? $i18n.t('Enabled') : $i18n.t('Disabled')}>
|
||||
<Switch
|
||||
bind:state={skill.is_active}
|
||||
on:change={async () => {
|
||||
toggleSkillById(localStorage.token, skill.id);
|
||||
<div class="flex shrink-0 flex-row items-center gap-1.5 self-center">
|
||||
<SkillMenu
|
||||
show={openSkillMenuId === skill.id}
|
||||
editHandler={() => {
|
||||
goto(`/workspace/skills/edit?id=${encodeURIComponent(skill.id)}`);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</button>
|
||||
cloneHandler={() => {
|
||||
cloneHandler(skill);
|
||||
}}
|
||||
exportHandler={() => {
|
||||
exportHandler(skill);
|
||||
}}
|
||||
deleteHandler={async () => {
|
||||
selectedSkill = skill;
|
||||
showDeleteConfirm = true;
|
||||
}}
|
||||
onClose={() => {
|
||||
openSkillMenuId = null;
|
||||
}}
|
||||
>
|
||||
<button
|
||||
class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition dark:text-gray-500"
|
||||
type="button"
|
||||
aria-label={$i18n.t('Skill Menu')}
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
openSkillMenuId = openSkillMenuId === skill.id ? null : skill.id;
|
||||
}}
|
||||
>
|
||||
<EllipsisHorizontal className="size-4" />
|
||||
</button>
|
||||
</SkillMenu>
|
||||
|
||||
<button
|
||||
class="flex h-6 items-center"
|
||||
type="button"
|
||||
on:click={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
content={skill.is_active ? $i18n.t('Enabled') : $i18n.t('Disabled')}
|
||||
>
|
||||
<Switch
|
||||
bind:state={skill.is_active}
|
||||
on:change={async () => {
|
||||
toggleSkillById(localStorage.token, skill.id);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if total > 30}
|
||||
|
||||
Reference in new issue
Block a user