Retouched more things and added agents page
This commit is contained in:
parent
090d285ff9
commit
1dfcec0247
|
@ -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] 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] Spacing de menu de unidades
|
||||||
- [x] Poner Features arriba de la desc y las imagenes de la unidad
|
- [x] Poner Features arriba de la desc y las imagenes de la unidad
|
||||||
- [ ] Poner el logo de remax en el footer
|
- [x] Poner el logo de remax en el footer
|
||||||
- [ ] Poner logos de facebook, instagram, youtube, en el footer (Sin enlaces)
|
- [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
|
- [ ] 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
|
- [ ] 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
|
|
@ -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;
|
||||||
|
}
|
|
@ -4,10 +4,9 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-container {
|
.page-container {
|
||||||
padding-top: 83px;
|
padding-top: 90px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -34,12 +34,9 @@
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
}
|
||||||
.footer-remax-logo {
|
.footer-remax-logo {
|
||||||
position: absolute;
|
|
||||||
margin-left: 140px;
|
|
||||||
margin-top: -15px;
|
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
width: 40px;
|
width: 85px;
|
||||||
height: 40px;
|
height: 85px;
|
||||||
}
|
}
|
||||||
.footer-copyright-text {
|
.footer-copyright-text {
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
|
@ -63,7 +60,8 @@
|
||||||
|
|
||||||
.footer-credit-url {
|
.footer-credit-url {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-family: Inter;
|
font-family: Space Grotesk;
|
||||||
|
text-decoration: none;
|
||||||
color: #04B2D9;
|
color: #04B2D9;
|
||||||
border-bottom: 1px solid #04B2D9;
|
border-bottom: 1px solid #04B2D9;
|
||||||
}
|
}
|
||||||
|
|
|
@ -156,7 +156,7 @@
|
||||||
background-color: rgb(250, 248, 248);
|
background-color: rgb(250, 248, 248);
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
border-bottom: solid 0.5px #d8d8d8;
|
border-bottom: solid 0.5px #d8d8d8;
|
||||||
min-height: 60px;
|
min-height: 75px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-container {
|
.navbar-container {
|
||||||
|
@ -191,6 +191,13 @@
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navbar-image {
|
||||||
|
width: 60px;
|
||||||
|
height: 75px;
|
||||||
|
object-fit: cover;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-item {
|
.navbar-item {
|
||||||
color: #000000;
|
color: #000000;
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
|
@ -232,11 +239,11 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
margin-top: 10px;
|
margin-top: 17px;
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
|
|
||||||
max-height: 35px;
|
max-height: 40px;
|
||||||
min-width: 30px;
|
min-width: 45px;
|
||||||
padding: 2px 10px;
|
padding: 2px 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -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/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/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/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/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/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/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/footer.css" rel="css" />
|
||||||
|
<link data-trunk type="text/css" href="css/components/agent_card.css" rel="css" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
use std::collections::HashSet;
|
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 reqwest::Method;
|
||||||
use uuid::Uuid;
|
use uuid::Uuid;
|
||||||
|
|
||||||
|
@ -23,3 +23,7 @@ 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> {
|
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
|
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
|
||||||
|
}
|
|
@ -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,
|
||||||
|
}
|
|
@ -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-copyright-text"}>{"© 2023 Proyectos en Construcción - Todos los derechos Reservados"}</div>
|
||||||
<div class={"footer-credit-container"}>
|
<div class={"footer-credit-container"}>
|
||||||
<div class={"footer-credit"}>{"Powered by"}</div>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -5,3 +5,4 @@ pub mod media_slideshow;
|
||||||
pub mod floating_widget;
|
pub mod floating_widget;
|
||||||
pub mod feature;
|
pub mod feature;
|
||||||
pub mod footer;
|
pub mod footer;
|
||||||
|
pub mod agent_card;
|
|
@ -1,15 +1,38 @@
|
||||||
|
use jl_types::domain::agent::Agent;
|
||||||
use yew::prelude::*;
|
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)]
|
#[function_component(AgentsPage)]
|
||||||
pub fn agents_page() -> Html {
|
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/>
|
<NavigationBar/>
|
||||||
<div class={"page-container"} style={"margin-bottom: 72vh"}> //TODO: remove this margin when landing page done
|
<div class={"page-container"} style={"margin-bottom: 20vh"}> //TODO: remove this margin when landing page done
|
||||||
{"Agents Page"}
|
<div class={"agents-title"}>
|
||||||
|
{"Nuestros Agentes"}
|
||||||
|
</div>
|
||||||
|
<div class={"agents-container"}>
|
||||||
|
{(*agents).iter().map(|agent| html!{ <AgentCard agent={agent.clone()}/> }).collect::<Html>()}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<PageFooter/>
|
<PageFooter/>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
use jl_types::{dto::listing::Listing, domain::{unit_type::UnitType, unit::Unit}};
|
use jl_types::{dto::listing::Listing, domain::{unit_type::UnitType, unit::Unit}};
|
||||||
use log::{error, info};
|
use log::{error};
|
||||||
use thousands::Separable;
|
use thousands::Separable;
|
||||||
use uuid::Uuid;
|
use uuid::Uuid;
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
|
@ -22,7 +22,6 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
Ok(listing) => {
|
Ok(listing) => {
|
||||||
listing_handle.set(listing);
|
listing_handle.set(listing);
|
||||||
finished_loading.set(true);
|
finished_loading.set(true);
|
||||||
info!("Finshed loading listing");
|
|
||||||
},
|
},
|
||||||
Err(error) => {
|
Err(error) => {
|
||||||
error!("Error fetching listing. Error: {:?}", error);
|
error!("Error fetching listing. Error: {:?}", error);
|
||||||
|
|
Loading…
Reference in New Issue