alex
9eb0325c7a
Unify collections and shared items under a single Collections tab while keeping Archive separate, and fix card layering so menus render correctly. Restore invite discoverability by adding navbar access to /invites and add missing i18n keys to prevent raw key labels in collections/invites UI.
633 lines
20 KiB
Svelte
633 lines
20 KiB
Svelte
<script lang="ts">
|
|
import { enhance } from '$app/forms';
|
|
import { goto } from '$app/navigation';
|
|
import { page } from '$app/stores';
|
|
import CollectionCard from '$lib/components/cards/CollectionCard.svelte';
|
|
import CollectionModal from '$lib/components/CollectionModal.svelte';
|
|
import type { Collection, SlimCollection } from '$lib/types';
|
|
import { t } from 'svelte-i18n';
|
|
|
|
import Plus from '~icons/mdi/plus';
|
|
import Filter from '~icons/mdi/filter-variant';
|
|
import Sort from '~icons/mdi/sort';
|
|
import Archive from '~icons/mdi/archive';
|
|
import CollectionIcon from '~icons/mdi/folder-multiple';
|
|
import { addToast } from '$lib/toasts';
|
|
import DeleteWarning from '$lib/components/DeleteWarning.svelte';
|
|
|
|
export let data: any;
|
|
|
|
let collections: SlimCollection[] = data.props.adventures || [];
|
|
let sharedCollections: SlimCollection[] = data.props.sharedCollections || [];
|
|
let archivedCollections: SlimCollection[] = data.props.archivedCollections || [];
|
|
|
|
let newType: string = '';
|
|
let resultsPerPage: number = 25;
|
|
let isShowingCollectionModal: boolean = false;
|
|
let activeView: 'collections' | 'archived' = 'collections';
|
|
|
|
let next: string | null = data.props.next || null;
|
|
let previous: string | null = data.props.previous || null;
|
|
let count = data.props.count || 0;
|
|
let totalPages = Math.ceil(count / resultsPerPage);
|
|
let currentPage: number = data.props.currentPage || 1;
|
|
let orderBy = data.props.order_by || 'updated_at';
|
|
let orderDirection = data.props.order_direction || 'asc';
|
|
let statusFilter = data.props.status || '';
|
|
|
|
let sidebarOpen = false;
|
|
let collectionToEdit: Collection | null = null;
|
|
|
|
$: mergedCollections = [...collections, ...sharedCollections].filter(
|
|
(collection, index, list) => index === list.findIndex((entry) => entry.id === collection.id)
|
|
);
|
|
|
|
$: currentCollections = activeView === 'collections' ? mergedCollections : archivedCollections;
|
|
|
|
// Keep count in sync with collections view
|
|
$: {
|
|
if (activeView === 'collections' && count !== mergedCollections.length) {
|
|
count = mergedCollections.length;
|
|
}
|
|
}
|
|
|
|
async function goToPage(pageNum: number) {
|
|
const url = new URL($page.url);
|
|
url.searchParams.set('page', pageNum.toString());
|
|
await goto(url.toString(), { invalidateAll: true, replaceState: true });
|
|
if (data.props.adventures) {
|
|
collections = data.props.adventures;
|
|
}
|
|
if (data.props.archivedCollections) {
|
|
archivedCollections = data.props.archivedCollections;
|
|
}
|
|
currentPage = pageNum;
|
|
}
|
|
|
|
async function updateSort(by: string, direction: string) {
|
|
const url = new URL($page.url);
|
|
url.searchParams.set('order_by', by);
|
|
url.searchParams.set('order_direction', direction);
|
|
url.searchParams.set('page', '1'); // Reset to first page when sorting changes
|
|
currentPage = 1;
|
|
orderBy = by;
|
|
orderDirection = direction;
|
|
await goto(url.toString(), { invalidateAll: true, replaceState: true });
|
|
if (data.props.adventures) {
|
|
collections = data.props.adventures;
|
|
}
|
|
if (data.props.archivedCollections) {
|
|
archivedCollections = data.props.archivedCollections;
|
|
}
|
|
}
|
|
|
|
async function updateStatusFilter(status: string) {
|
|
const url = new URL($page.url);
|
|
if (status) {
|
|
url.searchParams.set('status', status);
|
|
} else {
|
|
url.searchParams.delete('status');
|
|
}
|
|
url.searchParams.set('page', '1'); // Reset to first page when filter changes
|
|
currentPage = 1;
|
|
statusFilter = status;
|
|
await goto(url.toString(), { invalidateAll: true, replaceState: true });
|
|
if (data.props.adventures) {
|
|
collections = data.props.adventures;
|
|
}
|
|
}
|
|
|
|
let importInputEl: HTMLInputElement | null = null;
|
|
let importFormEl: HTMLFormElement | null = null;
|
|
let isImporting: boolean = false;
|
|
|
|
function triggerImport() {
|
|
importInputEl?.click();
|
|
}
|
|
|
|
async function handleImportFileChange(event: Event) {
|
|
const target = event.currentTarget as HTMLInputElement;
|
|
const file = target.files && target.files[0];
|
|
if (!file) return;
|
|
isImporting = true;
|
|
// Submit the hidden form to server action
|
|
importFormEl?.requestSubmit();
|
|
}
|
|
|
|
function deleteCollection(event: CustomEvent<string>) {
|
|
const collectionId = event.detail;
|
|
collections = collections.filter((collection) => collection.id !== collectionId);
|
|
sharedCollections = sharedCollections.filter((collection) => collection.id !== collectionId);
|
|
archivedCollections = archivedCollections.filter(
|
|
(collection) => collection.id !== collectionId
|
|
);
|
|
}
|
|
|
|
function archiveCollection(event: CustomEvent<string>) {
|
|
const collectionId = event.detail;
|
|
console.log('Archiving collection with ID:', collectionId);
|
|
// Find the collection in owned collections
|
|
const collectionToArchive = collections.find((collection) => collection.id === collectionId);
|
|
|
|
if (collectionToArchive) {
|
|
// Remove from owned collections
|
|
collections = collections.filter((collection) => collection.id !== collectionId);
|
|
// Add to archived collections
|
|
archivedCollections = [...archivedCollections, { ...collectionToArchive, is_archived: true }];
|
|
}
|
|
}
|
|
|
|
function unarchiveCollection(event: CustomEvent<string>) {
|
|
const collectionId = event.detail;
|
|
// Find the collection in archived collections
|
|
const collectionToUnarchive = archivedCollections.find(
|
|
(collection) => collection.id === collectionId
|
|
);
|
|
|
|
if (collectionToUnarchive) {
|
|
// Remove from archived collections
|
|
archivedCollections = archivedCollections.filter(
|
|
(collection) => collection.id !== collectionId
|
|
);
|
|
// Add to owned collections
|
|
collections = [...collections, { ...collectionToUnarchive, is_archived: false }];
|
|
}
|
|
}
|
|
|
|
function saveOrCreate(event: CustomEvent<SlimCollection>) {
|
|
if (collections.find((collection) => collection.id === event.detail.id)) {
|
|
collections = collections.map((collection) => {
|
|
if (collection.id === event.detail.id) {
|
|
return event.detail;
|
|
}
|
|
return collection;
|
|
});
|
|
} else {
|
|
collections = [event.detail, ...collections];
|
|
}
|
|
isShowingCollectionModal = false;
|
|
}
|
|
|
|
function duplicateCollectionInList(event: CustomEvent<SlimCollection | Collection>) {
|
|
const duplicatedCollection = event.detail as SlimCollection;
|
|
|
|
collections = [
|
|
duplicatedCollection,
|
|
...collections.filter((collection) => collection.id !== duplicatedCollection.id)
|
|
];
|
|
|
|
archivedCollections = archivedCollections.filter(
|
|
(collection) => collection.id !== duplicatedCollection.id
|
|
);
|
|
|
|
activeView = 'collections';
|
|
}
|
|
|
|
async function editCollection(event: CustomEvent<SlimCollection>) {
|
|
const slim = event.detail;
|
|
try {
|
|
const res = await fetch(`/api/collections/${slim.id}?nested=true`);
|
|
if (res.ok) {
|
|
collectionToEdit = (await res.json()) as Collection;
|
|
} else {
|
|
collectionToEdit = slim as unknown as Collection;
|
|
}
|
|
} catch (e) {
|
|
collectionToEdit = slim as unknown as Collection;
|
|
}
|
|
isShowingCollectionModal = true;
|
|
}
|
|
|
|
let isShowingConfirmLeaveModal: boolean = false;
|
|
let collectionIdToLeave: string | null = null;
|
|
|
|
async function leaveCollection() {
|
|
let res = await fetch(`/api/collections/${collectionIdToLeave}/leave`, {
|
|
method: 'POST'
|
|
});
|
|
if (res.ok) {
|
|
addToast('info', $t('adventures.left_collection_message'));
|
|
// Remove from shared collections
|
|
sharedCollections = sharedCollections.filter(
|
|
(collection) => collection.id !== collectionIdToLeave
|
|
);
|
|
// Optionally, you can also remove from owned collections if needed
|
|
collections = collections.filter((collection) => collection.id !== collectionIdToLeave);
|
|
} else {
|
|
console.log('Error leaving collection');
|
|
}
|
|
}
|
|
|
|
function saveEdit(event: CustomEvent<SlimCollection>) {
|
|
collections = collections.map((adventure) => {
|
|
if (adventure.id === event.detail.id) {
|
|
return event.detail;
|
|
}
|
|
return adventure;
|
|
});
|
|
isShowingCollectionModal = false;
|
|
}
|
|
|
|
function toggleSidebar() {
|
|
sidebarOpen = !sidebarOpen;
|
|
}
|
|
|
|
function switchView(view: 'collections' | 'archived') {
|
|
activeView = view;
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Collections</title>
|
|
<meta name="description" content="View your adventure collections." />
|
|
</svelte:head>
|
|
|
|
{#if isShowingConfirmLeaveModal}
|
|
<DeleteWarning
|
|
title={$t('adventures.leave_collection')}
|
|
button_text={$t('adventures.leave')}
|
|
description={$t('adventures.leave_collection_warning')}
|
|
is_warning={true}
|
|
on:close={() => (isShowingConfirmLeaveModal = false)}
|
|
on:confirm={leaveCollection}
|
|
/>
|
|
{/if}
|
|
|
|
{#if isShowingCollectionModal}
|
|
<CollectionModal
|
|
{collectionToEdit}
|
|
on:close={() => (isShowingCollectionModal = false)}
|
|
on:saveEdit={saveEdit}
|
|
on:save={saveOrCreate}
|
|
/>
|
|
{/if}
|
|
|
|
<!-- Import progress modal -->
|
|
{#if isImporting}
|
|
<dialog id="import_modal" class="modal modal-open">
|
|
<div class="modal-box">
|
|
<h3 class="font-bold text-lg">{$t('adventures.importing') || 'Importing collection...'}</h3>
|
|
<div class="mt-4 flex items-center gap-3">
|
|
<span class="loading loading-dots loading-md"></span>
|
|
<span class="text-sm text-base-content/70"
|
|
>{$t('adventures.in_progress') || 'In progress'}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
{/if}
|
|
|
|
<div class="min-h-screen bg-base-100">
|
|
<div class="drawer lg:drawer-open">
|
|
<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
|
|
|
|
<div class="drawer-content">
|
|
<!-- Header Section -->
|
|
<div class="sticky top-0 z-40 bg-base-100/95 backdrop-blur-md border-b border-base-200">
|
|
<div class="container mx-auto px-6 py-4">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<div class="flex items-center gap-3">
|
|
<button class="btn btn-ghost btn-square lg:hidden" on:click={toggleSidebar}>
|
|
<Filter class="w-5 h-5" />
|
|
</button>
|
|
<h1 class="text-2xl font-bold">Collections</h1>
|
|
</div>
|
|
|
|
<button
|
|
class="btn btn-primary btn-sm gap-2"
|
|
on:click={() => {
|
|
collectionToEdit = null;
|
|
isShowingCollectionModal = true;
|
|
newType = 'visited';
|
|
}}
|
|
>
|
|
<Plus class="w-4 h-4" />
|
|
{$t('collection.create')}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex border-b border-base-200 mt-4 overflow-x-auto">
|
|
<button
|
|
class="tab px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap {activeView ===
|
|
'collections'
|
|
? 'border-primary text-primary'
|
|
: 'border-transparent text-base-content/60 hover:text-base-content'}"
|
|
on:click={() => switchView('collections')}
|
|
>
|
|
<CollectionIcon class="w-4 h-4" />
|
|
<span class="hidden sm:inline">{$t('navbar.collections')}</span>
|
|
<div class="badge badge-sm badge-ghost">{mergedCollections.length}</div>
|
|
</button>
|
|
<button
|
|
class="tab px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap {activeView ===
|
|
'archived'
|
|
? 'border-primary text-primary'
|
|
: 'border-transparent text-base-content/60 hover:text-base-content'}"
|
|
on:click={() => switchView('archived')}
|
|
>
|
|
<Archive class="w-4 h-4" />
|
|
<span class="hidden sm:inline">{$t('adventures.archived')}</span>
|
|
<div class="badge badge-sm badge-ghost">{archivedCollections.length}</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="container mx-auto px-6 py-8">
|
|
{#if currentCollections.length === 0}
|
|
<!-- Empty State for Collections -->
|
|
<div class="flex flex-col items-center justify-center py-16">
|
|
<div class="p-6 bg-base-200/50 rounded-2xl mb-6">
|
|
{#if activeView === 'collections'}
|
|
<CollectionIcon class="w-16 h-16 text-base-content/30" />
|
|
{:else}
|
|
<Archive class="w-16 h-16 text-base-content/30" />
|
|
{/if}
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-base-content/70 mb-2">
|
|
{activeView === 'collections'
|
|
? $t('collection.no_collections_yet')
|
|
: $t('collection.no_archived_collections')}
|
|
</h3>
|
|
<p class="text-base-content/50 text-center max-w-md">
|
|
{activeView === 'collections'
|
|
? $t('collection.create_first')
|
|
: $t('collection.archived_appear_here')}
|
|
</p>
|
|
{#if activeView === 'collections'}
|
|
<button
|
|
class="btn btn-primary btn-wide mt-6 gap-2"
|
|
on:click={() => {
|
|
collectionToEdit = null;
|
|
isShowingCollectionModal = true;
|
|
newType = 'visited';
|
|
}}
|
|
>
|
|
<Plus class="w-5 h-5" />
|
|
{$t('collection.create')}
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{:else}
|
|
<!-- Collections Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
|
|
{#each currentCollections as collection (collection.id)}
|
|
<CollectionCard
|
|
type=""
|
|
{collection}
|
|
on:delete={deleteCollection}
|
|
on:edit={editCollection}
|
|
on:archive={archiveCollection}
|
|
on:unarchive={unarchiveCollection}
|
|
on:duplicate={duplicateCollectionInList}
|
|
user={data.user}
|
|
on:leave={(e) => {
|
|
collectionIdToLeave = e.detail;
|
|
isShowingConfirmLeaveModal = true;
|
|
}}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{#if activeView === 'collections' && (next || previous)}
|
|
<div class="flex justify-center mt-12">
|
|
<div class="join bg-base-100 shadow-lg rounded-2xl p-2">
|
|
{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
|
|
<button
|
|
class="join-item btn btn-sm {currentPage === page
|
|
? 'btn-primary'
|
|
: 'btn-ghost'}"
|
|
on:click={() => goToPage(page)}
|
|
>
|
|
{page}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="drawer-side z-50">
|
|
<label for="my-drawer" class="drawer-overlay"></label>
|
|
<div class="w-80 min-h-full bg-base-100 shadow-2xl">
|
|
<div class="p-6">
|
|
<!-- Sidebar Header -->
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<div class="p-2 bg-primary/10 rounded-lg">
|
|
<Sort class="w-6 h-6 text-primary" />
|
|
</div>
|
|
<h2 class="text-xl font-bold">{$t('adventures.filters_and_sort')}</h2>
|
|
</div>
|
|
|
|
<!-- Status Filter -->
|
|
<div class="card bg-base-200/50 p-4 mb-4">
|
|
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
|
|
<Filter class="w-5 h-5" />
|
|
{$t('adventures.status_filter')}
|
|
</h3>
|
|
|
|
<div class="space-y-2">
|
|
<label class="label cursor-pointer justify-start gap-3">
|
|
<input
|
|
type="radio"
|
|
name="status_filter"
|
|
class="radio radio-primary radio-sm"
|
|
checked={statusFilter === ''}
|
|
on:change={() => updateStatusFilter('')}
|
|
/>
|
|
<span class="label-text">{$t('adventures.all')}</span>
|
|
</label>
|
|
<label class="label cursor-pointer justify-start gap-3">
|
|
<input
|
|
type="radio"
|
|
name="status_filter"
|
|
class="radio radio-primary radio-sm"
|
|
checked={statusFilter === 'folder'}
|
|
on:change={() => updateStatusFilter('folder')}
|
|
/>
|
|
<span class="label-text">📁 {$t('adventures.folder')}</span>
|
|
</label>
|
|
<label class="label cursor-pointer justify-start gap-3">
|
|
<input
|
|
type="radio"
|
|
name="status_filter"
|
|
class="radio radio-primary radio-sm"
|
|
checked={statusFilter === 'upcoming'}
|
|
on:change={() => updateStatusFilter('upcoming')}
|
|
/>
|
|
<span class="label-text">🚀 {$t('adventures.upcoming')}</span>
|
|
</label>
|
|
<label class="label cursor-pointer justify-start gap-3">
|
|
<input
|
|
type="radio"
|
|
name="status_filter"
|
|
class="radio radio-primary radio-sm"
|
|
checked={statusFilter === 'in_progress'}
|
|
on:change={() => updateStatusFilter('in_progress')}
|
|
/>
|
|
<span class="label-text">🎯 {$t('adventures.in_progress')}</span>
|
|
</label>
|
|
<label class="label cursor-pointer justify-start gap-3">
|
|
<input
|
|
type="radio"
|
|
name="status_filter"
|
|
class="radio radio-primary radio-sm"
|
|
checked={statusFilter === 'completed'}
|
|
on:change={() => updateStatusFilter('completed')}
|
|
/>
|
|
<span class="label-text">✓ {$t('adventures.completed')}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sort Form - Updated to use URL navigation -->
|
|
<div class="card bg-base-200/50 p-4">
|
|
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
|
|
<Sort class="w-5 h-5" />
|
|
{$t(`adventures.sort`)}
|
|
</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
<label class="label">
|
|
<span class="label-text font-medium">{$t(`adventures.order_direction`)}</span>
|
|
</label>
|
|
<div class="join w-full">
|
|
<button
|
|
class="join-item btn btn-sm flex-1 {orderDirection === 'asc'
|
|
? 'btn-active'
|
|
: ''}"
|
|
on:click={() => updateSort(orderBy, 'asc')}
|
|
>
|
|
{$t(`adventures.ascending`)}
|
|
</button>
|
|
<button
|
|
class="join-item btn btn-sm flex-1 {orderDirection === 'desc'
|
|
? 'btn-active'
|
|
: ''}"
|
|
on:click={() => updateSort(orderBy, 'desc')}
|
|
>
|
|
{$t(`adventures.descending`)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
<label class="label">
|
|
<span class="label-text font-medium">{$t('adventures.order_by')}</span>
|
|
</label>
|
|
<div class="space-y-2">
|
|
<label class="label cursor-pointer justify-start gap-3">
|
|
<input
|
|
type="radio"
|
|
name="order_by_radio"
|
|
class="radio radio-primary radio-sm"
|
|
checked={orderBy === 'updated_at'}
|
|
on:change={() => updateSort('updated_at', orderDirection)}
|
|
/>
|
|
<span class="label-text">{$t('adventures.updated')}</span>
|
|
</label>
|
|
<label class="label cursor-pointer justify-start gap-3">
|
|
<input
|
|
type="radio"
|
|
name="order_by_radio"
|
|
class="radio radio-primary radio-sm"
|
|
checked={orderBy === 'start_date'}
|
|
on:change={() => updateSort('start_date', orderDirection)}
|
|
/>
|
|
<span class="label-text">{$t('adventures.start_date')}</span>
|
|
</label>
|
|
<label class="label cursor-pointer justify-start gap-3">
|
|
<input
|
|
type="radio"
|
|
name="order_by_radio"
|
|
class="radio radio-primary radio-sm"
|
|
checked={orderBy === 'name'}
|
|
on:change={() => updateSort('name', orderDirection)}
|
|
/>
|
|
<span class="label-text">{$t('adventures.name')}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating Action Button -->
|
|
{#if activeView === 'collections'}
|
|
<div class="fixed bottom-6 right-6 z-50">
|
|
<div class="dropdown dropdown-top dropdown-end">
|
|
<div
|
|
tabindex="0"
|
|
role="button"
|
|
class="btn btn-primary btn-circle w-16 h-16 shadow-2xl hover:shadow-primary/25 transition-all duration-200"
|
|
>
|
|
<Plus class="w-8 h-8" />
|
|
</div>
|
|
<ul
|
|
class="dropdown-content z-[1] menu p-4 shadow-2xl bg-base-100 rounded-2xl w-64 border border-base-300"
|
|
>
|
|
<div class="text-center mb-4">
|
|
<h3 class="font-bold text-lg">{$t(`adventures.create_new`)}</h3>
|
|
</div>
|
|
<button
|
|
class="btn btn-primary gap-2 w-full"
|
|
on:click={() => {
|
|
collectionToEdit = null;
|
|
isShowingCollectionModal = true;
|
|
newType = 'visited';
|
|
}}
|
|
>
|
|
<CollectionIcon class="w-5 h-5" />
|
|
{$t(`adventures.collection`)}
|
|
</button>
|
|
<div class="divider my-2"></div>
|
|
<button class="btn btn-neutral gap-2 w-full" on:click={triggerImport}>
|
|
<Archive class="w-5 h-5" />
|
|
{$t('adventures.import_from_file')}
|
|
</button>
|
|
<form
|
|
bind:this={importFormEl}
|
|
method="POST"
|
|
action="?/restoreData"
|
|
enctype="multipart/form-data"
|
|
use:enhance={({}) => {
|
|
return ({ result }) => {
|
|
isImporting = false;
|
|
if (result?.type === 'success') {
|
|
addToast('success', $t('adventures.import_success') || 'Imported collection');
|
|
// Delay refresh by 1 second to let the success state be visible
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 1000);
|
|
} else if (result?.type === 'failure') {
|
|
addToast('error', $t('adventures.import_failed') || 'Import failed');
|
|
}
|
|
};
|
|
}}
|
|
>
|
|
<input
|
|
bind:this={importInputEl}
|
|
type="file"
|
|
name="file"
|
|
accept=".zip"
|
|
class="hidden"
|
|
on:change={handleImportFileChange}
|
|
/>
|
|
</form>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|