Folder Operations

Overview

The Folder Dialog System provides comprehensive folder management functionality through reusable dialog components. It supports folder creation, editing, moving, copying, deletion, and permission management across the DAM module.

Architecture

The system consists of:

Core Dialog Components: Main folder dialog components for various operations
Reusable Dialog Components: Shared components used for folder operations
Integration Points: Pages and components that use folder dialogs
API Integration: Backend endpoints for folder operations

File Structure

Core Folder Dialog Components

Main Folder Dialog Component

File: components/dam/Dialogs/FolderDialogs/FolderDialog.vue

Main folder dialog component that handles multiple folder operations.

Supported Operations:

Add folder
Move folder
Move file
Copy file
Folder-file-move (combined operation)
Multiple-folder-move
Multiple-file-move

Props:

javascript

{
  dialogType: {
    type: String,
    required: true,
    validator: (value) => [
      'add-folder',
      'move-folder',
      'move-file',
      'copy-file',
      'folder-file-move',
      'multiple-folder-move',
      'multiple-file-move'
    ].includes(value)
  },
  visible: {
    type: Boolean,
    default: false
  },
  // Additional props based on dialog type
}

Methods:

javascript

// Handle folder selection
handleFolderSelect(folder) {
  // Select folder for operation
}

// Execute folder operation
async executeOperation() {
  // Perform move, copy, or create operation
  // Call appropriate API endpoint
}

// Navigate folder tree
navigateToFolder(folderId) {
  // Load folder contents for navigation
}

Events:

javascript

{
  'folder-created': (folder) => {},
  'folder-moved': (result) => {},
  'file-moved': (result) => {},
  'file-copied': (result) => {},
  'close': () => {}
}

Folder Dialog List Item Component

File: components/dam/Dialogs/FolderDialogs/FolderDialogListItem.vue

Component for displaying individual folder items within the folder dialog.

Features:

Folder selection
Folder navigation
Permission indicators
Visual hierarchy display

Props:

javascript

{
  folder: {
    type: Object,
    required: true
    // Folder object with id, name, path, permissions, etc.
  },
  selectable: {
    type: Boolean,
    default: true
  },
  showPermissions: {
    type: Boolean,
    default: true
  }
}

Methods:

javascript

// Select folder
selectFolder() {
  // Emit selection event
  this.$emit('select', this.folder)
}

// Navigate into folder
navigate() {
  // Emit navigation event
  this.$emit('navigate', this.folder)
}

Reusable Dialog Components

Create/Edit Folder Dialog

File: components/dam/Dialogs/CreateCollageDialog.vue

Reusable dialog component used for both folder creation and editing.

Usage as CreateFolderDialog:

vue

<CreateCollageDialog
  :visible="showCreateFolder"
  :is-folder="true"
  @created="handleFolderCreated"
  @close="showCreateFolder = false"
/>

Usage as EditFolderDialog:

vue

<CreateCollageDialog
  :visible="showEditFolder"
  :is-folder="true"
  :file-name="selectedFolder.name"
  :file-description="selectedFolder.description"
  @updated="handleFolderUpdated"
  @close="showEditFolder = false"
/>

Props:

javascript

{
  visible: {
    type: Boolean,
    default: false
  },
  isFolder: {
    type: Boolean,
    default: false
  },
  fileName: {
    type: String,
    default: ''
    // For edit mode - existing folder name
  },
  fileDescription: {
    type: String,
    default: ''
    // Optional folder description
  }
}

Methods:

javascript

// Create folder
async createFolder() {
  const folderData = {
    name: this.folderName,
    description: this.folderDescription,
    parentId: this.currentFolderId
  }
  // Call API to create folder
  const response = await this.$api.post('/folders', folderData)
  this.$emit('created', response.data)
}

// Update folder
async updateFolder() {
  const updateData = {
    name: this.folderName,
    description: this.folderDescription
  }
  // Call API to update folder
  const response = await this.$api.put(`/folders/${this.folderId}`, updateData)
  this.$emit('updated', response.data)
}

