NotAShelf
2f31242442
Signed-off-by: NotAShelf <raf@notashelf.dev> Change-Id: If5a21f16221f3c56a8008e139f93edc46a6a6964
865 lines
38 KiB
Rust
865 lines
38 KiB
Rust
use dioxus::prelude::*;
|
|
|
|
use super::pagination::Pagination as PaginationControls;
|
|
use super::utils::{format_size, media_category, type_badge_class, type_icon};
|
|
use crate::client::{CollectionResponse, MediaResponse, TagResponse};
|
|
|
|
#[derive(Debug, Clone, Copy, PartialEq)]
|
|
pub enum ViewMode {
|
|
Grid,
|
|
Table,
|
|
}
|
|
|
|
/// The set of type filter categories available to the user.
|
|
const TYPE_FILTERS: &[&str] = &["all", "audio", "video", "image", "document", "text"];
|
|
|
|
/// Human-readable label for a type filter value.
|
|
fn filter_label(f: &str) -> &str {
|
|
match f {
|
|
"all" => "All",
|
|
"audio" => "Audio",
|
|
"video" => "Video",
|
|
"image" => "Image",
|
|
"document" => "Document",
|
|
"text" => "Text",
|
|
_ => f,
|
|
}
|
|
}
|
|
|
|
/// Parse the current sort field string into (column, direction) so table
|
|
/// headers can show the correct arrow indicator.
|
|
fn parse_sort(sort: &str) -> (&str, &str) {
|
|
if let Some(col) = sort.strip_suffix("_asc") {
|
|
(col, "asc")
|
|
} else if let Some(col) = sort.strip_suffix("_desc") {
|
|
(col, "desc")
|
|
} else {
|
|
(sort, "asc")
|
|
}
|
|
}
|
|
|
|
/// Return the sort arrow indicator for a table column header. Returns an empty
|
|
/// string when the column is not the active sort column.
|
|
fn sort_arrow(current_sort: &str, column: &str) -> &'static str {
|
|
let (col, dir) = parse_sort(current_sort);
|
|
if col == column {
|
|
if dir == "asc" {
|
|
" \u{25b2}"
|
|
} else {
|
|
" \u{25bc}"
|
|
}
|
|
} else {
|
|
""
|
|
}
|
|
}
|
|
|
|
/// Compute the next sort value when a table column header is clicked. If the
|
|
/// column is already sorted ascending, flip to descending and vice-versa.
|
|
/// Otherwise default to ascending.
|
|
fn next_sort(current_sort: &str, column: &str) -> String {
|
|
let (col, dir) = parse_sort(current_sort);
|
|
if col == column {
|
|
let new_dir = if dir == "asc" { "desc" } else { "asc" };
|
|
format!("{column}_{new_dir}")
|
|
} else {
|
|
format!("{column}_asc")
|
|
}
|
|
}
|
|
|
|
#[component]
|
|
pub fn Library(
|
|
media: Vec<MediaResponse>,
|
|
tags: Vec<TagResponse>,
|
|
collections: Vec<CollectionResponse>,
|
|
total_count: u64,
|
|
current_page: u64,
|
|
page_size: u64,
|
|
server_url: String,
|
|
on_select: EventHandler<String>,
|
|
on_delete: EventHandler<String>,
|
|
on_batch_delete: EventHandler<Vec<String>>,
|
|
on_batch_tag: EventHandler<(Vec<String>, Vec<String>)>,
|
|
on_batch_collection: EventHandler<(Vec<String>, String)>,
|
|
on_page_change: EventHandler<u64>,
|
|
on_page_size_change: EventHandler<u64>,
|
|
on_sort_change: EventHandler<String>,
|
|
#[props(default)] on_select_all_global: Option<EventHandler<EventHandler<Vec<String>>>>,
|
|
#[props(default)] on_delete_all: Option<EventHandler<()>>,
|
|
) -> Element {
|
|
let mut selected_ids = use_signal(Vec::<String>::new);
|
|
let mut select_all = use_signal(|| false);
|
|
let mut confirm_delete = use_signal(|| Option::<String>::None);
|
|
let mut confirm_batch_delete = use_signal(|| false);
|
|
let mut confirm_delete_all = use_signal(|| false);
|
|
let mut show_batch_tag = use_signal(|| false);
|
|
let mut batch_tag_selection = use_signal(Vec::<String>::new);
|
|
let mut show_batch_collection = use_signal(|| false);
|
|
let mut batch_collection_id = use_signal(String::new);
|
|
let mut view_mode = use_signal(|| ViewMode::Grid);
|
|
let mut sort_field = use_signal(|| "created_at_desc".to_string());
|
|
let mut type_filter = use_signal(|| "all".to_string());
|
|
// Track the last-clicked index for shift+click range selection.
|
|
let mut last_click_index = use_signal(|| Option::<usize>::None);
|
|
// True when all items across all pages have been selected.
|
|
let mut global_all_selected = use_signal(|| false);
|
|
|
|
if media.is_empty() && total_count == 0 {
|
|
return rsx! {
|
|
div { class: "empty-state",
|
|
h3 { class: "empty-title", "No media found" }
|
|
p { class: "empty-subtitle",
|
|
"Import files or scan your root directories to get started."
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
// Apply client-side type filter.
|
|
let active_filter = type_filter.read().clone();
|
|
let filtered_media: Vec<MediaResponse> = if active_filter == "all" {
|
|
media.clone()
|
|
} else {
|
|
media
|
|
.iter()
|
|
.filter(|m| media_category(&m.media_type) == active_filter.as_str())
|
|
.cloned()
|
|
.collect()
|
|
};
|
|
let filtered_count = filtered_media.len();
|
|
|
|
let all_ids: Vec<String> = filtered_media.iter().map(|m| m.id.clone()).collect();
|
|
// Read selection once to avoid repeated signal reads in loops
|
|
let current_selection: Vec<String> = selected_ids.read().clone();
|
|
let selection_count = current_selection.len();
|
|
let has_selection = selection_count > 0;
|
|
let total_pages = total_count.div_ceil(page_size);
|
|
|
|
let toggle_select_all = {
|
|
let all_ids = all_ids.clone();
|
|
move |_| {
|
|
let new_val = !*select_all.read();
|
|
select_all.set(new_val);
|
|
global_all_selected.set(false);
|
|
if new_val {
|
|
selected_ids.set(all_ids.clone());
|
|
} else {
|
|
selected_ids.set(Vec::new());
|
|
}
|
|
}
|
|
};
|
|
|
|
let is_all_selected = *select_all.read();
|
|
let current_mode = *view_mode.read();
|
|
let current_sort = sort_field.read().clone();
|
|
|
|
rsx! {
|
|
// Confirmation dialog for single delete
|
|
if confirm_delete.read().is_some() {
|
|
div {
|
|
class: "modal-overlay",
|
|
onclick: move |_| confirm_delete.set(None),
|
|
div {
|
|
class: "modal",
|
|
onclick: move |e: Event<MouseData>| e.stop_propagation(),
|
|
h3 { class: "modal-title", "Confirm Delete" }
|
|
p { class: "modal-body",
|
|
"Are you sure you want to delete this media item? This cannot be undone."
|
|
}
|
|
div { class: "modal-actions",
|
|
button {
|
|
class: "btn btn-ghost",
|
|
onclick: move |_| confirm_delete.set(None),
|
|
"Cancel"
|
|
}
|
|
button {
|
|
class: "btn btn-danger",
|
|
onclick: move |_| {
|
|
if let Some(id) = confirm_delete.read().clone() {
|
|
on_delete.call(id);
|
|
}
|
|
confirm_delete.set(None);
|
|
},
|
|
"Delete"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Confirmation dialog for batch delete
|
|
if *confirm_batch_delete.read() {
|
|
div {
|
|
class: "modal-overlay",
|
|
onclick: move |_| confirm_batch_delete.set(false),
|
|
div {
|
|
class: "modal",
|
|
onclick: move |e: Event<MouseData>| e.stop_propagation(),
|
|
h3 { class: "modal-title", "Confirm Batch Delete" }
|
|
p { class: "modal-body",
|
|
"Are you sure you want to delete {selection_count} selected items? This cannot be undone."
|
|
}
|
|
div { class: "modal-actions",
|
|
button {
|
|
class: "btn btn-ghost",
|
|
onclick: move |_| confirm_batch_delete.set(false),
|
|
"Cancel"
|
|
}
|
|
button {
|
|
class: "btn btn-danger",
|
|
onclick: move |_| {
|
|
let ids = selected_ids.read().clone();
|
|
on_batch_delete.call(ids);
|
|
selected_ids.set(Vec::new());
|
|
select_all.set(false);
|
|
confirm_batch_delete.set(false);
|
|
},
|
|
"Delete All"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Confirmation dialog for delete all
|
|
if *confirm_delete_all.read() {
|
|
div {
|
|
class: "modal-overlay",
|
|
onclick: move |_| confirm_delete_all.set(false),
|
|
div {
|
|
class: "modal",
|
|
onclick: move |e: Event<MouseData>| e.stop_propagation(),
|
|
h3 { class: "modal-title", "Delete All Media" }
|
|
p { class: "modal-body",
|
|
"Are you sure you want to delete ALL {total_count} items? This cannot be undone."
|
|
}
|
|
div { class: "modal-actions",
|
|
button {
|
|
class: "btn btn-ghost",
|
|
onclick: move |_| confirm_delete_all.set(false),
|
|
"Cancel"
|
|
}
|
|
button {
|
|
class: "btn btn-danger",
|
|
onclick: move |_| {
|
|
if let Some(handler) = on_delete_all {
|
|
handler.call(());
|
|
}
|
|
selected_ids.set(Vec::new());
|
|
select_all.set(false);
|
|
global_all_selected.set(false);
|
|
confirm_delete_all.set(false);
|
|
},
|
|
"Delete Everything"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Batch tag dialog
|
|
if *show_batch_tag.read() {
|
|
div {
|
|
class: "modal-overlay",
|
|
onclick: move |_| {
|
|
show_batch_tag.set(false);
|
|
batch_tag_selection.set(Vec::new());
|
|
},
|
|
div {
|
|
class: "modal",
|
|
onclick: move |e: Event<MouseData>| e.stop_propagation(),
|
|
h3 { class: "modal-title", "Tag Selected Items" }
|
|
p { class: "modal-body text-muted text-sm",
|
|
"Select tags to apply to {selection_count} items:"
|
|
}
|
|
if tags.is_empty() {
|
|
p { class: "text-muted", "No tags available. Create tags first." }
|
|
} else {
|
|
div { class: "tag-list", style: "margin: 12px 0;",
|
|
for tag in tags.iter() {
|
|
{
|
|
let tag_id = tag.id.clone();
|
|
let tag_name = tag.name.clone();
|
|
let is_selected = batch_tag_selection.read().contains(&tag_id);
|
|
let badge_class = if is_selected { "tag-badge selected" } else { "tag-badge" };
|
|
rsx! {
|
|
span {
|
|
class: "{badge_class}",
|
|
onclick: {
|
|
let tag_id = tag_id.clone();
|
|
move |_| {
|
|
let mut current = batch_tag_selection.read().clone();
|
|
if let Some(pos) = current.iter().position(|t| t == &tag_id) {
|
|
current.remove(pos);
|
|
} else {
|
|
current.push(tag_id.clone());
|
|
}
|
|
batch_tag_selection.set(current);
|
|
}
|
|
},
|
|
"{tag_name}"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div { class: "modal-actions",
|
|
button {
|
|
class: "btn btn-ghost",
|
|
onclick: move |_| {
|
|
show_batch_tag.set(false);
|
|
batch_tag_selection.set(Vec::new());
|
|
},
|
|
"Cancel"
|
|
}
|
|
button {
|
|
class: "btn btn-primary",
|
|
onclick: move |_| {
|
|
let ids = selected_ids.read().clone();
|
|
let tag_ids = batch_tag_selection.read().clone();
|
|
if !tag_ids.is_empty() {
|
|
on_batch_tag.call((ids, tag_ids));
|
|
selected_ids.set(Vec::new());
|
|
select_all.set(false);
|
|
}
|
|
show_batch_tag.set(false);
|
|
batch_tag_selection.set(Vec::new());
|
|
},
|
|
"Apply Tags"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Batch collection dialog
|
|
if *show_batch_collection.read() {
|
|
div {
|
|
class: "modal-overlay",
|
|
onclick: move |_| {
|
|
show_batch_collection.set(false);
|
|
batch_collection_id.set(String::new());
|
|
},
|
|
div {
|
|
class: "modal",
|
|
onclick: move |e: Event<MouseData>| e.stop_propagation(),
|
|
h3 { class: "modal-title", "Add to Collection" }
|
|
p { class: "modal-body text-muted text-sm",
|
|
"Choose a collection for {selection_count} items:"
|
|
}
|
|
if collections.is_empty() {
|
|
p { class: "text-muted", "No collections available. Create one first." }
|
|
} else {
|
|
select {
|
|
style: "width: 100%; margin: 12px 0;",
|
|
value: "{batch_collection_id}",
|
|
onchange: move |e: Event<FormData>| batch_collection_id.set(e.value()),
|
|
option { value: "", "Select a collection..." }
|
|
for col in collections.iter() {
|
|
option { key: "{col.id}", value: "{col.id}", "{col.name}" }
|
|
}
|
|
}
|
|
}
|
|
div { class: "modal-actions",
|
|
button {
|
|
class: "btn btn-ghost",
|
|
onclick: move |_| {
|
|
show_batch_collection.set(false);
|
|
batch_collection_id.set(String::new());
|
|
},
|
|
"Cancel"
|
|
}
|
|
button {
|
|
class: "btn btn-primary",
|
|
onclick: move |_| {
|
|
let ids = selected_ids.read().clone();
|
|
let col_id = batch_collection_id.read().clone();
|
|
if !col_id.is_empty() {
|
|
on_batch_collection.call((ids, col_id));
|
|
selected_ids.set(Vec::new());
|
|
select_all.set(false);
|
|
}
|
|
show_batch_collection.set(false);
|
|
batch_collection_id.set(String::new());
|
|
},
|
|
"Add to Collection"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Toolbar: view toggle, sort, batch actions
|
|
div { class: "library-toolbar",
|
|
div { class: "toolbar-left",
|
|
// View mode toggle
|
|
div { class: "view-toggle",
|
|
button {
|
|
class: if current_mode == ViewMode::Grid { "view-btn active" } else { "view-btn" },
|
|
onclick: move |_| view_mode.set(ViewMode::Grid),
|
|
title: "Grid view",
|
|
"\u{25a6}"
|
|
}
|
|
button {
|
|
class: if current_mode == ViewMode::Table { "view-btn active" } else { "view-btn" },
|
|
onclick: move |_| view_mode.set(ViewMode::Table),
|
|
title: "Table view",
|
|
"\u{2630}"
|
|
}
|
|
}
|
|
|
|
// Sort selector
|
|
div { class: "sort-control",
|
|
select {
|
|
value: "{sort_field}",
|
|
onchange: move |e: Event<FormData>| {
|
|
let val = e.value();
|
|
sort_field.set(val.clone());
|
|
on_sort_change.call(val);
|
|
},
|
|
option { value: "created_at_desc", "Newest first" }
|
|
option { value: "created_at_asc", "Oldest first" }
|
|
option { value: "file_name_asc", "Name A-Z" }
|
|
option { value: "file_name_desc", "Name Z-A" }
|
|
option { value: "file_size_desc", "Largest first" }
|
|
option { value: "file_size_asc", "Smallest first" }
|
|
option { value: "media_type_asc", "Type" }
|
|
}
|
|
}
|
|
|
|
// Page size
|
|
div { class: "page-size-control",
|
|
span { class: "text-muted text-sm", "Show:" }
|
|
select {
|
|
value: "{page_size}",
|
|
onchange: move |e: Event<FormData>| {
|
|
if let Ok(size) = e.value().parse::<u64>() {
|
|
on_page_size_change.call(size);
|
|
}
|
|
},
|
|
option { value: "24", "24" }
|
|
option { value: "48", "48" }
|
|
option { value: "96", "96" }
|
|
option { value: "200", "200" }
|
|
}
|
|
}
|
|
}
|
|
|
|
div { class: "toolbar-right",
|
|
// Select All / Deselect All toggle (works in both grid and table)
|
|
{
|
|
let all_ids2 = all_ids.clone();
|
|
rsx! {
|
|
button {
|
|
class: "btn btn-sm btn-ghost",
|
|
onclick: move |_| {
|
|
if is_all_selected {
|
|
selected_ids.set(Vec::new());
|
|
select_all.set(false);
|
|
global_all_selected.set(false);
|
|
} else {
|
|
selected_ids.set(all_ids2.clone());
|
|
select_all.set(true);
|
|
}
|
|
},
|
|
if is_all_selected {
|
|
"Deselect All"
|
|
} else {
|
|
"Select All"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if has_selection {
|
|
div { class: "batch-actions",
|
|
span { "{selection_count} selected" }
|
|
button {
|
|
class: "btn btn-sm btn-secondary",
|
|
onclick: move |_| show_batch_tag.set(true),
|
|
"Tag"
|
|
}
|
|
button {
|
|
class: "btn btn-sm btn-secondary",
|
|
onclick: move |_| show_batch_collection.set(true),
|
|
"Collection"
|
|
}
|
|
button {
|
|
class: "btn btn-sm btn-danger",
|
|
onclick: move |_| confirm_batch_delete.set(true),
|
|
"Delete"
|
|
}
|
|
button {
|
|
class: "btn btn-sm btn-ghost",
|
|
onclick: move |_| {
|
|
selected_ids.set(Vec::new());
|
|
select_all.set(false);
|
|
global_all_selected.set(false);
|
|
},
|
|
"Clear"
|
|
}
|
|
}
|
|
}
|
|
if on_delete_all.is_some() && total_count > 0 {
|
|
button {
|
|
class: "btn btn-sm btn-danger",
|
|
onclick: move |_| confirm_delete_all.set(true),
|
|
"Delete All"
|
|
}
|
|
}
|
|
span { class: "text-muted text-sm", "{total_count} items" }
|
|
}
|
|
}
|
|
|
|
// Type filter chips
|
|
div { class: "type-filter-row",
|
|
for filter in TYPE_FILTERS.iter() {
|
|
{
|
|
let f = (*filter).to_string();
|
|
let is_active = active_filter == f;
|
|
let chip_class = if is_active { "filter-chip active" } else { "filter-chip" };
|
|
let label = filter_label(filter);
|
|
rsx! {
|
|
button {
|
|
key: "{f}",
|
|
class: "{chip_class}",
|
|
onclick: {
|
|
let f = f.clone();
|
|
move |_| {
|
|
type_filter.set(f.clone());
|
|
}
|
|
},
|
|
"{label}"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Stats summary row
|
|
div { class: "library-stats",
|
|
span { class: "text-muted text-sm",
|
|
if active_filter != "all" {
|
|
"Showing {filtered_count} of {total_count} items (filtered: {active_filter})"
|
|
} else {
|
|
"Showing {filtered_count} items"
|
|
}
|
|
}
|
|
span { class: "text-muted text-sm", "Page {current_page + 1} of {total_pages}" }
|
|
}
|
|
|
|
// Select-all banner: when all items on this page are selected and there
|
|
// are more pages, offer to select everything across all pages.
|
|
if is_all_selected && total_count > page_size && !*global_all_selected.read() {
|
|
div { class: "select-all-banner",
|
|
"All {filtered_count} items on this page are selected."
|
|
if on_select_all_global.is_some() {
|
|
button {
|
|
onclick: move |_| {
|
|
if let Some(handler) = on_select_all_global {
|
|
handler
|
|
.call(
|
|
EventHandler::new(move |all_ids: Vec<String>| {
|
|
selected_ids.set(all_ids);
|
|
global_all_selected.set(true);
|
|
}),
|
|
);
|
|
}
|
|
},
|
|
"Select all {total_count} items"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if *global_all_selected.read() {
|
|
div { class: "select-all-banner",
|
|
"All {selection_count} items across all pages are selected."
|
|
button {
|
|
onclick: move |_| {
|
|
selected_ids.set(Vec::new());
|
|
select_all.set(false);
|
|
global_all_selected.set(false);
|
|
},
|
|
"Clear selection"
|
|
}
|
|
}
|
|
}
|
|
|
|
// Content: grid or table
|
|
match current_mode {
|
|
ViewMode::Grid => rsx! {
|
|
div { class: "media-grid",
|
|
for (idx , item) in filtered_media.iter().enumerate() {
|
|
{
|
|
let id = item.id.clone();
|
|
let badge_class = type_badge_class(&item.media_type);
|
|
let is_checked = current_selection.contains(&id);
|
|
|
|
// Build a list of all visible IDs for shift+click range selection.
|
|
|
|
// Shift+click: select range from last_click_index to current idx.
|
|
// No previous click, just toggle this one.
|
|
|
|
// Thumbnail with CSS fallback: both the icon and img
|
|
// are rendered. The img is absolutely positioned on
|
|
// top. If the image fails to load, the icon beneath
|
|
// shows through.
|
|
|
|
// Thumbnail with CSS fallback: icon always
|
|
// rendered, img overlays when available.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let card_click = {
|
|
let id = item.id.clone();
|
|
move |_| on_select.call(id.clone())
|
|
};
|
|
|
|
let visible_ids: Vec<String> = filtered_media
|
|
|
|
.iter()
|
|
.map(|m| m.id.clone())
|
|
.collect();
|
|
let toggle_id = {
|
|
let id = id.clone();
|
|
move |e: Event<MouseData>| {
|
|
e.stop_propagation();
|
|
let shift = e.modifiers().shift();
|
|
let mut ids = selected_ids.read().clone();
|
|
if shift {
|
|
if let Some(last) = *last_click_index.read() {
|
|
let start = last.min(idx);
|
|
let end = last.max(idx);
|
|
for i in start..=end {
|
|
if let Some(range_id) = visible_ids.get(i)
|
|
&& !ids.contains(range_id)
|
|
{
|
|
ids.push(range_id.clone());
|
|
}
|
|
}
|
|
} else {
|
|
if !ids.contains(&id) {
|
|
ids.push(id.clone());
|
|
}
|
|
}
|
|
} else if ids.contains(&id) {
|
|
ids.retain(|x| x != &id);
|
|
} else {
|
|
ids.push(id.clone());
|
|
}
|
|
last_click_index.set(Some(idx));
|
|
selected_ids.set(ids);
|
|
}
|
|
};
|
|
let thumb_url = if item.has_thumbnail {
|
|
format!("{}/api/v1/media/{}/thumbnail", server_url, item.id)
|
|
} else {
|
|
String::new()
|
|
};
|
|
let has_thumb = item.has_thumbnail;
|
|
let media_type = item.media_type.clone();
|
|
let card_class = if is_checked { "media-card selected" } else { "media-card" };
|
|
let title_text = item.title.clone().unwrap_or_default();
|
|
let artist_text = item.artist.clone().unwrap_or_default();
|
|
rsx! {
|
|
div { key: "{item.id}", class: "{card_class}", onclick: card_click,
|
|
|
|
|
|
|
|
div { class: "card-checkbox",
|
|
input { r#type: "checkbox", checked: is_checked, onclick: toggle_id }
|
|
}
|
|
|
|
div { class: "card-thumbnail",
|
|
div { class: "card-type-icon {badge_class}", "{type_icon(&media_type)}" }
|
|
if has_thumb {
|
|
img {
|
|
class: "card-thumb-img",
|
|
src: "{thumb_url}",
|
|
alt: "{item.file_name}",
|
|
loading: "lazy",
|
|
}
|
|
}
|
|
}
|
|
|
|
div { class: "card-info",
|
|
div { class: "card-name", title: "{item.file_name}", "{item.file_name}" }
|
|
if !title_text.is_empty() {
|
|
div { class: "card-title text-muted text-xs", "{title_text}" }
|
|
}
|
|
if !artist_text.is_empty() {
|
|
div { class: "card-artist text-muted text-xs", "{artist_text}" }
|
|
}
|
|
div { class: "card-meta",
|
|
span { class: "type-badge {badge_class}", "{item.media_type}" }
|
|
span { class: "card-size", "{format_size(item.file_size)}" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
ViewMode::Table => rsx! {
|
|
table { class: "data-table",
|
|
thead {
|
|
tr {
|
|
th {
|
|
input {
|
|
r#type: "checkbox",
|
|
checked: is_all_selected,
|
|
onclick: toggle_select_all,
|
|
}
|
|
}
|
|
th { "" }
|
|
th {
|
|
class: "sortable-header",
|
|
onclick: {
|
|
let cs = current_sort.clone();
|
|
move |_| {
|
|
let val = next_sort(&cs, "file_name");
|
|
sort_field.set(val.clone());
|
|
on_sort_change.call(val);
|
|
}
|
|
},
|
|
"Name{sort_arrow(¤t_sort, \"file_name\")}"
|
|
}
|
|
th {
|
|
class: "sortable-header",
|
|
onclick: {
|
|
let cs = current_sort.clone();
|
|
move |_| {
|
|
let val = next_sort(&cs, "media_type");
|
|
sort_field.set(val.clone());
|
|
on_sort_change.call(val);
|
|
}
|
|
},
|
|
"Type{sort_arrow(¤t_sort, \"media_type\")}"
|
|
}
|
|
th { "Artist" }
|
|
th {
|
|
class: "sortable-header",
|
|
onclick: {
|
|
let cs = current_sort.clone();
|
|
move |_| {
|
|
let val = next_sort(&cs, "file_size");
|
|
sort_field.set(val.clone());
|
|
on_sort_change.call(val);
|
|
}
|
|
},
|
|
"Size{sort_arrow(¤t_sort, \"file_size\")}"
|
|
}
|
|
th { "" }
|
|
}
|
|
}
|
|
tbody {
|
|
for (idx , item) in filtered_media.iter().enumerate() {
|
|
{
|
|
let id = item.id.clone();
|
|
let artist = item.artist.clone().unwrap_or_default();
|
|
let size = format_size(item.file_size);
|
|
let badge_class = type_badge_class(&item.media_type);
|
|
let is_checked = current_selection.contains(&id);
|
|
|
|
let visible_ids: Vec<String> = filtered_media
|
|
|
|
.iter()
|
|
.map(|m| m.id.clone())
|
|
.collect();
|
|
let toggle_id = {
|
|
let id = id.clone();
|
|
move |e: Event<MouseData>| {
|
|
e.stop_propagation();
|
|
let shift = e.modifiers().shift();
|
|
let mut ids = selected_ids.read().clone();
|
|
if shift {
|
|
if let Some(last) = *last_click_index.read() {
|
|
let start = last.min(idx);
|
|
let end = last.max(idx);
|
|
for i in start..=end {
|
|
if let Some(range_id) = visible_ids.get(i)
|
|
&& !ids.contains(range_id)
|
|
{
|
|
ids.push(range_id.clone());
|
|
}
|
|
}
|
|
} else {
|
|
if !ids.contains(&id) {
|
|
ids.push(id.clone());
|
|
}
|
|
}
|
|
} else if ids.contains(&id) {
|
|
ids.retain(|x| x != &id);
|
|
} else {
|
|
ids.push(id.clone());
|
|
}
|
|
last_click_index.set(Some(idx));
|
|
selected_ids.set(ids);
|
|
}
|
|
};
|
|
let row_click = {
|
|
let id = item.id.clone();
|
|
move |_| on_select.call(id.clone())
|
|
};
|
|
let delete_click = {
|
|
let id = item.id.clone();
|
|
move |e: Event<MouseData>| {
|
|
e.stop_propagation();
|
|
confirm_delete.set(Some(id.clone()));
|
|
}
|
|
};
|
|
let thumb_url = if item.has_thumbnail {
|
|
format!("{}/api/v1/media/{}/thumbnail", server_url, item.id)
|
|
} else {
|
|
String::new()
|
|
};
|
|
let has_thumb = item.has_thumbnail;
|
|
let media_type_str = item.media_type.clone();
|
|
rsx! {
|
|
tr { key: "{item.id}", onclick: row_click,
|
|
td {
|
|
input { r#type: "checkbox", checked: is_checked, onclick: toggle_id }
|
|
}
|
|
td { class: "table-thumb-cell",
|
|
span { class: "table-type-icon {badge_class}", "{type_icon(&media_type_str)}" }
|
|
if has_thumb {
|
|
img {
|
|
class: "table-thumb table-thumb-overlay",
|
|
src: "{thumb_url}",
|
|
alt: "",
|
|
loading: "lazy",
|
|
}
|
|
}
|
|
}
|
|
td { "{item.file_name}" }
|
|
td {
|
|
span { class: "type-badge {badge_class}", "{item.media_type}" }
|
|
}
|
|
td { "{artist}" }
|
|
td { "{size}" }
|
|
td {
|
|
button { class: "btn btn-danger btn-sm", onclick: delete_click, "Delete" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
}
|
|
|
|
// Pagination controls
|
|
PaginationControls {
|
|
current_page,
|
|
total_pages,
|
|
on_page_change: move |page: u64| on_page_change.call(page),
|
|
}
|
|
}
|
|
}
|