mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-26 21:19:43 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor(editor): Migrate UpdatesPanel.vue to composition API (#11466)

Browse source
This commit is contained in:
Ricardo Espinoza 2024-10-30 06:09:55 -04:00 committed by GitHub
parent cf37e94dd8
commit 3aa069222b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 22 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
packages/editor-ui/src/components/UpdatesPanel.vue
View file

@ -1,38 +1,26 @@
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue'; import { computed } from 'vue';
import ModalDrawer from './ModalDrawer.vue'; import ModalDrawer from './ModalDrawer.vue';
import TimeAgo from './TimeAgo.vue'; import TimeAgo from './TimeAgo.vue';
import VersionCard from './VersionCard.vue'; import VersionCard from './VersionCard.vue';
import { VERSIONS_MODAL_KEY } from '../constants'; import { VERSIONS_MODAL_KEY } from '../constants';
import { mapStores } from 'pinia';
import { useVersionsStore } from '@/stores/versions.store'; import { useVersionsStore } from '@/stores/versions.store';
import type { IVersion } from '@/Interface'; import { useI18n } from '@/composables/useI18n';
export default defineComponent({ const versionsStore = useVersionsStore();
name: 'UpdatesPanel', const i18n = useI18n();
components: {
ModalDrawer, const nextVersions = computed(() => {
VersionCard, return versionsStore.nextVersions;
TimeAgo, });
},
computed: { const currentVersion = computed(() => {
...mapStores(useVersionsStore), return versionsStore.currentVersion;
nextVersions(): IVersion[] { });
return this.versionsStore.nextVersions;
}, const infoUrl = computed(() => {
currentVersion(): IVersion | undefined { return versionsStore.infoUrl;
return this.versionsStore.currentVersion;
},
infoUrl(): string {
return this.versionsStore.infoUrl;
},
},
data() {
return {
VERSIONS_MODAL_KEY,
};
},
}); });
</script> </script>
@ -45,24 +33,24 @@ export default defineComponent({
> >
<template #header> <template #header>
<span :class="$style.title"> <span :class="$style.title">
{{ $locale.baseText('updatesPanel.weVeBeenBusy') }} {{ i18n.baseText('updatesPanel.weVeBeenBusy') }}
</span> </span>
</template> </template>
<template #content> <template #content>
<section :class="$style['description']"> <section :class="$style['description']">
<p v-if="currentVersion"> <p v-if="currentVersion">
{{ {{
$locale.baseText('updatesPanel.youReOnVersion', { i18n.baseText('updatesPanel.youReOnVersion', {
interpolate: { currentVersionName: currentVersion.name }, interpolate: { currentVersionName: currentVersion.name },
}) })
}} }}
<strong> <strong>
<TimeAgo :date="currentVersion.createdAt" /> <TimeAgo :date="currentVersion.createdAt" />
</strong> </strong>
{{ $locale.baseText('updatesPanel.andIs') }} {{ i18n.baseText('updatesPanel.andIs') }}
<strong> <strong>
{{ {{
$locale.baseText('updatesPanel.version', { i18n.baseText('updatesPanel.version', {
interpolate: { interpolate: {
numberOfVersions: nextVersions.length, numberOfVersions: nextVersions.length,
howManySuffix: nextVersions.length > 1 ? 's' : '', howManySuffix: nextVersions.length > 1 ? 's' : '',
@ -70,13 +58,13 @@ export default defineComponent({
}) })
}} }}
</strong> </strong>
{{ $locale.baseText('updatesPanel.behindTheLatest') }} {{ i18n.baseText('updatesPanel.behindTheLatest') }}
</p> </p>
<n8n-link v-if="infoUrl" :to="infoUrl" :bold="true"> <n8n-link v-if="infoUrl" :to="infoUrl" :bold="true">
<font-awesome-icon icon="info-circle" class="mr-2xs" /> <font-awesome-icon icon="info-circle" class="mr-2xs" />
<span> <span>
{{ $locale.baseText('updatesPanel.howToUpdateYourN8nVersion') }} {{ i18n.baseText('updatesPanel.howToUpdateYourN8nVersion') }}
</span> </span>
</n8n-link> </n8n-link>
</section> </section>