Merge branch 'fix/relays' into 'develop'

Fix Relays

Closes #85

See merge request pleroma/admin-fe!160
This commit is contained in:
Angelina Filippova 2020-08-19 00:10:24 +00:00
commit 3471f888f8
6 changed files with 42 additions and 23 deletions

View file

@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## Unreleased
### Fixed
- Fix following and unfollowing relays from Admin-FE, update mobile UI
## [2.1] - 2020-08-14 ## [2.1] - 2020-08-14
### Added ### Added

View file

@ -11,23 +11,23 @@ export async function fetchRelays(authHost, token) {
}) })
} }
export async function addRelay(relay, authHost, token) { export async function addRelay(relay_url, authHost, token) {
return await request({ return await request({
baseURL: baseName(authHost), baseURL: baseName(authHost),
url: '/api/pleroma/admin/relay', url: '/api/pleroma/admin/relay',
method: 'post', method: 'post',
headers: authHeaders(token), headers: authHeaders(token),
data: { relay_url: relay } data: { relay_url }
}) })
} }
export async function deleteRelay(relay, authHost, token) { export async function deleteRelay(relay_url, authHost, token) {
return await request({ return await request({
baseURL: baseName(authHost), baseURL: baseName(authHost),
url: '/api/pleroma/admin/relay', url: '/api/pleroma/admin/relay',
method: 'delete', method: 'delete',
headers: authHeaders(token), headers: authHeaders(token),
data: { relay_url: `https://${relay}/actor` } data: { relay_url }
}) })
} }

View file

@ -150,7 +150,8 @@ export default {
draft: 'Draft', draft: 'Draft',
delete: 'Delete', delete: 'Delete',
cancel: 'Cancel', cancel: 'Cancel',
confirm: 'Confirm' confirm: 'Confirm',
unfollow: 'Unfollow'
}, },
errorLog: { errorLog: {
tips: 'Please click the bug icon in the upper right corner', tips: 'Please click the bug icon in the upper right corner',
@ -406,6 +407,7 @@ export default {
relays: 'Relays', relays: 'Relays',
follow: 'Follow', follow: 'Follow',
followRelay: 'Follow new relay', followRelay: 'Follow new relay',
followedBack: 'Followed Back',
instanceUrl: 'Instance URL', instanceUrl: 'Instance URL',
success: 'Settings changed successfully!', success: 'Settings changed successfully!',
description: 'Description', description: 'Description',

View file

@ -13,19 +13,18 @@ const relays = {
state.fetchedRelays = relays state.fetchedRelays = relays
}, },
ADD_RELAY: (state, relay) => { ADD_RELAY: (state, relay) => {
state.fetchedRelays = [...state.fetchedRelays, relay] state.fetchedRelays = [...state.fetchedRelays, { actor: relay }]
}, },
DELETE_RELAY: (state, relay) => { DELETE_RELAY: (state, relay) => {
state.fetchedRelays = state.fetchedRelays.filter(fetchedRelay => fetchedRelay !== relay) state.fetchedRelays = state.fetchedRelays.filter(fetchedRelay => fetchedRelay.actor !== relay)
} }
}, },
actions: { actions: {
async FetchRelays({ commit, getters }) { async FetchRelays({ commit, getters }) {
commit('SET_LOADING', true) commit('SET_LOADING', true)
const response = await fetchRelays(getters.authHost, getters.token) const { data } = await fetchRelays(getters.authHost, getters.token)
commit('SET_RELAYS', data.relays)
commit('SET_RELAYS', response.data.relays)
commit('SET_LOADING', false) commit('SET_LOADING', false)
}, },
async AddRelay({ commit, dispatch, getters }, relay) { async AddRelay({ commit, dispatch, getters }, relay) {

View file

@ -2,19 +2,28 @@
<div v-if="!loading" class="relays-container"> <div v-if="!loading" class="relays-container">
<div class="follow-relay-container"> <div class="follow-relay-container">
<el-input v-model="newRelay" :placeholder="$t('settings.followRelay')" class="follow-relay" @keyup.enter.native="followRelay"/> <el-input v-model="newRelay" :placeholder="$t('settings.followRelay')" class="follow-relay" @keyup.enter.native="followRelay"/>
<el-button type="primary" @click.native="followRelay">{{ $t('settings.follow') }}</el-button> <el-button @click.native="followRelay">{{ $t('settings.follow') }}</el-button>
</div> </div>
<el-table :data="relaysTable"> <el-table :data="relays">
<el-table-column <el-table-column
:label="$t('settings.instanceUrl')" :label="$t('settings.instanceUrl')"
prop="instance"/> prop="actor"/>
<el-table-column fixed="right" width="120"> <el-table-column
:label="$t('settings.followedBack')"
:width="getLabelWidth"
prop="followed_back"
align="center">
<template slot-scope="scope">
<i :class="scope.row.followed_back ? 'el-icon-check' : 'el-icon-minus'"/>
</template>
</el-table-column>
<el-table-column :label="$t('table.actions')" :width="getLabelWidth" fixed="right" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
type="text" type="text"
size="small" size="small"
@click.native="deleteRelay(scope.row.instance)"> @click.native="deleteRelay(scope.row.actor)">
{{ $t('table.delete') }} {{ $t('table.unfollow') }}
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -31,16 +40,17 @@ export default {
} }
}, },
computed: { computed: {
relays() { getLabelWidth() {
return this.$store.state.relays.fetchedRelays return this.isDesktop ? '130px' : '85px'
}, },
relaysTable() { isDesktop() {
return this.relays.map(relay => { return this.$store.state.app.device === 'desktop'
return { instance: relay }
})
}, },
loading() { loading() {
return this.$store.state.relays.loading return this.$store.state.relays.loading
},
relays() {
return this.$store.state.relays.fetchedRelays
} }
}, },
mounted() { mounted() {
@ -49,6 +59,7 @@ export default {
methods: { methods: {
followRelay() { followRelay() {
this.$store.dispatch('AddRelay', this.newRelay) this.$store.dispatch('AddRelay', this.newRelay)
this.newRelay = ''
}, },
deleteRelay(relay) { deleteRelay(relay) {
this.$store.dispatch('DeleteRelay', relay) this.$store.dispatch('DeleteRelay', relay)

View file

@ -431,7 +431,7 @@
height: 2px; height: 2px;
} }
.follow-relay { .follow-relay {
width: 70%; width: 75%;
margin-right: 5px; margin-right: 5px;
input { input {
width: 100%; width: 100%;
@ -440,6 +440,7 @@
.follow-relay-container { .follow-relay-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0 5px;
} }
h1 { h1 {
font-size: 24px; font-size: 24px;