mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-09 22:24:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix ts and eslint errors in various components (no-changelog) (#9592)

Browse source
This commit is contained in:
Tomi Turtiainen 2024-06-03 11:04:13 +03:00 committed by GitHub
parent 09472fb9ee
commit 03f15c49d5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 97 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
packages/editor-ui/src/components/TagsContainer.vue
View file

@ -48,7 +48,7 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, type ComponentInstance } from 'vue';
import type { ITag } from '@/Interface';
import IntersectionObserver from './IntersectionObserver.vue';
@ -70,7 +70,22 @@ interface TagEl extends ITag {
export default defineComponent({
name: 'TagsContainer',
components: { IntersectionObserver, IntersectionObserved },
props: ['tagIds', 'limit', 'clickable', 'responsive', 'hoverable'],
props: {
tagIds: {
type: Array as () => string[],
required: true,
},
limit: {
type: Number,
default: DEFAULT_MAX_TAGS_LIMIT,
},
clickable: Boolean,
responsive: Boolean,
hoverable: Boolean,
},
emits: {
click: null,
},
data() {
return {
maxWidth: 320,
@ -79,16 +94,6 @@ export default defineComponent({
debouncedSetMaxWidth: () => {},
};
},
created() {
this.debouncedSetMaxWidth = debounce(this.setMaxWidth, 100);
},
mounted() {
this.setMaxWidth();
window.addEventListener('resize', this.debouncedSetMaxWidth);
},
beforeUnmount() {
window.removeEventListener('resize', this.debouncedSetMaxWidth);
},
computed: {
...mapStores(useTagsStore),
style() {
@ -101,9 +106,7 @@ export default defineComponent({
.map((tagId: string) => this.tagsStore.getTagById(tagId))
.filter(Boolean); // if tag has been deleted from store
const limit = this.limit || DEFAULT_MAX_TAGS_LIMIT;
let toDisplay: TagEl[] = limit ? tags.slice(0, limit) : tags;
let toDisplay: TagEl[] = this.limit ? tags.slice(0, this.limit) : tags;
toDisplay = toDisplay.map((tag: ITag) => ({
...tag,
hidden: this.responsive && !this.visibility[tag.id],
@ -135,9 +138,20 @@ export default defineComponent({
return toDisplay;
},
},
created() {
this.debouncedSetMaxWidth = debounce(this.setMaxWidth, 100);
},
mounted() {
this.setMaxWidth();
window.addEventListener('resize', this.debouncedSetMaxWidth);
},
beforeUnmount() {
window.removeEventListener('resize', this.debouncedSetMaxWidth);
},
methods: {
setMaxWidth() {
const container = this.$refs.tagsContainer.$el as HTMLElement;
const containerEl = this.$refs.tagsContainer as ComponentInstance<IntersectionObserver>;
const container = containerEl.$el as HTMLElement;
const parent = container.parentNode as HTMLElement;
if (parent) {

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

@ -96,8 +96,14 @@ export default defineComponent({
},
eventBus: {
type: Object as PropType<EventBus>,
default: null,
},
},
emits: {
'update:modelValue': null,
esc: null,
blur: null,
},
setup(props, { emit }) {
const i18n = useI18n();
const { showError } = useToast();
@ -119,10 +125,6 @@ export default defineComponent({
return tagsStore.allTags;
});
const hasTags = computed<boolean>(() => {
return tagsStore.hasTags;
});
const options = computed<ITag[]>(() => {
return allTags.value.filter((tag: ITag) => tag && tag.name.includes(filter.value));
});
@ -142,7 +144,9 @@ export default defineComponent({
);
onMounted(() => {
const select = selectRef.value?.$refs?.innerSelect;
const select = selectRef.value?.$refs?.innerSelect as
| { $refs: { input: Element } }
| undefined;
if (select) {
const input = select.$refs.input as Element | undefined;
if (input) {
@ -190,8 +194,6 @@ export default defineComponent({
const newTag = await tagsStore.create(name);
emit('update:modelValue', [...props.modelValue, newTag.id]);
void nextTick(() => focusOnTag(newTag.id));
filter.value = '';
} catch (error) {
showError(
@ -233,13 +235,6 @@ export default defineComponent({
}
}
function focusOnTag(tagId: string) {
const tagOptions = tagRefs.value || [];
if (tagOptions && tagOptions.length) {
const added = tagOptions.find((ref) => ref.value === tagId);
}
}
function focusOnInput() {
if (selectRef.value) {
selectRef.value.focusOnInput();
@ -267,8 +262,8 @@ export default defineComponent({
const tagsModal = document.querySelector('#tags-manager-modal');
const clickInsideTagsDropdowns =
tagsDropdown?.contains(e.target as Node) || tagsDropdown === e.target;
const clickInsideTagsModal = tagsModal?.contains(e.target as Node) || tagsModal === e.target;
tagsDropdown?.contains(e.target as Node) ?? tagsDropdown === e.target;
const clickInsideTagsModal = tagsModal?.contains(e.target as Node) ?? tagsModal === e.target;
if (!clickInsideTagsDropdowns && !clickInsideTagsModal && e.type === 'click') {
emit('blur');

27
packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
View file

@ -38,7 +38,22 @@ const matches = (name: string, filter: string) =>
export default defineComponent({
name: 'TagsView',
components: { TagsTableHeader, TagsTable },
props: ['tags', 'isLoading'],
props: {
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,
@ -61,11 +76,11 @@ export default defineComponent({
? this.$locale.baseText('tagsView.inUse', { adjustToNumber: count })
: this.$locale.baseText('tagsView.notBeingUsed');
const disabled = this.isCreateEnabled || this.updateId || this.deleteId;
const tagRows = (this.tags || [])
.filter((tag: ITag) => this.stickyIds.has(tag.id) || matches(tag.name, this.search))
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: ITag): ITagRow => ({
(tag): ITagRow => ({
tag,
usage: getUsage(tag.usageCount),
disable: disabled && tag.id !== this.deleteId && tag.id !== this.updateId,
@ -140,7 +155,7 @@ export default defineComponent({
createTag(): void {
this.isSaving = true;
const name = this.newName.trim();
const onCreate = (created: ITag | null, error?: Error) => {
const onCreate = (created: ITag | null) => {
if (created) {
this.stickyIds.add(created.id);
this.disableCreate();

5
packages/editor-ui/src/components/Telemetry.vue
View file

@ -21,10 +21,11 @@ export default defineComponent({
computed: {
...mapStores(useRootStore, useSettingsStore, useUsersStore, useProjectsStore),
currentUserId(): string {
return this.usersStore.currentUserId || '';
return this.usersStore.currentUserId ?? '';
},
isTelemetryEnabledOnRoute(): boolean {
return this.$route.meta?.telemetry ? !this.$route.meta.telemetry.disabled : true;
const routeMeta = this.$route.meta as { telemetry?: { disabled?: boolean } } | undefined;
return routeMeta?.telemetry ? !routeMeta.telemetry.disabled : true;
},
telemetry(): ITelemetrySettings {
return this.settingsStore.telemetry;

58
packages/editor-ui/src/components/TimeAgo.vue
View file

@ -17,41 +17,13 @@ export default defineComponent({
props: {
date: {
type: String,
required: true,
},
capitalize: {
type: Boolean,
default: false,
},
},
beforeMount() {
register(this.defaultLocale, this.localeFunc as LocaleFunc);
},
methods: {
localeFunc(num: number, index: number, totalSec: number): [string, string] {
// number: the timeago / timein number;
// index: the index of array below;
// totalSec: total seconds between date to be formatted and today's date;
return [
[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')],
[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'],
[
this.$locale.baseText('timeAgo.oneMinuteAgo'),
this.$locale.baseText('timeAgo.inOneMinute'),
],
[this.$locale.baseText('timeAgo.minutesAgo'), this.$locale.baseText('timeAgo.inMinutes')],
[this.$locale.baseText('timeAgo.oneHourAgo'), this.$locale.baseText('timeAgo.inOneHour')],
[this.$locale.baseText('timeAgo.hoursAgo'), this.$locale.baseText('timeAgo.inHours')],
[this.$locale.baseText('timeAgo.oneDayAgo'), this.$locale.baseText('timeAgo.inOneDay')],
[this.$locale.baseText('timeAgo.daysAgo'), this.$locale.baseText('timeAgo.inDays')],
[this.$locale.baseText('timeAgo.oneWeekAgo'), this.$locale.baseText('timeAgo.inOneWeek')],
[this.$locale.baseText('timeAgo.weeksAgo'), this.$locale.baseText('timeAgo.inWeeks')],
[this.$locale.baseText('timeAgo.oneMonthAgo'), this.$locale.baseText('timeAgo.inOneMonth')],
[this.$locale.baseText('timeAgo.monthsAgo'), this.$locale.baseText('timeAgo.inMonths')],
[this.$locale.baseText('timeAgo.oneYearAgo'), this.$locale.baseText('timeAgo.inOneYear')],
[this.$locale.baseText('timeAgo.yearsAgo'), this.$locale.baseText('timeAgo.inYears')],
][index] as [string, string];
},
},
computed: {
...mapStores(useRootStore),
defaultLocale(): string {
@ -72,5 +44,33 @@ export default defineComponent({
return convertToHumanReadableDate(epoch);
},
},
beforeMount() {
register(this.defaultLocale, this.localeFunc as LocaleFunc);
},
methods: {
localeFunc(_: number, index: number): [string, string] {
// number: the timeago / timein number;
// index: the index of array below;
return [
[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')],
[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'],
[
this.$locale.baseText('timeAgo.oneMinuteAgo'),
this.$locale.baseText('timeAgo.inOneMinute'),
],
[this.$locale.baseText('timeAgo.minutesAgo'), this.$locale.baseText('timeAgo.inMinutes')],
[this.$locale.baseText('timeAgo.oneHourAgo'), this.$locale.baseText('timeAgo.inOneHour')],
[this.$locale.baseText('timeAgo.hoursAgo'), this.$locale.baseText('timeAgo.inHours')],
[this.$locale.baseText('timeAgo.oneDayAgo'), this.$locale.baseText('timeAgo.inOneDay')],
[this.$locale.baseText('timeAgo.daysAgo'), this.$locale.baseText('timeAgo.inDays')],
[this.$locale.baseText('timeAgo.oneWeekAgo'), this.$locale.baseText('timeAgo.inOneWeek')],
[this.$locale.baseText('timeAgo.weeksAgo'), this.$locale.baseText('timeAgo.inWeeks')],
[this.$locale.baseText('timeAgo.oneMonthAgo'), this.$locale.baseText('timeAgo.inOneMonth')],
[this.$locale.baseText('timeAgo.monthsAgo'), this.$locale.baseText('timeAgo.inMonths')],
[this.$locale.baseText('timeAgo.oneYearAgo'), this.$locale.baseText('timeAgo.inOneYear')],
[this.$locale.baseText('timeAgo.yearsAgo'), this.$locale.baseText('timeAgo.inYears')],
][index] as [string, string];
},
},
});
</script>

5
packages/editor-ui/src/components/TitledList.vue
View file

@ -8,16 +8,17 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { type PropType, defineComponent } from 'vue';
export default defineComponent({
name: 'TitledList',
props: {
title: {
type: String,
required: true,
},
items: {
type: Array,
type: Array as PropType<string[]>,
default: () => [],
},
},