Improve federation management UI
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
e0fad9ddd1
commit
a35f09b2d4
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 "";
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue