Finished search filters design and functionality (UI)
This commit is contained in:
parent
f764bd08c0
commit
7c2d6018b6
|
@ -32,6 +32,12 @@ version = "1.1.0"
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa"
|
checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa"
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "base-x"
|
||||||
|
version = "0.2.11"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "4cbbc9d0964165b47557570cce6c952866c2678457aca742aafc9fb771d30270"
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "base64"
|
name = "base64"
|
||||||
version = "0.21.0"
|
version = "0.21.0"
|
||||||
|
@ -185,6 +191,12 @@ dependencies = [
|
||||||
"syn",
|
"syn",
|
||||||
]
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "discard"
|
||||||
|
version = "1.0.4"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "212d0f5754cb6769937f4501cc0e67f4f4483c8d2c3e1e922ee9edbe4ab4c7c0"
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "either"
|
name = "either"
|
||||||
version = "1.8.1"
|
version = "1.8.1"
|
||||||
|
@ -690,7 +702,9 @@ dependencies = [
|
||||||
"js-sys",
|
"js-sys",
|
||||||
"log",
|
"log",
|
||||||
"reqwest",
|
"reqwest",
|
||||||
|
"serde",
|
||||||
"serde_json",
|
"serde_json",
|
||||||
|
"stdweb",
|
||||||
"stylist",
|
"stylist",
|
||||||
"uuid",
|
"uuid",
|
||||||
"wasm-bindgen",
|
"wasm-bindgen",
|
||||||
|
@ -698,6 +712,7 @@ dependencies = [
|
||||||
"wasm-logger",
|
"wasm-logger",
|
||||||
"yew",
|
"yew",
|
||||||
"yew-router",
|
"yew-router",
|
||||||
|
"yew-utils",
|
||||||
]
|
]
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
|
@ -711,6 +726,7 @@ dependencies = [
|
||||||
"serde",
|
"serde",
|
||||||
"serde_json",
|
"serde_json",
|
||||||
"uuid",
|
"uuid",
|
||||||
|
"yew",
|
||||||
]
|
]
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
|
@ -1108,6 +1124,15 @@ version = "0.3.1"
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
checksum = "afab94fb28594581f62d981211a9a4d53cc8130bbcbbb89a0440d9b8e81a7746"
|
checksum = "afab94fb28594581f62d981211a9a4d53cc8130bbcbbb89a0440d9b8e81a7746"
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "rustc_version"
|
||||||
|
version = "0.2.3"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "138e3e0acb6c9fb258b19b67cb8abd63c00679d2851805ea151465464fe9030a"
|
||||||
|
dependencies = [
|
||||||
|
"semver",
|
||||||
|
]
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "rustls"
|
name = "rustls"
|
||||||
version = "0.20.8"
|
version = "0.20.8"
|
||||||
|
@ -1157,6 +1182,21 @@ dependencies = [
|
||||||
"untrusted",
|
"untrusted",
|
||||||
]
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "semver"
|
||||||
|
version = "0.9.0"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "1d7eb9ef2c18661902cc47e535f9bc51b78acd254da71d375c2f6720d9a40403"
|
||||||
|
dependencies = [
|
||||||
|
"semver-parser",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "semver-parser"
|
||||||
|
version = "0.7.0"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "388a1df253eca08550bef6c72392cfe7c30914bf41df5269b68cbd6ff8f570a3"
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "serde"
|
name = "serde"
|
||||||
version = "1.0.156"
|
version = "1.0.156"
|
||||||
|
@ -1211,6 +1251,21 @@ dependencies = [
|
||||||
"serde",
|
"serde",
|
||||||
]
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "sha1"
|
||||||
|
version = "0.6.1"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "c1da05c97445caa12d05e848c4a4fcbbea29e748ac28f7e80e9b010392063770"
|
||||||
|
dependencies = [
|
||||||
|
"sha1_smol",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "sha1_smol"
|
||||||
|
version = "1.0.0"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "ae1a47186c03a32177042e55dbc5fd5aee900b8e0069a8d70fba96a9375cd012"
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "siphasher"
|
name = "siphasher"
|
||||||
version = "0.3.10"
|
version = "0.3.10"
|
||||||
|
@ -1242,6 +1297,57 @@ version = "0.5.2"
|
||||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
checksum = "6e63cff320ae2c57904679ba7cb63280a3dc4613885beafb148ee7bf9aa9042d"
|
checksum = "6e63cff320ae2c57904679ba7cb63280a3dc4613885beafb148ee7bf9aa9042d"
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "stdweb"
|
||||||
|
version = "0.4.20"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "d022496b16281348b52d0e30ae99e01a73d737b2f45d38fed4edf79f9325a1d5"
|
||||||
|
dependencies = [
|
||||||
|
"discard",
|
||||||
|
"rustc_version",
|
||||||
|
"serde",
|
||||||
|
"serde_json",
|
||||||
|
"stdweb-derive",
|
||||||
|
"stdweb-internal-macros",
|
||||||
|
"stdweb-internal-runtime",
|
||||||
|
"wasm-bindgen",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "stdweb-derive"
|
||||||
|
version = "0.5.3"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "c87a60a40fccc84bef0652345bbbbbe20a605bf5d0ce81719fc476f5c03b50ef"
|
||||||
|
dependencies = [
|
||||||
|
"proc-macro2",
|
||||||
|
"quote",
|
||||||
|
"serde",
|
||||||
|
"serde_derive",
|
||||||
|
"syn",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "stdweb-internal-macros"
|
||||||
|
version = "0.2.9"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "58fa5ff6ad0d98d1ffa8cb115892b6e69d67799f6763e162a1c9db421dc22e11"
|
||||||
|
dependencies = [
|
||||||
|
"base-x",
|
||||||
|
"proc-macro2",
|
||||||
|
"quote",
|
||||||
|
"serde",
|
||||||
|
"serde_derive",
|
||||||
|
"serde_json",
|
||||||
|
"sha1",
|
||||||
|
"syn",
|
||||||
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "stdweb-internal-runtime"
|
||||||
|
version = "0.1.5"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "213701ba3370744dcd1a12960caa4843b3d68b4d1c0a5d575e0d65b2ee9d16c0"
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "stylist"
|
name = "stylist"
|
||||||
version = "0.12.0"
|
version = "0.12.0"
|
||||||
|
@ -1827,3 +1933,11 @@ dependencies = [
|
||||||
"quote",
|
"quote",
|
||||||
"syn",
|
"syn",
|
||||||
]
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "yew-utils"
|
||||||
|
version = "0.3.0"
|
||||||
|
dependencies = [
|
||||||
|
"web-sys",
|
||||||
|
"yew",
|
||||||
|
]
|
||||||
|
|
|
@ -12,18 +12,21 @@ license = "MIT OR Apache-2.0"
|
||||||
yew = { version = "0.20.0", features = ["csr"] }
|
yew = { version = "0.20.0", features = ["csr"] }
|
||||||
yew-router = "0.17"
|
yew-router = "0.17"
|
||||||
stylist = "0.12.0"
|
stylist = "0.12.0"
|
||||||
|
yew-utils = { path = "../../libs/yew-utils" }
|
||||||
|
|
||||||
# Wasm/js stuff
|
# Wasm/js stuff
|
||||||
wasm-logger = "0.2"
|
wasm-logger = "0.2"
|
||||||
wasm-bindgen = "0.2.84"
|
wasm-bindgen = "0.2.84"
|
||||||
wasm-bindgen-futures = "0.4.34"
|
wasm-bindgen-futures = "0.4.34"
|
||||||
|
stdweb = "0.4.20"
|
||||||
js-sys = "0.3"
|
js-sys = "0.3"
|
||||||
|
|
||||||
# other libs
|
# other libs
|
||||||
reqwest = { version = "0.11.11", features = ["rustls-tls", "json", "blocking"], default-features = false }
|
reqwest = { version = "0.11.11", features = ["rustls-tls", "json", "blocking"], default-features = false }
|
||||||
uuid = { version = "1.3.0", features = ["v4", "fast-rng", "macro-diagnostics", "serde", "js"] }
|
uuid = { version = "1.3.0", features = ["v4", "fast-rng", "macro-diagnostics", "serde", "js"] }
|
||||||
log = "0.4"
|
log = "0.4"
|
||||||
|
serde = { version = "1.0", features = ["derive"] }
|
||||||
serde_json = "1.0.88"
|
serde_json = "1.0.88"
|
||||||
|
|
||||||
# Core
|
# Core
|
||||||
jl-types = { path = "../jl-types" }
|
jl-types = { path = "../jl-types", features = ["yew", "wasm"] }
|
|
@ -8,5 +8,4 @@ body {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
|
||||||
}
|
}
|
|
@ -54,6 +54,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-item {
|
.navbar-item {
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
|
||||||
|
.project-listing-card {
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
121
css/search.css
121
css/search.css
|
@ -1,96 +1,71 @@
|
||||||
|
|
||||||
.property-search-container {
|
.project-search-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: stretch;
|
justify-content: stretch;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 10px 50px;
|
padding: 30px 30px;
|
||||||
flex-grow: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.property-search-bar-container {
|
.project-search-filters-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
justify-content: center;
|
gap: 25px;
|
||||||
align-items: center;
|
justify-content: stretch;
|
||||||
min-width: 300px;
|
|
||||||
max-width: 600px;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0px 20px;
|
|
||||||
min-height: 50px;
|
|
||||||
border: 0.5px solid rgba(0, 0, 0, 0.08);
|
|
||||||
border-radius: 30px;
|
|
||||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 10px;
|
|
||||||
background-color: white;
|
|
||||||
flex-grow: 1;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
color: #252631;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-search-bar {
|
|
||||||
border: 0px;
|
|
||||||
padding: 10px;
|
|
||||||
outline: none;
|
|
||||||
font-family: Source Sans Pro;
|
|
||||||
font-size: 15px;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-bar-erase-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.search-bar-erase-button:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-bar-filter-button {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 25px;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.14);
|
|
||||||
padding: 4px;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-bar-filter-button:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-search-filters-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: stretch;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.property-search-filter-item {
|
.project-search-filter-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: start;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-search-filter-label {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: Source Sans Pro;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-search-filter-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: 75px;
|
min-width: 150px;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 50px;
|
||||||
|
|
||||||
color: black;
|
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
border: 1px solid rgba(0, 0, 0, 0.0);
|
||||||
|
background-color: rgba(0, 0, 0, 0.04);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-family: Open Sans;
|
font-family: Source Sans Pro;
|
||||||
font-weight: bold;
|
font-size: 16px;
|
||||||
font-size: 15px;
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.project-search-divider {
|
||||||
|
width: 100%;
|
||||||
|
margin: 35px 30px;
|
||||||
|
height: 1px;
|
||||||
|
background-color:rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.project-search-results-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.property-search-results-container {
|
.project-search-result-card {
|
||||||
color: purple;
|
background-color: white;
|
||||||
}
|
|
||||||
|
|
||||||
.property-search-result-card {
|
|
||||||
color: orange
|
|
||||||
}
|
}
|
||||||
|
|
11
index.html
11
index.html
|
@ -4,10 +4,13 @@
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>JL</title>
|
<title>JL</title>
|
||||||
|
|
||||||
<link data-trunk type="text/css" href="css/body.css" rel="css" />
|
<link data-trunk type="text/css" href="css/body.css" rel="css" />
|
||||||
<link data-trunk type="text/css" href="css/navbar.css" rel="css" />
|
<link data-trunk type="text/css" href="css/navbar.css" rel="css" />
|
||||||
<link data-trunk type="text/css" href="css/landing.css" rel="css" />
|
<link data-trunk type="text/css" href="css/landing.css" rel="css" />
|
||||||
<link data-trunk type="text/css" href="css/search.css" rel="css" />
|
<link data-trunk type="text/css" href="css/search.css" rel="css" />
|
||||||
|
<link data-trunk type="text/css" href="css/project_card.css" rel="css" />
|
||||||
|
|
||||||
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
|
||||||
<link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
|
||||||
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
|
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
|
||||||
|
|
|
@ -1,2 +1,3 @@
|
||||||
pub mod nav_bar;
|
pub mod nav_bar;
|
||||||
pub mod search_filter;
|
pub mod search_filter;
|
||||||
|
pub mod project_card;
|
|
@ -1,7 +1,8 @@
|
||||||
|
use jl_types::domain::project_state::ProjectState;
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
use yew_router::prelude::use_navigator;
|
use yew_router::prelude::use_navigator;
|
||||||
|
|
||||||
use crate::{routes::main_router::{Route}, constants::{NAVBAR_TITLE, NAVBAR_COL_LANDING, NAVBAR_COL_PROYECTOS_ACABADOS, NAVBAR_COL_CONTACTO, NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION}, pages::search::PropertyState};
|
use crate::{routes::main_router::{Route}, constants::{NAVBAR_TITLE, NAVBAR_COL_LANDING, NAVBAR_COL_PROYECTOS_ACABADOS, NAVBAR_COL_CONTACTO, NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION}};
|
||||||
//use yew_router::prelude::use_navigator;
|
//use yew_router::prelude::use_navigator;
|
||||||
|
|
||||||
|
|
||||||
|
@ -36,11 +37,11 @@ pub fn navigation_bar() -> Html {
|
||||||
{NAVBAR_COL_LANDING}
|
{NAVBAR_COL_LANDING}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div onclick={move |_| cloned_navigator_2.push(&Route::Search { property_state: PropertyState::Finished })} class={"navbar-item"}>
|
<div onclick={move |_| cloned_navigator_2.push(&Route::Search { property_state: ProjectState::Finished })} class={"navbar-item"}>
|
||||||
{NAVBAR_COL_PROYECTOS_ACABADOS}
|
{NAVBAR_COL_PROYECTOS_ACABADOS}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div onclick={move |_| cloned_navigator_3.push(&Route::Search { property_state: PropertyState::InConstruction })} class={"navbar-item"}>
|
<div onclick={move |_| cloned_navigator_3.push(&Route::Search { property_state: ProjectState::InConstruction })} class={"navbar-item"}>
|
||||||
{NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION}
|
{NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
use jl_types::domain::project::Project;
|
||||||
|
use yew::prelude::*;
|
||||||
|
|
||||||
|
#[function_component(ProjectCard)]
|
||||||
|
pub fn project_card(_props: &Project) -> Html {
|
||||||
|
|
||||||
|
html!{
|
||||||
|
<div class={"project-listing-card"}></div>
|
||||||
|
}
|
||||||
|
}
|
|
@ -3,6 +3,7 @@ pub mod components;
|
||||||
pub mod routes;
|
pub mod routes;
|
||||||
pub mod pages;
|
pub mod pages;
|
||||||
pub mod constants;
|
pub mod constants;
|
||||||
|
pub mod utils;
|
||||||
|
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
use yew_router::{BrowserRouter, Switch};
|
use yew_router::{BrowserRouter, Switch};
|
||||||
|
@ -18,5 +19,7 @@ fn App() -> Html {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
fn main() {
|
fn main() {
|
||||||
|
wasm_logger::init(wasm_logger::Config::default());
|
||||||
|
stdweb::initialize();
|
||||||
yew::Renderer::<App>::new().render();
|
yew::Renderer::<App>::new().render();
|
||||||
}
|
}
|
|
@ -1,61 +1,141 @@
|
||||||
use std::{fmt::Display, str::FromStr};
|
use jl_types::domain::{project_state::ProjectState, project_type::ProjectType, project_condition::ProjectCondition};
|
||||||
|
use log::info;
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
|
use yew_utils::{components::drop_down::{DropDownProps, DropDown}, vdom::comp_with};
|
||||||
|
|
||||||
|
use jl_types::domain::option_wrapper::OptionWrapper;
|
||||||
use crate::components::nav_bar::NavigationBar;
|
use crate::components::nav_bar::NavigationBar;
|
||||||
|
|
||||||
|
|
||||||
#[function_component(SearchPage)]
|
#[function_component(SearchPage)]
|
||||||
pub fn search_page(_props: &SearchPageProperties) -> Html {
|
pub fn search_page(_props: &SearchPageProperties) -> Html {
|
||||||
let search_text = use_state(|| String::new());
|
// Dropdown
|
||||||
let clear_search_input = {
|
let project_type_filter: UseStateHandle<OptionWrapper<ProjectType>> = use_state(|| OptionWrapper::new(None));
|
||||||
let search_text = search_text.clone();
|
// Dropdown
|
||||||
Callback::from(move |_| {
|
let project_condition_filter: UseStateHandle<OptionWrapper<ProjectCondition>> = use_state(|| OptionWrapper::new(None));
|
||||||
search_text.set(String::new())
|
// Dropdown
|
||||||
})
|
let project_state_filter: UseStateHandle<OptionWrapper<ProjectState>> = use_state(|| OptionWrapper::new(None));
|
||||||
};
|
// Dropdown
|
||||||
|
let project_city_filter: UseStateHandle<OptionWrapper<String>> = use_state(|| OptionWrapper::new(None));
|
||||||
|
// Dropdown
|
||||||
|
let project_district_filter: UseStateHandle<OptionWrapper<String>> = use_state(|| OptionWrapper::new(None));
|
||||||
|
//TODO: Think about price filtering
|
||||||
|
// TextField
|
||||||
|
let _project_min_price_filter: UseStateHandle<OptionWrapper<f64>> = use_state(|| OptionWrapper::new(None));
|
||||||
|
// TextField
|
||||||
|
let _project_max_price_filter: UseStateHandle<OptionWrapper<f64>> = use_state(|| OptionWrapper::new(None));
|
||||||
|
|
||||||
|
|
||||||
|
let project_type_drop_down = comp_with::<DropDown<OptionWrapper<ProjectType>>>(DropDownProps {
|
||||||
|
initial: OptionWrapper::new(None),
|
||||||
|
options: vec![OptionWrapper::new(None), OptionWrapper::new(Some(ProjectType::Apartamento)), OptionWrapper::new(Some(ProjectType::Casa)), OptionWrapper::new(Some(ProjectType::Oficina)), OptionWrapper::new(Some(ProjectType::Local)), OptionWrapper::new(Some(ProjectType::Solar)) ],
|
||||||
|
selection_changed: {
|
||||||
|
let cloned_project_type_filter = project_type_filter.clone();
|
||||||
|
Callback::from(move |project_type: OptionWrapper<ProjectType>| {
|
||||||
|
info!("{}", project_type.to_string());
|
||||||
|
cloned_project_type_filter.set(project_type)
|
||||||
|
}
|
||||||
|
)},
|
||||||
|
class_css: Some("project-search-filter-item".into())
|
||||||
|
});
|
||||||
|
|
||||||
|
let project_state_drop_down = comp_with::<DropDown<OptionWrapper<ProjectState>>>(DropDownProps {
|
||||||
|
initial: OptionWrapper::new(None),
|
||||||
|
options: vec![OptionWrapper::new(None), OptionWrapper::new(Some(ProjectState::InConstruction)), OptionWrapper::new(Some(ProjectState::Finished)) ],
|
||||||
|
selection_changed: {
|
||||||
|
let cloned_project_state_filter = project_state_filter.clone();
|
||||||
|
Callback::from(move |project_state: OptionWrapper<ProjectState>| {
|
||||||
|
info!("{}", project_state.to_string());
|
||||||
|
cloned_project_state_filter.set(project_state)
|
||||||
|
}
|
||||||
|
)},
|
||||||
|
class_css: Some("project-search-filter-item".into())
|
||||||
|
});
|
||||||
|
|
||||||
|
let project_condition_drop_down = comp_with::<DropDown<OptionWrapper<ProjectCondition>>>(DropDownProps {
|
||||||
|
initial: OptionWrapper::new(None),
|
||||||
|
options: vec![OptionWrapper::new(None), OptionWrapper::new(Some(ProjectCondition::New)), OptionWrapper::new(Some(ProjectCondition::Resale)) ],
|
||||||
|
selection_changed: {
|
||||||
|
let cloned_project_condition_filter = project_condition_filter.clone();
|
||||||
|
Callback::from(move |project_condition: OptionWrapper<ProjectCondition>| {
|
||||||
|
info!("{}", project_condition.to_string());
|
||||||
|
cloned_project_condition_filter.set(project_condition)
|
||||||
|
}
|
||||||
|
)},
|
||||||
|
class_css: Some("project-search-filter-item".into())
|
||||||
|
});
|
||||||
|
|
||||||
|
let project_city_drop_down = comp_with::<DropDown<OptionWrapper<String>>>(DropDownProps {
|
||||||
|
initial: OptionWrapper::new(None),
|
||||||
|
options: vec![OptionWrapper::new(None), OptionWrapper::new(Some("Santo Domingo".into())), OptionWrapper::new(Some("Punta Cana".into())) ],
|
||||||
|
selection_changed: {
|
||||||
|
let cloned_project_city_filter = project_city_filter.clone();
|
||||||
|
Callback::from(move |project_city: OptionWrapper<String>| {
|
||||||
|
info!("{}", project_city.to_string());
|
||||||
|
cloned_project_city_filter.set(project_city)
|
||||||
|
}
|
||||||
|
)},
|
||||||
|
class_css: Some("project-search-filter-item".into())
|
||||||
|
});
|
||||||
|
|
||||||
|
//TODO: District dropdown should only show districts in city, otherwise show nothing or disabled
|
||||||
|
let project_district_drop_down = comp_with::<DropDown<OptionWrapper<String>>>(DropDownProps {
|
||||||
|
initial: OptionWrapper::new(None),
|
||||||
|
options: vec![OptionWrapper::new(None), OptionWrapper::new(Some("Evaristo Morales".into())), OptionWrapper::new(Some("Cap Cana".into())) ],
|
||||||
|
selection_changed: {
|
||||||
|
let cloned_project_district_filter = project_district_filter.clone();
|
||||||
|
Callback::from(move |project_district: OptionWrapper<String>| {
|
||||||
|
info!("{}", project_district.to_string());
|
||||||
|
cloned_project_district_filter.set(project_district)
|
||||||
|
}
|
||||||
|
)},
|
||||||
|
class_css: Some("project-search-filter-item".into())
|
||||||
|
});
|
||||||
|
|
||||||
html!{
|
html!{
|
||||||
<>
|
<>
|
||||||
<NavigationBar/>
|
<NavigationBar/>
|
||||||
<div class={"page-container"}>
|
<div class={"page-container"}>
|
||||||
<div class={"property-search-container"}>
|
<div class={"project-search-container"}>
|
||||||
<div class={"property-search-bar-container"}> // Search bar
|
<div class={"project-search-filters-container"}> // Filters
|
||||||
<i class={"fa-solid fa-magnifying-glass"}></i>
|
<div class={"project-search-filter-container"}>
|
||||||
<input type={"text"} value={(*search_text).clone()} class={"property-search-bar"} placeholder={"Buscar propiedades..."}/>
|
<div class={"project-search-filter-label"}>
|
||||||
<div class={"search-bar-erase-button"}>
|
{"Tipo de Proyecto"}
|
||||||
<i class="fa-solid fa-circle-xmark" onclick={clear_search_input}></i>
|
</div>
|
||||||
|
{project_type_drop_down}
|
||||||
</div>
|
</div>
|
||||||
<div class={"search-bar-filter-button"}>
|
|
||||||
<i class="fa-solid fa-sliders"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class={"property-search-filters-container"}> // Filters
|
<div class={"project-search-filter-container"}>
|
||||||
<div class={"property-search-filter-item"}>
|
<div class={"project-search-filter-label"}>
|
||||||
<div>{"0"}</div>
|
{"Estatus de Proyecto"}
|
||||||
<i class="fa-solid fa-bed"></i>
|
</div>
|
||||||
<div>{"+"}</div>
|
{project_state_drop_down}
|
||||||
</div>
|
</div>
|
||||||
<div class={"property-search-filter-item"}>
|
|
||||||
<div>{"0"}</div>
|
<div class={"project-search-filter-container"}>
|
||||||
<i class="fa-solid fa-ruler"></i>
|
<div class={"project-search-filter-label"}>
|
||||||
<div>{"+"}</div>
|
{"Condición de Proyecto"}
|
||||||
|
</div>
|
||||||
|
{project_condition_drop_down}
|
||||||
</div>
|
</div>
|
||||||
<div class={"property-search-filter-item"}>
|
|
||||||
<div>{"0"}</div>
|
<div class={"project-search-filter-container"}>
|
||||||
<i class="fa-solid fa-dollar-sign"></i>
|
<div class={"project-search-filter-label"}>
|
||||||
<div>{"+"}</div>
|
{"Ciudad"}
|
||||||
|
</div>
|
||||||
|
{project_city_drop_down}
|
||||||
</div>
|
</div>
|
||||||
<div class={"property-search-filter-item"}>
|
|
||||||
<div>{"0"}</div>
|
<div class={"project-search-filter-container"}>
|
||||||
<i class="fa-solid fa-hand-holding-dollar"></i>
|
<div class={"project-search-filter-label"}>
|
||||||
<div>{"+"}</div>
|
{"Sector"}
|
||||||
|
</div>
|
||||||
|
{project_district_drop_down}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class={"project-search-divider"}/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
//TODO: Add a spacing
|
|
||||||
|
|
||||||
|
|
||||||
<div class={"property-search-results-container"}> // Search Results Content
|
<div class={"property-search-results-container"}> // Search Results Content
|
||||||
<div class={"property-search-result-card"}></div>
|
<div class={"property-search-result-card"}></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -66,34 +146,5 @@ pub fn search_page(_props: &SearchPageProperties) -> Html {
|
||||||
|
|
||||||
#[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Properties)]
|
#[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Properties)]
|
||||||
pub struct SearchPageProperties {
|
pub struct SearchPageProperties {
|
||||||
pub property_state: PropertyState
|
pub property_state: ProjectState
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#[derive(Debug, Clone, Default, PartialEq, Eq, PartialOrd, Ord)]
|
|
||||||
pub enum PropertyState {
|
|
||||||
Finished,
|
|
||||||
#[default]
|
|
||||||
InConstruction,
|
|
||||||
}
|
|
||||||
|
|
||||||
impl Display for PropertyState {
|
|
||||||
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
|
|
||||||
match self {
|
|
||||||
PropertyState::Finished => write!(f, "Finished"),
|
|
||||||
PropertyState::InConstruction => write!(f, "InConstruction"),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
impl FromStr for PropertyState {
|
|
||||||
type Err = ();
|
|
||||||
|
|
||||||
fn from_str(s: &str) -> Result<Self, Self::Err> {
|
|
||||||
match s {
|
|
||||||
"Finished" => Ok(Self::Finished),
|
|
||||||
"InConstruction" => Ok(Self::InConstruction),
|
|
||||||
_ => Err(())
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
|
@ -1,16 +1,17 @@
|
||||||
|
use jl_types::domain::project_state::ProjectState;
|
||||||
use yew_router::prelude::*;
|
use yew_router::prelude::*;
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
|
|
||||||
use uuid::Uuid;
|
use uuid::Uuid;
|
||||||
|
|
||||||
use crate::{pages::{landing::LandingPage, search::{SearchPage, PropertyState}, details::DetailsPage, not_found::NotFoundPage, contact::ContactPage}};
|
use crate::{pages::{landing::LandingPage, search::{SearchPage}, details::DetailsPage, not_found::NotFoundPage, contact::ContactPage}};
|
||||||
|
|
||||||
#[derive(Clone, Routable, PartialEq)]
|
#[derive(Clone, Routable, PartialEq)]
|
||||||
pub enum Route {
|
pub enum Route {
|
||||||
#[at("/")]
|
#[at("/")]
|
||||||
LandingPage,
|
LandingPage,
|
||||||
#[at("/search/:property_state")]
|
#[at("/search/:property_state")]
|
||||||
Search { property_state: PropertyState },
|
Search { property_state: ProjectState },
|
||||||
#[at("/details/:property_id")]
|
#[at("/details/:property_id")]
|
||||||
Details { property_id: Uuid },
|
Details { property_id: Uuid },
|
||||||
#[at("/contact")]
|
#[at("/contact")]
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
pub mod get_value;
|
Loading…
Reference in New Issue