Appearance

Search Tabs Component ​

File Information ​

  • Path: components/dam/SearchTabs.vue
  • Purpose: Tab navigation component for switching between different search result types (All, Assets, Folders, Collages)

Overview ​

The SearchTabs component provides tab-based navigation for search results, allowing users to switch between viewing all results or filtering by specific content types. It displays result counts for each tab and handles tab switching with smooth transitions.

Key Features ​

  1. Tab Navigation

    • All tab (combined results)
    • Assets tab
    • Folders tab
    • Collages tab
    • Active tab indication

  2. Result Counts

    • Displays count per tab
    • Updates dynamically with search results
    • Shows total count in "All" tab

  3. Tab Switching

    • Smooth transitions
    • Preserves search state
    • Updates result display
    • Maintains filter state

  4. Combined Results Display

    • "All" tab shows combined results from all types
    • Grouped by content type
    • Section headers for each type

Props ​

javascript
{
  tab: {
    type: Number,
    default: 0,
    description: 'Active tab index (0=All, 1=Assets, 2=Folders, 3=Collages)'
  },
  tabTitles: {
    type: Array,
    default: () => ['All', 'Digital Assets', 'Collages', 'Folders'],
    description: 'Tab title labels'
  },
  combinedData: {
    type: Array,
    default: () => [],
    description: 'Combined results data for "All" tab'
  },
  digitalAssets: {
    type: Array,
    default: () => [],
    description: 'Asset search results'
  },
  collages: {
    type: Array,
    default: () => [],
    description: 'Collage search results'
  },
  categories: {
    type: Array,
    default: () => [],
    description: 'Folder search results'
  },
  resultCounts: {
    type: Object,
    default: () => ({
      all: 0,
      assets: 0,
      folders: 0,
      collages: 0
    }),
    description: 'Result counts per tab'
  }
}

Events ​

javascript
{
  'tab-change': (tabIndex) => {},        // Tab changed
  'result-click': (result) => {}         // Result item clicked
}

Data Properties ​

javascript
{
  tab: number,                    // Active tab index
  tabTitles: array,               // Tab title labels
  combinedData: array,            // Combined results for "All" tab
  digitalAssets: array,           // Asset results
  collages: array,                // Collage results
  categories: array               // Folder results
}

Methods ​

changeTab(tabIndex) ​

Changes active tab:

  • Updates tab state
  • Emits tab-change event
  • Updates result display
  • Maintains search state

formatDate(date) ​

Formats date for display:

  • Formats timestamp to readable date
  • Uses moment.js or similar
  • Returns formatted date string

handleResultClick(result, type) ​

Handles result item click:

  • Determines result type
  • Navigates to result details
  • Emits result-click event

getResultCount(tabIndex) ​

Gets result count for tab:

  • Returns count from resultCounts
  • Calculates total for "All" tab
  • Returns formatted count

Tab Structure ​

Tab 0: All ​

  • Shows combined results from all types
  • Grouped by content type
  • Section headers: "Digital Assets", "Collages", "Folders"
  • Displays all results in single view

Tab 1: Digital Assets ​

  • Shows only asset results
  • Asset-specific display format
  • Asset actions available

Tab 2: Collages ​

  • Shows only collage results
  • Collage-specific display format
  • Collage actions available

Tab 3: Folders ​

  • Shows only folder results
  • Folder-specific display format
  • Folder navigation available

Result Display Format ​

All Tab Display ​

javascript
[
  {
    type: 'digital_Assets',
    digitalAssets: [/* asset results */]
  },
  {
    type: 'collages',
    collages: [/* collage results */]
  },
  {
    type: 'folders',
    categories: [/* folder results */]
  }
]

Usage Examples ​

Basic Usage ​

vue
<template>
  <SearchTabs
    :tab="activeTab"
    :combined-data="combinedResults"
    :digital-assets="assetResults"
    :collages="collageResults"
    :categories="folderResults"
    :result-counts="counts"
    @tab-change="handleTabChange"
  />
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      combinedResults: [],
      assetResults: [],
      collageResults: [],
      folderResults: [],
      counts: {
        all: 0,
        assets: 0,
        folders: 0,
        collages: 0
      }
    }
  },
  methods: {
    handleTabChange(tabIndex) {
      this.activeTab = tabIndex
      this.updateResultsDisplay()
    }
  }
}
</script>

Styling ​

  • Uses custom CSS classes:
    • searchResult - Main container
    • search-title - Section title
    • table-lists-view - List view container
    • table-list-item - List item
    • table-body-column - Column styling
    • collages-list-item - Collage list styling
    • Responsive design for mobile/tablet/desktop

Integration Points ​

  • Search Page: Main search interface
  • Search Results Components: Individual result displays
  • Search API: Result fetching
  • Router: Navigation to result details

Notes for Development ​

  • Component uses Vuetify tabs
  • "All" tab combines results from all types
  • Tab switching is smooth with touchless transition
  • Result counts update dynamically
  • Each tab maintains its own result state
  • Combined data structure supports grouped display