Romain/rust_leptos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add new link modal

Browse Source
This commit is contained in:
Romulus21
2025-10-08 14:31:55 +02:00
parent 3bf77add88
commit 64e0168443
1 changed files with 125 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
src/routes/link.rs
View File

@@ -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.set(false);
set_show_form.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">
{form}
</div>
{move || {
show_form.get().then(|| {
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,67 +210,109 @@ pub async fn update_link(id: String, name: String, link: String, icon: String) -
}
#[component]
fn EditLinkForm<T: 'static + Clone, S: 'static>(
link: RwSignal<crate::models::Link>,
fn LinkFormModal(
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 (name, set_name) = create_signal(link.with(|x| x.name.clone()));
let (link_url, set_link_url) = create_signal(link.with(|x| x.link.clone()));
let (icon, set_icon) = create_signal(link.with(|x| x.icon.clone()));
create_effect(move |_| {
if update_action.value().get().is_some() {
links.refetch();
set_show.set(false);
}
});
let is_edit = link.is_some();
let (name, set_name) = create_signal(link.as_ref().map(|x| x.name.clone()).unwrap_or_default());
let (link_url, set_link_url) = create_signal(link.as_ref().map(|x| x.link.clone()).unwrap_or_default());
let (icon, set_icon) = create_signal(link.as_ref().map(|x| x.icon.clone()).unwrap_or_default());
let link_id = link.as_ref().map(|x| x.id.to_string());
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>
<ActionForm action=update_action>
<input name="id" type="hidden" value={move || link.with(|x| x.id.to_string())} />
<h2 class="pb-6 text-2xl text-center">
{if is_edit { "Édition du lien" } else { "Ajout d'un lien" }}
</h2>
<div>
<label class="block mt-3 mb-1">"Nom"</label>
<input type="text"
name="name"
prop:value=move || name.get()
on:input=move |ev| set_name.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>
<div>
<label class="block mt-3 mb-1">"Lien"</label>
<input type="url"
name="link"
prop:value=move || link_url.get()
on:input=move |ev| set_link_url.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>
<div>
<label class="block mt-3 mb-1">"Icône"</label>
<input type="url"
name="icon"
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>
<div class="flex gap-2 mt-5">
<button type="button"
on:click=move |_| set_show.set(false)
class="bg-prim hover:bg-prim-light rounded-lg transition-colors px-2 py-1 flex-1">"Annuler"</button>
<button type="submit"
class="bg-third hover:bg-third-light rounded-lg transition-colors px-2 py-1 flex-1">"Valider"</button>
</div>
</ActionForm>
{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"
name="name"
prop:value=move || name.get()
on:input=move |ev| set_name.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>
<div>
<label class="block mt-3 mb-1">"Lien"</label>
<input type="url"
name="link"
prop:value=move || link_url.get()
on:input=move |ev| set_link_url.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>
<div>
<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)
class="bg-prim hover:bg-prim-light rounded-lg transition-colors px-2 py-1 flex-1">"Annuler"</button>
<button type="submit"
class="bg-third hover:bg-third-light rounded-lg transition-colors px-2 py-1 flex-1">"Valider"</button>
</div>
}
}