Add user list, querying and pagination to moderation

src/components/mod_modal/mod_modal.scss

@@ -39,6 +39,7 @@
 
     .panel-body {
       height: inherit;
+      overflow-y: hidden;
     }
   }
 }

src/components/mod_modal/mod_modal.vue

@@ -35,6 +35,9 @@
       <div class="panel-body">
         <ModModalContent v-if="modalOpenedOnce" />
       </div>
+      <div class="panel-footer settings-footer">
+        <span id="navigation" />
+      </div>
     </div>
   </Modal>
 </template>

src/components/mod_modal/tabs/users_tab/users_tab.js

@@ -1,6 +1,8 @@
+import BasicUserCard from 'src/components/basic_user_card/basic_user_card.vue'
+import ModerationTools from 'src/components/moderation_tools/moderation_tools.vue'
 import Popover from 'src/components/popover/popover.vue'
 
-import { forEach } from 'lodash'
+import { forEach, every, findKey } from 'lodash'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -16,53 +18,91 @@ library.add(
 const UsersTab = {
   data () {
     return {
+      searchTerm: null,
+      page: 1,
       accountType: {
         local: true,
-        external: false,
-        all: false
+        external: false
       },
       status: {
         active: true,
         deactivated: false,
-        pending: false,
-        unconfirmed: false,
-        all: false
+        need_approval: false,
+        unconfirmed: false
       },
       actorType: {
-        person: true,
-        bot: true,
-        application: true,
-        all: true
+        Person: false,
+        Service: false,
+        Application: false
       }
     }
   },
   components: {
+    BasicUserCard,
+    ModerationTools,
     Popover
   },
+  created () {
+    this.query()
+  },
+  computed: {
+    users () { return this.$store.state.users.adminUsers },
+    isActive () {
+      const tabSwitcher = this.$parent
+      console.log(this.users)
+      return tabSwitcher ? tabSwitcher.isActive('users') : false
+    }
+  },
   methods: {
-    setAccountType (type) {
-      if (type === 'all') {
-        forEach(this.accountType, (k, v) => { this.accountType[v] = true })
-      } else {
+    all (filter) { return every(filter, _ => !_) },
+    setAccountType (type = false) {
       forEach(this.accountType, (k, v) => { this.accountType[v] = false })
+      if (type) {
         this.accountType[type] = true
       }
+
+      this.query()
     },
-    setStatus (status) {
-      if (status === 'all') {
-        forEach(this.status, (k, v) => { this.status[v] = true })
-      } else {
+    setStatus (status = false) {
       forEach(this.status, (k, v) => { this.status[v] = false })
+      if (status) {
         this.status[status] = true
       }
+
+      this.query()
     },
-    setActorType (type) {
-      if (type === 'all') {
-        forEach(this.actorType, (k, v) => { this.actorType[v] = true })
-      } else {
+    setActorType (type = false) {
       forEach(this.actorType, (k, v) => { this.actorType[v] = false })
+      if (type) {
         this.actorType[type] = true
       }
+
+      this.query()
+    },
+    prevPage () {
+      this.page--
+      this.query()
+    },
+    nextPage () {
+      this.page++
+      this.query()
+    },
+    query () {
+      const params = {}
+      params.actorTypes = [findKey(this.actorType, _ => _)].filter(Boolean)
+      params.filters = [
+        findKey(this.status, _ => _),
+        findKey(this.accountType, _ => _)
+      ].filter(Boolean)
+
+      if (this.searchTerm) {
+        params.name = this.searchTerm
+      }
+      if (this.page > 1) {
+        params.page = this.page
+      }
+
+      this.$store.dispatch('fetchUsers', params)
     }
   }
 }

src/components/mod_modal/tabs/users_tab/users_tab.vue

@@ -15,7 +15,7 @@
               v-model="searchTerm"
               class="search-input"
               :placeholder="$t('nav.search')"
-              @keyup.enter="newQuery(searchTerm)"
+              @keyup.enter="query()"
             />
           </div>
           <Popover
@@ -37,7 +37,7 @@
                 >
                   <span
                     class="menu-checkbox -radio"
-                    :class="{ 'menu-checkbox-checked': !accountType.all && accountType.local }"
+                    :class="{ 'menu-checkbox-checked': accountType.local }"
                   />{{ $t('moderation.users.filter.local') }}
                 </button>
                 <button
@@ -46,16 +46,16 @@
                 >
                   <span
                     class="menu-checkbox -radio"
-                    :class="{ 'menu-checkbox-checked': !accountType.all && accountType.external }"
+                    :class="{ 'menu-checkbox-checked': accountType.external }"
                   />{{ $t('moderation.users.filter.external') }}
                 </button>
                 <button
                   class="button-default dropdown-item"
-                  @click="setAccountType('all')"
+                  @click="setAccountType()"
                 >
                   <span
                     class="menu-checkbox -radio"
-                    :class="{ 'menu-checkbox-checked': accountType.all }"
+                    :class="{ 'menu-checkbox-checked': all(accountType) }"
                   />{{ $t('moderation.users.filter.all') }}
                 </button>
                 <div
@@ -70,7 +70,7 @@
                 >
                   <span
                     class="menu-checkbox -radio"
-                    :class="{ 'menu-checkbox-checked': !status.all && status.active }"
+                    :class="{ 'menu-checkbox-checked': status.active }"
                   />{{ $t('moderation.users.filter.active') }}
                 </button>
                 <button
@@ -79,16 +79,16 @@
                 >
                   <span
                     class="menu-checkbox -radio"
-                    :class="{ 'menu-checkbox-checked': !status.all && status.deactivated }"
+                    :class="{ 'menu-checkbox-checked': status.deactivated }"
                   />{{ $t('moderation.users.filter.deactivated') }}
                 </button>
                 <button
                   class="button-default dropdown-item"
-                  @click="setStatus('pending')"
+                  @click="setStatus('need_approval')"
                 >
                   <span
                     class="menu-checkbox -radio"
-                    :class="{ 'menu-checkbox-checked': !status.all && status.pending }"
+                    :class="{ 'menu-checkbox-checked': status.need_approval }"
                   />{{ $t('moderation.users.filter.pending') }}
                 </button>
                 <button
@@ -97,16 +97,16 @@
                 >
                   <span
                     class="menu-checkbox -radio"
-                    :class="{ 'menu-checkbox-checked': !status.all && status.unconfirmed }"
+                    :class="{ 'menu-checkbox-checked': status.unconfirmed }"
                   />{{ $t('moderation.users.filter.unconfirmed') }}
                 </button>
                 <button
                   class="button-default dropdown-item"
-                  @click="setStatus('all')"
+                  @click="setStatus()"
                 >
                   <span
                     class="menu-checkbox -radio"
-                    :class="{ 'menu-checkbox-checked': status.all }"
+                    :class="{ 'menu-checkbox-checked': all(status) }"
                   />{{ $t('moderation.users.filter.all') }}
                 </button>
                 <div
@@ -117,38 +117,38 @@
               <div class="dropdown-menu">
                 <button
                   class="button-default dropdown-item"
-                  @click="setActorType('person')"
+                  @click="setActorType('Person')"
                 >
                   <span
                     class="menu-checkbox -radio"
-                    :class="{ 'menu-checkbox-checked': !actorType.all && actorType.person }"
+                    :class="{ 'menu-checkbox-checked': actorType.Person }"
                   />{{ $t('moderation.users.filter.person') }}
                 </button>
                 <button
                   class="button-default dropdown-item"
-                  @click="setActorType('bot')"
+                  @click="setActorType('Service')"
                 >
                   <span
                     class="menu-checkbox -radio"
-                    :class="{ 'menu-checkbox-checked': !actorType.all && actorType.bot }"
+                    :class="{ 'menu-checkbox-checked': actorType.Service }"
                   />{{ $t('moderation.users.filter.bot') }}
                 </button>
                 <button
                   class="button-default dropdown-item"
-                  @click="setActorType('application')"
+                  @click="setActorType('Application')"
                 >
                   <span
                     class="menu-checkbox -radio"
-                    :class="{ 'menu-checkbox-checked': !actorType.all && actorType.application }"
+                    :class="{ 'menu-checkbox-checked': actorType.Application }"
                   />{{ $t('moderation.users.filter.application') }}
                 </button>
                 <button
                   class="button-default dropdown-item"
-                  @click="setActorType('all')"
+                  @click="setActorType()"
                 >
                   <span
                     class="menu-checkbox -radio"
-                    :class="{ 'menu-checkbox-checked': actorType.all }"
+                    :class="{ 'menu-checkbox-checked': all(actorType) }"
                   />{{ $t('moderation.users.filter.all') }}
                 </button>
                 <div
@@ -161,9 +161,40 @@
         </div>
       </div>
       <div class="users">
+        <div
+          v-for="user in users"
+          :key="user.id"
+          class="user"
+        >
+          <BasicUserCard :user="user">
+            <ModerationTools :user="user" />
+          </BasicUserCard>
         </div>
       </div>
     </div>
+
+    <teleport
+      v-if="isActive"
+      to="#navigation"
+    >
+      <div class="apply-container">
+        <button
+          class="btn button-default submit"
+          :disabled="page == 1"
+          @click="prevPage"
+        >
+          {{ $t('moderation.previous') }}
+        </button>
+        <button
+          class="btn button-default"
+          :disabled="users.length < 50"
+          @click="nextPage"
+        >
+          {{ $t('moderation.next') }}
+        </button>
+      </div>
+    </teleport>
+  </div>
 </template>
 
 <script src="./users_tab.js"></script>

src/i18n/en.json

@@ -294,6 +294,8 @@
             "tags": "Set post restrictions"
         },
         "statuses": "Posts",
+        "next": "Next page",
+        "previous": "Previous page",
         "users": {
             "users": "Users",
             "filter": {