add new link modal

src/routes/link.rs

@@ -26,58 +26,25 @@ pub async fn add_value(name: String, link: String, icon: String) -> Result<(), S
 
 #[component]
 pub fn Links() -> impl IntoView {
-    let (show, set_show) = create_signal(false);
+    let (show_form, set_show_form) = create_signal(false);
+    let (edit_link, set_edit_link) = create_signal::<Option<crate::models::Link>>(None);
     let (edit, set_edit) = create_signal(false);
 
     let link_action = create_server_action::<LinkAction>();
+    let update_action = create_server_action::<UpdateLinkAction>();
+
     let result = link_action.version();
-    let reset_form = create_rw_signal("");
+    let update_result = update_action.version();
+
     let links = create_resource(
-        move || (result.get()),
+        move || (result.get(), update_result.get()),
         move |_| async move {
-            reset_form.set("");
+            set_show_form.set(false);
-            set_show.set(false);
+            set_edit_link.set(None);
             get_links().await
         },
     );
 
-    let form = move || {
-        show.get().then(|| {
-            view! { <div class="my-0 mx-auto w-72 p-6 bg-prim-light rounded-lg">
-                <h2 class="pb-6 text-2xl text-center">"Ajout d'un lien"</h2>
-                <ActionForm action=link_action>
-                <div>
-                    <label class="block mt-3 mb-1">"Nom"</label>
-                    <input type="text"
-                           name="name"
-                           prop:value=move || reset_form.get()
-                           class="text-center bg-prim border border-transparent rounded-lg focus:border-third px-2 py-2 w-60" />
-                </div>
-
-                <div>
-                    <label class="block mt-3 mb-1">"Lien"</label>
-                    <input type="url"
-                           name="link"
-                           prop:value=move || reset_form.get()
-                           class="text-center bg-prim border border-transparent rounded-lg focus:border-third px-2 py-2 w-60" />
-                </div>
-
-                <div>
-                    <label class="block mt-3 mb-1">"Icône"</label>
-                    <input type="url"
-                           name="icon"
-                           placeholder="http..."
-                           prop:value=move || reset_form.get()
-                           class="text-center bg-prim border border-transparent rounded-lg focus:border-third px-2 py-2 w-60" />
-                </div>
-                <div>
-                    <button type="submit" class="bg-third hover:bg-third-light rounded-lg transition-colors px-2 py-1 w-60 my-5">"Valider"</button>
-                </div>
-            </ActionForm>
-            </div> }
-        })
-    };
-
     view! {
         <Title text="Liens"/>
         <ul class="flex gap-5 m-5 flex-wrap justify-center">
@@ -92,7 +59,7 @@ pub fn Links() -> impl IntoView {
                                 children=move |(_, link)| {
                                     let link = create_rw_signal(link);
                                     view!{
-                                        <Link link edit links />
+                                        <Link link edit set_edit_link set_show_form links />
                                     }
                                 }/>
                         }
@@ -103,12 +70,22 @@ pub fn Links() -> impl IntoView {
 
         <div class="flex justify-end gap-5 mx-5">
             <button on:click=move |_| {set_edit.set(!edit.get())} class="bg-prim-light hover:bg-prim-lightest rounded-full px-5 py-3 text-second-dark hover:text-third transition-colors">"Modifier"</button>
-            <button on:click=move |_| {set_show.set(true)} class="bg-prim-light hover:bg-prim-lightest rounded-full px-5 py-3 text-second-dark hover:text-third transition-colors">"Ajouter un lien +"</button>
+            <button on:click=move |_| {
+                set_edit_link.set(None);
+                set_show_form.set(true);
+            } class="bg-prim-light hover:bg-prim-lightest rounded-full px-5 py-3 text-second-dark hover:text-third transition-colors">"Ajouter un lien +"</button>
         </div>
 
-        <div class="flex justify-center m-5">
+        {move || {
-            {form}
+            show_form.get().then(|| {
-        </div>
+                view! { <LinkFormModal
+                    link=edit_link.get()
+                    set_show=set_show_form
+                    add_action=link_action
+                    update_action=update_action
+                /> }
+            })
+        }}
     }
 }
 
@@ -128,10 +105,10 @@ pub async fn change_position(link_id: String, direction: String) -> Result<(), S
 fn Link<T: 'static + Clone, S: 'static>(
     link: RwSignal<crate::models::Link>,
     edit: ReadSignal<bool>,
+    set_edit_link: WriteSignal<Option<crate::models::Link>>,
+    set_show_form: WriteSignal<bool>,
     links: Resource<T, S>,
 ) -> impl IntoView {
-    let (show_edit, set_show_edit) = create_signal(false);
-
     view! {
         <li class="mx-auto w-44 lg:w-60">
             <a class="bg-prim-light w-full hover:bg-prim-lightest border-b hover:border-third border-transparent text-xl rounded-lg text-center hover:text-third transition-colors px-5 py-4 inline-block"
@@ -150,18 +127,16 @@ fn Link<T: 'static + Clone, S: 'static>(
                     view! { <div class="bg-third border border-transparent rounded-b-lg flex justify-between">
                         <MoveButton id=link.with(|x| x.id.to_string()) value="prev".to_string() label="<".to_string() links=links />
                         <button class="block px-2 py-1 flex-1 hover:bg-third-light"
-                            on:click=move |_| {set_show_edit.set(true)}
+                            on:click=move |_| {
+                                set_edit_link.set(Some(link.get()));
+                                set_show_form.set(true);
+                            }
                             >"Editer"</button>
                         <DeleteButton  id=link.with(|x| x.id.to_string()) links=links />
                         <MoveButton id=link.with(|x| x.id.to_string()) value="next".to_string() label=">".to_string() links=links />
                     </div> }
                 })
             }}
