admin panel browse articles

admin-frontend/src/components/articles-list.js

+"use strict";
+
+const { fetch_all_articles } = require("../xhr");
+
+class ArticleList {
+    constructor() {
+        this.state = {
+            articles: []
+        }
+        this.fetch_list();
+    }
+
+    fetch_list() {
+        fetch_all_articles()
+            .then(articles => {
+                this.state.articles = articles;
+                this.refresh_list();
+            })
+            .catch(err => console.log(err))
+    }
+
+    refresh_list() {
+        obj2htm.subRender(this.render_list(), document.getElementById("browse-articles-results"), { mode: "replace" })
+    }
+
+    render_list() {
+        return {
+            tag: "ul",
+            id: "browse-articles-results",
+            contents: this.state.articles.map(art => {
+                return { tag: "li", contents: `[${art.locale}] <b>${art.title}</b> - ${art._id.$oid}` };
+            }),
+        }
+    }
+
+    render() {
+        return {
+            tag: "div",
+            contents: [
+                { tag: "button", onclick: this.fetch_list.bind(this), contents: "REFRESH" },
+                this.render_list()
+            ],
+        }
+    }
+}
+
+module.exports = ArticleList;
\ No newline at end of file

admin-frontend/src/components/root.js

 
 const CreateArticleForm = require("./create-article-form");
 const UpdateArticleForm = require("./update-article-form");
+const ArticleList = require("./articles-list");
 
 class RootComponent {
     constructor() {
@@ -20,6 +21,8 @@ class RootComponent {
                 return new CreateArticleForm().render();
             case "update":
                 return new UpdateArticleForm().render();
+            case "browse":
+                return new ArticleList().render();
             default:
                 return undefined;
         }
@@ -43,6 +46,11 @@ class RootComponent {
                             class: this.state.selected_tab === "update" ? "selected" : "",
                             onclick: this.handle_nav_click.bind(this),
                         },
+                        {
+                            tag: "span", contents: "Browse articles", tab_name: "browse",
+                            class: this.state.selected_tab === "browse" ? "selected" : "",
+                            onclick: this.handle_nav_click.bind(this),
+                        },
                     ],
                 },
                 this.render_state(),

admin-frontend/src/xhr.js

@@ -107,6 +107,22 @@ async function fetch_delete_article(article_id) {
     });
 }
 
+async function fetch_all_articles() {
+    return new Promise((resolve, reject) => {
+        fetch(`/articles`)
+            .then(async res => {
+                if (res.status >= 400 && res.status < 600) {
+                    const text = await res.text();
+                    reject(text)
+                } else {
+                    const json = await res.json();
+                    resolve(json);
+                }
+            })
+            .catch(err => reject(err))
+    });
+}
+
 
 module.exports = {
     fetch_article,
@@ -115,4 +131,5 @@ module.exports = {
     fetch_post_article,
     fetch_update_article,
     fetch_delete_article,
+    fetch_all_articles,
 }
\ No newline at end of file

src/main.rs

@@ -89,6 +89,7 @@ async fn main() -> std::io::Result<()> {
             .service(get_articles_by_category)
             .service(get_article)
             .service(get_article_by_title)
+            .service(get_all_articles)
             /////////////////////////////////////////////////////////////////////////////////////////////////////////////
             // STANDARD FILES ///////////////////////////////////////////////////////////////////////////////////////////
             .service(resource("/favicon.ico").route(get().to(favicon)))

src/service/articles.rs

@@ -175,6 +175,27 @@ pub async fn get_article_by_title(
     }
 }
 
+#[get("/articles")]
+pub async fn get_all_articles(app_state: Data<AppState>) -> impl Responder {
+    match get_collection(&app_state).find(None, None).await {
+        Ok(mut cursor) => {
+            let mut results: Vec<Article> = Vec::new();
+            while let Some(result) = cursor.next().await {
+                match result {
+                    Ok(article) => {
+                        results.push(article);
+                    }
+                    Err(_) => {
+                        return HttpResponse::InternalServerError().finish();
+                    }
+                }
+            }
+            HttpResponse::Ok().json(results)
+        }
+        Err(_) => HttpResponse::InternalServerError().finish(),
+    }
+}
+
 /*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*@@
  *@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*@@
  *  _______   ______    ______   _______   *@@

website/src/style.scss

@@ -383,39 +383,14 @@ main {
 				.detail {
 					display: grid;
 					grid-template-columns: 1fr auto;
+					gap: 20px;
 					font-size: 12px;
 					border-bottom: 1px solid $light_0;
-
 					padding: 5px 0;
 					label {
 						font-weight: bold;
 						color: $medium_grey;
 					}
-					ul {
-						display: flex;
-						flex-wrap: wrap;
-						gap: 10px;
-					}
-				}
-			}
-			.detail {
-				display: grid;
-				grid-template-columns: 1fr auto;
-				font-size: 12px;
-				border-bottom: 1px solid $light_0;
-
-				padding: 5px 0;
-				label {
-					font-weight: bold;
-					color: $medium_grey;
-				}
-				.label {
-					color: $light_2;
-				}
-				ul {
-					display: flex;
-					flex-wrap: wrap;
-					gap: 10px;
 				}
 			}
 		}