Merge pull request #30 from sertschgi/dev

Fixed new and edit with formify

Author: sertschgi

packages/frontend/assets/style/entry.css

@@ -44,6 +44,11 @@ section {
   flex-grow: 1;
 }
 
+.Page {
+  justify-content: center;
+  align-items: center;
+}
+
 #main,
 main {
   display: flex;
@@ -206,20 +211,23 @@ input[type="range"]::-webkit-slider-thumb:focus {
 }
 
 .FormifyForm {
-  flex-grow: 1;
+  margin: auto;
+  align-items: end;
+  width: 100%;
+  max-width: 50rem;
+  max-height: 80%;
+  box-sizing: border-box;
+  gap: 1rem;
 }
 
 .FormifyInputs {
-  width: 80%;
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
 
 .FormifyButton {
-  margin: auto;
-  height: 8rem;
-  width: 8rem;
   border-radius: 5rem;
 }
 
@@ -228,7 +236,6 @@ input[type="range"]::-webkit-slider-thumb:focus {
   box-sizing: border-box;
   align-items: center;
   gap: 1rem;
-  padding: 0.5rem;
 }
 
 .FormifyText {

packages/frontend/assets/style/pages/edit.css

@@ -1,6 +1,3 @@
-.New {
-  display: flex;
-}
 /**/
 /* .New .LabeledBox { */
 /*   width: 100%; */

packages/frontend/assets/style/pages/new.css

@@ -15,7 +15,7 @@ pub fn Project(name: String, date: DateTime<Utc>, desc: String) -> Element {
             div { class: "divider" }
             section { class: "actions",
                 Link { to: Route::ProjectNav {}, class: "open", FolderOpenIcon {} }
-                Link { to: Route::Editor {}, class: "edit", SettingsIcon {} }
+                Link { to: Route::Edit {}, class: "edit", SettingsIcon {} }
                 Link { to: Route::Editor {}, class: "delete", TrashIcon {} }
             }
         }

packages/frontend/src/modules/components/project.rs

@@ -1,6 +1,7 @@
 // %%% pages.rs %%%
 
 // %% exports %%
+pub mod edit;
 pub mod editor;
 pub mod new;
 pub mod project_nav;
@@ -10,6 +11,7 @@ pub mod start;
 
 // %% prelude %%
 pub mod prelude {
+    pub use super::edit::Edit;
     pub use super::editor::Editor;
     pub use super::new::New;
     pub use super::project_nav::ProjectNav;

packages/frontend/src/modules/pages.rs

@@ -0,0 +1,37 @@
+use super::utils::*;
+
+#[derive(Formifiable)]
+pub struct Project {
+    pub name: String,
+    pub description: String,
+}
+
+#[page]
+pub fn Edit() -> Element {
+    let mut proj = Project {
+        name: "".into(),
+        description: "".into(),
+    };
+    rsx! {
+        main {
+            {proj.rsx_edit_form(|e| { debug!("editing {:?}", e) })}
+                // form {
+        //     LabeledBox {
+        //         name: "name",
+        //         kind: "text",
+        //         required: true,
+        //         placeholder: "SampleProject",
+        //     }
+        //     LabeledBox {
+        //         name: "description",
+        //         kind: "text",
+        //         required: false,
+        //         placeholder: "this is a description",
+        //     }
+        //     section { class: "button-wrapper",
+        //         button { r#type: "submit", NewIcon {} }
+        //     }
+        // }
+        }
+    }
+}

packages/frontend/src/modules/pages/edit.rs

@@ -14,7 +14,7 @@ const CREATE_VIEWPORT: &str = r#"
 //     -> convert to Node of backend (serde json)
 //     -> add something like simple_ai_backend :: onnx :: Project . save_nodes(Vec<Nodes>)
 #[page]
-pub fn Editor() -> Element {
+pub fn Editor(children: Element) -> Element {
     rsx! {
         main {
             onmounted: move |e| async move {

packages/frontend/src/modules/pages/editor.rs

@@ -14,7 +14,7 @@ pub fn New() -> Element {
     };
     rsx! {
         main {
-            {proj.rsx_form()}
+            {proj.rsx_creation_form(|e| { debug!("creating {:?}", e) })}
                 // form {
         //     LabeledBox {
         //         name: "name",

packages/frontend/src/modules/pages/new.rs

@@ -11,17 +11,20 @@ pub mod core {
         #[layout(TopNavLayout)]
             #[route("/")]
             Start {},
-            #[nest("/editor")]
-                #[route("/")]
-                Editor {},
             #[end_nest]
-            #[layout(HeadingLayout)]
                 #[nest("/projects")]
+                    #[layout(HeadingLayout)]
                     #[route("/")]
                     Projects {},
                     #[route("/projects_nav")]
                     ProjectNav {},
+                    #[route("/edit")]
+                    Edit {},
+                    #[end_layout]
+                    #[route("/editor")]
+                    Editor {},
                 #[end_nest]
+                #[layout(HeadingLayout)]
                 #[nest("/new")]
                     #[route("/")]
                     New {},

packages/frontend/src/modules/router.rs

@@ -27,24 +27,52 @@ pub fn macro_impl(item: TokenStream) -> TokenStream {
         .to_tokens(&mut inputs);
     }
     quote! {
-            use dioxus::prelude::*;
-            impl #struct_ident {
-                pub fn rsx_form(&mut self) -> Element {
-                    rsx! {
-                        form {
-                             class: "FormifyForm",
+        simple_ai_macros::icon! {
+            formify_creation: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.0001 10.9999L22.0002 10.9997L22.0002 12.9997L13.0001 12.9999L13.0001 21.9998L11.0001 21.9998L11.0001 12.9999L2.00004 13.0001L2 11.0001L11.0001 10.9999L11 2.00025L13 2.00024L13.0001 10.9999Z"></path></svg>,
+            formify_edit: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.7279 9.57627L14.3137 8.16206L5 17.4758V18.89H6.41421L15.7279 9.57627ZM17.1421 8.16206L18.5563 6.74785L17.1421 5.33363L15.7279 6.74785L17.1421 8.16206ZM7.24264 20.89H3V16.6473L16.435 3.21231C16.8256 2.82179 17.4587 2.82179 17.8492 3.21231L20.6777 6.04074C21.0682 6.43126 21.0682 7.06443 20.6777 7.45495L7.24264 20.89Z"></path></svg>
+        }
+        use dioxus::prelude::*;
+        impl #struct_ident {
+            pub fn rsx_creation_form(&mut self, oncreate: fn(dioxus::html::events::FormEvent)) -> Element {
+                rsx! {
+                    form {
+                        class: "FormifyForm FormifyCreation",
+                        onsubmit: oncreate,
+
+                        div {
+                            class: "FormifyInputs",
+                            #inputs
+                        }
+
+                        button {
+                            class: "FormifyButton",
+                            r#type: "submit",
+                            FormifyCreationIcon {}
+                        }
+                    }
+                }
+            }
+
+            pub fn rsx_edit_form(&mut self, onedit: fn(dioxus::html::events::FormEvent)) -> Element {
+                rsx! {
+                    form {
+                        class: "FormifyForm FormifyEdit",
+                        onsubmit: onedit,
 
-                            div {
-    class: "FormifyInputs",
-                             #inputs
+                        div {
+                            class: "FormifyInputs",
+                            #inputs
                         }
-                            button {
-                                class: "FormifyButton",
-                                "confirm"
-                            }
+
+                        button {
+                            class: "FormifyButton",
+                            r#type: "submit",
+                            FormifyEditIcon {}
                         }
                     }
                 }
+
             }
         }
+    }
 }