Merge branch 'feature/see-local-statuses' into 'develop'

Add ability to see local statuses on Statuses by instance tab

Closes #86 and #77

See merge request pleroma/admin-fe!99
This commit is contained in:
Angelina Filippova 2020-03-04 22:57:28 +00:00
commit e4b2ebb15c
7 changed files with 146 additions and 34 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/).
## Unreleased
### Added
- Ability to see local statuses in Statuses by instance section
## [2.0] - 2020-02-27
### Added

View file

@ -21,6 +21,15 @@ export async function deleteStatus(id, authHost, token) {
})
}
export async function fetchStatuses({ godmode, localOnly, authHost, token, pageSize, page }) {
return await request({
baseURL: baseName(authHost),
url: `/api/pleroma/admin/statuses?godmode=${godmode}&local_only=${localOnly}&page=${page}&page_size=${pageSize}`,
method: 'get',
headers: authHeaders(token)
})
}
export async function fetchStatusesByInstance({ instance, authHost, token, pageSize, page }) {
return await request({
baseURL: baseName(authHost),

View file

@ -244,7 +244,9 @@ export default {
statuses: 'Statuses by instance',
instanceFilter: 'Instance filter',
loadMore: 'Load more',
noInstances: 'No other instances found'
noInstances: 'No other instances found',
onlyLocalStatuses: 'Show only local statuses',
showPrivateStatuses: 'Show private statuses'
},
userProfile: {
tags: 'Tags',
@ -255,7 +257,6 @@ export default {
localUppercase: 'Local',
nickname: 'Nickname',
recentStatuses: 'Recent Statuses',
showPrivateStatuses: 'Show private statuses',
roles: 'Roles',
activeUppercase: 'Active',
active: 'active',

View file

@ -17,8 +17,6 @@ const getters = {
errorLogs: state => state.errorLog.logs,
users: state => state.users.fetchedUsers,
authHost: state => state.user.authHost,
settings: state => state.settings,
instances: state => state.peers.fetchedPeers,
statuses: state => state.status.fetchedStatuses
settings: state => state.settings
}
export default getters

View file

@ -1,4 +1,4 @@
import { changeStatusScope, deleteStatus, fetchStatusesByInstance } from '@/api/status'
import { changeStatusScope, deleteStatus, fetchStatuses, fetchStatusesByInstance } from '@/api/status'
const status = {
state: {
@ -6,11 +6,21 @@ const status = {
loading: false,
statusesByInstance: {
selectedInstance: '',
showLocal: false,
showPrivate: false,
page: 1,
pageSize: 30
pageSize: 20,
buttonLoading: false,
allLoaded: false
}
},
mutations: {
CHANGE_GODMODE_CHECKBOX_VALUE: (state, value) => {
state.statusesByInstance.showPrivate = value
},
CHANGE_LOCAL_CHECKBOX_VALUE: (state, value) => {
state.statusesByInstance.showLocal = value
},
CHANGE_PAGE: (state, page) => {
state.statusesByInstance.page = page
},
@ -23,6 +33,12 @@ const status = {
PUSH_STATUSES: (state, statuses) => {
state.fetchedStatuses = [...state.fetchedStatuses, ...statuses]
},
SET_ALL_LOADED: (state, status) => {
state.statusesByInstance.allLoaded = status
},
SET_BUTTON_LOADING: (state, status) => {
state.statusesByInstance.buttonLoading = status
},
SET_LOADING: (state, status) => {
state.loading = status
}
@ -48,10 +64,21 @@ const status = {
dispatch('FetchStatusesByInstance')
}
},
async FetchStatusesByInstance({ commit, getters, state }) {
async FetchStatusesByInstance({ commit, getters, state, rootState }) {
commit('SET_LOADING', true)
const statuses = state.statusesByInstance.selectedInstance === ''
? { data: [] }
if (state.statusesByInstance.selectedInstance === '') {
commit('SET_STATUSES_BY_INSTANCE', [])
} else {
const statuses = state.statusesByInstance.selectedInstance === rootState.user.authHost
? await fetchStatuses(
{
godmode: state.statusesByInstance.showPrivate,
localOnly: state.statusesByInstance.showLocal,
authHost: getters.authHost,
token: getters.token,
pageSize: state.statusesByInstance.pageSize,
page: state.statusesByInstance.page
})
: await fetchStatusesByInstance(
{
instance: state.statusesByInstance.selectedInstance,
@ -60,13 +87,26 @@ const status = {
pageSize: state.statusesByInstance.pageSize,
page: state.statusesByInstance.page
})
commit('SET_STATUSES_BY_INSTANCE', statuses.data)
if (statuses.data.length < state.statusesByInstance.pageSize) {
commit('SET_ALL_LOADED', true)
}
}
commit('SET_LOADING', false)
},
async FetchStatusesPageByInstance({ commit, getters, state }) {
commit('SET_LOADING', true)
const statuses = await fetchStatusesByInstance(
async FetchStatusesPageByInstance({ commit, getters, rootState, state }) {
commit('SET_BUTTON_LOADING', true)
const statuses = state.statusesByInstance.selectedInstance === rootState.user.authHost
? await fetchStatuses(
{
godmode: state.statusesByInstance.showPrivate,
localOnly: state.statusesByInstance.showLocal,
authHost: getters.authHost,
token: getters.token,
pageSize: state.statusesByInstance.pageSize,
page: state.statusesByInstance.page
})
: await fetchStatusesByInstance(
{
instance: state.statusesByInstance.selectedInstance,
authHost: getters.authHost,
@ -74,12 +114,29 @@ const status = {
pageSize: state.statusesByInstance.pageSize,
page: state.statusesByInstance.page
})
commit('PUSH_STATUSES', statuses.data)
commit('SET_LOADING', false)
commit('SET_BUTTON_LOADING', false)
if (statuses.data.length < state.statusesByInstance.pageSize) {
commit('SET_ALL_LOADED', true)
}
},
HandleGodmodeCheckboxChange({ commit, dispatch }, value) {
dispatch('HandlePageChange', 1)
commit('SET_ALL_LOADED', false)
commit('CHANGE_GODMODE_CHECKBOX_VALUE', value)
dispatch('FetchStatusesByInstance')
},
HandleLocalCheckboxChange({ commit, dispatch }, value) {
dispatch('HandlePageChange', 1)
commit('SET_ALL_LOADED', false)
commit('CHANGE_LOCAL_CHECKBOX_VALUE', value)
dispatch('FetchStatusesByInstance')
},
HandleFilterChange({ commit }, instance) {
commit('CHANGE_SELECTED_INSTANCE', instance)
commit('SET_ALL_LOADED', false)
},
HandlePageChange({ commit }, page) {
commit('CHANGE_PAGE', page)

View file

@ -22,6 +22,15 @@
:selected-users="selectedUsers"
@apply-action="clearSelection"/>
</div>
<div v-if="currentInstance" class="checkbox-container">
<el-checkbox v-model="showLocal" class="show-private-statuses">
{{ $t('statuses.onlyLocalStatuses') }}
</el-checkbox>
<el-checkbox v-model="showPrivate" class="show-private-statuses">
{{ $t('statuses.showPrivateStatuses') }}
</el-checkbox>
</div>
<p v-if="statuses.length === 0" class="no-statuses">{{ $t('userProfile.noStatuses') }}</p>
<div v-for="status in statuses" :key="status.id" class="status-container">
<status
:status="status"
@ -30,13 +39,13 @@
@status-selection="handleStatusSelection" />
</div>
<div v-if="statuses.length > 0" class="statuses-pagination">
<el-button @click="handleLoadMore">{{ $t('statuses.loadMore') }}</el-button>
<el-button v-if="!allLoaded" :loading="buttonLoading" @click="handleLoadMore">{{ $t('statuses.loadMore') }}</el-button>
<el-button v-else icon="el-icon-check" circle/>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import MultipleUsersMenu from '@/views/users/components/MultipleUsersMenu'
import Status from '@/components/Status'
@ -52,10 +61,18 @@ export default {
}
},
computed: {
...mapGetters([
'instances',
'statuses'
]),
allLoaded() {
return this.$store.state.status.statusesByInstance.allLoaded
},
buttonLoading() {
return this.$store.state.status.statusesByInstance.buttonLoading
},
currentInstance() {
return this.selectedInstance === this.$store.state.user.authHost
},
instances() {
return [this.$store.state.user.authHost, ...this.$store.state.peers.fetchedPeers]
},
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
@ -75,6 +92,25 @@ export default {
set(instance) {
this.$store.dispatch('HandleFilterChange', instance)
}
},
showLocal: {
get() {
return this.$store.state.status.statusesByInstance.showLocal
},
set(value) {
this.$store.dispatch('HandleLocalCheckboxChange', value)
}
},
showPrivate: {
get() {
return this.$store.state.status.statusesByInstance.showPrivate
},
set(value) {
this.$store.dispatch('HandleGodmodeCheckboxChange', value)
}
},
statuses() {
return this.$store.state.status.fetchedStatuses
}
},
mounted() {
@ -97,7 +133,6 @@ export default {
if (this.selectedUsers.find(selectedUser => user.id === selectedUser.id) !== undefined) {
return
}
this.selectedUsers = [...this.selectedUsers, user]
}
}
@ -111,6 +146,9 @@ export default {
margin: 0 0 10px;
}
}
.checkbox-container {
margin-bottom: 15px;
}
.filter-container {
display: flex;
height: 36px;
@ -130,6 +168,9 @@ h1 {
}
@media only screen and (max-width:480px) {
.checkbox-container {
margin-bottom: 10px;
}
.filter-container {
display: flex;
height: 36px;

View file

@ -80,7 +80,7 @@
<div class="recent-statuses-container">
<h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }}</h2>
<el-checkbox v-model="showPrivate" class="show-private-statuses" @change="onTogglePrivate">
{{ $t('userProfile.showPrivateStatuses') }}
{{ $t('statuses.showPrivateStatuses') }}
</el-checkbox>
<el-timeline v-if="!statusesLoading" class="statuses">
<el-timeline-item v-for="status in statuses" :key="status.id">