Improve UI of logs index

Author: Gabatxo1312

assets/css/main.css

@@ -3,6 +3,13 @@
   --bs-green: #00A46A;
   --black: #000;
   --white: #fff;
+  --terminal-background: #0d0d0d;
+  --terminal-border: #ccc;
+  --terminal-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  --terminal-red: #f44336;
+  --terminal-yellow: #ffeb3b;
+  --terminal-info: #9cdcfe;
+  --terminal-dark-grey: #555;
 }
 
 .filters .filter-item {
@@ -33,10 +40,64 @@ a {
   width: auto;
 }
 
+/* Terminal style */
+
+.log-container {
+  background: var(--terminal-background);
+  font-family: "Fira Code", monospace;
+  border: 1px solid var(--terminal-color);
+  padding: 35px;
+  border-radius: 6px;
+  overflow-y: auto;
+  box-shadow: var(--terminal-box-shadow);
+  color: var(--terminal-color);
+  border: 1px solid var(--terminal-color);
+  line-height: 1.4;
+}
+
+.log-line {
+  position: relative;
+  color: var(--white);
+  padding-left: 20px;
+  margin-bottom: 20px;
+}
+
+.log-line::before {
+  content: "$ ";
+  color: var(--terminal-dark-grey);
+  position: absolute;
+  left: -3px;
+  top: -1;
+}
+
+.log-line:last-child {
+  margin-bottom: 0px;
+}
+
+.log-line .log-red {
+  color: var(--terminal-red);
+}
+
+.log-line .log-green {
+  color: var(--bs-success);
+}
+
+.log-line .log-yellow {
+  color: var(--terminal-yellow);
+}
+
+.log-user {
+  color: var(--terminal-info);
+}
+
+.log-object {
+  color: var(--terminal-border);
+}
 
 /* Waiting for bootstrap SASS */
 
 .btn-success {
   border-color: var(--bs-success);
   background-color: var(--bs-success);
 }
+

src/database/category.rs

@@ -72,16 +72,34 @@ impl CategoryOperator {
     }
 
     /// Delete a category
-    pub async fn delete(&self, id: i32) -> Result<String, CategoryError> {
+    pub async fn delete(&self, id: i32, user: Option<User>) -> Result<String, CategoryError> {
         let db = &self.state.database;
         let category: Option<Model> = Entity::find_by_id(id).one(db).await.context(DBSnafu)?;
 
         match category {
             Some(category) => {
-                let category_name: String = category.clone().name;
+                let category_clone: Model = category.clone();
                 category.delete(db).await.context(DBSnafu)?;
 
-                Ok(category_name)
+                let operation_log = OperationLog {
+                    user,
+                    date: Utc::now(),
+                    table: Table::Category,
+                    operation: OperationType::Delete,
+                    operation_id: OperationId {
+                        object_id: category_clone.id,
+                        name: category_clone.name.to_owned(),
+                    },
+                    operation_form: None,
+                };
+
+                self.state
+                    .logger
+                    .write(operation_log)
+                    .await
+                    .context(LoggerSnafu)?;
+
+                Ok(category_clone.name)
             }
             None => Err(CategoryError::NotFound { id }),
         }
@@ -142,7 +160,7 @@ impl CategoryOperator {
                 object_id: model.id.to_owned(),
                 name: f.name.to_string(),
             },
-            operation_form: Operation::Category(f.clone()),
+            operation_form: Some(Operation::Category(f.clone())),
         };
 
         self.state

src/database/operation.rs

@@ -47,5 +47,5 @@ pub struct OperationLog {
     pub operation: OperationType,
     pub operation_id: OperationId,
     // Raw operation parameters
-    pub operation_form: Operation,
+    pub operation_form: Option<Operation>,
 }

src/routes/category.rs

@@ -72,7 +72,7 @@ pub async fn delete(
     let app_state_context = app_state.context().await?;
     let categories = CategoryOperator::new(app_state.clone(), user.clone());
 
-    let deleted = categories.delete(id).await;
+    let deleted = categories.delete(id, user.clone()).await;
 
     match deleted {
         Ok(name) => Ok(CategoriesTemplate {

src/routes/logs.rs

@@ -4,11 +4,12 @@ use axum::extract::State;
 use snafu::prelude::*;
 
 use crate::database::operation::OperationLog;
+use crate::database::operation::OperationType;
 use crate::extractors::user::User;
 use crate::state::{AppState, AppStateContext, error::*};
 
 #[derive(Template, WebTemplate)]
-#[template(path = "logs.html")]
+#[template(path = "logs/index.html")]
 pub struct LogTemplate {
     pub state: AppStateContext,
     pub logs: Vec<OperationLog>,

src/state/logger.rs

@@ -151,10 +151,10 @@ mod tests {
                 name: "object".to_string(),
                 object_id: 1,
             },
-            operation_form: Operation::Category(CategoryForm {
+            operation_form: Some(Operation::Category(CategoryForm {
                 name: "object".to_string(),
                 path: "path".to_string(),
-            }),
+            })),
         };
 
         for _i in 0..100 {
@@ -191,10 +191,10 @@ mod tests {
                 name: "object".to_string(),
                 object_id: 1,
             },
-            operation_form: Operation::Category(CategoryForm {
+            operation_form: Some(Operation::Category(CategoryForm {
                 name: "object".to_string(),
                 path: "path".to_string(),
-            }),
+            })),
         };
 
         for i in 0..200 {

templates/logs.html

@@ -0,0 +1,30 @@
+{% extends "base.html" %}
+
+{% block main %}
+  <div class="container">
+    <h1>Logs</h1>
+
+    <div class="log-container mt-4">
+      {% for log in logs %}
+        <div class="log-line">
+          <code class="text-white">
+            {% match log.operation_form %}
+              {% when Some(operation_form) %}
+                <details>
+                  <summary>
+                    {% include "logs/log_line.html" %}
+                  </summary>
+                  <p class="mt-2 mb-3">{{ operation_form }}</p>
+                </details>
+              {% when None %}
+                <p class="mb-0">
+                  {% include "logs/log_line.html" %}
+                </p>
+            {% endmatch %}
+          </code>
+        </div>
+      {% endfor %}
+      <!-- Exemple de lignes de log -->
+    </div>
+  </div>
+{% endblock %}

templates/logs/index.html

@@ -0,0 +1,14 @@
+{{ log.date.format("%Y-%m-%d %H:%M:%S").to_string() }} {% if let Some(log_user) = log.user %}{{ log_user }}{% endif %}
+<span class="
+             {% match log.operation %}
+             {% when OperationType::Create %}
+               log-green
+             {% when OperationType::Update %}
+               log-yellow
+             {% when OperationType::Delete %}
+               log-red 
+             {% else %}
+             {% endmatch %}
+"> {{ log.operation }}
+</span> on table <span class="log-table fw-bold">{{ log.table }}</span>: <span class="log-object">{{ log.operation_id.name }} ({{ log.operation_id.object_id }})</span>
+

templates/logs/log_line.html

@@ -22,6 +22,9 @@
             <li><a class="dropdown-item" href="/categories/new">new</a></li>
           </ul>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/logs">Logs</a>
+        </li>
         <!-- <li class="nav-item"> -->
         <!--   <a class="nav-link" href="/collection">Collections</a> -->
         <!-- </li> -->