Folder Dialogs Component

File Information

Path: components/dam/Dialogs/FolderDialogs/FolderDialog.vue
Purpose: Dialog component for folder operations including create, move, copy, and folder selection

Overview

The FolderDialog component provides a comprehensive interface for folder-related operations. It supports creating new folders, moving files/folders, copying files/folders, and selecting folders for various operations. The component includes folder navigation, search functionality, and hierarchical folder display.

Key Features

Multiple Dialog Types
- Create folder
- Move files/folders
- Copy files/folders
- Select folder for operations
Folder Navigation
- Hierarchical folder structure
- Navigate into subfolders
- Navigate back to parent
- Breadcrumb navigation
Folder Search
- Search folders by name
- Real-time search results
- Debounced search input
- Clear search functionality
Folder Selection
- Single folder selection
- Multiple folder selection (for copy operations)
- Selected folders display
- Remove selected folders
Folder Creation
- Create new folder inline
- Folder name validation
- Duplicate name checking
- Immediate folder creation

Props

javascript

{
  modalDialog: {
    type: Boolean,
    default: false,
    description: 'Dialog visibility state'
  },
  dialogType: {
    type: String,
    required: true,
    description: 'Dialog type: "add-folder", "move-file", "copy-file", "select-folder"'
  },
  heading: {
    type: String,
    default: '',
    description: 'Dialog heading text'
  },
  subHeading: {
    type: String,
    default: '',
    description: 'Dialog subheading text'
  },
  enableSubHeading: {
    type: Boolean,
    default: true,
    description: 'Show subheading section'
  },
  selection: {
    type: Boolean,
    default: false,
    description: 'Enable multiple folder selection'
  },
  workspaceId: {
    type: String,
    required: true,
    description: 'Workspace ID'
  },
  currentFolderId: {
    type: String,
    default: null,
    description: 'Current folder ID (for navigation context)'
  },
  excludeFolderIds: {
    type: Array,
    default: () => [],
    description: 'Folder IDs to exclude from selection'
  }
}

Events

javascript

{
  'folder-selected': (folder) => {},      // Folder selected
  'folders-selected': (folders) => {},     // Multiple folders selected
  'folder-created': (folder) => {},        // New folder created
  'folder-moved': (result) => {},          // Folder moved
  'folder-copied': (result) => {},         // Folder copied
  'close': () => {},                       // Dialog closed
  'cancel': () => {}                       // Operation cancelled
}

Data Properties

javascript

{
  folderName: string,            // New folder name (for create)
  validationMsg: string,         // Validation error message
  searchKey: string,             // Folder search query
  folderList: array,             // Current folder list
  subFolders: array,             // Subfolder list
  copyFolders: array,            // Selected folders for copy
  selecetedFolder: object,       // Currently selected folder
  mainList: boolean,            // Show main folder list
  subList: boolean,              // Show subfolder list
  foldersLoading: boolean,      // Folders loading state
  loading: boolean,             // General loading state
  titleHeading: string,         // Dynamic title heading
  moveSubHeading: string,        // Move operation subheading
  disableMsgItem: string         // Disabled folder message
}

Components Used

FolderDialogListItem - Folder list item component (~/components/dam/Dialogs/FolderDialogs/FolderDialogListItem.vue)
Various SVG icons (PlusIcon, CloseIcon, SearchIcon, BackArrowIcon, FolderLargeIcon)

Methods

`selectFolder(folder)`

Selects a folder:

Updates selected folder state
For single selection: Emits folder-selected event
For multiple selection: Adds to copyFolders array
Updates UI state

`toggleSelect(folder, selected)`

Toggles folder selection (for multiple selection):

Adds/removes folder from selection
Updates copyFolders array
Updates UI indicators

`openSubList(folder)`

Opens subfolder list:

Sets subList to true
Sets mainList to false
Updates selecetedFolder
Fetches subfolders
Updates navigation state

`backToParent()`

Navigates back to parent folder:

Returns to main folder list
Updates navigation state
Resets subfolder view

`openAddNewFolder()`

Opens folder creation interface:

Sets dialogType to 'add-folder'
Shows folder name input
Resets folder name
Focuses input field

`validateFolderName()`

Validates folder name:

Checks for empty name
Checks for invalid characters
Checks for duplicate names
Sets validation message
Returns validation result

`createFolder()`

Creates new folder:

Validates folder name
Calls create folder API
Adds to folder list
Emits folder-created event
Resets form
Shows success message

`getSearchResults()`

Searches folders:

Calls folder search API
Updates folderList with results
Handles empty results
Shows loading state

`debouncedSearch()`

Debounced folder search:

Delays search execution
Prevents excessive API calls
Updates search results

`removeCopyFolder(folder)`

Removes folder from copy selection:

Removes from copyFolders array
Updates UI
Emits selection update

`confirmSelection()`

Confirms folder selection:

Validates selection
Emits appropriate event based on dialog type
Closes dialog
Handles operation (move/copy/select)

`emitEvents(action)`

Emits dialog events:

action: 'close', 'cancel', 'confirm'
Closes dialog
Emits appropriate events
Resets state

Dialog Types

Add Folder

Purpose: Create new folder
Features: Folder name input, validation, immediate creation
Events: folder-created

Move File/Folder

Purpose: Move items to different folder
Features: Folder selection, navigation, confirmation
Events: folder-moved

Copy File/Folder

Purpose: Copy items to different folder(s)
Features: Multiple folder selection, copy confirmation
Events: folder-copied

Select Folder

Purpose: Select folder for operation
Features: Single selection, navigation
Events: folder-selected

API Endpoints

GET /dam/folders - Fetch folder list
- Query Parameters:
  - parent_id: Parent folder ID (null for root)
  - workspace_id: Workspace ID
  - search: Search query (optional)
- Response: Array of folder objects

POST /dam/folders - Create new folder

Request Body:

json

{
  "name": "New Folder",
  "parent_id": 123,
  "workspace_id": "workspace-id"
}

Response: Created folder object

POST /dam/folders/move - Move items to folder

Request Body:

json

{
  "item_ids": [1, 2, 3],
  "item_types": ["file", "folder"],
  "target_folder_id": 456
}

POST /dam/folders/copy - Copy items to folder(s)

Request Body:

json

{
  "item_ids": [1, 2, 3],
  "item_types": ["file", "folder"],
  "target_folder_ids": [456, 789]
}

Folder Object Structure

javascript

{
  id: number,                    // Folder ID
  folder_name: string,            // Folder name
  parent_id: number,             // Parent folder ID
  workspace_id: string,          // Workspace ID
  has_children: boolean,         // Has subfolders
  is_disabled: boolean,          // Is disabled (cannot select)
  disable_reason: string,        // Reason for disable
  created_at: string,            // Creation timestamp
  updated_at: string             // Update timestamp
}

User Interactions

Folder Navigation
- Click folder to navigate into it
- Click back arrow to return to parent
- Breadcrumb shows current path
Folder Search
- Type in search field
- Results update in real-time
- Click search icon or press Enter
- Clear search to show all folders
Folder Selection
- Click folder to select (single selection)
- Click folders to select multiple (copy mode)
- Selected folders shown as chips
- Remove selection by clicking chip close
Create Folder
- Click plus icon
- Enter folder name
- Validation occurs on input
- Create button creates folder
Confirm Operation
- Click confirm/select button
- Operation executes
- Dialog closes
- Success message shown

Validation Rules

Folder Name: Required, minimum length, no invalid characters
Duplicate Names: Cannot create folder with same name in same parent
Disabled Folders: Cannot select disabled folders (shows reason)
Selection: Must select at least one folder for operations

Styling

Uses custom CSS classes:
- v-dialog-global - Dialog container
- v-dialog-body - Dialog body
- folder-list-dialog - Folder list container
- customscrollbar - Scrollable areas
- select-tag-chip - Selected folder chips
- no-data - Empty state
- Responsive design for mobile/tablet/desktop

State Management

Integrates with DAM store
Updates folder list after operations
Syncs with folder navigation
Maintains selection state

Notes for Development

Component handles multiple dialog types with same interface
Folder navigation maintains hierarchy state
Search is debounced to prevent excessive API calls
Disabled folders cannot be selected (with reason display)
Folder creation is immediate and updates list
Multiple selection only available for copy operations
Component resets state when closed

Folder Operations Feature - Complete folder operations
Folders Page - Folder listing page
Folder Details Page - Folder contents page
DAM Store - State management

Authentication

DAM Module

Workspace Settings

External

Other

DAM Components

Search Components

Dialog Components

Theme Components

Utility Components

Store

Mixins

API Services

Utils

Middleware

Plugins

Schemes

Folder Dialogs Component ​

File Information ​

Overview ​

Key Features ​

Props ​

Events ​

Data Properties ​

Components Used ​

Methods ​

selectFolder(folder) ​

toggleSelect(folder, selected) ​

openSubList(folder) ​

backToParent() ​

openAddNewFolder() ​

validateFolderName() ​

createFolder() ​

getSearchResults() ​

debouncedSearch() ​

removeCopyFolder(folder) ​

confirmSelection() ​

emitEvents(action) ​

Dialog Types ​

Add Folder ​

Move File/Folder ​

Copy File/Folder ​

Select Folder ​

API Endpoints ​

Folder Object Structure ​

User Interactions ​

Validation Rules ​

Styling ​

State Management ​

Notes for Development ​

Related Documentation ​

Folder Dialogs Component

File Information

Overview

Key Features

Props

Events

Data Properties

Components Used

Methods

`selectFolder(folder)`

`toggleSelect(folder, selected)`

`openSubList(folder)`

`backToParent()`

`openAddNewFolder()`

`validateFolderName()`

`createFolder()`

`getSearchResults()`

`debouncedSearch()`

`removeCopyFolder(folder)`

`confirmSelection()`

`emitEvents(action)`

Dialog Types

Add Folder

Move File/Folder

Copy File/Folder

Select Folder

API Endpoints

Folder Object Structure

User Interactions

Validation Rules

Styling

State Management

Notes for Development

Related Documentation