fix: multi window handling

dancixx · dancixx · commit 16ce6c79280b · 2024-01-21T01:29:07.000+01:00
diff --git a/src/layout.rs b/src/layout.rs
@@ -1,13 +1,16 @@
 use leptos::{html::*, *};
-
-use crate::{
-  footer, query_editor, query_table, sidebar,
-  store::{self, editor::EditorStore},
+use thaw::{
+  Button,
+  Tab,
+  //TabProps,
+  Tabs,
+  // TabsProps
 };
 
+use crate::{footer, query_editor, query_table, sidebar, store::tabs};
+
 pub fn component() -> impl IntoView {
-  let tabs = use_context::<store::tabs::Tabs>().unwrap();
-  let mut editors = use_context::<EditorStore>().unwrap();
+  let tabs = use_context::<tabs::Tabs>().unwrap();
 
   div()
     .classes("flex h-screen")
@@ -19,39 +22,55 @@ pub fn component() -> impl IntoView {
           main()
             .classes("flex-1 overflow-y-scroll")
             .child(
-              div()
-                .classes("flex")
-                .child(For(ForProps {
-                  each: move || (0..tabs.active_tabs.get()),
-                  key: |index| *index,
-                  children: move |index| {
-                    button()
-                      .classes("px-8 h-10 hover:bg-gray-200 border-b-2")
-                      .class("border-indigo-500", move || {
-                        index == tabs.selected_tab.get()
-                      })
-                      .on(ev::click, move |_| {
-                        tabs.selected_tab.update(|prev| *prev = index);
-                      })
-                      .child((index + 1).to_string())
-                  },
-                }))
-                .child(
-                  button()
-                    .classes("px-8 h-10 border-b-2 hover:bg-gray-200")
-                    .on(ev::click, move |_| {
-                      tabs.active_tabs.update(|prev| *prev += 1);
-                      tabs.selected_tab.update(|prev| *prev += 1);
-                      editors.add_editor();
-                    })
-                    .child("+"),
-                ),
-            )
-            .child(
-              div()
-                .child(query_editor::component(move || tabs.selected_tab.get()))
-                .child(query_table::component()),
-            ),
+              view! {
+                <Tabs value=tabs.selected_tab>
+                    <For each=move || (0..tabs.active_tabs.get()) key=|index| index.to_string() let:index>
+                        <Tab key=index.to_string() label=(index + 1).to_string()>
+                            {query_editor::component()}
+                            {query_table::component()}
+                        </Tab>
+                    </For>
+                  </Tabs>
+                  <Button on_click=move |_| {
+                    tabs.active_tabs.update(|prev| *prev += 1);
+                    tabs.selected_tab.update(|prev| *prev = (tabs.active_tabs.get() - 1).to_string());
+                  }>"+1"</Button>
+            }),
+            // .child(Tabs(TabsProps {
+            //   value: tabs.selected_tab,
+            //   class: MaybeSignal::Static(String::new()),
+            //   children: Children::to_children(move || {
+            //     Fragment::new(vec![
+            //       For(ForProps {
+            //         each: move || (0..tabs.active_tabs.get()),
+            //         key: |index| index.to_string(),
+            //         children: move |index| {
+            //           Tab(TabProps {
+            //             class: MaybeSignal::Static(String::new()),
+            //             key: index.to_string(),
+            //             label: (index + 1).to_string(),
+            //             children: Children::to_children(move || {
+            //               Fragment::new(vec![
+            //                 query_editor::component().into_view(),
+            //                 query_table::component().into_view(),
+            //               ])
+            //             }),
+            //           })
+            //         },
+            //       })
+            //       .into_view(),
+            //       button()
+            //         .on(ev::click, move |_| {
+            //           tabs.active_tabs.update(|prev| *prev += 1);
+            //           tabs
+            //             .selected_tab
+            //             .update(|prev| *prev = (tabs.active_tabs.get() - 1).to_string());
+            //         })
+            //         .child("+")
+            //         .into_view(),
+            //     ])
+            //   }),
+            // })),
         )
         .child(footer::component()),
     )
