Skip to content

Commit 8c514e5

Browse files
dancixxdancixx
committed
refactor: migrate to RSX
1 parent 2ded997 commit 8c514e5

File tree

7 files changed

+371
-254
lines changed

7 files changed

+371
-254
lines changed

‎src/app.rs‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ use thaw::{Button, Tab, Tabs};
33

44
use crate::{
55
enums::QueryTableLayout,
6-
query_editor, query_table, sidebar,
6+
query_editor::QueryEditor,
7+
query_table::QueryTable,
8+
sidebar,
79
store::{
810
active_project::ActiveProjectStore,
911
projects::ProjectsStore,
@@ -35,10 +37,9 @@ pub fn App() -> impl IntoView {
3537
key=|index| index.to_string()
3638
children=move |index| {
3739
view! {
38-
<Tab key=index
39-
.to_string()>
40-
{query_editor::component().into_view()}
41-
{query_table::component().into_view()}
40+
<Tab key=index.to_string()>
41+
<QueryEditor/>
42+
<QueryTable/>
4243
</Tab>
4344
}
4445
}
@@ -60,7 +61,7 @@ pub fn App() -> impl IntoView {
6061
}
6162
>
6263

63-
{"+"}
64+
"+"
6465
</Button>
6566
</main>
6667
</div>

‎src/grid_view.rs‎

Lines changed: 41 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,47 @@
1-
use leptos::{html::*, *};
1+
use leptos::*;
22

33
use crate::store::tabs::TabsStore;
44

5-
pub fn component() -> impl IntoView {
5+
#[component]
6+
pub fn GridView() -> impl IntoView {
67
let tabs_store = use_context::<TabsStore>().unwrap();
78

8-
table()
9-
.classes("table-auto w-full")
10-
.child(
11-
thead()
12-
.classes("sticky top-0 bg-white")
13-
.child(tr().classes("bg-gray-100").child(For(ForProps {
14-
each: move || tabs_store.select_active_editor_sql_result().unwrap().0,
15-
key: |n| n.clone(),
16-
children: move |col| th().classes("text-xs px-4").child(col),
17-
}))),
18-
)
19-
.child(tbody().child(For(ForProps {
20-
each: move || tabs_store.select_active_editor_sql_result().unwrap().1,
21-
key: |n| n.clone(),
22-
children: move |row| {
23-
tr()
24-
.classes("hover:bg-gray-100 divide-x divide-gray-200")
25-
.child(For(ForProps {
26-
each: move || row.clone(),
27-
key: |n| n.clone(),
28-
children: move |cell| td().classes("px-4 text-xs cursor:pointer").child(cell),
29-
}))
30-
},
31-
})))
9+
view! {
10+
<table class="table-auto w-full">
11+
<thead class="sticky top-0 bg-white">
12+
<tr class="bg-gray-100">
13+
<For
14+
each=move || tabs_store.select_active_editor_sql_result().unwrap().0
15+
key=|n| n.clone()
16+
children=move |col| {
17+
view! { <th class="text-xs px 4">{col}</th> }
18+
}
19+
/>
20+
21+
</tr>
22+
</thead>
23+
<tbody>
24+
<For
25+
each=move || tabs_store.select_active_editor_sql_result().unwrap().1
26+
key=|n| n.clone()
27+
children=move |row| {
28+
view! {
29+
<tr class="hover:bg-gray-100 divide-x divide-gray-200">
30+
<For
31+
each=move || row.clone()
32+
key=|n| n.clone()
33+
children=move |cell| {
34+
view! { <td class="px-4 text-xs cursor:pointer">{cell}</td> }
35+
}
36+
/>
37+
38+
</tr>
39+
}
40+
}
41+
/>
42+
43+
</tbody>
44+
</table>
45+
}
3246
}
47+

‎src/modals/connection.rs‎

Lines changed: 170 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ use common::{
33
enums::{Drivers, Project},
44
projects::postgresql::Postgresql,
55
};
6-
use leptos::{html::*, *};
6+
use leptos::*;
77
use tauri_sys::tauri::invoke;
8-
use thaw::{Modal, ModalFooter, ModalProps};
8+
use thaw::{Modal, ModalFooter};
99

1010
use crate::{
1111
invoke::{Invoke, InvokeInsertProjectArgs},
@@ -36,88 +36,172 @@ pub fn component(show: RwSignal<bool>) -> impl IntoView {
3636
}
3737
});
3838

39-
Modal(ModalProps {
40-
show,
41-
title: MaybeSignal::Static(String::from("Add new project")),
42-
children: Children::to_children(move || {
43-
Fragment::new(vec![div()
44-
.classes("flex flex-col gap-2")
45-
.child(
46-
input()
47-
.classes("border-1 border-neutral-200 p-1 rounded-md")
48-
.prop("type", "text")
49-
.prop("placeholder", "project")
50-
.prop("value", project)
51-
.on(ev::input, move |e| set_project(event_target_value(&e))),
52-
)
53-
.child(
54-
input()
55-
.classes("border-1 border-neutral-200 p-1 rounded-md")
56-
.prop("type", "text")
57-
.prop("value", db_user)
58-
.prop("placeholder", "username")
59-
.on(ev::input, move |e| set_db_user(event_target_value(&e))),
60-
)
61-
.child(
62-
input()
63-
.classes("border-1 border-neutral-200 p-1 rounded-md")
64-
.prop("type", "password")
65-
.prop("value", db_password)
66-
.prop("placeholder", "password")
67-
.on(ev::input, move |e| set_db_password(event_target_value(&e))),
68-
)
69-
.child(
70-
input()
71-
.classes("border-1 border-neutral-200 p-1 rounded-md")
72-
.prop("type", "text")
73-
.prop("value", db_host)
74-
.prop("placeholder", "host")
75-
.on(ev::input, move |e| set_db_host(event_target_value(&e))),
76-
)
77-
.child(
78-
input()
79-
.classes("border-1 border-neutral-200 p-1 rounded-md")
80-
.prop("type", "text")
81-
.prop("value", db_port)
82-
.prop("placeholder", "port")
83-
.on(ev::input, move |e| set_db_port(event_target_value(&e))),
84-
)
85-
.into_view()])
86-
}),
87-
modal_footer: Some(ModalFooter {
88-
children: ChildrenFn::to_children(move || {
89-
Fragment::new(vec![div()
90-
.classes("flex gap-2 justify-end")
91-
.child(
92-
button()
93-
.classes("px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md")
94-
.child("Add")
95-
.prop("disabled", move || {
96-
project().is_empty()
97-
|| db_user().is_empty()
98-
|| db_password().is_empty()
99-
|| db_host().is_empty()
100-
|| db_port().is_empty()
101-
})
102-
.on(ev::click, move |_| {
103-
let project_details = match driver() {
104-
Drivers::POSTGRESQL => Project::POSTGRESQL(Postgresql {
105-
name: project(),
106-
driver: PostgresqlDriver::new(db_user(), db_password(), db_host(), db_port()),
107-
..Postgresql::default()
108-
}),
109-
};
110-
save_project.dispatch(project_details);
111-
}),
112-
)
113-
.child(
114-
button()
115-
.classes("px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md")
116-
.child("Cancel")
117-
.on(ev::click, move |_| show.set(false)),
118-
)
119-
.into_view()])
120-
}),
121-
}),
122-
})
39+
view! {
40+
<Modal show=show title="Add new project">
41+
<div class="flex flex-col gap-2">
42+
<input
43+
class="border-1 border-neutral-200 p-1 rounded-md"
44+
type="text"
45+
placeholder="project"
46+
value=project
47+
on:input=move |e| set_project(event_target_value(&e))
48+
/>
49+
50+
<input
51+
class="border-1 border-neutral-200 p-1 rounded-md"
52+
type="text"
53+
value=db_user
54+
placeholder="username"
55+
on:input=move |e| set_db_user(event_target_value(&e))
56+
/>
57+
58+
<input
59+
class="border-1 border-neutral-200 p-1 rounded-md"
60+
type="password"
61+
value=db_password
62+
placeholder="password"
63+
on:input=move |e| set_db_password(event_target_value(&e))
64+
/>
65+
66+
<input
67+
class="border-1 border-neutral-200 p-1 rounded-md"
68+
type="text"
69+
value=db_host
70+
placeholder="host"
71+
on:input=move |e| set_db_host(event_target_value(&e))
72+
/>
73+
74+
<input
75+
class="border-1 border-neutral-200 p-1 rounded-md"
76+
type="text"
77+
value=db_port
78+
placeholder="port"
79+
on:input=move |e| set_db_port(event_target_value(&e))
80+
/>
81+
82+
</div>
83+
// <ModalFooter>
84+
// <div class="flex gap-2 justify-end">
85+
// <button
86+
// class="px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md"
87+
// disabled=move || {
88+
// project.is_empty() || db_user.is_empty() || db_password.is_empty()
89+
// || db_host.is_empty() || db_port.is_empty()
90+
// }
91+
// on:click=move |_| {
92+
// let project_details = match driver() {
93+
// Drivers::POSTGRESQL => {
94+
// Project::POSTGRESQL(Postgresql {
95+
// name: project(),
96+
// driver: PostgresqlDriver::new(
97+
// db_user(),
98+
// db_password(),
99+
// db_host(),
100+
// db_port(),
101+
// ),
102+
// ..Postgresql::default()
103+
// })
104+
// }
105+
// };
106+
// save_project.dispatch(project_details);
107+
// }
108+
// >
109+
110+
// Add
111+
// </button>
112+
// <button
113+
// class="px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md"
114+
// on:click=move |_| show.set(false)
115+
// >
116+
// Cancel
117+
// </button>
118+
// </div>
119+
// </ModalFooter>
120+
</Modal>
121+
}
122+
// Modal(ModalProps {
123+
// show,
124+
// title: MaybeSignal::Static(String::from("Add new project")),
125+
// children: Children::to_children(move || {
126+
// Fragment::new(vec![div()
127+
// .classes("flex flex-col gap-2")
128+
// .child(
129+
// input()
130+
// .classes("border-1 border-neutral-200 p-1 rounded-md")
131+
// .prop("type", "text")
132+
// .prop("placeholder", "project")
133+
// .prop("value", project)
134+
// .on(ev::input, move |e| set_project(event_target_value(&e))),
135+
// )
136+
// .child(
137+
// input()
138+
// .classes("border-1 border-neutral-200 p-1 rounded-md")
139+
// .prop("type", "text")
140+
// .prop("value", db_user)
141+
// .prop("placeholder", "username")
142+
// .on(ev::input, move |e| set_db_user(event_target_value(&e))),
143+
// )
144+
// .child(
145+
// input()
146+
// .classes("border-1 border-neutral-200 p-1 rounded-md")
147+
// .prop("type", "password")
148+
// .prop("value", db_password)
149+
// .prop("placeholder", "password")
150+
// .on(ev::input, move |e| set_db_password(event_target_value(&e))),
151+
// )
152+
// .child(
153+
// input()
154+
// .classes("border-1 border-neutral-200 p-1 rounded-md")
155+
// .prop("type", "text")
156+
// .prop("value", db_host)
157+
// .prop("placeholder", "host")
158+
// .on(ev::input, move |e| set_db_host(event_target_value(&e))),
159+
// )
160+
// .child(
161+
// input()
162+
// .classes("border-1 border-neutral-200 p-1 rounded-md")
163+
// .prop("type", "text")
164+
// .prop("value", db_port)
165+
// .prop("placeholder", "port")
166+
// .on(ev::input, move |e| set_db_port(event_target_value(&e))),
167+
// )
168+
// .into_view()])
169+
// }),
170+
// modal_footer: Some(ModalFooter {
171+
// children: ChildrenFn::to_children(move || {
172+
// Fragment::new(vec![div()
173+
// .classes("flex gap-2 justify-end")
174+
// .child(
175+
// button()
176+
// .classes("px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md")
177+
// .child("Add")
178+
// .prop("disabled", move || {
179+
// project().is_empty()
180+
// || db_user().is_empty()
181+
// || db_password().is_empty()
182+
// || db_host().is_empty()
183+
// || db_port().is_empty()
184+
// })
185+
// .on(ev::click, move |_| {
186+
// let project_details = match driver() {
187+
// Drivers::POSTGRESQL => Project::POSTGRESQL(Postgresql {
188+
// name: project(),
189+
// driver: PostgresqlDriver::new(db_user(), db_password(), db_host(), db_port()),
190+
// ..Postgresql::default()
191+
// }),
192+
// };
193+
// save_project.dispatch(project_details);
194+
// }),
195+
// )
196+
// .child(
197+
// button()
198+
// .classes("px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md")
199+
// .child("Cancel")
200+
// .on(ev::click, move |_| show.set(false)),
201+
// )
202+
// .into_view()])
203+
// }),
204+
// }),
205+
// })
123206
}
207+

0 commit comments

Comments
 (0)