gburri/recipes
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Groups can now be ordered (via drag and drop)

Browse source
This commit is contained in:
Greg Burri 2025-01-10 22:38:34 +01:00
parent 16c484c2d1
commit 975d1ceee2
14 changed files with 461 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/Cargo.toml
View file

@ -24,18 +24,22 @@ wasm-bindgen-futures = "0.4"
web-sys = { version = "0.3", features = [
"console",
"Document",
"Element",
"HtmlElement",
"Node",
"NodeList",
"Window",
"Location",
"EventTarget",
"DragEvent",
"DataTransfer",
"KeyboardEvent",
"Element",
"HtmlElement",
"HtmlDivElement",
"HtmlLabelElement",
"HtmlInputElement",
"HtmlTextAreaElement",
"HtmlSelectElement",
"HtmlDialogElement",
"KeyboardEvent",
] }
gloo = "0.11"

232
frontend/src/handles.rs
View file

@ -1,18 +1,22 @@
use gloo::{
events::EventListener,
console::log,
events::{EventListener, EventListenerOptions},
net::http::Request,
utils::{document, window},
};
use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::spawn_local;
use web_sys::{Element, HtmlInputElement, HtmlSelectElement, HtmlTextAreaElement, KeyboardEvent};
use web_sys::{
DragEvent, Element, HtmlDivElement, HtmlInputElement, HtmlSelectElement, HtmlTextAreaElement,
KeyboardEvent,
};
use common::ron_api;
use crate::{
modal_dialog, request,
toast::{self, Level},
utils::{by_id, selector, selector_and_clone, SelectorExt},
utils::{by_id, selector, selector_all, selector_and_clone, SelectorExt},
};
async fn reload_recipes_list(current_recipe_id: i64) {
@ -276,6 +280,92 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
})
.forget();
let group_dropzone: Element = selector(".dropzone-group");
setup_dragzone_events(&group_dropzone);
fn setup_dragzone_events(dropzone: &Element) {
EventListener::new_with_options(
dropzone,
"dragover",
EventListenerOptions::enable_prevent_default(),
|event| {
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
let drag_data = event
.data_transfer()
.unwrap()
.get_data("text/plain")
.unwrap();
if drag_data.starts_with("group") {
event.prevent_default();
// event.data_transfer().unwrap().set_effect_allowed("move");
log!("drag over");
event
.target()
.unwrap()
.dyn_into::<Element>()
.unwrap()
.set_class_name("dropzone-group hover");
}
},
)
.forget();
EventListener::new(dropzone, "dragleave", |event| {
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
let drag_data = event
.data_transfer()
.unwrap()
.get_data("text/plain")
.unwrap();
if drag_data.starts_with("group") {
log!("drag leave");
event
.target()
.unwrap()
.dyn_into::<Element>()
.unwrap()
.set_class_name("dropzone-group active");
}
})
.forget();
EventListener::new(dropzone, "drop", |event| {
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
let drag_data = event
.data_transfer()
.unwrap()
.get_data("text/plain")
.unwrap();
if drag_data.starts_with("group") {
let id: i64 = drag_data[6..].parse().unwrap();
let target: Element = event.target().unwrap().dyn_into().unwrap();
let group: Element = by_id(&format!("group-{}", id));
let group_dropzone: Element = by_id(&format!("dropzone-group-{}", id));
target.after_with_node_1(&group).unwrap();
group.after_with_node_1(&group_dropzone).unwrap();
send_groups_order();
}
})
.forget();
}
fn send_groups_order() {
spawn_local(async move {
let group_ids = by_id::<Element>("groups-container")
.selector_all::<Element>(".group")
.into_iter()
.map(|e| e.get_attribute("id").unwrap()[6..].parse::<i64>().unwrap())
.collect();
let body = ron_api::SetGroupOrders { group_ids };
let _ = request::put::<(), _>("recipe/set_groups_order", body).await;
});
}
fn create_tag_elements<T>(recipe_id: i64, tags: &[T])
where
T: AsRef<str>,
@ -339,6 +429,77 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
let groups_container: Element = by_id("groups-container");
groups_container.append_child(&group_element).unwrap();
let dropzone_group: Element = selector_and_clone(".dropzone-group");
dropzone_group
.set_attribute("id", &format!("dropzone-group-{}", group.id))
.unwrap();
groups_container.append_child(&dropzone_group).unwrap();
setup_dragzone_events(&dropzone_group);
let drag_handle: Element = group_element.selector(".drag-handle");
EventListener::new(&drag_handle, "mousedown", |event| {
event
.target()
.unwrap()
.dyn_into::<Element>()
.unwrap()
.parent_element()
.unwrap()
.set_attribute("draggable", "true")
.unwrap();
})
.forget();
EventListener::new(&drag_handle, "mouseup", |event| {
event
.target()
.unwrap()
.dyn_into::<Element>()
.unwrap()
.parent_element()
.unwrap()
.set_attribute("draggable", "false")
.unwrap();
})
.forget();
EventListener::new(&group_element, "dragstart", |event| {
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
let target_element: Element = event.target().unwrap().dyn_into().unwrap();
if target_element.get_attribute("class").unwrap() == "group" {
// Highlight where the group can be droppped.
for dp in selector_all::<HtmlDivElement>(".dropzone-group") {
dp.set_class_name("dropzone-group active");
}
event
.data_transfer()
.unwrap()
.set_data("text/plain", &target_element.get_attribute("id").unwrap())
.unwrap();
event.data_transfer().unwrap().set_effect_allowed("move");
}
})
.forget();
EventListener::new(&group_element, "dragend", |event| {
// let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
event
.target()
.unwrap()
.dyn_into::<Element>()
.unwrap()
.set_attribute("draggable", "false")
.unwrap();
let target_element: Element = event.target().unwrap().dyn_into().unwrap();
if target_element.get_attribute("class").unwrap() == "group" {
for dp in selector_all::<HtmlDivElement>(".dropzone-group") {
dp.set_class_name("dropzone-group");
}
}
})
.forget();
// Group name.
let name = group_element.selector::<HtmlInputElement>(".input-group-name");
name.set_value(&group.name);
@ -388,6 +549,7 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
let body = ron_api::RemoveRecipeGroup { group_id };
let _ = request::delete::<(), _>("recipe/remove_group", body).await;
by_id::<Element>(&format!("group-{}", group_id)).remove();
by_id::<Element>(&format!("dropzone-group-{}", group_id)).remove();
}
});
})
@ -423,6 +585,69 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
.unwrap();
group_element.append_child(&step_element).unwrap();
let dropzone_step: Element = selector_and_clone(".dropzone-step");
dropzone_step
.set_attribute("id", &format!("dropzone-step-{}", step.id))
.unwrap();
group_element.append_child(&dropzone_step).unwrap();
let drag_handle: Element = step_element.selector(".drag-handle");
EventListener::new(&drag_handle, "mousedown", |event| {
event
.target()
.unwrap()
.dyn_into::<Element>()
.unwrap()
.parent_element()
.unwrap()
.set_attribute("draggable", "true")
.unwrap();
})
.forget();
EventListener::new(&drag_handle, "mouseup", |event| {
event
.target()
.unwrap()
.dyn_into::<Element>()
.unwrap()
.parent_element()
.unwrap()
.set_attribute("draggable", "false")
.unwrap();
})
.forget();
EventListener::new(&step_element, "dragstart", |event| {
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
// let target_element: Element = event.target().unwrap().dyn_into().unwrap();
// if target_element.get_attribute("class").unwrap() == "step" {
// Highlight where the step can be droppped.
log!("START DRAG STEP");
// log!(event);
// }
})
.forget();
EventListener::new(&step_element, "dragend", |event| {
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
// let target_element: Element = event.target().unwrap().dyn_into().unwrap();
// if target_element.get_attribute("class").unwrap() == "step" {
// Highlight where the step can be droppped.
event
.target()
.unwrap()
.dyn_into::<Element>()
.unwrap()
.set_attribute("draggable", "false")
.unwrap();
log!("STOP DRAG STEP");
// log!(event);
// }
})
.forget();
// Step action.
let action: HtmlTextAreaElement = step_element.selector(".text-area-step-action");
action.set_value(&step.action);
@ -455,6 +680,7 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
let body = ron_api::RemoveRecipeStep { step_id };
let _ = request::delete::<(), _>("recipe/remove_step", body).await;
by_id::<Element>(&format!("step-{}", step_id)).remove();
by_id::<Element>(&format!("dropzone-step-{}", step_id)).remove();
}
});
})

