Skip to content

Commit 63f323f

Browse files
dancixxdancixx
committed
fix: use modal footer in proper way
1 parent 961a28d commit 63f323f

File tree

2 files changed

+62
-85
lines changed

2 files changed

+62
-85
lines changed

‎src/modals/connection.rs

Lines changed: 40 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -38,57 +38,7 @@ pub fn Connection(show: RwSignal<bool>) -> impl IntoView {
3838
});
3939

4040
view! {
41-
<Modal
42-
show=show
43-
title="Add new project"
44-
modal_footer=ModalFooter {
45-
children: ChildrenFn::to_children(move || Fragment::new(
46-
vec![
47-
view! {
48-
<div class="flex gap-2 justify-end">
49-
<button
50-
class="px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md"
51-
disabled=move || {
52-
project().is_empty() || db_user().is_empty()
53-
|| db_password().is_empty() || db_host().is_empty()
54-
|| db_port().is_empty()
55-
}
56-
57-
on:click=move |_| {
58-
let project_details = match driver() {
59-
Drivers::POSTGRESQL => {
60-
Project::POSTGRESQL(Postgresql {
61-
name: project(),
62-
driver: PostgresqlDriver::new(
63-
db_user(),
64-
db_password(),
65-
db_host(),
66-
db_port(),
67-
),
68-
..Postgresql::default()
69-
})
70-
}
71-
};
72-
save_project.dispatch(project_details);
73-
}
74-
>
75-
76-
Add
77-
</button>
78-
<button
79-
class="px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md"
80-
on:click=move |_| show.set(false)
81-
>
82-
Cancel
83-
</button>
84-
</div>
85-
}
86-
.into_view(),
87-
],
88-
)),
89-
}
90-
>
91-
41+
<Modal show=show title="Add new project">
9242
<div class="flex flex-col gap-2">
9343
<input
9444
class="border-1 border-neutral-200 p-1 rounded-md"
@@ -129,8 +79,46 @@ pub fn Connection(show: RwSignal<bool>) -> impl IntoView {
12979
placeholder="port"
13080
on:input=move |e| set_db_port(event_target_value(&e))
13181
/>
132-
13382
</div>
83+
84+
<ModalFooter slot>
85+
<div class="flex gap-2 justify-end">
86+
<button
87+
class="px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md"
88+
disabled=move || {
89+
project().is_empty() || db_user().is_empty() || db_password().is_empty()
90+
|| db_host().is_empty() || db_port().is_empty()
91+
}
92+
93+
on:click=move |_| {
94+
let project_details = match driver() {
95+
Drivers::POSTGRESQL => {
96+
Project::POSTGRESQL(Postgresql {
97+
name: project(),
98+
driver: PostgresqlDriver::new(
99+
db_user(),
100+
db_password(),
101+
db_host(),
102+
db_port(),
103+
),
104+
..Postgresql::default()
105+
})
106+
}
107+
};
108+
save_project.dispatch(project_details);
109+
}
110+
>
111+
112+
Add
113+
</button>
114+
<button
115+
class="px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md"
116+
on:click=move |_| show.set(false)
117+
>
118+
Cancel
119+
</button>
120+
</div>
121+
</ModalFooter>
134122
</Modal>
135123
}
136124
}

‎src/modals/custom_query.rs

Lines changed: 22 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -34,39 +34,7 @@ pub fn CustomQuery(show: RwSignal<bool>) -> impl IntoView {
3434
);
3535

3636
view! {
37-
<Modal
38-
show=show
39-
title="Save query!"
40-
modal_footer=ModalFooter {
41-
children: ChildrenFn::to_children(move || Fragment::new(
42-
vec![
43-
view! {
44-
<div class="flex gap-2 justify-end">
45-
<button
46-
class="px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md"
47-
on:click=move |_| {
48-
insert_query
49-
.dispatch((query_store, query_title(), project_name()));
50-
show.set(false);
51-
}
52-
>
53-
54-
Save
55-
</button>
56-
<button
57-
class="px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md"
58-
on:click=move |_| show.set(false)
59-
>
60-
Cancel
61-
</button>
62-
</div>
63-
}
64-
.into_view(),
65-
],
66-
)),
67-
}
68-
>
69-
37+
<Modal show=show title="Save query!">
7038
<div class="flex flex-col gap-2">
7139
<select
7240
class="border-1 border-neutral-200 p-1 rounded-md w-full bg-white appearance-none"
@@ -95,6 +63,27 @@ pub fn CustomQuery(show: RwSignal<bool>) -> impl IntoView {
9563
on:input=move |e| set_query_title(event_target_value(&e))
9664
/>
9765
</div>
66+
67+
<ModalFooter slot>
68+
<div class="flex gap-2 justify-end">
69+
<button
70+
class="px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md"
71+
on:click=move |_| {
72+
insert_query.dispatch((query_store, query_title(), project_name()));
73+
show.set(false);
74+
}
75+
>
76+
77+
Save
78+
</button>
79+
<button
80+
class="px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md"
81+
on:click=move |_| show.set(false)
82+
>
83+
Cancel
84+
</button>
85+
</div>
86+
</ModalFooter>
9887
</Modal>
9988
}
10089
}

0 commit comments

Comments
 (0)