diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue index a6cd2bd5f..a2655bd50 100644 --- a/src/components/sidebar/tabs/AssetsSidebarTab.vue +++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue @@ -157,53 +157,17 @@ const galleryItems = computed(() => { }) }) -// Group assets by promptId for output tab -const groupedAssets = computed(() => { - if (activeTab.value !== 'output' || isInFolderView.value) { - return null - } - - const groups = new Map() - - mediaAssets.value.forEach((asset) => { - const promptId = asset.user_metadata?.promptId as string - if (promptId) { - if (!groups.has(promptId)) { - groups.set(promptId, []) - } - groups.get(promptId)!.push(asset) - } - }) - - return groups -}) +// Store folder view assets separately +const folderAssets = ref([]) // Get display assets based on view mode const displayAssets = computed(() => { - if (isInFolderView.value && folderPromptId.value) { - // Show all assets from the selected prompt - return mediaAssets.value.filter( - (asset) => asset.user_metadata?.promptId === folderPromptId.value - ) - } - - if (activeTab.value === 'output' && groupedAssets.value) { - // Show only the first asset from each prompt group - const firstAssets: AssetItem[] = [] - groupedAssets.value.forEach((assets) => { - if (assets.length > 0) { - // Add output count to the first asset - const firstAsset = { ...assets[0] } - firstAsset.user_metadata = { - ...firstAsset.user_metadata, - outputCount: assets.length - } - firstAssets.push(firstAsset) - } - }) - return firstAssets + if (isInFolderView.value) { + // Show all assets from the folder view + return folderAssets.value } + // Normal view: show grouped assets (already have outputCount from API) return mediaAssets.value }) @@ -250,22 +214,36 @@ const handleZoomClick = (asset: AssetItem) => { const enterFolderView = (asset: AssetItem) => { const promptId = asset.user_metadata?.promptId as string - if (promptId) { + const allOutputs = asset.user_metadata?.allOutputs as any[] + + if (promptId && allOutputs) { folderPromptId.value = promptId - // Get execution time from the first asset of this prompt - const promptAssets = mediaAssets.value.filter( - (a) => a.user_metadata?.promptId === promptId - ) - if (promptAssets.length > 0) { - folderExecutionTime.value = promptAssets[0].user_metadata - ?.executionTimeInSeconds as number - } + folderExecutionTime.value = asset.user_metadata + ?.executionTimeInSeconds as number + + // Convert all outputs to AssetItem format for folder view + folderAssets.value = allOutputs.map((output) => ({ + id: `${promptId}-${output.nodeId}-${output.filename}`, + name: output.filename, + size: 0, + created_at: asset.created_at, // Use parent asset's created_at + tags: ['output'], + preview_url: output.url, + user_metadata: { + promptId, + nodeId: output.nodeId, + subfolder: output.subfolder, + executionTimeInSeconds: asset.user_metadata?.executionTimeInSeconds, + workflow: asset.user_metadata?.workflow + } + })) } } const exitFolderView = () => { folderPromptId.value = null folderExecutionTime.value = undefined + folderAssets.value = [] } const copyJobId = async () => { diff --git a/src/platform/assets/composables/useMediaAssets/useAssetsApi.ts b/src/platform/assets/composables/useMediaAssets/useAssetsApi.ts index 2d93e62a0..613edfed0 100644 --- a/src/platform/assets/composables/useMediaAssets/useAssetsApi.ts +++ b/src/platform/assets/composables/useMediaAssets/useAssetsApi.ts @@ -41,21 +41,29 @@ export function useAssetsApi() { })) } - // For output directory, use QueueStore's flatTasks const queueStore = useQueueStore() - // Get all flat tasks that have preview outputs - const assetItems: AssetItem[] = queueStore.flatTasks + const assetItems: AssetItem[] = queueStore.tasks .filter( (task) => task.previewOutput && task.displayStatus === 'Completed' ) .map((task) => { const output = task.previewOutput! - return mapTaskOutputToAssetItem( + const assetItem = mapTaskOutputToAssetItem( task, output, true // Use display name for cloud ) + + // Add output count and all outputs for folder view + assetItem.user_metadata = { + ...assetItem.user_metadata, + outputCount: task.flatOutputs.filter((o) => o.supportsPreview) + .length, + allOutputs: task.flatOutputs.filter((o) => o.supportsPreview) + } + + return assetItem }) return assetItems diff --git a/src/platform/assets/composables/useMediaAssets/useInternalFilesApi.ts b/src/platform/assets/composables/useMediaAssets/useInternalFilesApi.ts index e8abae281..0a5c915fd 100644 --- a/src/platform/assets/composables/useMediaAssets/useInternalFilesApi.ts +++ b/src/platform/assets/composables/useMediaAssets/useInternalFilesApi.ts @@ -48,17 +48,28 @@ export function useInternalFilesApi() { const queueStore = useQueueStore() - const assetItems: AssetItem[] = queueStore.flatTasks + // Use tasks (already grouped by promptId) instead of flatTasks + const assetItems: AssetItem[] = queueStore.tasks .filter( (task) => task.previewOutput && task.displayStatus === 'Completed' ) .map((task) => { const output = task.previewOutput! - return mapTaskOutputToAssetItem( + const assetItem = mapTaskOutputToAssetItem( task, output, false // Don't use display name for internal ) + + // Add output count and all outputs for folder view + assetItem.user_metadata = { + ...assetItem.user_metadata, + outputCount: task.flatOutputs.filter((o) => o.supportsPreview) + .length, + allOutputs: task.flatOutputs.filter((o) => o.supportsPreview) + } + + return assetItem }) // Sort by creation date (newest first)