feat(ui): Added title to history details pane

Added the `TransactionRecord` data type
Edited History ui page to show list of `TransactionRecord`
Added Details pane to History ui tab

src/db/mod.rs

@@ -0,0 +1,3 @@
+
+pub mod transaction;
+pub use self::transaction::TransactionRecord;

src/db/transaction.rs

@@ -0,0 +1,33 @@
+use std::borrow::Cow;
+
+
+// cargo add crust_decimal
+pub struct TransactionRecord {
+    pub id: usize,
+    // pub amount: Decimal,
+    pub amount: String,
+    //pub record_date: Date,
+    pub date: String,
+}
+
+impl TransactionRecord {
+    pub fn new(id: usize, amount: String, record_date: String) -> TransactionRecord {
+        TransactionRecord {
+            id,
+            amount,
+            date: record_date
+        }
+    }
+
+    pub fn get_header() -> String {
+        return format!("  {:<7} | {:<9} | {:<10}", "Id", "Amount", "Date")
+    }
+
+    pub fn to_string(&self) -> String {
+        return format!("  T{:0>6} | {:>9} | {:>10}", self.id, self.amount, self.date)
+    }
+
+    pub fn as_str(&self) -> Cow<str> {
+        return self.to_string().into()
+    }
+}

src/lib.rs

@@ -6,3 +6,4 @@ pub mod tui;
 pub mod ui;
 
 pub mod uis;
+pub mod db;

src/main.rs

@@ -1,6 +1,5 @@
 use std::io;
 use std::time::Duration;
-use crossterm::event::{self, Event, KeyCode, KeyEventKind};
 
 use ratatui::{
     backend::CrosstermBackend,

src/uis/history.rs

@@ -1,21 +1,21 @@
 use crossterm::event::{KeyEvent, KeyEventKind, KeyCode};
-use ratatui::{backend::Backend, Frame, layout::Rect, widgets::{Block, Borders, List, ListItem}, text::Text, style::{Style, Color, Modifier}};
+use ratatui::{backend::Backend, Frame, layout::{Rect, Layout, Direction, Constraint}, widgets::{Block, Borders, List, ListItem, Paragraph}, text::{Text, Line, Span}, style::{Style, Color, Modifier}};
-use crate::app::{App, StatefulList};
+use crate::{app::{App, StatefulList}, db::TransactionRecord};
 
 
 pub struct HistoryState {
-    pub transacts_list: StatefulList<String>
+    pub transacts_list: StatefulList<TransactionRecord>
 }
 
 impl HistoryState {
     pub fn new() -> HistoryState {
         HistoryState {
             transacts_list: StatefulList::with_items(vec![
-                "Item0".to_string(),
+                TransactionRecord::new(1, "$10.00".to_string(), "05-01-2020".to_string()),
-                "Item1".to_string(),
+                TransactionRecord::new(2, "$10.00".to_string(), "05-01-2020".to_string()),
-                "Item2".to_string(),
+                TransactionRecord::new(3, "$10.00".to_string(), "05-01-2020".to_string()),
-                "Item3".to_string(),
+                TransactionRecord::new(4, "$10.00".to_string(), "05-01-2020".to_string()),
-                "Item4".to_string(),
+                TransactionRecord::new(5, "$10.00".to_string(), "05-01-2020".to_string()),
                 ])
         }
     }
@@ -34,6 +34,56 @@ impl HistoryState {
 }
 
 pub fn render_history_tab<B: Backend> (f: &mut Frame<B>, body_rect: Rect, app: &mut App) {
+
+    let split_body = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
+        .split(body_rect);
+
+    let mut lines: Vec<Line> = vec![];
+    if app.states.history.transacts_list.state.selected().is_some(){
+        let selected_item: &TransactionRecord = &app.states.history.transacts_list.items[app.states.history.transacts_list.state.selected().unwrap()];
+
+        let ident_style: Style = Style::default().fg(Color::Yellow);
+        let value_style: Style = Style::default().fg(Color::LightBlue);
+
+        lines.push(
+            Line::from(vec![
+                Span::styled("Transaction Id: ", ident_style),
+                Span::styled(format!("T{:0>6}", selected_item.id), value_style),
+            ])
+        );
+        lines.push(
+            Line::from(vec![
+                Span::styled("Amount: ", ident_style),
+                Span::styled(format!("{}", selected_item.amount), value_style)
+            ])
+        );
+        lines.push(
+            Line::from(vec![
+                Span::styled("Transaction Date: ", ident_style),
+                Span::styled(format!("{}", selected_item.date), value_style)
+            ])
+        );
+    }
+
+    let paragraph = Paragraph::new(lines.clone())
+        .block(Block::default().borders(Borders::ALL).title("Details").title_alignment(ratatui::layout::Alignment::Left));
+
+    f.render_widget(paragraph, split_body[1]);
+
+
+    let list_chunks = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([Constraint::Length(1), Constraint::Min(3)])
+        .split(split_body[0]);
+
+    let list_header = Paragraph::new(
+        Text::styled(TransactionRecord::get_header(), Style::default().fg(Color::Black).bg(Color::Cyan))
+    ).block(Block::default().borders(Borders::NONE));
+
+    f.render_widget(list_header, list_chunks[0]);
+
     // Iterate through all elements in the `items` app and append some debug text to it.
     let items: Vec<ListItem> = app
         .states.history.transacts_list
@@ -52,5 +102,5 @@ pub fn render_history_tab<B: Backend> (f: &mut Frame<B>, body_rect: Rect, app: &
                 .add_modifier(Modifier::BOLD)
         );
 
-    f.render_stateful_widget(history_items, body_rect, &mut app.states.history.transacts_list.state)
+    f.render_stateful_widget(history_items, list_chunks[1], &mut app.states.history.transacts_list.state)
 }