31
frontend/src/utils.rs
View file

@ -1,4 +1,4 @@
use gloo::utils::document;
use gloo::{console::log, utils::document};
use wasm_bindgen::prelude::*;
use web_sys::Element;
@ -6,6 +6,10 @@ pub trait SelectorExt {
fn selector<T>(&self, selectors: &str) -> T
where
T: JsCast;
fn selector_all<T>(&self, selectors: &str) -> Vec<T>
where
T: JsCast;
}
impl SelectorExt for Element {
@ -19,6 +23,18 @@ impl SelectorExt for Element {
.dyn_into::<T>()
.unwrap()
}
fn selector_all<T>(&self, selectors: &str) -> Vec<T>
where
T: JsCast,
{
self.query_selector_all(selectors)
.unwrap()
.values()
.into_iter()
.map(|e| e.unwrap().dyn_into::<T>().unwrap())
.collect()
}
}
pub fn selector<T>(selectors: &str) -> T
@ -33,6 +49,19 @@ where
.unwrap()
}
pub fn selector_all<T>(selectors: &str) -> Vec<T>
where
T: JsCast,
{
document()
.query_selector_all(selectors)
.unwrap()
.values()
.into_iter()
.map(|e| e.unwrap().dyn_into::<T>().unwrap())
.collect()
}
pub fn selector_and_clone<T>(selectors: &str) -> T
where
T: JsCast,