This commit is contained in:
JMARyA 2025-01-15 18:28:59 +01:00
parent 8208fa8899
commit ed739d792f
Signed by: jmarya
GPG key ID: 901B2ADDF27C2263
35 changed files with 1675 additions and 447 deletions

View 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
View 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
View 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)
}
};
}
}
}

View 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)
};
};
}
}
}
}
}