Appearance

Create Collage Dialog ​

File Information ​

  • Path: components/dam/Dialogs/CreateCollageDialog.vue
  • Purpose: Create and edit collages with name, description, and asset selection

Overview ​

The Create Collage Dialog component provides an interface for creating new collages and editing existing ones. It supports collage name, description, asset selection, and initial configuration.

Key Features ​

  1. Collage Creation

    • Collage name input
    • Collage description
    • Name validation
    • Duplicate name checking

  2. Collage Editing

    • Edit existing collage
    • Update name and description
    • Modify collage settings
    • Save changes

  3. Asset Selection

    • Select assets for collage
    • Add/remove assets
    • Asset preview
    • Asset count display

  4. Validation

    • Name required validation
    • Name uniqueness check
    • Description length validation
    • Form error handling

Props ​

javascript
{
  dialog: {
    type: Boolean,
    default: false
  },
  collage: {
    type: Object,
    default: null
    // Existing collage to edit (null for create)
  },
  workspaceId: {
    type: [String, Number],
    required: true
  },
  initialAssets: {
    type: Array,
    default: () => []
    // Initial assets to include
  }
}

Data Properties ​

javascript
{
  form: {
    name: '',
    description: '',
    assets: []
  },
  saving: false,      // Saving state
  errors: {},       // Form errors
  availableAssets: [] // Available assets for selection
}

Computed Properties ​

isEditMode ​

Checks if editing existing collage

isFormValid ​

Validates form data

collageName ​

Returns collage name (for edit mode)

Methods ​

loadCollage() ​

Loads collage data (edit mode):

  • Fetches collage details
  • Updates form data
  • Loads collage assets
  • Handles errors

saveCollage() ​

Saves collage:

  • Validates form
  • Creates or updates collage via API
  • Adds selected assets
  • Shows success message
  • Emits saved event
  • Handles errors

addAsset(asset) ​

Adds asset to collage:

  • Validates asset
  • Adds to assets array
  • Updates UI

removeAsset(assetId) ​

Removes asset from collage:

  • Removes from assets array
  • Updates UI

validateForm() ​

Validates collage form:

  • Checks name required
  • Checks name uniqueness
  • Validates description
  • Returns validation result

Events ​

  • close - Dialog closed
  • saved - Collage saved successfully
  • created - Collage created
  • updated - Collage updated

API Endpoints ​

Create Collage ​

  • Endpoint: POST /digital-assets/collage/create
  • Request Body:
    json
    {
  "workspace_id": 123,
  "name": "My Collage",
  "description": "Collage description",
  "asset_ids": [1, 2, 3]
}
  • Response: Created collage object

Update Collage ​

  • Endpoint: PUT /digital-assets/collage/update
  • Request Body: Collage update data
  • Response: Updated collage object

Usage Examples ​

Create Collage ​

vue
<template>
  <CreateCollageDialog
    :dialog="showCreateCollage"
    :workspace-id="workspaceId"
    :initial-assets="selectedAssets"
    @close="showCreateCollage = false"
    @created="handleCollageCreated"
  />
</template>

<script>
import CreateCollageDialog from '~/components/dam/Dialogs/CreateCollageDialog.vue'

export default {
  components: {
    CreateCollageDialog
  }
}
</script>

Edit Collage ​

vue
<template>
  <CreateCollageDialog
    :dialog="showEditCollage"
    :collage="selectedCollage"
    :workspace-id="workspaceId"
    @close="showEditCollage = false"
    @updated="handleCollageUpdated"
  />
</template>

Integration Points ​

  • Collages Page: Create new collages
  • Collage Details: Edit existing collages
  • Asset Components: Add assets to collage
  • Folder Components: Create collage from folder

Notes for Development ​

  • Name must be unique per workspace
  • Description optional
  • Assets can be added/removed
  • Edit mode loads existing data
  • Validation before save