Skip to content

Commit

Permalink
fix: preveting multiple event handler register
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShubhranshuSanjeev
ShubhranshuSanjeev committed Sep 4, 2024
1 parent 8d85f03 commit 069e81b
Show file tree
Hide file tree
Showing 8 changed files with 256 additions and 123 deletions.
82 changes: 50 additions & 32 deletions crates/frontend/src/components/condition_pills.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,53 +4,60 @@ pub mod utils;
use crate::components::condition_pills::types::ConditionOperator;

use self::types::Condition;
use leptos::*;
use leptos::{leptos_dom::helpers::WindowListenerHandle, *};
use wasm_bindgen::JsCast;
use web_sys::Element;

use derive_more::{Deref, DerefMut};

#[derive(Debug, Clone, Deref, DerefMut, Default)]
pub struct ConditionId(pub Option<String>);

pub fn use_condition_collapser() -> WindowListenerHandle {
let condition_id_ws = use_context::<WriteSignal<ConditionId>>().expect(
"use_condition_collapser must be used inside condition_collapse_provider",
);

window_event_listener(ev::click, move |ev| {
if let Some(t) = ev.target() {
let target_element = t.dyn_into::<Element>();
if let Ok(te) = target_element {
let parent_id = te.parent_element().map(|e| e.id());
condition_id_ws.set(ConditionId(parent_id));
}
}
})
}