Events:

javascript

{
  'created': (folder) => {},
  'updated': (folder) => {},
  'close': () => {}
}

Permission Dialog

File: components/dam/Dialogs/PermissionDialog.vue

Dialog for setting folder permissions.

Usage:

vue

<PermissionDialog
  :visible="showPermissionDialog"
  :item="selectedFolder"
  :item-type="'folder'"
  @permissions-updated="handlePermissionsUpdated"
  @close="showPermissionDialog = false"
/>

Delete Confirmation Dialog

File: components/theme/global/Dialog/ConfirmationDialog.vue

Confirmation dialog for folder deletion.

Usage:

vue

<ConfirmationDialog
  :visible="showDeleteDialog"
  title="Delete Folder"
  message="Are you sure you want to delete this folder?"
  @confirm="handleDeleteFolder"
  @cancel="showDeleteDialog = false"
/>

Dialog Type Mappings

FolderDialog Types

Dialog Type	Description	Use Case
`add-folder`	Add new folder	Create folder in current location
`move-folder`	Move folder	Relocate folder to another location
`move-file`	Move file	Move file into folder
`copy-file`	Copy file	Copy file into folder
`folder-file-move`	Move folders and files	Combined move operation
`multiple-folder-move`	Move multiple folders	Bulk folder relocation
`multiple-file-move`	Move multiple files	Bulk file relocation

CreateCollageDialog Usage

Component Name	Props	Purpose
`CreateFolderDialog`	`isFolder: true`	Create new folder
`EditFolderDialog`	`isFolder: true, fileName: <name>`	Rename/edit folder

Integration Points

Page Integration

Folders List Page

File: pages/_workspace_id/dam/folders/index.vue

Uses folder dialogs for folder management:

EditFolderDialog - Rename folders
MoveFolderDialog - Move folders
FolderDialog - Various folder operations

Example:

vue

<template>
  <div>
    <!-- Folder list -->
    <FolderCard
      v-for="folder in folders"
      :key="folder.id"
      :folder="folder"
      @edit="openEditDialog"
      @move="openMoveDialog"
    />
    
    <!-- Dialogs -->
    <EditFolderDialog
      :visible="showEditDialog"
      :folder="selectedFolder"
      @updated="handleFolderUpdated"
    />
    
    <MoveFolderDialog
      :visible="showMoveDialog"
      :folder="selectedFolder"
      @moved="handleFolderMoved"
    />
  </div>
</template>

Folder Details Page

File: pages/_workspace_id/dam/folders_id/index.vue

Uses folder dialogs for folder operations:

FolderDialog - Move/copy operations
CreateFolderDialog - Create subfolders

Component Integration

Search Folders Component

File: components/dam/SearchFolders.vue

Uses folder dialogs in search results:

EditFolderDialog - Edit folders from search
MoveFolderDialog - Move folders from search

Search Assets Component

File: components/dam/SearchAssets.vue

Uses folder dialogs for asset operations:

FolderDialog - Move/copy assets to folders
CreateFolderDialog - Create folders for assets

Folder Card Component

File: components/dam/Folders/FolderCard.vue

Triggers folder dialogs for various operations:

Edit folder
Move folder
Delete folder
Set permissions

Example:

vue

<template>
  <v-card @click="handleFolderClick">
    <v-card-title>{{ folder.name }}</v-card-title>
    <v-card-actions>
      <v-btn @click.stop="openEditDialog">Edit</v-btn>
      <v-btn @click.stop="openMoveDialog">Move</v-btn>
      <v-btn @click.stop="openDeleteDialog">Delete</v-btn>
    </v-card-actions>
  </v-card>
</template>

API Integration

Folder Creation

Endpoint: POST /api/folders

Request:

json

{
  "name": "New Folder",
  "description": "Folder description",
  "parentId": "parent-folder-id",
  "workspaceId": "workspace-id"
}

Response:

json

