Appearance
Stores ​
collage-admin uses Pinia with the Options Store syntax (defineStore('id', { state, getters, actions })). All stores live in app/stores/ and are auto-imported throughout the app. State mutation happens only inside actions — components never write to store properties directly.
useDamStore — app/stores/dam.ts ​
The main application store. Manages the DAM instance, folder/collection trees, asset lists, storage info, upload queue, search state, filter state, branding, and file download orchestration.
State ​
| Field | Type | Description |
|---|---|---|
currentWorkspaceId | number | Workspace ID of the currently loaded DAM instance |
foldersLoading | boolean | True while the folder list is being fetched |
fetchingInstances | boolean | True while the DAM instance API call is in flight |
folderList | Folder[] | Full folder tree for the active workspace |
damInstance | DamInstance | The loaded DAM instance object |
companyName | string | Company name returned with the DAM instance |
collectionList | Collection[] | List of collages (collections) for the workspace |
collectionLoading | boolean | True while the collection list is being fetched |
assetList | Asset[][] | Columnar/paginated asset grid |
storage | StorageInfo | Breakdown: image, audio, video, document, used, available, total, percentage |
notifications | Record<string, Notification> | Keyed map of workspace notifications |
uploads | UploadItem[] | Active upload and download queue |
brandingDetails | BrandingDetails | null | White-label branding config for the active workspace |
leftMenuClosed | boolean | Sidebar collapsed state |
allFilterList | FilterItem[] | Global applied filter list |
searchKey | string | Active search query string |
searchMenuOptn | SearchMenuOption | null | Active search scope selection |
popularSearchData | PopularSearchData | null | Popular search data for the global search page |
workspaceId | number | null | Active workspace ID (nullable; set before instance fetch) |
userAgentAndLocation | UserAgentAndLocation | Client browser agent and location metadata |
popularCollageSearchData | PopularSearchData | null | Popular search data scoped to the collage page |
popularFolderSearchData | PopularSearchData | null | Popular search data scoped to the folder page |
tagsFilterItems | FilterItem[] | Tag filter options |
folderPageFilterList | FilterItem[] | Active filters on the folder page |
collagePageFilterList | FilterItem[] | Active filters on the collage page |
currentFolder | Folder | null | Currently selected/viewed folder |
workspaceAccessVerified | boolean | Gate that blocks workspace-scoped API calls until access is confirmed |
Getters ​
| Getter | Returns | Description |
|---|---|---|
storageFull | boolean | True when storage.percentage >= 100 |
storageUsedPercentage | number | (used / available) * 100, rounded to 2 decimal places |
hasDamInstance | boolean | True when not fetching and damInstance.id exists |
getWorkspaceId | number | null | Current workspaceId from state |
getInstanceId | unknown | damInstance.id |
Actions ​
| Action | Description |
|---|---|
setWorkspaceId(wpId) | Sets workspaceId if the new value differs from the current one |
setWorkspaceAccessVerified(value) | Toggles the workspace access gate |
shouldResetDamState() | Returns true if the route workspace ID differs from currentWorkspaceId |
getInstances(workspace_id?, routeParam?) | Fetches the DAM instance; de-dupes concurrent calls per workspace on the client |
_fetchInstances(wpId, $api, snackbar) | Internal: calls the API, updates companyName, damInstance, storage, currentWorkspaceId |
updateStorage() | Refreshes the storage breakdown from the API |
setBranding(data) | Sets brandingDetails directly |
setBrandingDetails(details) | Direct mutator for brandingDetails |
fetchWorkspaceBranding(workspaceId) | POSTs to get-branding and updates brandingDetails; non-critical, swallows errors |
fetchCheckBranding() | GETs check-branding using the Host header; client-side fallback for branding resolution |
setFolderName({oldFolder, newName}) | Renames a folder in folderList (re-sorts alphabetically) and patches matching entries in assetList |
updateFolderPermission({folder, permission}) | Updates visibility and instance_visibility on a folder and its matching entries in assetList |
setFolderList(folderList) | Replaces folderList wholesale |
appendFolders(folders) | Pushes additional folders onto folderList |
setFoldersLoading(val) | Sets foldersLoading |
setDamInstance(payload) | Replaces damInstance; pass {} to reset |
setCurrentFolder(folder) | Sets currentFolder |
setCollectionName({oldCollection, newName}) | Renames a collection in collectionList |
addNewCollection(newCollection) | Prepends a new collection to collectionList |
setFolderItem(item) | Inserts or updates a folder node in the tree, maintaining parent sub_category_data |
resetState() | Resets all state fields to their initial values |
addNewUploads({items}) | Adds upload items to the queue, generating a random uploadId for each |
updateUpload({uploadId, mutations}) | Patches an upload item in the queue by its ID |
removeUpload({uploadId}) | Removes an upload item from the queue |
clearAllUploads() | Empties the upload queue |
setLeftMenuState(newState) | Sets sidebar open/closed state |
setAllFilterList(newState) | Replaces allFilterList |
setSearchKey(newState) | Sets searchKey |
setSearchMenuOptn(newState) | Sets searchMenuOptn |
setPopularSearchData(newState) | Sets popularSearchData |
recentUpload() | Fetches the count of recently uploaded assets for the active workspace |
downloadMultipleFiles({files, folders, collection_id, download_name}) | Generates a zip via API and streams it to disk using StreamSaver; falls back to email notification |
downloadMultipleSharedFiles({files, folders, collection_id, shareId, download_name, shareWorkspaceId}) | Same as above for shared-link downloads; includes a 60-second stall timeout guard |
downloadFile({id, url, name, ...}) | Downloads a single asset file; handles both direct link and blob fetch paths |
getNotifications(payload?) | Fetches workspace notifications and stores them in notifications |
uploadsAdd({items}) | Filters hidden files (names starting with .) then calls addNewUploads |
uploadsUpdate({uploadId, mutations}) | Validates upload exists before delegating to updateUpload |
updateCollageField(collage) | Patches a collection object in collectionList by ID |
updatePopularCollageSearchData(newState) | Sets popularCollageSearchData |
updateCollagePageFilterList(newState) | Sets collagePageFilterList |
saveTagsFilterItems(newState) | Sets tagsFilterItems |
updateFolderPageFilterList(newState) | Sets folderPageFilterList |
updatePopularFolderSearchData(newState) | Sets popularFolderSearchData |
updateAllFilterList(newState) | Sets allFilterList |
updateSearchKey(newState) | Sets searchKey |
updateSearchMenuOptn(newState) | Sets searchMenuOptn |
updatePopularSearchData(newState) | Sets popularSearchData |
setFileName({oldFile, newName}) | Updates display_file_name on a file in assetList |
renameFiles({oldFile, newName}) | Alias for setFileName |
renameFolders({oldFolder, newName}) | Alias for setFolderName |
removeFolderFromList(item) | Removes a folder from folderList; handles nested folders by updating the parent's sub_category_data |
moveAssets({indexOfOwnParent, fileIds}) | Removes moved assets from their origin column in assetList |
useAnalyticStore — app/stores/analytics.ts ​
Holds date-range, status, and modal state for the analytics section, plus shared insights data and client metadata.
State ​
| Field | Type | Description |
|---|---|---|
lastDate | string | Number of days in the selected date range (default '29') |
status | string | Active status filter value |
dStartDate | string | Filter start date in YYYY-MM-DD format (defaults to today) |
dEndDate | string | Filter end date in YYYY-MM-DD format (defaults to today) |
activeDate | string | Currently focused date in YYYY-MM-DD format (defaults to today) |
statusList | unknown[] | List of available status filter options |
getEmail | string | Email address for export or notification flows |
isMoveModal | boolean | Whether the move-asset modal is open |
isCopyModal | boolean | Whether the copy-asset modal is open |
isMoveFolderModal | boolean | Whether the move-folder modal is open |
isNewFolderModal | boolean | Whether the new-folder modal is open |
InsightsTransaction | Record<string, unknown> | Insights transaction data |
InsightsTransactionShare | Record<string, unknown> | Shared insights transaction data |
userAgentAndLocation | Record<string, unknown> | Client browser agent and geographic location |
Actions ​
| Action | Description |
|---|---|
setLastDate(payload) | Sets lastDate |
setStartDate(payload) | Sets dStartDate |
setEndDate(payload) | Sets dEndDate |
setStatus(payload) | Sets status |
setStatusList(payload) | Sets statusList |
setActiveDate(payload) | Sets activeDate |
setEmail(payload) | Sets getEmail |
setMoveModal(payload) | Sets isMoveModal |
setCopyModal(payload) | Sets isCopyModal |
setMoveFolderModal(payload) | Sets isMoveFolderModal |
setNewFolderModal(payload) | Sets isNewFolderModal |
setUserAgentAndLocation(payload) | Sets userAgentAndLocation; no-op if payload is null |
useDialogStore — app/stores/dialog.ts ​
Centralises open/closed state and the selected entity for every confirmation and action dialog in the app — folder, collage, and asset dialogs, plus bulk selections and the download queue.
State ​
| Field | Type | Description |
|---|---|---|
folder.create | boolean | Create-folder dialog open |
folder.rename | boolean | Rename-folder dialog open |
folder.delete | boolean | Delete-folder dialog open |
folder.move | boolean | Move-folder dialog open |
folder.permission | boolean | Folder permissions dialog open |
folder.share | boolean | Share-folder dialog open |
collage.create | boolean | Create-collage dialog open |
collage.rename | boolean | Rename-collage dialog open |
collage.delete | boolean | Delete-collage dialog open |
collage.permission | boolean | Collage permissions dialog open |
collage.share | boolean | Share-collage dialog open |
asset.rename | boolean | Rename-asset dialog open |
asset.delete | boolean | Delete-asset dialog open |
asset.permission | boolean | Asset permissions dialog open |
asset.share | boolean | Share-asset dialog open |
asset.move | boolean | Move-asset dialog open |
asset.duplicate | boolean | Duplicate-asset dialog open |
selectedFolder | Folder | null | Folder targeted by the active folder dialog |
selectedCollage | Collection | null | Collage targeted by the active collage dialog |
selectedAsset | FolderDetailFile | null | Asset targeted by the active asset dialog |
selectedFolders | Folder[] | Bulk folder selection |
selectedCollages | Collection[] | Bulk collage selection |
selectedAssets | FolderDetailFile[] | Bulk asset selection |
selectedDownloadItems | unknown[] | Items queued for download |
Actions ​
| Action | Description |
|---|---|
toggleFolderDialog(type, value, folder?) | Opens or closes a folder dialog by type key; optionally sets selectedFolder |
toggleCollageDialog(type, value, collage?) | Opens or closes a collage dialog by type key; optionally sets selectedCollage |
toggleAssetDialog(type, value, asset?) | Opens or closes an asset dialog by type key; optionally sets selectedAsset |
setBulkFolders(folders) | Sets selectedFolders for bulk operations |
clearSelectedFolder() | Clears selectedFolder |
setBulkCollages(collages) | Sets selectedCollages for bulk operations |
setBulkAssets(assets) | Sets selectedAssets for bulk operations |
setDownloadItems(items) | Sets selectedDownloadItems |
closeAll() | Resets every dialog flag to false and clears all selected items |
useLoadingStore — app/stores/loading.ts ​
Lightweight store for two independent loading indicators: a general full-page overlay and a counter-based overlay for long-running API requests.
State ​
| Field | Type | Description |
|---|---|---|
apiLongRunningCount | number | Count of in-flight long-running API requests |
isLoading | boolean | General overlay loading state |
loadingText | string | Text shown in the general overlay (default 'Loading') |
Getters ​
| Getter | Returns | Description |
|---|---|---|
showApiLongRunningOverlay | boolean | True when apiLongRunningCount > 0 |
Actions ​
| Action | Description |
|---|---|
incrementApiLongRunning() | Increments apiLongRunningCount when a long-running request starts |
decrementApiLongRunning() | Decrements apiLongRunningCount (floor at 0) when a request completes |
startOverlay(loadingText?) | Sets isLoading = true and updates overlay text (defaults to 'Loading') |
stopOverlay() | Sets isLoading = false |