#[component]
pub fn condition_expression(
#[prop(into)] id: String,
#[prop(into)] list_id: String,
condition: Condition,
) -> impl IntoView {
let id = store_value(id);
let condition = store_value(condition);

let (expand_rs, expand_ws) = create_signal(false);
let condition_id_rs = use_context::<ReadSignal<ConditionId>>().expect(
"condition_expression component must be used inside condition_collapse_provider",
);

let classes = Signal::derive(move || {
if expand_rs.get() {
(
"pointer flex items-center w-max max-w-full rounded-md bg-gray-50 px-2 py-1 text-xs ring-1 ring-inset ring-purple-700/10 shadow-md gap-x-2 overflow-hidden",
"font-mono font-semibold context_condition w-full text-wrap word-break-break"
)
("condition-item", "condition-value")
} else {
(
"pointer flex items-center w-max max-w-[300px] rounded-md bg-gray-50 px-2 py-1 text-xs ring-1 ring-inset ring-purple-700/10 shadow-md gap-x-2 overflow-hidden whitespace-nowrap",

"font-mono font-semibold context_condition w-full text-ellipsis overflow-hidden whitespace-nowrap"
)
("condition-item-collapsed", "condition-value-collapsed")
}
});

let condition = store_value(condition);
let id = store_value(id);

let click_event_handler = window_event_listener(ev::click, move |ev| {
if let Some(t) = ev.target() {
let target_element = t.dyn_into::<Element>();
if let Ok(te) = target_element {
let parent_id = te.parent_element().map(|e| e.id());

if let Some(p_id) = parent_id {
if !p_id.contains(&list_id) {
expand_ws.set(false);
}
}
create_effect(move |_| {
if let ConditionId(Some(c_id)) = condition_id_rs.get() {
if !c_id.contains(&list_id) {
expand_ws.set(false);
}
}
});
on_cleanup(|| {
click_event_handler.remove();
});

view! {
{move || {
Expand Down Expand Up @@ -116,12 +123,21 @@ pub fn condition(
#[prop(into)] id: String,
#[prop(into)] conditions: Vec<Condition>,
#[prop(into, default=String::new())] class: String,
#[prop(default = true)] grouped_view: bool,
) -> impl IntoView {
let outer_div_class = format!("{} pt-3 relative flex flex-col w-full py-4 pl-6 border-l-2 border-gray-300 rounded-lg", class);
let conditions = store_value(conditions);

let outer_div_class = if grouped_view {
format!("{} condition grouped", class)
} else {
format!("{} condition", class)
};

view! {
<div class=outer_div_class>
<ol id=id.clone() class="flex flex-col gap-4 w-full pl-3 list-none">
<ol id=id.clone()>
{conditions
.get_value()
.into_iter()
.enumerate()
.map(|(idx, condition)| {
Expand All @@ -130,9 +146,11 @@ pub fn condition(
})
.collect::<Vec<_>>()}
</ol>
<span class="absolute badge badge-ghost capitalize top-1/2 left-0 -translate-x-1/2 -translate-y-1/2 m-0 and-badge">
"and"
</span>
<Show when=move || grouped_view>
<span class="and">
"and"
</span>
</Show>
</div>
}
}
Expand Down
17 changes: 8 additions & 9 deletions crates/frontend/src/components/context_card.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ pub fn context_card(
];

view! {
<div class="rounded-lg shadow bg-base-100 p-6 shadow flex flex-col gap-3">
<div class="rounded-lg shadow bg-base-100 p-6 shadow flex flex-col gap-4">
<div class="flex justify-between">
<h3 class="card-title text-base timeline-box text-gray-800 bg-base-100 shadow-md font-mono m-0 w-max">
"Condition"
Expand Down Expand Up @@ -80,14 +80,13 @@ pub fn context_card(
id=context_id.get_value()
class="xl:w-[400px] h-fit"
/>
<div class="xl:w-2/3 overflow-auto">
<Table
cell_style="min-w-48 font-mono".to_string()
rows=override_table_rows
key_column="id".to_string()
columns=table_columns
/>
</div>
<Table
style="xl:flex-1"
cell_style="min-w-48 font-mono".to_string()
rows=override_table_rows
key_column="id".to_string()
columns=table_columns
/>
</div>
</div>
}
Expand Down
47 changes: 25 additions & 22 deletions crates/frontend/src/components/table.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,19 @@ fn generate_table_row_str(row: &Value) -> String {
#[component]
pub fn table(
key_column: String,
cell_style: String,
columns: Vec<Column>,
rows: Vec<Map<String, Value>>,
#[prop(into, default = String::new())] cell_style: String,
#[prop(into, default = String::new())] style: String,
#[prop(into, default = String::new())] head_style: String,
#[prop(default = TablePaginationProps::default())] pagination: TablePaginationProps,
) -> impl IntoView {
let pagination_props = StoredValue::new(pagination);
let container_style = format!("{} overflow-x-auto", style);
view! {
<div class="overflow-x-auto">
<div class=container_style>
<table class="table table-zebra">
<thead>
<thead class=head_style>
<tr>
<th></th>

Expand Down Expand Up @@ -94,26 +97,26 @@ pub fn table(

</tbody>
</table>
<Show when=move || {
pagination_props.get_value().enabled
}>
</div>
<Show when=move || {
pagination_props.get_value().enabled
}>

{move || {
let TablePaginationProps { current_page, total_pages, on_prev, on_next, .. } = pagination_props
.get_value();
view! {
<div class="mt-2 flex justify-end">
<Pagination
current_page=current_page
total_pages=total_pages
next=on_next
previous=on_prev
/>
</div>
}
}}
{move || {
let TablePaginationProps { current_page, total_pages, on_prev, on_next, .. } = pagination_props
.get_value();
view! {
<div class="mt-2 flex justify-end">
<Pagination
current_page=current_page
total_pages=total_pages
next=on_next
previous=on_prev
/>
</div>
}
}}

</Show>
</div>
</Show>
}
}
45 changes: 26 additions & 19 deletions crates/frontend/src/pages/context_override.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ use crate::components::drawer::{close_drawer, open_drawer, Drawer, DrawerBtn};
use crate::components::override_form::OverrideForm;
use crate::components::skeleton::{Skeleton, SkeletonVariant};
use crate::providers::alert_provider::enqueue_alert;
use crate::providers::condition_collapse_provider::ConditionCollapseProvider;
use crate::types::{Config, Context, DefaultConfig, Dimension};
use crate::utils::extract_conditions;
use futures::join;
Expand Down Expand Up @@ -335,8 +336,11 @@ pub fn context_override() -> impl IntoView {
(context.clone(), overrides)
})
.collect::<Vec<(Context, Map<String, Value>)>>();
if ctx_n_overrides.is_empty() {
view! {
let is_empty = ctx_n_overrides.is_empty();


view! {
<Show when=move || is_empty>
<div class="flex-row" style="margin-top:20rem;">
<div class="flex justify-center text-gray-400">
<i class="ri-file-add-line ri-xl"></i>
Expand All @@ -345,25 +349,28 @@ pub fn context_override() -> impl IntoView {
"Start with creating an override"
</div>
</div>
</Show>
<ConditionCollapseProvider>

{
ctx_n_overrides
.into_iter()
.map(|(context, overrides)| {
view! {
<ContextCard
context=context
overrides=overrides
handle_edit=handle_context_edit
handle_clone=handle_context_clone
handle_delete=handle_context_delete
/>
}
})
.collect_view()
}

}.into_view()
} else {
ctx_n_overrides
.into_iter()
.map(|(context, overrides)| {
view! {
<ContextCard
context=context
overrides=overrides
handle_edit=handle_context_edit
handle_clone=handle_context_clone
handle_delete=handle_context_delete
/>
}
})
.collect_view()
</ConditionCollapseProvider>
}

}}

</div>
Expand Down
76 changes: 41 additions & 35 deletions crates/frontend/src/pages/home.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ use std::time::Duration;
use crate::components::condition_pills::types::Condition;
use crate::components::condition_pills::Condition as ConditionComponent;
use crate::components::skeleton::{Skeleton, SkeletonVariant};
use crate::providers::condition_collapse_provider::ConditionCollapseProvider;
use crate::types::Config;
use crate::{
api::{fetch_config, fetch_dimensions},
Expand Down Expand Up @@ -99,43 +100,48 @@ fn all_context_view(config: Config) -> impl IntoView {

view! {
<div class="flex flex-col w-full gap-y-6 p-6">
{contexts
.iter()
.map(|context| {
let rows: Vec<_> = context
.override_with_keys
<ConditionCollapseProvider>
{
contexts
.iter()
.filter_map(|key| overrides.get(key).map(|o| rows(key, o, true)))
.collect();
let conditions: Vec<Condition> = context.try_into().unwrap_or_default();
view! {
<div class="card bg-base-100 shadow gap-3 p-6">
<h3 class="card-title text-base timeline-box text-gray-800 bg-base-100 shadow-md font-mono m-0 w-max">
"Condition"
</h3>
<div class="xl:flex xl:gap-x-4 xl:justify-between pl-5">
<ConditionComponent
conditions=conditions
id=context.id.clone()
class="xl:w-[400px] h-fit"
/>
<div class="xl:w-2/3 overflow-auto">
<table class="table table-zebra">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
.map(|context| {
let rows: Vec<_> = context
.override_with_keys
.iter()
.filter_map(|key| overrides.get(key).map(|o| rows(key, o, true)))
.collect();
let conditions: Vec<Condition> = context.try_into().unwrap_or_default();
view! {
<div class="card bg-base-100 shadow gap-3 p-6">
<h3 class="card-title text-base timeline-box text-gray-800 bg-base-100 shadow-md font-mono m-0 w-max">
"Condition"
</h3>
<div class="xl:flex xl:gap-x-4 xl:justify-between pl-5">
<ConditionComponent
conditions=conditions
id=context.id.clone()
class="xl:w-[400px] h-fit"
/>
<div class="xl:w-2/3 overflow-auto">
<table class="table table-zebra">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
}
})
.rev()
.collect::<Vec<_>>()} <div class="card bg-base-100 shadow m-6">
}
})
.rev()
.collect::<Vec<_>>()
}
</ConditionCollapseProvider>
<div class="card bg-base-100 shadow m-6">
<div class="card-body">
<h2 class="card-title">Default Configuration</h2>
<table class="table table-zebra">
Expand Down
1 change: 1 addition & 0 deletions crates/frontend/src/providers.rs
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
pub mod alert_provider;
pub mod condition_collapse_provider;
Loading

0 comments on commit 069e81b

Please sign in to comment.