aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--css/manage/_client.scss71
-rw-r--r--css/styles.scss2
-rw-r--r--index.html1
-rw-r--r--src/app/manage/client/list/list_item.rs32
-rw-r--r--src/app/manage/client/list/mod.rs9
-rw-r--r--src/app/manage/client/mod.rs30
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 @@
<!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>
}