Retouched more things and added agents page

Readme.md

@@ -15,8 +15,12 @@
 - [x] Cambiar orden de el menu de unidades (poner area comun de ultimo) y quitar que se pueda varias areas comunes
 - [x] Spacing de menu de unidades
 - [x] Poner Features arriba de la desc y las imagenes de la unidad
-- [ ] Poner el logo de remax en el footer
-- [ ] Poner logos de facebook, instagram, youtube, en el footer (Sin enlaces)
+- [x] Poner el logo de remax en el footer
+- [x] Poner logos de facebook, instagram, youtube, en el footer (Sin enlaces)
 - [ ] Poner boton de solicita tu prestamo, que rediriga a remax (Se te dará el enlace), abajo de el disclaimer en la página de detalles de proyecto
 - [ ] Contenido statico folder de imagenes para la imagen de portada de inicio, que se roten aleatoriamente cada día
-- [x] Space between Unit selection menu and unit media on empty unit features
+- [x] Space between Unit selection menu and unit media on empty unit features
+- [x] Make the navbar logo bigger
+- [x] Finish agents screen
+- [ ] Finish Contact us screen
+- [ ] Link agent info with details screen, remove hardcoded pic and details

css/agent.css

@@ -0,0 +1,16 @@
+.agents-title {
+    font-size: 34px;
+    font-family: Space Grotesk;
+    text-align: center;
+    margin-bottom: 50px;
+}
+.agents-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-flow: row wrap;
+    gap: 30px;
+
+    padding: 20px;
+}

css/body.css

@@ -4,10 +4,9 @@ body {
 }
 
 .page-container {
-    padding-top: 83px;
+    padding-top: 90px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: stretch;
-
 }

css/components/agent_card.css

@@ -0,0 +1,50 @@
+.agent-card-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    
+    width: 350px;
+    height: 150px;
+
+    border-radius: 0px 20px 20px 0px;
+    border-left: 3px solid #04B2D9;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    padding: 10px;
+}
+.agent-card-text-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: start;
+    gap: 0px;
+
+    width: 200px;
+}
+.agent-card-picture {
+    object-fit: cover;
+    width: 120px;
+    height: 120px;
+    border-radius: 100%;
+    border: #02114A solid 0.5px;
+    background-color: white;
+}
+.agent-card-name {
+    font-family: Inter;
+    font-size: 20px;
+    color: #02114A;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+.agent-card-description {
+    font-family: Inter;
+    font-size: 12px;
+    color: rgb(19, 19, 19);
+    font-weight: bold;
+}
+.agent-card-phone {
+    font-size: 15px;
+    font-weight: 100;
+    color: rgba(0, 0, 0, 0.607);
+    font-family: Source Sans Pro;
+}

css/components/footer.css

@@ -34,12 +34,9 @@
     height: 100px;
 }
 .footer-remax-logo {
-    position: absolute;
-    margin-left: 140px;
-    margin-top: -15px;
     object-fit: cover;
-    width: 40px;
-    height: 40px;
+    width: 85px;
+    height: 85px;
 }
 .footer-copyright-text {
     font-size: 9px;
@@ -63,7 +60,8 @@
 
 .footer-credit-url {
     font-size: 13px;
-    font-family: Inter;
+    font-family: Space Grotesk;
+    text-decoration: none;
     color: #04B2D9;
     border-bottom: 1px solid #04B2D9;
 }

css/navbar.css

@@ -156,7 +156,7 @@
         background-color: rgb(250, 248, 248);
         border-radius: 0px;
         border-bottom: solid 0.5px #d8d8d8;
-        min-height: 60px;
+        min-height: 75px;
     }
 
     .navbar-container {
@@ -191,6 +191,13 @@
         margin-top: 0px;
     }
 
