mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 22:59:14 +00:00
* [feat] Improve UX for disabled node packs in Manager dialog - Hide "Update All" button when only disabled packs have updates - Add tooltip on "Update All" hover to indicate disabled nodes won't be updated - Disable version selector and show tooltip for disabled node packs - Filter updates to only show enabled packs in the update queue - Add visual indicators (opacity, cursor) for disabled pack cards - Add comprehensive test coverage for new functionality This improves the user experience by clearly indicating which packs can be updated and preventing confusion about disabled packs. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * chore: missing nodes description added * test: test code modified --------- Co-authored-by: Claude <noreply@anthropic.com>
83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
import { computed, onMounted } from 'vue'
|
|
|
|
import { useInstalledPacks } from '@/composables/nodePack/useInstalledPacks'
|
|
import { useComfyManagerStore } from '@/stores/comfyManagerStore'
|
|
import type { components } from '@/types/comfyRegistryTypes'
|
|
import { compareVersions, isSemVer } from '@/utils/formatUtil'
|
|
|
|
/**
|
|
* Composable to find NodePacks that have updates available
|
|
* Uses the same filtering approach as ManagerDialogContent.vue
|
|
* Automatically fetches installed pack data when initialized
|
|
*/
|
|
export const useUpdateAvailableNodes = () => {
|
|
const comfyManagerStore = useComfyManagerStore()
|
|
const { installedPacks, isLoading, error, startFetchInstalled } =
|
|
useInstalledPacks()
|
|
|
|
// Check if a pack has updates available (same logic as usePackUpdateStatus)
|
|
const isOutdatedPack = (pack: components['schemas']['Node']) => {
|
|
const isInstalled = comfyManagerStore.isPackInstalled(pack?.id)
|
|
if (!isInstalled) return false
|
|
|
|
const installedVersion = comfyManagerStore.getInstalledPackVersion(
|
|
pack.id ?? ''
|
|
)
|
|
const latestVersion = pack.latest_version?.version
|
|
|
|
const isNightlyPack = !!installedVersion && !isSemVer(installedVersion)
|
|
|
|
if (isNightlyPack || !latestVersion) {
|
|
return false
|
|
}
|
|
|
|
return compareVersions(latestVersion, installedVersion) > 0
|
|
}
|
|
|
|
// Same filtering logic as ManagerDialogContent.vue
|
|
const filterOutdatedPacks = (packs: components['schemas']['Node'][]) =>
|
|
packs.filter(isOutdatedPack)
|
|
|
|
// Filter only outdated packs from installed packs
|
|
const updateAvailableNodePacks = computed(() => {
|
|
if (!installedPacks.value.length) return []
|
|
return filterOutdatedPacks(installedPacks.value)
|
|
})
|
|
|
|
// Filter only enabled outdated packs
|
|
const enabledUpdateAvailableNodePacks = computed(() => {
|
|
return updateAvailableNodePacks.value.filter((pack) =>
|
|
comfyManagerStore.isPackEnabled(pack.id)
|
|
)
|
|
})
|
|
|
|
// Check if there are any enabled outdated packs
|
|
const hasUpdateAvailable = computed(() => {
|
|
return enabledUpdateAvailableNodePacks.value.length > 0
|
|
})
|
|
|
|
// Check if there are disabled packs with updates
|
|
const hasDisabledUpdatePacks = computed(() => {
|
|
return (
|
|
updateAvailableNodePacks.value.length >
|
|
enabledUpdateAvailableNodePacks.value.length
|
|
)
|
|
})
|
|
|
|
// Automatically fetch installed pack data when composable is used
|
|
onMounted(async () => {
|
|
if (!installedPacks.value.length && !isLoading.value) {
|
|
await startFetchInstalled()
|
|
}
|
|
})
|
|
|
|
return {
|
|
updateAvailableNodePacks,
|
|
enabledUpdateAvailableNodePacks,
|
|
hasUpdateAvailable,
|
|
hasDisabledUpdatePacks,
|
|
isLoading,
|
|
error
|
|
}
|
|
}
|