matous-volf/todo-baggins
matous-volf/todo-baggins
1
0
Fork 0
Code Issues 23 Pull Requests Actions Projects 1 Activity

feat: display the subtask count in task lists

Browse Source
This commit is contained in:
Matouš Volf 2024-09-08 22:20:31 +02:00
parent b937d0bcb5
commit 024c5a2258
6 changed files with 200 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/pages/category_calendar_page.rs
View File

@ -6,14 +6,14 @@ use dioxus::prelude::*;
use dioxus_query::prelude::QueryResult; use dioxus_query::prelude::QueryResult;
use crate::components::task_list::TaskList; use crate::components::task_list::TaskList;
use crate::query::QueryValue; use crate::query::QueryValue;
use crate::query::tasks::use_tasks_in_category_query; use crate::query::tasks::use_tasks_with_subtasks_in_category_query;
use crate::models::task::Task; use crate::models::task::{TaskWithSubtasks};
const CALENDAR_LENGTH_DAYS: usize = 366 * 3; const CALENDAR_LENGTH_DAYS: usize = 366 * 3;
#[component] #[component]
pub(crate) fn CategoryCalendarPage() -> Element { pub(crate) fn CategoryCalendarPage() -> Element {
let tasks = use_tasks_in_category_query(Category::Calendar { let tasks = use_tasks_with_subtasks_in_category_query(Category::Calendar {
date: Local::now().date_naive(), date: Local::now().date_naive(),
reoccurrence: None, reoccurrence: None,
time: None, time: None,
@ -22,8 +22,8 @@ pub(crate) fn CategoryCalendarPage() -> Element {
rsx! { rsx! {
match tasks_query_result.value() { match tasks_query_result.value() {
QueryResult::Ok(QueryValue::Tasks(tasks)) QueryResult::Ok(QueryValue::TasksWithSubtasks(tasks))
| QueryResult::Loading(Some(QueryValue::Tasks(tasks))) => { | QueryResult::Loading(Some(QueryValue::TasksWithSubtasks(tasks))) => {
let today_date = Local::now().date_naive(); let today_date = Local::now().date_naive();
rsx! { rsx! {
@ -52,12 +52,13 @@ pub(crate) fn CategoryCalendarPage() -> Element {
} }
TaskList { TaskList {
tasks: tasks.iter().filter(|task| { tasks: tasks.iter().filter(|task| {
if let Category::Calendar { date, .. } = task.category() { if let Category::Calendar { date, .. }
= task.task().category() {
*date == date_current *date == date_current
} else { } else {
panic!("Unexpected category."); panic!("Unexpected category.");
} }
}).cloned().collect::<Vec<Task>>() }).cloned().collect::<Vec<TaskWithSubtasks>>()
} }
} }
} }

8
src/components/pages/category_page.rs
View File

@ -1,6 +1,6 @@
use crate::components::task_list::TaskList; use crate::components::task_list::TaskList;
use crate::models::category::Category; use crate::models::category::Category;
use crate::query::tasks::use_tasks_in_category_query; use crate::query::tasks::use_tasks_with_subtasks_in_category_query;
use crate::query::QueryValue; use crate::query::QueryValue;
use dioxus::core_macro::rsx; use dioxus::core_macro::rsx;
use dioxus::dioxus_core::Element; use dioxus::dioxus_core::Element;
@ -9,12 +9,12 @@ use dioxus_query::prelude::QueryResult;
#[component] #[component]
pub(crate) fn CategoryPage(category: Category) -> Element { pub(crate) fn CategoryPage(category: Category) -> Element {
let tasks_query = use_tasks_in_category_query(category); let tasks_query = use_tasks_with_subtasks_in_category_query(category);
let tasks_query_result = tasks_query.result(); let tasks_query_result = tasks_query.result();
match tasks_query_result.value() { match tasks_query_result.value() {
QueryResult::Ok(QueryValue::Tasks(tasks)) QueryResult::Ok(QueryValue::TasksWithSubtasks(tasks))
| QueryResult::Loading(Some(QueryValue::Tasks(tasks))) => rsx! { | QueryResult::Loading(Some(QueryValue::TasksWithSubtasks(tasks))) => rsx! {
TaskList { TaskList {
tasks: tasks.clone(), tasks: tasks.clone(),
class: "pb-36" class: "pb-36"

32
src/components/pages/category_today_page.rs
View File

@ -1,7 +1,7 @@
use crate::components::task_list::TaskList; use crate::components::task_list::TaskList;
use crate::models::category::Category; use crate::models::category::Category;
use crate::models::task::Task; use crate::models::task::TaskWithSubtasks;
use crate::query::tasks::use_tasks_in_category_query; use crate::query::tasks::{use_tasks_with_subtasks_in_category_query};
use crate::query::QueryValue; use crate::query::QueryValue;
use chrono::{Local, Locale}; use chrono::{Local, Locale};
use dioxus::prelude::*; use dioxus::prelude::*;
@ -11,22 +11,22 @@ use dioxus_query::prelude::QueryResult;
pub(crate) fn CategoryTodayPage() -> Element { pub(crate) fn CategoryTodayPage() -> Element {
let today_date = Local::now().date_naive(); let today_date = Local::now().date_naive();
let calendar_tasks_query = use_tasks_in_category_query(Category::Calendar { let calendar_tasks_query = use_tasks_with_subtasks_in_category_query(Category::Calendar {
date: today_date, date: today_date,
reoccurrence: None, reoccurrence: None,
time: None, time: None,
}); });
let calendar_tasks_query_result = calendar_tasks_query.result(); let calendar_tasks_query_result = calendar_tasks_query.result();
let long_term_tasks_query = use_tasks_in_category_query(Category::LongTerm); let long_term_tasks_query = use_tasks_with_subtasks_in_category_query(Category::LongTerm);
let long_term_tasks_query_result = long_term_tasks_query.result(); let long_term_tasks_query_result = long_term_tasks_query.result();
rsx! { rsx! {
div { div {
class: "pt-4 flex flex-col gap-8", class: "pt-4 flex flex-col gap-8",
match long_term_tasks_query_result.value() { match long_term_tasks_query_result.value() {
QueryResult::Ok(QueryValue::Tasks(tasks)) QueryResult::Ok(QueryValue::TasksWithSubtasks(tasks))
| QueryResult::Loading(Some(QueryValue::Tasks(tasks))) => rsx! { | QueryResult::Loading(Some(QueryValue::TasksWithSubtasks(tasks))) => rsx! {
div { div {
class: "flex flex-col gap-4", class: "flex flex-col gap-4",
div { div {
@ -42,10 +42,10 @@ pub(crate) fn CategoryTodayPage() -> Element {
div { div {
for task in tasks { for task in tasks {
div { div {
key: "{task.id()}", key: "{task.task().id()}",
class: format!( class: format!(
"px-8 pt-5 {} flex flex-row gap-4", "px-8 pt-5 {} flex flex-row gap-4",
if task.deadline().is_some() { if task.task().deadline().is_some() {
"pb-0.5" "pb-0.5"
} else { } else {
"pb-5" "pb-5"
@ -55,11 +55,11 @@ pub(crate) fn CategoryTodayPage() -> Element {
class: "flex flex-col", class: "flex flex-col",
div { div {
class: "mt grow font-medium", class: "mt grow font-medium",
{task.title()} {task.task().title()}
}, },
div { div {
class: "flex flex-row gap-3", class: "flex flex-row gap-3",
if let Some(deadline) = task.deadline() { if let Some(deadline) = task.task().deadline() {
div { div {
class: "text-sm text-zinc-400", class: "text-sm text-zinc-400",
i { i {
@ -86,22 +86,22 @@ pub(crate) fn CategoryTodayPage() -> Element {
value => panic!("Unexpected query result: {value:?}") value => panic!("Unexpected query result: {value:?}")
} }
match calendar_tasks_query_result.value() { match calendar_tasks_query_result.value() {
QueryResult::Ok(QueryValue::Tasks(tasks)) QueryResult::Ok(QueryValue::TasksWithSubtasks(tasks))
| QueryResult::Loading(Some(QueryValue::Tasks(tasks))) => { | QueryResult::Loading(Some(QueryValue::TasksWithSubtasks(tasks))) => {
let today_tasks = tasks.iter().filter(|task| { let today_tasks = tasks.iter().filter(|task| {
if let Category::Calendar { date, .. } = task.category() { if let Category::Calendar { date, .. } = task.task().category() {
*date == today_date *date == today_date
} else { } else {
panic!("Unexpected category."); panic!("Unexpected category.");
} }
}).cloned().collect::<Vec<Task>>(); }).cloned().collect::<Vec<TaskWithSubtasks>>();
let overdue_tasks = tasks.iter().filter(|task| { let overdue_tasks = tasks.iter().filter(|task| {
if let Category::Calendar { date, .. } = task.category() { if let Category::Calendar { date, .. } = task.task().category() {
*date < today_date *date < today_date
} else { } else {
panic!("Unexpected category."); panic!("Unexpected category.");
} }
}).cloned().collect::<Vec<Task>>(); }).cloned().collect::<Vec<TaskWithSubtasks>>();
rsx! { rsx! {
if !overdue_tasks.is_empty() { if !overdue_tasks.is_empty() {

38
src/components/subtasks_form.rs
View File

@ -1,4 +1,5 @@
use crate::models::subtask::NewSubtask; use crate::models::subtask::NewSubtask;
use crate::models::task::Task;
use crate::query::subtasks::use_subtasks_of_task_query; use crate::query::subtasks::use_subtasks_of_task_query;
use crate::query::{QueryErrors, QueryKey, QueryValue}; use crate::query::{QueryErrors, QueryKey, QueryValue};
use crate::server::subtasks::{create_subtask, delete_subtask, edit_subtask}; use crate::server::subtasks::{create_subtask, delete_subtask, edit_subtask};
@ -8,24 +9,30 @@ use dioxus::prelude::*;
use dioxus_query::prelude::{use_query_client, QueryResult}; use dioxus_query::prelude::{use_query_client, QueryResult};
#[component] #[component]
pub(crate) fn SubtasksForm(task_id: i32) -> Element { pub(crate) fn SubtasksForm(task: Task) -> Element {
let query_client = use_query_client::<QueryValue, QueryErrors, QueryKey>(); let query_client = use_query_client::<QueryValue, QueryErrors, QueryKey>();
let subtasks_query = use_subtasks_of_task_query(task_id); let subtasks_query = use_subtasks_of_task_query(task.id());
let mut new_title = use_signal(String::new); let mut new_title = use_signal(String::new);
rsx! { rsx! {
form { form {
class: "flex flex-row items-center gap-3", class: "flex flex-row items-center gap-3",
onsubmit: move |event| async move { onsubmit: move |event| {
let task = task.clone();
async move {
let new_subtask = NewSubtask::new( let new_subtask = NewSubtask::new(
task_id, task.id(),
event.values().get("title").unwrap().as_value(), event.values().get("title").unwrap().as_value(),
false false
); );
let _ = create_subtask(new_subtask).await; let _ = create_subtask(new_subtask).await;
query_client.invalidate_queries(&[QueryKey::SubtasksOfTaskId(task_id)]); query_client.invalidate_queries(&[
QueryKey::SubtasksOfTaskId(task.id()),
QueryKey::TasksWithSubtasksInCategory(task.category().clone()),
]);
new_title.set(String::new()); new_title.set(String::new());
}
}, },
label { label {
r#for: "input_new_title", r#for: "input_new_title",
@ -73,8 +80,10 @@ pub(crate) fn SubtasksForm(task_id: i32) -> Element {
), ),
onclick: { onclick: {
let subtask = subtask.clone(); let subtask = subtask.clone();
let task = task.clone();
move |_| { move |_| {
let subtask = subtask.clone(); let subtask = subtask.clone();
let task = task.clone();
async move { async move {
let new_subtask = NewSubtask::new( let new_subtask = NewSubtask::new(
subtask.task_id(), subtask.task_id(),
@ -86,7 +95,10 @@ pub(crate) fn SubtasksForm(task_id: i32) -> Element {
new_subtask new_subtask
).await; ).await;
query_client.invalidate_queries(&[ query_client.invalidate_queries(&[
QueryKey::SubtasksOfTaskId(task_id) QueryKey::SubtasksOfTaskId(task.id()),
QueryKey::TasksWithSubtasksInCategory(
task.category().clone()
),
]); ]);
} }
} }
@ -101,8 +113,10 @@ pub(crate) fn SubtasksForm(task_id: i32) -> Element {
initial_value: subtask.title(), initial_value: subtask.title(),
onchange: { onchange: {
let subtask = subtask.clone(); let subtask = subtask.clone();
let task = task.clone();
move |event| { move |event| {
let subtask = subtask.clone(); let subtask = subtask.clone();
let task = task.clone();
async move { async move {
let new_subtask = NewSubtask::new( let new_subtask = NewSubtask::new(
subtask.task_id(), subtask.task_id(),
@ -114,7 +128,10 @@ pub(crate) fn SubtasksForm(task_id: i32) -> Element {
new_subtask new_subtask
).await; ).await;
query_client.invalidate_queries(&[ query_client.invalidate_queries(&[
QueryKey::SubtasksOfTaskId(task_id) QueryKey::SubtasksOfTaskId(task.id()),
QueryKey::TasksWithSubtasksInCategory(
task.category().clone()
),
]); ]);
} }
} }
@ -125,12 +142,17 @@ pub(crate) fn SubtasksForm(task_id: i32) -> Element {
class: "py-2 col-span-1 bg-zinc-800/50 rounded-lg", class: "py-2 col-span-1 bg-zinc-800/50 rounded-lg",
onclick: { onclick: {
let subtask = subtask.clone(); let subtask = subtask.clone();
let task = task.clone();
move |_| { move |_| {
let subtask = subtask.clone(); let subtask = subtask.clone();
let task = task.clone();
async move { async move {
let _ = delete_subtask(subtask.id()).await; let _ = delete_subtask(subtask.id()).await;
query_client.invalidate_queries(&[ query_client.invalidate_queries(&[
QueryKey::SubtasksOfTaskId(task_id) QueryKey::SubtasksOfTaskId(task.id()),
QueryKey::TasksWithSubtasksInCategory(
task.category().clone()
),
]); ]);
} }
} }

9
src/components/task_form.rs
View File

@ -133,7 +133,8 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
} }
query_client.invalidate_queries(&[ query_client.invalidate_queries(&[
QueryKey::Tasks, QueryKey::Tasks,
QueryKey::TasksInCategory(selected_category()) QueryKey::TasksInCategory(selected_category()),
QueryKey::TasksWithSubtasksInCategory(selected_category()),
]); ]);
on_successful_submit.call(()); on_successful_submit.call(());
} }
@ -151,6 +152,7 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
name: "title", name: "title",
required: true, required: true,
initial_value: task.as_ref().map(|task| task.title().to_owned()), initial_value: task.as_ref().map(|task| task.title().to_owned()),
autofocus: task.is_none(),
r#type: "text", r#type: "text",
class: "py-2 px-3 grow bg-zinc-800/50 rounded-lg", class: "py-2 px-3 grow bg-zinc-800/50 rounded-lg",
id: "input_title" id: "input_title"
@ -345,7 +347,7 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
}, },
if let Some(task) = task.as_ref() { if let Some(task) = task.as_ref() {
SubtasksForm { SubtasksForm {
task_id: task.id() task: task.clone()
} }
} }
div { div {
@ -371,8 +373,9 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
} }
query_client.invalidate_queries(&[ query_client.invalidate_queries(&[
QueryKey::TasksInCategory(task.category().clone()),
QueryKey::Tasks, QueryKey::Tasks,
QueryKey::TasksInCategory(task.category().clone()),
QueryKey::TasksWithSubtasksInCategory(selected_category()),
]); ]);
} }
on_successful_submit.call(()); on_successful_submit.call(());

54
src/components/task_list.rs
View File

@ -1,5 +1,5 @@
use crate::models::category::Category; use crate::models::category::Category;
use crate::models::task::Task; use crate::models::task::{Task, TaskWithSubtasks};
use dioxus::core_macro::rsx; use dioxus::core_macro::rsx;
use dioxus::dioxus_core::Element; use dioxus::dioxus_core::Element;
use dioxus::prelude::*; use dioxus::prelude::*;
@ -8,7 +8,7 @@ use crate::query::{QueryErrors, QueryKey, QueryValue};
use crate::server::tasks::complete_task; use crate::server::tasks::complete_task;
#[component] #[component]
pub(crate) fn TaskList(tasks: Vec<Task>, class: Option<&'static str>) -> Element { pub(crate) fn TaskList(tasks: Vec<TaskWithSubtasks>, class: Option<&'static str>) -> Element {
let query_client = use_query_client::<QueryValue, QueryErrors, QueryKey>(); let query_client = use_query_client::<QueryValue, QueryErrors, QueryKey>();
let mut task_being_edited = use_context::<Signal<Option<Task>>>(); let mut task_being_edited = use_context::<Signal<Option<Task>>>();
@ -17,12 +17,12 @@ pub(crate) fn TaskList(tasks: Vec<Task>, class: Option<&'static str>) -> Element
class: format!("flex flex-col {}", class.unwrap_or("")), class: format!("flex flex-col {}", class.unwrap_or("")),
for task in tasks.clone() { for task in tasks.clone() {
div { div {
key: "{task.id()}", key: "{task.task().id()}",
class: format!( class: format!(
"px-8 pt-5 {} flex flex-row gap-4 select-none {}", "px-8 pt-5 {} flex flex-row gap-4 select-none {}",
if task.deadline().is_some() { if task.task().deadline().is_some() || !task.subtasks().is_empty() {
"pb-0.5" "pb-0.5"
} else if let Category::Calendar { time, .. } = task.category() { } else if let Category::Calendar { time, .. } = task.task().category() {
if time.is_some() { if time.is_some() {
"pb-0.5" "pb-0.5"
} else { } else {
@ -31,18 +31,18 @@ pub(crate) fn TaskList(tasks: Vec<Task>, class: Option<&'static str>) -> Element
} else { } else {
"pb-5" "pb-5"
}, },
if task_being_edited().is_some_and(|t| t.id() == task.id()) { if task_being_edited().is_some_and(|t| t.id() == task.task().id()) {
"bg-zinc-700" "bg-zinc-700"
} else { "" } } else { "" }
), ),
onclick: { onclick: {
let task = task.clone(); let task = task.clone();
move |_| task_being_edited.set(Some(task.clone())) move |_| task_being_edited.set(Some(task.task().clone()))
}, },
i { i {
class: format!( class: format!(
"{} text-3xl text-zinc-500", "{} text-3xl text-zinc-500",
if *(task.category()) == Category::Done { if *(task.task().category()) == Category::Done {
"fa solid fa-square-check" "fa solid fa-square-check"
} else { } else {
"fa-regular fa-square" "fa-regular fa-square"
@ -55,16 +55,19 @@ pub(crate) fn TaskList(tasks: Vec<Task>, class: Option<&'static str>) -> Element
event.stop_propagation(); event.stop_propagation();
let task = task.clone(); let task = task.clone();
async move { async move {
let completed_task = complete_task(task.id()).await; let completed_task = complete_task(task.task().id()).await.unwrap();
let mut query_keys = vec![ let mut query_keys = vec![
QueryKey::Tasks, QueryKey::Tasks,
QueryKey::TasksInCategory( QueryKey::TasksInCategory(
completed_task.unwrap().category().clone() completed_task.category().clone()
) ),
QueryKey::TasksWithSubtasksInCategory(completed_task.category().clone()),
]; ];
if let Category::Calendar { reoccurrence: Some(_), .. } if let Category::Calendar { reoccurrence: Some(_), .. }
= task.category() { = task.task().category() {
query_keys.push(QueryKey::SubtasksOfTaskId(task.id())); query_keys.push(
QueryKey::SubtasksOfTaskId(task.task().id())
);
} }
query_client.invalidate_queries(&query_keys); query_client.invalidate_queries(&query_keys);
} }
@ -75,20 +78,20 @@ pub(crate) fn TaskList(tasks: Vec<Task>, class: Option<&'static str>) -> Element
class: "flex flex-col", class: "flex flex-col",
div { div {
class: "mt-1 grow font-medium", class: "mt-1 grow font-medium",
{task.title()} {task.task().title()}
}, },
div { div {
class: "flex flex-row gap-3", class: "flex flex-row gap-4",
if let Some(deadline) = task.deadline() { if let Some(deadline) = task.task().deadline() {
div { div {
class: "text-sm text-zinc-400", class: "text-sm text-zinc-400",
i { i {
class: "fa-solid fa-bomb" class: "fa-solid fa-bomb"
}, },
{deadline.format(" %m. %d.").to_string()} {deadline.format(" %m. %-d.").to_string()}
} }
} }
if let Category::Calendar { time, .. } = task.category() { if let Category::Calendar { time, .. } = task.task().category() {
if let Some(calendar_time) = time { if let Some(calendar_time) = time {
div { div {
class: "text-sm text-zinc-400", class: "text-sm text-zinc-400",
@ -99,6 +102,21 @@ pub(crate) fn TaskList(tasks: Vec<Task>, class: Option<&'static str>) -> Element
} }
} }
} }
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()
)}
}
}
} }
} }
} }