diff --git a/packages/devtools/client/components/ModuleInstallList.vue b/packages/devtools/client/components/ModuleInstallList.vue index d01f6d3006..35fb51cfd8 100644 --- a/packages/devtools/client/components/ModuleInstallList.vue +++ b/packages/devtools/client/components/ModuleInstallList.vue @@ -4,17 +4,19 @@ import Fuse from 'fuse.js' import { computed, ref } from 'vue' // @ts-expect-error missing types import { RecycleScroller } from 'vue-virtual-scroller' -import { useModulesList } from '~/composables/state-modules' +import { useInstalledModules, useModulesList } from '~/composables/state-modules' type SortingFunction = (a: T, b: T) => number const emit = defineEmits(['close']) const collection = useModulesList() +const installedModules = useInstalledModules() const sortingOptions = ['downloads', 'stars', 'updated', 'created'] as const const ascendingOrder = ref(false) const selectedSortingOption = ref(sortingOptions[0]) +const excludeInstalled = ref(true) const sortingFactors: Record> = { downloads: (a, b) => a.stats.downloads - b.stats.downloads, @@ -45,9 +47,13 @@ const fuse = computed(() => new Fuse(collection.value || [], { })) const items = computed(() => { + let filteredItems = sortedItems.value + if (excludeInstalled.value) { + filteredItems = (filteredItems || []).filter(item => !installedModules.value.some(installed => installed.name === item.name)) + } if (!search.value) - return sortedItems.value - return fuse.value.search(search.value).map(r => r.item) + return filteredItems + return fuse.value.search(search.value).map(r => r.item).filter(item => filteredItems?.includes(item)) }) @@ -59,7 +65,7 @@ const items = computed(() => { icon="i-carbon-intent-request-create" text="Install Module" /> - +