franklinblanco/jl-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finished contact screen

Browse Source
This commit is contained in:
Franklin 2023-04-26 08:41:19 -04:00
parent 5acf61c4f8
commit fffaefd120
6 changed files with 79 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/components/admin_project.css
View File

@ -6,6 +6,7 @@
gap: 5px; gap: 5px;
height: 40px; height: 40px;
max-height: fit-content;
width: 100%; width: 100%;
} }
.admin-project-container:hover { .admin-project-container:hover {
@ -51,6 +52,13 @@
text-align: start; text-align: start;
width: 100px; width: 100px;
} }
.admin-project-column-long {
font-size: 13px;
font-family: Source Sans Pro;
font-weight: 100;
text-align: start;
width: 500px;
}
.admin-project-index { .admin-project-index {
font-size: 13px; font-size: 13px;
font-family: Source Sans Pro; font-family: Source Sans Pro;

2
src/components/admin_agent.rs
View File

@ -8,8 +8,6 @@ use crate::{
routes::main_router::Route, routes::main_router::Route,
}; };
//TODO: Add admin tag
#[function_component(AdminAgent)] #[function_component(AdminAgent)]
pub fn admin_agent(props: &AdminAgentProps) -> Html { pub fn admin_agent(props: &AdminAgentProps) -> Html {
let navigator = use_navigator().unwrap(); let navigator = use_navigator().unwrap();

30
src/components/admin_contact.rs Normal file
View File

@ -0,0 +1,30 @@
use jl_types::domain::{contact::Contact};
use yew::prelude::*;
#[derive(PartialEq, Properties, Clone)]
pub struct AdminContactProps {
pub contact: Contact,
pub index: usize,
}
#[function_component(AdminContact)]
pub fn admin_contact(props: &AdminContactProps) -> Html {
html! {
<div class={"admin-project-container"}>
<div class={"admin-project-index"}>
{props.index + 1}
</div>
<div class={"admin-project-column"}>
{format!("{} {}", props.contact.first_name.clone(), props.contact.last_name.clone())}
</div>
<div class={"admin-project-column"}>
{props.contact.credential.clone()}
</div>
<div class={"admin-project-column-long"}>
{props.contact.message.clone()}
</div>
</div>
}
}

1
src/components/mod.rs
View File

@ -16,3 +16,4 @@ pub mod number_textfield;
pub mod project_card; pub mod project_card;
pub mod single_media_picker; pub mod single_media_picker;
pub mod textfield; pub mod textfield;
pub mod admin_contact;

13
src/pages/admin/contacts.rs
View File

@ -1,7 +1,7 @@
use yew::prelude::*; use yew::prelude::*;
use yew_router::prelude::use_navigator; use yew_router::prelude::use_navigator;
use crate::{api::backend::get_all_contacts, components::admin_nav_bar::AdminNavigationBar, auth_present}; use crate::{api::backend::get_all_contacts, components::{admin_nav_bar::AdminNavigationBar, admin_contact::AdminContact}, auth_present};
#[function_component(AdminContacts)] #[function_component(AdminContacts)]
pub fn admin_contacts() -> Html { pub fn admin_contacts() -> Html {
@ -28,7 +28,16 @@ pub fn admin_contacts() -> Html {
<div class={"admin-page-container"}> <div class={"admin-page-container"}>
<div class={"admin-start-container"}> <div class={"admin-start-container"}>
<div class={"admin-panel-page-title"}>{"Solicitudes de Contacto"}</div> <div class={"admin-panel-page-title"}>{"Solicitudes de Contacto"}</div>
//TODO: Finish this <div class={"admin-panel-page-title"}>{"Agentes"}</div>
<div class={"admin-projects-table"}>
<div class={"admin-navbar-divider"}></div>
{(*contacts).clone().into_iter().enumerate().map(|(key, contact)| html! {
<>
<AdminContact contact={contact} index={key}/>
<div class={"admin-navbar-divider"}></div>
</>
}).collect::<Html>()}
</div>
</div> </div>
</div> </div>
</> </>

33
src/pages/admin/start.rs
View File

@ -1,12 +1,36 @@
use yew::prelude::*; use yew::prelude::*;
use yew_router::prelude::use_navigator; use yew_router::prelude::use_navigator;
use crate::{components::admin_nav_bar::AdminNavigationBar, auth_present}; use crate::{components::admin_nav_bar::AdminNavigationBar, auth_present, api::backend, authed_call};
#[function_component(AdminStart)] #[function_component(AdminStart)]
pub fn admin_start() -> Html { pub fn admin_start() -> Html {
let navigator = use_navigator().unwrap(); let navigator = use_navigator().unwrap();
auth_present!(navigator); auth_present!(navigator);
let page_loads = use_state(|| 0);
let contact_requests = use_state(|| 0);
use_state(|| {
let navigator = navigator.clone();
let page_loads = page_loads.clone();
let contact_requests = contact_requests.clone();
wasm_bindgen_futures::spawn_local(async move {
match authed_call!(backend::get_all_page_visits_count(), navigator) {
Ok(loads) => page_loads.set(match loads.count {
Some(load) => load,
None => 0
}),
Err(_) => {}
};
match authed_call!(backend::get_all_contacts_count(), navigator) {
Ok(contacts) => contact_requests.set(match contacts.count {
Some(count) => count,
None => 0
}),
Err(_) => {}
}
});
});
html! { html! {
<> <>
<AdminNavigationBar/> <AdminNavigationBar/>
@ -16,16 +40,17 @@ pub fn admin_start() -> Html {
<div class={"admin-start-welcome-message"}>{"Bienvenido Jorge, este es tu panel de administración."}</div> <div class={"admin-start-welcome-message"}>{"Bienvenido Jorge, este es tu panel de administración."}</div>
<div class={"admin-start-page-loads-container"}> <div class={"admin-start-page-loads-container"}>
<div class={"admin-start-page-loads-label"}>{"Cargas: "}</div> <div class={"admin-start-page-loads-label"}>{"Cargas: "}</div>
<div class={"admin-start-page-loads-amount"}>{"201"}</div> <div class={"admin-start-page-loads-amount"}>{*page_loads}</div>
</div> </div>
<div class={"admin-start-page-loads-container"}> <div class={"admin-start-page-loads-container"}>
<div class={"admin-start-page-loads-label"}>{"Solicitudes de Contacto: "}</div> <div class={"admin-start-page-loads-label"}>{"Solicitudes de Contacto: "}</div>
<div class={"admin-start-page-loads-amount"}>{"10"}</div> <div class={"admin-start-page-loads-amount"}>{*contact_requests}</div>
</div> </div>
/*
<div class={"admin-start-page-loads-container"}> <div class={"admin-start-page-loads-container"}>
<div class={"admin-start-page-loads-label"}>{"Whatsapp Clicks"}</div> <div class={"admin-start-page-loads-label"}>{"Whatsapp Clicks"}</div>
<div class={"admin-start-page-loads-amount"}>{"28"}</div> <div class={"admin-start-page-loads-amount"}>{"28"}</div>
</div> </div>*/
</div> </div>
</div> </div>
</> </>