Draft: Frontend of the mugen dms

Cargo.toml

@@ -1,9 +1,6 @@
 [workspace]
 resolver = "2"
-members = [
-    "backend",
-    "common",
-]
+members = ["backend", "common", "frontend"]
 
 [workspace.package]
 authors = ["koopa1338 <[email protected]>"]

backend/src/handler/docs.rs

@@ -14,6 +14,8 @@ use crate::error::ApiResult as Result;
 
 use common::models::document::Doc;
 
+use super::QueryPagination;
+
 /// Returns a router for the document resource.
 pub fn router() -> Router<AppState> {
     Router::new().nest(
@@ -43,12 +45,25 @@ pub struct QueryCategory {
 pub async fn doc_list(
     State(ref conn): State<DatabaseConnection>,
     Query(category): Query<QueryCategory>,
+    Query(QueryPagination { page, page_size }): Query<QueryPagination>,
 ) -> Result<impl IntoResponse> {
-    let docs = if let Some(category_id) = category.category_id {
-        services::docs::get_docs_by_category(category_id, conn).await
+    let docs = if let Some(page) = page {
+        let page_size = page_size.unwrap_or(50);
+        if let Some(category_id) = category.category_id {
+            services::docs::get_docs_by_category_paginated(category_id, page, page_size, conn).await
+        } else {
+            services::docs::get_docs_paginated(page, page_size, conn).await
+        }
+
     } else {
-        services::docs::get_docs(conn).await
+        if let Some(category_id) = category.category_id {
+            services::docs::get_docs_by_category(category_id, conn).await
+        } else {
+            services::docs::get_docs(conn).await
+        }
+
     };
+
     match docs {
         Ok(documents) => {
             debug!("Retrieved {} documents", documents.len());

backend/src/handler/mod.rs

@@ -1,2 +1,10 @@
+use serde::Deserialize;
+
 pub mod categories;
 pub mod docs;
+
+#[derive(Debug, Deserialize)]
+pub struct QueryPagination {
+    page: Option<u64>,
+    page_size: Option<u64>,
+}

backend/src/services/docs.rs

@@ -65,6 +65,22 @@ pub async fn get_docs(conn: &DatabaseConnection) -> Result<Vec<Doc>, DbErr> {
     Doc::get_entities(conn).await
 }
 
+#[instrument(skip(conn))]
+pub async fn get_docs_paginated(
+    page: u64,
+    page_size: u64,
+    conn: &DatabaseConnection,
+) -> Result<Vec<Doc>, DbErr> {
+    tracing::debug!("Requested documents paginated with page: {page} and page_size: {page_size}.");
+    let docs = DocumentEntity::find().paginate(conn, page_size);
+    let max_page = docs.num_pages().await?;
+    if page > max_page {
+        return Ok(Vec::new());
+    }
+
+    Ok(docs.fetch_page(page).await?.into_iter().collect::<Vec<_>>())
+}
+
 /// Returns a [Doc] entity with the specified ID from the database.
 ///
 /// ## Arguments
@@ -176,3 +192,23 @@ pub async fn get_docs_by_category(id: i32, conn: &DatabaseConnection) -> Result<
         .into_iter()
         .collect::<Vec<_>>())
 }
+
+#[instrument(skip(conn))]
+pub async fn get_docs_by_category_paginated(
+    id: i32,
+    page: u64,
+    page_size: u64,
+    conn: &DatabaseConnection,
+) -> Result<Vec<Doc>, DbErr> {
+    tracing::debug!("Fetch Documents with linked Category id {id} and paginated with page: {page} and page_size: {page_size}.");
+
+    let docs = DocumentEntity::find()
+        .filter(document::Column::CategoryId.eq(id))
+        .paginate(conn, page_size);
+    let max_page = docs.num_pages().await?;
+    if page > max_page {
+        return Ok(Vec::new());
+    }
+
+    Ok(docs.fetch_page(page).await?.into_iter().collect::<Vec<_>>())
+}

common/src/models/category.rs

@@ -1,8 +1,8 @@
 use serde::{Deserialize, Serialize};
-use ts_rs::TS;
+// use ts_rs::TS;
 
-#[derive(Clone, Debug, Eq, PartialEq, Serialize, Deserialize, TS)]
-#[ts(export)]
+#[derive(Clone, Debug, Eq, PartialEq, Serialize, Deserialize/* , TS */)]
+// #[ts(export)]
 pub struct Category {
     #[serde(skip_serializing_if = "Option::is_none")]
     pub id: Option<i32>,

common/src/models/document.rs

@@ -1,10 +1,10 @@
 use serde::{Deserialize, Deserializer, Serialize, Serializer};
-use ts_rs::TS;
+// use ts_rs::TS;
 
 use crate::DateTimeWithTimeZone;
 
-#[derive(Clone, Debug, Eq, PartialEq, Serialize, Deserialize, TS)]
-#[ts(export)]
+#[derive(Clone, Debug, Eq, PartialEq, Serialize, Deserialize/* , TS */)]
+// #[ts(export)]
 pub struct Doc {
     #[serde(skip_serializing_if = "Option::is_none")]
     pub id: Option<i64>,

frontend/.gitignore

@@ -0,0 +1,18 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
+# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
+Cargo.lock
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+# Support playwright testing
+node_modules/
+test-results/
+end2end/playwright-report/
+playwright/.cache/
+pnpm-lock.yaml
+!assets/

frontend/Cargo.toml

@@ -0,0 +1,29 @@
+[package]
+name = "mugen-frontend"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+console_error_panic_hook = { version = "0.1" }
+console_log = { version = "1" }
+gloo-net = { version = "0.5", features = ["http"] }
+gloo-utils = "0.2"
+gloo-file = { version = "0.3", features = ["futures"] }
+leptos = { version = "0.6", features = ["csr", "nightly"] }
+leptos_meta = { version = "0.6", features = ["csr", "nightly"] }
+leptos_router = { version = "0.6", features = ["csr", "nightly"] }
+log = "0.4"
+serde = { version = "1", features = ["derive"] }
+thiserror = "1"
+wasm-bindgen = { version = "0.2" }
+wasm-bindgen-futures = "0.4"
+web-sys = { version = "0.3", features = [
+  "AbortController",
+  "AbortSignal",
+  "File",
+  "FileList",
+  "DataTransfer",
+] }
+
+common = { path = "../common" }
+leptos-use = "0.9"

frontend/Makefile.toml

@@ -0,0 +1,23 @@
+[env]
+CLIENT_PROCESS_NAME = "trunk"
+RUSTFLAGS = "--cfg=web_sys_unstable_apis"
+
+[tasks.build]
+command = "trunk"
+args = ["build"]
+
+[tasks.fmt]
+command = "leptosfmt"
+args = ["."]
+
+[tasks.pkg]
+command = "trunk"
+args = ["build", "--release"]
+
+[tasks.serve]
+command = "trunk"
+args = ["serve", "${@}"]
+
+[tasks.serve-release]
+command = "trunk"
+args = ["serve", "${@}", "--release"]

frontend/Trunk.toml

@@ -0,0 +1,9 @@
+[build]
+target = "index.html"
+dist = "dist"
+
+[serve]
+# The address to serve on.
+address = "127.0.0.1"
+# The port to serve on.
+port = 3030

frontend/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en" class="h-full scrollbar-thumb-amber-600 scrollbar-track-gray-950">
+
+<head>
+    <meta charset="utf-8" />
+    <link data-trunk rel="rust" data-wasm-opt="z" />
+    <!--<link data-trunk rel="icon" type="image/ico" href="/public/favicon.ico" /> -->
+    <link data-trunk rel="copy-dir" href="assets"/>
+    <link data-trunk rel="tailwind-css" href="tailwind.css"/>
+
+    <title>Mugen DMS</title>
+</head>
+
+<body class="bg-gray-950 antialiased !p-0"></body>
+
+</html>

frontend/package.json

@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "tailwind-scrollbar": "^3.0.5",
+    "tailwindcss": "^3.3.5"
+  }
+}

frontend/rust-toolchain.toml

@@ -0,0 +1,2 @@
+[toolchain]
+channel = "nightly"

frontend/src/api.rs

@@ -0,0 +1,71 @@
+use gloo_net::http::{Method, RequestBuilder};
+use gloo_utils::errors::JsError;
+use leptos::Serializable;
+use serde::{Deserialize, Serialize};
+use thiserror::Error;
+use web_sys::AbortController;
+
+pub async fn api_call<T, P>(
+    path: &str,
+    method: Method,
+    payload: Option<P>,
+    query_params: Option<Vec<(&str, &str)>>,
+) -> Result<T, FetchError>
+where
+    T: Serializable, // this means both serializable and deserializable
+    P: Serialize,
+{
+    let abort_controller = web_sys::AbortController::new().ok();
+    let abort_signal = abort_controller.as_ref().map(AbortController::signal);
+
+    // abort in-flight requests if, e.g., we've navigated away from this page
+    leptos::on_cleanup(move || {
+        if let Some(abort_controller) = abort_controller {
+            abort_controller.abort();
+        }
+    });
+
+    let mut builder = RequestBuilder::new(&format!("http://localhost:4000/{path}"))
+        .method(method)
+        .abort_signal(abort_signal.as_ref());
+    if let Some(params) = query_params {
+        builder = builder.query(params);
+    }
+
+    let req = if let Some(payload) = payload {
+        builder
+            .json(&payload)
+            .map_err(|e| FetchError::PayloadError(e.to_string()))?
+    } else {
+        builder
+            .build()
+            .map_err(|e| FetchError::ClientError(e.to_string()))?
+    };
+
+    let json = req
+        .send()
+        .await
+        .map_err(|e| {
+            let error_message = match e {
+                gloo_net::Error::JsError(JsError { message, .. }) => message,
+                gloo_net::Error::SerdeError(e) => e.to_string(),
+                gloo_net::Error::GlooError(msg) => msg,
+            };
+            FetchError::GenericError(error_message)
+        })?
+        .text()
+        .await
+        .map_err(|e| FetchError::GenericError(e.to_string()))?;
+
+    T::de(&json).map_err(|e| FetchError::GenericError(e.to_string()))
+}
+
+#[derive(Error, Clone, Debug, Deserialize, Serialize)]
+pub enum FetchError {
+    #[error("Generic Error: {0}")]
+    GenericError(String),
+    #[error("Error initializing request client: {0}")]
+    ClientError(String),
+    #[error("Error setting payload: {0}")]
+    PayloadError(String),
+}

frontend/src/app.rs

@@ -0,0 +1,30 @@
+use leptos::*;
+use leptos_meta::*;
+use leptos_router::*;
+
+use crate::components::sidebar::Sidebar;
+use crate::routes::{about::About, dashboard::Dashboard, document::Documents};
+
+#[component]
+pub fn App() -> impl IntoView {
+    provide_meta_context();
+
+    view! {
+        <Router>
+            <Sidebar/>
+            <main class="bg-gray-950 p-3 sm:ml-60 h-screen">
+                <Routes>
+                    <Route path="/" view=Dashboard/>
+                    <Route path="/documents" view=Documents/>
+                    <Route path="/documents/:id" view=Dashboard/>
+                    <Route path="/categories/:id" view=Dashboard/>
+                    <Route path="/categories" view=Dashboard/>
+                    <Route path="/collections/:id" view=Dashboard/>
+                    <Route path="/collections" view=Dashboard/>
+                    <Route path="/settings" view=Dashboard/>
+                    <Route path="/about" view=About/>
+                </Routes>
+            </main>
+        </Router>
+    }
+}

frontend/src/components/grid.rs

@@ -0,0 +1,8 @@
+use leptos::*;
+
+#[component]
+pub fn Grid(#[prop(optional)] classes: Option<&'static str>, children: Children) -> impl IntoView {
+    let classes = classes.unwrap_or("grid-cols-1");
+
+    view! { <div class=format!("grid gap-4 {classes}")>{children()}</div> }
+}

frontend/src/components/mod.rs

@@ -0,0 +1,3 @@
+pub mod grid;
+pub mod sidebar;
+pub mod upload;