Overhaul trash page
This commit is contained in:
@@ -1,28 +1,31 @@
|
||||
<script lang="ts">
|
||||
import { formatDataVolume, formatDate } from "util/Formatting";
|
||||
import { fs_check_response, fs_encode_path, fs_get_trash, fs_node_icon, fs_path_url, type TrashEntry } from "lib/FilesystemAPI.svelte";
|
||||
import { loading_finish, loading_start } from "lib/Loading";
|
||||
import { loading_finish, loading_run, loading_start, loading_store } from "lib/Loading";
|
||||
import { onMount } from "svelte";
|
||||
import { breadcrumbs_store } from "wrap/BreadcrumbStore";
|
||||
import { FSNavigator } from "filesystem/FSNavigator";
|
||||
|
||||
let { root_path = "/me" }: { root_path?: string } = $props();
|
||||
let {
|
||||
nav,
|
||||
root_path = "/me",
|
||||
}: {
|
||||
nav: FSNavigator
|
||||
root_path?: string
|
||||
} = $props();
|
||||
|
||||
let entries: TrashEntry[] = $state([]);
|
||||
let error: string = $state("");
|
||||
let loaded = $state(false);
|
||||
|
||||
const load = async () => {
|
||||
loaded = false;
|
||||
entries = [];
|
||||
try {
|
||||
loading_start();
|
||||
entries = await fs_get_trash(root_path)
|
||||
error = "";
|
||||
} catch (err: any) {
|
||||
error = err?.message ?? JSON.stringify(err);
|
||||
} finally {
|
||||
loaded = true;
|
||||
loading_finish();
|
||||
}
|
||||
loading_run(async () => {
|
||||
try {
|
||||
entries = await fs_get_trash(root_path)
|
||||
error = "";
|
||||
} catch (err: any) {
|
||||
error = err?.message ?? JSON.stringify(err);
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
const delete_entry = async (entry: TrashEntry) => {
|
||||
@@ -76,122 +79,112 @@ const empty_trash = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
onMount(load);
|
||||
onMount(() => {
|
||||
breadcrumbs_store.set(breadcrumbs)
|
||||
|
||||
load()
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="trash_container">
|
||||
<div class="header">
|
||||
<h2 class="title"><i class="icon">delete</i> Trash</h2>
|
||||
<div class="actions">
|
||||
<button onclick={load}>
|
||||
<i class="icon">refresh</i>
|
||||
<span>Refresh</span>
|
||||
</button>
|
||||
{#if entries.length > 0}
|
||||
<button class="danger" onclick={empty_trash}>
|
||||
<i class="icon">delete_forever</i>
|
||||
<span>Empty trash</span>
|
||||
</button>
|
||||
|
||||
{#snippet breadcrumbs()}
|
||||
<i class="icon">delete</i>
|
||||
<div>
|
||||
Trash bin
|
||||
{#if $loading_store === 0 && entries.length === 0}
|
||||
(empty)
|
||||
{:else if entries.length !== 0}
|
||||
({formatDataVolume(entries.reduce(
|
||||
(acc, entry) => acc + entry.node.file_size, 0
|
||||
), 3)})
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
<button onclick={() => window.history.back()} title="Back">
|
||||
<i class="icon">arrow_back</i>
|
||||
</button>
|
||||
<button onclick={() => nav.navigate_up()} disabled={$nav.path.length <= 1} title="Up">
|
||||
<i class="icon">north</i>
|
||||
</button>
|
||||
<button onclick={() => nav.reload()} title="Refresh directory listing">
|
||||
<i class="icon">refresh</i>
|
||||
</button>
|
||||
{#if entries.length !== 0}
|
||||
<button class="button button_red" onclick={empty_trash}>
|
||||
<i class="icon">delete_forever</i>
|
||||
<span>Delete all</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
{#if error}
|
||||
<p class="error">{error}</p>
|
||||
{:else if loaded && entries.length === 0}
|
||||
<p class="empty">The trash is empty.</p>
|
||||
{:else if entries.length > 0}
|
||||
<table class="trash_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Name</td>
|
||||
<td class="hide_small">Original location</td>
|
||||
<td class="hide_small">Deleted</td>
|
||||
<td class="hide_small">Size</td>
|
||||
<td></td>
|
||||
{#if error}
|
||||
<p class="error">{error}</p>
|
||||
{:else if entries.length > 0}
|
||||
<table class="trash_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Name</td>
|
||||
<td class="hide_small">Original location</td>
|
||||
<td class="hide_small">Deleted at</td>
|
||||
<td class="hide_small">Size</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each entries as entry (entry.node.id)}
|
||||
<tr class="entry">
|
||||
<td class="icon_cell">
|
||||
<img
|
||||
src={fs_node_icon(entry.node, 32, 32)}
|
||||
class="node_icon"
|
||||
alt="icon"
|
||||
/>
|
||||
</td>
|
||||
<td class="name_cell">
|
||||
<a class="entry_link" href={"/d" + fs_encode_path(entry.node.path)}>
|
||||
{entry.node.name}
|
||||
</a>
|
||||
</td>
|
||||
<td class="hide_small">
|
||||
{entry.original_path ? entry.original_path.slice(0, -entry.node.name.length) : "—"}
|
||||
</td>
|
||||
<td class="hide_small">
|
||||
{entry.deletion_date ? formatDate(entry.deletion_date) : "—"}
|
||||
</td>
|
||||
<td class="hide_small">
|
||||
{#if entry.node.type === "file"}
|
||||
{formatDataVolume(entry.node.file_size, 3)}
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
<div class="row_actions">
|
||||
<button title="Restore to original location" onclick={() => restore_entry(entry)}>
|
||||
<i class="icon">restore_from_trash</i>
|
||||
</button>
|
||||
<button class="button button_red" title="Delete permanently" onclick={() => delete_entry(entry)}>
|
||||
<i class="icon">delete_forever</i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each entries as entry (entry.node.id)}
|
||||
<tr class="entry">
|
||||
<td class="icon_cell">
|
||||
<img
|
||||
src={fs_node_icon(entry.node, 32, 32)}
|
||||
class="node_icon"
|
||||
alt="icon"
|
||||
/>
|
||||
</td>
|
||||
<td class="name_cell">
|
||||
<a class="entry_link" href={"/d" + fs_encode_path(entry.node.path)}>
|
||||
{entry.node.name}
|
||||
</a>
|
||||
</td>
|
||||
<td class="hide_small original_path">
|
||||
{entry.original_path || "—"}
|
||||
</td>
|
||||
<td class="hide_small date_cell">
|
||||
{entry.deletion_date ? formatDate(entry.deletion_date) : "—"}
|
||||
</td>
|
||||
<td class="hide_small size_cell">
|
||||
{#if entry.node.type === "file"}
|
||||
{formatDataVolume(entry.node.file_size, 3)}
|
||||
{/if}
|
||||
</td>
|
||||
<td class="button_cell">
|
||||
<div class="row_actions">
|
||||
<button title="Restore to original location" onclick={() => restore_entry(entry)}>
|
||||
<i class="icon">restore_from_trash</i>
|
||||
</button>
|
||||
<button class="danger" title="Delete permanently" onclick={() => delete_entry(entry)}>
|
||||
<i class="icon">delete_forever</i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.trash_container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3em;
|
||||
margin: 0;
|
||||
font-size: 1.2em;
|
||||
border: none;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
.separator {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.error {
|
||||
color: var(--danger_color, #c0392b);
|
||||
}
|
||||
.empty {
|
||||
color: var(--body_text_color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.trash_table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--body_background);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.trash_table td {
|
||||
padding: 0;
|
||||
@@ -205,7 +198,6 @@ onMount(load);
|
||||
}
|
||||
.icon_cell {
|
||||
width: 2.5em;
|
||||
padding: 0.3em 0.3em 0.3em 0.5em;
|
||||
}
|
||||
.node_icon {
|
||||
display: block;
|
||||
@@ -214,7 +206,6 @@ onMount(load);
|
||||
object-fit: contain;
|
||||
}
|
||||
.name_cell {
|
||||
padding: 0.3em 0.5em;
|
||||
word-break: break-all;
|
||||
}
|
||||
.entry_link {
|
||||
@@ -224,34 +215,10 @@ onMount(load);
|
||||
.entry_link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.original_path {
|
||||
padding: 0.3em 0.5em;
|
||||
color: var(--body_text_color);
|
||||
opacity: 0.7;
|
||||
font-size: 0.85em;
|
||||
word-break: break-all;
|
||||
}
|
||||
.date_cell {
|
||||
padding: 0.3em 0.5em;
|
||||
white-space: nowrap;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.size_cell {
|
||||
padding: 0.3em 0.5em;
|
||||
white-space: nowrap;
|
||||
font-size: 0.85em;
|
||||
text-align: right;
|
||||
}
|
||||
.button_cell {
|
||||
padding: 0.3em 0.5em;
|
||||
}
|
||||
.row_actions {
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
}
|
||||
.danger {
|
||||
color: var(--danger_color, #c0392b);
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.hide_small {
|
||||
display: none;
|
||||
|
||||
@@ -90,7 +90,7 @@ export const seek = (delta: number) => {
|
||||
<Spinner/>
|
||||
</div>
|
||||
{:else if viewer_type === "dir" && $nav.base.name === ".Trash"}
|
||||
<TrashBin root_path={$nav.path[$nav.path.length - 2].path}/>
|
||||
<TrashBin nav={nav} root_path={$nav.path[$nav.path.length - 2].path}/>
|
||||
{:else if viewer_type === "dir"}
|
||||
<FileManager nav={nav} upload_widget={upload_widget} edit_window={edit_window} search_bar={search_bar}>
|
||||
<CustomBanner path={$nav.path}/>
|
||||
|
||||
Reference in New Issue
Block a user