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

feat: display a project form upon clicking the create button on the projects page

Browse Source
This commit is contained in:
Matouš Volf
2024-09-05 18:18:03 +02:00
parent 270e06de46
commit fe1837d6a1
13 changed files with 138 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/bottom_panel.rs
View File

@ -1,18 +1,17 @@
use std::thread::sleep;
use dioxus::prelude::*;
use crate::components::navigation::Navigation;
use crate::components::project_form::ProjectForm;
use crate::components::task_form::TaskForm;
use crate::components::task_list::TaskList;
use crate::models::category::Category;
use crate::route::Route;
#[component]
pub(crate) fn BottomPanel(creating_task: bool) -> Element {
let mut expanded = use_signal(|| creating_task);
pub(crate) fn BottomPanel(display_form: Signal<bool>) -> Element {
let mut expanded = use_signal(|| display_form());
let navigation_expanded = use_signal(|| false);
let current_route = use_route();
use_effect(use_reactive(&creating_task, move |creating_task| {
if creating_task {
use_effect(use_reactive(&display_form, move |creating_task| {
if creating_task() {
expanded.set(true);
} else {
spawn(async move {
@ -26,14 +25,30 @@ pub(crate) fn BottomPanel(creating_task: bool) -> Element {
div {
class: format!(
"bg-zinc-700/50 rounded-t-xl border-t-zinc-600 border-t backdrop-blur drop-shadow-[0_-5px_10px_rgba(0,0,0,0.2)] transition-[height] duration-[500ms] ease-[cubic-bezier(0.79,0.14,0.15,0.86)] {}",
match (creating_task, navigation_expanded()) {
(false, false) => "h-[64px]",
(false, true) => "h-[128px]",
(true, _) => "h-[448px]",
match (display_form(), current_route, navigation_expanded()) {
(false, _, false) => "h-[64px]",
(false, _, true) => "h-[128px]",
(true, Route::ProjectsPage, _) => "h-[128px]",
(true, _, _) => "h-[448px]",
}
),
if expanded() {
TaskForm {}
match current_route {
Route::ProjectsPage => rsx! {
ProjectForm {
on_successful_submit: move |_| {
display_form.set(false);
}
}
},
_ => rsx! {
TaskForm {
on_successful_submit: move |_| {
display_form.set(false);
}
}
}
}
} else {
Navigation {
expanded: navigation_expanded,