From 580138c32e3bda030867c2e0595d411710affad9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matou=C5=A1=20Volf?= <66163112+matous-volf@users.noreply.github.com> Date: Mon, 9 Sep 2024 18:51:29 +0200 Subject: [PATCH] feat: sort the task lists --- src/components/mod.rs | 1 + src/components/pages/category_today_page.rs | 65 +++++++++------------ src/components/task_list.rs | 49 ++-------------- src/components/task_list_item.rs | 61 +++++++++++++++++++ 4 files changed, 94 insertions(+), 82 deletions(-) create mode 100644 src/components/task_list_item.rs diff --git a/src/components/mod.rs b/src/components/mod.rs index c820f1d..71255b8 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -13,3 +13,4 @@ pub(crate) mod reoccurrence_input; pub(crate) mod layout; pub(crate) mod navigation_item; pub(crate) mod subtasks_form; +pub(crate) mod task_list_item; diff --git a/src/components/pages/category_today_page.rs b/src/components/pages/category_today_page.rs index 40c830d..7122eb3 100644 --- a/src/components/pages/category_today_page.rs +++ b/src/components/pages/category_today_page.rs @@ -6,11 +6,12 @@ use crate::query::QueryValue; use chrono::{Local, Locale}; use dioxus::prelude::*; use dioxus_query::prelude::QueryResult; +use crate::components::task_list_item::TaskListItem; #[component] pub(crate) fn CategoryTodayPage() -> Element { let today_date = Local::now().date_naive(); - + let calendar_tasks_query = use_tasks_with_subtasks_in_category_query(Category::Calendar { date: today_date, reoccurrence: None, @@ -26,48 +27,36 @@ pub(crate) fn CategoryTodayPage() -> Element { class: "pt-4 flex flex-col gap-8", match long_term_tasks_query_result.value() { QueryResult::Ok(QueryValue::TasksWithSubtasks(tasks)) - | QueryResult::Loading(Some(QueryValue::TasksWithSubtasks(tasks))) => rsx! { - div { - class: "flex flex-col gap-4", + | QueryResult::Loading(Some(QueryValue::TasksWithSubtasks(tasks))) => { + let mut tasks = tasks.clone(); + tasks.sort(); + rsx! { div { - class: "px-8 flex flex-row items-center gap-2 font-bold", - i { - class: "fa-solid fa-water text-xl w-6 text-center" + class: "flex flex-col gap-4", + div { + class: "px-8 flex flex-row items-center gap-2 font-bold", + i { + class: "fa-solid fa-water text-xl w-6 text-center" + } + div { + class: "mt-1", + "Long-term" + } } div { - class: "mt-1", - "Long-term" - } - } - div { - for task in tasks { - div { - key: "{task.task().id()}", - class: format!( - "px-8 pt-5 {} flex flex-row gap-4", - if task.task().deadline().is_some() { - "pb-0.5" - } else { - "pb-5" - } - ), + for task in tasks { div { - class: "flex flex-col", - div { - class: "mt grow font-medium", - {task.task().title()} - }, - div { - class: "flex flex-row gap-3", - if let Some(deadline) = task.task().deadline() { - div { - class: "text-sm text-zinc-400", - i { - class: "fa-solid fa-bomb" - }, - {deadline.format(" %m. %d.").to_string()} - } + key: "{task.task().id()}", + class: format!( + "px-8 pt-5 {} flex flex-row gap-4", + if task.task().deadline().is_some() { + "pb-0.5" + } else { + "pb-5" } + ), + TaskListItem { + task: task.clone() } } } diff --git a/src/components/task_list.rs b/src/components/task_list.rs index b8d3e78..cd6400d 100644 --- a/src/components/task_list.rs +++ b/src/components/task_list.rs @@ -4,6 +4,7 @@ use dioxus::core_macro::rsx; use dioxus::dioxus_core::Element; use dioxus::prelude::*; use dioxus_query::prelude::use_query_client; +use crate::components::task_list_item::TaskListItem; use crate::query::{QueryErrors, QueryKey, QueryValue}; use crate::server::tasks::complete_task; @@ -12,6 +13,8 @@ pub(crate) fn TaskList(tasks: Vec, class: Option<&'static str> let query_client = use_query_client::(); let mut task_being_edited = use_context::>>(); + tasks.sort(); + rsx! { div { class: format!("flex flex-col {}", class.unwrap_or("")), @@ -74,50 +77,8 @@ pub(crate) fn TaskList(tasks: Vec, class: Option<&'static str> } } }, - div { - class: "flex flex-col", - div { - class: "mt-1 grow font-medium", - {task.task().title()} - }, - div { - class: "flex flex-row gap-4", - if let Some(deadline) = task.task().deadline() { - div { - class: "text-sm text-zinc-400", - i { - class: "fa-solid fa-bomb" - }, - {deadline.format(" %m. %-d.").to_string()} - } - } - if let Category::Calendar { time, .. } = task.task().category() { - if let Some(calendar_time) = time { - div { - class: "text-sm text-zinc-400", - i { - class: "fa-solid fa-clock" - }, - {calendar_time.time().format(" %k:%M").to_string()} - } - } - } - if !task.subtasks().is_empty() { - div { - class: "text-sm text-zinc-400", - i { - class: "fa-solid fa-list-check" - }, - {format!( - " {}/{}", - task.subtasks().iter() - .filter(|subtask| subtask.is_completed()) - .count(), - task.subtasks().len() - )} - } - } - } + TaskListItem { + task: task.clone() } } } diff --git a/src/components/task_list_item.rs b/src/components/task_list_item.rs new file mode 100644 index 0000000..c8835b9 --- /dev/null +++ b/src/components/task_list_item.rs @@ -0,0 +1,61 @@ +use chrono::{Datelike, Local}; +use crate::models::category::Category; +use crate::models::task::TaskWithSubtasks; +use dioxus::core_macro::rsx; +use dioxus::dioxus_core::Element; +use dioxus::prelude::*; + +#[component] +pub(crate) fn TaskListItem(task: TaskWithSubtasks) -> Element { + rsx! { + div { + class: "flex flex-col", + div { + class: "mt-1 grow font-medium", + {task.task().title()} + }, + div { + class: "flex flex-row gap-4", + if let Some(deadline) = task.task().deadline() { + div { + class: "text-sm text-zinc-400", + i { + class: "fa-solid fa-bomb" + }, + {deadline.format(if deadline.year() == Local::now().year() { + " %m. %-d." + } else { + " %m. %-d. %Y" + }).to_string()} + } + } + if let Category::Calendar { time, .. } = task.task().category() { + if let Some(calendar_time) = time { + div { + class: "text-sm text-zinc-400", + i { + class: "fa-solid fa-clock" + }, + {calendar_time.time().format(" %k:%M").to_string()} + } + } + } + if !task.subtasks().is_empty() { + div { + class: "text-sm text-zinc-400", + i { + class: "fa-solid fa-list-check" + }, + {format!( + " {}/{}", + task.subtasks().iter() + .filter(|subtask| subtask.is_completed()) + .count(), + task.subtasks().len() + )} + } + } + } + } + } +}