Appearance

Collage Header Component ​

File Information ​

  • Path: components/theme/global/CollageHeader.vue
  • Purpose: Main application header with alert notifications and search bar
  • Type: Global Theme Component

Overview ​

The Collage Header component provides the main application header functionality, including uncategorized assets alert, search bar integration, and header skeleton loading states. It's used across all DAM pages to provide consistent header functionality.

Key Features ​

  1. Uncategorized Assets Alert

    • Displays alert when uncategorized assets exist
    • Shows count of uncategorized assets
    • Links to uploaded assets page
    • Dismissible alert with close button

  2. Search Bar Integration

    • Conditionally displays search bar based on permissions
    • Uses SearchBarTypeSense component
    • Permission-based visibility

  3. Loading States

    • Skeleton loader when instance is loading
    • Conditional rendering based on instance availability

Props ​

This component does not accept props. It uses computed properties and data from the Vuex store and authentication.

Data Properties ​

javascript
{
  alertMsg: string,           // Alert message text
  alertReceived: boolean,     // Alert visibility state
  alertType: string,          // Alert type
  alertObj: object            // Alert object with workspace_id and uncategoryCount
}

Computed Properties ​

hasInstance ​

Checks if DAM instance is available:

  • Returns true when instance is loaded and not fetching
  • Uses dam.fetchingInstances and dam.damInstance?.id from store

canViewUncategorizedBar ​

Checks if user can view uncategorized assets alert:

  • Validates workspace access
  • Checks user permissions using $canViewUncategorizedAssetsBar
  • Returns false if workspace not found or no access

canUseSearchBar ​

Checks if user can use search bar:

  • Validates workspace access
  • Checks user permissions using $canUseSearchBar
  • Returns false if workspace not found or no access

Methods ​

closeAlert() ​

Closes the uncategorized assets alert:

  • Sets alertReceived to false
  • Clears alertMsg and alertObj
  • Emits alertClose event via EventBus

Components Used ​

  • SearchBarTypeSense - Main search bar component
  • CloseIcon - Close icon SVG component
  • v-alert - Vuetify alert component
  • v-skeleton-loader - Vuetify skeleton loader

Event Handling ​

EventBus Events ​

Listens for:

  • Alert events (handled via EventBus)

Emits:

  • alertClose - When alert is dismissed

Usage Examples ​

Basic Usage ​

vue
<template>
  <CollageHeader />
</template>

<script>
import CollageHeader from '~/components/theme/global/CollageHeader.vue'

export default {
  components: {
    CollageHeader
  }
}
</script>

In Layout ​

vue
<template>
  <div>
    <CollageHeader />
    <main>
      <!-- Page content -->
    </main>
  </div>
</template>

Alert Object Structure ​

javascript
{
  workspace_id: number,        // Workspace ID
  uncategoryCount: number      // Count of uncategorized assets
}

Styling ​

Uses CSS classes:

  • .collage-header - Main header container
  • .headerAlert - Applied when alert is visible
  • .alert-box-header - Alert box styling
  • .headerMainSkeleton - Skeleton loader styling

Integration Points ​

  • Layout Components: Used in main application layout
  • SearchBar Component: Integrates SearchBarTypeSense
  • EventBus: Communicates alert state
  • Store: Accesses DAM instance state
  • Auth: Checks user permissions

Notes for Development ​

  • Alert visibility depends on permissions
  • Search bar visibility depends on permissions
  • Uses EventBus for alert communication
  • Skeleton loader shown during instance loading
  • Alert automatically links to uploaded assets page