DisplayPanel Component

File Information

• Path: components/dam/DisplayPanel.vue
• Purpose: Dropdown panel that consolidates view-mode switching, thumbnail size control, and sort-by selection into a single "Display" button

Overview

A v-menu dropdown triggered by a "Display" button (gear icon + label). Used on search, folder detail, collage detail, and shared-assets pages to give users control over how content is displayed and sorted — all in one place rather than separate controls.

The panel has three conditional sections:

1. View — icon toggle buttons for grid / list / mosaic (shown only when viewModes has entries)
2. Thumbnail size — a 5-stop slider (Extra Small → Extra Large) shown only when mode === 'grid' and showThumbnailSize is true
3. Sort by — a list of sort columns; clicking the active column flips ASC ↔ DESC, clicking a new column sets it to ASC

A fourth Properties section (column visibility checkboxes for list view) is implemented but commented out pending phase 5.

Props

Prop	Type	Required	Default	Description
mode	String	Yes	—	Current view mode: 'grid', 'list', or 'mosaic'
viewModes	Array	No	['grid', 'list']	Which view mode buttons to show; pass [] to hide the View section
sortValue	String	Yes	—	Currently active sort field value
sortDirection	String	Yes	—	'ASC' or 'DESC'
sortColumns	Array	Yes	—	Array of { value, text } or { value, label } objects defining sort options
visibleColumns	Array	No	[]	Active column keys (Properties section — currently hidden)
columnOptions	Array	No	[]	Available column definitions (Properties section — currently hidden)
thumbnailSize	String	No	'medium'	Current thumbnail size: 'xsmall', 'small', 'medium', 'large', 'xlarge'
showThumbnailSize	Boolean	No	true	Whether to show the thumbnail size slider

Events

Event	Payload	When
change-view	'grid' | 'list' | 'mosaic'	User clicks a view mode icon button
sort	{ field: string, direction: 'ASC' | 'DESC' }	User clicks a sort column
change-thumbnail-size	'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'	User moves the size slider
update:visibleColumns	string[]	Column visibility toggled (Properties — hidden, future)

Sort Logic

Clicking an already-active sort field flips the direction. Clicking a new field always starts ASC.

// Inside handleSort(field):
if (field === this.sortValue) {
  direction = this.sortDirection === 'DESC' ? 'ASC' : 'DESC'
} else {
  direction = 'ASC'
}
this.$emit('sort', { field, direction })

The parent is responsible for persisting the selection (typically via sort-preference-cache mixin).

Thumbnail Size Slider

Maps a 0–4 integer slider to named sizes:

Slider index	Size label
0	Extra Small
1	Small
2	Medium (default)
3	Large
4	Extra Large

Usage

<DisplayPanel
  :mode="viewMode"
  :view-modes="['grid', 'list', 'mosaic']"
  :sort-value="sortValue"
  :sort-direction="sortDirection"
  :sort-columns="sortColumns"
  :thumbnail-size="thumbnailSize"
  @change-view="viewMode = $event"
  @sort="onSort"
  @change-thumbnail-size="onThumbnailSizeChange"
/>

Pages That Use It

• pages/_workspace_id/dam/search.vue — search results (grid/list/mosaic + sort)
• pages/_workspace_id/dam/folders/_id/index.vue — folder detail
• pages/_workspace_id/dam/collage/_id/index.vue — collage detail
• pages/shared-assets/_type.vue and pages/_brand_name/shared-assets/_type.vue — shared assets

Related Documentation

• Search Filter Component — filter panel shown alongside Display
• Sort Menu Component — simpler sort-only predecessor
• sort-preference-cache Mixin — persists sort field/direction per view
• thumbnail-size-cache Mixin — persists thumbnail size per view
• view-mode-cache Mixin — persists grid/list/mosaic mode per view