Compare commits
24 Commits
62f8e2e778
...
2
| Author | SHA1 | Date | |
|---|---|---|---|
e730d66f9e
|
|||
|
472b33688d
|
|||
be1a21b746
|
|||
|
fa749b652f
|
|||
|
d9efaaae6e
|
|||
|
428e52ba3d
|
|||
|
8dbb1dc48e
|
|||
|
ee950aa4a9
|
|||
|
439cc012f0
|
|||
|
803fe36ed1
|
|||
|
80918b98d9
|
|||
|
d4235ef2ab
|
|||
|
d0a124ee75
|
|||
|
67a8a3fae6
|
|||
|
baef08475f
|
|||
|
265516c1a6
|
|||
|
01c9b2d0fb
|
|||
|
4ad96fe92f
|
|||
|
df1d23c0e3
|
|||
|
ce73256133
|
|||
|
fd661ba7e4
|
|||
|
316d45fe0c
|
|||
|
00bb8d7951
|
|||
|
393173f218
|
8
.github/workflows/rust-check.yaml
vendored
8
.github/workflows/rust-check.yaml
vendored
@@ -21,9 +21,9 @@ jobs:
|
||||
run: >
|
||||
apt-get update && apt-get install -y
|
||||
libgtk-3-dev=3.24.33-1ubuntu2.2
|
||||
libjavascriptcoregtk-4.1-dev=2.50.3-0ubuntu0.22.04.1
|
||||
libjavascriptcoregtk-4.1-dev=2.50.4-0ubuntu0.22.04.1
|
||||
libsoup-3.0-dev=3.0.7-0ubuntu1
|
||||
libwebkit2gtk-4.1-dev=2.50.3-0ubuntu0.22.04.1
|
||||
libwebkit2gtk-4.1-dev=2.50.4-0ubuntu0.22.04.1
|
||||
libxdo-dev=1:3.20160805.1-4
|
||||
- name: Rust toolchain installation
|
||||
uses: dtolnay/rust-toolchain@9bc92bc5598b4f3bec5d910d352094982cb0c3b9 # 1.92.0
|
||||
@@ -40,6 +40,6 @@ jobs:
|
||||
- name: rustfmt check
|
||||
run: cargo fmt --all --check
|
||||
- name: Clippy check
|
||||
run: cargo clippy --all-targets --all-features -- --deny warnings
|
||||
run: cargo clippy --locked --all-targets --all-features -- --deny warnings
|
||||
- name: test check
|
||||
run: cargo test --all --all-targets --all-features
|
||||
run: cargo --locked test --all --all-targets --all-features
|
||||
|
||||
9
Cargo.lock
generated
9
Cargo.lock
generated
@@ -1299,6 +1299,14 @@ dependencies = [
|
||||
"tracing",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "dioxus-free-icons"
|
||||
version = "0.10.0"
|
||||
source = "git+https://github.com/matous-volf/dioxus-free-icons?rev=6488400003a3d6829e771a84a565c5c5f08a9aa0#6488400003a3d6829e771a84a565c5c5f08a9aa0"
|
||||
dependencies = [
|
||||
"dioxus",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "dioxus-fullstack"
|
||||
version = "0.7.3"
|
||||
@@ -5440,6 +5448,7 @@ dependencies = [
|
||||
"diesel",
|
||||
"diesel_migrations",
|
||||
"dioxus",
|
||||
"dioxus-free-icons",
|
||||
"dioxus-html",
|
||||
"dioxus-i18n",
|
||||
"feruca",
|
||||
|
||||
@@ -8,6 +8,7 @@ edition = "2024"
|
||||
|
||||
[dependencies]
|
||||
chrono = { version = "0.4.43", features = ["serde", "unstable-locales"] }
|
||||
# Remember to update the CLI as well.
|
||||
dioxus = { version = "0.7.3", features = ["fullstack", "router"] }
|
||||
# TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/4765 is resolved.
|
||||
dioxus-html = { version = "0.7.3", features = ["serialize"] }
|
||||
@@ -19,6 +20,7 @@ tracing = "0.1.44"
|
||||
unic-langid-impl = { version = "0.9.6", features = ["serde"] }
|
||||
validator = { version = "0.20.0", features = ["derive"] }
|
||||
|
||||
# Remember to update the CLI as well.
|
||||
diesel = { version = "2.3.6", features = [
|
||||
"chrono",
|
||||
"postgres",
|
||||
@@ -36,6 +38,11 @@ async-std = { version = "1.13.2", optional = true }
|
||||
dioxus-i18n = "0.5.1"
|
||||
voca_rs = "1.15.2"
|
||||
load-dotenv = "0.1.2"
|
||||
# TODO: Switch to upstream once it merges the changes.
|
||||
dioxus-free-icons = { git = "https://github.com/matous-volf/dioxus-free-icons", rev = "6488400003a3d6829e771a84a565c5c5f08a9aa0", features = [
|
||||
"font-awesome-regular",
|
||||
"font-awesome-solid",
|
||||
] }
|
||||
|
||||
[features]
|
||||
default = ["web"]
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 12 KiB |
@@ -1,203 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="512"
|
||||
height="512"
|
||||
viewBox="0 0 512 512"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="icon.svg"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#505050"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="1.1020922"
|
||||
inkscape:cx="188.27826"
|
||||
inkscape:cy="204.15715"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1011"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1">
|
||||
<inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect2"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
|
||||
radius="0"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false" />
|
||||
<inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect1"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
|
||||
radius="0"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="false"
|
||||
hide_knots="false" />
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<rect
|
||||
style="display:inline;fill:#27272a;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1"
|
||||
width="512"
|
||||
height="512"
|
||||
x="0"
|
||||
y="0"
|
||||
sodipodi:insensitive="true"
|
||||
inkscape:label="background"
|
||||
ry="128.00018"
|
||||
sodipodi:type="rect"
|
||||
rx="129.98714" />
|
||||
<g
|
||||
id="g17"
|
||||
inkscape:label="logo"
|
||||
transform="translate(8)">
|
||||
<g
|
||||
id="g8"
|
||||
inkscape:label="ring">
|
||||
<g
|
||||
id="g7"
|
||||
inkscape:label="back">
|
||||
<circle
|
||||
style="fill:#d97706;fill-opacity:1;stroke:#d97706;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path1"
|
||||
cx="224"
|
||||
cy="256"
|
||||
r="128"
|
||||
inkscape:label="ring back" />
|
||||
<rect
|
||||
style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:21.8936;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect2"
|
||||
width="48"
|
||||
height="288"
|
||||
x="224"
|
||||
y="112"
|
||||
inkscape:label="rect2" />
|
||||
</g>
|
||||
<g
|
||||
id="g1"
|
||||
transform="translate(-4.163147,-0.69235229)"
|
||||
inkscape:label="front">
|
||||
<circle
|
||||
style="fill:#27272a;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path1-5-2"
|
||||
cx="276.16315"
|
||||
cy="256.69235"
|
||||
r="128" />
|
||||
<circle
|
||||
style="fill:none;fill-opacity:1;stroke:#fbbf24;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path1-5"
|
||||
cx="276.16315"
|
||||
cy="256.69235"
|
||||
r="128" />
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="g16"
|
||||
inkscape:label="tick"
|
||||
transform="translate(16.000231,-8.3918418e-5)">
|
||||
<g
|
||||
id="g6"
|
||||
transform="rotate(45,-57.96574,415.4208)"
|
||||
style="fill:#d97706;fill-opacity:1;stroke:none;stroke-opacity:1"
|
||||
inkscape:label="back">
|
||||
<rect
|
||||
style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect9"
|
||||
width="32.000458"
|
||||
height="32"
|
||||
x="273.94067"
|
||||
y="210.74516"
|
||||
transform="rotate(-45,-57.96574,415.4208)" />
|
||||
<rect
|
||||
style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect8"
|
||||
width="32.000458"
|
||||
height="32"
|
||||
x="206.05841"
|
||||
y="233.37257"
|
||||
transform="rotate(-45,-57.96574,415.4208)" />
|
||||
<rect
|
||||
style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect7"
|
||||
height="16"
|
||||
x="228.686"
|
||||
y="285.255"
|
||||
width="32"
|
||||
transform="rotate(-45,-57.96574,415.4208)" />
|
||||
<rect
|
||||
style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect5"
|
||||
width="64"
|
||||
height="32"
|
||||
x="0"
|
||||
y="100" />
|
||||
<rect
|
||||
style="fill:#d97706;fill-opacity:1;stroke:none;stroke-width:39.1918;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect6"
|
||||
width="32"
|
||||
height="96"
|
||||
x="32"
|
||||
y="36" />
|
||||
</g>
|
||||
<g
|
||||
id="g4"
|
||||
transform="rotate(45,-41.965512,454.04877)"
|
||||
style="fill:#fbbf24;fill-opacity:1;stroke:none;stroke-opacity:1"
|
||||
inkscape:label="front">
|
||||
<rect
|
||||
style="fill:#fbbf24;fill-opacity:1;stroke:none;stroke-width:32;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect3"
|
||||
width="64"
|
||||
height="32"
|
||||
x="0"
|
||||
y="100" />
|
||||
<rect
|
||||
style="fill:#fbbf24;fill-opacity:1;stroke:none;stroke-width:39.1918;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect4"
|
||||
width="32"
|
||||
height="96"
|
||||
x="32"
|
||||
y="36" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 6.4 KiB |
@@ -3,8 +3,8 @@
|
||||
"short_name": "Todo Baggins",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#27272a",
|
||||
"theme_color": "#27272a",
|
||||
"background_color": "#101828",
|
||||
"theme_color": "#b89a2e",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/assets/images/icon.png",
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
@layer base {
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url("/assets/fonts/inter_variable.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
font-style: italic;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url("/assets/fonts/inter_variable_italic.woff2") format("woff2");
|
||||
}
|
||||
}
|
||||
@@ -8,56 +8,33 @@ input[type="range"] {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
input[type="range"]::-moz-range-thumb, input[type="range"]::-webkit-slider-thumb {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
background: rgba(228 228 231);
|
||||
background: var(--color-gray-400);
|
||||
filter: drop-shadow(0 var(--spacing) 0 var(--color-gray-500));
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-progress {
|
||||
background: #525259;
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
top: -9px;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-track, input[type="range"]::-webkit-slider-runnable-track {
|
||||
background: var(--color-gray-800-muted);
|
||||
height: 0.5rem;
|
||||
filter: drop-shadow(0 calc(0px - var(--spacing)) 0 var(--color-gray-900-muted));
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-track {
|
||||
background: rgba(39 39 42 / 50%);
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
input[type="range"].input-range-reverse::-moz-range-progress {
|
||||
background: #2d2d31;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
input[type="range"].input-range-reverse::-moz-range-track {
|
||||
background: rgba(113 113 122 / 50%);
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
background: rgba(228 228 231);
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
position: relative;
|
||||
top: -0.4rem;
|
||||
transform: translateY(3px);
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-runnable-track {
|
||||
background: rgba(39 39 42 / 50%);
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
input[type="range"].input-range-reverse::-webkit-slider-runnable-track {
|
||||
background: rgba(39 39 42 / 50%);
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
9
assets/styles/select_arrow.css
Normal file
9
assets/styles/select_arrow.css
Normal file
@@ -0,0 +1,9 @@
|
||||
select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%239ca3af' d='M300.3 440.8C312.9 451 331.4 450.3 343.1 438.6L471.1 310.6C480.3 301.4 483 287.7 478 275.7C473 263.7 461.4 256 448.5 256L192.5 256C179.6 256 167.9 263.8 162.9 275.8C157.9 287.8 160.7 301.5 169.9 310.6L297.9 438.6L300.3 440.8z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 2rem;
|
||||
background-position: right .5rem center;
|
||||
}
|
||||
@@ -2,4 +2,5 @@
|
||||
services:
|
||||
app:
|
||||
build:
|
||||
dockerfile: docker/prod/app/Dockerfile
|
||||
target: builder_android
|
||||
|
||||
@@ -12,6 +12,7 @@ services:
|
||||
- ./Cargo.toml:/srv/app/Cargo.toml
|
||||
- ./diesel.toml:/srv/app/diesel.toml
|
||||
- ./Dioxus.toml:/srv/app/Dioxus.toml
|
||||
- ./tailwind.css:/srv/app/tailwind.css
|
||||
restart: always
|
||||
ports: ["8000:8000"]
|
||||
depends_on: ["db"]
|
||||
|
||||
@@ -6,6 +6,7 @@ services:
|
||||
networks:
|
||||
- default
|
||||
- web-server-network
|
||||
ports: ["8000:80"]
|
||||
restart: always
|
||||
depends_on: ["db"]
|
||||
|
||||
|
||||
@@ -5,8 +5,8 @@ RUN useradd -m -u 1000 -s /bin/bash app_user \
|
||||
|
||||
USER app_user
|
||||
|
||||
RUN cargo install --git https://github.com/diesel-rs/diesel --rev 2e85ba060d3d70ea605ea58a79b8a435749a7adc --locked diesel_cli \
|
||||
&& cargo install --git https://github.com/DioxusLabs/dioxus --rev 8f8b58ea80ba0ec8057807bcd58fb609f7a5f2b1 --locked dioxus-cli
|
||||
RUN cargo install --git https://github.com/diesel-rs/diesel --rev 207604888d28a490061698f07a25090438be42fe --locked diesel_cli \
|
||||
&& cargo install --git https://github.com/DioxusLabs/dioxus --rev 22b06badde44ba1af0fcf339c91b66483175b660 --locked dioxus-cli
|
||||
|
||||
COPY --chown=app_user . /srv/app
|
||||
WORKDIR /srv/app
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
FROM rust:1.92.0-bookworm@sha256:9676d0547a259997add8f5924eb6b959c589ed39055338e23b99aba7958d6d31 AS builder_base
|
||||
|
||||
RUN cargo install --git https://github.com/diesel-rs/diesel --rev 2e85ba060d3d70ea605ea58a79b8a435749a7adc --locked diesel_cli \
|
||||
&& cargo install --git https://github.com/DioxusLabs/dioxus --rev 8f8b58ea80ba0ec8057807bcd58fb609f7a5f2b1 --locked dioxus-cli --features disable-telemetry
|
||||
RUN cargo install --git https://github.com/diesel-rs/diesel --rev 207604888d28a490061698f07a25090438be42fe --locked diesel_cli \
|
||||
&& cargo install --git https://github.com/DioxusLabs/dioxus --rev 22b06badde44ba1af0fcf339c91b66483175b660 --locked dioxus-cli --features disable-telemetry
|
||||
|
||||
COPY . /srv/app
|
||||
WORKDIR /srv/app
|
||||
@@ -39,7 +39,7 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||
&& keytool -genkeypair -noprompt -keystore /tmp/android_keystore.jks -alias key -keyalg RSA -keysize 2048 -validity 3660 -dname "CN=" -storepass 123456 -keypass 123456 \
|
||||
&& export ANDROID_HOME="$ANDROID_SDK_ROOT" \
|
||||
&& export ANDROID_NDK_HOME="$ANDROID_SDK_ROOT/ndk/$ANDROID_NDK_VERSION" \
|
||||
&& dx bundle --platform android --target aarch64-linux-android --release \
|
||||
&& dx bundle --locked --platform android --target aarch64-linux-android --release \
|
||||
&& java -jar /tmp/bundletool-all.jar build-apks --bundle=/srv/app/target/dx/todo_baggins/release/android/app/app/build/outputs/bundle/release/TodoBaggins-aarch64-linux-android.aab --output=/tmp/todo_baggins.apks --mode=universal --ks=/tmp/android_keystore.jks --ks-key-alias=key --ks-pass=pass:123456 \
|
||||
&& mkdir -p /srv/app/bundle \
|
||||
&& unzip -qp /tmp/todo_baggins.apks universal.apk > /srv/app/bundle/todo_baggins.apk
|
||||
@@ -47,7 +47,7 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||
|
||||
FROM builder_base AS builder_web
|
||||
|
||||
RUN dx bundle --release
|
||||
RUN dx bundle --locked --release
|
||||
|
||||
|
||||
FROM debian:bookworm@sha256:b877a1a3fdf02469440f1768cf69c9771338a875b7add5e80c45b756c92ac20a AS runner_web
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
use crate::internationalization::get_language_identifier;
|
||||
|
||||
use crate::route::Route;
|
||||
use dioxus::core_macro::rsx;
|
||||
use dioxus::dioxus_core::Element;
|
||||
@@ -7,15 +8,15 @@ use dioxus_i18n::prelude::*;
|
||||
use dioxus_i18n::unic_langid::langid;
|
||||
|
||||
const FAVICON: Asset = asset!("/assets/favicon.ico");
|
||||
const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
|
||||
#[used]
|
||||
static FONTS_DIRECTORY: Asset = asset!(
|
||||
"/assets/fonts",
|
||||
AssetOptions::builder().with_hash_suffix(false)
|
||||
);
|
||||
const FONTS_CSS: Asset = asset!("/assets/styles/fonts.css");
|
||||
const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
|
||||
const INPUT_NUMBER_ARROWS_CSS: Asset = asset!("/assets/styles/input_number_arrows.css");
|
||||
const INPUT_RANGE_CSS: Asset = asset!("/assets/styles/input_range.css");
|
||||
const SELECT_ARROW_CSS: Asset = asset!("/assets/styles/select_arrow.css");
|
||||
const MANIFEST: Asset = asset!("/assets/manifest.json");
|
||||
|
||||
#[component]
|
||||
@@ -35,14 +36,13 @@ pub(crate) fn App() -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "icon", href: FAVICON }
|
||||
document::Stylesheet { href: TAILWIND_CSS }
|
||||
document::Stylesheet { href: FONTS_CSS }
|
||||
document::Stylesheet { href: INPUT_NUMBER_ARROWS_CSS }
|
||||
document::Stylesheet { href: INPUT_RANGE_CSS }
|
||||
document::Stylesheet { href: SELECT_ARROW_CSS }
|
||||
document::Link { rel: "manifest", href: MANIFEST, crossorigin: "use-credentials" }
|
||||
document::Script { src: "https://kit.fontawesome.com/3c1b409f8f.js" }
|
||||
|
||||
div {
|
||||
class: "min-h-screen pt-4 pb-36 flex flex-col text-zinc-200 bg-zinc-800",
|
||||
class: "min-h-screen py-4 flex flex-col text-gray-300 bg-gray-900",
|
||||
Router::<Route> {}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,78 +1,22 @@
|
||||
use crate::components::error_boundary_message::ErrorBoundaryMessage;
|
||||
use crate::components::navigation::Navigation;
|
||||
use crate::components::project_form::ProjectForm;
|
||||
use crate::components::task_form::TaskForm;
|
||||
use crate::models::project::Project;
|
||||
use crate::models::task::Task;
|
||||
use crate::route::Route;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub(crate) fn BottomPanel(display_form: Signal<bool>) -> Element {
|
||||
// A signal for delaying the application of styles.
|
||||
#[allow(clippy::redundant_closure)]
|
||||
let mut expanded = use_signal(|| display_form());
|
||||
pub(crate) fn BottomPanel() -> Element {
|
||||
let navigation_expanded = use_signal(|| false);
|
||||
let current_route = use_route();
|
||||
|
||||
let mut project_being_edited = use_context::<Signal<Option<Project>>>();
|
||||
let mut task_being_edited = use_context::<Signal<Option<Task>>>();
|
||||
|
||||
use_effect(use_reactive(&display_form, move |display_form| {
|
||||
if display_form() {
|
||||
expanded.set(true);
|
||||
} else {
|
||||
spawn(async move {
|
||||
// Necessary for a smooth – not instant – height transition.
|
||||
#[cfg(not(feature = "server"))]
|
||||
async_std::task::sleep(std::time::Duration::from_millis(500)).await;
|
||||
/* The check is necessary for the situation when the user expands the panel while
|
||||
it is being closed. */
|
||||
if !display_form() {
|
||||
expanded.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
}));
|
||||
|
||||
rsx! {
|
||||
div {
|
||||
class: format!(
|
||||
"flex flex-col pointer-events-auto 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)] overflow-y-scroll {}",
|
||||
match (display_form(), current_route, navigation_expanded()) {
|
||||
(false, _, false) => "h-[66px]",
|
||||
(false, _, true) => "h-[130px]",
|
||||
(true, Route::ProjectsPage, _) => "h-[130px]",
|
||||
(true, _, _) => "h-[506px]",
|
||||
"flex flex-col pointer-events-auto bg-gray-800 transition-[height] duration-[500ms] ease-[cubic-bezier(0.79,0.14,0.15,0.86)] overflow-y-scroll {}",
|
||||
if navigation_expanded() {
|
||||
"h-[130px]"
|
||||
} else {
|
||||
"h-[66px]"
|
||||
}
|
||||
),
|
||||
if expanded() {
|
||||
ErrorBoundaryMessage {
|
||||
match current_route {
|
||||
Route::ProjectsPage => rsx! {
|
||||
ProjectForm {
|
||||
project: project_being_edited(),
|
||||
on_successful_submit: move |_| {
|
||||
display_form.set(false);
|
||||
project_being_edited.set(None);
|
||||
}
|
||||
}
|
||||
},
|
||||
_ => rsx! {
|
||||
TaskForm {
|
||||
task: task_being_edited(),
|
||||
on_successful_submit: move |_| {
|
||||
display_form.set(false);
|
||||
task_being_edited.set(None);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
Navigation {
|
||||
expanded: navigation_expanded,
|
||||
}
|
||||
Navigation {
|
||||
is_expanded: navigation_expanded,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
29
src/components/button_primary.rs
Normal file
29
src/components/button_primary.rs
Normal file
@@ -0,0 +1,29 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub(crate) fn ButtonPrimary(
|
||||
class: Option<String>,
|
||||
children: Element,
|
||||
#[props(extends = GlobalAttributes, extends = button)] attributes: Vec<Attribute>,
|
||||
// TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/4019 gets resolved.
|
||||
onclick: Option<Callback<Event<MouseData>>>,
|
||||
) -> Element {
|
||||
rsx! {
|
||||
button {
|
||||
class: format!(
|
||||
"cursor-pointer pb-[6px] hover:pb-[7px] active:pb-[2px] mt-[1px] hover:mt-0 active:mt-[5px] hover:*:drop-shadow-[0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted)] active:*:drop-shadow-[0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted)] transition-all duration-150 {}",
|
||||
class.unwrap_or("".to_owned())
|
||||
),
|
||||
onclick: move |event| {
|
||||
if let Some(onclick) = onclick {
|
||||
onclick.call(event);
|
||||
}
|
||||
},
|
||||
..attributes,
|
||||
div {
|
||||
class: "py-3.5 px-4 flex flex-row justify-center items-center bg-amber-300-muted drop-shadow-[0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted)] text-amber-700-muted rounded-xl transition-all duration-150",
|
||||
{children}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
29
src/components/button_secondary.rs
Normal file
29
src/components/button_secondary.rs
Normal file
@@ -0,0 +1,29 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub(crate) fn ButtonSecondary(
|
||||
class: Option<String>,
|
||||
children: Element,
|
||||
#[props(extends = GlobalAttributes, extends = button)] attributes: Vec<Attribute>,
|
||||
// TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/4019 gets resolved.
|
||||
onclick: Option<Callback<Event<MouseData>>>,
|
||||
) -> Element {
|
||||
rsx! {
|
||||
button {
|
||||
class: format!(
|
||||
"cursor-pointer pb-[6px] hover:pb-[7px] active:pb-[2px] mt-[1px] hover:mt-0 active:mt-[5px] hover:*:drop-shadow-[0_7px_0_var(--color-gray-800)] active:*:drop-shadow-[0_2px_0_var(--color-gray-800)] transition-all duration-150 {}",
|
||||
class.unwrap_or("".to_owned())
|
||||
),
|
||||
onclick: move |event| {
|
||||
if let Some(onclick) = onclick {
|
||||
onclick.call(event);
|
||||
}
|
||||
},
|
||||
..attributes,
|
||||
div {
|
||||
class: "py-3.5 px-4 flex flex-row justify-center items-center bg-gray-600 drop-shadow-[0_6px_0_var(--color-gray-800)] rounded-xl transition-all duration-150",
|
||||
{children}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -28,11 +28,12 @@ pub(crate) fn CategoryCalendarTaskList() -> Element {
|
||||
div {
|
||||
class: "flex flex-col gap-4",
|
||||
div {
|
||||
class: "px-8 flex flex-row items-center gap-2 font-bold",
|
||||
class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
|
||||
div {
|
||||
class: "pt-1",
|
||||
{
|
||||
date_current.format_localized(t!(
|
||||
date_current.format_localized(
|
||||
t!(
|
||||
if date_current.year() == Local::now().year() {
|
||||
"date-weekday-format"
|
||||
} else {
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
use crate::components::select_button::SelectButton;
|
||||
use crate::models::category::Category;
|
||||
use dioxus::core_macro::rsx;
|
||||
use dioxus::dioxus_core::Element;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_free_icons::icons::fa_regular_icons::FaLightbulb;
|
||||
use dioxus_free_icons::icons::fa_solid_icons::{
|
||||
FaCalendarDays, FaHourglassHalf, FaInbox, FaSignsPost, FaWater,
|
||||
};
|
||||
|
||||
#[component]
|
||||
pub(crate) fn CategoryInput(
|
||||
@@ -10,93 +15,51 @@ pub(crate) fn CategoryInput(
|
||||
) -> Element {
|
||||
rsx! {
|
||||
div {
|
||||
class: format!("flex flex-row gap-2 {}", class.unwrap_or("")),
|
||||
button {
|
||||
r#type: "button",
|
||||
class: format!(
|
||||
"py-2 rounded-lg grow basis-0 {} cursor-pointer",
|
||||
if selected_category() == Category::SomedayMaybe { "bg-zinc-500/50" }
|
||||
else { "bg-zinc-800/50" }
|
||||
),
|
||||
onclick: move |_| {
|
||||
class: format!("grid grid-cols-3 gap-3 {}", class.unwrap_or("")),
|
||||
SelectButton {
|
||||
icon: FaLightbulb,
|
||||
is_selected: matches!(selected_category(), Category::SomedayMaybe),
|
||||
on_select: move |_| {
|
||||
selected_category.set(Category::SomedayMaybe);
|
||||
},
|
||||
i {
|
||||
class: "fa-solid fa-question"
|
||||
}
|
||||
},
|
||||
button {
|
||||
r#type: "button",
|
||||
class: format!(
|
||||
"py-2 rounded-lg grow basis-0 {} cursor-pointer",
|
||||
if selected_category() == Category::LongTerm { "bg-zinc-500/50" }
|
||||
else { "bg-zinc-800/50" }
|
||||
),
|
||||
onclick: move |_| {
|
||||
}
|
||||
SelectButton {
|
||||
icon: FaWater,
|
||||
is_selected: matches!(selected_category(), Category::LongTerm),
|
||||
on_select: move |_| {
|
||||
selected_category.set(Category::LongTerm);
|
||||
},
|
||||
i {
|
||||
class: "fa-solid fa-water"
|
||||
}
|
||||
},
|
||||
button {
|
||||
r#type: "button",
|
||||
class: format!(
|
||||
"py-2 rounded-lg grow basis-0 {} cursor-pointer",
|
||||
if let Category::WaitingFor(_) = selected_category() { "bg-zinc-500/50" }
|
||||
else { "bg-zinc-800/50" }
|
||||
),
|
||||
onclick: move |_| {
|
||||
}
|
||||
SelectButton {
|
||||
icon: FaHourglassHalf,
|
||||
is_selected: matches!(selected_category(), Category::WaitingFor(_)),
|
||||
on_select: move |_| {
|
||||
selected_category.set(Category::WaitingFor(String::new()));
|
||||
},
|
||||
i {
|
||||
class: "fa-solid fa-hourglass-half"
|
||||
}
|
||||
},
|
||||
button {
|
||||
r#type: "button",
|
||||
class: format!(
|
||||
"py-2 rounded-lg grow basis-0 {} cursor-pointer",
|
||||
if selected_category() == Category::NextSteps { "bg-zinc-500/50" }
|
||||
else { "bg-zinc-800/50" }
|
||||
),
|
||||
onclick: move |_| {
|
||||
}
|
||||
SelectButton {
|
||||
icon: FaSignsPost,
|
||||
is_selected: matches!(selected_category(), Category::NextSteps),
|
||||
on_select: move |_| {
|
||||
selected_category.set(Category::NextSteps);
|
||||
},
|
||||
i {
|
||||
class: "fa-solid fa-forward"
|
||||
}
|
||||
},
|
||||
button {
|
||||
r#type: "button",
|
||||
class: format!(
|
||||
"py-2 rounded-lg grow basis-0 {} cursor-pointer",
|
||||
if let Category::Calendar { .. } = selected_category() { "bg-zinc-500/50" }
|
||||
else { "bg-zinc-800/50" }
|
||||
),
|
||||
onclick: move |_| {
|
||||
}
|
||||
SelectButton {
|
||||
icon: FaCalendarDays,
|
||||
is_selected: matches!(selected_category(), Category::Calendar { .. }),
|
||||
on_select: move |_| {
|
||||
selected_category.set(Category::Calendar {
|
||||
date: chrono::Local::now().date_naive(),
|
||||
reoccurrence: None,
|
||||
time: None,
|
||||
});
|
||||
},
|
||||
i {
|
||||
class: "fa-solid fa-calendar-days"
|
||||
}
|
||||
},
|
||||
button {
|
||||
r#type: "button",
|
||||
class: format!(
|
||||
"py-2 rounded-lg grow basis-0 {} cursor-pointer",
|
||||
if selected_category() == Category::Inbox { "bg-zinc-500/50" }
|
||||
else { "bg-zinc-800/50" }
|
||||
),
|
||||
onclick: move |_| {
|
||||
}
|
||||
SelectButton {
|
||||
icon: FaInbox,
|
||||
is_selected: matches!(selected_category(), Category::Inbox),
|
||||
on_select: move |_| {
|
||||
selected_category.set(Category::Inbox);
|
||||
},
|
||||
i {
|
||||
class: "fa-solid fa-inbox"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
use crate::components::task_list::TaskList;
|
||||
use crate::components::task_list_item::TaskListItem;
|
||||
use crate::hooks::use_tasks_with_subtasks_in_category;
|
||||
use crate::internationalization::LocaleFromLanguageIdentifier;
|
||||
use crate::models::category::Category;
|
||||
use crate::models::task::TaskWithSubtasks;
|
||||
use chrono::Local;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_free_icons::Icon;
|
||||
use dioxus_free_icons::icons::fa_solid_icons::{FaCalendarCheck, FaCalendarXmark, FaWater};
|
||||
use dioxus_i18n::t;
|
||||
use dioxus_i18n::use_i18n::i18n;
|
||||
use voca_rs::Voca;
|
||||
@@ -45,34 +46,21 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
|
||||
rsx! {
|
||||
div {
|
||||
class: "pt-4 flex flex-col gap-8",
|
||||
div {
|
||||
class: "flex flex-col gap-4",
|
||||
if !long_term_tasks.is_empty() {
|
||||
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: "mt-1",
|
||||
{t!("long-term")._upper_first()}
|
||||
}
|
||||
}
|
||||
div {
|
||||
for task in long_term_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"
|
||||
}
|
||||
),
|
||||
TaskListItem {
|
||||
task: task.clone()
|
||||
}
|
||||
class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
|
||||
Icon {
|
||||
class: "mx-1.5",
|
||||
icon: FaWater
|
||||
}
|
||||
div {
|
||||
{t!("long-term")._upper_first()}
|
||||
}
|
||||
}
|
||||
TaskList {
|
||||
tasks: long_term_tasks
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -80,12 +68,14 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
|
||||
div {
|
||||
class: "flex flex-col gap-4",
|
||||
div {
|
||||
class: "px-8 flex flex-row items-center gap-2 font-bold",
|
||||
i {
|
||||
class: "fa-solid fa-calendar-xmark text-xl w-6 text-center"
|
||||
class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
|
||||
Icon {
|
||||
class: "mx-1.25",
|
||||
height: 22,
|
||||
width: 22,
|
||||
icon: FaCalendarXmark
|
||||
}
|
||||
div {
|
||||
class: "mt-1",
|
||||
{t!("overdue")._upper_first()}
|
||||
}
|
||||
}
|
||||
@@ -98,12 +88,14 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
|
||||
div {
|
||||
class: "flex flex-col gap-4",
|
||||
div {
|
||||
class: "px-8 flex flex-row items-center gap-2 font-bold",
|
||||
i {
|
||||
class: "fa-solid fa-calendar-check text-xl w-6 text-center"
|
||||
class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
|
||||
Icon {
|
||||
class: "mx-1.25",
|
||||
height: 22,
|
||||
width: 22,
|
||||
icon: FaCalendarCheck
|
||||
}
|
||||
div {
|
||||
class: "mt-1",
|
||||
{
|
||||
let format = t!("date-weekday-format");
|
||||
let today_date = today_date.format_localized(
|
||||
|
||||
31
src/components/create_button.rs
Normal file
31
src/components/create_button.rs
Normal file
@@ -0,0 +1,31 @@
|
||||
use crate::components::project_form::PROJECT_BEING_EDITED;
|
||||
use crate::components::{button_primary::ButtonPrimary, task_form::TASK_BEING_EDITED};
|
||||
use crate::route::Route;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_free_icons::{Icon, icons::fa_solid_icons::FaGavel};
|
||||
|
||||
#[component]
|
||||
pub(crate) fn CreateButton() -> Element {
|
||||
let navigator = use_navigator();
|
||||
let current_route = use_route();
|
||||
rsx! {
|
||||
ButtonPrimary {
|
||||
class: "pointer-events-auto m-4 self-end *:rounded-full! *:p-4",
|
||||
onclick: move |_| {
|
||||
*TASK_BEING_EDITED.write() = None;
|
||||
*PROJECT_BEING_EDITED.write() = None;
|
||||
navigator.push(
|
||||
match current_route {
|
||||
Route::ProjectsPage => Route::ProjectFormPage,
|
||||
_ => Route::TaskFormPage,
|
||||
}
|
||||
);
|
||||
},
|
||||
Icon {
|
||||
icon: FaGavel,
|
||||
height: 24,
|
||||
width: 24
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
use dioxus::core_macro::rsx;
|
||||
use dioxus::dioxus_core::Element;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_free_icons::Icon;
|
||||
use dioxus_free_icons::icons::fa_solid_icons::FaTriangleExclamation;
|
||||
|
||||
#[component]
|
||||
pub(crate) fn ErrorBoundaryMessage(children: Element, class: Option<String>) -> Element {
|
||||
@@ -11,8 +13,11 @@ pub(crate) fn ErrorBoundaryMessage(children: Element, class: Option<String>) ->
|
||||
div {
|
||||
class: "grow flex flex-col justify-center items-center",
|
||||
div {
|
||||
i {
|
||||
class: "text-3xl fa-solid fa-triangle-exclamation"
|
||||
Icon {
|
||||
class: "text-gray-500",
|
||||
icon: FaTriangleExclamation,
|
||||
height: 32,
|
||||
width: 32
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
use crate::models::project::Project;
|
||||
use crate::models::task::Task;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub(crate) fn FormOpenButton(opened: Signal<bool>) -> Element {
|
||||
let mut project_being_edited = use_context::<Signal<Option<Project>>>();
|
||||
let mut task_being_edited = use_context::<Signal<Option<Task>>>();
|
||||
|
||||
rsx! {
|
||||
button {
|
||||
class: "pointer-events-auto m-4 py-3 px-5 self-end text-center bg-zinc-300/50 rounded-xl border-t-zinc-200 border-t backdrop-blur drop-shadow-[0_-5px_10px_rgba(0,0,0,0.2)] text-2xl text-zinc-200 cursor-pointer",
|
||||
onclick: move |_| {
|
||||
if opened() {
|
||||
project_being_edited.set(None);
|
||||
task_being_edited.set(None);
|
||||
}
|
||||
opened.set(!opened());
|
||||
},
|
||||
i {
|
||||
class: format!("min-w-6 fa-solid {}", if opened() { "fa-xmark" } else { "fa-plus" }),
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
47
src/components/input.rs
Normal file
47
src/components/input.rs
Normal file
@@ -0,0 +1,47 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub(crate) fn Input(
|
||||
class: Option<String>,
|
||||
name: String,
|
||||
r#type: String,
|
||||
id: Option<String>,
|
||||
#[props(extends = GlobalAttributes, extends = input)] attributes: Vec<Attribute>,
|
||||
// TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/5271 gets resolved.
|
||||
autofocus: Option<bool>,
|
||||
// TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/4019 gets resolved.
|
||||
oninput: Option<Callback<Event<FormData>>>,
|
||||
onchange: Option<Callback<Event<FormData>>>,
|
||||
) -> Element {
|
||||
rsx! {
|
||||
input {
|
||||
class: format!(
|
||||
"pt-3 pb-2.25 {} bg-gray-800-muted enabled:hover:bg-gray-800 enabled:focus:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl outline-0 {} transition-all duration-150 {}",
|
||||
match r#type.as_str() {
|
||||
"date" => "ps-3.25 pe-3",
|
||||
_ => "px-4"
|
||||
},
|
||||
match r#type.as_str() {
|
||||
"text" | "number" => "",
|
||||
_ => "enabled:cursor-pointer"
|
||||
},
|
||||
class.unwrap_or("".to_owned())
|
||||
),
|
||||
name: name.clone(),
|
||||
r#type,
|
||||
id: id.unwrap_or(format!("input_{}", name)),
|
||||
autofocus,
|
||||
oninput: move |event| {
|
||||
if let Some(oninput) = oninput {
|
||||
oninput.call(event);
|
||||
}
|
||||
},
|
||||
onchange: move |event| {
|
||||
if let Some(onchange) = oninput {
|
||||
onchange.call(event);
|
||||
}
|
||||
},
|
||||
..attributes
|
||||
}
|
||||
}
|
||||
}
|
||||
21
src/components/input_label.rs
Normal file
21
src/components/input_label.rs
Normal file
@@ -0,0 +1,21 @@
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_free_icons::{Icon, IconShape};
|
||||
|
||||
#[component]
|
||||
pub(crate) fn InputLabel<I: IconShape + Clone + PartialEq + 'static>(
|
||||
icon: I,
|
||||
r#for: Option<String>,
|
||||
) -> Element {
|
||||
rsx! {
|
||||
label {
|
||||
r#for,
|
||||
class: "mt-0.5 min-w-7 flex flex-row justify-center items-center",
|
||||
Icon {
|
||||
class: "text-gray-600",
|
||||
icon,
|
||||
height: 16,
|
||||
width: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,21 @@
|
||||
pub(crate) mod app;
|
||||
pub(crate) mod bottom_panel;
|
||||
pub(crate) mod button_primary;
|
||||
pub(crate) mod button_secondary;
|
||||
pub(crate) mod category_calendar_task_list;
|
||||
pub(crate) mod category_input;
|
||||
pub(crate) mod category_today_task_list;
|
||||
pub(crate) mod create_button;
|
||||
pub(crate) mod error_boundary_message;
|
||||
pub(crate) mod form_open_button;
|
||||
pub(crate) mod input;
|
||||
pub(crate) mod input_label;
|
||||
pub(crate) mod navigation;
|
||||
pub(crate) mod navigation_item;
|
||||
pub(crate) mod project_form;
|
||||
pub(crate) mod project_list;
|
||||
pub(crate) mod project_select;
|
||||
pub(crate) mod reoccurrence_input;
|
||||
pub(crate) mod reoccurrence_interval_input;
|
||||
pub(crate) mod select_button;
|
||||
pub(crate) mod sticky_bottom;
|
||||
pub(crate) mod subtasks_form;
|
||||
pub(crate) mod task_form;
|
||||
|
||||
@@ -1,78 +1,72 @@
|
||||
use crate::components::navigation_item::NavigationItem;
|
||||
use crate::route::Route;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_free_icons::Icon;
|
||||
use dioxus_free_icons::icons::fa_regular_icons::FaLightbulb;
|
||||
use dioxus_free_icons::icons::fa_solid_icons::{
|
||||
FaBars, FaCalendarDay, FaCalendarDays, FaHourglassHalf, FaInbox, FaList, FaSignsPost,
|
||||
FaTrashCan, FaVolcano,
|
||||
};
|
||||
|
||||
#[component]
|
||||
pub(crate) fn Navigation(expanded: Signal<bool>) -> Element {
|
||||
pub(crate) fn Navigation(is_expanded: Signal<bool>) -> Element {
|
||||
rsx! {
|
||||
div {
|
||||
class: "grid grid-cols-5 justify-stretch",
|
||||
button {
|
||||
class: format!(
|
||||
"py-4 text-center text-2xl {} cursor-pointer",
|
||||
if expanded() { "text-zinc-200" }
|
||||
else { "text-zinc-500" }
|
||||
"py-2 flex flex-row justify-center items-center cursor-pointer",
|
||||
),
|
||||
onclick: move |_| expanded.set(!expanded()),
|
||||
i {
|
||||
class: "fa-solid fa-bars"
|
||||
onclick: move |_| is_expanded.set(!is_expanded()),
|
||||
div {
|
||||
class: format!("pt-2.5 px-4 {} transition-all duration-150",
|
||||
if is_expanded() { "pb-2 mt-1 bg-gray-900 text-gray-400 rounded-xl drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-950)]" }
|
||||
else { "pb-3 bg-gray-800 rounded-xl drop-shadow-[0_0_0_var(--color-gray-950)] text-gray-600" }
|
||||
),
|
||||
Icon {
|
||||
icon: FaBars,
|
||||
height: 24,
|
||||
width: 24
|
||||
}
|
||||
}
|
||||
},
|
||||
NavigationItem {
|
||||
route: Route::CategoryNextStepsPage,
|
||||
i {
|
||||
class: "fa-solid fa-forward"
|
||||
}
|
||||
icon: FaSignsPost
|
||||
},
|
||||
NavigationItem {
|
||||
route: Route::CategoryCalendarPage,
|
||||
i {
|
||||
class: "fa-solid fa-calendar-days"
|
||||
}
|
||||
icon: FaCalendarDays
|
||||
},
|
||||
NavigationItem {
|
||||
route: Route::CategoryTodayPage,
|
||||
i {
|
||||
class: "fa-solid fa-calendar-day"
|
||||
}
|
||||
icon: FaCalendarDay
|
||||
},
|
||||
NavigationItem {
|
||||
route: Route::CategoryInboxPage,
|
||||
i {
|
||||
class: "fa-solid fa-inbox"
|
||||
}
|
||||
icon: FaInbox
|
||||
},
|
||||
{if expanded() {
|
||||
{if is_expanded() {
|
||||
rsx! {
|
||||
NavigationItem {
|
||||
route: Route::ProjectsPage,
|
||||
i {
|
||||
class: "fa-solid fa-list"
|
||||
}
|
||||
icon: FaList
|
||||
},
|
||||
NavigationItem {
|
||||
route: Route::CategoryTrashPage,
|
||||
i {
|
||||
class: "fa-solid fa-trash-can"
|
||||
}
|
||||
icon: FaTrashCan
|
||||
},
|
||||
NavigationItem {
|
||||
route: Route::CategoryDonePage,
|
||||
i {
|
||||
class: "fa-solid fa-check"
|
||||
}
|
||||
icon: FaVolcano
|
||||
},
|
||||
NavigationItem {
|
||||
route: Route::CategoryLongTermPage,
|
||||
i {
|
||||
class: "fa-solid fa-water"
|
||||
}
|
||||
route: Route::CategorySomedayMaybePage,
|
||||
icon: FaLightbulb
|
||||
},
|
||||
NavigationItem {
|
||||
route: Route::CategoryWaitingForPage,
|
||||
i {
|
||||
class: "fa-solid fa-hourglass-half"
|
||||
}
|
||||
icon: FaHourglassHalf
|
||||
}
|
||||
}
|
||||
} else { VNode::empty() }}
|
||||
|
||||
@@ -1,19 +1,31 @@
|
||||
use crate::route::Route;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_free_icons::{Icon, IconShape};
|
||||
|
||||
#[component]
|
||||
pub(crate) fn NavigationItem(route: Route, children: Element) -> Element {
|
||||
pub(crate) fn NavigationItem<I: IconShape + Clone + PartialEq + 'static>(
|
||||
route: Route,
|
||||
icon: I,
|
||||
) -> Element {
|
||||
let current_route = use_route::<Route>();
|
||||
|
||||
rsx! {
|
||||
Link {
|
||||
to: route.clone(),
|
||||
class: format!(
|
||||
"py-4 text-center text-2xl {}",
|
||||
if current_route == route { "text-zinc-200" }
|
||||
else { "text-zinc-500" }
|
||||
"py-2.5 flex flex-row justify-center items-center hover:*:bg-gray-900 active:*:text-gray-400",
|
||||
),
|
||||
children
|
||||
div {
|
||||
class: format!("pt-2.5 px-4 {} transition-all duration-150",
|
||||
if current_route == route { "pb-2 mt-1 bg-gray-900 text-gray-400 rounded-xl drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-950)]" }
|
||||
else { "pb-3 bg-gray-800 rounded-xl drop-shadow-[0_0_0_var(--color-gray-950)] text-gray-600" }
|
||||
),
|
||||
Icon {
|
||||
icon,
|
||||
height: 24,
|
||||
width: 24
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,73 +1,113 @@
|
||||
use crate::components::button_primary::ButtonPrimary;
|
||||
use crate::components::button_secondary::ButtonSecondary;
|
||||
use crate::components::input::Input;
|
||||
use crate::components::input_label::InputLabel;
|
||||
use crate::models::project::Project;
|
||||
use crate::server::projects::{create_project, delete_project, edit_project};
|
||||
use dioxus::core_macro::{component, rsx};
|
||||
use dioxus::dioxus_core::Element;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_free_icons::Icon;
|
||||
use dioxus_free_icons::icons::fa_solid_icons::{FaFeatherPointed, FaStamp, FaTrashCan, FaXmark};
|
||||
|
||||
pub(crate) static PROJECT_BEING_EDITED: GlobalSignal<Option<Project>> = Signal::global(|| None);
|
||||
|
||||
#[component]
|
||||
pub(crate) fn ProjectForm(
|
||||
project: Option<Project>,
|
||||
on_successful_submit: EventHandler<()>,
|
||||
) -> Element {
|
||||
pub(crate) fn ProjectForm() -> Element {
|
||||
let navigator = use_navigator();
|
||||
let project = PROJECT_BEING_EDITED();
|
||||
let project_for_submit = project.clone();
|
||||
rsx! {
|
||||
form {
|
||||
class: "px-4 flex flex-col gap-4",
|
||||
onsubmit: move |event| {
|
||||
event.prevent_default();
|
||||
let project = project_for_submit.clone();
|
||||
async move {
|
||||
let new_project = event.parsed_values().unwrap();
|
||||
if let Some(project) = project {
|
||||
let _ = edit_project(project.id, new_project).await;
|
||||
let result = if let Some(project) = project {
|
||||
edit_project(project.id, new_project).await
|
||||
} else {
|
||||
let _ = create_project(new_project).await;
|
||||
create_project(new_project).await
|
||||
};
|
||||
if result.is_ok() {
|
||||
navigator.go_back();
|
||||
}
|
||||
on_successful_submit.call(());
|
||||
}
|
||||
},
|
||||
class: "p-4 flex flex-col gap-4",
|
||||
id: "form_project",
|
||||
div {
|
||||
class: "flex flex-row items-center gap-3",
|
||||
label {
|
||||
r#for: "input_title",
|
||||
class: "min-w-6 text-center",
|
||||
i {
|
||||
class: "fa-solid fa-pen-clip text-zinc-400/50"
|
||||
}
|
||||
InputLabel {
|
||||
icon: FaFeatherPointed,
|
||||
r#for: "input_title"
|
||||
}
|
||||
input {
|
||||
Input {
|
||||
class: "grow",
|
||||
name: "title",
|
||||
required: true,
|
||||
initial_value: project.as_ref().map(|project| project.title.to_owned()),
|
||||
r#type: "text",
|
||||
class: "py-2 px-3 grow bg-zinc-800/50 rounded-lg",
|
||||
id: "input_title"
|
||||
initial_value: project.as_ref().map(|project| project.title.to_owned()),
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "flex flex-row justify-between mt-auto",
|
||||
button {
|
||||
r#type: "button",
|
||||
class: "py-2 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
|
||||
onclick: move |_| {
|
||||
}
|
||||
div {
|
||||
class: "px-4 grid grid-cols-3 gap-3 mt-auto",
|
||||
ButtonSecondary {
|
||||
r#type: "button",
|
||||
class: "grow",
|
||||
onclick: {
|
||||
let project = project.clone();
|
||||
move |_| {
|
||||
let project = project.clone();
|
||||
async move {
|
||||
if let Some(project) = project {
|
||||
let _ = delete_project(project.id).await;
|
||||
let result = delete_project(project.id).await;
|
||||
if result.is_ok() {
|
||||
/* TODO: Might not work on mobile due to
|
||||
https://dioxuslabs.com/learn/0.7/essentials/router/navigation#history-buttons.
|
||||
*/
|
||||
navigator.go_back();
|
||||
}
|
||||
} else {
|
||||
navigator.go_back();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
Icon {
|
||||
icon: FaTrashCan,
|
||||
height: 16,
|
||||
width: 16
|
||||
}
|
||||
}
|
||||
if project.is_some() {
|
||||
div {
|
||||
class: "grow flex flex-col items-stretch",
|
||||
GoBackButton {
|
||||
ButtonSecondary {
|
||||
/* TODO: Replace w-full` with proper flexbox styling once
|
||||
https://github.com/DioxusLabs/dioxus/issues/5269 is solved. */
|
||||
class: "w-full",
|
||||
r#type: "button",
|
||||
Icon {
|
||||
icon: FaXmark,
|
||||
height: 16,
|
||||
width: 16
|
||||
}
|
||||
on_successful_submit.call(());
|
||||
}
|
||||
},
|
||||
i {
|
||||
class: "fa-solid fa-trash-can"
|
||||
}
|
||||
}
|
||||
button {
|
||||
r#type: "submit",
|
||||
class: "py-2 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
|
||||
i {
|
||||
class: "fa-solid fa-floppy-disk"
|
||||
}
|
||||
} else {
|
||||
div {}
|
||||
}
|
||||
ButtonPrimary {
|
||||
form: "form_project",
|
||||
r#type: "submit",
|
||||
Icon {
|
||||
icon: FaStamp,
|
||||
height: 16,
|
||||
width: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,22 @@
|
||||
use crate::{hooks::use_projects, models::project::Project};
|
||||
use crate::route::Route;
|
||||
use crate::{components::project_form::PROJECT_BEING_EDITED, hooks::use_projects};
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub(crate) fn ProjectList() -> Element {
|
||||
let navigator = use_navigator();
|
||||
let projects = use_projects()?;
|
||||
let mut project_being_edited = use_context::<Signal<Option<Project>>>();
|
||||
|
||||
rsx! {
|
||||
div {
|
||||
class: "flex flex-col",
|
||||
for project in projects {
|
||||
div {
|
||||
class: "px-7 py-4 hover:bg-gray-800 font-medium text-pretty wrap-anywhere select-none transition-all duration-150 cursor-pointer",
|
||||
key: "{project.id}",
|
||||
class: format!(
|
||||
"px-8 py-4 select-none {}",
|
||||
if project_being_edited().is_some_and(|p| p.id == project.id) {
|
||||
"bg-zinc-700"
|
||||
} else { "" }
|
||||
),
|
||||
onclick: move |_| project_being_edited.set(Some(project.clone())),
|
||||
onclick: move |_| {
|
||||
*PROJECT_BEING_EDITED.write() = Some(project.clone());
|
||||
navigator.push(Route::ProjectFormPage);
|
||||
},
|
||||
{project.title.clone()}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,8 +10,8 @@ pub(crate) fn ProjectSelect(initial_selected_id: Option<i32>) -> Element {
|
||||
rsx! {
|
||||
select {
|
||||
name: "project_id",
|
||||
class: "px-3.5 py-2.5 bg-zinc-800/50 rounded-lg grow cursor-pointer",
|
||||
id: "input_project",
|
||||
class: "px-4 pt-3 pb-2.25 bg-gray-800-muted enabled:hover:bg-gray-800 enabled:active:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl grow cursor-pointer",
|
||||
id: "input_project_id",
|
||||
option {
|
||||
value: 0,
|
||||
{t!("none")}
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
use crate::models::category::ReoccurrenceInterval;
|
||||
use dioxus::core_macro::rsx;
|
||||
use dioxus::dioxus_core::Element;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub(crate) fn ReoccurrenceIntervalInput(
|
||||
reoccurrence_interval: Signal<Option<ReoccurrenceInterval>>,
|
||||
class_buttons: Option<&'static str>,
|
||||
) -> Element {
|
||||
rsx! {
|
||||
button {
|
||||
r#type: "button",
|
||||
class: format!(
|
||||
"py-2 rounded-lg {} {} cursor-pointer",
|
||||
class_buttons.unwrap_or(""),
|
||||
if reoccurrence_interval().is_none() { "bg-zinc-500/50" }
|
||||
else { "bg-zinc-800/50" }
|
||||
),
|
||||
onclick: move |_| {
|
||||
reoccurrence_interval.set(None);
|
||||
},
|
||||
i {
|
||||
class: "fa-solid fa-ban"
|
||||
}
|
||||
},
|
||||
button {
|
||||
r#type: "button",
|
||||
class: format!(
|
||||
"py-2 rounded-lg {} {} cursor-pointer",
|
||||
class_buttons.unwrap_or(""),
|
||||
if let Some(ReoccurrenceInterval::Day) = reoccurrence_interval()
|
||||
{ "bg-zinc-500/50" }
|
||||
else { "bg-zinc-800/50" }
|
||||
),
|
||||
onclick: move |_| {
|
||||
reoccurrence_interval.set(Some(ReoccurrenceInterval::Day))
|
||||
},
|
||||
i {
|
||||
class: "fa-solid fa-sun"
|
||||
}
|
||||
},
|
||||
button {
|
||||
r#type: "button",
|
||||
class: format!(
|
||||
"py-2 rounded-lg {} {} cursor-pointer",
|
||||
class_buttons.unwrap_or(""),
|
||||
if let Some(ReoccurrenceInterval::Month) = reoccurrence_interval()
|
||||
{ "bg-zinc-500/50" }
|
||||
else { "bg-zinc-800/50" }
|
||||
),
|
||||
onclick: move |_| {
|
||||
reoccurrence_interval.set(Some(ReoccurrenceInterval::Month))
|
||||
},
|
||||
i {
|
||||
class: "fa-solid fa-moon"
|
||||
}
|
||||
},
|
||||
button {
|
||||
r#type: "button",
|
||||
class: format!(
|
||||
"py-2 rounded-lg {} {} cursor-pointer",
|
||||
class_buttons.unwrap_or(""),
|
||||
if let Some(ReoccurrenceInterval::Year) = reoccurrence_interval()
|
||||
{ "bg-zinc-500/50" }
|
||||
else { "bg-zinc-800/50" }
|
||||
),
|
||||
onclick: move |_| {
|
||||
reoccurrence_interval.set(Some(ReoccurrenceInterval::Year))
|
||||
},
|
||||
i {
|
||||
class: "fa-solid fa-earth-europe"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
44
src/components/reoccurrence_interval_input.rs
Normal file
44
src/components/reoccurrence_interval_input.rs
Normal file
@@ -0,0 +1,44 @@
|
||||
use crate::components::select_button::SelectButton;
|
||||
use crate::models::category::ReoccurrenceInterval;
|
||||
use dioxus::core_macro::rsx;
|
||||
use dioxus::dioxus_core::Element;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_free_icons::icons::fa_solid_icons::{FaBan, FaEarthEurope, FaMoon, FaSun};
|
||||
|
||||
#[component]
|
||||
pub(crate) fn ReoccurrenceIntervalInput(
|
||||
reoccurrence_interval: Signal<Option<ReoccurrenceInterval>>,
|
||||
class_buttons: Option<&'static str>,
|
||||
) -> Element {
|
||||
rsx! {
|
||||
// TODO: Abstract into SelectButton. Make it sank into the surface by default, like other inputs (abstract those too haha), and rise it up on selection (rationale: it will influence what is on the surface).
|
||||
SelectButton {
|
||||
icon: FaBan,
|
||||
is_selected: reoccurrence_interval().is_none(),
|
||||
on_select: move |_| {
|
||||
reoccurrence_interval.set(None);
|
||||
}
|
||||
}
|
||||
SelectButton {
|
||||
icon: FaSun,
|
||||
is_selected: matches!(reoccurrence_interval(), Some(ReoccurrenceInterval::Day)),
|
||||
on_select: move |_| {
|
||||
reoccurrence_interval.set(Some(ReoccurrenceInterval::Day))
|
||||
}
|
||||
}
|
||||
SelectButton {
|
||||
icon: FaMoon,
|
||||
is_selected: matches!(reoccurrence_interval(), Some(ReoccurrenceInterval::Month)),
|
||||
on_select: move |_| {
|
||||
reoccurrence_interval.set(Some(ReoccurrenceInterval::Month));
|
||||
}
|
||||
}
|
||||
SelectButton {
|
||||
icon: FaEarthEurope,
|
||||
is_selected: matches!(reoccurrence_interval(), Some(ReoccurrenceInterval::Year)),
|
||||
on_select: move |_| {
|
||||
reoccurrence_interval.set(Some(ReoccurrenceInterval::Year));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
28
src/components/select_button.rs
Normal file
28
src/components/select_button.rs
Normal file
@@ -0,0 +1,28 @@
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_free_icons::{Icon, IconShape};
|
||||
|
||||
#[component]
|
||||
pub(crate) fn SelectButton<I: IconShape + Clone + PartialEq + 'static>(
|
||||
icon: I,
|
||||
is_selected: bool,
|
||||
on_select: Callback,
|
||||
) -> Element {
|
||||
rsx! {
|
||||
button {
|
||||
r#type: "button",
|
||||
class: format!(
|
||||
"pt-4.5 flex flex-row justify-center items-center {} rounded-xl transition-all duration-150",
|
||||
if is_selected { "pb-3.75 bg-gray-900 drop-shadow-[0_0_0_var(--color-gray-900-muted)]" }
|
||||
else { "pb-2.75 mt-1 bg-gray-800-muted hover:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] text-gray-400 cursor-pointer" }
|
||||
),
|
||||
onclick: move |_| {
|
||||
on_select.call(());
|
||||
},
|
||||
Icon {
|
||||
icon,
|
||||
height: 16,
|
||||
width: 16
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,6 @@
|
||||
use crate::components::button_secondary::ButtonSecondary;
|
||||
use crate::components::input::Input;
|
||||
use crate::components::input_label::InputLabel;
|
||||
use crate::hooks::use_subtasks_of_task;
|
||||
use crate::models::subtask::NewSubtask;
|
||||
use crate::models::task::Task;
|
||||
@@ -5,131 +8,132 @@ use crate::server::subtasks::{create_subtask, delete_subtask, edit_subtask};
|
||||
use dioxus::core_macro::{component, rsx};
|
||||
use dioxus::dioxus_core::Element;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_free_icons::Icon;
|
||||
use dioxus_free_icons::icons::fa_solid_icons::{FaGavel, FaListCheck, FaTrashCan};
|
||||
|
||||
#[component]
|
||||
pub(crate) fn SubtasksForm(task: Task) -> Element {
|
||||
let subtasks = use_subtasks_of_task(task.id)?;
|
||||
let mut new_title = use_signal(String::new);
|
||||
rsx! {
|
||||
form {
|
||||
class: "flex flex-row items-center gap-3",
|
||||
onsubmit: move |event| {
|
||||
event.prevent_default();
|
||||
let task = task.clone();
|
||||
async move {
|
||||
let new_subtask = NewSubtask {
|
||||
task_id: task.id,
|
||||
title: event.get("title").first().cloned().and_then(|value| match value {
|
||||
FormValue::Text(value) => Some(value),
|
||||
FormValue::File(_) => None
|
||||
}).unwrap(),
|
||||
is_completed: false
|
||||
};
|
||||
let _ = create_subtask(new_subtask).await;
|
||||
new_title.set(String::new());
|
||||
}
|
||||
},
|
||||
label {
|
||||
r#for: "input_new_title",
|
||||
class: "min-w-6 text-center",
|
||||
i {
|
||||
class: "fa-solid fa-list-check text-zinc-400/50"
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "grow grid grid-cols-6 gap-2",
|
||||
input {
|
||||
name: "title",
|
||||
required: true,
|
||||
value: new_title,
|
||||
r#type: "text",
|
||||
class: "grow py-2 px-3 col-span-5 bg-zinc-800/50 rounded-lg",
|
||||
id: "input_new_title",
|
||||
onchange: move |event| new_title.set(event.value())
|
||||
}
|
||||
button {
|
||||
r#type: "submit",
|
||||
class: "py-2 col-span-1 bg-zinc-800/50 rounded-lg",
|
||||
i {
|
||||
class: "fa-solid fa-plus"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
for subtask in subtasks {
|
||||
div {
|
||||
key: "{subtask.id}",
|
||||
div {
|
||||
class: "flex flex-col gap-3",
|
||||
form {
|
||||
class: "flex flex-row items-center gap-3",
|
||||
i {
|
||||
class: format!(
|
||||
"{} min-w-6 text-center text-2xl text-zinc-400/50",
|
||||
if subtask.is_completed {
|
||||
"fa solid fa-square-check"
|
||||
} else {
|
||||
"fa-regular fa-square"
|
||||
}
|
||||
),
|
||||
onclick: {
|
||||
let subtask = subtask.clone();
|
||||
move |_| {
|
||||
let subtask = subtask.clone();
|
||||
async move {
|
||||
let new_subtask = NewSubtask {
|
||||
task_id: subtask.task_id,
|
||||
title: subtask.title.clone(),
|
||||
is_completed: !subtask.is_completed
|
||||
};
|
||||
let _ = edit_subtask(
|
||||
subtask.id,
|
||||
new_subtask
|
||||
).await;
|
||||
}
|
||||
}
|
||||
onsubmit: move |event| {
|
||||
event.prevent_default();
|
||||
let task = task.clone();
|
||||
async move {
|
||||
let new_subtask = NewSubtask {
|
||||
task_id: task.id,
|
||||
title: event.get("new_title").first().cloned().and_then(|value| match value {
|
||||
FormValue::Text(value) => Some(value),
|
||||
FormValue::File(_) => None
|
||||
}).unwrap(),
|
||||
is_completed: false
|
||||
};
|
||||
let _ = create_subtask(new_subtask).await;
|
||||
new_title.set(String::new());
|
||||
}
|
||||
},
|
||||
InputLabel {
|
||||
icon: FaListCheck,
|
||||
r#for: "input_new_title"
|
||||
}
|
||||
div {
|
||||
class: "grow grid grid-cols-6 gap-2",
|
||||
input {
|
||||
class: "grow flex flex-row items-end gap-3",
|
||||
Input {
|
||||
class: "grow",
|
||||
name: "new_title",
|
||||
r#type: "text",
|
||||
class: "grow py-2 px-3 col-span-5 bg-zinc-800/50 rounded-lg",
|
||||
id: "input_title_{subtask.id}",
|
||||
initial_value: subtask.title.clone(),
|
||||
onchange: {
|
||||
let subtask = subtask.clone();
|
||||
move |event: Event<FormData>| {
|
||||
let subtask = subtask.clone();
|
||||
async move {
|
||||
let new_subtask = NewSubtask {
|
||||
task_id: subtask.task_id,
|
||||
title: event.value(),
|
||||
is_completed: subtask.is_completed
|
||||
};
|
||||
if new_subtask.title.is_empty() {
|
||||
let _ = delete_subtask(subtask.id).await;
|
||||
} else {
|
||||
let _ = edit_subtask(
|
||||
subtask.id,
|
||||
new_subtask
|
||||
).await;
|
||||
}
|
||||
}
|
||||
}
|
||||
required: true,
|
||||
value: new_title,
|
||||
onchange: move |event: Event<FormData>| new_title.set(event.value())
|
||||
}
|
||||
ButtonSecondary {
|
||||
r#type: "submit",
|
||||
Icon {
|
||||
icon: FaGavel,
|
||||
height: 16,
|
||||
width: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
for subtask in subtasks {
|
||||
div {
|
||||
key: "{subtask.id}",
|
||||
class: "flex flex-row items-center gap-3",
|
||||
button {
|
||||
r#type: "button",
|
||||
class: "py-2 col-span-1 bg-zinc-800/50 rounded-lg",
|
||||
class: "mt-1.5 hover:mt-1 hover:pb-0.5 min-w-7 cursor-pointer transition-all duration-150",
|
||||
onclick: {
|
||||
let subtask = subtask.clone();
|
||||
move |_| {
|
||||
let subtask = subtask.clone();
|
||||
async move {
|
||||
let _ = delete_subtask(subtask.id).await;
|
||||
let new_subtask = NewSubtask {
|
||||
task_id: subtask.task_id,
|
||||
title: subtask.title.clone(),
|
||||
is_completed: !subtask.is_completed
|
||||
};
|
||||
let _ = edit_subtask(
|
||||
subtask.id,
|
||||
new_subtask
|
||||
).await;
|
||||
}
|
||||
}
|
||||
},
|
||||
i {
|
||||
class: "fa-solid fa-trash-can"
|
||||
div {
|
||||
class: format!("grow h-7 w-7 mb-[4px] drop-shadow-[0_1px_0_var(--color-gray-800),0_1px_0_var(--color-gray-800),0_1px_0_var(--color-gray-800),0_1px_0_var(--color-gray-800)] rounded-full {}",
|
||||
if subtask.is_completed {"bg-gray-600"} else {"border-3 border-gray-600"}
|
||||
)
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "grow flex flex-row items-end gap-3",
|
||||
Input {
|
||||
class: "grow",
|
||||
name: "title_edit_{subtask.id}",
|
||||
r#type: "text",
|
||||
initial_value: subtask.title.clone(),
|
||||
onchange: {
|
||||
let subtask = subtask.clone();
|
||||
move |event: Event<FormData>| {
|
||||
let subtask = subtask.clone();
|
||||
async move {
|
||||
let new_subtask = NewSubtask {
|
||||
task_id: subtask.task_id,
|
||||
title: event.value(),
|
||||
is_completed: subtask.is_completed
|
||||
};
|
||||
if new_subtask.title.is_empty() {
|
||||
let _ = delete_subtask(subtask.id).await;
|
||||
} else {
|
||||
let _ = edit_subtask(
|
||||
subtask.id,
|
||||
new_subtask
|
||||
).await;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ButtonSecondary {
|
||||
r#type: "button",
|
||||
onclick: {
|
||||
let subtask = subtask.clone();
|
||||
move |_| {
|
||||
let subtask = subtask.clone();
|
||||
async move {
|
||||
let _ = delete_subtask(subtask.id).await;
|
||||
}
|
||||
}
|
||||
},
|
||||
Icon {
|
||||
icon: FaTrashCan,
|
||||
height: 16,
|
||||
width: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,24 @@
|
||||
use crate::components::button_primary::ButtonPrimary;
|
||||
use crate::components::button_secondary::ButtonSecondary;
|
||||
use crate::components::category_input::CategoryInput;
|
||||
use crate::components::input::Input;
|
||||
use crate::components::input_label::InputLabel;
|
||||
use crate::components::project_select::ProjectSelect;
|
||||
use crate::components::reoccurrence_input::ReoccurrenceIntervalInput;
|
||||
use crate::components::reoccurrence_interval_input::ReoccurrenceIntervalInput;
|
||||
use crate::components::subtasks_form::SubtasksForm;
|
||||
use crate::models::category::{CalendarTime, Category, Reoccurrence};
|
||||
use crate::models::task::NewTask;
|
||||
use crate::models::task::Task;
|
||||
use crate::route::Route;
|
||||
use crate::server::tasks::{create_task, delete_task, edit_task};
|
||||
use chrono::Duration;
|
||||
use dioxus::core_macro::{component, rsx};
|
||||
use dioxus::dioxus_core::Element;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_free_icons::Icon;
|
||||
use dioxus_free_icons::icons::fa_solid_icons::{
|
||||
FaBell, FaBomb, FaClock, FaFeatherPointed, FaHourglassEnd, FaList, FaRepeat, FaScroll, FaStamp,
|
||||
FaTrashCan, FaXmark,
|
||||
};
|
||||
use dioxus_i18n::t;
|
||||
use serde::{Deserialize, Serialize};
|
||||
|
||||
@@ -46,25 +54,19 @@ struct InputData {
|
||||
project_id: Option<String>,
|
||||
}
|
||||
|
||||
pub(crate) static TASK_BEING_EDITED: GlobalSignal<Option<Task>> = Signal::global(|| None);
|
||||
pub(crate) static LATEST_VISITED_CATEGORY: GlobalSignal<Category> =
|
||||
Signal::global(|| Category::Inbox);
|
||||
|
||||
#[component]
|
||||
pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()>) -> Element {
|
||||
let route = use_route::<Route>();
|
||||
pub(crate) fn TaskForm() -> Element {
|
||||
let navigator = use_navigator();
|
||||
let task = TASK_BEING_EDITED();
|
||||
let selected_category = use_signal(|| {
|
||||
if let Some(task) = &task {
|
||||
task.category.clone()
|
||||
} else {
|
||||
match route {
|
||||
Route::CategorySomedayMaybePage => Category::SomedayMaybe,
|
||||
Route::CategoryWaitingForPage => Category::WaitingFor(String::new()),
|
||||
Route::CategoryNextStepsPage => Category::NextSteps,
|
||||
Route::CategoryCalendarPage | Route::CategoryTodayPage => Category::Calendar {
|
||||
date: chrono::Local::now().date_naive(),
|
||||
reoccurrence: None,
|
||||
time: None,
|
||||
},
|
||||
Route::CategoryLongTermPage => Category::LongTerm,
|
||||
_ => Category::Inbox,
|
||||
}
|
||||
LATEST_VISITED_CATEGORY()
|
||||
}
|
||||
});
|
||||
let category_calendar_reoccurrence_interval = use_signal(|| {
|
||||
@@ -104,9 +106,9 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
|
||||
|
||||
rsx! {
|
||||
div {
|
||||
class: "p-4 flex flex-col gap-4",
|
||||
class: "grow px-4 flex flex-col gap-6.5",
|
||||
form {
|
||||
class: "flex flex-col gap-4",
|
||||
class: "flex flex-col gap-8",
|
||||
id: "form_task",
|
||||
onsubmit: move |event| {
|
||||
event.prevent_default();
|
||||
@@ -148,50 +150,45 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
|
||||
project_id: input_data.project_id
|
||||
.and_then(|deadline| deadline.parse().ok()).filter(|&id| id > 0),
|
||||
};
|
||||
if let Some(task) = task {
|
||||
let _ = edit_task(task.id, new_task).await;
|
||||
let result = if let Some(task) = task {
|
||||
edit_task(task.id, new_task).await
|
||||
} else {
|
||||
let _ = create_task(new_task).await;
|
||||
create_task(new_task).await
|
||||
};
|
||||
if result.is_ok() {
|
||||
navigator.go_back();
|
||||
}
|
||||
on_successful_submit.call(());
|
||||
}
|
||||
},
|
||||
div {
|
||||
class: "flex flex-row items-center gap-3",
|
||||
label {
|
||||
InputLabel {
|
||||
r#for: "input_title",
|
||||
class: "min-w-6 text-center",
|
||||
i {
|
||||
class: "fa-solid fa-pen-clip text-zinc-400/50"
|
||||
},
|
||||
icon: FaFeatherPointed
|
||||
},
|
||||
input {
|
||||
Input {
|
||||
class: "grow",
|
||||
name: "title",
|
||||
required: true,
|
||||
initial_value: task.as_ref().map(|task| task.title.clone()),
|
||||
r#type: "text",
|
||||
class: "py-2 px-3 grow bg-zinc-800/50 rounded-lg",
|
||||
id: "input_title"
|
||||
},
|
||||
autofocus: true
|
||||
}
|
||||
},
|
||||
div {
|
||||
class: "flex flex-row items-center gap-3",
|
||||
label {
|
||||
r#for: "input_project",
|
||||
class: "min-w-6 text-center",
|
||||
i {
|
||||
class: "fa-solid fa-list text-zinc-400/50"
|
||||
}
|
||||
InputLabel {
|
||||
r#for: "input_project_id",
|
||||
icon: FaList
|
||||
},
|
||||
SuspenseBoundary {
|
||||
fallback: |_| {
|
||||
rsx ! {
|
||||
select {
|
||||
class: "px-3.5 py-2.5 bg-zinc-800/50 rounded-lg grow cursor-pointer",
|
||||
class: "px-4 pt-3 pb-2.25 bg-gray-800-muted drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl grow cursor-pointer",
|
||||
option {
|
||||
value: 0,
|
||||
{t!("none")}
|
||||
},
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -202,86 +199,69 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
|
||||
},
|
||||
div {
|
||||
class: "flex flex-row items-center gap-3",
|
||||
label {
|
||||
r#for: "input_deadline",
|
||||
class: "min-w-6 text-center",
|
||||
i {
|
||||
class: "fa-solid fa-bomb text-zinc-400/50"
|
||||
}
|
||||
InputLabel {
|
||||
icon: FaBomb,
|
||||
r#for: "input_deadline"
|
||||
},
|
||||
input {
|
||||
Input {
|
||||
name: "deadline",
|
||||
initial_value: task.as_ref().and_then(|task| task.deadline)
|
||||
.map(|deadline| deadline.format("%Y-%m-%d").to_string()),
|
||||
r#type: "date",
|
||||
class: "py-2 px-3 bg-zinc-800/50 rounded-lg grow basis-0 cursor-pointer",
|
||||
id: "input_deadline"
|
||||
class: "grow basis-0"
|
||||
}
|
||||
},
|
||||
div {
|
||||
class: "flex flex-row items-center gap-3",
|
||||
label {
|
||||
class: "min-w-6 text-center",
|
||||
i {
|
||||
class: "fa-solid fa-layer-group text-zinc-400/50"
|
||||
}
|
||||
InputLabel {
|
||||
icon: FaScroll
|
||||
},
|
||||
CategoryInput {
|
||||
selected_category: selected_category,
|
||||
class: "grow"
|
||||
class: "grow",
|
||||
selected_category: selected_category
|
||||
}
|
||||
}
|
||||
match selected_category() {
|
||||
Category::WaitingFor(waiting_for) => rsx! {
|
||||
div {
|
||||
class: "flex flex-row items-center gap-3",
|
||||
label {
|
||||
r#for: "input_deadline",
|
||||
class: "min-w-6 text-center",
|
||||
i {
|
||||
class: "fa-solid fa-hourglass-end text-zinc-400/50"
|
||||
}
|
||||
InputLabel {
|
||||
icon: FaHourglassEnd,
|
||||
r#for: "input_category_waiting_for",
|
||||
},
|
||||
input {
|
||||
Input {
|
||||
class: "grow",
|
||||
name: "category_waiting_for",
|
||||
required: true,
|
||||
initial_value: waiting_for,
|
||||
r#type: "text",
|
||||
class: "py-2 px-3 bg-zinc-800/50 rounded-lg grow",
|
||||
id: "input_category_waiting_for"
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
Category::Calendar { date, reoccurrence, time } => rsx! {
|
||||
div {
|
||||
class: "flex flex-row items-center gap-3",
|
||||
label {
|
||||
r#for: "input_category_calendar_date",
|
||||
class: "min-w-6 text-center",
|
||||
i {
|
||||
class: "fa-solid fa-clock text-zinc-400/50"
|
||||
}
|
||||
InputLabel {
|
||||
icon: FaClock,
|
||||
r#for: "input_category_calendar_date"
|
||||
},
|
||||
div {
|
||||
class: "grow flex flex-row gap-2",
|
||||
input {
|
||||
r#type: "date",
|
||||
class: "grow flex flex-row gap-3",
|
||||
Input {
|
||||
class: "grow",
|
||||
name: "category_calendar_date",
|
||||
r#type: "date",
|
||||
required: true,
|
||||
initial_value: date.format("%Y-%m-%d").to_string(),
|
||||
class:
|
||||
"py-2 px-3 bg-zinc-800/50 rounded-lg grow cursor-pointer",
|
||||
id: "input_category_calendar_date"
|
||||
},
|
||||
input {
|
||||
r#type: "time",
|
||||
Input {
|
||||
class: "grow",
|
||||
name: "category_calendar_time",
|
||||
r#type: "time",
|
||||
initial_value: time.map(|calendar_time|
|
||||
calendar_time.time.format("%H:%M").to_string()
|
||||
),
|
||||
class: "py-2 px-3 bg-zinc-800/50 rounded-lg grow cursor-pointer",
|
||||
id: "input_category_calendar_time",
|
||||
oninput: move |event| {
|
||||
oninput: move |event: Event<FormData>| {
|
||||
category_calendar_has_time.set(!event.value().is_empty());
|
||||
}
|
||||
}
|
||||
@@ -289,54 +269,46 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
|
||||
},
|
||||
div {
|
||||
class: "flex flex-row items-center gap-3",
|
||||
label {
|
||||
r#for: "category_calendar_reoccurrence_length",
|
||||
class: "min-w-6 text-center",
|
||||
i {
|
||||
class: "fa-solid fa-repeat text-zinc-400/50"
|
||||
}
|
||||
InputLabel {
|
||||
icon: FaRepeat,
|
||||
r#for: "category_calendar_reoccurrence_length"
|
||||
},
|
||||
div {
|
||||
class: "grow grid grid-cols-6 gap-2",
|
||||
class: "grow grid grid-cols-5 items-end gap-3",
|
||||
ReoccurrenceIntervalInput {
|
||||
reoccurrence_interval: category_calendar_reoccurrence_interval
|
||||
},
|
||||
input {
|
||||
Input {
|
||||
class: "text-right",
|
||||
r#type: "number",
|
||||
inputmode: "numeric",
|
||||
name: "category_calendar_reoccurrence_length",
|
||||
disabled: category_calendar_reoccurrence_interval().is_none(),
|
||||
required: true,
|
||||
min: 1,
|
||||
min: "1",
|
||||
initial_value: category_calendar_reoccurrence_interval().map_or(
|
||||
String::new(),
|
||||
|_| reoccurrence.map_or(1, |reoccurrence|
|
||||
reoccurrence.length).to_string()
|
||||
),
|
||||
class: "py-2 px-3 bg-zinc-800/50 rounded-lg col-span-2 text-right",
|
||||
id: "category_calendar_reoccurrence_length"
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
if category_calendar_has_time() {
|
||||
div {
|
||||
class: "flex flex-row items-center gap-3",
|
||||
label {
|
||||
r#for: "category_calendar_reminder_offset_index",
|
||||
class: "min-w-6 text-center",
|
||||
i {
|
||||
class: "fa-solid fa-bell text-zinc-400/50"
|
||||
}
|
||||
InputLabel {
|
||||
r#for: "input_category_calendar_reminder_offset_index",
|
||||
icon: FaBell
|
||||
},
|
||||
input {
|
||||
r#type: "range",
|
||||
class: "grow",
|
||||
name: "category_calendar_reminder_offset_index",
|
||||
r#type: "range",
|
||||
min: 0,
|
||||
max: REMINDER_OFFSETS.len() as i64 - 1,
|
||||
initial_value: category_calendar_reminder_offset_index()
|
||||
.to_string(),
|
||||
class: "grow input-range-reverse cursor-pointer",
|
||||
id: "category_calendar_has_reminder",
|
||||
oninput: move |event| {
|
||||
category_calendar_reminder_offset_index.set(
|
||||
event.value().parse().unwrap()
|
||||
@@ -344,8 +316,8 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
|
||||
}
|
||||
},
|
||||
label {
|
||||
r#for: "category_calendar_reminder_offset_index",
|
||||
class: "pr-3 min-w-16 text-right",
|
||||
r#for: "category_calendar_reminder_offset_index",
|
||||
{REMINDER_OFFSETS[category_calendar_reminder_offset_index()]
|
||||
.map(
|
||||
|offset| if offset.num_hours() < 1 {
|
||||
@@ -371,17 +343,20 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "flex flex-row justify-between mt-auto",
|
||||
button {
|
||||
r#type: "button",
|
||||
class: "py-2 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
|
||||
onclick: move |_| {
|
||||
}
|
||||
div {
|
||||
class: "px-4 grid grid-cols-3 gap-3 mt-auto",
|
||||
ButtonSecondary {
|
||||
r#type: "button",
|
||||
class: "grow",
|
||||
onclick: {
|
||||
let task = task.clone();
|
||||
move |_| {
|
||||
let task = task.clone();
|
||||
async move {
|
||||
if let Some(task) = task {
|
||||
if let Category::Trash = task.category {
|
||||
let _ = delete_task(task.id).await;
|
||||
let result = if let Category::Trash = task.category {
|
||||
delete_task(task.id).await
|
||||
} else {
|
||||
let new_task = NewTask {
|
||||
title: task.title.to_owned(),
|
||||
@@ -389,23 +364,53 @@ pub(crate) fn TaskForm(task: Option<Task>, on_successful_submit: EventHandler<()
|
||||
category: Category::Trash,
|
||||
project_id: task.project_id
|
||||
};
|
||||
let _ = edit_task(task.id, new_task).await;
|
||||
edit_task(task.id, new_task).await.map(|_| ())
|
||||
};
|
||||
if result.is_ok() {
|
||||
/* TODO: Might not work on mobile due to
|
||||
https://dioxuslabs.com/learn/0.7/essentials/router/navigation#history-buttons.
|
||||
*/
|
||||
navigator.go_back();
|
||||
}
|
||||
} else {
|
||||
navigator.go_back();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
Icon {
|
||||
icon: FaTrashCan,
|
||||
height: 16,
|
||||
width: 16
|
||||
}
|
||||
}
|
||||
if task.is_some() {
|
||||
div {
|
||||
class: "grow flex flex-col items-stretch",
|
||||
GoBackButton {
|
||||
ButtonSecondary {
|
||||
/* TODO: Replace w-full` with proper flexbox styling once
|
||||
https://github.com/DioxusLabs/dioxus/issues/5269 is solved. */
|
||||
class: "w-full",
|
||||
r#type: "button",
|
||||
Icon {
|
||||
icon: FaXmark,
|
||||
height: 16,
|
||||
width: 16
|
||||
}
|
||||
on_successful_submit.call(());
|
||||
}
|
||||
},
|
||||
i {
|
||||
class: "fa-solid fa-trash-can"
|
||||
}
|
||||
}
|
||||
button {
|
||||
form: "form_task",
|
||||
r#type: "submit",
|
||||
class: "py-2 px-4 bg-zinc-300/50 rounded-lg cursor-pointer",
|
||||
i {
|
||||
class: "fa-solid fa-floppy-disk"
|
||||
}
|
||||
} else {
|
||||
div {}
|
||||
}
|
||||
ButtonPrimary {
|
||||
form: "form_task",
|
||||
r#type: "submit",
|
||||
Icon {
|
||||
icon: FaStamp,
|
||||
height: 16,
|
||||
width: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
use crate::components::task_form::TASK_BEING_EDITED;
|
||||
use crate::components::task_list_item::TaskListItem;
|
||||
use crate::models::category::Category;
|
||||
use crate::models::task::{Task, TaskWithSubtasks};
|
||||
use crate::models::task::TaskWithSubtasks;
|
||||
use crate::route::Route;
|
||||
use crate::server::tasks::complete_task;
|
||||
use dioxus::core_macro::rsx;
|
||||
use dioxus::dioxus_core::Element;
|
||||
@@ -8,7 +10,7 @@ use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub(crate) fn TaskList(tasks: Vec<TaskWithSubtasks>, class: Option<&'static str>) -> Element {
|
||||
let mut task_being_edited = use_context::<Signal<Option<Task>>>();
|
||||
let navigator = use_navigator();
|
||||
rsx! {
|
||||
div {
|
||||
class: format!("flex flex-col {}", class.unwrap_or("")),
|
||||
@@ -16,34 +18,31 @@ pub(crate) fn TaskList(tasks: Vec<TaskWithSubtasks>, class: Option<&'static str>
|
||||
div {
|
||||
key: "{task.task.id}",
|
||||
class: format!(
|
||||
"px-8 pt-4 {} flex flex-row gap-4 select-none {}",
|
||||
"px-7 pt-3.75 {} flex flex-row items-start gap-4 hover:bg-gray-800 cursor-pointer select-none transition-all duration-150",
|
||||
if task.task.deadline.is_some() || !task.subtasks.is_empty() {
|
||||
"pb-0.5"
|
||||
"pb-0.25"
|
||||
} else if let Category::Calendar { time, .. } = &task.task.category {
|
||||
if time.is_some() {
|
||||
"pb-0.5"
|
||||
"pb-0.25"
|
||||
} else {
|
||||
"pb-4"
|
||||
"pb-3.75"
|
||||
}
|
||||
} else {
|
||||
"pb-4"
|
||||
"pb-3.75"
|
||||
},
|
||||
if task_being_edited().is_some_and(|t| t.id == task.task.id) {
|
||||
"bg-zinc-700"
|
||||
} else { "" }
|
||||
),
|
||||
onclick: {
|
||||
let task = task.clone();
|
||||
move |_| task_being_edited.set(Some(task.task.clone()))
|
||||
move |_| {
|
||||
*TASK_BEING_EDITED.write() = Some(task.task.clone());
|
||||
navigator.push(Route::TaskFormPage);
|
||||
}
|
||||
},
|
||||
i {
|
||||
button {
|
||||
class: format!(
|
||||
"{} text-3xl align-middle h-9 text-zinc-500",
|
||||
if let Category::Done = task.task.category {
|
||||
"fa solid fa-square-check"
|
||||
} else {
|
||||
"fa-regular fa-square cursor-pointer"
|
||||
}
|
||||
"mt-0.5 hover:mt-0 hover:pb-0.5 transition-all duration-150 cursor-pointer {}",
|
||||
if let Category::Done = task.task.category { "pointer-events-none" }
|
||||
else { "" }
|
||||
),
|
||||
onclick: {
|
||||
move |event: Event<MouseData>| {
|
||||
@@ -53,10 +52,22 @@ pub(crate) fn TaskList(tasks: Vec<TaskWithSubtasks>, class: Option<&'static str>
|
||||
let _ = complete_task(task.task.id).await;
|
||||
}
|
||||
}
|
||||
},
|
||||
div {
|
||||
class: format!("h-8 w-8 rounded-full {}",
|
||||
if let Category::Done = task.task.category {
|
||||
"mt-[3px] mb-[2px] bg-amber-300-muted"
|
||||
} else {
|
||||
"mb-[5px] border-3 border-amber-300-muted drop-shadow-[0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted),0_1px_0_var(--color-amber-700-muted)]"
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
TaskListItem {
|
||||
task: task.clone()
|
||||
div {
|
||||
class: "mt-1.5",
|
||||
TaskListItem {
|
||||
task: task.clone()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,8 @@ use chrono::{Datelike, Local};
|
||||
use dioxus::core_macro::rsx;
|
||||
use dioxus::dioxus_core::Element;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_free_icons::Icon;
|
||||
use dioxus_free_icons::icons::fa_solid_icons::{FaBomb, FaClock, FaListCheck};
|
||||
use dioxus_i18n::prelude::i18n;
|
||||
use dioxus_i18n::t;
|
||||
use voca_rs::Voca;
|
||||
@@ -14,19 +16,21 @@ pub(crate) fn TaskListItem(task: TaskWithSubtasks) -> Element {
|
||||
let today_date = Local::now().date_naive();
|
||||
rsx! {
|
||||
div {
|
||||
class: "flex flex-col",
|
||||
class: "pt-0.75 flex flex-col",
|
||||
div {
|
||||
class: "mt-1 grow font-medium",
|
||||
class: "grow font-medium text-pretty wrap-anywhere",
|
||||
{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"
|
||||
},
|
||||
class: "flex flex-row items-center gap-1 text-sm text-gray-500",
|
||||
Icon {
|
||||
icon: FaBomb,
|
||||
height: 14,
|
||||
width: 14
|
||||
}
|
||||
{
|
||||
format!(
|
||||
" {}",
|
||||
@@ -72,10 +76,12 @@ pub(crate) fn TaskListItem(task: TaskWithSubtasks) -> Element {
|
||||
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"
|
||||
},
|
||||
class: "flex flex-row items-center gap-1 text-sm text-gray-500",
|
||||
Icon {
|
||||
icon: FaClock,
|
||||
height: 14,
|
||||
width: 14
|
||||
}
|
||||
{
|
||||
let format = t!("time-format");
|
||||
format!(" {}", calendar_time.time.format(format.as_str()))
|
||||
@@ -85,10 +91,12 @@ pub(crate) fn TaskListItem(task: TaskWithSubtasks) -> Element {
|
||||
}
|
||||
if !task.subtasks.is_empty() {
|
||||
div {
|
||||
class: "text-sm text-zinc-400",
|
||||
i {
|
||||
class: "fa-solid fa-list-check"
|
||||
},
|
||||
class: "flex flex-row items-center gap-1 text-sm text-gray-500",
|
||||
Icon {
|
||||
icon: FaListCheck,
|
||||
height: 14,
|
||||
width: 14
|
||||
}
|
||||
{format!(
|
||||
" {}/{}",
|
||||
task.subtasks.iter()
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
use dioxus::{
|
||||
CapturedError,
|
||||
fullstack::{Loader, Loading, WebSocketOptions, use_websocket},
|
||||
fullstack::{Loader, Loading, WebSocketOptions},
|
||||
prelude::*,
|
||||
};
|
||||
use serde::{Serialize, de::DeserializeOwned};
|
||||
@@ -13,6 +13,29 @@ use crate::{
|
||||
},
|
||||
};
|
||||
|
||||
fn use_on_document_become_visible(mut callback: impl FnMut() + 'static) {
|
||||
let callback = use_callback(move |_| callback());
|
||||
use_effect(move || {
|
||||
spawn(async move {
|
||||
let mut eval = document::eval(
|
||||
r#"
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
if (!document.hidden) {
|
||||
dioxus.send(0);
|
||||
}
|
||||
});
|
||||
"#,
|
||||
);
|
||||
loop {
|
||||
eval.recv::<u8>()
|
||||
.await
|
||||
.expect("The JS code returned a value not parsable to `u8`.");
|
||||
callback.call(());
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
#[allow(clippy::result_large_err)]
|
||||
fn sort_loader_result<T: Ord + Clone>(
|
||||
result: Result<Loader<Vec<T>>, Loading>,
|
||||
@@ -34,17 +57,37 @@ where
|
||||
E: Into<CapturedError> + 'static,
|
||||
{
|
||||
let mut refresh_tick = use_signal(|| 0u64);
|
||||
let mut websocket_reset_tick = use_signal(|| 0u64);
|
||||
|
||||
let loader = use_loader(move || {
|
||||
let _ = refresh_tick(); // Read => dependency.
|
||||
future()
|
||||
});
|
||||
|
||||
let mut socket = use_websocket(|| subscribe_to_updates(WebSocketOptions::default()));
|
||||
use_future(move || async move {
|
||||
while socket.recv().await.is_ok() {
|
||||
refresh_tick += 1;
|
||||
}
|
||||
use_effect(move || {
|
||||
let initial_websocket_reset_tick = websocket_reset_tick();
|
||||
spawn(async move {
|
||||
let Ok(socket) =
|
||||
subscribe_to_updates(WebSocketOptions::new().with_automatic_reconnect()).await
|
||||
else {
|
||||
return;
|
||||
};
|
||||
while socket.recv().await.is_ok() {
|
||||
if websocket_reset_tick() != initial_websocket_reset_tick {
|
||||
// A new WebSocket has been created (a new task spawned), cleaning this one up.
|
||||
break;
|
||||
}
|
||||
refresh_tick += 1;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/* So that when the device goes to sleep or suspends the app, the WebSocket gets recreated on
|
||||
waking up. It is important to do this only on becoming visible (document.hidden == false),
|
||||
because becoming hidden is the part when network may not work and thus cause errors. */
|
||||
use_on_document_become_visible(move || {
|
||||
websocket_reset_tick += 1;
|
||||
refresh_tick += 1;
|
||||
});
|
||||
|
||||
loader
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
use crate::components::bottom_panel::BottomPanel;
|
||||
use crate::components::form_open_button::FormOpenButton;
|
||||
use crate::components::sticky_bottom::StickyBottom;
|
||||
use crate::models::project::Project;
|
||||
use crate::models::task::Task;
|
||||
use crate::route::Route;
|
||||
use dioxus::core_macro::rsx;
|
||||
use dioxus::dioxus_core::Element;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub(crate) fn Main() -> Element {
|
||||
let mut display_form = use_signal(|| false);
|
||||
let project_being_edited =
|
||||
use_context_provider::<Signal<Option<Project>>>(|| Signal::new(None));
|
||||
let task_being_edited = use_context_provider::<Signal<Option<Task>>>(|| Signal::new(None));
|
||||
|
||||
use_effect(move || {
|
||||
display_form.set(project_being_edited().is_some() || task_being_edited().is_some());
|
||||
});
|
||||
|
||||
rsx! {
|
||||
SuspenseBoundary {
|
||||
fallback: |_| {
|
||||
rsx! {
|
||||
div {
|
||||
class: "grow flex flex-col justify-center items-center",
|
||||
div {
|
||||
i {
|
||||
class: "text-3xl fa-solid fa-cog fa-spin"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
Outlet::<Route> {}
|
||||
}
|
||||
StickyBottom {
|
||||
FormOpenButton {
|
||||
opened: display_form,
|
||||
}
|
||||
BottomPanel {
|
||||
display_form: display_form,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,2 +1,2 @@
|
||||
mod main;
|
||||
pub(crate) use main::Main;
|
||||
pub(crate) mod navigation;
|
||||
pub(crate) mod suspense;
|
||||
|
||||
38
src/layouts/navigation.rs
Normal file
38
src/layouts/navigation.rs
Normal file
@@ -0,0 +1,38 @@
|
||||
use crate::components::bottom_panel::BottomPanel;
|
||||
use crate::components::create_button::CreateButton;
|
||||
use crate::components::sticky_bottom::StickyBottom;
|
||||
use crate::components::task_form::LATEST_VISITED_CATEGORY;
|
||||
use crate::models::category::Category;
|
||||
use crate::route::Route;
|
||||
use dioxus::core_macro::rsx;
|
||||
use dioxus::dioxus_core::Element;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub(crate) fn Navigation() -> Element {
|
||||
let current_route = use_route();
|
||||
use_effect(use_reactive(¤t_route, move |current_route| {
|
||||
*LATEST_VISITED_CATEGORY.write() = match current_route {
|
||||
Route::CategorySomedayMaybePage => Category::SomedayMaybe,
|
||||
Route::CategoryWaitingForPage => Category::WaitingFor(String::new()),
|
||||
Route::CategoryNextStepsPage => Category::NextSteps,
|
||||
Route::CategoryCalendarPage | Route::CategoryTodayPage => Category::Calendar {
|
||||
date: chrono::Local::now().date_naive(),
|
||||
reoccurrence: None,
|
||||
time: None,
|
||||
},
|
||||
_ => Category::Inbox,
|
||||
};
|
||||
}));
|
||||
|
||||
rsx! {
|
||||
div {
|
||||
class: "grow flex flex-col pb-36",
|
||||
Outlet::<Route> {}
|
||||
}
|
||||
StickyBottom {
|
||||
CreateButton {},
|
||||
BottomPanel {}
|
||||
}
|
||||
}
|
||||
}
|
||||
28
src/layouts/suspense.rs
Normal file
28
src/layouts/suspense.rs
Normal file
@@ -0,0 +1,28 @@
|
||||
use crate::route::Route;
|
||||
use dioxus::core_macro::rsx;
|
||||
use dioxus::dioxus_core::Element;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_free_icons::Icon;
|
||||
use dioxus_free_icons::icons::fa_solid_icons::FaCog;
|
||||
|
||||
#[component]
|
||||
pub(crate) fn Suspense() -> Element {
|
||||
rsx! {
|
||||
SuspenseBoundary {
|
||||
fallback: |_| {
|
||||
rsx! {
|
||||
div {
|
||||
class: "grow flex flex-col justify-center items-center",
|
||||
Icon {
|
||||
class: "text-gray-500 animate-[spin_3000ms_linear_infinite]",
|
||||
icon: FaCog,
|
||||
height: 32,
|
||||
width: 32
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
Outlet::<Route> {}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,14 +2,15 @@ use crate::layouts;
|
||||
use crate::views::category_calendar_page::CategoryCalendarPage;
|
||||
use crate::views::category_done_page::CategoryDonePage;
|
||||
use crate::views::category_inbox_page::CategoryInboxPage;
|
||||
use crate::views::category_long_term_page::CategoryLongTermPage;
|
||||
use crate::views::category_next_steps_page::CategoryNextStepsPage;
|
||||
use crate::views::category_someday_maybe_page::CategorySomedayMaybePage;
|
||||
use crate::views::category_today_page::CategoryTodayPage;
|
||||
use crate::views::category_trash_page::CategoryTrashPage;
|
||||
use crate::views::category_waiting_for_page::CategoryWaitingForPage;
|
||||
use crate::views::not_found_page::NotFoundPage;
|
||||
use crate::views::project_form_page::ProjectFormPage;
|
||||
use crate::views::projects_page::ProjectsPage;
|
||||
use crate::views::task_form_page::TaskFormPage;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
// All variants have the same postfix because they have to match the component names.
|
||||
@@ -17,28 +18,33 @@ use dioxus::prelude::*;
|
||||
#[derive(Clone, Routable, Debug, PartialEq)]
|
||||
#[rustfmt::skip]
|
||||
pub(crate) enum Route {
|
||||
#[layout(layouts::Main)]
|
||||
#[redirect("/", || Route::CategoryTodayPage {})]
|
||||
#[route("/today")]
|
||||
CategoryTodayPage,
|
||||
#[route("/inbox")]
|
||||
CategoryInboxPage,
|
||||
#[route("/someday-maybe")]
|
||||
CategorySomedayMaybePage,
|
||||
#[route("/waiting-for")]
|
||||
CategoryWaitingForPage,
|
||||
#[route("/next-steps")]
|
||||
CategoryNextStepsPage,
|
||||
#[route("/calendar")]
|
||||
CategoryCalendarPage,
|
||||
#[route("/long-term")]
|
||||
CategoryLongTermPage,
|
||||
#[route("/done")]
|
||||
CategoryDonePage,
|
||||
#[route("/trash")]
|
||||
CategoryTrashPage,
|
||||
#[route("/projects")]
|
||||
ProjectsPage,
|
||||
#[layout(layouts::navigation::Navigation)]
|
||||
#[layout(layouts::suspense::Suspense)]
|
||||
#[route("/today")]
|
||||
CategoryTodayPage,
|
||||
#[route("/inbox")]
|
||||
CategoryInboxPage,
|
||||
#[route("/someday-maybe")]
|
||||
CategorySomedayMaybePage,
|
||||
#[route("/waiting-for")]
|
||||
CategoryWaitingForPage,
|
||||
#[route("/next-steps")]
|
||||
CategoryNextStepsPage,
|
||||
#[route("/calendar")]
|
||||
CategoryCalendarPage,
|
||||
#[route("/done")]
|
||||
CategoryDonePage,
|
||||
#[route("/trash")]
|
||||
CategoryTrashPage,
|
||||
#[route("/projects")]
|
||||
ProjectsPage,
|
||||
#[end_layout]
|
||||
#[end_layout]
|
||||
#[layout(layouts::suspense::Suspense)]
|
||||
#[route("/task")]
|
||||
TaskFormPage,
|
||||
#[route("/project")]
|
||||
ProjectFormPage,
|
||||
#[end_layout]
|
||||
#[redirect("/", || Route::CategoryTodayPage)]
|
||||
#[route("/:..route")]
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
use crate::components::error_boundary_message::ErrorBoundaryMessage;
|
||||
use crate::models::category::Category;
|
||||
use crate::views::category_page::CategoryPage;
|
||||
use dioxus::core_macro::rsx;
|
||||
use dioxus::dioxus_core::Element;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub(crate) fn CategoryLongTermPage() -> Element {
|
||||
rsx! {
|
||||
ErrorBoundaryMessage {
|
||||
CategoryPage {
|
||||
category: Category::LongTerm,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -11,8 +11,7 @@ pub(crate) fn CategoryPage(category: Category) -> Element {
|
||||
|
||||
rsx! {
|
||||
TaskList {
|
||||
tasks: tasks.clone(),
|
||||
class: "pb-36"
|
||||
tasks: tasks.clone()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
pub(crate) mod category_calendar_page;
|
||||
pub(crate) mod category_done_page;
|
||||
pub(crate) mod category_inbox_page;
|
||||
pub(crate) mod category_long_term_page;
|
||||
pub(crate) mod category_next_steps_page;
|
||||
pub(crate) mod category_page;
|
||||
pub(crate) mod category_someday_maybe_page;
|
||||
@@ -9,4 +8,6 @@ pub(crate) mod category_today_page;
|
||||
pub(crate) mod category_trash_page;
|
||||
pub(crate) mod category_waiting_for_page;
|
||||
pub(crate) mod not_found_page;
|
||||
pub(crate) mod project_form_page;
|
||||
pub(crate) mod projects_page;
|
||||
pub(crate) mod task_form_page;
|
||||
|
||||
12
src/views/project_form_page.rs
Normal file
12
src/views/project_form_page.rs
Normal file
@@ -0,0 +1,12 @@
|
||||
use crate::components::{error_boundary_message::ErrorBoundaryMessage, project_form::ProjectForm};
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub(crate) fn ProjectFormPage() -> Element {
|
||||
rsx! {
|
||||
ErrorBoundaryMessage {
|
||||
class: "grow py-4 flex flex-col gap-12",
|
||||
ProjectForm {}
|
||||
}
|
||||
}
|
||||
}
|
||||
12
src/views/task_form_page.rs
Normal file
12
src/views/task_form_page.rs
Normal file
@@ -0,0 +1,12 @@
|
||||
use crate::components::{error_boundary_message::ErrorBoundaryMessage, task_form::TaskForm};
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub(crate) fn TaskFormPage() -> Element {
|
||||
rsx! {
|
||||
ErrorBoundaryMessage {
|
||||
class: "grow py-4 flex flex-col gap-12",
|
||||
TaskForm {}
|
||||
}
|
||||
}
|
||||
}
|
||||
25
tailwind.css
25
tailwind.css
@@ -1,2 +1,27 @@
|
||||
/* stylelint-disable-next-line import-notation */
|
||||
@import "tailwindcss";
|
||||
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url("/assets/fonts/inter_variable.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
font-style: italic;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url("/assets/fonts/inter_variable_italic.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line */
|
||||
@theme {
|
||||
--font-sans: "Inter", "sans";
|
||||
--color-amber-300-muted: #b89a2e;
|
||||
--color-amber-700-muted: #80390b;
|
||||
--color-gray-800-muted: #141d2d;
|
||||
--color-gray-900-muted: #0b111f;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user