add grid view to tools list

Author: ahmedhamidawan

client/src/components/ScrollList/ScrollList.vue

@@ -41,6 +41,8 @@ interface Props<T> {
     showCountInFooter?: boolean;
     /** A key on which the `scrollTop` is reset to 0 */
     scrollTopResetKey?: string;
+    /** Whether to use grid view (div instead of `BListGroup` for better flex/grid support) */
+    gridView?: boolean;
 }
 
 // TODO: In Vue 3, we'll be able to use generic types directly in the template, so we can remove this type assertion
@@ -60,6 +62,7 @@ const props = withDefaults(defineProps<Props<T>>(), {
     propScrollTop: 0,
     showCountInFooter: false,
     scrollTopResetKey: undefined,
+    gridView: false,
 });
 
 const emit = defineEmits<{
@@ -212,28 +215,36 @@ watch(
                 }"
                 role="list">
                 <BAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
-                <BListGroup v-else>
+                <template v-else>
                     <slot v-if="items.length === 0" name="loading">
                         <BAlert v-if="busy" variant="info" show>
                             <LoadingSpan :message="`Loading ${props.namePlural}`" />
                         </BAlert>
                     </slot>
+                    <component
+                        :is="props.gridView ? 'div' : BListGroup"
+                        :class="{ 'card-list d-flex flex-wrap': props.gridView }">
+                        <!-- Use component wrapper with v-for to provide proper keying while avoiding layout interference -->
+                        <component
+                            :is="'div'"
+                            v-for="(item, index) in items"
+                            :key="itemKey(item)"
+                            class=""
+                            style="display: contents">
+                            <slot name="item" :item="item" :index="index" />
+                        </component>
 
-                    <!-- Wrap slot in a template to use v-for -->
-                    <div v-for="(item, index) in items" :key="itemKey(item)">
-                        <slot name="item" :item="item" :index="index" />
-                    </div>
+                        <template v-if="!busy">
+                            <slot v-if="allLoaded && items.length === 0" name="none-loaded-footer">
+                                <div class="list-end">- No {{ props.namePlural }} found -</div>
+                            </slot>
 
-                    <template v-if="!busy">
-                        <slot v-if="allLoaded && items.length === 0" name="none-loaded-footer">
-                            <div class="list-end">- No {{ props.namePlural }} found -</div>
-                        </slot>
-
-                        <slot v-else-if="allLoaded" name="all-loaded-footer">
-                            <div class="list-end">- {{ listEndText }} -</div>
-                        </slot>
-                    </template>
-                </BListGroup>
+                            <slot v-else-if="allLoaded" name="all-loaded-footer">
+                                <div class="list-end">- {{ listEndText }} -</div>
+                            </slot>
+                        </template>
+                    </component>
+                </template>
             </div>
             <ScrollToTopButton :offset="scrollTop" @click="scrollToTop" />
         </div>
@@ -262,3 +273,9 @@ watch(
         </div>
     </div>
 </template>
+
+<style lang="scss" scoped>
+.card-list {
+    container: cards-list / inline-size;
+}
+</style>

client/src/components/ToolsList/ToolsList.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { faSitemap, faStar } from "@fortawesome/free-solid-svg-icons";
+import { faBars, faGripVertical, faSitemap, faStar } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { type FilterSettings, type Tool, useToolStore } from "@/stores/toolStore";
-import { useUserStore } from "@/stores/userStore";
+import { type ListViewMode, useUserStore } from "@/stores/userStore";
 import Filtering, { contains, type ValidFilter } from "@/utils/filtering";
 
 import { createWhooshQuery, FAVORITES_KEYS } from "../Panels/utilities";
@@ -39,7 +39,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 const router = useRouter();
 
-const { isAnonymous } = storeToRefs(useUserStore());
+const userStore = useUserStore();
+const { isAnonymous, currentListViewPreferences } = storeToRefs(userStore);
+
+const currentListViewMode = computed(() => currentListViewPreferences.value["tools"] || "list");
 
 const toolStore = useToolStore();
 const { loading } = storeToRefs(toolStore);
@@ -142,6 +145,10 @@ async function searchTools() {
 function applyFilter(filter: string, value: string) {
     filterText.value = ToolFilters.value.setFilterValue(filterText.value, filter, value);
 }
+
+function onToggleView(newView: ListViewMode) {
+    userStore.setListViewPreference("tools", newView);
+}
 </script>
 
 <template>
@@ -249,18 +256,51 @@ function applyFilter(filter: string, value: string) {
                 </GButton>
             </div>
 
-            <ToolsListSectionFilters
-                :filter-class="ToolFilters"
-                :filter-text="filterText"
-                :disabled="loading"
-                @apply-filter="applyFilter" />
+            <div class="d-flex justify-content-between align-items-center">
+                <ToolsListSectionFilters
+                    :filter-class="ToolFilters"
+                    :filter-text="filterText"
+                    :disabled="loading"
+                    @apply-filter="applyFilter" />
+
+                <!-- TODO: This div here and in ListHeader.vue needs to be a reusable component -->
+                <div>
+                    Display:
+                    <GButtonGroup>
+                        <GButton
+                            id="view-grid"
+                            tooltip
+                            title="Grid view"
+                            size="small"
+                            :pressed="currentListViewMode === 'grid'"
+                            outline
+                            color="blue"
+                            @click="onToggleView('grid')">
+                            <FontAwesomeIcon :icon="faGripVertical" />
+                        </GButton>
+
+                        <GButton
+                            id="view-list"
+                            tooltip
+                            title="List view"
+                            size="small"
+                            :pressed="currentListViewMode === 'list'"
+                            outline
+                            color="blue"
+                            @click="onToggleView('list')">
+                            <FontAwesomeIcon :icon="faBars" />
+                        </GButton>
+                    </GButtonGroup>
+                </div>
+            </div>
         </div>
 
         <div class="tools-list-body">
             <ToolsListTable
                 :tools="itemsLoaded"
                 :loading="loading"
                 :has-owner-filter="hasOwnerFilter"
+                :grid-view="currentListViewMode === 'grid'"
                 @apply-filter="applyFilter" />
         </div>
     </section>

client/src/components/ToolsList/ToolsListCard.vue

@@ -46,6 +46,7 @@ interface Props {
     local: boolean;
     owner?: string;
     fetching: boolean;
+    gridView?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -62,6 +63,7 @@ const props = withDefaults(defineProps<Props>(), {
     local: false,
     owner: undefined,
     fetching: false,
+    gridView: false,
 });
 
 const emit = defineEmits<{
@@ -166,6 +168,7 @@ const {
         :id="props.id"
         class="tool-list-item"
         :badges="toolBadges"
+        :grid-view="props.gridView"
         :bookmarked="bookmark.label === 'Unfavorite'"
         :show-bookmark="!bookmark.title.includes('Login')"
         :primary-actions="toolsListCardPrimaryActions"

client/src/components/ToolsList/ToolsListTable.vue

@@ -19,6 +19,7 @@ const props = defineProps<{
     tools: Tool[];
     loading?: boolean;
     hasOwnerFilter?: boolean;
+    gridView?: boolean;
 }>();
 
 const toolStore = useToolStore();
@@ -62,6 +63,7 @@ watchEffect(() => {
         name-plural="tools"
         :load-disabled="!props.tools.length"
         show-count-in-footer
+        :grid-view="props.gridView"
         no-footer>
         <template v-slot:loading>
             <BAlert v-if="props.tools.length" show>
@@ -87,6 +89,7 @@ watchEffect(() => {
                 :owner="props.hasOwnerFilter && item.tool_shed_repository ? item.tool_shed_repository.owner : undefined"
                 :workflow-compatible="item.is_workflow_compatible"
                 :version="item.version"
+                :grid-view="props.gridView"
                 @apply-filter="(filter, value) => $emit('apply-filter', filter, value)" />
         </template>
     </ScrollList>