From 6556828afe63476fc03546ae51e3ba5104162ee8 Mon Sep 17 00:00:00 2001 From: Vidhu Kant Sharma Date: Wed, 30 Aug 2023 14:32:42 +0530 Subject: changed clients list --- css/manage/_client.scss | 71 ++++++++++++++++++--------------- css/styles.scss | 2 + index.html | 1 + src/app/manage/client/list/list_item.rs | 32 +++------------ src/app/manage/client/list/mod.rs | 9 ++++- src/app/manage/client/mod.rs | 30 +++++++++++++- 6 files changed, 83 insertions(+), 62 deletions(-) diff --git a/css/manage/_client.scss b/css/manage/_client.scss index 36ff66a..4466a6a 100644 --- a/css/manage/_client.scss +++ b/css/manage/_client.scss @@ -4,44 +4,49 @@ width: 100%; .clients-list-wrapper { - .clients-list { - .clients-list-item { - border-bottom: 1px solid var(--link-fg); - display: flex; - flex-direction: column; - gap: 1rem; + $header-height: 3rem; + $list-item-height: 2.5rem; + $pd: 0.7em; + position: relative; - .header { - display: flex; - align-items: center; - gap: 0.5em; - font-size: 1.4em; - - .client-name { - font-weight: bold; - } + .clients-list-header, .clients-list-item { + display: grid; + grid-template-columns: 5rem 2fr 1fr 1fr; + padding: 0 $pd; + align-items: center; + } - .client-gstin { - font-size: 0.8em; - color: var(--body-fg-alt); - } - } + .clients-list-header { + $br: $pd; + background-color: var(--body-bg-alt); + width: 100%; + height: $header-height; + position: absolute; + top: 0; + left: 0; + border-bottom: 1px solid var(--link-fg); + font-weight: bold; + font-size: 1.2em; + border-radius: $br $br 0 0; + } - .details { - margin: auto; - width: 98%; - display: grid; - grid-template-columns: 1fr 1fr 2fr; + .clients-list { + border: 1px solid var(--body-bg-alt); + min-height: 40rem; + max-height: 75vh; + overflow: scroll; + width: 100%; + position: absolute; + top: $header-height; + left: 0; - .contact-info, .client-address { - display: flex; - flex-direction: column; + .clients-list-item { + grid-template-rows: $list-item-height; + font-size: 1.2em; + } - .title { - font-weight: bold; - } - } - } + .clients-list-item:nth-child(even) { + background-color: var(--body-bg-alt); } } } diff --git a/css/styles.scss b/css/styles.scss index b2f09ba..4bdf9a7 100644 --- a/css/styles.scss +++ b/css/styles.scss @@ -9,6 +9,8 @@ :root { --body-bg: #282a36; --body-fg: #f8f8f8; + //--body-bg-alt: #161720; + --body-bg-alt: #21232f; --body-fg-alt: lightgray; --nav-bg: #383a59; diff --git a/index.html b/index.html index 23d6070..daafc3d 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ + diff --git a/src/app/manage/client/list/list_item.rs b/src/app/manage/client/list/list_item.rs index 8b78ad7..2e6fed0 100644 --- a/src/app/manage/client/list/list_item.rs +++ b/src/app/manage/client/list/list_item.rs @@ -17,44 +17,22 @@ use yew::prelude::*; -use crate::app::manage::client::list::address; - use crate::models::client; #[derive(Properties, PartialEq)] pub struct Props { pub client: client::Client, + pub s_no: usize, } #[function_component(ListItem)] pub fn list_item(props: &Props) -> Html { html! {
-
- {props.client.name.clone()} - {props.client.gstin.clone()} -
- -
-
- {"Contact Details:"} - {"Name - "}{props.client.contact.contact_name.clone()} - {"Phone - "}{props.client.contact.phone_number.clone()} - {"E-Mail - "}{props.client.contact.email_address.clone()} - {"Website - "}{props.client.contact.website.clone()} -
- - - -
-
-
- -
-

- {"Options (To Be Added)"} -

-
+ {props.s_no} + {props.client.name.clone()} + {props.client.gstin.clone()} +
} } diff --git a/src/app/manage/client/list/mod.rs b/src/app/manage/client/list/mod.rs index 2e13be6..1c00f0a 100644 --- a/src/app/manage/client/list/mod.rs +++ b/src/app/manage/client/list/mod.rs @@ -31,11 +31,18 @@ pub struct Props { pub fn clients_list(props: &Props) -> Html { let list_items: Html = props.clients .iter() - .map(|c| html!()) + .enumerate() + .map(|(id, c)| html!()) .collect(); html! {
+
+ {"S. No"} + {"Client Name"} + {"GSTIN"} + +
{list_items}
diff --git a/src/app/manage/client/mod.rs b/src/app/manage/client/mod.rs index de4ac4b..12b18eb 100644 --- a/src/app/manage/client/mod.rs +++ b/src/app/manage/client/mod.rs @@ -67,10 +67,38 @@ pub fn manage_client_page() -> Html { c2s1.postal_code = "121212".to_string(); c2s1.country = "India".to_string(); c2.add_shipping_address(c2s1); - clients.push(c2); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); + clients.push(c2.clone()); html! {
+

{"To Add: Searching, Viewing, Editing, Deletion, Batch Deletion"}

} -- cgit v1.2.3