VoileWeb.VoileDashboardComponents (Voile v0.1.23)

Copy Markdown View Source

Summary

Functions

Renders a collection modal.

Mobile menu overlay for dashboard navigation (completely separate from page flow) Must be placed at root level of your LiveView template

Dashboard search widget component with inline results

Renders the dashboard settings sidebar with navigation links.

GLAM Navigation Cards - Beautiful cards for each GLAM type with statistics

Individual GLAM type card with statistics

Navigation Bar Component for GLAM (Gallery, Library, Archive, Museum)

Renders a sidebar for plugin pages (settings and plugin routes).

Recent collection item component

Search statistics widget for dashboard

Component for Side Bar Menu

Statistics card component

Functions

collection_hide(js \\ %JS{}, selector)

collection_modal(assigns)

Renders a collection modal.

Examples

<.collection_modal id="confirm-modal">
  This is a collection modal.
</.collection_modal>

JS commands may be passed to the :on_cancel to configure the closing/cancel event, for example:

<.collection_modal id="confirm" on_cancel={JS.navigate(~p"/posts")}>
  This is another collection modal.
</.collection_modal>

Attributes

  • id (:string) (required)
  • show (:boolean) - Defaults to false.
  • on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.

Slots

  • inner_block (required)

collection_show(js \\ %JS{}, selector)

dashboard_menu_bar(assigns)

Attributes

  • active_menu (:string) - Defaults to "".
  • user (:map) - Defaults to %{fullname: ""}.
  • current_path (:string) - Defaults to "/".

dashboard_mobile_menu(assigns)

Mobile menu overlay for dashboard navigation (completely separate from page flow) Must be placed at root level of your LiveView template

Example

<.dashboard_mobile_menu active_menu={@current_path} />

Attributes

  • active_menu (:string) - Defaults to "".
  • user (:map) - Defaults to %{}.

dashboard_search_widget(assigns)

Dashboard search widget component with inline results

Attributes

  • id (:string) - Defaults to "dashboard-search-widget".
  • search_query (:string) - Defaults to "".
  • search_results (:list) - Defaults to [].
  • searching (:boolean) - Defaults to false.

dashboard_settings_sidebar(assigns)

Renders the dashboard settings sidebar with navigation links.

Examples

<.dashboard_settings_sidebar current_user={@current_scope.user} current_path={@current_path} />

# With custom menu items
<.dashboard_settings_sidebar
  current_path={@current_path}
  menu_items={[
    %{label: "Profile", path: "/manage/settings/user_profile"},
    %{label: "Users", path: "/manage/settings/users"},
    %{label: "System", path: "/manage/settings/system"}
  ]}
/>

Attributes

  • current_user (:map)

  • current_path (:string) - Defaults to nil.

  • menu_items (:list) - List of menu items. Each item should be a map with:

    • label: String - Display text for the menu item
    • path: String - URL path for navigation
    • icon: String (optional) - Heroicon name for the menu item
    • exclude_paths: List (optional) - Paths to exclude from active state matching

    Defaults to [%{label: "Application Settings", path: "/manage/settings/apps", icon: "hero-cog-solid"}, %{label: "User Profile", path: "/manage/settings/user_profile", icon: "hero-user"}, %{label: "Permission Management", path: "/manage/settings/permissions", icon: "hero-key"}, %{label: "Nodes / Units", path: "/manage/settings/nodes", icon: "hero-building-library"}, %{label: "Holidays", path: "/manage/settings/holidays", icon: "hero-calendar-days"}, %{label: "Reservation Notifications", path: "/manage/settings/reservation_notifications", icon: "hero-bell"}, %{label: "API Manager", path: "/manage/settings/api_manager", icon: "hero-code-bracket"}].

delete_modal(assigns)

Attributes

  • id (:string) (required)

glam_navigation_cards(assigns)

GLAM Navigation Cards - Beautiful cards for each GLAM type with statistics

Attributes

  • glam_stats (:map) (required)

glam_type_card(assigns)

Individual GLAM type card with statistics

Attributes

  • type (:string) (required)
  • title (:string) (required)
  • description (:string) (required)
  • icon (:string) (required)
  • color (:string) (required)
  • count (:integer) (required)
  • percentage (:integer) - Defaults to 0.
  • subtitle (:string) - Defaults to "collections".
  • link (:string) (required)

hide_collection_modal(js \\ %JS{}, id)

pagination(assigns)

Attributes

  • params (:map) - Defaults to %{}.
  • page (:integer) (required)
  • total_pages (:integer) (required)
  • event (:string) - Defaults to "paginate".
  • path (:string) - Defaults to nil.

plugin_settings_sidebar(assigns)

Renders a sidebar for plugin pages (settings and plugin routes).

Lists all installed/active plugins from the database. When current_plugin_id is given, also shows that plugin's nav/0 entries so admins can navigate between all pages the plugin provides.

A "Settings" link is always appended automatically to the plugin nav.

Examples

<.plugin_settings_sidebar current_path={@current_path} current_plugin_id="locker_luggage" />

Attributes

  • current_path (:string) - Defaults to nil.
  • current_plugin_id (:string) - Defaults to nil.
  • is_super_admin (:boolean) - Defaults to false.

recent_collection_item(assigns)

Recent collection item component

Attributes

  • collection (:map) (required)

search_stats_widget(assigns)

Search statistics widget for dashboard

show_collection_modal(js \\ %JS{}, id)

stat_card(assigns)

Statistics card component

Attributes

  • title (:string) (required)
  • value (:integer) (required)
  • icon (:string) (required)
  • color (:string) - Defaults to "blue".
  • trend (:string) - Defaults to nil.