2019-12-03 11:29:51 +01:00
|
|
|
<template>
|
2020-02-18 08:57:00 +01:00
|
|
|
<div>
|
|
|
|
<form @submit="followRelay">
|
|
|
|
<b-field :label="$t('Add an instance')" custom-class="add-relay" horizontal>
|
|
|
|
<b-field grouped expanded size="is-large">
|
|
|
|
<p class="control">
|
|
|
|
<b-input v-model="newRelayAddress" :placeholder="$t('Ex: test.mobilizon.org')" />
|
|
|
|
</p>
|
|
|
|
<p class="control">
|
|
|
|
<b-button type="is-primary" native-type="submit">{{ $t("Add an instance") }}</b-button>
|
|
|
|
</p>
|
|
|
|
</b-field>
|
|
|
|
</b-field>
|
|
|
|
</form>
|
|
|
|
<b-table
|
|
|
|
v-show="relayFollowings.elements.length > 0"
|
|
|
|
:data="relayFollowings.elements"
|
|
|
|
:loading="$apollo.queries.relayFollowings.loading"
|
|
|
|
ref="table"
|
|
|
|
:checked-rows.sync="checkedRows"
|
|
|
|
:is-row-checkable="(row) => row.id !== 3"
|
|
|
|
detailed
|
|
|
|
:show-detail-icon="false"
|
|
|
|
paginated
|
|
|
|
backend-pagination
|
|
|
|
:total="relayFollowings.total"
|
|
|
|
:per-page="perPage"
|
|
|
|
@page-change="onPageChange"
|
|
|
|
checkable
|
|
|
|
checkbox-position="left"
|
|
|
|
>
|
2020-08-18 15:50:50 +02:00
|
|
|
<b-table-column field="targetActor.id" label="ID" width="40" numeric v-slot="props">{{
|
|
|
|
props.row.targetActor.id
|
|
|
|
}}</b-table-column>
|
2019-12-03 11:29:51 +01:00
|
|
|
|
2020-08-18 15:50:50 +02:00
|
|
|
<b-table-column field="targetActor.type" :label="$t('Type')" width="80" v-slot="props">
|
|
|
|
<b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.targetActor)" />
|
|
|
|
<b-icon icon="account-circle" v-else />
|
|
|
|
</b-table-column>
|
2019-12-03 11:29:51 +01:00
|
|
|
|
2020-08-18 15:50:50 +02:00
|
|
|
<b-table-column
|
|
|
|
field="approved"
|
|
|
|
:label="$t('Status')"
|
|
|
|
width="100"
|
|
|
|
sortable
|
|
|
|
centered
|
|
|
|
v-slot="props"
|
|
|
|
>
|
|
|
|
<span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{
|
|
|
|
props.row.approved ? $t("Accepted") : $t("Pending")
|
|
|
|
}}</span>
|
|
|
|
</b-table-column>
|
2019-12-03 11:29:51 +01:00
|
|
|
|
2020-08-18 15:50:50 +02:00
|
|
|
<b-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
|
|
|
|
<template v-slot:default="props">
|
|
|
|
<a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.targetActor)">{{
|
|
|
|
props.row.targetActor.domain
|
|
|
|
}}</a>
|
|
|
|
<a @click="toggle(props.row)" v-else>{{
|
|
|
|
`${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}`
|
|
|
|
}}</a>
|
|
|
|
</template>
|
|
|
|
</b-table-column>
|
2019-12-03 11:29:51 +01:00
|
|
|
|
2020-08-18 15:50:50 +02:00
|
|
|
<b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable v-slot="props">
|
|
|
|
<span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
|
|
|
|
timeago(props.row.updatedAt)
|
|
|
|
}}</span></b-table-column
|
|
|
|
>
|
2019-12-03 11:29:51 +01:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
<template slot="detail" slot-scope="props">
|
|
|
|
<article>
|
|
|
|
<div class="content">
|
2020-07-07 17:19:57 +02:00
|
|
|
<strong>{{ props.row.targetActor.name }}</strong>
|
|
|
|
<small v-if="props.row.actor.preferredUsername !== 'relay'"
|
|
|
|
>@{{ props.row.targetActor.preferredUsername }}</small
|
|
|
|
>
|
2020-02-18 08:57:00 +01:00
|
|
|
<p v-html="props.row.targetActor.summary" />
|
|
|
|
</div>
|
|
|
|
</article>
|
|
|
|
</template>
|
2019-12-03 11:29:51 +01:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
<template slot="bottom-left" v-if="checkedRows.length > 0">
|
|
|
|
<b-button @click="removeRelays" type="is-danger">
|
|
|
|
{{
|
|
|
|
$tc(
|
|
|
|
"No instance to remove|Remove instance|Remove {number} instances",
|
|
|
|
checkedRows.length,
|
|
|
|
{ number: checkedRows.length }
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
</b-button>
|
|
|
|
</template>
|
|
|
|
</b-table>
|
|
|
|
<b-message type="is-danger" v-if="relayFollowings.elements.length === 0">{{
|
|
|
|
$t("You don't follow any instances yet.")
|
|
|
|
}}</b-message>
|
|
|
|
</div>
|
2019-12-03 11:29:51 +01:00
|
|
|
</template>
|
|
|
|
<script lang="ts">
|
2020-02-18 08:57:00 +01:00
|
|
|
import { Component, Mixins } from "vue-property-decorator";
|
|
|
|
import { ADD_RELAY, RELAY_FOLLOWINGS, REMOVE_RELAY } from "../../graphql/admin";
|
|
|
|
import { IFollower } from "../../types/actor/follower.model";
|
|
|
|
import { Paginate } from "../../types/paginate";
|
|
|
|
import RelayMixin from "../../mixins/relay";
|
2019-12-03 11:29:51 +01:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
apollo: {
|
|
|
|
relayFollowings: {
|
|
|
|
query: RELAY_FOLLOWINGS,
|
2020-02-18 08:57:00 +01:00
|
|
|
fetchPolicy: "cache-and-network",
|
2019-12-03 11:29:51 +01:00
|
|
|
},
|
|
|
|
},
|
|
|
|
metaInfo() {
|
|
|
|
return {
|
2020-02-18 08:57:00 +01:00
|
|
|
title: this.$t("Followings") as string,
|
|
|
|
titleTemplate: "%s | Mobilizon",
|
2019-12-03 11:29:51 +01:00
|
|
|
};
|
|
|
|
},
|
|
|
|
})
|
|
|
|
export default class Followings extends Mixins(RelayMixin) {
|
|
|
|
relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
|
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
newRelayAddress = "";
|
|
|
|
|
|
|
|
RelayMixin = RelayMixin;
|
|
|
|
|
|
|
|
async followRelay(e: Event) {
|
2019-12-03 11:29:51 +01:00
|
|
|
e.preventDefault();
|
|
|
|
await this.$apollo.mutate({
|
|
|
|
mutation: ADD_RELAY,
|
|
|
|
variables: {
|
|
|
|
address: this.newRelayAddress,
|
|
|
|
},
|
2020-02-18 08:57:00 +01:00
|
|
|
// TODO: Handle cache update properly without refreshing
|
2019-12-03 11:29:51 +01:00
|
|
|
});
|
|
|
|
await this.$apollo.queries.relayFollowings.refetch();
|
2020-02-18 08:57:00 +01:00
|
|
|
this.newRelayAddress = "";
|
2019-12-03 11:29:51 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
async removeRelays() {
|
|
|
|
await this.checkedRows.forEach((row: IFollower) => {
|
|
|
|
this.removeRelay(`${row.targetActor.preferredUsername}@${row.targetActor.domain}`);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
async removeRelay(address: string) {
|
2019-12-03 11:29:51 +01:00
|
|
|
await this.$apollo.mutate({
|
|
|
|
mutation: REMOVE_RELAY,
|
|
|
|
variables: {
|
|
|
|
address,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
await this.$apollo.queries.relayFollowings.refetch();
|
|
|
|
this.checkedRows = [];
|
|
|
|
}
|
|
|
|
}
|
2020-02-18 08:57:00 +01:00
|
|
|
</script>
|