Add checkboxes to show only local and and private statuses

src/lang/en.js

@@ -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',

src/store/modules/status.js

@@ -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,
+              godmode: state.statusesByInstance.showPrivate,
-              localOnly: false,
+              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)
     },

src/views/statuses/index.vue

@@ -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;

src/views/users/show.vue

@@ -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">