tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Sort Collections by size (#1026)

Browse Source 
- Adds "Size" column to Collections list view
- Adds "Size" option to sort dropdown
This commit is contained in:
sua yoo 2023-08-01 09:47:47 -07:00 committed by GitHub
parent 32428f4d93
commit cc52dfd940
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/pages/org/collections-list.ts
View File

@ -27,7 +27,7 @@ type SearchResult = {
value: string;
};
};
type SortField = "modified" | "name";
type SortField = "modified" | "name" | "totalSize";
type SortDirection = "asc" | "desc";
const INITIAL_PAGE_SIZE = 10;
const sortableFields: Record<
@ -42,6 +42,10 @@ const sortableFields: Record<
label: msg("Name"),
defaultDirection: "asc",
},
totalSize: {
label: msg("Size"),
defaultDirection: "desc",
},
};
const MIN_SEARCH_LENGTH = 2;
@ -365,11 +369,12 @@ export class CollectionsList extends LiteElement {
return html`
<header class="py-2 text-neutral-600 leading-none">
<div
class="hidden md:grid md:grid-cols-[repeat(2,1fr)_16ch_repeat(2,10ch)_2.5rem] gap-3"
class="hidden md:grid md:grid-cols-[repeat(2,1fr)_16ch_repeat(3,10ch)_2.5rem] gap-3"
>
<div class="col-span-1 text-xs pl-3">${msg("Collection Name")}</div>
<div class="col-span-1 text-xs">${msg("Top 3 Tags")}</div>
<div class="col-span-1 text-xs">${msg("Last Updated")}</div>
<div class="col-span-1 text-xs">${msg("Size")}</div>
<div class="col-span-1 text-xs">${msg("Web Captures")}</div>
<div class="col-span-2 text-xs">${msg("Total Pages")}</div>
</div>
@ -441,7 +446,7 @@ export class CollectionsList extends LiteElement {
html`<li class="mb-2 last:mb-0">
<div class="block border rounded leading-none">
<div
class="relative p-3 md:p-0 grid grid-cols-1 md:grid-cols-[repeat(2,1fr)_16ch_repeat(2,10ch)_2.5rem] gap-3 lg:h-10 items-center"
class="relative p-3 md:p-0 grid grid-cols-1 md:grid-cols-[repeat(2,1fr)_16ch_repeat(3,10ch)_2.5rem] gap-3 lg:h-10 items-center"
>
<div class="col-span-1 md:pl-3 truncate font-semibold">
<a
@ -470,6 +475,14 @@ export class CollectionsList extends LiteElement {
minute="2-digit"
></sl-format-date>
</div>
<div
class="col-span-1 truncate text-xs text-neutral-500 font-monostyle"
>
<sl-format-bytes
value=${col.totalSize || 0}
display="narrow"
></sl-format-bytes>
</div>
<div
class="col-span-1 truncate text-xs text-neutral-500 font-monostyle"
>

1
frontend/src/types/collection.ts
View File

@ -6,6 +6,7 @@ export type Collection = {
modified: string; // date
crawlCount: number;
pageCount: number;
totalSize: number;
tags: string[];
resources: string[];
};