mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): Migrate TimeAgo component to composition API (no-changelog) (#9749)

Browse source
This commit is contained in:
Alex Grozav 2024-06-14 16:03:33 +03:00 committed by GitHub
parent 2cf4364ee0
commit ca2e5d90ed
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 60 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,76 +1,67 @@
<template> <script lang="ts" setup>
<span :title="convertDate">
{{ format }}
</span>
</template>
<script lang="ts">
import type { LocaleFunc } from 'timeago.js';
import { format, register } from 'timeago.js'; import { format, register } from 'timeago.js';
import { convertToHumanReadableDate } from '@/utils/typesUtils'; import { convertToHumanReadableDate } from '@/utils/typesUtils';
import { defineComponent } from 'vue'; import { computed, onBeforeMount } from 'vue';
import { mapStores } from 'pinia';
import { useRootStore } from '@/stores/n8nRoot.store'; import { useRootStore } from '@/stores/n8nRoot.store';
import { useI18n } from '@/composables/useI18n';
export default defineComponent({ type Props = {
name: 'TimeAgo', date: string;
props: { capitalize?: boolean;
date: { };
type: String,
required: true,
},
capitalize: {
type: Boolean,
default: false,
},
},
computed: {
...mapStores(useRootStore),
defaultLocale(): string {
return this.rootStore.defaultLocale;
},
format(): string {
const text = format(this.date, this.defaultLocale);
if (!this.capitalize) { const props = withDefaults(defineProps<Props>(), {
return text.toLowerCase(); capitalize: false,
}
return text;
},
convertDate(): string {
const date = new Date(this.date);
const epoch = date.getTime();
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];
},
},
}); });
const rootStore = useRootStore();
const i18n = useI18n();
const defaultLocale = computed(() => rootStore.defaultLocale);
const formatted = computed(() => {
const text = format(props.date, defaultLocale.value);
if (!props.capitalize) {
return text.toLowerCase();
}
return text;
});
const convertDate = computed(() => {
const date = new Date(props.date);
const epoch = date.getTime();
return convertToHumanReadableDate(epoch);
});
onBeforeMount(() => {
register(defaultLocale.value, localeFunc);
});
function localeFunc(_: number, index: number): [string, string] {
// number: the timeago / timein number;
// index: the index of array below;
return [
[i18n.baseText('timeAgo.justNow'), i18n.baseText('timeAgo.rightNow')],
[i18n.baseText('timeAgo.justNow'), i18n.baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'],
[i18n.baseText('timeAgo.oneMinuteAgo'), i18n.baseText('timeAgo.inOneMinute')],
[i18n.baseText('timeAgo.minutesAgo'), i18n.baseText('timeAgo.inMinutes')],
[i18n.baseText('timeAgo.oneHourAgo'), i18n.baseText('timeAgo.inOneHour')],
[i18n.baseText('timeAgo.hoursAgo'), i18n.baseText('timeAgo.inHours')],
[i18n.baseText('timeAgo.oneDayAgo'), i18n.baseText('timeAgo.inOneDay')],
[i18n.baseText('timeAgo.daysAgo'), i18n.baseText('timeAgo.inDays')],
[i18n.baseText('timeAgo.oneWeekAgo'), i18n.baseText('timeAgo.inOneWeek')],
[i18n.baseText('timeAgo.weeksAgo'), i18n.baseText('timeAgo.inWeeks')],
[i18n.baseText('timeAgo.oneMonthAgo'), i18n.baseText('timeAgo.inOneMonth')],
[i18n.baseText('timeAgo.monthsAgo'), i18n.baseText('timeAgo.inMonths')],
[i18n.baseText('timeAgo.oneYearAgo'), i18n.baseText('timeAgo.inOneYear')],
[i18n.baseText('timeAgo.yearsAgo'), i18n.baseText('timeAgo.inYears')],
][index] as [string, string];
}
</script> </script>
<template>
<span :title="convertDate">
{{ formatted }}
</span>
</template>