mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-23 15:59:47 +00:00
Fix: Implement scope-aware filtering for template modal (#8335)
## Summary - Fixes template filtering to be scope-aware, preventing empty results when switching categories - Filters now only show as selected when they exist in the current category scope - User selections are still persisted in localStorage for convenience ## Problem When users selected filters (e.g., Image-specific filters) and switched to a different category (e.g., Video), the persisted filters would cause empty results because those filter values didn't exist in the new scope. ## Solution - Modified `useTemplateFiltering` composable to track which filters are "active" (applicable to current scope) - Only active filters are shown as selected in the UI - Only active filters are applied to the filtering logic - All user selections are still persisted in localStorage - When returning to a category, previously selected filters automatically reactivate if applicable ## Test Plan Tested manually in browser: 1. Navigate to Image category 2. Select filters like "Image" and "Image Edit" from Tasks dropdown 3. Switch to Video category - filters show as "0 selected" (Image/Image Edit don't exist in Video) 4. Return to Image category - filters are automatically reselected (2 selected) 5. No empty results when switching between categories ## Changes - `useTemplateFiltering.ts`: Added scope-aware filtering logic with active/inactive filter distinction - `WorkflowTemplateSelectorDialog.vue`: Pass navigation context and use active filters for UI - `useTemplateFiltering.test.ts`: Added comprehensive tests for scope-aware behavior https://github.com/user-attachments/assets/706ddabf-abad-4ff9-a378-6603d275d15a
This commit is contained in:
committed by
GitHub
parent
aa5125cef6
commit
3b5d285fe2
@@ -547,13 +547,15 @@ const navigationFilteredTemplates = computed(() => {
|
||||
return workflowTemplatesStore.filterTemplatesByCategory(selectedNavItem.value)
|
||||
})
|
||||
|
||||
// Template filtering
|
||||
// Template filtering with scope awareness
|
||||
const {
|
||||
searchQuery,
|
||||
selectedModels,
|
||||
selectedUseCases,
|
||||
selectedRunsOn,
|
||||
sortBy,
|
||||
activeModels,
|
||||
activeUseCases,
|
||||
filteredTemplates,
|
||||
availableModels,
|
||||
availableUseCases,
|
||||
@@ -562,7 +564,7 @@ const {
|
||||
totalCount,
|
||||
resetFilters,
|
||||
loadFuseOptions
|
||||
} = useTemplateFiltering(navigationFilteredTemplates)
|
||||
} = useTemplateFiltering(navigationFilteredTemplates, selectedNavItem)
|
||||
|
||||
/**
|
||||
* Coordinates state between the selected navigation item and the sort order to
|
||||
@@ -595,9 +597,11 @@ watch(selectedNavItem, () => coordinateNavAndSort('nav'))
|
||||
watch(sortBy, () => coordinateNavAndSort('sort'))
|
||||
|
||||
// Convert between string array and object array for MultiSelect component
|
||||
// Only show selected items that exist in the current scope
|
||||
const selectedModelObjects = computed({
|
||||
get() {
|
||||
return selectedModels.value.map((model) => ({ name: model, value: model }))
|
||||
// Only include selected models that exist in availableModels
|
||||
return activeModels.value.map((model) => ({ name: model, value: model }))
|
||||
},
|
||||
set(value: { name: string; value: string }[]) {
|
||||
selectedModels.value = value.map((item) => item.value)
|
||||
@@ -606,7 +610,7 @@ const selectedModelObjects = computed({
|
||||
|
||||
const selectedUseCaseObjects = computed({
|
||||
get() {
|
||||
return selectedUseCases.value.map((useCase) => ({
|
||||
return activeUseCases.value.map((useCase) => ({
|
||||
name: useCase,
|
||||
value: useCase
|
||||
}))
|
||||
|
||||
Reference in New Issue
Block a user