Create layout for users moderation tab

src/components/mod_modal/mod_modal_content.js

@@ -2,7 +2,7 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 
 import ReportsTab from './tabs/reports_tab/reports_tab.vue'
 // import StatusesTab from './tabs/statuses_tab.vue'
-// import UsersTab from './tabs/users_tab.vue'
+import UsersTab from './tabs/users_tab/users_tab.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -21,9 +21,9 @@ const ModModalContent = {
   components: {
     TabSwitcher,
 
-    ReportsTab
+    ReportsTab,
     // StatusesTab,
-    // UsersTab
+    UsersTab
   },
   computed: {
     open () {

src/components/mod_modal/mod_modal_content.vue

@@ -13,6 +13,13 @@
     >
       <ReportsTab />
     </div>
+    <div
+      :label="$t('moderation.users.users')"
+      icon="users"
+      data-tab-name="users"
+    >
+      <UsersTab />
+    </div>
   </tab-switcher>
 </template>
 

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

@@ -0,0 +1,70 @@
+import Popover from 'src/components/popover/popover.vue'
+
+import { forEach } from 'lodash'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faFilter,
+  faSearch
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faFilter,
+  faSearch
+)
+
+const UsersTab = {
+  data () {
+    return {
+      accountType: {
+        local: true,
+        external: false,
+        all: false
+      },
+      status: {
+        active: true,
+        deactivated: false,
+        pending: false,
+        unconfirmed: false,
+        all: false
+      },
+      actorType: {
+        person: true,
+        bot: true,
+        application: true,
+        all: true
+      }
+    }
+  },
+  components: {
+    Popover
+  },
+  methods: {
+    setAccountType (type) {
+      if (type === 'all') {
+        forEach(this.accountType, (k, v) => { this.accountType[v] = true })
+      } else {
+        forEach(this.accountType, (k, v) => { this.accountType[v] = false })
+        this.accountType[type] = true
+      }
+    },
+    setStatus (status) {
+      if (status === 'all') {
+        forEach(this.status, (k, v) => { this.status[v] = true })
+      } else {
+        forEach(this.status, (k, v) => { this.status[v] = false })
+        this.status[status] = true
+      }
+    },
+    setActorType (type) {
+      if (type === 'all') {
+        forEach(this.actorType, (k, v) => { this.actorType[v] = true })
+      } else {
+        forEach(this.actorType, (k, v) => { this.actorType[v] = false })
+        this.actorType[type] = true
+      }
+    }
+  }
+}
+
+export default UsersTab

src/components/mod_modal/tabs/users_tab/users_tab.scss

@@ -0,0 +1,25 @@
+@import '../../../../_variables.scss';
+
+.reports-header .right-side {
+  display: flex;
+  align-items: center;
+
+  .search-input-container {
+    padding: 0.8rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .search-input {
+      width: 100%;
+      line-height: 1.125rem;
+      font-size: 1rem;
+      padding: 0.5rem;
+      box-sizing: border-box;
+    }
+
+    .search-icon {
+      margin-right: 0.3em;
+    }
+  }
+}

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

@@ -0,0 +1,170 @@
+<template>
+  <div :label="$t('moderation.users.users')">
+    <div class="content">
+      <div class="reports-header">
+        <h2>{{ $t('moderation.users.users') }}</h2>
+        <div class="right-side">
+          <div class="search-input-container">
+            <div class="input-search">
+              <FAIcon
+                class="search-icon fa-scale-110 fa-old-padding"
+                icon="search"
+              />
+            </div>
+            <input
+              v-model="searchTerm"
+              class="search-input"
+              :placeholder="$t('nav.search')"
+              @keyup.enter="newQuery(searchTerm)"
+            />
+          </div>
+          <Popover
+            trigger="click"
+            placement="bottom"
+            :offset="{ x: -45, y: 5 }"
+            remove-padding
+          >
+            <template v-slot:trigger>
+              <button class="button-unstyled">
+                <FAIcon icon="filter" />
+              </button>
+            </template>
+            <template v-slot:content>
+              <div class="dropdown-menu">
+                <button
+                  class="button-default dropdown-item"
+                  @click="setAccountType('local')"
+                >
+                  <span
+                    class="menu-checkbox -radio"
+                    :class="{ 'menu-checkbox-checked': !accountType.all && accountType.local }"
+                  />{{ $t('moderation.users.filter.local') }}
+                </button>
+                <button
+                  class="button-default dropdown-item"
+                  @click="setAccountType('external')"
+                >
+                  <span
+                    class="menu-checkbox -radio"
+                    :class="{ 'menu-checkbox-checked': !accountType.all && accountType.external }"
+                  />{{ $t('moderation.users.filter.external') }}
+                </button>
+                <button
+                  class="button-default dropdown-item"
+                  @click="setAccountType('all')"
+                >
+                  <span
+                    class="menu-checkbox -radio"
+                    :class="{ 'menu-checkbox-checked': accountType.all }"
+                  />{{ $t('moderation.users.filter.all') }}
+                </button>
+                <div
+                  role="separator"
+                  class="dropdown-divider"
+                />
+              </div>
+              <div class="dropdown-menu">
+                <button
+                  class="button-default dropdown-item"
+                  @click="setStatus('active')"
+                >
+                  <span
+                    class="menu-checkbox -radio"
+                    :class="{ 'menu-checkbox-checked': !status.all && status.active }"
+                  />{{ $t('moderation.users.filter.active') }}
+                </button>
+                <button
+                  class="button-default dropdown-item"
+                  @click="setStatus('deactivated')"
+                >
+                  <span
+                    class="menu-checkbox -radio"
+                    :class="{ 'menu-checkbox-checked': !status.all && status.deactivated }"
+                  />{{ $t('moderation.users.filter.deactivated') }}
+                </button>
+                <button
+                  class="button-default dropdown-item"
+                  @click="setStatus('pending')"
+                >
+                  <span
+                    class="menu-checkbox -radio"
+                    :class="{ 'menu-checkbox-checked': !status.all && status.pending }"
+                  />{{ $t('moderation.users.filter.pending') }}
+                </button>
+                <button
+                  class="button-default dropdown-item"
+                  @click="setStatus('unconfirmed')"
+                >
+                  <span
+                    class="menu-checkbox -radio"
+                    :class="{ 'menu-checkbox-checked': !status.all && status.unconfirmed }"
+                  />{{ $t('moderation.users.filter.unconfirmed') }}
+                </button>
+                <button
+                  class="button-default dropdown-item"
+                  @click="setStatus('all')"
+                >
+                  <span
+                    class="menu-checkbox -radio"
+                    :class="{ 'menu-checkbox-checked': status.all }"
+                  />{{ $t('moderation.users.filter.all') }}
+                </button>
+                <div
+                  role="separator"
+                  class="dropdown-divider"
+                />
+              </div>
+              <div class="dropdown-menu">
+                <button
+                  class="button-default dropdown-item"
+                  @click="setActorType('person')"
+                >
+                  <span
+                    class="menu-checkbox -radio"
+                    :class="{ 'menu-checkbox-checked': !actorType.all && actorType.person }"
+                  />{{ $t('moderation.users.filter.person') }}
+                </button>
+                <button
+                  class="button-default dropdown-item"
+                  @click="setActorType('bot')"
+                >
+                  <span
+                    class="menu-checkbox -radio"
+                    :class="{ 'menu-checkbox-checked': !actorType.all && actorType.bot }"
+                  />{{ $t('moderation.users.filter.bot') }}
+                </button>
+                <button
+                  class="button-default dropdown-item"
+                  @click="setActorType('application')"
+                >
+                  <span
+                    class="menu-checkbox -radio"
+                    :class="{ 'menu-checkbox-checked': !actorType.all && actorType.application }"
+                  />{{ $t('moderation.users.filter.application') }}
+                </button>
+                <button
+                  class="button-default dropdown-item"
+                  @click="setActorType('all')"
+                >
+                  <span
+                    class="menu-checkbox -radio"
+                    :class="{ 'menu-checkbox-checked': actorType.all }"
+                  />{{ $t('moderation.users.filter.all') }}
+                </button>
+                <div
+                  role="separator"
+                  class="dropdown-divider"
+                />
+              </div>
+            </template>
+          </Popover>
+        </div>
+      </div>
+      <div class="users">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./users_tab.js"></script>
+<style src="./users_tab.scss" lang="scss"></style>

src/i18n/en.json

@@ -294,7 +294,20 @@
             "tags": "Set post restrictions"
         },
         "statuses": "Posts",
-        "users": "Users"
+        "users": {
+            "users": "Users",
+            "filter": {
+                "active": "Active",
+                "all": "All accounts",
+                "application": "Application",
+                "bot": "Bot",
+                "deactivated": "Deactivated",
+                "external": "External",
+                "local": "Local",
+                "pending": "Pending Approval",
+                "person": "Person",
+                "unconfirmed": "Unconfirmed"
+          }
     },
     "nav": {
         "about": "About",