feat: upgrade sidebar

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "rust-sql-gui-ui"
-version = "0.0.0"
+version = "1.0.0-alpha.1"
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
@@ -18,5 +18,3 @@ monaco = "0.4.0"
 
 [workspace]
 members = ["src-tauri"]
-
-

rustfmt.toml

@@ -1 +1,3 @@
-edition = "2021"
+edition = "2021"
+max_width = 100 # Maximum width of each line
+tab_spaces = 2 # Number of spaces per tab

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "rust-sql-gui"
-version = "0.0.0"
+version = "1.0.0-alpha.1"
 description = "A Tauri App"
 authors = ["you"]
 license = ""

src/db_connector.rs

@@ -3,22 +3,20 @@ use leptos::{html::*, *};
 use crate::store::{db::DBStore, query::QueryState};
 
 pub fn db_connector() -> impl IntoView {
-    let db = use_context::<DBStore>().unwrap();
-    let refetch_projects = use_context::<Resource<(), Vec<String>>>().unwrap();
-    let connect = create_action(move |db: &DBStore| {
-        let mut db_clone = *db;
-        async move {
-            db_clone.connect().await;
-            refetch_projects.refetch();
-        }
-    });
-    let query_state = use_context::<QueryState>().unwrap();
-    let run_query = create_action(move |query_state: &QueryState| {
-        let query_state = *query_state;
-        async move { query_state.run_query().await }
-    });
+  let db = use_context::<DBStore>().unwrap();
+  let connect = create_action(move |db: &DBStore| {
+    let mut db_clone = *db;
+    async move {
+      db_clone.connect().await;
+    }
+  });
+  let query_state = use_context::<QueryState>().unwrap();
+  let run_query = create_action(move |query_state: &QueryState| {
+    let query_state = *query_state;
+    async move { query_state.run_query().await }
+  });
 
-    header()
+  header()
         .attr(
             "class",
             "flex flex-row justify-between p-4 gap-2 border-b-1 border-neutral-200",
@@ -108,4 +106,3 @@ pub fn db_connector() -> impl IntoView {
                 ),
         )
 }
-

src/invoke.rs

@@ -1,26 +1,55 @@
+use std::fmt::Display;
+
 use serde::{Deserialize, Serialize};
 
+#[allow(non_camel_case_types)]
+pub enum Invoke {
+  get_projects,
+  get_project_details,
+  remove_project,
+  get_sql_result,
+  get_schema_tables,
+  pg_connector,
+}
+
+impl Display for Invoke {
+  fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+    match self {
+      Invoke::get_projects => write!(f, "get_projects"),
+      Invoke::get_project_details => write!(f, "get_project_details"),
+      Invoke::remove_project => write!(f, "remove_project"),
+      Invoke::get_sql_result => write!(f, "get_sql_result"),
+      Invoke::get_schema_tables => write!(f, "get_schema_tables"),
+      Invoke::pg_connector => write!(f, "pg_connector"),
+    }
+  }
+}
+
 #[derive(Serialize, Deserialize)]
 pub struct InvokePostgresConnectionArgs {
-    pub project: String,
-    pub key: String,
+  pub project: String,
+  pub key: String,
 }
 
 #[derive(Serialize, Deserialize)]
 pub struct InvokeTablesArgs {
-    pub schema: String,
+  pub schema: String,
 }
 
 #[derive(Serialize, Deserialize)]
 pub struct InvokeQueryArgs {
-    pub sql: String,
+  pub sql: String,
 }
 
 #[derive(Serialize, Deserialize)]
 pub struct InvokeProjectsArgs;
 
 #[derive(Serialize, Deserialize)]
 pub struct InvokeProjectDetailsArgs {
-    pub project: String,
+  pub project: String,
 }
 
+#[derive(Serialize, Deserialize)]
+pub struct InvokeRemoveProjectArgs {
+  pub project: String,
+}

src/sidebar.rs