{
  "id": "folder-id",
  "name": "New Folder",
  "description": "Folder description",
  "path": "/path/to/folder",
  "parentId": "parent-folder-id",
  "createdAt": "2024-01-01T00:00:00Z"
}

Folder Update/Rename

Endpoint: PUT /api/folders/:folderId

Request:

json

{
  "name": "Updated Folder Name",
  "description": "Updated description"
}

Response:

json

{
  "id": "folder-id",
  "name": "Updated Folder Name",
  "description": "Updated description",
  "updatedAt": "2024-01-01T00:00:00Z"
}

Folder Move

Endpoint: POST /api/folders/:folderId/move

Request:

json

{
  "targetFolderId": "destination-folder-id",
  "workspaceId": "workspace-id"
}

Response:

json

{
  "id": "folder-id",
  "name": "Folder Name",
  "path": "/new/path/to/folder",
  "parentId": "destination-folder-id"
}

File Move to Folder

Endpoint: POST /api/files/:fileId/move

Request:

json

{
  "targetFolderId": "destination-folder-id",
  "workspaceId": "workspace-id"
}

File Copy to Folder

Endpoint: POST /api/files/:fileId/copy

Request:

json

{
  "targetFolderId": "destination-folder-id",
  "workspaceId": "workspace-id"
}

Bulk Operations

Endpoint: POST /api/folders/bulk-move

Request:

json

{
  "folderIds": ["folder-id-1", "folder-id-2"],
  "targetFolderId": "destination-folder-id",
  "workspaceId": "workspace-id"
}

Endpoint: POST /api/files/bulk-move

Request:

json

{
  "fileIds": ["file-id-1", "file-id-2"],
  "targetFolderId": "destination-folder-id",
  "workspaceId": "workspace-id"
}

Folder List for Dialog

Endpoint: GET /api/folders/tree

Query Parameters:

workspaceId - Workspace ID
parentId - Parent folder ID (optional, for navigation)
includePermissions - Include permission info (optional)

Response:

json

{
  "folders": [
    {
      "id": "folder-id",
      "name": "Folder Name",
      "path": "/path/to/folder",
      "parentId": "parent-id",
      "hasChildren": true,
      "permissions": {
        "canRead": true,
        "canWrite": true,
        "canDelete": false
      }
    }
  ]
}

Folder Deletion

Endpoint: DELETE /api/folders/:folderId

Request:

json

{
  "workspaceId": "workspace-id",
  "force": false  // Force delete even if folder has contents
}

Workflows

Create Folder Workflow

User clicks "Create Folder" button
CreateFolderDialog opens
User enters folder name and optional description
Dialog validates input
API call to POST /api/folders
Folder created, dialog emits created event
Parent component updates folder list
Dialog closes

Move Folder Workflow

User selects folder and clicks "Move"
FolderDialog opens with dialogType: 'move-folder'
Dialog loads folder tree for navigation
User navigates and selects destination folder
Dialog validates move operation (no circular references)
API call to POST /api/folders/:folderId/move
Folder moved, dialog emits moved event
Parent component updates folder list
Dialog closes

Move File to Folder Workflow

User selects file and clicks "Move to Folder"
FolderDialog opens with dialogType: 'move-file'
Dialog loads folder tree
User selects destination folder
API call to POST /api/files/:fileId/move
File moved, dialog emits file-moved event
Parent component updates file list
Dialog closes

Bulk Move Workflow

User selects multiple folders/files
User clicks "Move Selected"
FolderDialog opens with appropriate dialog type
User selects destination folder
API call to bulk move endpoint
All items moved, dialog emits bulk operation event
Parent component updates lists
Dialog closes

Edit Folder Workflow

User clicks "Edit" on folder
EditFolderDialog opens with current folder data
User modifies folder name/description
Dialog validates input
API call to PUT /api/folders/:folderId
Folder updated, dialog emits updated event
Parent component updates folder display
Dialog closes

Component Integration Examples