+    .navbar-image {
+        width: 60px;
+        height: 75px;
+        object-fit: cover;
+        margin-left: 20px;
+    }    
+
     .navbar-item {
         color: #000000;
         font-size: 12pt;
@@ -232,11 +239,11 @@
         justify-content: center;
 
         padding: 0px;
-        margin-top: 10px;
+        margin-top: 17px;
         margin-right: 30px;
         
-        max-height: 35px;
-        min-width: 30px;
+        max-height: 40px;
+        min-width: 45px;
         padding: 2px 10px;
         border-radius: 5px;
         cursor: pointer;

index.html

@@ -11,11 +11,13 @@
         <link data-trunk type="text/css" href="css/project_card.css" rel="css" />
         <link data-trunk type="text/css" href="css/details.css" rel="css" />
         <link data-trunk type="text/css" href="css/admin-login.css" rel="css" />
+        <link data-trunk type="text/css" href="css/agent.css" rel="css" />
         
         <link data-trunk type="text/css" href="css/components/loading.css" rel="css" />
         <link data-trunk type="text/css" href="css/components/media_slideshow.css" rel="css" />
         <link data-trunk type="text/css" href="css/components/floating_widget.css" rel="css" />
         <link data-trunk type="text/css" href="css/components/footer.css" rel="css" />
+        <link data-trunk type="text/css" href="css/components/agent_card.css" rel="css" />
         
 
 

src/api/backend/mod.rs

@@ -1,6 +1,6 @@
 use std::collections::HashSet;
 
-use jl_types::{dto::{filters::Filter, listing::Listing, project_card::ProjectCardDto}};
+use jl_types::{dto::{filters::Filter, listing::Listing, project_card::ProjectCardDto}, domain::agent::Agent};
 use reqwest::Method;
 use uuid::Uuid;
 
@@ -22,4 +22,8 @@ pub async fn get_all_projects_with_filters_paged(page: &i64, filters: Vec<Filter
 
 pub async fn get_project_listing(project_id: &Uuid) -> Result<Listing, err::Error> {
     perform_request_without_client::<String, Listing>(BASE_URL.into(), Method::GET, format!("read/project/{project_id}"), None, 200, Vec::new(), None).await
+}
+
+pub async fn get_all_agents() -> Result<Vec<Agent>, err::Error> {
+    perform_request_without_client::<String, Vec<Agent>>(BASE_URL.into(), Method::GET, format!("read/agent"), None, 200, Vec::new(), None).await
 }

src/components/agent_card.rs

@@ -0,0 +1,33 @@
+use jl_types::domain::{agent::Agent, credential::CredentialType};
+use yew::prelude::*;
+
+#[function_component(AgentCard)]
+pub fn agent_card(props: &AgentCardProps) -> Html {
+    html! {
+        <div class={"agent-card-container"}>
+            <img class={"agent-card-picture"} alt={"agent_pfp"} src={props.agent.profile_picture_url.clone()}/>
+            <div class={"agent-card-text-container"}>
+                <div class={"agent-card-description"}>
+                    {"Nombre:"}
+                </div>
+                <div class={"agent-card-name"}>
+                    {props.agent.full_name.clone()}
+                </div>
+                <div class={"agent-card-description"}>
+                    {match props.agent.credential_type {
+                        CredentialType::PhoneNumber => {"Teléfono:"},
+                        CredentialType::Email => {"Correo:"}
+                    }}
+                </div>
+                <div class={"agent-card-phone"}>
+                    {props.agent.credential.clone()}
+                </div>
+            </div>
+        </div>
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct AgentCardProps {
+    pub agent: Agent,
+}

src/components/footer.rs

@@ -23,7 +23,7 @@ pub fn page_footer() -> Html {
                 <div class={"footer-copyright-text"}>{"© 2023 Proyectos en Construcción - Todos los derechos Reservados"}</div>
                 <div class={"footer-credit-container"}>
                     <div class={"footer-credit"}>{"Powered by"}</div>
-                    <div class={"footer-credit-url"}>{"Blanco Studios"}</div>
+                    <a href={"https://blancolorenzo.pro"} class={"footer-credit-url"}>{"Blanco Lorenzo"}</a>
                 </div>
             </div>
 

src/components/mod.rs

@@ -4,4 +4,5 @@ pub mod project_card;
 pub mod media_slideshow;
 pub mod floating_widget;
 pub mod feature;
-pub mod footer;
+pub mod footer;
+pub mod agent_card;

src/pages/agents.rs

@@ -1,15 +1,38 @@
+use jl_types::domain::agent::Agent;
 use yew::prelude::*;
 
-use crate::components::{nav_bar::NavigationBar, footer::PageFooter};
+use crate::{components::{nav_bar::NavigationBar, footer::PageFooter, agent_card::AgentCard}, api::backend::get_all_agents};
 
 
 #[function_component(AgentsPage)]
 pub fn agents_page() -> Html {
-    html!{
+    let finished_loading = use_state(|| false);
+    let agents: UseStateHandle<Vec<Agent>> = use_state(|| Vec::new());
+    use_state(|| {
+        let agents = agents.clone();
+        let finished_loading = finished_loading.clone();
+        wasm_bindgen_futures::spawn_local(async move {
+           match get_all_agents().await {
+                Ok(fetched_agents) => {
+                   agents.set(fetched_agents);
+                   finished_loading.set(true);
+               },
+                Err(error) => {
+                   log::error!("Error fetching listing. Error: {:?}", error);
+               }
+           };
+        });
+    });
+    html! {
         <>
             <NavigationBar/>
-            <div class={"page-container"} style={"margin-bottom: 72vh"}> //TODO: remove this margin when landing page done
-                {"Agents Page"}
+            <div class={"page-container"} style={"margin-bottom: 20vh"}> //TODO: remove this margin when landing page done
+                <div class={"agents-title"}>
+                    {"Nuestros Agentes"}
+                </div>
+                <div class={"agents-container"}>
+                    {(*agents).iter().map(|agent| html!{ <AgentCard agent={agent.clone()}/> }).collect::<Html>()}
+                </div>
             </div>
             <PageFooter/>
         </>

src/pages/details.rs

@@ -1,5 +1,5 @@
 use jl_types::{dto::listing::Listing, domain::{unit_type::UnitType, unit::Unit}};
-use log::{error, info};
+use log::{error};
 use thousands::Separable;
 use uuid::Uuid;
 use yew::prelude::*;
@@ -22,7 +22,6 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
                 Ok(listing) => {
                     listing_handle.set(listing);
                     finished_loading.set(true);
-                    info!("Finshed loading listing");
                 },
                 Err(error) => {
                     error!("Error fetching listing. Error: {:?}", error);