v0.10-frontend-intermediate2

frontend/src/main.rs

@@ -32,6 +32,12 @@ pub struct BookUI {
     isbn: Option<Vec<String>>,
 }
 
+#[derive(Prop, Debug)]
+pub struct BookUIProp {
+    bookitem: BookUI,
+}
+
+
 #[derive(Debug, Default, Clone)]
 pub struct AppState {
     pub books: RcSignal<Vec<BookUI>>,
@@ -121,8 +127,6 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
             )
                  button(on:click=click_listall) { "List All DB" }
                   button(on:click=click_addbook) { "+ Add New" }
- 
-
         }
     }
 }
@@ -153,10 +157,9 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
                 ul {
             Keyed(
              iterable=docs,
-             view=move |cx, x| view! { cx,
+             view=|cx, x| view! { cx,
-                 li { (format!("{:?}",x))
+                BookDB(bookitem=x)
-                 }
+             },
-              },
               key =|x| x.id )
               }
              }
@@ -168,6 +171,22 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
     }
 }
 
+#[component(inline_props)]
+pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
+    let book = bookitem.bookitem.clone();
+    let handle_delete = move |_| {
+        spawn_local(async move {
+            delete_book(book.id).await.unwrap();
+        });
+    };
+ 
+    view! { cx,
+    li{
+    (format!("{:?}",book))
+        button(class="delete", on:click=handle_delete){ "-" }
+    }
+    }
+}
 
 #[component]
 async fn ListOL<G: Html>(cx: Scope<'_>) -> View<G> {
@@ -198,9 +217,9 @@ async fn ListOL<G: Html>(cx: Scope<'_>) -> View<G> {
             Keyed(
              iterable=docs,
              view=move |cx, x| view! { cx,
-                 li { (format!("{:?}",x))
+                 BookOL(bookitem=x)
-                 }
+             
-              },
+             },
               key =|x| x.id )
               }
              }
@@ -212,13 +231,127 @@ async fn ListOL<G: Html>(cx: Scope<'_>) -> View<G> {
     }
 }
 
