diff --git a/js/src/components/Admin/Followers.vue b/js/src/components/Admin/Followers.vue index 7dfcefee0..6b491fc24 100644 --- a/js/src/components/Admin/Followers.vue +++ b/js/src/components/Admin/Followers.vue @@ -43,18 +43,20 @@ </template> </b-table-column> - <b-table-column field="actor.updatedAt" :label="$t('Date')" sortable>{{ - props.row.updatedAt | formatDateTimeString - }}</b-table-column> + <b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable> + <span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{ + timeago(props.row.updatedAt) + }}</span></b-table-column + > </template> <template slot="detail" slot-scope="props"> <article> <div class="content"> - <strong>{{ props.row.actor.domain }}</strong> - <small>@{{ props.row.actor.preferredUsername }}</small> - <small>31m</small> - <br /> + <strong>{{ props.row.actor.name }}</strong> + <small v-if="props.row.actor.preferredUsername !== 'relay'" + >@{{ props.row.actor.preferredUsername }}</small + > <p v-html="props.row.actor.summary" /> </div> </article> diff --git a/js/src/components/Admin/Followings.vue b/js/src/components/Admin/Followings.vue index 88e7f831d..985898227 100644 --- a/js/src/components/Admin/Followings.vue +++ b/js/src/components/Admin/Followings.vue @@ -56,18 +56,20 @@ </template> </b-table-column> - <b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable>{{ - props.row.updatedAt | formatDateTimeString - }}</b-table-column> + <b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable> + <span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{ + timeago(props.row.updatedAt) + }}</span></b-table-column + > </template> <template slot="detail" slot-scope="props"> <article> <div class="content"> - <strong>{{ props.row.targetActor.domain }}</strong> - <small>@{{ props.row.targetActor.preferredUsername }}</small> - <small>31m</small> - <br /> + <strong>{{ props.row.targetActor.name }}</strong> + <small v-if="props.row.actor.preferredUsername !== 'relay'" + >@{{ props.row.targetActor.preferredUsername }}</small + > <p v-html="props.row.targetActor.summary" /> </div> </article> diff --git a/js/src/mixins/relay.ts b/js/src/mixins/relay.ts index 477db1d2b..a01fbdb46 100644 --- a/js/src/mixins/relay.ts +++ b/js/src/mixins/relay.ts @@ -1,6 +1,7 @@ import { Component, Vue, Ref } from "vue-property-decorator"; import { ActorType, IActor } from "@/types/actor"; import { IFollower } from "@/types/actor/follower.model"; +import TimeAgo from "javascript-time-ago"; @Component export default class RelayMixin extends Vue { @@ -12,6 +13,15 @@ export default class RelayMixin extends Vue { perPage = 10; + timeAgoInstance: TimeAgo | null = null; + + async mounted() { + const localeName = this.$i18n.locale; + const locale = await import(`javascript-time-ago/locale/${localeName}`); + TimeAgo.addLocale(locale); + this.timeAgoInstance = new TimeAgo(localeName); + } + toggle(row: object) { this.table.toggleDetails(row); } @@ -43,4 +53,11 @@ export default class RelayMixin extends Vue { (actor.preferredUsername === "relay" || actor.preferredUsername === actor.domain) ); } + + timeago(dateTime: string): string { + if (this.timeAgoInstance != null) { + return this.timeAgoInstance.format(new Date(dateTime)); + } + return ""; + } }