diff --git a/src/query_editor.rs b/src/query_editor.rs
@@ -15,10 +15,7 @@ use crate::{
 
 pub type ModelCell = Rc<RefCell<Option<CodeEditor>>>;
 
-pub fn component<F>(index: F) -> impl IntoView
-where
-  F: Fn() -> usize,
-{
+pub fn component() -> impl IntoView {
   let query_store = use_context::<QueryStore>().unwrap();
   let run_query = create_action(move |query_store: &QueryStore| {
     let query_store = *query_store;
@@ -32,7 +29,7 @@ where
       show.set(false);
     }
   });
-  let mut editors = use_context::<EditorStore>().unwrap().editors;
+  let mut editors = use_context::<EditorStore>().unwrap();
   let node_ref = create_node_ref();
   let _ = use_event_listener(node_ref, ev::keydown, move |event| {
     if event.key() == "Enter" && event.ctrl_key() {
@@ -64,12 +61,11 @@ where
 
     // TODO: Fix this
     let e = Rc::new(RefCell::new(Some(e)));
-    let e = create_rw_signal(e);
-    editors.push(e);
+    editors.add_editor(e);
   });
 
   div()
-    .classes("relative border-b-1 border-neutral-200 sticky")
+    .classes("border-b-1 border-neutral-200 h-72 sticky")
     .node_ref(node_ref)
     .child(div().child(modals::custom_query::component(show)))
     .child(
diff --git a/src/store/editor.rs b/src/store/editor.rs
@@ -1,12 +1,15 @@
-use leptos::{create_rw_signal, logging, use_context, RwSignal, SignalGetUntracked};
+use std::{cell::RefCell, rc::Rc};
+
+use leptos::{create_rw_signal, use_context, RwSignal, SignalGetUntracked, SignalUpdate};
+use monaco::api::CodeEditor;
 
 use crate::query_editor::ModelCell;
 
 use super::tabs::Tabs;
 
 #[derive(Clone, Debug)]
 pub struct EditorStore {
-  pub editors: Vec<RwSignal<ModelCell>>,
+  pub editors: RwSignal<Vec<RwSignal<ModelCell>>>,
 }
 
 impl Default for EditorStore {
@@ -18,29 +21,34 @@ impl Default for EditorStore {
 impl EditorStore {
   pub fn new() -> Self {
     Self {
-      editors: vec![create_rw_signal(ModelCell::default())],
+      editors: create_rw_signal(vec![create_rw_signal(ModelCell::default())]),
     }
   }
 
-  pub fn add_editor(&mut self) {
-    self.editors.push(create_rw_signal(ModelCell::default()));
+  pub fn add_editor(&mut self, editor: Rc<RefCell<Option<CodeEditor>>>) {
+    self.editors.update(|prev| {
+      prev.push(create_rw_signal(editor));
+    });
   }
 
   pub fn remove_editor(&mut self, index: usize) {
-    self.editors.remove(index);
+    self.editors.update(|prev| {
+      prev.remove(index);
+    });
   }
 
   pub fn get_active_editor(&self) -> RwSignal<ModelCell> {
     let selected_tab = use_context::<Tabs>().unwrap().selected_tab.get_untracked();
-    logging::log!("{:?}", selected_tab);
+    let selected_tab = selected_tab.parse::<usize>().unwrap();
 
-    self.editors[selected_tab]
+    self.editors.get_untracked()[selected_tab]
   }
 
   pub fn get_editor_value(&self) -> String {
     let selected_tab = use_context::<Tabs>().unwrap().selected_tab.get_untracked();
+    let selected_tab = selected_tab.parse::<usize>().unwrap();
 
-    self.editors[selected_tab]
+    self.editors.get_untracked()[selected_tab]
       .get_untracked()
       .borrow()
       .as_ref()
@@ -52,8 +60,9 @@ impl EditorStore {
 
   pub fn set_editor_value(&self, value: &str) {
     let selected_tab = use_context::<Tabs>().unwrap().selected_tab.get_untracked();
+    let selected_tab = selected_tab.parse::<usize>().unwrap();
 
-    self.editors[selected_tab]
+    self.editors.get_untracked()[selected_tab]
       .get_untracked()
       .borrow()
       .as_ref()
diff --git a/src/store/tabs.rs b/src/store/tabs.rs
@@ -3,7 +3,7 @@ use leptos::{create_rw_signal, RwSignal};
 #[derive(Clone, Debug)]
 pub struct Tabs {
   pub active_tabs: RwSignal<usize>,
-  pub selected_tab: RwSignal<usize>,
+  pub selected_tab: RwSignal<String>,
 }
 
 impl Default for Tabs {
@@ -16,7 +16,7 @@ impl Tabs {
   pub fn new() -> Self {
     Self {
       active_tabs: create_rw_signal(1),
-      selected_tab: create_rw_signal(0),
+      selected_tab: create_rw_signal(String::from("0")),
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ use leptos::{create_rw_signal, RwSignal};`
`3`	`3`	`#[derive(Clone, Debug)]`
`4`	`4`	`pub struct Tabs {`
`5`	`5`	`pub active_tabs: RwSignal<usize>,`
`6`		`- pub selected_tab: RwSignal<usize>,`
	`6`	`+ pub selected_tab: RwSignal<String>,`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`impl Default for Tabs {`
`@@ -16,7 +16,7 @@ impl Tabs {`
`16`	`16`	`pub fn new() -> Self {`
`17`	`17`	`Self {`
`18`	`18`	`active_tabs: create_rw_signal(1),`
`19`		`- selected_tab: create_rw_signal(0),`
	`19`	`+ selected_tab: create_rw_signal(String::from("0")),`
`20`	`20`	`}`
`21`	`21`	`}`
`22`	`22`	`}`