Improve federation management UI

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-07-07 17:19:57 +02:00
parent e0fad9ddd1
commit a35f09b2d4
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
3 changed files with 35 additions and 14 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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 "";
}
}