riyyi/website-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Components: Complete todo page

Browse Source
This commit is contained in:
Riyyi
2024-11-25 21:27:20 +01:00
parent 18936ec703
commit 431fd91017
1 changed files with 20 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Todo/Browse.vue
+20 -25
View File
@@ -1,13 +1,14 @@
<template> <template>
<div class="card"> <div class="card">
<ConfirmDialog></ConfirmDialog> <ConfirmDialog></ConfirmDialog>
<DataTable :value="computedTodos" tableStyle="min-width: 50rem" @sort="onSort" sortMode="multiple" removableSort> <DataTable :value="computedTodos" :lazy="true" tableStyle="min-width: 50rem" removableSort
<Column field="number" header="#"></Column> v-model:sortField="sortField" v-model:sortOrder="sortOrder">
<Column field="id" header="ID" sortable filterField="id" showFilterMenu filter="true"></Column> <Column field="number" header="#" />
<Column field="title" header="Title" sortable filterField="title" showFilterMenu filter="true"></Column> <Column field="id" header="ID" sortable />
<Column field="title" header="Title" sortable />
<Column header="Modifier"> <Column header="Modifier">
<template #body="slotProps"> <template #body="slotProps">
<a @click="removeTodo(slotProps.data.id)"> <a @click="removeTodo(slotProps.data.id)" v-tooltip.top="'Delete'" class="pointer">
<span class="pi pi-trash" style="color: var(--p-red-600);"></span> <span class="pi pi-trash" style="color: var(--p-red-600);"></span>
</a> </a>
</template> </template>
@@ -27,30 +28,18 @@ const confirm = useConfirm();
const store = useTodoStore(); const store = useTodoStore();
const toast = useToast(); const toast = useToast();
const onSort = (event: any) => { // Reactive bindings for sorting
console.log(event); const sortField = ref<string>("");
}; const sortOrder = ref<number>();
const sorting = ref<Record<string, string>>({
id: "asc",
title: "asc",
});
function toggleSorting(key: string) {
sorting.value[key] = sorting.value[key] === 'asc' ? 'desc' : 'asc';
};
function sortTodos(): Todo[] { function sortTodos(): Todo[] {
let todos: Todo[] = JSON.parse(JSON.stringify(store.todos)); // deep copy let todos: Todo[] = JSON.parse(JSON.stringify(store.todos)); // deep copy
// Number if (sortField.value) { // string or null
todos = (sortOrder.value == 1) // 1 or -1
// ID ? todos.sort((a, b) => a[sortField.value as keyof Todo]?.localeCompare(b[sortField.value as keyof Todo] || "") || 0)
: todos.sort((a, b) => b[sortField.value as keyof Todo]?.localeCompare(a[sortField.value as keyof Todo] || "") || 0);
// Title }
todos = (sorting.value.title === "desc")
? todos.sort((a, b) => b.title.localeCompare(a.title))
: todos.sort((a, b) => a.title.localeCompare(b.title));
return todos; return todos;
} }
@@ -85,3 +74,9 @@ const removeTodo = (id: String) => {
}); });
}; };
</script> </script>
<style>
.pointer {
cursor: pointer;
}
</style>