Merge branch 'feature/display-status-counts-by-scope' into 'develop'

Display status counts by scope

Closes #54

See merge request pleroma/admin-fe!104

(cherry picked from commit ce3d3387cf)

4f61344c Add api function and action that fetches statuses count by scope
1d21dc51 Update header margin
85664ffb Display status count by visibility scope

src/api/status.js

@@ -30,6 +30,15 @@ export async function fetchStatuses({ godmode, localOnly, authHost, token, pageS
   })
 }
 
+export async function fetchStatusesCount(authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/stats`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
 export async function fetchStatusesByInstance({ instance, authHost, token, pageSize, page }) {
   return await request({
     baseURL: baseName(authHost),

src/lang/en.js

@@ -241,12 +241,16 @@ export default {
     resendConfirmation: 'Resend confirmation email'
   },
   statuses: {
-    statuses: 'Statuses by instance',
+    statuses: 'Statuses',
     instanceFilter: 'Instance filter',
     loadMore: 'Load more',
     noInstances: 'No other instances found',
     onlyLocalStatuses: 'Show only local statuses',
-    showPrivateStatuses: 'Show private statuses'
+    showPrivateStatuses: 'Show private statuses',
+    direct: 'Direct',
+    private: 'Private',
+    public: 'Public',
+    unlisted: 'Unlisted'
   },
   userProfile: {
     tags: 'Tags',

src/store/modules/status.js

@@ -1,4 +1,4 @@
-import { changeStatusScope, deleteStatus, fetchStatuses, fetchStatusesByInstance } from '@/api/status'
+import { changeStatusScope, deleteStatus, fetchStatuses, fetchStatusesCount, fetchStatusesByInstance } from '@/api/status'
 
 const status = {
   state: {
@@ -12,7 +12,8 @@ const status = {
       pageSize: 20,
       buttonLoading: false,
       allLoaded: false
-    }
+    },
+    statusVisibility: {}
   },
   mutations: {
     CHANGE_GODMODE_CHECKBOX_VALUE: (state, value) => {
@@ -41,6 +42,9 @@ const status = {
     },
     SET_LOADING: (state, status) => {
       state.loading = status
+    },
+    SET_STATUS_VISIBILITY: (state, visibility) => {
+      state.statusVisibility = visibility
     }
   },
   actions: {
@@ -64,6 +68,12 @@ const status = {
         dispatch('FetchStatusesByInstance')
       }
     },
+    async FetchStatusesCount({ commit, getters }) {
+      commit('SET_LOADING', true)
+      const { data } = await fetchStatusesCount(getters.authHost, getters.token)
+      commit('SET_STATUS_VISIBILITY', data.status_visibility)
+      commit('SET_LOADING', false)
+    },
     async FetchStatusesByInstance({ commit, getters, state, rootState }) {
       commit('SET_LOADING', true)
       if (state.statusesByInstance.selectedInstance === '') {

src/views/emojiPacks/index.vue

@@ -155,7 +155,7 @@ export default {
   margin: 0 30px;
 }
 .emoji-packs-header {
-  margin: 22px 0 20px 15px;
+  margin: 10px 0 20px 15px;
 }
 .import-pack-button {
   margin-left: 10px;

src/views/invites/index.vue

@@ -246,7 +246,7 @@ export default {
     padding: 5px 20px 0 20px
   }
   h1 {
-    margin: 22px 0 0 15px;
+    margin: 10px 0 0 15px;
   }
   .icon {
     margin-right: 5px;

src/views/moderation_log/index.vue

@@ -130,7 +130,7 @@ export default {
   margin: 0 15px;
 }
 h1 {
-  margin: 22px 0 20px 0;
+  margin: 10px 0 20px 0;
 }
 .el-timeline {
   margin: 25px 45px 0 0;

src/views/reports/index.vue

@@ -50,7 +50,7 @@ export default {
     padding-bottom: 0
   }
   h1 {
-    margin: 22px 0 0 15px;
+    margin: 10px 0 0 15px;
   }
   .no-reports-message {
     color: gray;

src/views/settings/styles/main.scss

@@ -444,7 +444,7 @@
       margin: 0;
     }
     .settings-header-container {
-      margin: 15px;
+      margin: 10px 15px 15px 15px;
     }
     .nav-container {
       display: flex;

src/views/statuses/index.vue

@@ -3,6 +3,12 @@
     <h1>
       {{ $t('statuses.statuses') }}
     </h1>
+    <el-button-group>
+      <el-button plain>{{ $t('statuses.direct') }}: {{ statusVisibility.direct }}</el-button>
+      <el-button plain>{{ $t('statuses.private') }}: {{ statusVisibility.private }}</el-button>
+      <el-button plain>{{ $t('statuses.public') }}: {{ statusVisibility.public }}</el-button>
+      <el-button plain>{{ $t('statuses.unlisted') }}: {{ statusVisibility.unlisted }}</el-button>
+    </el-button-group>
     <div class="filter-container">
       <el-select
         v-model="selectedInstance"
@@ -111,10 +117,14 @@ export default {
     },
     statuses() {
       return this.$store.state.status.fetchedStatuses
+    },
+    statusVisibility() {
+      return this.$store.state.status.statusVisibility
     }
   },
   mounted() {
     this.$store.dispatch('FetchPeers')
+    this.$store.dispatch('FetchStatusesCount')
   },
   methods: {
     handleFilterChange() {
@@ -142,6 +152,9 @@ export default {
 <style rel='stylesheet/scss' lang='scss'>
 .statuses-container {
   padding: 0 15px;
+  h1 {
+    margin: 10px 0 15px 0;
+  }
   .status-container {
     margin: 0 0 10px;
   }
@@ -163,9 +176,6 @@ export default {
   padding: 15px 0;
   text-align: center;
 }
-h1 {
-  margin: 22px 0 0 0;
-}
 
 @media only screen and (max-width:480px) {
   .checkbox-container {

src/views/users/index.vue

@@ -245,7 +245,7 @@ export default {
 }
 .users-container {
   h1 {
-    margin: 22px 0 0 15px;
+    margin: 10px 0 0 15px;
   }
 
   .pagination {