diff options
| -rw-r--r-- | css/manage/_client.scss | 71 | ||||
| -rw-r--r-- | css/styles.scss | 2 | ||||
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | src/app/manage/client/list/list_item.rs | 32 | ||||
| -rw-r--r-- | src/app/manage/client/list/mod.rs | 9 | ||||
| -rw-r--r-- | 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; @@ -1,6 +1,7 @@ <!DOCTYPE html> <html> <head> + <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="utf-8" /> <link data-trunk rel="sass" href="/css/styles.scss" /> <link data-trunk rel="copy-dir" href="public"> 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! { <div class={"clients-list-item"}> - <div class={"header"}> - <span class={"client-name"}>{props.client.name.clone()}</span> - <span class={"client-gstin"}>{props.client.gstin.clone()}</span> - </div> - - <div class={"details"}> - <div class={"contact-info"}> - <span class={"title"}>{"Contact Details:"}</span> - <span>{"Name - "}{props.client.contact.contact_name.clone()}</span> - <span>{"Phone - "}{props.client.contact.phone_number.clone()}</span> - <span>{"E-Mail - "}{props.client.contact.email_address.clone()}</span> - <span>{"Website - "}{props.client.contact.website.clone()}</span> - </div> - - <address::Address title={"Billing Address:"} address={props.client.billing_address.clone()} /> - - <div class={"shipping-addresses-wrapper"}> - </div> - </div> - - <div class={"options"}> - <p> - {"Options (To Be Added)"} - </p> - </div> + <span>{props.s_no}</span> + <span>{props.client.name.clone()}</span> + <span>{props.client.gstin.clone()}</span> + <span class={"options"}></span> </div> } } 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!(<list_item::ListItem key={c.id} client={c.clone()} />)) + .enumerate() + .map(|(id, c)| html!(<list_item::ListItem key={c.id} s_no={id + 1} client={c.clone()} />)) .collect(); html! { <div class={"clients-list-wrapper"}> + <div class={"clients-list-header"}> + <span>{"S. No"}</span> + <span>{"Client Name"}</span> + <span>{"GSTIN"}</span> + <span class={"options"}></span> + </div> <div class={"clients-list"}> {list_items} </div> 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! { <div id={"manage-client-page"}> + <p>{"To Add: Searching, Viewing, Editing, Deletion, Batch Deletion"}</p> <list::ClientsList clients={clients}/> </div> } |