mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Make TagsDropdown component more flexible and reusable

Browse source 
• Make createTag prop optional
• Add eventBus prop to TagsDropdown
• Update TagsInput to use TagsDropdown
• Remove unnecessary class in TagsInput
• Adjust prop types and imports
This commit is contained in:
Oleg Ivaniv 2024-11-12 16:46:00 +01:00
parent 4155ae8d5a
commit 26d7fa7378
No known key found for this signature in database
2 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/editor-ui/src/components/TagsDropdown.vue
View file

@ -12,11 +12,11 @@ import { useToast } from '@/composables/useToast';
interface TagsDropdownProps { interface TagsDropdownProps {
placeholder: string; placeholder: string;
modelValue: string[]; modelValue: string[];
createTag: (name: string) => Promise<ITag>;
eventBus: EventBus | null; eventBus: EventBus | null;
allTags: ITag[]; allTags: ITag[];
isLoading: boolean; isLoading: boolean;
tagsById: Record<string, ITag>; tagsById: Record<string, ITag>;
createTag?: (name: string) => Promise<ITag>;
} }
const i18n = useI18n(); const i18n = useI18n();
@ -109,6 +109,8 @@ function filterOptions(value = '') {
} }
async function onCreate() { async function onCreate() {
if (!props.createTag) return;
const name = filter.value; const name = filter.value;
try { try {
const newTag = await props.createTag(name); const newTag = await props.createTag(name);

4
packages/editor-ui/src/components/WorkflowEvaluation/EditEvaluation/TagsInput.vue
View file

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ITag } from '@/Interface'; import type { ITag } from '@/Interface';
import { createEventBus } from 'n8n-design-system';
import { computed } from 'vue'; import { computed } from 'vue';
export interface TagsInputProps { export interface TagsInputProps {
@ -25,6 +26,7 @@ const props = withDefaults(defineProps<TagsInputProps>(), {
const emit = defineEmits<{ 'update:modelValue': [value: TagsInputProps['modelValue']] }>(); const emit = defineEmits<{ 'update:modelValue': [value: TagsInputProps['modelValue']] }>();
const tagsEventBus = createEventBus();
const getTagName = computed(() => (tagId: string) => { const getTagName = computed(() => (tagId: string) => {
return props.tagsById[tagId]?.name ?? ''; return props.tagsById[tagId]?.name ?? '';
}); });
@ -60,8 +62,8 @@ function updateTags(tags: string[]) {
:all-tags="allTags" :all-tags="allTags"
:is-loading="isLoading" :is-loading="isLoading"
:tags-by-id="tagsById" :tags-by-id="tagsById"
class="tags-edit"
data-test-id="workflow-tags-dropdown" data-test-id="workflow-tags-dropdown"
:event-bus="tagsEventBus"
@update:model-value="updateTags" @update:model-value="updateTags"
@esc="cancelEditing('tags')" @esc="cancelEditing('tags')"
@blur="saveChanges('tags')" @blur="saveChanges('tags')"