mirror of
https://github.com/n8n-io/n8n.git
synced 2024-11-14 08:34:07 -08:00
refactor(editor): Convert TagsView to composition API (no-changelog) (#11566)
This commit is contained in:
कारतोफ्फेलस्क्रिप्ट™
GitHub
parent
19d55da4ad
commit
2ed4ce3d7a
|
|
@ -1,181 +1,176 @@
|
|||
<script lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import type { ITag, ITagRow } from '@/Interface';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import TagsTableHeader from '@/components/TagsManager/TagsView/TagsTableHeader.vue';
|
||||
import TagsTable from '@/components/TagsManager/TagsView/TagsTable.vue';
|
||||
import { mapStores } from 'pinia';
|
||||
import { useUsersStore } from '@/stores/users.store';
|
||||
import { useRBACStore } from '@/stores/rbac.store';
|
||||
import type { BaseTextKey } from '@/plugins/i18n';
|
||||
|
||||
defineOptions({ name: 'TagsView' });
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
usageColumnTitleLocaleKey?: BaseTextKey;
|
||||
usageLocaleKey?: BaseTextKey;
|
||||
tags: ITag[];
|
||||
isLoading: boolean;
|
||||
}>(),
|
||||
{
|
||||
usageColumnTitleLocaleKey: 'tagsTable.usage',
|
||||
usageLocaleKey: 'tagsView.inUse',
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
update: [updateId: string, name: string, onUpdate: (updated: boolean) => void];
|
||||
delete: [deleteId: string, onDelete: (deleted: boolean) => void];
|
||||
create: [name: string, onCreate: (created: ITag | null) => void];
|
||||
disableCreate: [];
|
||||
}>();
|
||||
|
||||
const matches = (name: string, filter: string) =>
|
||||
name.toLowerCase().trim().includes(filter.toLowerCase().trim());
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TagsView',
|
||||
components: { TagsTableHeader, TagsTable },
|
||||
props: {
|
||||
usageColumnTitleLocaleKey: {
|
||||
type: String as PropType<BaseTextKey>,
|
||||
default: 'tagsTable.usage',
|
||||
},
|
||||
usageLocaleKey: {
|
||||
type: String as PropType<BaseTextKey>,
|
||||
default: 'tagsView.inUse',
|
||||
},
|
||||
tags: {
|
||||
type: Array as () => ITag[],
|
||||
required: true,
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: {
|
||||
update: null,
|
||||
delete: null,
|
||||
create: null,
|
||||
disableCreate: null,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
createEnabled: false,
|
||||
deleteId: '',
|
||||
updateId: '',
|
||||
search: '',
|
||||
newName: '',
|
||||
stickyIds: new Set(),
|
||||
isSaving: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useUsersStore, useRBACStore),
|
||||
isCreateEnabled(): boolean {
|
||||
return (this.tags || []).length === 0 || this.createEnabled;
|
||||
},
|
||||
rows(): ITagRow[] {
|
||||
const getUsage = (count: number | undefined) =>
|
||||
count && count > 0
|
||||
? this.$locale.baseText(this.usageLocaleKey, { adjustToNumber: count })
|
||||
: this.$locale.baseText('tagsView.notBeingUsed');
|
||||
const i18n = useI18n();
|
||||
const rbacStore = useRBACStore();
|
||||
|
||||
const disabled = this.isCreateEnabled || !!this.updateId || !!this.deleteId;
|
||||
const tagRows = (this.tags ?? [])
|
||||
.filter((tag) => this.stickyIds.has(tag.id) || matches(tag.name, this.search))
|
||||
.map(
|
||||
(tag): ITagRow => ({
|
||||
tag,
|
||||
usage: getUsage(tag.usageCount),
|
||||
disable: disabled && tag.id !== this.deleteId && tag.id !== this.updateId,
|
||||
update: disabled && tag.id === this.updateId,
|
||||
delete: disabled && tag.id === this.deleteId,
|
||||
canDelete: this.rbacStore.hasScope('tag:delete'),
|
||||
}),
|
||||
);
|
||||
const createEnabled = ref(false);
|
||||
const deleteId = ref('');
|
||||
const updateId = ref('');
|
||||
const search = ref('');
|
||||
const newName = ref('');
|
||||
const stickyIds = ref(new Set());
|
||||
const isSaving = ref(false);
|
||||
|
||||
return this.isCreateEnabled ? [{ create: true }, ...tagRows] : tagRows;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onNewNameChange(name: string): void {
|
||||
this.newName = name;
|
||||
},
|
||||
onSearchChange(search: string): void {
|
||||
this.stickyIds.clear();
|
||||
this.search = search;
|
||||
},
|
||||
isHeaderDisabled(): boolean {
|
||||
return this.isLoading || !!(this.isCreateEnabled || this.updateId || this.deleteId);
|
||||
},
|
||||
const isCreateEnabled = computed(() => props.tags.length === 0 || createEnabled.value);
|
||||
|
||||
onUpdateEnable(updateId: string): void {
|
||||
this.updateId = updateId;
|
||||
},
|
||||
disableUpdate(): void {
|
||||
this.updateId = '';
|
||||
this.newName = '';
|
||||
},
|
||||
updateTag(): void {
|
||||
this.isSaving = true;
|
||||
const name = this.newName.trim();
|
||||
const onUpdate = (updated: boolean) => {
|
||||
this.isSaving = false;
|
||||
if (updated) {
|
||||
this.stickyIds.add(this.updateId);
|
||||
this.disableUpdate();
|
||||
}
|
||||
};
|
||||
const rows = computed(() => {
|
||||
const getUsage = (count: number | undefined) =>
|
||||
count && count > 0
|
||||
? i18n.baseText(props.usageLocaleKey, { adjustToNumber: count })
|
||||
: i18n.baseText('tagsView.notBeingUsed');
|
||||
|
||||
this.$emit('update', this.updateId, name, onUpdate);
|
||||
},
|
||||
const disabled = isCreateEnabled.value || !!updateId.value || !!deleteId.value;
|
||||
const tagRows = props.tags
|
||||
.filter((tag) => stickyIds.value.has(tag.id) || matches(tag.name, search.value))
|
||||
.map(
|
||||
(tag): ITagRow => ({
|
||||
tag,
|
||||
usage: getUsage(tag.usageCount),
|
||||
disable: disabled && tag.id !== deleteId.value && tag.id !== updateId.value,
|
||||
update: disabled && tag.id === updateId.value,
|
||||
delete: disabled && tag.id === deleteId.value,
|
||||
canDelete: rbacStore.hasScope('tag:delete'),
|
||||
}),
|
||||
);
|
||||
|
||||
onDeleteEnable(deleteId: string): void {
|
||||
this.deleteId = deleteId;
|
||||
},
|
||||
disableDelete(): void {
|
||||
this.deleteId = '';
|
||||
},
|
||||
deleteTag(): void {
|
||||
this.isSaving = true;
|
||||
const onDelete = (deleted: boolean) => {
|
||||
if (deleted) {
|
||||
this.disableDelete();
|
||||
}
|
||||
this.isSaving = false;
|
||||
};
|
||||
|
||||
this.$emit('delete', this.deleteId, onDelete);
|
||||
},
|
||||
|
||||
onCreateEnable(): void {
|
||||
this.createEnabled = true;
|
||||
this.newName = '';
|
||||
},
|
||||
disableCreate(): void {
|
||||
this.createEnabled = false;
|
||||
this.$emit('disableCreate');
|
||||
},
|
||||
createTag(): void {
|
||||
this.isSaving = true;
|
||||
const name = this.newName.trim();
|
||||
const onCreate = (created: ITag | null) => {
|
||||
if (created) {
|
||||
this.stickyIds.add(created.id);
|
||||
this.disableCreate();
|
||||
}
|
||||
this.isSaving = false;
|
||||
};
|
||||
|
||||
this.$emit('create', name, onCreate);
|
||||
},
|
||||
|
||||
applyOperation(): void {
|
||||
if (this.isSaving) {
|
||||
return;
|
||||
} else if (this.isCreateEnabled) {
|
||||
this.createTag();
|
||||
} else if (this.updateId) {
|
||||
this.updateTag();
|
||||
} else if (this.deleteId) {
|
||||
this.deleteTag();
|
||||
}
|
||||
},
|
||||
cancelOperation(): void {
|
||||
if (this.isSaving) {
|
||||
return;
|
||||
} else if (this.isCreateEnabled) {
|
||||
this.disableCreate();
|
||||
} else if (this.updateId) {
|
||||
this.disableUpdate();
|
||||
} else if (this.deleteId) {
|
||||
this.disableDelete();
|
||||
}
|
||||
},
|
||||
},
|
||||
return isCreateEnabled.value ? [{ create: true }, ...tagRows] : tagRows;
|
||||
});
|
||||
|
||||
const onNewNameChange = (name: string): void => {
|
||||
newName.value = name;
|
||||
};
|
||||
|
||||
const onSearchChange = (searchValue: string): void => {
|
||||
stickyIds.value.clear();
|
||||
search.value = searchValue;
|
||||
};
|
||||
|
||||
const isHeaderDisabled = (): boolean => {
|
||||
return props.isLoading || !!(isCreateEnabled.value || updateId.value || deleteId.value);
|
||||
};
|
||||
|
||||
const onUpdateEnable = (updateIdValue: string): void => {
|
||||
updateId.value = updateIdValue;
|
||||
};
|
||||
|
||||
const disableUpdate = (): void => {
|
||||
updateId.value = '';
|
||||
newName.value = '';
|
||||
};
|
||||
|
||||
const updateTag = (): void => {
|
||||
isSaving.value = true;
|
||||
const name = newName.value.trim();
|
||||
const onUpdate = (updated: boolean) => {
|
||||
isSaving.value = false;
|
||||
if (updated) {
|
||||
stickyIds.value.add(updateId.value);
|
||||
disableUpdate();
|
||||
}
|
||||
};
|
||||
|
||||
emit('update', updateId.value, name, onUpdate);
|
||||
};
|
||||
|
||||
const onDeleteEnable = (deleteIdValue: string): void => {
|
||||
deleteId.value = deleteIdValue;
|
||||
};
|
||||
|
||||
const disableDelete = (): void => {
|
||||
deleteId.value = '';
|
||||
};
|
||||
|
||||
const deleteTag = (): void => {
|
||||
isSaving.value = true;
|
||||
const onDelete = (deleted: boolean) => {
|
||||
if (deleted) {
|
||||
disableDelete();
|
||||
}
|
||||
isSaving.value = false;
|
||||
};
|
||||
|
||||
emit('delete', deleteId.value, onDelete);
|
||||
};
|
||||
|
||||
const onCreateEnable = (): void => {
|
||||
createEnabled.value = true;
|
||||
newName.value = '';
|
||||
};
|
||||
|
||||
const disableCreate = (): void => {
|
||||
createEnabled.value = false;
|
||||
emit('disableCreate');
|
||||
};
|
||||
|
||||
const createTag = (): void => {
|
||||
isSaving.value = true;
|
||||
const name = newName.value.trim();
|
||||
const onCreate = (created: ITag | null) => {
|
||||
if (created) {
|
||||
stickyIds.value.add(created.id);
|
||||
disableCreate();
|
||||
}
|
||||
isSaving.value = false;
|
||||
};
|
||||
|
||||
emit('create', name, onCreate);
|
||||
};
|
||||
|
||||
const applyOperation = (): void => {
|
||||
if (isSaving.value) {
|
||||
return;
|
||||
} else if (isCreateEnabled.value) {
|
||||
createTag();
|
||||
} else if (updateId.value) {
|
||||
updateTag();
|
||||
} else if (deleteId.value) {
|
||||
deleteTag();
|
||||
}
|
||||
};
|
||||
|
||||
const cancelOperation = (): void => {
|
||||
if (isSaving.value) {
|
||||
return;
|
||||
} else if (isCreateEnabled.value) {
|
||||
disableCreate();
|
||||
} else if (updateId.value) {
|
||||
disableUpdate();
|
||||
} else if (deleteId.value) {
|
||||
disableDelete();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue