mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-25 04:34:06 -08:00
refactor(editor): Convert some smaller components to composition api (no-changelog) (#11546)
Some checks are pending
Test Master / install-and-build (push) Waiting to run
Test Master / Unit tests (18.x) (push) Blocked by required conditions
Test Master / Unit tests (20.x) (push) Blocked by required conditions
Test Master / Unit tests (22.4) (push) Blocked by required conditions
Test Master / Lint (push) Blocked by required conditions
Test Master / Notify Slack on failure (push) Blocked by required conditions
Some checks are pending
Test Master / install-and-build (push) Waiting to run
Test Master / Unit tests (18.x) (push) Blocked by required conditions
Test Master / Unit tests (20.x) (push) Blocked by required conditions
Test Master / Unit tests (22.4) (push) Blocked by required conditions
Test Master / Lint (push) Blocked by required conditions
Test Master / Notify Slack on failure (push) Blocked by required conditions
Co-authored-by: Ricardo Espinoza <ricardo@n8n.io>
This commit is contained in:
parent
611967decc
commit
6854f94875
|
@ -1,26 +1,25 @@
|
|||
<script lang="ts">
|
||||
import { type PropType, defineComponent } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import type { EnterpriseEditionFeatureValue } from '@/Interface';
|
||||
import { mapStores } from 'pinia';
|
||||
import { useSettingsStore } from '@/stores/settings.store';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'EnterpriseEdition',
|
||||
props: {
|
||||
features: {
|
||||
type: Array as PropType<EnterpriseEditionFeatureValue[]>,
|
||||
default: () => [],
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
features: EnterpriseEditionFeatureValue[];
|
||||
}>(),
|
||||
{
|
||||
features: () => [],
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useSettingsStore),
|
||||
canAccess(): boolean {
|
||||
return this.features.reduce((acc: boolean, feature) => {
|
||||
return acc && !!this.settingsStore.isEnterpriseFeatureEnabled[feature];
|
||||
}, true);
|
||||
},
|
||||
},
|
||||
});
|
||||
);
|
||||
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
const canAccess = computed(() =>
|
||||
props.features.reduce(
|
||||
(acc: boolean, feature) => acc && !!settingsStore.isEnterpriseFeatureEnabled[feature],
|
||||
true,
|
||||
),
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -1,26 +1,23 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { mapStores } from 'pinia';
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useRootStore } from '@/stores/root.store';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PushConnectionTracker',
|
||||
computed: {
|
||||
...mapStores(useRootStore),
|
||||
},
|
||||
});
|
||||
const rootStore = useRootStore();
|
||||
const pushConnectionActive = computed(() => rootStore.pushConnectionActive);
|
||||
const i18n = useI18n();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span>
|
||||
<div v-if="!rootStore.pushConnectionActive" class="push-connection-lost primary-color">
|
||||
<div v-if="!pushConnectionActive" class="push-connection-lost primary-color">
|
||||
<n8n-tooltip placement="bottom-end">
|
||||
<template #content>
|
||||
<div v-n8n-html="$locale.baseText('pushConnectionTracker.cannotConnectToServer')"></div>
|
||||
<div v-n8n-html="i18n.baseText('pushConnectionTracker.cannotConnectToServer')"></div>
|
||||
</template>
|
||||
<span>
|
||||
<font-awesome-icon icon="exclamation-triangle" />
|
||||
{{ $locale.baseText('pushConnectionTracker.connectionLost') }}
|
||||
{{ i18n.baseText('pushConnectionTracker.connectionLost') }}
|
||||
</span>
|
||||
</n8n-tooltip>
|
||||
</div>
|
||||
|
|
|
@ -1,98 +1,91 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onBeforeMount } from 'vue';
|
||||
import { EnterpriseEditionFeature } from '@/constants';
|
||||
import { mapStores } from 'pinia';
|
||||
import { useProjectsStore } from '@/stores/projects.store';
|
||||
import type { PropType } from 'vue';
|
||||
import type { ProjectSharingData } from '@/types/projects.types';
|
||||
import ProjectSharing from '@/components/Projects/ProjectSharing.vue';
|
||||
import type { IFilters } from '../layouts/ResourcesListLayout.vue';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
|
||||
export type IResourceFiltersType = Record<string, boolean | string | string[]>;
|
||||
type IResourceFiltersType = Record<string, boolean | string | string[]>;
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
ProjectSharing,
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue?: IResourceFiltersType;
|
||||
keys?: string[];
|
||||
shareable?: boolean;
|
||||
reset?: () => void;
|
||||
}>(),
|
||||
{
|
||||
modelValue: () => ({}),
|
||||
keys: () => [],
|
||||
shareable: true,
|
||||
reset: () => {},
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object as PropType<IResourceFiltersType>,
|
||||
default: () => ({}),
|
||||
},
|
||||
keys: {
|
||||
type: Array as PropType<string[]>,
|
||||
default: () => [],
|
||||
},
|
||||
shareable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
reset: {
|
||||
type: Function as PropType<() => void>,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
EnterpriseEditionFeature,
|
||||
selectedProject: null as ProjectSharingData | null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useProjectsStore),
|
||||
filtersLength(): number {
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: IFilters];
|
||||
'update:filtersLength': [value: number];
|
||||
}>();
|
||||
|
||||
const selectedProject = ref<ProjectSharingData | null>(null);
|
||||
|
||||
const projectsStore = useProjectsStore();
|
||||
|
||||
const i18n = useI18n();
|
||||
|
||||
const filtersLength = computed(() => {
|
||||
let length = 0;
|
||||
|
||||
this.keys.forEach((key) => {
|
||||
props.keys.forEach((key) => {
|
||||
if (key === 'search') {
|
||||
return;
|
||||
}
|
||||
|
||||
const value = this.modelValue[key];
|
||||
const value = props.modelValue[key];
|
||||
length += (Array.isArray(value) ? value.length > 0 : value !== '') ? 1 : 0;
|
||||
});
|
||||
|
||||
return length;
|
||||
},
|
||||
hasFilters(): boolean {
|
||||
return this.filtersLength > 0;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
filtersLength(value: number) {
|
||||
this.$emit('update:filtersLength', value);
|
||||
},
|
||||
},
|
||||
async beforeMount() {
|
||||
await this.projectsStore.getAvailableProjects();
|
||||
this.selectedProject =
|
||||
this.projectsStore.availableProjects.find(
|
||||
(project) => project.id === this.modelValue.homeProject,
|
||||
) ?? null;
|
||||
},
|
||||
methods: {
|
||||
setKeyValue(key: string, value: unknown) {
|
||||
});
|
||||
|
||||
const hasFilters = computed(() => filtersLength.value > 0);
|
||||
|
||||
const setKeyValue = (key: string, value: unknown) => {
|
||||
const filters = {
|
||||
...this.modelValue,
|
||||
...props.modelValue,
|
||||
[key]: value,
|
||||
};
|
||||
} as IFilters;
|
||||
|
||||
this.$emit('update:modelValue', filters);
|
||||
},
|
||||
resetFilters() {
|
||||
if (this.reset) {
|
||||
this.reset();
|
||||
emit('update:modelValue', filters);
|
||||
};
|
||||
|
||||
const resetFilters = () => {
|
||||
if (props.reset) {
|
||||
props.reset();
|
||||
} else {
|
||||
const filters = { ...this.modelValue };
|
||||
const filters = { ...props.modelValue } as IFilters;
|
||||
|
||||
this.keys.forEach((key) => {
|
||||
filters[key] = Array.isArray(this.modelValue[key]) ? [] : '';
|
||||
props.keys.forEach((key) => {
|
||||
filters[key] = Array.isArray(props.modelValue[key]) ? [] : '';
|
||||
});
|
||||
|
||||
this.$emit('update:modelValue', filters);
|
||||
emit('update:modelValue', filters);
|
||||
}
|
||||
this.selectedProject = null;
|
||||
},
|
||||
},
|
||||
selectedProject.value = null;
|
||||
};
|
||||
|
||||
watch(filtersLength, (value) => {
|
||||
emit('update:filtersLength', value);
|
||||
});
|
||||
|
||||
onBeforeMount(async () => {
|
||||
await projectsStore.getAvailableProjects();
|
||||
selectedProject.value =
|
||||
projectsStore.availableProjects.find(
|
||||
(project) => project.id === props.modelValue.homeProject,
|
||||
) ?? null;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
@ -109,7 +102,7 @@ export default defineComponent({
|
|||
<n8n-badge v-show="filtersLength > 0" theme="primary" class="mr-4xs">
|
||||
{{ filtersLength }}
|
||||
</n8n-badge>
|
||||
{{ $locale.baseText('forms.resourceFiltersDropdown.filters') }}
|
||||
{{ i18n.baseText('forms.resourceFiltersDropdown.filters') }}
|
||||
</n8n-button>
|
||||
</template>
|
||||
<div :class="$style['filters-dropdown']" data-test-id="resources-list-filters-dropdown">
|
||||
|
@ -119,7 +112,7 @@ export default defineComponent({
|
|||
:features="[EnterpriseEditionFeature.Sharing]"
|
||||
>
|
||||
<n8n-input-label
|
||||
:label="$locale.baseText('forms.resourceFiltersDropdown.owner')"
|
||||
:label="i18n.baseText('forms.resourceFiltersDropdown.owner')"
|
||||
:bold="false"
|
||||
size="small"
|
||||
color="text-base"
|
||||
|
@ -128,14 +121,14 @@ export default defineComponent({
|
|||
<ProjectSharing
|
||||
v-model="selectedProject"
|
||||
:projects="projectsStore.availableProjects"
|
||||
:placeholder="$locale.baseText('forms.resourceFiltersDropdown.owner.placeholder')"
|
||||
:empty-options-text="$locale.baseText('projects.sharing.noMatchingProjects')"
|
||||
:placeholder="i18n.baseText('forms.resourceFiltersDropdown.owner.placeholder')"
|
||||
:empty-options-text="i18n.baseText('projects.sharing.noMatchingProjects')"
|
||||
@update:model-value="setKeyValue('homeProject', ($event as ProjectSharingData).id)"
|
||||
/>
|
||||
</enterprise-edition>
|
||||
<div v-if="hasFilters" :class="[$style['filters-dropdown-footer'], 'mt-s']">
|
||||
<n8n-link @click="resetFilters">
|
||||
{{ $locale.baseText('forms.resourceFiltersDropdown.reset') }}
|
||||
{{ i18n.baseText('forms.resourceFiltersDropdown.reset') }}
|
||||
</n8n-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue