add move link

src/routes/link.rs

@@ -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>
+    }
+}