jamie/s3-client
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: ✨ add sorting functionality for files and folders in AccountTab
Release / release (pull_request) Successful in 17s
Details

Browse Source
This commit is contained in:
Jamie
2026-06-09 09:41:05 +01:00
parent a223586404
commit 96f6b77b0f
1 changed files with 52 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AccountTab.vue
+52 -11
View File
@@ -34,6 +34,38 @@ const renameTarget = ref<{
key: string;
} | null>(null);
const renameValue = ref("");
const sortBy = ref("name-asc");
const sortedFolders = computed(() => {
const arr = [...folders.value];
if (sortBy.value === "name-asc") {
arr.sort((a, b) => a.name.localeCompare(b.name));
} else if (sortBy.value === "name-desc") {
arr.sort((a, b) => b.name.localeCompare(a.name));
}
return arr;
});
const sortedFiles = computed(() => {
const arr = [...files.value];
const [field, dir] = sortBy.value.split("-");
arr.sort((a, b) => {
let cmp = 0;
if (field === "name") {
cmp = a.name.localeCompare(b.name);
} else if (field === "date") {
const ta = a.last_modified ? new Date(a.last_modified).getTime() : 0;
const tb = b.last_modified ? new Date(b.last_modified).getTime() : 0;
cmp = ta - tb;
} else if (field === "size") {
cmp = a.size - b.size;
}
return dir === "asc" ? cmp : -cmp;
});
return arr;
});
let searchTimer: number | undefined;
@@ -300,8 +332,8 @@ watch(
</div>
</div>
<div class="mt-3 flex items-center gap-2">
<div class="relative flex-1">
<div class="mt-3 flex flex-wrap items-center gap-2">
<div class="relative flex-1 min-w-[200px]">
<Search class="pointer-events-none absolute left-3 top-2.5 h-4 w-4 text-slate-500" />
<input
v-model="searchQuery"
@@ -309,6 +341,14 @@ watch(
@input="queueSearch"
/>
</div>
<select v-model="sortBy" class="field w-auto text-sm">
<option value="name-asc">Name (A-Z)</option>
<option value="name-desc">Name (Z-A)</option>
<option value="date-desc">Date (Newest)</option>
<option value="date-asc">Date (Oldest)</option>
<option value="size-desc">Size (Largest)</option>
<option value="size-asc">Size (Smallest)</option>
</select>
<button type="button" class="button-secondary" @click="searchQuery = ''; loadObjects()">
Clear
</button>
@@ -324,7 +364,7 @@ watch(
<p class="text-xs font-medium uppercase tracking-wide text-slate-500">Folders</p>
<ul class="mt-2 space-y-1">
<li
v-for="f in folders"
v-for="f in sortedFolders"
:key="f.prefix"
class="group flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-surface-overlay"
>
@@ -349,7 +389,7 @@ watch(
<Trash2 class="h-4 w-4" />
</button>
</li>
<li v-if="!folders.length" class="text-xs text-slate-500">No folders</li>
<li v-if="!sortedFolders.length" class="text-xs text-slate-500">No folders</li>
</ul>
</div>
@@ -357,17 +397,18 @@ watch(
<p class="text-xs font-medium uppercase tracking-wide text-slate-500">Files</p>
<ul class="mt-2 space-y-1">
<li
v-for="f in files"
v-for="f in sortedFiles"
:key="f.key"
class="group flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-surface-overlay"
>
<div class="flex-1 truncate text-sm text-slate-200">
<span class="inline-flex items-center gap-2">
<File class="h-4 w-4" />
{{ f.name }}
<div class="flex-1 min-w-0">
<span class="inline-flex w-full items-center gap-2 text-sm text-slate-200">
<File class="h-4 w-4 shrink-0" />
<span class="truncate">{{ f.name }}</span>
</span>
</div>
<span class="text-xs text-slate-500">{{ fmtSize(f.size) }}</span>
<span class="w-16 text-right text-xs text-slate-500">{{ fmtSize(f.size) }}</span>
<span class="w-32 text-right text-[11px] text-slate-500">{{ fmtDate(f.last_modified) }}</span>
<button
type="button"
class="text-xs text-slate-400 opacity-0 transition group-hover:opacity-100"
@@ -390,7 +431,7 @@ watch(
<Trash2 class="h-4 w-4" />
</button>
</li>
<li v-if="!files.length" class="text-xs text-slate-500">No files</li>
<li v-if="!sortedFiles.length" class="text-xs text-slate-500">No files</li>
</ul>
</div>
</div>