Skip to content
Snippets Groups Projects
Commit d2f78d23 authored by Angelina Filippova's avatar Angelina Filippova
Browse files

Add checkboxes to show only local and and private statuses

parent 566d0fef
No related branches found
No related tags found
No related merge requests found
......@@ -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',
......
......@@ -6,11 +6,19 @@ const status = {
loading: false,
statusesByInstance: {
selectedInstance: '',
showLocal: false,
showPrivate: false,
page: 1,
pageSize: 30
}
},
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
},
......@@ -48,12 +56,6 @@ const status = {
dispatch('FetchStatusesByInstance')
}
},
async FetchStatuses({ commit, getters }, { godmode, localOnly }) {
commit('SET_LOADING', true)
const statuses = await fetchStatuses({ godmode, localOnly, authHost: getters.authHost, token: getters.token })
commit('SET_STATUSES_BY_INSTANCE', statuses.data)
commit('SET_LOADING', false)
},
async FetchStatusesByInstance({ commit, getters, state, rootState }) {
commit('SET_LOADING', true)
if (state.statusesByInstance.selectedInstance === '') {
......@@ -62,8 +64,8 @@ const status = {
const statuses = state.statusesByInstance.selectedInstance === rootState.user.authHost
? await fetchStatuses(
{
godmode: false,
localOnly: false,
godmode: state.statusesByInstance.showPrivate,
localOnly: state.statusesByInstance.showLocal,
authHost: getters.authHost,
token: getters.token
})
......@@ -93,6 +95,14 @@ const status = {
commit('PUSH_STATUSES', statuses.data)
commit('SET_LOADING', false)
},
HandleGodmodeCheckboxChange({ commit, dispatch }, value) {
commit('CHANGE_GODMODE_CHECKBOX_VALUE', value)
dispatch('FetchStatusesByInstance')
},
HandleLocalCheckboxChange({ commit, dispatch }, value) {
commit('CHANGE_LOCAL_CHECKBOX_VALUE', value)
dispatch('FetchStatusesByInstance')
},
HandleFilterChange({ commit }, instance) {
commit('CHANGE_SELECTED_INSTANCE', instance)
},
......
......@@ -22,6 +22,14 @@
: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
......@@ -52,6 +60,9 @@ export default {
}
},
computed: {
currentInstance() {
return this.selectedInstance === this.$store.state.user.authHost
},
instances() {
return [this.$store.state.user.authHost, ...this.$store.state.peers.fetchedPeers]
},
......@@ -75,6 +86,22 @@ export default {
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
}
......@@ -99,7 +126,6 @@ export default {
if (this.selectedUsers.find(selectedUser => user.id === selectedUser.id) !== undefined) {
return
}
this.selectedUsers = [...this.selectedUsers, user]
}
}
......@@ -113,6 +139,9 @@ export default {
margin: 0 0 10px;
}
}
.checkbox-container {
margin-bottom: 15px;
}
.filter-container {
display: flex;
height: 36px;
......@@ -132,6 +161,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">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment