Appearance

DAM Dashboard ​

File Information ​

  • Path: pages/_workspace_id/dam/dashboard/index.vue
  • Route: /:workspace_id/dam/dashboard
  • Middleware: authCheck, checkWorkspace, can-access-dam-module, check-if-suspended
  • Layout: damLayout

Purpose ​

The DAM Dashboard serves as the main entry point for the Digital Asset Management module. It provides quick access to recent assets, collages, and folders, along with navigation shortcuts to key DAM features.

Key Features ​

  1. Quick Action Buttons

    • New Asset (upload)
    • New Folder
    • New Collage
    • Access to other DAM modules

  2. Recent Items Tabs

    • Recent Collages
    • Recent Folders

  3. Real-time Updates

    • Live updates via Pusher
    • Automatic refresh on changes

  4. Storage Status

    • Storage usage indicator
    • Warnings when storage is full

  5. Responsive Design

    • Mobile-friendly layout
    • Adaptive grid system

Components Used ​

  • ShareAssetDialog - Share dialog (~/components/dam/Dialogs/ShareAssetDialog)
  • DeleteDialog - Confirmation dialog (~/components/theme/global/Dialog/ConfirmationDialog.vue)
  • PermissionDialog - Permission management dialog (~/components/dam/Dialogs/PermissionDialog)
  • CreateCollageDialog - Create new collage dialog (~/components/dam/Dialogs/CreateCollageDialog.vue)
  • WeeklyInsights - Weekly insights graph (~/components/dam/Insights/InsightsTabGraph.vue)
  • Various SVG icons (UploadIcon, GridIcon, FolderIcon, etc.)
  • Skeleton loaders for loading states

Data Properties ​

javascript
{
  dynamicStyles: object,          // Dynamic styles object
  dynamicStylesCard: object,      // Dynamic card styles
  workspace_id: string,          // Workspace ID from route params
  collection: object,            // Collection object
  renaming: boolean,             // Renaming state
  collectionName: string,        // Collection name
  oldName: string,              // Old collection name
  edit: boolean,                // Edit mode flag
  showOptions: number,           // Track which card's options are visible
  uncategoryAlert: boolean,      // Uncategorized alert flag
  overviewLoading: boolean,      // Overview loading state
  overviewTimer: object,        // Overview timer
  overviewFetchedOn: number,     // Timestamp when overview was fetched
  alertData: object,            // Alert data object
  uncategoryCount: number,       // Uncategorized files count
  tabLabels: array,             // Tab labels ['Collages', 'Folders']
  collages: array,              // Recent collages list
  collagesLoading: boolean,     // Collages data loading
  tab: number,                  // Active tab index
  folderList: array,            // Recent folders list
  foldersLoading: boolean,       // Folders data loading
  recentUploadList: array,      // Recent uploads list
  recentLoading: boolean,       // Recent uploads loading
  weeklyInsightLoading: boolean, // Weekly insights loading
  weeklyInsightList: object,    // Weekly insights data
  contentLoad: boolean,         // Initial content loading
  deleteDialog: boolean,        // Delete dialog visibility
  shareDialog: boolean,         // Share dialog visibility
  renameDialog: boolean,        // Rename dialog visibility
  permissionDialog: boolean,    // Permission dialog visibility
  createCollageDialog: boolean   // Create collage dialog visibility
}

Mixins Used ​

  • fileType - File type utilities (~/mixins/fileType)
  • commonFunctions - Common utility functions (~/mixins/common-functions)
  • imageStyle - Image styling utilities (~/mixins/imageStyle)

Computed Properties ​

  • canCreateFolders - Permission to create folders
  • canCreateCollages - Permission to create collages
  • canUploadAssets - Permission to upload assets
  • canShareDownload - Permission to share/download
  • canMoveContent - Permission to move content
  • canDeleteContent - Permission to delete content
  • visibleTopBtnRoutes - Filtered quick action buttons based on permissions

Methods ​

fetchRecentCollages(flag = false) ​

Fetches recent collages:

  • Loads collages from API
  • Handles pagination
  • Updates UI with results

fetchRecentFolders(flag = false) ​

Fetches recent folders:

  • Loads folders from API
  • Handles pagination
  • Updates UI with results

fetchRecentAssets(flag = false) ​

Fetches recent assets:

  • Loads assets from API
  • Handles pagination
  • Updates UI with results

Navigates to specified route:

  • Checks permissions
  • Handles navigation
  • Updates analytics

handleScroll(flag, type) ​

Handles infinite scroll:

  • Detects scroll position
  • Loads more items when needed
  • Updates pagination state

checkStorageStatus() ​

Checks storage usage:

  • Fetches storage information
  • Updates storage full flag
  • Disables upload if full

API Endpoints ​

  • GET /dam/collages - Fetch recent collages
  • GET /dam/folders - Fetch recent folders
  • GET /dam/recent-uploads - Fetch recent uploads
  • GET /workspace/storage-status - Get storage usage
  • GET /dam/weekly-insights - Get weekly insights data

User Interactions ​

  1. Quick Actions

    • Click action buttons to navigate to modules
    • Storage full disables "New Asset" button

  2. Recent Items

    • Switch between tabs (Collages, Folders, Assets)
    • Scroll to load more items
    • Click items to view details

  3. Item Actions

    • Share items
    • Set permissions
    • Create collages
    • Navigate to details

Real-time Features ​

  • Listens to Pusher events for:
    • New asset uploads
    • Folder creation
    • Collage updates
    • Permission changes

Styling ​

  • Uses custom CSS from assets/css/dashboard.css
  • Responsive breakpoints for mobile/tablet/desktop
  • Skeleton loaders for loading states
  • Smooth animations for transitions

Notes for Development ​

  • Dashboard loads data in parallel for better performance
  • Infinite scroll is implemented for all tabs
  • Storage status check prevents uploads when storage is full
  • Quick action buttons are filtered based on user permissions
  • Real-time updates require Pusher connection
  • All actions are tracked for analytics