Appearance

File Selection Mixin ​

File Information ​

  • Path: mixins/fileSelection.js
  • Purpose: File and folder selection management for multi-select operations

Overview ​

The File Selection mixin provides functionality for managing file and folder selections across the application. It handles multi-select operations, maintains selection state, tracks parent folders of selected items, and provides computed properties for selection checking.

Key Features ​

  1. Multi-Select Management

    • File selection
    • Folder selection
    • Selection state tracking
    • Parent folder tracking

  2. Selection Operations

    • Toggle file selection
    • Toggle folder selection
    • Select none (clear all)
    • Selection validation

  3. Computed Properties

    • Selection object for files
    • Selection object for folders
    • Current folder context

Data Properties ​

javascript
{
  selectedFiles: array,          // Array of selected file objects
  selectedFolders: array,        // Array of selected folder objects
  parentOfselected: number|null, // Parent ID of selected items
  currentFolder: boolean        // Current folder context flag
}

Computed Properties ​

selection ​

Returns selection object for files:

  • Converts selectedFiles array to object
  • Keys are file IDs, values are true
  • Used for quick selection checking

Example:

javascript
{
  1: true,
  3: true,
  5: true
}

folderSelection ​

Returns selection object for folders:

  • Converts selectedFolders array to object
  • Keys are folder IDs, values are true
  • Used for quick folder selection checking

Methods ​

selectNone() ​

Clears all selections:

  • Clears selectedFiles array
  • Clears selectedFolders array
  • Resets parentOfselected to null
  • Handles resource type if present

toggleSelection(file) ​

Toggles file selection:

  • Adds file to selection if not selected
  • Removes file from selection if already selected
  • Validates folder context
  • Clears cross-folder selections
  • Updates parentOfselected

Parameters:

  • file (Object): File object to toggle

Behavior:

  • If file is in different folder than previous selection, clears previous selection
  • Maintains selection within same folder
  • Updates parent folder tracking

toggleFolderSelection(folder) ​

Toggles folder selection:

  • Adds folder to selection if not selected
  • Removes folder from selection if already selected
  • Validates parent context
  • Clears cross-parent selections
  • Updates parentOfselected

Parameters:

  • folder (Object): Folder object to toggle

Behavior:

  • If folder has different parent than previous selection, clears previous selection
  • Maintains selection within same parent
  • Updates parent folder tracking

Selection Context ​

The mixin maintains context about selections:

  1. Parent Tracking: Tracks the parent folder/category of selected items
  2. Folder Context: Determines if selection is in current folder
  3. Cross-Folder Prevention: Clears selection when switching folders

Usage Examples ​

Basic Usage ​

vue
<template>
  <div>
    <div v-for="file in files" :key="file.id">
      <input
        type="checkbox"
        :checked="selection[file.id]"
        @change="toggleSelection(file)"
      />
      {{ file.display_file_name }}
    </div>
    <button @click="selectNone">Clear Selection</button>
  </div>
</template>

<script>
import fileSelection from '~/mixins/fileSelection'

export default {
  mixins: [fileSelection],
  data() {
    return {
      files: []
    }
  }
}
</script>

With Folder Selection ​

vue
<template>
  <div>
    <!-- Files -->
    <div v-for="file in files" :key="file.id">
      <input
        type="checkbox"
        :checked="selection[file.id]"
        @change="toggleSelection(file)"
      />
      {{ file.display_file_name }}
    </div>
    
    <!-- Folders -->
    <div v-for="folder in folders" :key="folder.id">
      <input
        type="checkbox"
        :checked="folderSelection[folder.id]"
        @change="toggleFolderSelection(folder)"
      />
      {{ folder.folder_name }}
    </div>
    
    <button @click="selectNone">Clear All</button>
  </div>
</template>

<script>
import fileSelection from '~/mixins/fileSelection'

export default {
  mixins: [fileSelection]
}
</script>

Selection Count ​

vue
<template>
  <div>
    <span v-if="selectedFiles.length">
      {{ selectedFiles.length }} file(s) selected
    </span>
    <span v-if="selectedFolders.length">
      {{ selectedFolders.length }} folder(s) selected
    </span>
  </div>
</template>

<script>
import fileSelection from '~/mixins/fileSelection'

export default {
  mixins: [fileSelection]
}
</script>

Selection Behavior ​

Single Folder Context ​

  • Selections are maintained within the same folder
  • Switching folders clears previous selection
  • Parent folder is tracked

Multi-Folder Support ​

  • Can select files from different folders (if enabled)
  • Parent tracking may be disabled for multi-folder operations

Folder Selection ​

  • Folder selection is independent of file selection
  • Can select both files and folders simultaneously
  • Each maintains its own parent context

Integration Points ​

  • Asset List Components: File selection in lists
  • Folder Components: Folder selection
  • Bulk Operations: Multi-select operations
  • Search Results: Result selection
  • Uploaded Assets: Asset selection

Notes for Development ​

  • Mixin maintains selection state across component lifecycle
  • Selection is cleared when switching folders (by default)
  • Parent tracking helps validate selections
  • Computed properties provide efficient selection checking
  • Selection arrays can be used for bulk operations
  • Mixin handles both file and folder selection