changed clients list

author: Vidhu Kant Sharma <vidhukant@vidhukant.com> 2023-08-30 14:32:42 +0530
committer: Vidhu Kant Sharma <vidhukant@vidhukant.com> 2023-08-30 14:32:42 +0530
commit: 6556828afe63476fc03546ae51e3ba5104162ee8 (patch)
tree: 15c2b234e0c7fe3ac4b9e767d4854d4cfffe504b
parent: 4a83ed1b86783634097c50a39d7ec73fc989f657 (diff)
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>
     }
author	Vidhu Kant Sharma <vidhukant@vidhukant.com>	2023-08-30 14:32:42 +0530
committer	Vidhu Kant Sharma <vidhukant@vidhukant.com>	2023-08-30 14:32:42 +0530
commit	6556828afe63476fc03546ae51e3ba5104162ee8 (patch)
tree	15c2b234e0c7fe3ac4b9e767d4854d4cfffe504b
parent	4a83ed1b86783634097c50a39d7ec73fc989f657 (diff)