Merge pull request #19655 from itisAliRH/list-view-reusability

Enhance ListHeader Component for Reusability
galaxyproject · Feb 19, 2025 · 67da023 · 67da023
2 parents cd53b3d + 5f6c5bb
commit 67da023
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 20 deletions.
diff --git a/client/src/components/Common/ListHeader.vue b/client/src/components/Common/ListHeader.vue
@@ -5,25 +5,27 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BButtonGroup, BFormCheckbox } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
-import { useUserStore } from "@/stores/userStore";
+import { type ListViewMode, useUserStore } from "@/stores/userStore";
 
 library.add(faAngleDown, faAngleUp, faBars, faGripVertical);
 
-type ListView = "grid" | "list";
 type SortBy = "create_time" | "update_time" | "name";
 
 interface Props {
+    listId: string;
     allSelected?: boolean;
     showSelectAll?: boolean;
     showViewToggle?: boolean;
+    showSortOptions?: boolean;
     selectAllDisabled?: boolean;
     indeterminateSelected?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
     allSelected: false,
     showSelectAll: false,
     showViewToggle: false,
+    showSortOptions: false,
     selectAllDisabled: false,
     indeterminateSelected: false,
 });
@@ -36,7 +38,7 @@ const userStore = useUserStore();
 
 const sortDesc = ref(true);
 const sortBy = ref<SortBy>("update_time");
-const listViewMode = computed<ListView>(() => (userStore.preferredListViewMode as ListView) || "grid");
+const currentListViewMode = computed(() => userStore.currentListViewPreferences[props.listId] || "grid");
 
 function onSort(newSortBy: SortBy) {
     if (sortBy.value === newSortBy) {
@@ -46,14 +48,13 @@ function onSort(newSortBy: SortBy) {
     }
 }
 
-function onToggleView(newView: ListView) {
-    userStore.setPreferredListViewMode(newView);
+function onToggleView(newView: ListViewMode) {
+    userStore.setListViewPreference(props.listId, newView);
 }
 
 defineExpose({
     sortBy,
     sortDesc,
-    listViewMode,
 });
 </script>
 
@@ -74,7 +75,7 @@ defineExpose({
         </div>
 
         <div class="list-header-filters">
-            <div>
+            <div v-if="showSortOptions">
                 Sort by:
                 <BButtonGroup>
                     <BButton
@@ -114,7 +115,7 @@ defineExpose({
                     v-b-tooltip
                     title="Grid view"
                     size="sm"
-                    :pressed="listViewMode === 'grid'"
+                    :pressed="currentListViewMode === 'grid'"
                     variant="outline-primary"
                     @click="onToggleView('grid')">
                     <FontAwesomeIcon :icon="faGripVertical" />
@@ -125,7 +126,7 @@ defineExpose({
                     v-b-tooltip
                     title="List view"
                     size="sm"
-                    :pressed="listViewMode === 'list'"
+                    :pressed="currentListViewMode === 'list'"
                     variant="outline-primary"
                     @click="onToggleView('list')">
                     <FontAwesomeIcon :icon="faBars" />
@@ -140,6 +141,7 @@ defineExpose({
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin: 0.5rem 0;
 
     .list-header-filters {
         display: flex;

diff --git a/client/src/components/Workflow/List/WorkflowList.vue b/client/src/components/Workflow/List/WorkflowList.vue
@@ -24,7 +24,6 @@ import TagsSelectionDialog from "@/components/Common/TagsSelectionDialog.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowListActions from "@/components/Workflow/List/WorkflowListActions.vue";
 
-type ListView = "grid" | "list";
 type WorkflowsList = Record<string, never>[];
 
 // Interface to match the `Workflow` interface from `WorkflowCard`
@@ -79,7 +78,7 @@ const sharedWithMe = computed(() => props.activeList === "shared_with_me");
 const showDeleted = computed(() => filterText.value.includes("is:deleted"));
 const showBookmarked = computed(() => filterText.value.includes("is:bookmarked"));
 const currentPage = computed(() => Math.floor(offset.value / limit.value) + 1);
-const view = computed(() => (userStore.preferredListViewMode as ListView) || "grid");
+const currentListViewMode = computed(() => userStore.currentListViewPreferences.workflows || "grid");
 const sortDesc = computed(() => (listHeader.value && listHeader.value.sortDesc) ?? true);
 const sortBy = computed(() => (listHeader.value && listHeader.value.sortBy) || "update_time");
 const noItems = computed(() => !loading.value && workflowsLoaded.value.length === 0 && !filterText.value);
@@ -387,7 +386,6 @@ onMounted(() => {
             <FilterMenu
                 id="workflow-list-filter"
                 name="workflows"
-                class="mb-2"
                 :filter-class="workflowFilters"
                 :filter-text.sync="filterText"
                 :loading="loading || overlay"
@@ -402,6 +400,8 @@ onMounted(() => {
 
             <ListHeader
                 ref="listHeader"
+                list-id="workflows"
+                show-sort-options
                 show-view-toggle
                 :show-select-all="!published && !sharedWithMe"
                 :select-all-disabled="loading || overlay || noItems || noResults"
@@ -480,7 +480,7 @@ onMounted(() => {
             <WorkflowCardList
                 :workflows="workflowsLoaded"
                 :published-view="published"
-                :grid-view="view === 'grid'"
+                :grid-view="currentListViewMode === 'grid'"
                 :selected-workflow-ids="selectedWorkflowIds"
                 @select="onSelectWorkflow"
                 @refreshList="load"

diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
@@ -21,13 +21,20 @@ interface Preferences {
     [key: string]: unknown;
 }
 
-type ListViewMode = "grid" | "list";
+export type ListViewMode = "grid" | "list";
+
+type UserListViewPreferences = Record<string, ListViewMode>;
 
 export const useUserStore = defineStore("userStore", () => {
     const currentUser = ref<AnyUser>(null);
     const currentPreferences = ref<Preferences | null>(null);
 
-    const preferredListViewMode = useUserLocalStorage("user-store-preferred-list-view-mode", "grid", currentUser);
+    const currentListViewPreferences = useUserLocalStorage<UserListViewPreferences>(
+        "user-store-list-view-preferences",
+        {},
+        currentUser
+    );
+
     const hasSeenUploadHelp = useUserLocalStorage("user-store-seen-upload-help", false, currentUser);
 
     let loadPromise: Promise<void> | null = null;
@@ -127,8 +134,11 @@ export const useUserStore = defineStore("userStore", () => {
         }
     }
 
-    function setPreferredListViewMode(view: ListViewMode) {
-        preferredListViewMode.value = view;
+    function setListViewPreference(listId: string, view: ListViewMode) {
+        currentListViewPreferences.value = {
+            ...currentListViewPreferences.value,
+            [listId]: view,
+        };
     }
 
     function processUserPreferences(user: RegisteredUser): Preferences {
@@ -148,13 +158,13 @@ export const useUserStore = defineStore("userStore", () => {
         isAnonymous,
         currentTheme,
         currentFavorites,
-        preferredListViewMode,
+        currentListViewPreferences,
         hasSeenUploadHelp,
         loadUser,
         matchesCurrentUsername,
         setCurrentUser,
         setCurrentTheme,
-        setPreferredListViewMode,
+        setListViewPreference,
         addFavoriteTool,
         removeFavoriteTool,
         $reset,