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

add move link

Browse Source
This commit is contained in:
Romulus21
2024-11-27 23:03:54 +01:00
parent f67c0e2e57
commit 319e901dd8
7 changed files with 969 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app.rs
View File

@@ -32,11 +32,19 @@ pub fn App() -> impl IntoView {
#[component]
pub fn Navigation() -> impl IntoView {
let location = use_location();
view! {
<nav class="flex gap-5 px-2 py-1 text-lg">
<A href="/" class="hover:text-third border-b border-transparent hover:border-third inline-block transition-colors">Home</A>
<A href="/liens" class="hover:text-third hover:border-b border-third inline-block transition-colors">Liens</A>
<A href="/formulaire" class="hover:text-third hover:border-b border-third inline-block transition-colors">Formulaire</A>
<a href="/"
class="hover:text-third hover:border-b border-third inline-block transition-colors"
class:active-link=move || location.pathname.get() == "/">Home</a>
<a href="/liens"
class="hover:text-third hover:border-b border-third inline-block transition-colors"
class:active-link=move || location.pathname.get() == "/liens">Liens</a>
<a href="/formulaire"
class="hover:text-third hover:border-b border-third inline-block transition-colors"
class:active-link=move || location.pathname.get() == "/formulaire">Formulaire</a>
</nav>
}
}

52
src/models/link.rs
View File

@@ -2,7 +2,7 @@ use serde::{Deserialize, Serialize};
#[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
pub struct Link {
id: u64,
pub id: u64,
pub link: String,
pub name: String,
position: i64,
@@ -38,4 +38,54 @@ impl Link {
.fetch_all(crate::database::get_db())
.await
}
#[cfg(feature = "ssr")]
pub async fn move_position(
link_id: String,
direction: String,
) -> Result<sqlx::mysql::MySqlQueryResult, sqlx::Error> {
let link = sqlx::query!(
"SELECT id, name, link, position, created_at FROM links WHERE id = ?",
link_id
)
.map(|x| Self {
id: x.id,
name: x.name,
link: x.link,
position: x.position,
created_at: x.created_at.format("%d/%m/%Y %H:%M").to_string(),
})
.fetch_one(crate::database::get_db())
.await;
match link {
Ok(link) => {
let position = link.position;
let flow = match direction.as_str() {
"prev" => -1,
"next" => 1,
_ => 0,
};
let _ = sqlx::query!(
"UPDATE links SET position = ? WHERE position = ?",
position - flow,
position + flow
)
.execute(crate::database::get_db())
.await;
sqlx::query!(
"UPDATE links SET position = ? WHERE id = ?",
position + flow,
link_id
)
.execute(crate::database::get_db())
.await
}
Err(_) => {
print!("Error position");
panic!("not fount")
}
}
}
}

99
src/routes/link.rs
View File

@@ -1,6 +1,8 @@
use ev::MouseEvent;
use leptos::*;
//use leptos_meta::*;
use leptos_meta::*;
use leptos_router::*;
use wasm_bindgen::JsCast;
#[server(GetLinksAction, "/api", "GetJson")]
#[tracing::instrument]
@@ -27,18 +29,33 @@ pub async fn add_value(name: String, link: String) -> Result<(), ServerFnError>
#[component]
pub fn Links() -> impl IntoView {
let (show, set_show) = create_signal(false);
let (edit, set_edit) = create_signal(false);
let link_action = create_server_action::<LinkAction>();
let result = link_action.version();
let reset_form = create_rw_signal("");
let links = create_resource(
move || (result.get()),
move |_| async move {
logging::log!("fetch");
reset_form.set("");
set_show.set(false);
get_links().await
},
);
create_effect(move |_| {
logging::log!("here .refetch() runs effect instead of get_q_sort.get()");
logging::log!("{:?}", links.get());
});
async fn move_click_position(id: String) {
logging::log!("move click {}", id);
change_position(id, "prev".to_string())
.await
.expect("REASON");
}
let form = move || {
show.get().then(|| {
view! { <div class="my-0 mx-auto w-72 p-6 bg-prim-light rounded-lg">
@@ -79,7 +96,9 @@ pub fn Links() -> impl IntoView {
key=|(i, _)| *i
children=move |(_, link)| {
let link = create_rw_signal(link);
view!{<Link link />}
view!{
<Link link edit links />
}
}/>
}
}))}
@@ -87,7 +106,8 @@ pub fn Links() -> impl IntoView {
</Suspense>
</ul>
<div class="flex justify-end m-5">
<div class="flex justify-end gap-5 m-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">"Edit"</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>
</div>
@@ -97,8 +117,42 @@ pub fn Links() -> impl IntoView {
}
}
#[server(MoveLinkAction, "/api")]
pub async fn change_position(link_id: String, direction: String) -> Result<(), ServerFnError> {
crate::models::Link::move_position(link_id, direction)
.await
.map(|_| ())
.map_err(|x| {
let err = format!("Error while posting a comment: {x:?}");
tracing::error!("{err}");
ServerFnError::ServerError("Could not post a comment, try again later".into())
})
}
#[component]
fn Link(link: RwSignal<crate::models::Link>) -> impl IntoView {
fn Link<T: 'static + Clone, S: 'static>(
link: RwSignal<crate::models::Link>,
edit: ReadSignal<bool>,
links: Resource<T, S>,
) -> impl IntoView {
/*let result = move_link.version();
let _ = create_resource(
move || (result.get()),
move |_| async move {
logging::log!("move");
//set_reload.update(|n| *n += 1);
//links.refetch();
},
);*/
//let on_click = move |event: MouseEvent| {
//.dyn_into::<leptos::web_sys::HtmlElement>().unwrap();
//let dataset = element.dataset();
//logging::log!("move {:?}", element);
//let _ = move_link.dispatch(());
//links.refetch();
//};
view! {
<li>
<a class="bg-prim-light hover:bg-prim-lightest text-xl rounded-lg text-center hover:text-third transition-colors px-5 py-4 min-w-60 inline-block"
@@ -106,6 +160,43 @@ fn Link(link: RwSignal<crate::models::Link>) -> impl IntoView {
href={move || link.with(|x| x.link.to_string())}>
{move || link.with(|x| x.name.to_string())}
</a>
{move || {
edit.get().then(|| {
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.set(true)}
>"Editer"</button>
<button class="block px-2 py-1 flex-1 hover:bg-third-light"
//on:click=move |_| {set_show.set(true)}
>"Supp."</button>
<MoveButton id=link.with(|x| x.id.to_string()) value="next".to_string() label=">".to_string() links=links />
</div> }
})
}}
</li>
}
}
#[component]
fn MoveButton<T: 'static + Clone, S: 'static>(
id: String,
value: String,
label: String,
links: Resource<T, S>,
) -> impl IntoView {
let move_link = create_server_action::<MoveLinkAction>();
view! {
<ActionForm action=move_link on:submit= move |ev| {
let Ok(_) = MoveLinkAction::from_event(&ev) else {
return ev.prevent_default();
};
links.refetch();
}>
<input name="link_id" type="hidden" value=id />
<input name="direction" type="hidden" value=value />
<button class="block w-12 px-2 py-1 hover:bg-third-light rounded-br-lg">{label}</button>
</ActionForm>
}
}

2
src/routes/value.rs
View File

@@ -1,5 +1,5 @@
use leptos::*;
//use leptos_meta::*;
use leptos_meta::*;
use leptos_router::*;
use crate::models::OPTIONS;