update
This commit is contained in:
parent
8208fa8899
commit
ed739d792f
35 changed files with 1675 additions and 447 deletions
77
src/ui/components/appbar.rs
Normal file
77
src/ui/components/appbar.rs
Normal file
|
@ -0,0 +1,77 @@
|
|||
use maud::{Markup, Render};
|
||||
|
||||
use crate::auth::User;
|
||||
|
||||
use crate::ui::{UIWidget, prelude::*};
|
||||
|
||||
#[allow(non_snake_case)]
|
||||
pub fn AppBar(name: &str, user: Option<User>) -> AppBarWidget {
|
||||
AppBarWidget {
|
||||
name: name.to_owned(),
|
||||
user,
|
||||
}
|
||||
}
|
||||
|
||||
pub struct AppBarWidget {
|
||||
name: String,
|
||||
user: Option<User>,
|
||||
}
|
||||
|
||||
impl Render for AppBarWidget {
|
||||
fn render(&self) -> Markup {
|
||||
self.render_with_class("")
|
||||
}
|
||||
}
|
||||
|
||||
impl UIWidget for AppBarWidget {
|
||||
fn can_inherit(&self) -> bool {
|
||||
false
|
||||
}
|
||||
|
||||
fn base_class(&self) -> Vec<String> {
|
||||
Vec::new()
|
||||
}
|
||||
|
||||
fn extended_class(&self) -> Vec<String> {
|
||||
self.base_class()
|
||||
}
|
||||
|
||||
fn render_with_class(&self, _: &str) -> Markup {
|
||||
Padding(Shadow::medium(Background(
|
||||
Gray::_800,
|
||||
Header(
|
||||
Padding(
|
||||
Flex(
|
||||
Div()
|
||||
.vanish()
|
||||
.add(
|
||||
SpaceBetween(
|
||||
Flex(Link(
|
||||
"/",
|
||||
Div()
|
||||
.vanish()
|
||||
.add(Sized(
|
||||
10,
|
||||
10,
|
||||
Rounded(Image("/favicon").alt("Logo"))
|
||||
.size(Size::Medium),
|
||||
))
|
||||
.add(Span(&self.name).semibold().xl().white()),
|
||||
))
|
||||
.items_center(),
|
||||
)
|
||||
.x(ScreenValue::_2),
|
||||
)
|
||||
.add_some(self.user.as_ref(), |user| Text(&user.username).white()),
|
||||
)
|
||||
.group()
|
||||
.justify(Justify::Between)
|
||||
.items_center(),
|
||||
)
|
||||
.x(6),
|
||||
),
|
||||
)))
|
||||
.y(2)
|
||||
.render()
|
||||
}
|
||||
}
|
7
src/ui/components/mod.rs
Normal file
7
src/ui/components/mod.rs
Normal file
|
@ -0,0 +1,7 @@
|
|||
mod appbar;
|
||||
mod search;
|
||||
mod shell;
|
||||
|
||||
pub use appbar::AppBar;
|
||||
pub use search::Search;
|
||||
pub use shell::Shell;
|
164
src/ui/components/search.rs
Normal file
164
src/ui/components/search.rs
Normal file
|
@ -0,0 +1,164 @@
|
|||
use crate::request::{RequestContext, api::Pager};
|
||||
use crate::ui::htmx::{Event, HTMXAttributes, SwapStrategy};
|
||||
use crate::ui::prelude::*;
|
||||
use maud::{PreEscaped, html};
|
||||
|
||||
/// Represents a search form with configurable options such as heading, placeholder, and CSS class.
|
||||
pub struct Search {
|
||||
post_url: String,
|
||||
heading: Option<PreEscaped<String>>,
|
||||
placeholder: Option<String>,
|
||||
search_class: Option<String>,
|
||||
}
|
||||
|
||||
impl Search {
|
||||
/// Creates a new `Search` instance with the specified post URL.
|
||||
///
|
||||
/// # Arguments
|
||||
/// * `post_url` - The URL where the search form will send the POST request.
|
||||
///
|
||||
/// # Returns
|
||||
/// A new `Search` instance with default settings.
|
||||
#[must_use]
|
||||
pub const fn new(post_url: String) -> Self {
|
||||
Self {
|
||||
heading: None,
|
||||
placeholder: None,
|
||||
post_url,
|
||||
search_class: None,
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets the placeholder text for the search input field.
|
||||
///
|
||||
/// # Arguments
|
||||
/// * `placeholder` - The placeholder text to display in the search input.
|
||||
///
|
||||
/// # Returns
|
||||
/// The updated `Search` instance.
|
||||
#[must_use]
|
||||
pub fn placeholder(mut self, placeholder: String) -> Self {
|
||||
self.placeholder = Some(placeholder);
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the heading to be displayed above the search form.
|
||||
///
|
||||
/// # Arguments
|
||||
/// * `heading` - The heading element to display.
|
||||
///
|
||||
/// # Returns
|
||||
/// The updated `Search` instance.
|
||||
#[must_use]
|
||||
pub fn heading(mut self, heading: PreEscaped<String>) -> Self {
|
||||
self.heading = Some(heading);
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the CSS class for the search input field.
|
||||
///
|
||||
/// # Arguments
|
||||
/// * `class` - The CSS class to apply to the search input.
|
||||
///
|
||||
/// # Returns
|
||||
/// The updated `Search` instance.
|
||||
#[must_use]
|
||||
pub fn search_class(mut self, class: String) -> Self {
|
||||
self.search_class = Some(class);
|
||||
self
|
||||
}
|
||||
|
||||
/// Builds the HTML for search results based on the current page and query.
|
||||
///
|
||||
/// # Arguments
|
||||
/// * `pager` - The `Pager` instance to paginate results.
|
||||
/// * `page` - The current page number.
|
||||
/// * `query` - The search query string.
|
||||
/// * `result_ui` - A function that transforms each result into HTML.
|
||||
///
|
||||
/// # Returns
|
||||
/// The HTML string containing the search results.
|
||||
pub fn build_results<T>(
|
||||
&self,
|
||||
pager: Pager<T>,
|
||||
page: i64,
|
||||
query: &str,
|
||||
result_ui: impl Fn(&T) -> PreEscaped<String>,
|
||||
) -> PreEscaped<String> {
|
||||
let results = pager.page(page as u64);
|
||||
let reslen = results.len();
|
||||
|
||||
html! {
|
||||
|
||||
@for res in results {
|
||||
(result_ui(res))
|
||||
}
|
||||
|
||||
@if reslen as u64 == pager.items_per_page {
|
||||
(Div()
|
||||
.hx_get(
|
||||
&format!("{}?query={}&page={}", self.post_url, query, page+1)
|
||||
).hx_trigger(
|
||||
Event::on_revealed()
|
||||
).hx_swap(SwapStrategy::outerHTML))
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/// Builds the full response based on the context (HTMX or full HTML response).
|
||||
///
|
||||
/// # Arguments
|
||||
/// * `ctx` - The request context, used to determine if HTMX is enabled.
|
||||
/// * `results` - The `Pager` instance containing the search results.
|
||||
/// * `page` - The current page number.
|
||||
/// * `query` - The search query string.
|
||||
/// * `result_ui` - A function that transforms each result into HTML.
|
||||
///
|
||||
/// # Returns
|
||||
/// The HTML string containing either the HTMX response or full page content.
|
||||
pub fn build_response<T>(
|
||||
&self,
|
||||
ctx: &RequestContext,
|
||||
results: Pager<T>,
|
||||
page: i64,
|
||||
query: &str,
|
||||
result_ui: impl Fn(&T) -> PreEscaped<String>,
|
||||
) -> PreEscaped<String> {
|
||||
if ctx.is_htmx {
|
||||
// Return HTMX Search elements
|
||||
self.build_results(results, page, query, result_ui)
|
||||
} else {
|
||||
// Return full rendered site
|
||||
let first_page = self.build_results(results, page, query, result_ui);
|
||||
self.build(query, first_page)
|
||||
}
|
||||
}
|
||||
|
||||
/// Builds the full search form and first search page results.
|
||||
///
|
||||
/// # Arguments
|
||||
/// * `query` - The search query string.
|
||||
/// * `first_page` - The HTML string containing the first page of search results.
|
||||
///
|
||||
/// # Returns
|
||||
/// The HTML string containing the entire search form and results UI.
|
||||
#[must_use]
|
||||
pub fn build(&self, query: &str, first_page: PreEscaped<String>) -> PreEscaped<String> {
|
||||
let no_html = Nothing();
|
||||
html! {
|
||||
(self.heading.as_ref().unwrap_or_else(|| &no_html))
|
||||
input type="search" name="query"
|
||||
value=(query)
|
||||
placeholder=(self.placeholder.as_ref().unwrap_or(&"Search...".to_string())) hx-get=(self.post_url)
|
||||
hx-trigger="input changed delay:500ms, keyup[key=='Enter'], load"
|
||||
hx-target="#search_results" hx-push-url="true"
|
||||
class=(self.search_class.as_deref().unwrap_or_default()) {};
|
||||
|
||||
div id="search_results" {
|
||||
@if !query.is_empty() {
|
||||
(first_page)
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
74
src/ui/components/shell.rs
Normal file
74
src/ui/components/shell.rs
Normal file
|
@ -0,0 +1,74 @@
|
|||
use maud::{PreEscaped, html};
|
||||
|
||||
/// Represents the HTML structure of a page shell, including the head, body class, and body content.
|
||||
///
|
||||
/// This structure is used to construct the overall HTML structure of a page, making it easier to generate consistent HTML pages dynamically.
|
||||
pub struct Shell {
|
||||
/// The HTML content for the `<head>` section of the page.
|
||||
head: PreEscaped<String>,
|
||||
/// An optional class attribute for the `<body>` element.
|
||||
body_class: Option<String>,
|
||||
/// The HTML content for the static body portion.
|
||||
body_content: PreEscaped<String>,
|
||||
}
|
||||
|
||||
impl Shell {
|
||||
/// Constructs a new `Shell` instance with the given head content, body content, and body class.
|
||||
///
|
||||
/// # Arguments
|
||||
/// * `head` - The HTML content for the page's head.
|
||||
/// * `body_content` - The HTML content for the body of the page.
|
||||
/// * `body_class` - An optional class to apply to the `<body>` element.
|
||||
///
|
||||
/// # Returns
|
||||
/// A `Shell` instance encapsulating the provided HTML content and attributes.
|
||||
#[must_use]
|
||||
pub const fn new(
|
||||
head: PreEscaped<String>,
|
||||
body_content: PreEscaped<String>,
|
||||
body_class: Option<String>,
|
||||
) -> Self {
|
||||
Self {
|
||||
head,
|
||||
body_class,
|
||||
body_content,
|
||||
}
|
||||
}
|
||||
|
||||
/// Renders the full HTML page using the shell structure, with additional content and a title.
|
||||
///
|
||||
/// # Arguments
|
||||
/// * `content` - The additional HTML content to render inside the main content div.
|
||||
/// * `title` - The title of the page, rendered inside the `<title>` element.
|
||||
///
|
||||
/// # Returns
|
||||
/// A `PreEscaped<String>` containing the full HTML page content.
|
||||
#[must_use]
|
||||
pub fn render(&self, content: PreEscaped<String>, title: &str) -> PreEscaped<String> {
|
||||
html! {
|
||||
html {
|
||||
head {
|
||||
title { (title) };
|
||||
(self.head)
|
||||
};
|
||||
@if self.body_class.is_some() {
|
||||
body class=(self.body_class.as_ref().unwrap()) {
|
||||
(self.body_content);
|
||||
|
||||
div id="main_content" {
|
||||
(content)
|
||||
};
|
||||
};
|
||||
} @else {
|
||||
body {
|
||||
(self.body_content);
|
||||
|
||||
div id="main_content" {
|
||||
(content)
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue