Add confirm dialog when delete DID

frontend/Cargo.toml

@@ -11,5 +11,5 @@ wasm-bindgen-futures = "0.4.66"
 yew = { version = "0.23", features = ["csr"] }
 yew-router = "0.20.0"
 yew_icons = { version = "0.10.0", features = ["lucide"] }
-web-sys = {version = "0.3.93", features = ["HtmlSelectElement"] }
+web-sys = {version = "0.3.93", features = ["HtmlSelectElement", "HtmlDialogElement"] }
 gloo-console = "0.4.0"

frontend/src/main.rs

@@ -34,6 +34,7 @@ fn switch(routes: Route) -> Html {
 fn App() -> Html {
 html! {
     <BrowserRouter>
+        <div class="w-full lg:w-3/4 lg:mx-auto p-4 bg-gray-100">
         <div class="navbar bg-base-100 shadow-sm">
             <div class="navbar-start">
             </div>
@@ -49,6 +50,7 @@ html! {
             </div>
         </div>
         <Switch<Route> render={switch} />
+        </div>
     </BrowserRouter>        
 
     }

frontend/src/pages/did.rs

@@ -1,5 +1,5 @@
 use yew::prelude::*;
-use web_sys::{Event, HtmlInputElement, HtmlSelectElement};
+use web_sys::{Event, HtmlInputElement, HtmlSelectElement, HtmlDialogElement};
 use web_sys::wasm_bindgen::JsCast;
 use gloo_net::http::Request;
 use serde::{Serialize, Deserialize};
@@ -21,7 +21,8 @@ pub struct DidProps {
     pub did_number: String,
     pub target_type: String,
     pub target: String,
-    pub active: bool
+    pub active: bool,
+    pub on_changed: Callback<()>
 }
 
 #[component]
@@ -32,6 +33,8 @@ pub fn DidComponent(props: &DidProps) -> Html {
     let target_type = use_state(||props.target_type.clone());
     let target = use_state(||props.target.clone());
     let active= use_state(||props.active);
+    let on_changed = props.on_changed.clone();
+    let dialog_ref: NodeRef = use_node_ref(); 
 
     let handle_did_input = {
         let did_number = did_number.clone();
@@ -94,7 +97,10 @@ pub fn DidComponent(props: &DidProps) -> Html {
         let target_type = target_type.clone();
         let target = target.clone();
         let active = active.clone();
+        let on_changed = on_changed.clone();
         Callback::from(move |_| {
+            let changed = changed.clone();
+            let on_changed = on_changed.clone();
             let did = Did {
                 id,
                 did_number: (*did_number).clone(),
@@ -109,6 +115,8 @@ pub fn DidComponent(props: &DidProps) -> Html {
             };
 
             wasm_bindgen_futures::spawn_local(async move {
+                let changed = changed.clone();
+                let on_changed = on_changed.clone();
                 let req = if id == 0 {
                     Request::post(&url)
                     .json(&did)
@@ -123,27 +131,36 @@ pub fn DidComponent(props: &DidProps) -> Html {
                     .await
                     .unwrap();
 
+                changed.set(false);
+                on_changed.emit(());                    
             });
-
-            changed.set(false);
         })
     };
     
-    let handle_delete = Callback::from(move |_| {
+     let handle_confirm = Callback::from(move |_| {
+        let on_changed = on_changed.clone();
             wasm_bindgen_futures::spawn_local(async move {
-                    Request::delete(&format!("{}/{}",API_BASE, id))
+                let on_changed = on_changed.clone();
+                Request::delete(&format!("{}/{}",API_BASE, id))
                     .body("")                    
                     .unwrap()
                     .send()
                     .await
                     .unwrap();
+                on_changed.emit(());
             })
     });
 
+    let handle_delete: Callback<MouseEvent> = {
+        let dialog_ref = dialog_ref.clone();
+        Callback::from(move |_e| {
+            let d = dialog_ref.cast::<HtmlDialogElement>().unwrap();
+                d.show_modal().unwrap();
+        })
+    };
+
     html!{
         <tr>
-            <input type="text" class="hidden" value={props.did_id.to_string()} 
-            />
             <td>
                 <input type="text" 
                     class="input" 
@@ -201,17 +218,31 @@ pub fn DidComponent(props: &DidProps) -> Html {
                     </button>                    
                 }                         
             </td>
+            <dialog ref={dialog_ref} class="modal">
+                <div class="modal-box">
+                    <h3 class="font-bold text-lg">{"Warning"}</h3>
+                    <p class="py-4">{format!("About to delete DID: {}", *did_number)}</p>
+                    <div class="modal-action">
+                        <form method="dialog">
+                            <button onclick={handle_confirm} class="btn btn-warning mr-2">{"Yes"}</button>
+                            <button class="btn">{"No"}</button>
+                        </form>
+                    </div>
+                </div>
+            </dialog>            
         </tr>
-
     }
 }
 
 #[component]
 pub fn DidListComponent() -> Html {
+    let changed = use_state(||0);
+    let trigger = use_force_update();   
     let dids: UseStateHandle<Vec<Did>> = use_state(||vec![]);
     {
+        let changed = changed.clone();
         let dids = dids.clone();
-        use_effect_with((), move |_| {
+        use_effect_with(changed, move |_| {
             let dids = dids.clone();
             wasm_bindgen_futures::spawn_local(async move {
                 let res = Request::get(API_BASE)
@@ -224,15 +255,24 @@ pub fn DidListComponent() -> Html {
             });
         });
     }
+    let handle_change = Callback::from(move |()| {
+        let count = *changed + 1;
+        gloo_console::log!(count);
+        changed.set(count);
+        trigger.force_update();
+        web_sys::window().unwrap().location().reload().unwrap();
+    });
+
     html!{
         <div>
             <table class="table">
                 <DidComponent 
                     did_id={0}
                     did_number={""}
-                    target_type={""}
+                    target_type={"NoService"}
                     target={""}
                     active=true
+                    on_changed={handle_change.clone()}
                 />
             </table>
             <div class="divider"></div>
@@ -256,6 +296,7 @@ pub fn DidListComponent() -> Html {
                                 target_type={d.target_type.clone()}
                                 target={d.target.clone().unwrap_or_default()}
                                 active ={d.active}
+                                on_changed={handle_change.clone()}
                             />    
                         }
                     }).collect::<Html>()