Add statuses page

src/api/peers.js

+import request from '@/utils/request'
+import { getToken } from '@/utils/auth'
+import { baseName } from './utils'
+
+export async function fetchPeers(authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/v1/instance/peers`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
+const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}

src/api/status.js

@@ -21,4 +21,13 @@ export async function deleteStatus(id, authHost, token) {
   })
 }
 
+export async function fetchStatusesByInstance(instance, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/instances/${instance}/statuses`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
 const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}

src/lang/en.js

@@ -230,6 +230,10 @@ export default {
     passwordResetTokenCreated: 'Password reset token was created',
     accountCreated: 'New account was created!'
   },
+  statuses: {
+    statuses: 'Statuses',
+    instanceFilter: 'Instance filter'
+  },
   userProfile: {
     tags: 'Tags',
     moderator: 'Moderator',

src/router/index.js

@@ -21,6 +21,20 @@ const settings = {
   ]
 }
 
+const statusesDisabled = disabledFeatures.includes('statuses')
+const statuses = {
+  path: '/statuses',
+  component: Layout,
+  children: [
+    {
+      path: 'index',
+      component: () => import('@/views/statuses/index'),
+      name: 'Statuses',
+      meta: { title: 'Statuses', icon: 'form', noCache: true }
+    }
+  ]
+}
+
 const reportsDisabled = disabledFeatures.includes('reports')
 const reports = {
   path: '/reports',
@@ -126,6 +140,7 @@ export const asyncRouterMap = [
       }
     ]
   },
+  ...(statusesDisabled ? [] : [statuses]),
   ...(settingsDisabled ? [] : [settings]),
   ...(reportsDisabled ? [] : [reports]),
   ...(invitesDisabled ? [] : [invites]),

src/store/getters.js

@@ -49,6 +49,7 @@ const getters = {
   http: state => state.settings.settings['http'],
   httpSecurity: state => state.settings.settings['http_security'],
   instance: state => state.settings.settings['instance'],
+  instances: state => state.peers.fetchedPeers,
   kocaptcha: state => state.settings.settings['Pleroma.Captcha.Kocaptcha'],
   level: state => state.settings.settings['level'],
   ldap: state => state.settings.settings['ldap'],
@@ -82,6 +83,7 @@ const getters = {
   richMedia: state => state.settings.settings['rich_media'],
   suggestions: state => state.settings.settings['suggestions'],
   scheduledActivity: state => state.settings.settings['Pleroma.ScheduledActivity'],
+  statuses: state => state.status.fetchedStatuses,
   teslaAdapter: state => state.settings.settings['adapter'],
   twitter: state => state.settings.settings['Ueberauth.Strategy.Twitter.OAuth'],
   ueberauth: state => state.settings.settings['Ueberauth'],

src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import app from './modules/app'
 import errorLog from './modules/errorLog'
 import invites from './modules/invites'
+import peers from './modules/peers'
 import permission from './modules/permission'
 import reports from './modules/reports'
 import settings from './modules/settings'
@@ -21,6 +22,7 @@ const store = new Vuex.Store({
     app,
     errorLog,
     invites,
+    peers,
     permission,
     reports,
     settings,

src/store/modules/peers.js

+import { fetchPeers } from '@/api/peers'
+
+const peers = {
+  state: {
+    fetchedPeers: [],
+    loading: true
+  },
+
+  mutations: {
+    SET_PEERS: (state, peers) => {
+      state.fetchedPeers = peers
+    },
+    SET_LOADING: (state, status) => {
+      state.loading = status
+    }
+  },
+
+  actions: {
+    async FetchPeers({ commit, getters }) {
+      const peers = await fetchPeers(getters.authHost, getters.token)
+
+      commit('SET_PEERS', peers.data)
+      commit('SET_LOADING', false)
+    }
+  }
+}
+
+export default peers

src/store/modules/status.js

-import { changeStatusScope, deleteStatus } from '@/api/status'
+import { changeStatusScope, deleteStatus, fetchStatusesByInstance } from '@/api/status'
 
 const status = {
+  state: {
+    fetchedStatuses: [],
+    loading: false
+  },
+  mutations: {
+    SET_STATUSES: (state, statuses) => {
+      state.fetchedStatuses = statuses
+    },
+    SET_LOADING: (state, status) => {
+      state.loading = status
+    }
+  },
   actions: {
     async ChangeStatusScope({ dispatch, getters }, { statusId, isSensitive, visibility, reportCurrentPage, userId, godmode }) {
       await changeStatusScope(statusId, isSensitive, visibility, getters.authHost, getters.token)
@@ -17,6 +29,13 @@ const status = {
       } else if (userId.length > 0) {
         dispatch('FetchUserStatuses', { userId, godmode })
       }
+    },
+    async FetchStatusesByInstance({ commit, getters }, instance) {
+      commit('SET_LOADING', true)
+      const statuses = await fetchStatusesByInstance(instance, getters.authHost, getters.token)
+
+      commit('SET_STATUSES', statuses.data)
+      commit('SET_LOADING', false)
     }
   }
 }

src/views/statuses/index.vue

+<template>
+  <div v-if="!loading" class="statuses-container">
+    <h1>
+      {{ $t('statuses.statuses') }}
+    </h1>
+    <div class="filter-container">
+      <el-select v-model="selectedInstance" :placeholder="$t('statuses.instanceFilter')" @change="handleFilterChange">
+        <el-option
+          v-for="(instance,index) in instances"
+          :key="index"
+          :label="instance"
+          :value="instance"/>
+      </el-select>
+    </div>
+    <status v-for="status in statuses" :key="status.id" :status="status" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Status from '../status/Status'
+
+export default {
+  name: 'Statuses',
+  components: {
+    Status
+  },
+  data() {
+    return {
+      selectedInstance: '',
+      page: 1
+    }
+  },
+  computed: {
+    loading() {
+      return this.$store.state.peers.loading
+    },
+    ...mapGetters([
+      'instances',
+      'statuses'
+    ])
+  },
+  created() {
+  },
+  mounted() {
+    this.$store.dispatch('FetchPeers')
+  },
+  methods: {
+    handleFilterChange(instance) {
+      this.$store.dispatch('FetchStatusesByInstance', instance)
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+.statuses-container {
+  padding: 0 15px;
+}
+.filter-container {
+  margin: 22px 15px 15px 0;
+}
+h1 {
+  margin: 22px 0 0 0;
+}
+</style>