Skip to content

Commit

Permalink
fix: horizontal scroll for big conditions
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShubhranshuSanjeev
ShubhranshuSanjeev committed Aug 21, 2024
1 parent 68d9204 commit 552a695
Show file tree
Hide file tree
Showing 5 changed files with 312 additions and 140 deletions.
131 changes: 131 additions & 0 deletions crates/frontend/src/components/condition_pills.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,137 @@ use crate::components::condition_pills::types::ConditionOperator;

use self::types::Condition;
use leptos::*;
use wasm_bindgen::JsCast;
use web_sys::Element;

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

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"
)
} 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"
)
}
});

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);
}
}
}
}
});
on_cleanup(|| {
click_event_handler.remove();
});

view! {
{move || {
let (list_item_class, value_class) = classes.get();
let Condition { left_operand: dimension, operator, right_operand: value } = condition
.get_value();
view! {
<li
id=id.get_value()
class=list_item_class
on:click=move |_| {
if !expand_rs.get() {
expand_ws.set(true);
}
}
>

<span class="font-mono font-medium context_condition text-gray-500">
{dimension}
</span>
<span class="font-mono font-medium text-gray-650 context_condition">
{operator.to_string()}
</span>

{match operator {
ConditionOperator::Between => {
let split_val: Vec<String> = value
.clone()
.split(',')
.map(String::from)
.collect();
view! {
<>
<span class="font-mono font-semibold context_condition">
{&split_val[0]}
</span>
<span class="font-mono font-medium text-gray-650 context_condition ">
{"and"}
</span>
<span class="font-mono font-semibold context_condition">
{&split_val[1]}
</span>
</>
}
}
_ => {
view! {
<>
<span class=value_class>{value}</span>
</>
}
}
}}

</li>
}
}}
}
}

#[component]
pub fn condition(
#[prop(into)] id: String,
#[prop(into)] conditions: Vec<Condition>,
#[prop(into, default=String::new())] class: String,
) -> 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);
view! {
<div class=outer_div_class>
<ol id=id.clone() class="flex flex-col gap-4 w-full pl-3 list-none">
{conditions
.into_iter()
.enumerate()
.map(|(idx, condition)| {
let item_id = format!("{}-{}", id, idx);
view! { <ConditionExpression condition id=item_id list_id=id.clone()/> }
})
.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>
</div>
}
}

#[component]
pub fn condition_pills(#[prop(into)] conditions: Vec<Condition>) -> impl IntoView {
Expand Down
90 changes: 52 additions & 38 deletions crates/frontend/src/components/context_card.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ use serde_json::{Map, Value};

use crate::{
components::{
condition_pills::{types::Condition, ConditionPills},
condition_pills::{types::Condition, Condition as ConditionComponent},
table::{types::Column, Table},
},
types::Context,
Expand All @@ -13,9 +13,16 @@ use crate::{
pub fn context_card(
context: Context,
overrides: Map<String, Value>,
handle_edit: Callback<(Context, Map<String, Value>), ()>,
handle_clone: Callback<(Context, Map<String, Value>), ()>,
handle_delete: Callback<String, ()>,
#[prop(default = true)] show_actions: bool,
#[prop(default=Callback::new(|_| {}))] handle_edit: Callback<
(Context, Map<String, Value>),
(),
>,
#[prop(default=Callback::new(|_| {}))] handle_clone: Callback<
(Context, Map<String, Value>),
(),
>,
#[prop(default=Callback::new(|_| {}))] handle_delete: Callback<String, ()>,
) -> impl IntoView {
let conditions: Vec<Condition> = (&context).try_into().unwrap_or(vec![]);
let override_table_rows = overrides
Expand All @@ -28,6 +35,7 @@ pub fn context_card(
})
.collect::<Vec<Map<String, Value>>>();

let context_id = StoredValue::new(context.id.clone());
let context = StoredValue::new(context);
let overrides = StoredValue::new(overrides);

Expand All @@ -37,43 +45,49 @@ pub fn context_card(
];

view! {
<div class="rounded-lg shadow bg-base-100 p-6 shadow">
<div class="rounded-lg shadow bg-base-100 p-6 shadow flex flex-col gap-3">
<div class="flex justify-between">
<div class="flex items-center space-x-4">
<h3 class="card-title text-base timeline-box text-gray-800 bg-base-100 shadow-md font-mono">
"Condition"
</h3>
<i class="ri-arrow-right-fill ri-xl text-blue-500"></i>
<ConditionPills conditions=conditions/>
</div>
<div class="flex space-x-4">
<i
class="ri-pencil-line ri-xl text-blue-500 cursor-pointer"
on:click=move |_| {
handle_edit.call((context.get_value(), overrides.get_value()))
}
>
</i>
<i
class="ri-file-copy-line ri-xl text-blue-500 cursor-pointer"
on:click=move |_| {
handle_clone.call((context.get_value(), overrides.get_value()))
}
>
</i>
<i
class="ri-delete-bin-5-line ri-xl text-blue-500 cursor-pointer"
on:click=move |_| { handle_delete.call(context.get_value().id) }
></i>
</div>
<h3 class="card-title text-base timeline-box text-gray-800 bg-base-100 shadow-md font-mono m-0 w-max">
"Condition"
</h3>
<Show when=move || show_actions>
<div class="h-fit text-right space-x-4">
<i
class="ri-pencil-line ri-lg text-blue-500 cursor-pointer"
on:click=move |_| {
handle_edit.call((context.get_value(), overrides.get_value()))
}
>
</i>
<i
class="ri-file-copy-line ri-lg text-blue-500 cursor-pointer"
on:click=move |_| {
handle_clone.call((context.get_value(), overrides.get_value()))
}
>
</i>
<i
class="ri-delete-bin-5-line ri-lg text-red-500 cursor-pointer"
on:click=move |_| { handle_delete.call(context.get_value().id) }
></i>
</div>
</Show>
</div>
<div class="space-x-4">
<Table
cell_style="min-w-48 font-mono".to_string()
rows=override_table_rows
key_column="id".to_string()
columns=table_columns

<div class="xl:flex xl:gap-x-4 xl:justify-between pl-5">
<ConditionComponent
conditions=conditions
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>
</div>
</div>
}
Expand Down
2 changes: 1 addition & 1 deletion crates/frontend/src/hoc/layout.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ pub fn Layout(children: Children) -> impl IntoView {
<div>
<SideNav resolved_path=path original_path=original_path.to_string()/>
// params_map=params_map
<main class="ease-soft-in-out xl:ml-96 relative h-full max-h-screen rounded-xl transition-all duration-200 overflow-y-auto">
<main class="ease-soft-in-out xl:ml-[350px] relative h-full max-h-screen rounded-xl transition-all duration-200 overflow-y-auto">
{children()}
</main>

Expand Down
Loading

0 comments on commit 552a695

Please sign in to comment.