From 84822cbac1e51a49c2717ec2784220c79b0d7a9f Mon Sep 17 00:00:00 2001 From: Miroito Date: Sun, 5 Mar 2023 14:33:42 +0100 Subject: [PATCH] Better page flow --- client/src/components/base_table.rs | 3 +- client/src/components/paginated_data_table.rs | 10 ++-- client/src/templates/index.rs | 26 ++++++++--- client/src/templates/transactions.rs | 1 + client/static/tailwind.css | 46 +++++++++++++++++++ 5 files changed, 75 insertions(+), 11 deletions(-) diff --git a/client/src/components/base_table.rs b/client/src/components/base_table.rs index fd16834..0eba683 100644 --- a/client/src/components/base_table.rs +++ b/client/src/components/base_table.rs @@ -16,6 +16,7 @@ where { pub headers_view: &'a Signal>>, pub data_view: &'a Signal>>>, + pub table_class: &'a String, } #[derive(Debug, Clone)] @@ -61,7 +62,7 @@ where }); view! { cx, - table (class="table-auto bg-slate-200 text-left dark:bg-slate-800 rounded-lg mx-auto my-2") { + table (class=format!("{} table-auto bg-slate-200 text-left dark:bg-slate-800 rounded-lg mx-auto my-2", props.table_class)) { thead { tr (class="border-b-2 border-slate-500 text-center") { Keyed( diff --git a/client/src/components/paginated_data_table.rs b/client/src/components/paginated_data_table.rs index 7a39c51..21252a1 100644 --- a/client/src/components/paginated_data_table.rs +++ b/client/src/components/paginated_data_table.rs @@ -13,7 +13,7 @@ use crate::{ }; #[derive(Prop)] -pub struct PaginatedTableStateRx +pub struct PaginatedTableStateRx<'a, M, F, C> where M: 'static, C: Fn(Option, i64, i64) -> F, @@ -22,9 +22,10 @@ where pub record_label: String, pub route: C, pub filter: Option, + pub table_class: &'a String, } -impl PaginatedTableStateRx +impl<'a, M, F, C> PaginatedTableStateRx<'a, M, F, C> where M: 'static, C: Fn(Option, i64, i64) -> F, @@ -39,7 +40,7 @@ where #[component] pub fn PaginatedTable<'a, G, M, F, C>( cx: Scope<'a>, - props: PaginatedTableStateRx, + props: PaginatedTableStateRx<'a, M, F, C>, ) -> View where G: Html, @@ -53,6 +54,7 @@ where let table_prop: TableContentRx = TableContentRx { headers_view: create_signal(cx, vec![]), data_view: create_signal(cx, vec![vec![]]), + table_class: props.table_class, }; let page = create_signal(cx, 0); let n_page = create_signal(cx, 1); @@ -132,7 +134,7 @@ where } } } - BaseTable(headers_view=table_prop.headers_view, data_view=table_prop.data_view) + BaseTable(headers_view=table_prop.headers_view, data_view=table_prop.data_view, table_class=table_prop.table_class) } } } else { diff --git a/client/src/templates/index.rs b/client/src/templates/index.rs index e240114..9655b54 100644 --- a/client/src/templates/index.rs +++ b/client/src/templates/index.rs @@ -1,5 +1,4 @@ use perseus::prelude::*; -use serde::{Deserialize, Serialize}; use sycamore::prelude::*; use crate::{ @@ -18,11 +17,22 @@ use crate::{ fn index_page(cx: Scope) -> View { let global_state = Reactor::::from_cx(cx).get_global_state::(cx); + let table_classes = create_ref(cx, "w-full".to_string()); + let table_transactions_24hours: PaginatedTableStateRx = PaginatedTableStateRx { record_label: "companies".to_owned(), route: get_aggregated_transactions, - filter: Some("24".to_owned()), + filter: Some("72".to_string()), + table_class: table_classes, + }; + + let table_transactions_month: PaginatedTableStateRx = + PaginatedTableStateRx { + record_label: "companies".to_owned(), + route: get_aggregated_transactions, + filter: Some((24 * 30).to_string()), + table_class: table_classes, }; view! {cx, @@ -31,14 +41,18 @@ fn index_page(cx: Scope) -> View { TheHeader() MainContentContainer(useless_prop=1) { div(class="flex flex-wrap gap-4 justify-around") { - div () { + div (class="flex-grow") { h1 (class="mb-1 text-center") { - "Companies with transactions published" - br () {} - "in the last 24 hours" + "Latest insider activity (72h)" } PaginatedTable(table_transactions_24hours) } + div (class="flex-grow") { + h1 (class="mb-1 text-center") { + "Most activity in the past month" + } + PaginatedTable(table_transactions_month) + } } } } diff --git a/client/src/templates/transactions.rs b/client/src/templates/transactions.rs index ad92690..10445fd 100644 --- a/client/src/templates/transactions.rs +++ b/client/src/templates/transactions.rs @@ -45,6 +45,7 @@ fn transactions_page(cx: Scope, state: &TransactionsPageStateRx) -> Vie record_label: "transactions".to_owned(), route: get_transactions, filter: (*state.company_slug.get()).clone(), + table_class: create_ref(cx, "".to_string()), }; let async_select_prop: AsyncSelectRx = AsyncSelectRx { diff --git a/client/static/tailwind.css b/client/static/tailwind.css index 12fc681..db599bf 100644 --- a/client/static/tailwind.css +++ b/client/static/tailwind.css @@ -584,6 +584,10 @@ video { display: table; } +.grid { + display: grid; +} + .contents { display: contents; } @@ -612,10 +616,36 @@ video { width: 80%; } +.w-32 { + width: 8rem; +} + +.w-60 { + width: 15rem; +} + +.w-max { + width: -moz-max-content; + width: max-content; +} + +.w-fit { + width: -moz-fit-content; + width: fit-content; +} + +.w-5\/12 { + width: 41.666667%; +} + .flex-none { flex: none; } +.flex-grow { + flex-grow: 1; +} + .grow { flex-grow: 1; } @@ -632,6 +662,22 @@ video { cursor: pointer; } +.auto-cols-max { + grid-auto-columns: max-content; +} + +.grid-flow-row { + grid-auto-flow: row; +} + +.grid-flow-col { + grid-auto-flow: column; +} + +.auto-rows-max { + grid-auto-rows: max-content; +} + .flex-row { flex-direction: row; }