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

CHANGELOG.md

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

src/api/status.js

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

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/getters.js

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

src/store/modules/status.js

@@ -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,48 @@ 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,
+              authHost: getters.authHost,
+              token: getters.token,
+              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, 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,
@@ -60,26 +114,29 @@ const status = {
             pageSize: state.statusesByInstance.pageSize,
             page: state.statusesByInstance.page
           })
-
-      commit('SET_STATUSES_BY_INSTANCE', statuses.data)
-      commit('SET_LOADING', false)
-    },
-    async FetchStatusesPageByInstance({ commit, getters, state }) {
-      commit('SET_LOADING', true)
-      const statuses = await fetchStatusesByInstance(
-        {
-          instance: state.statusesByInstance.selectedInstance,
-          authHost: getters.authHost,
-          token: getters.token,
-          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)

src/views/statuses/index.vue

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

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