+#[component(inline_props)]
+pub fn BookOL<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
+    let book = bookitem.bookitem.clone();
+    let bookdisp=book.clone();
+    let app_state = use_context::<AppState>(cx);
+    let handle_add = move |_| {
+        app_state.adding.set(true);
+        app_state.addingbook.set(book.clone());
+    };
+ 
+    view! { cx,
+    li{
+    (format!("{:?}",bookdisp))
+        button(class="add", on:click=handle_add){ "+" }
+    }
+    }
+}
+
+
 #[component]
 async fn AddingUI<G: Html>(cx: Scope<'_>) -> View<G> {
     let app_state = use_context::<AppState>(cx);
-    view! {cx,
+
+let inp_title = create_signal(cx, String::new());
+let inp_olkey = create_signal(cx, String::new());
+let inp_editioncount = create_signal(cx, String::new());
+let inp_publishyear = create_signal(cx, String::new());
+let inp_medianpage = create_signal(cx, String::new());
+let inp_goodread = create_signal(cx, String::new());
+let inp_desc = create_signal(cx, String::new());
+let inp_cover = create_signal(cx, String::new());
+let inp_location = create_signal(cx, String::new());
+let inp_rating = create_signal(cx, String::new());
+let inp_comments = create_signal(cx, String::new());
+let inp_author = create_signal(cx, String::new());
+let inp_person = create_signal(cx, String::new());
+let inp_place = create_signal(cx, String::new());
+let inp_subject = create_signal(cx, String::new());
+let inp_time = create_signal(cx, String::new());
+let inp_isbn = create_signal(cx, String::new());
+
+let addingbook = app_state.addingbook.get().clone();
+let pl_title = addingbook.title;
+let pl_olkey = addingbook.open_library_key.unwrap_or("".to_string());
+let pl_edition = addingbook.edition_count.unwrap_or(0).to_string();
+let pl_publishyear = addingbook.first_publish_year.unwrap_or(0).to_string();
+let pl_medianpage = addingbook.median_page_count.unwrap_or(0).to_string();
+let pl_goodread = addingbook.goodread_id.unwrap_or("".to_string());
+let pl_desc = addingbook.description.unwrap_or("".to_string());
+let pl_cover = addingbook.cover.unwrap_or("".to_string());
+let pl_location = addingbook.location.unwrap_or("".to_string());
+let pl_rating = addingbook.rating.unwrap_or(0).to_string();
+let pl_comment = addingbook.comments.unwrap_or("".to_string());
+let pl_author = addingbook.author_name.unwrap_or(vec!["".to_string()]).join(", ");
+let pl_person = addingbook.person.unwrap_or(vec!["".to_string()]).join(", ");
+let pl_place = addingbook.place.unwrap_or(vec!["".to_string()]).join(", ");
+let pl_subject = addingbook.subject.unwrap_or(vec!["".to_string()]).join(", ");
+let pl_time = addingbook.time.unwrap_or(vec!["".to_string()]).join(", ");
+let pl_isbn = addingbook.isbn.unwrap_or(vec!["".to_string()]).join(", ");
+
+   let handle_add = |_| {
+            let authors: Vec<String> =  *inp_author.get().split(",").map(|x| x.trim().to_string()).collect::<Vec<String>>();
+       let persons: Vec<String> =  *inp_person.get().split(",").map(str::to_string).collect::<Vec<String>>();
+       let places: Vec<String> =  *inp_place.get().split(",").map(|x| x.to_string()).collect::<Vec<String>>();
+       let subjects: Vec<String> =  *inp_subject.get().split(",").map(|x| x.to_string()).collect::<Vec<String>>();
+       let times: Vec<String> =  *inp_time.get().split(",").map(|x| x.to_string()).collect::<Vec<String>>();
+       let isbns: Vec<String> =  *inp_isbn.get().split(",").map(|x| x.to_string()).collect::<Vec<String>>();
+ let record : BookUI = BookUI{
+     id: 1,
+    title: *inp_title.get(),
+    open_library_key: Some(*inp_olkey.get()),
+    edition_count: Some(inp_editioncount.get().parse::<i32>().unwrap()),
+    first_publish_year: Some(inp_publishyear.get().parse::<i32>().unwrap()),
+    median_page_count: Some(inp_medianpage.get().parse::<i32>().unwrap()), 
+    goodread_id: Some(*inp_goodread.get()),
+    description: Some(*inp_desc.get().clone()),
+    cover: Some(*inp_cover.get().clone()),
+    location: Some(*inp_location.get().clone()),
+    time_added: Some("NA".to_string()),
+    rating: Some(inp_rating.get().parse::<i32>().unwrap()), 
+    comments: Some(*inp_comments.get().clone()),
+    author_name: Some(authors),
+    person: Some(persons),
+    place: Some(places), 
+    subject: Some(subjects),
+    time: Some(times),
+    isbn: Some(isbns),
+ };
+        spawn_local(async move {
+            add_book(record).await.unwrap();
+        });
+ 
+
+ app_state.adding.set(false);
+        app_state.addingbook.set(BookUI::default());
+    };
+ 
+ view! {cx,
         p {
 (if *app_state.adding.get() == true {
-                view!{ cx,"Hello" }
+                view!{ cx,
+                "Hello"
+                        input(bind:value=inp_title, placeholder=pl_title)
+                        input(bind:value=inp_olkey, placeholder=pl_olkey)
+                        input(bind:value=inp_editioncount, placeholder=pl_edition)
+                        input(bind:value=inp_publishyear, placeholder=pl_publishyear)
+                        input(bind:value=inp_medianpage, placeholder=pl_medianpage)
+                        input(bind:value=inp_goodread, placeholder=pl_goodread)
+                        input(bind:value=inp_desc, placeholder=pl_desc)
+                        input(bind:value=inp_cover, placeholder=pl_cover)
+                        input(bind:value=inp_location, placeholder=pl_location)
+                        input(bind:value=inp_rating, placeholder=pl_rating)
+                        input(bind:value=inp_comments, placeholder=pl_comment)
+                        input(bind:value=inp_author, placeholder=pl_author)
+                        input(bind:value=inp_person, placeholder=pl_person)
+                        input(bind:value=inp_place, placeholder=pl_place)
+                        input(bind:value=inp_subject, placeholder=pl_subject)
+                        input(bind:value=inp_time, placeholder=pl_time)
+                        input(bind:value=inp_isbn, placeholder=pl_isbn)
+         button(class="add", on:click=handle_add){ "Add book to DB" }
+        }
             } else {
                 view!{cx,""}
             }