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:

{
  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:

// 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:

{
  '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:

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

Methods:

// 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:

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

Usage as EditFolderDialog:

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

Props:

{
  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:

// 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:

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

Related Dialog Components

Permission Dialog

File: components/dam/Dialogs/PermissionDialog.vue

Dialog for setting folder permissions.

Usage:

<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:

<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:

<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:

<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:

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

Response:

{
  "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:

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

Response:

{
  "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:

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

Response:

{
  "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:

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

File Copy to Folder

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

Request:

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

Bulk Operations

Endpoint: POST /api/folders/bulk-move

Request:

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

Endpoint: POST /api/files/bulk-move

Request:

{
  "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:

{
  "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:

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

Workflows

Create Folder Workflow

1. User clicks "Create Folder" button
2. CreateFolderDialog opens
3. User enters folder name and optional description
4. Dialog validates input
5. API call to POST /api/folders
6. Folder created, dialog emits created event
7. Parent component updates folder list
8. Dialog closes

Move Folder Workflow

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

Move File to Folder Workflow

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

Bulk Move Workflow

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

Edit Folder Workflow

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

Component Integration Examples

Using FolderDialog in a Component

<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

<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

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

Related Systems

• 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