Implement view mode persistence with localStorage and update event handling

This commit is contained in:
Alex Lion
2026-01-24 16:24:58 +01:00
parent 0d8d563282
commit 46971719d6
3 changed files with 23 additions and 1 deletions

View File

@@ -111,6 +111,20 @@ const Hooks = {
}
},
// Hook for persisting view mode preference to localStorage
ViewModePreference: {
mounted() {
const savedMode = localStorage.getItem("claper_event_list_view_mode");
if (savedMode && (savedMode === "grid" || savedMode === "list")) {
this.pushEvent("restore-view-mode", { view: savedMode });
}
this.handleEvent("save-view-mode", ({ view }) => {
localStorage.setItem("claper_event_list_view_mode", view);
});
}
},
// Hook for Event Creation Chart
EventCreationChart: {
mounted() {

View File

@@ -201,6 +201,14 @@ defmodule ClaperWeb.EventLive.Index do
@impl true
def handle_event("change-view", %{"view" => view_mode}, socket) do
{:noreply,
socket
|> assign(:view_mode, view_mode)
|> push_event("save-view-mode", %{view: view_mode})}
end
@impl true
def handle_event("restore-view-mode", %{"view" => view_mode}, socket) do
{:noreply, assign(socket, :view_mode, view_mode)}
end

View File

@@ -104,7 +104,7 @@
<!-- Right: View Toggle & Action Buttons -->
<div class="flex items-center gap-2 flex-wrap">
<!-- View Toggle -->
<div class="flex items-center gap-1 bg-white border border-gray-200 rounded-full p-1">
<div id="view-mode-toggle" phx-hook="ViewModePreference" class="flex items-center gap-1 bg-white border border-gray-200 rounded-full p-1">
<button
phx-click="change-view"
phx-value-view="grid"