add better filtering for node types

This commit is contained in:
Mutasem Aldmour 2024-10-30 14:17:55 +01:00
parent 750bbb5a95
commit 6d5e7ea88d
No known key found for this signature in database
GPG key ID: 3DFA8122BB7FD6B8

View file

@ -87,6 +87,8 @@ const filters = ref<Filters>({
httpNodeUrl: '',
});
const nodeTypesFilter = ref<string>('');
const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);
const currentUser = computed(() => usersStore.currentUser ?? ({} as IUser));
const allWorkflows = computed(() => workflowsStore.allWorkflows as IResource[]);
@ -94,6 +96,15 @@ const isShareable = computed(
() => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Sharing],
);
const nodeTypesFiltered = computed(() =>
nodeTypesStore.allLatestNodeTypes.filter((nodeType) => {
return (
nodeType.displayName.toLowerCase().includes(nodeTypesFilter.value) ||
nodeType.name.toLowerCase().includes(nodeTypesFilter.value)
);
}),
);
const statusFilterOptions = computed(() => [
{
label: i18n.baseText('workflows.filters.status.all'),
@ -193,12 +204,13 @@ const trackCategoryLinkClick = (category: string) => {
};
const fetchWorkflowsWithFilters = async () => {
const { homeProject, status, credentials, nodeTypes, nodeName, webhookUrl, httpNodeUrl } =
const { homeProject, status, credentials, nodeTypes, nodeName, webhookUrl, httpNodeUrl, tags } =
filters.value;
const options: WorkflowsFetchOptions = {
filter: {
projectId: homeProject ? homeProject : undefined,
active: status === StatusFilter.ACTIVE ? true : undefined,
tags: tags.map((tagId) => tagsStore.tagsById[tagId]?.name),
},
credentialIds: credentials.length ? credentials : undefined,
nodeTypes: nodeTypes.length ? nodeTypes : undefined,
@ -346,6 +358,10 @@ const setFiltersFromQueryString = async () => {
void router.replace({ query: pickBy(route.query) });
};
function updateNodeTypesFilter(filter: string) {
nodeTypesFilter.value = filter;
}
sourceControlStore.$onAction(({ name, after }) => {
if (name !== 'pullWorkfolder') return;
after(async () => await initialize());
@ -510,7 +526,6 @@ onMounted(async () => {
<N8nSelect
data-test-id="status-dropdown"
:model-value="filters.status"
:filterable="true"
@update:model-value="setKeyValue('status', $event)"
>
<N8nOption
@ -569,11 +584,12 @@ onMounted(async () => {
:multiple="true"
:placeholder="i18n.baseText('workflows.filters.nodeTypes.placeholder')"
:filterable="true"
:filter-method="updateNodeTypesFilter"
class="tags-container"
@update:model-value="setKeyValue('nodeTypes', $event)"
>
<N8nOption
v-for="nodeType in nodeTypesStore.allLatestNodeTypes"
v-for="nodeType in nodeTypesFiltered"
:key="nodeType.name"
:label="nodeType.displayName"
:value="nodeType.name"