@@ -1,102 +1,139 @@
 use crate::{
-    invoke::InvokeProjectsArgs, store::db::DBStore, tables::tables, wasm_functions::invoke,
+  invoke::{Invoke, InvokeProjectsArgs},
+  store::db::DBStore,
+  tables::tables,
+  wasm_functions::invoke,
 };
 use leptos::{html::*, *};
 
 pub fn sidebar() -> impl IntoView {
-    let db = use_context::<DBStore>().unwrap();
-    let get_project_details = create_action(move |(db, project): &(DBStore, String)| {
-        let mut db_clone = *db;
-        let project = project.clone();
-        async move { db_clone.get_project_details(project).await }
-    });
-    let projects = create_resource(
-        || {},
-        move |_| async move {
-            let projects = invoke(
-                "get_projects",
-                serde_wasm_bindgen::to_value(&InvokeProjectsArgs).unwrap(),
-            )
-            .await;
-            let projects = serde_wasm_bindgen::from_value::<Vec<String>>(projects).unwrap();
-            projects
-        },
-    );
-    provide_context(projects);
+  let mut db = use_context::<DBStore>().unwrap();
+  let get_project_details = create_action(move |(db, project): &(DBStore, String)| {
+    let mut db_clone = *db;
+    let project = project.clone();
+    async move { db_clone.get_project_details(project).await }
+  });
+  let projects = create_resource(
+    move || db.is_connecting.get(),
+    move |_| async move {
+      let projects = invoke(
+        &Invoke::get_projects.to_string(),
+        serde_wasm_bindgen::to_value(&InvokeProjectsArgs).unwrap_or_default(),
+      )
+      .await;
+      serde_wasm_bindgen::from_value::<Vec<String>>(projects).unwrap()
+    },
+  );
+  let remove_project = create_action(move |db: &DBStore| {
+    let mut db_clone = *db;
+    async move {
+      db_clone.remove_project().await.unwrap();
+      projects.refetch();
+    }
+  });
+  let projects_result = move || {
+    projects
+      .get()
+      .unwrap_or_default()
+      .into_iter()
+      .enumerate()
+      .map(|(idx, project)| {
+        div()
+          .attr("key", idx)
+          .attr("class", "flex flex-row justify-between items-center")
+          .child(
+            button()
+              .attr("class", "hover:font-semibold")
+              .child(&project)
+              .on(ev::click, {
+                let project = project.clone();
+                move |_| get_project_details.dispatch((db, project.clone()))
+              }),
+          )
+          .child(
+            button()
+              .attr("class", "px-2 rounded-full hover:bg-gray-200")
+              .child("-")
+              .on(ev::click, move |_| {
+                remove_project.dispatch(db);
+                projects.update(|prev| prev.as_mut().unwrap().retain(|p| p != &project.clone()));
+              }),
+          )
+      })
+      .collect_view()
+  };
 
-    div()
-        .attr(
-            "class",
-            "flex border-r-1 border-neutral-200 flex-col gap-2 px-4 pt-4 overflow-auto",
-        )
-        .child(Suspense(SuspenseProps {
-            children: ChildrenFn::to_children(move || {
-                Fragment::new(vec![div()
-                    .child(p().attr("class", "font-semibold").child("Projects"))
-                    .child(move || {
-                        projects
-                            .get()
-                            .unwrap_or(Vec::new())
-                            .into_iter()
-                            .enumerate()
-                            .map(|(idx, project)| {
-                                button()
-                                    .attr("key", idx)
-                                    .attr("class", "hover:font-semibold")
-                                    .child(&project)
-                                    .on(ev::click, move |_| {
-                                        get_project_details.dispatch((db.clone(), project.clone()))
-                                    })
-                            })
-                            .collect_view()
-                    })
-                    .into_view()])
-            }),
-            fallback: ViewFn::from(|| p().child("Loading...")),
-        }))
-        .child(p().attr("class", "font-semibold").child("Schemas"))
-        .child(Show(ShowProps {
-            when: move || db.is_connecting.get(),
-            children: ChildrenFn::to_children(move || {
-                Fragment::new(vec![p().child("Loading...").into_view()])
-            }),
-            fallback: ViewFn::from(div),
-        }))
-        .child(move || {
-            db.schemas
-                .get()
-                .into_iter()
-                .map(|(schema, toggle)| {
-                    let s = schema.clone();
-                    div()
-                        .attr("key", &schema)
-                        .child(
-                            button()
-                                .attr(
-                                    "class",
-                                    if toggle {
-                                        "font-semibold"
-                                    } else {
-                                        "hover:font-semibold"
-                                    },
-                                )
-                                .on(ev::click, move |_| {
-                                    let s_clone = s.clone();
-                                    db.schemas.update(move |prev| {
-                                        prev.insert(s_clone, !toggle);
-                                    });
-                                })
-                                .child(&schema),
-                        )
-                        .child(Show(ShowProps {
-                            when: move || toggle,
-                            children: ChildrenFn::to_children(move || {
-                                Fragment::new(vec![tables(schema.clone()).into_view()])
-                            }),
-                            fallback: ViewFn::from(div),
-                        }))
+  div()
+    .attr(
+      "class",
+      "flex border-r-1 min-w-[200px] border-neutral-200 flex-col gap-2 px-4 pt-4 overflow-auto",
+    )
+    .child(
+      div()
+        .attr("class", "flex w-full flex-row justify-between items-center")
+        .child(p().attr("class", "font-semibold").child("Projects"))
+        .child(
+          button()
+            .attr("class", "px-2 rounded-full hover:bg-gray-200")
+            .child("+")
+            .on(ev::click, move |_| db.reset()),
+        ),
+    )
+    .child(Suspense(SuspenseProps {
+      children: ChildrenFn::to_children(move || {
+        Fragment::new(vec![Show(ShowProps {
+          when: move || !projects.get().unwrap_or_default().is_empty(),
+          fallback: ViewFn::from(|| p().attr("class", "text-xs").child("No projects")),
+          children: ChildrenFn::to_children(move || {
+            Fragment::new(vec![projects_result.into_view()])
+          }),
+        })
+        .into_view()])
+      }),
+      fallback: ViewFn::from(|| p().child("Loading...")),
+    }))
+    .child(p().attr("class", "font-semibold").child("Schemas"))
+    .child(Show(ShowProps {
+      when: move || db.is_connecting.get(),
+      children: ChildrenFn::to_children(move || {
+        Fragment::new(vec![p().child("Loading...").into_view()])
+      }),
+      fallback: ViewFn::from(div),
+    }))
+    .child(move || {
+      db.schemas
+        .get()
+        .into_iter()
+        .map(|(schema, toggle)| {
+          let s = schema.clone();
+          div()
+            .attr("key", &schema)
+            .child(
+              button()
+                .attr(
+                  "class",
+                  if toggle {
+                    "font-semibold"
+                  } else {
+                    "hover:font-semibold"
+                  },
+                )
+                .on(ev::click, move |_| {
+                  let s_clone = s.clone();
+                  db.schemas.update(move |prev| {
+                    prev.insert(s_clone, !toggle);
+                  });
                 })
-                .collect_view()
+                .child(&schema),
+            )
+            .child(Show(ShowProps {
+              when: move || toggle,
+              children: ChildrenFn::to_children(move || {
+                Fragment::new(vec![tables(schema.clone()).into_view()])
+              }),
+              fallback: ViewFn::from(div),
+            }))
         })
+        .collect_view()
+    })
 }
-