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

refactor(editor): Migrate App.vue to composition api (no-changelog) (#10524)

Browse source
This commit is contained in:
Milorad FIlipović 2024-08-23 15:36:36 +02:00 committed by GitHub
parent 7bcb0be27a
commit 2f743bf4d6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 51 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

146
packages/editor-ui/src/App.vue
View file

@ -1,3 +1,54 @@
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import LoadingView from '@/views/LoadingView.vue';
import BannerStack from '@/components/banners/BannerStack.vue';
import AskAssistantChat from '@/components/AskAssistant/AskAssistantChat.vue';
import Modals from '@/components/Modals.vue';
import Telemetry from '@/components/Telemetry.vue';
import AskAssistantFloatingButton from '@/components/AskAssistant/AskAssistantFloatingButton.vue';
import { loadLanguage } from '@/plugins/i18n';
import { useExternalHooks } from '@/composables/useExternalHooks';
import { HIRING_BANNER, VIEWS } from '@/constants';
import { useRootStore } from '@/stores/root.store';
import { useAssistantStore } from './stores/assistant.store';
import { useUIStore } from './stores/ui.store';
import { useUsersStore } from './stores/users.store';
import { useSettingsStore } from './stores/settings.store';
import { useHistoryHelper } from '@/composables/useHistoryHelper';
const route = useRoute();
const rootStore = useRootStore();
const assistantStore = useAssistantStore();
const uiStore = useUIStore();
const usersStore = useUsersStore();
const settingsStore = useSettingsStore();
// Initialize undo/redo
useHistoryHelper(route);
const loading = ref(true);
const defaultLocale = computed(() => rootStore.defaultLocale);
const isDemoMode = computed(() => route.name === VIEWS.DEMO);
const showAssistantButton = computed(() => assistantStore.canShowAssistantButtons);
watch(defaultLocale, (newLocale) => {
void loadLanguage(newLocale);
});
const logHiringBanner = () => {
if (settingsStore.isHiringBannerEnabled && !isDemoMode.value) {
console.log(HIRING_BANNER);
}
};
onMounted(async () => {
logHiringBanner();
void useExternalHooks().run('app.mount');
loading.value = false;
});
</script>
<template> <template>
<div :class="[$style.app, 'root-container']"> <div :class="[$style.app, 'root-container']">
<LoadingView v-if="loading" /> <LoadingView v-if="loading" />
@ -34,101 +85,6 @@
</div> </div>
</template> </template>
<script lang="ts">
import { defineComponent } from 'vue';
import { mapStores } from 'pinia';
import BannerStack from '@/components/banners/BannerStack.vue';
import Modals from '@/components/Modals.vue';
import LoadingView from '@/views/LoadingView.vue';
import Telemetry from '@/components/Telemetry.vue';
import AskAssistantChat from '@/components/AskAssistant/AskAssistantChat.vue';
import AskAssistantFloatingButton from '@/components/AskAssistant/AskAssistantFloatingButton.vue';
import { HIRING_BANNER, VIEWS } from '@/constants';
import { loadLanguage } from '@/plugins/i18n';
import { useGlobalLinkActions } from '@/composables/useGlobalLinkActions';
import { useExternalHooks } from '@/composables/useExternalHooks';
import { useToast } from '@/composables/useToast';
import { useCloudPlanStore } from '@/stores/cloudPlan.store';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useRootStore } from '@/stores/root.store';
import { useSettingsStore } from '@/stores/settings.store';
import { useSourceControlStore } from '@/stores/sourceControl.store';
import { useTemplatesStore } from '@/stores/templates.store';
import { useUIStore } from '@/stores/ui.store';
import { useUsageStore } from '@/stores/usage.store';
import { useUsersStore } from '@/stores/users.store';
import { useHistoryHelper } from '@/composables/useHistoryHelper';
import { useRoute } from 'vue-router';
import { useAssistantStore } from './stores/assistant.store';
export default defineComponent({
name: 'App',
components: {
BannerStack,
LoadingView,
Telemetry,
Modals,
AskAssistantChat,
AskAssistantFloatingButton,
},
setup() {
return {
...useGlobalLinkActions(),
...useHistoryHelper(useRoute()),
...useToast(),
externalHooks: useExternalHooks(),
};
},
computed: {
...mapStores(
useAssistantStore,
useNodeTypesStore,
useRootStore,
useSettingsStore,
useTemplatesStore,
useUIStore,
useUsersStore,
useSourceControlStore,
useCloudPlanStore,
useUsageStore,
),
defaultLocale(): string {
return this.rootStore.defaultLocale;
},
isDemoMode(): boolean {
return this.$route.name === VIEWS.DEMO;
},
showAssistantButton(): boolean {
return this.assistantStore.canShowAssistantButtons;
},
},
data() {
return {
loading: true,
};
},
watch: {
defaultLocale(newLocale) {
void loadLanguage(newLocale);
},
},
async mounted() {
this.logHiringBanner();
void useExternalHooks().run('app.mount');
this.loading = false;
},
methods: {
logHiringBanner() {
if (this.settingsStore.isHiringBannerEnabled && !this.isDemoMode) {
console.log(HIRING_BANNER);
}
},
},
});
</script>
<style lang="scss" module> <style lang="scss" module>
.app { .app {
height: 100vh; height: 100vh;