Using FolderDialog in a Component

vue

<template>
  <div>
    <v-btn @click="openMoveDialog">Move Folder</v-btn>
    
    <FolderDialog
      :visible="showMoveDialog"
      dialog-type="move-folder"
      :folder="selectedFolder"
      @moved="handleFolderMoved"
      @close="showMoveDialog = false"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMoveDialog: false,
      selectedFolder: null
    }
  },
  methods: {
    openMoveDialog(folder) {
      this.selectedFolder = folder
      this.showMoveDialog = true
    },
    handleFolderMoved(result) {
      // Update folder list
      this.refreshFolders()
      this.showMoveDialog = false
    }
  }
}
</script>

Using CreateFolderDialog

vue

<template>
  <div>
    <v-btn @click="showCreateDialog = true">Create Folder</v-btn>
    
    <CreateCollageDialog
      :visible="showCreateDialog"
      :is-folder="true"
      @created="handleFolderCreated"
      @close="showCreateDialog = false"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showCreateDialog: false
    }
  },
  methods: {
    handleFolderCreated(folder) {
      // Add folder to list
      this.folders.push(folder)
      this.showCreateDialog = false
    }
  }
}
</script>

Best Practices

Dialog State Management: Always manage dialog visibility with reactive data properties
Error Handling: Implement proper error handling for all API calls
Validation: Validate folder names and operations before API calls
Loading States: Show loading indicators during async operations
Permission Checks: Verify user permissions before showing dialog options
Event Handling: Always handle dialog close events to reset state
Bulk Operations: Provide progress feedback for bulk operations
Navigation: Implement proper folder tree navigation with breadcrumbs

Permissions System: Folder dialogs integrate with permission management
Search System: Folder dialogs used in search results
Asset Management: Folder dialogs handle asset organization
Workspace System: Folder operations are workspace-scoped

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 Operations ​

Overview ​

Architecture ​

File Structure ​

Core Folder Dialog Components ​

Main Folder Dialog Component ​

Folder Dialog List Item Component ​

Reusable Dialog Components ​

Create/Edit Folder Dialog ​

Related Dialog Components ​

Permission Dialog ​

Delete Confirmation Dialog ​

Dialog Type Mappings ​

FolderDialog Types ​

CreateCollageDialog Usage ​

Integration Points ​

Page Integration ​

Folders List Page ​

Folder Details Page ​

Component Integration ​

Search Folders Component ​

Search Assets Component ​

Folder Card Component ​

API Integration ​

Folder Creation ​

Folder Update/Rename ​

Folder Move ​

File Move to Folder ​

File Copy to Folder ​

Bulk Operations ​

Folder List for Dialog ​

Folder Deletion ​

Workflows ​

Create Folder Workflow ​

Move Folder Workflow ​

Move File to Folder Workflow ​

Bulk Move Workflow ​

Edit Folder Workflow ​

Component Integration Examples ​

Using FolderDialog in a Component ​

Using CreateFolderDialog ​

Best Practices ​

Related Systems ​

Folder Operations

Overview

Architecture

File Structure

Core Folder Dialog Components

Main Folder Dialog Component

Folder Dialog List Item Component

Reusable Dialog Components

Create/Edit Folder Dialog

Related Dialog Components

Permission Dialog

Delete Confirmation Dialog

Dialog Type Mappings

FolderDialog Types

CreateCollageDialog Usage

Integration Points

Page Integration

Folders List Page

Folder Details Page

Component Integration

Search Folders Component

Search Assets Component

Folder Card Component

API Integration

Folder Creation

Folder Update/Rename

Folder Move

File Move to Folder

File Copy to Folder

Bulk Operations

Folder List for Dialog

Folder Deletion

Workflows

Create Folder Workflow

Move Folder Workflow

Move File to Folder Workflow

Bulk Move Workflow

Edit Folder Workflow

Component Integration Examples

Using FolderDialog in a Component

Using CreateFolderDialog

Best Practices

Related Systems