mirror of
https://github.com/leptos-rs/leptos
synced 2024-11-10 14:54:16 +00:00
finish todo_app_sqlite_axum
This commit is contained in:
parent
52da0e43ac
commit
0c9167fd30
3 changed files with 31 additions and 8 deletions
Binary file not shown.
|
@ -58,12 +58,12 @@ async fn main() {
|
||||||
use leptos::prelude::*;
|
use leptos::prelude::*;
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
//<AutoReload options=app_state.leptos_options.clone() />
|
// <AutoReload options=app_state.leptos_options.clone() />
|
||||||
<HydrationScripts options=leptos_options.clone()/>
|
<HydrationScripts options=leptos_options.clone()/>
|
||||||
<link rel="stylesheet" id="leptos" href="/pkg/benwis_leptos.css"/>
|
<link rel="stylesheet" id="leptos" href="/pkg/benwis_leptos.css"/>
|
||||||
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
|
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
|
||||||
|
|
|
@ -1,9 +1,11 @@
|
||||||
use crate::error_template::ErrorTemplate;
|
use crate::error_template::ErrorTemplate;
|
||||||
use leptos::context::use_context;
|
use leptos::context::use_context;
|
||||||
use leptos::server::{Resource, ServerAction};
|
use leptos::reactive_graph::effect::Effect;
|
||||||
|
use leptos::server::{Resource, ServerAction, ServerMultiAction};
|
||||||
use leptos::tachys::either::Either;
|
use leptos::tachys::either::Either;
|
||||||
use leptos::{
|
use leptos::{
|
||||||
component, server, suspend, view, ActionForm, ErrorBoundary, IntoView,
|
component, server, suspend, view, ActionForm, ErrorBoundary, IntoView,
|
||||||
|
MultiActionForm,
|
||||||
};
|
};
|
||||||
use leptos::{prelude::*, Suspense, Transition};
|
use leptos::{prelude::*, Suspense, Transition};
|
||||||
use serde::{Deserialize, Serialize};
|
use serde::{Deserialize, Serialize};
|
||||||
|
@ -106,19 +108,27 @@ pub fn TodoApp() -> impl IntoView {
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn Todos() -> impl IntoView {
|
pub fn Todos() -> impl IntoView {
|
||||||
let add_todo = create_server_multi_action::<AddTodo>();
|
let add_todo = ServerMultiAction::<AddTodo>::new();
|
||||||
let delete_todo = ServerAction::<DeleteTodo>::new();
|
|
||||||
let submissions = add_todo.submissions();
|
let submissions = add_todo.submissions();
|
||||||
let delete_todo = ServerAction::<DeleteTodo>::new();
|
let delete_todo = ServerAction::<DeleteTodo>::new();
|
||||||
//let submissions = add_todo.submissions();
|
|
||||||
|
|
||||||
// list of todos is loaded from the server in reaction to changes
|
// list of todos is loaded from the server in reaction to changes
|
||||||
let todos = Resource::new_serde(
|
let todos = Resource::new_serde(
|
||||||
move || (delete_todo.version().get()), //(add_todo.version().get(), delete_todo.version().get()),
|
move || {
|
||||||
|
(
|
||||||
|
delete_todo.version().get(),
|
||||||
|
add_todo.version().get(),
|
||||||
|
delete_todo.version().get(),
|
||||||
|
)
|
||||||
|
},
|
||||||
move |_| get_todos(),
|
move |_| get_todos(),
|
||||||
);
|
);
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
|
<MultiActionForm action=add_todo>
|
||||||
|
<label>"Add a Todo" <input type="text" name="title"/></label>
|
||||||
|
<input type="submit" value="Add"/>
|
||||||
|
</MultiActionForm>
|
||||||
<div>
|
<div>
|
||||||
<Transition fallback=move || view! { <p>"Loading..."</p> }>
|
<Transition fallback=move || view! { <p>"Loading..."</p> }>
|
||||||
<ErrorBoundary fallback=|errors| view! { <ErrorTemplate errors/> }>
|
<ErrorBoundary fallback=|errors| view! { <ErrorTemplate errors/> }>
|
||||||
|
@ -152,8 +162,21 @@ pub fn Todos() -> impl IntoView {
|
||||||
}
|
}
|
||||||
.wait()
|
.wait()
|
||||||
}}
|
}}
|
||||||
|
{move || {
|
||||||
|
submissions
|
||||||
|
.get()
|
||||||
|
.into_iter()
|
||||||
|
.filter(|submission| submission.pending().get())
|
||||||
|
.map(|submission| {
|
||||||
|
view! {
|
||||||
|
<li class="pending">
|
||||||
|
{move || submission.input().get().map(|data| data.title)}
|
||||||
|
</li>
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.collect::<Vec<_>>()
|
||||||
|
}}
|
||||||
|
|
||||||
// {pending_todos}
|
|
||||||
</ul>
|
</ul>
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
</Transition>
|
</Transition>
|
||||||
|
|
Loading…
Reference in a new issue