From d9bd6f8e1ddff148d6fc2a81f2181782640de453 Mon Sep 17 00:00:00 2001 From: filipriec Date: Thu, 17 Apr 2025 20:17:21 +0200 Subject: [PATCH] working, but full width is not working, lets combine it with the full width now --- client/src/components/admin/add_table.rs | 119 ++++++++++------------- 1 file changed, 53 insertions(+), 66 deletions(-) diff --git a/client/src/components/admin/add_table.rs b/client/src/components/admin/add_table.rs index e0c21ad..d2cfbbe 100644 --- a/client/src/components/admin/add_table.rs +++ b/client/src/components/admin/add_table.rs @@ -4,7 +4,7 @@ use crate::state::app::highlight::HighlightState; use crate::state::app::state::AppState; use crate::state::pages::add_table::{AddTableFocus, AddTableState}; use crate::state::pages::canvas_state::CanvasState; -use crate::state::pages::add_table::{ColumnDefinition, LinkDefinition}; +// use crate::state::pages::add_table::{ColumnDefinition, LinkDefinition}; // Not directly used here use ratatui::{ layout::{Alignment, Constraint, Direction, Layout, Rect}, style::{Modifier, Style}, @@ -15,7 +15,8 @@ use ratatui::{ use crate::components::handlers::canvas::render_canvas; /// Renders the Add New Table page layout, structuring the display of table information, -/// input fields, and action buttons. +/// input fields, and action buttons, following the provided screenshot layout +/// with profile/table name on one line and a full-width Add button. pub fn render_add_table( f: &mut Frame, area: Rect, @@ -25,7 +26,7 @@ pub fn render_add_table( is_edit_mode: bool, // Determines if canvas inputs are in edit mode highlight_state: &HighlightState, // For text highlighting in canvas ) { - // Determine if focus is on canvas inputs vs other elements + // --- State Checks --- let focus_on_canvas_inputs = matches!( add_table_state.current_focus, AddTableFocus::InputTableName @@ -36,7 +37,7 @@ pub fn render_add_table( // --- Main Page Block --- let main_block = Block::default() .title(" Add New Table ") - .title_alignment(Alignment::Center) + .title_alignment(Alignment::Left) .borders(Borders::ALL) .border_type(BorderType::Rounded) .border_style(Style::default().fg(theme.border)) @@ -45,69 +46,49 @@ pub fn render_add_table( f.render_widget(main_block, area); // --- Main Vertical Layout --- - // Splits the page into: Top Info, Middle Area, Bottom Buttons let main_chunks = Layout::default() .direction(Direction::Vertical) .constraints([ - Constraint::Length(3), // Top: Profile & Committed Table Name - Constraint::Min(10), // Middle: Columns | Inputs/Indexes/Links + Constraint::Length(1), // Top: Profile & Committed Table Name (Single Row) + Constraint::Length(5), // Column Definition Input Canvas Area + Constraint::Length(3), // Add Button Area + Constraint::Min(5), // Columns Table Area + Constraint::Min(5), // Indexes & Links Area Constraint::Length(3), // Bottom: Save/Cancel Buttons ]) .split(inner_area); let top_info_area = main_chunks[0]; - let middle_area = main_chunks[1]; - let bottom_buttons_area = main_chunks[2]; + let canvas_area = main_chunks[1]; + let add_button_area = main_chunks[2]; + let columns_area = main_chunks[3]; + let indexes_links_area = main_chunks[4]; + let bottom_buttons_area = main_chunks[5]; - // --- Top Info Rendering --- - let profile_text = Paragraph::new(vec![ - Line::from(Span::styled( - format!("profile: {}", add_table_state.profile_name), - theme.fg, - )), - // Display the *committed* table name from the state - Line::from(Span::styled( - format!("table name: {}", add_table_state.table_name), - theme.fg, - )), - ]) - .block( - Block::default() - .borders(Borders::BOTTOM) - .border_style(Style::default().fg(theme.secondary)), - ); - f.render_widget(profile_text, top_info_area); - - // --- Middle Area Layout --- - // Splits into: Left (Columns Table) | Right (Inputs & Other Tables) - let middle_chunks = Layout::default() + // --- Top Info Rendering (Single Row) --- + let top_info_chunks = Layout::default() .direction(Direction::Horizontal) .constraints([ - Constraint::Percentage(60), // Left Pane: Columns Table - Constraint::Percentage(40), // Right Pane: Inputs etc. + Constraint::Percentage(50), // Adjust percentage as needed + Constraint::Percentage(50), ]) - .split(middle_area); + .split(top_info_area); - let columns_area = middle_chunks[0]; - let right_pane_area = middle_chunks[1]; + let profile_text = Paragraph::new(Span::styled( + format!("profile: {}", add_table_state.profile_name), + theme.fg, + )) + .alignment(Alignment::Left); // Align left within its chunk + f.render_widget(profile_text, top_info_chunks[0]); - // --- Right Pane Layout --- - // Splits vertically: Canvas, Add Button, Indexes/Links Area - let right_pane_chunks = Layout::default() - .direction(Direction::Vertical) - .constraints([ - Constraint::Length(5), // Input Canvas Area - Constraint::Length(3), // Add Button Area - Constraint::Min(5), // Indexes & Links Area - ]) - .split(right_pane_area); + let table_name_text = Paragraph::new(Span::styled( + format!("table name: {}", add_table_state.table_name), + theme.fg, + )) + .alignment(Alignment::Left); // Align left within its chunk + f.render_widget(table_name_text, top_info_chunks[1]); - let canvas_area = right_pane_chunks[0]; - let add_button_area = right_pane_chunks[1]; - let indexes_links_area = right_pane_chunks[2]; - - // --- Indexes & Links Layout --- - // Splits horizontally within their allocated area + // --- Indexes & Links Layout (Horizontal Split) --- let indexes_links_chunks = Layout::default() .direction(Direction::Horizontal) .constraints([ @@ -119,6 +100,8 @@ pub fn render_add_table( let indexes_area = indexes_links_chunks[0]; let links_area = indexes_links_chunks[1]; + // --- Widget Rendering --- + // --- Columns Table Rendering --- let columns_focused = add_table_state.current_focus == AddTableFocus::ColumnsTable; @@ -151,7 +134,8 @@ pub fn render_add_table( Block::default() .title(Span::styled(" Columns ", theme.fg)) .title_alignment(Alignment::Center) - .borders(Borders::TOP | Borders::RIGHT) // Add right border + .borders(Borders::ALL) + .border_type(BorderType::Rounded) .border_style(columns_border_style), ) .row_highlight_style( @@ -166,11 +150,11 @@ pub fn render_add_table( &mut add_table_state.column_table_state, ); - // --- Canvas Rendering --- + // --- Canvas Rendering (Column Definition Input) --- let _active_field_rect = render_canvas( f, canvas_area, - add_table_state, // Implements CanvasState + add_table_state, &add_table_state.fields(), &add_table_state.current_field(), &add_table_state.inputs(), @@ -182,17 +166,18 @@ pub fn render_add_table( // --- Button Style Helpers --- let get_button_style = |button_focus: AddTableFocus, current_focus| { let is_focused = current_focus == button_focus; - let mut style = Style::default().fg(if is_focused { - theme.highlight + let base_style = Style::default().fg(if is_focused { + theme.bg } else { theme.secondary }); if is_focused { - style = style + base_style .add_modifier(Modifier::BOLD) - .add_modifier(Modifier::REVERSED); + .bg(theme.highlight) + } else { + base_style } - style }; let get_button_border_style = |button_focus: AddTableFocus, current_focus| { if current_focus == button_focus { @@ -202,7 +187,7 @@ pub fn render_add_table( } }; - // --- Add Button Rendering --- + // --- Add Button Rendering (Full Width) --- let add_button = Paragraph::new(" Add ") .style(get_button_style( AddTableFocus::AddColumnButton, @@ -218,6 +203,7 @@ pub fn render_add_table( add_table_state.current_focus, )), ); + // Render directly into the full area for the button row f.render_widget(add_button, add_button_area); // --- Indexes Table Rendering --- @@ -247,7 +233,8 @@ pub fn render_add_table( Block::default() .title(Span::styled(" Indexes ", theme.fg)) .title_alignment(Alignment::Center) - .borders(Borders::TOP | Borders::RIGHT) // Add right border + .borders(Borders::ALL) + .border_type(BorderType::Rounded) .border_style(indexes_border_style), ) .row_highlight_style( @@ -275,24 +262,24 @@ pub fn render_add_table( .map(|link_def| { Row::new(vec![ Cell::from(link_def.linked_table_name.clone()), - // Display checkbox style for boolean Cell::from(if link_def.is_required { "[X]" } else { "[ ]" }), ]) .style(Style::default().fg(theme.fg)) }) .collect(); - let link_header_cells = ["Linked Table", "Req"] // Shortened header + let link_header_cells = ["Linked Table", "Req"] .iter() .map(|h| Cell::from(*h).style(Style::default().fg(theme.accent))); let link_header = Row::new(link_header_cells).height(1).bottom_margin(1); let links_table = - Table::new(link_rows, [Constraint::Percentage(80), Constraint::Min(5)]) // Adjust constraints + Table::new(link_rows, [Constraint::Percentage(80), Constraint::Min(5)]) .header(link_header) .block( Block::default() .title(Span::styled(" Links ", theme.fg)) .title_alignment(Alignment::Center) - .borders(Borders::TOP) // No left border needed here + .borders(Borders::ALL) + .border_type(BorderType::Rounded) .border_style(links_border_style), ) .row_highlight_style(