forked from AkkomaGang/admin-fe
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:
commit
e4b2ebb15c
7 changed files with 146 additions and 34 deletions
|
@ -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
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in a new issue