mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-25 09:14:25 +00:00
* feat: improve multi-package selection handling - Check each package individually for conflicts in install dialog - Show only packages with actual conflicts in warning dialog - Hide action buttons for mixed installed/uninstalled selections - Display dynamic status based on selected packages priority - Deduplicate conflict information across multiple packages - Fix PackIcon blur background opacity 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: extract multi-package logic into reusable composables - Create usePackageSelection composable for installation state management - Create usePackageStatus composable for status priority logic - Refactor InfoPanelMultiItem to use new composables - Reduce component complexity by separating business logic - Improve code reusability across components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: directory modified * test: add comprehensive tests for multi-package selection composables - Add tests for usePacksSelection composable - Test installation status filtering - Test selection state determination (all/none/mixed) - Test dynamic status changes - Add tests for usePacksStatus composable - Test import failure detection - Test status priority handling - Test integration with conflict detection store - Fix existing test mocking issues - Update es-toolkit/compat mock to use async import - Add Pinia setup for store-dependent tests - Update vue-i18n mock to preserve all exports --------- Co-authored-by: Claude <noreply@anthropic.com>
64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import { type Ref, computed } from 'vue'
|
|
|
|
import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
|
|
import type { components } from '@/types/comfyRegistryTypes'
|
|
|
|
type NodePack = components['schemas']['Node']
|
|
type NodeStatus = components['schemas']['NodeStatus']
|
|
type NodeVersionStatus = components['schemas']['NodeVersionStatus']
|
|
|
|
const STATUS_PRIORITY = [
|
|
'NodeStatusBanned',
|
|
'NodeVersionStatusBanned',
|
|
'NodeStatusDeleted',
|
|
'NodeVersionStatusDeleted',
|
|
'NodeVersionStatusFlagged',
|
|
'NodeVersionStatusPending',
|
|
'NodeStatusActive',
|
|
'NodeVersionStatusActive'
|
|
] as const
|
|
|
|
/**
|
|
* Composable for managing package status with priority
|
|
* Handles import failures and determines the most important status
|
|
*/
|
|
export function usePacksStatus(nodePacks: Ref<NodePack[]>) {
|
|
const conflictDetectionStore = useConflictDetectionStore()
|
|
|
|
const hasImportFailed = computed(() => {
|
|
return nodePacks.value.some((pack) => {
|
|
if (!pack.id) return false
|
|
const conflicts = conflictDetectionStore.getConflictsForPackageByID(
|
|
pack.id
|
|
)
|
|
return (
|
|
conflicts?.conflicts?.some((c) => c.type === 'import_failed') || false
|
|
)
|
|
})
|
|
})
|
|
|
|
const overallStatus = computed<NodeStatus | NodeVersionStatus>(() => {
|
|
// Check for import failed first (highest priority for installed packages)
|
|
if (hasImportFailed.value) {
|
|
// Import failed doesn't have a specific status enum, so we return active
|
|
// but the PackStatusMessage will handle it via hasImportFailed prop
|
|
return 'NodeVersionStatusActive' as NodeVersionStatus
|
|
}
|
|
|
|
// Find the highest priority status from all packages
|
|
for (const priorityStatus of STATUS_PRIORITY) {
|
|
if (nodePacks.value.some((pack) => pack.status === priorityStatus)) {
|
|
return priorityStatus as NodeStatus | NodeVersionStatus
|
|
}
|
|
}
|
|
|
|
// Default to active if no specific status found
|
|
return 'NodeVersionStatusActive' as NodeVersionStatus
|
|
})
|
|
|
|
return {
|
|
hasImportFailed,
|
|
overallStatus
|
|
}
|
|
}
|