-            {move || {
-                show_edit.get().then(|| {
-                    view! { <EditLinkForm link=link set_show=set_show_edit links=links /> }
-                })
-            }}
         </li>
     }
 }
@@ -235,31 +210,70 @@ pub async fn update_link(id: String, name: String, link: String, icon: String) -
 }
 
 #[component]
-fn EditLinkForm<T: 'static + Clone, S: 'static>(
+fn LinkFormModal(
-    link: RwSignal<crate::models::Link>,
+    link: Option<crate::models::Link>,
     set_show: WriteSignal<bool>,
-    links: Resource<T, S>,
+    add_action: Action<LinkAction, Result<(), ServerFnError>>,
+    update_action: Action<UpdateLinkAction, Result<(), ServerFnError>>,
 ) -> impl IntoView {
-    let update_action = create_server_action::<UpdateLinkAction>();
+    let is_edit = link.is_some();
-
+    let (name, set_name) = create_signal(link.as_ref().map(|x| x.name.clone()).unwrap_or_default());
-    let (name, set_name) = create_signal(link.with(|x| x.name.clone()));
+    let (link_url, set_link_url) = create_signal(link.as_ref().map(|x| x.link.clone()).unwrap_or_default());
-    let (link_url, set_link_url) = create_signal(link.with(|x| x.link.clone()));
+    let (icon, set_icon) = create_signal(link.as_ref().map(|x| x.icon.clone()).unwrap_or_default());
-    let (icon, set_icon) = create_signal(link.with(|x| x.icon.clone()));
+    let link_id = link.as_ref().map(|x| x.id.to_string());
-
-    create_effect(move |_| {
-        if update_action.value().get().is_some() {
-            links.refetch();
-            set_show.set(false);
-        }
-    });
 
     view! {
         <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
             <div class="bg-prim-light p-6 rounded-lg w-96">
-                <h2 class="pb-6 text-2xl text-center">"Édition du lien"</h2>
+                <h2 class="pb-6 text-2xl text-center">
-                <ActionForm action=update_action>
+                    {if is_edit { "Édition du lien" } else { "Ajout d'un lien" }}
-                    <input name="id" type="hidden" value={move || link.with(|x| x.id.to_string())} />
+                </h2>
 
+                {if is_edit {
+                    view! {
+                        <ActionForm action=update_action>
+                            <input name="id" type="hidden" value={link_id.unwrap_or_default()} />
+                            <LinkFormFields
+                                name=name
+                                set_name=set_name
+                                link_url=link_url
+                                set_link_url=set_link_url
+                                icon=icon
+                                set_icon=set_icon
+                            />
+                            <FormButtons set_show=set_show />
+                        </ActionForm>
+                    }.into_view()
+                } else {
+                    view! {
+                        <ActionForm action=add_action>
+                            <LinkFormFields
+                                name=name
+                                set_name=set_name
+                                link_url=link_url
+                                set_link_url=set_link_url
+                                icon=icon
+                                set_icon=set_icon
+                            />
+                            <FormButtons set_show=set_show />
+                        </ActionForm>
+                    }.into_view()
+                }}
+            </div>
+        </div>
+    }
+}
+
+#[component]
+fn LinkFormFields(
+    name: ReadSignal<String>,
+    set_name: WriteSignal<String>,
+    link_url: ReadSignal<String>,
+    set_link_url: WriteSignal<String>,
+    icon: ReadSignal<String>,
+    set_icon: WriteSignal<String>,
+) -> impl IntoView {
+    view! {
         <div>
             <label class="block mt-3 mb-1">"Nom"</label>
             <input type="text"
@@ -282,11 +296,17 @@ fn EditLinkForm<T: 'static + Clone, S: 'static>(
             <label class="block mt-3 mb-1">"Icône"</label>
             <input type="url"
                    name="icon"
+                   placeholder="http..."
                    prop:value=move || icon.get()
                    on:input=move |ev| set_icon.set(event_target_value(&ev))
                    class="text-center bg-prim border border-transparent rounded-lg focus:border-third px-2 py-2 w-full" />
         </div>
+    }
+}
 
+#[component]
+fn FormButtons(set_show: WriteSignal<bool>) -> impl IntoView {
+    view! {
         <div class="flex gap-2 mt-5">
             <button type="button"
                     on:click=move |_| set_show.set(false)
@@ -294,8 +314,5 @@ fn EditLinkForm<T: 'static + Clone, S: 'static>(
             <button type="submit"
                     class="bg-third hover:bg-third-light rounded-lg transition-colors px-2 py-1 flex-1">"Valider"</button>
         </div>
-                </ActionForm>
-            </div>
-        </div>
     }
 }