Folder Management

Overview

Two core pages handle folder management in the DAM:

1. Folder Listing (dam/folders/index.vue) — top-level folder list with grid/list view and create action
2. Folder Detail (dam/folders/_id/index.vue) — folder contents with inner search and filter

---

Folder Listing Page

Route: _workspace_id/dam/folders/index.vue

Features

• Grid and list view toggle (persisted view mode)
• Skeleton loaders during data fetch
• "New Folder" button — visible only when canCreateFolders permission is true
• Opens FolderDialog for folder creation

Key Components Used

Component	Purpose
FolderCard.vue	Renders each folder in grid view
GridViewIcon / ListViewIcon	View toggle icons
FolderDialogs/FolderDialog.vue	Create folder dialog
Skeleton loaders	Loading states

---

Folder Detail Page (Inner Search)

Route: _workspace_id/dam/folders/_id/index.vue

Features

• Inner search — full-text search scoped to the current folder (canUseInnerSearch flag gates visibility)
• SearchFilter panel — advanced filter by tags, file types, custom fields, date range
• AddedFilterOption chips — active filter display with remove action
• Search result count display (N Results)
• Mobile filter toggle button
• Sticky search header (stickyLeft stickyTop)
• Infinite scroll for assets within folder
• PopularFilterPills — quick-access pills for top custom fields (sorted by assets_count desc)

Inner Search Architecture

Folder Detail Page
├── canUseInnerSearch (computed) ← gates the search input
├── searchParams.search_term ← v-model on text input
├── SearchFilter component ← advanced filter panel
│   └── emits: search, update-filter-object, update-filter, remove-null-filter
├── AddedFilterOption chips ← active filter display
│   └── emits: update-filter-list, search
└── searchResultsCount ← displayed inline in input append slot

Key Components Used

Component	Purpose
Search/SearchFilter.vue	Advanced filter panel
Search/AddedFilterOption.vue	Active filter chips
Search/PopularFilterPills.vue	Quick-access custom field pills
SearchGridAssetsSkeleton	Grid skeleton during search
SearchListSkeleton	List skeleton during search

Search Flow

1. User types in inner search input → searchParams.search_term updates
2. Typesense query scoped to current folder via filterQuery per collection
3. SearchFilter panel opened → user selects tags / file types / custom fields
4. Filters emit update-filter-object → updateFilterObj() builds allFilterList
5. applySearchFilters() fires Typesense search with combined term + filters
6. Results replace asset grid; count shown in input append slot

---

Permissions

Permission	Effect
canCreateFolders	Shows "New Folder" button on listing page
canUseInnerSearch	Shows inner search input on folder detail page

---

Related Documentation

• Folder Operations — Create, move, copy, delete dialogs
• Search & Discovery — Global search
• Components — SearchFilter, AddedFilterOption