filipriec/komp_ac
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working, but full width is not working, lets combine it with the full width now

Browse Source
This commit is contained in:
filipriec
2025-04-17 20:17:21 +02:00
parent bf55417901
commit d9bd6f8e1d
1 changed files with 53 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
client/src/components/admin/add_table.rs
View File

@@ -4,7 +4,7 @@ use crate::state::app::highlight::HighlightState;
use crate::state::app::state::AppState; use crate::state::app::state::AppState;
use crate::state::pages::add_table::{AddTableFocus, AddTableState}; use crate::state::pages::add_table::{AddTableFocus, AddTableState};
use crate::state::pages::canvas_state::CanvasState; 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::{ use ratatui::{
layout::{Alignment, Constraint, Direction, Layout, Rect}, layout::{Alignment, Constraint, Direction, Layout, Rect},
style::{Modifier, Style}, style::{Modifier, Style},
@@ -15,7 +15,8 @@ use ratatui::{
use crate::components::handlers::canvas::render_canvas; use crate::components::handlers::canvas::render_canvas;
/// Renders the Add New Table page layout, structuring the display of table information, /// 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( pub fn render_add_table(
f: &mut Frame, f: &mut Frame,
area: Rect, area: Rect,
@@ -25,7 +26,7 @@ pub fn render_add_table(
is_edit_mode: bool, // Determines if canvas inputs are in edit mode is_edit_mode: bool, // Determines if canvas inputs are in edit mode
highlight_state: &HighlightState, // For text highlighting in canvas 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!( let focus_on_canvas_inputs = matches!(
add_table_state.current_focus, add_table_state.current_focus,
AddTableFocus::InputTableName AddTableFocus::InputTableName
@@ -36,7 +37,7 @@ pub fn render_add_table(
// --- Main Page Block --- // --- Main Page Block ---
let main_block = Block::default() let main_block = Block::default()
.title(" Add New Table ") .title(" Add New Table ")
.title_alignment(Alignment::Center) .title_alignment(Alignment::Left)
.borders(Borders::ALL) .borders(Borders::ALL)
.border_type(BorderType::Rounded) .border_type(BorderType::Rounded)
.border_style(Style::default().fg(theme.border)) .border_style(Style::default().fg(theme.border))
@@ -45,69 +46,49 @@ pub fn render_add_table(
f.render_widget(main_block, area); f.render_widget(main_block, area);
// --- Main Vertical Layout --- // --- Main Vertical Layout ---
// Splits the page into: Top Info, Middle Area, Bottom Buttons
let main_chunks = Layout::default() let main_chunks = Layout::default()
.direction(Direction::Vertical) .direction(Direction::Vertical)
.constraints([ .constraints([
Constraint::Length(3), // Top: Profile & Committed Table Name Constraint::Length(1), // Top: Profile & Committed Table Name (Single Row)
Constraint::Min(10), // Middle: Columns | Inputs/Indexes/Links 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 Constraint::Length(3), // Bottom: Save/Cancel Buttons
]) ])
.split(inner_area); .split(inner_area);
let top_info_area = main_chunks[0]; let top_info_area = main_chunks[0];
let middle_area = main_chunks[1]; let canvas_area = main_chunks[1];
let bottom_buttons_area = main_chunks[2]; 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 --- // --- Top Info Rendering (Single Row) ---
let profile_text = Paragraph::new(vec![ let top_info_chunks = Layout::default()
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()
.direction(Direction::Horizontal) .direction(Direction::Horizontal)
.constraints([ .constraints([
Constraint::Percentage(60), // Left Pane: Columns Table Constraint::Percentage(50), // Adjust percentage as needed
Constraint::Percentage(40), // Right Pane: Inputs etc. Constraint::Percentage(50),
]) ])
.split(middle_area); .split(top_info_area);
let columns_area = middle_chunks[0]; let profile_text = Paragraph::new(Span::styled(
let right_pane_area = middle_chunks[1]; 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 --- let table_name_text = Paragraph::new(Span::styled(
// Splits vertically: Canvas, Add Button, Indexes/Links Area format!("table name: {}", add_table_state.table_name),
let right_pane_chunks = Layout::default() theme.fg,
.direction(Direction::Vertical) ))
.constraints([ .alignment(Alignment::Left); // Align left within its chunk
Constraint::Length(5), // Input Canvas Area f.render_widget(table_name_text, top_info_chunks[1]);
Constraint::Length(3), // Add Button Area
Constraint::Min(5), // Indexes & Links Area
])
.split(right_pane_area);
let canvas_area = right_pane_chunks[0]; // --- Indexes & Links Layout (Horizontal Split) ---
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
let indexes_links_chunks = Layout::default() let indexes_links_chunks = Layout::default()
.direction(Direction::Horizontal) .direction(Direction::Horizontal)
.constraints([ .constraints([
@@ -119,6 +100,8 @@ pub fn render_add_table(
let indexes_area = indexes_links_chunks[0]; let indexes_area = indexes_links_chunks[0];
let links_area = indexes_links_chunks[1]; let links_area = indexes_links_chunks[1];
// --- Widget Rendering ---
// --- Columns Table Rendering --- // --- Columns Table Rendering ---
let columns_focused = let columns_focused =
add_table_state.current_focus == AddTableFocus::ColumnsTable; add_table_state.current_focus == AddTableFocus::ColumnsTable;
@@ -151,7 +134,8 @@ pub fn render_add_table(
Block::default() Block::default()
.title(Span::styled(" Columns ", theme.fg)) .title(Span::styled(" Columns ", theme.fg))
.title_alignment(Alignment::Center) .title_alignment(Alignment::Center)
.borders(Borders::TOP | Borders::RIGHT) // Add right border .borders(Borders::ALL)
.border_type(BorderType::Rounded)
.border_style(columns_border_style), .border_style(columns_border_style),
) )
.row_highlight_style( .row_highlight_style(
@@ -166,11 +150,11 @@ pub fn render_add_table(
&mut add_table_state.column_table_state, &mut add_table_state.column_table_state,
); );
// --- Canvas Rendering --- // --- Canvas Rendering (Column Definition Input) ---
let _active_field_rect = render_canvas( let _active_field_rect = render_canvas(
f, f,
canvas_area, canvas_area,
add_table_state, // Implements CanvasState add_table_state,
&add_table_state.fields(), &add_table_state.fields(),
&add_table_state.current_field(), &add_table_state.current_field(),
&add_table_state.inputs(), &add_table_state.inputs(),
@@ -182,17 +166,18 @@ pub fn render_add_table(
// --- Button Style Helpers --- // --- Button Style Helpers ---
let get_button_style = |button_focus: AddTableFocus, current_focus| { let get_button_style = |button_focus: AddTableFocus, current_focus| {
let is_focused = current_focus == button_focus; let is_focused = current_focus == button_focus;
let mut style = Style::default().fg(if is_focused { let base_style = Style::default().fg(if is_focused {
theme.highlight theme.bg
} else { } else {
theme.secondary theme.secondary
}); });
if is_focused { if is_focused {
style = style base_style
.add_modifier(Modifier::BOLD) .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| { let get_button_border_style = |button_focus: AddTableFocus, current_focus| {
if current_focus == button_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 ") let add_button = Paragraph::new(" Add ")
.style(get_button_style( .style(get_button_style(
AddTableFocus::AddColumnButton, AddTableFocus::AddColumnButton,
@@ -218,6 +203,7 @@ pub fn render_add_table(
add_table_state.current_focus, add_table_state.current_focus,
)), )),
); );
// Render directly into the full area for the button row
f.render_widget(add_button, add_button_area); f.render_widget(add_button, add_button_area);
// --- Indexes Table Rendering --- // --- Indexes Table Rendering ---
@@ -247,7 +233,8 @@ pub fn render_add_table(
Block::default() Block::default()
.title(Span::styled(" Indexes ", theme.fg)) .title(Span::styled(" Indexes ", theme.fg))
.title_alignment(Alignment::Center) .title_alignment(Alignment::Center)
.borders(Borders::TOP | Borders::RIGHT) // Add right border .borders(Borders::ALL)
.border_type(BorderType::Rounded)
.border_style(indexes_border_style), .border_style(indexes_border_style),
) )
.row_highlight_style( .row_highlight_style(
@@ -275,24 +262,24 @@ pub fn render_add_table(
.map(|link_def| { .map(|link_def| {
Row::new(vec![ Row::new(vec![
Cell::from(link_def.linked_table_name.clone()), Cell::from(link_def.linked_table_name.clone()),
// Display checkbox style for boolean
Cell::from(if link_def.is_required { "[X]" } else { "[ ]" }), Cell::from(if link_def.is_required { "[X]" } else { "[ ]" }),
]) ])
.style(Style::default().fg(theme.fg)) .style(Style::default().fg(theme.fg))
}) })
.collect(); .collect();
let link_header_cells = ["Linked Table", "Req"] // Shortened header let link_header_cells = ["Linked Table", "Req"]
.iter() .iter()
.map(|h| Cell::from(*h).style(Style::default().fg(theme.accent))); .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 link_header = Row::new(link_header_cells).height(1).bottom_margin(1);
let links_table = 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) .header(link_header)
.block( .block(
Block::default() Block::default()
.title(Span::styled(" Links ", theme.fg)) .title(Span::styled(" Links ", theme.fg))
.title_alignment(Alignment::Center) .title_alignment(Alignment::Center)
.borders(Borders::TOP) // No left border needed here .borders(Borders::ALL)
.border_type(BorderType::Rounded)
.border_style(links_border_style), .border_style(links_border_style),
) )
.row_highlight_style( .row_highlight_style(