pleroma-fe/src/components/mod_modal/tabs/users_tab/users_tab.vue

<template>
  <div :label="$t('moderation.users.users')">
    <div class="content">
      <div class="users-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="search()"
            />
          </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.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.external }"
                  />{{ $t('moderation.users.filter.external') }}
                </button>
                <button
                  class="button-default dropdown-item"
                  @click="setAccountType()"
                >
                  <span
                    class="menu-checkbox -radio"
                    :class="{ 'menu-checkbox-checked': all(accountType) }"
                  />{{ $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.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.deactivated }"
                  />{{ $t('moderation.users.filter.deactivated') }}
                </button>
                <button
                  class="button-default dropdown-item"
                  @click="setStatus('need_approval')"
                >
                  <span
                    class="menu-checkbox -radio"
                    :class="{ 'menu-checkbox-checked': status.need_approval }"
                  />{{ $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.unconfirmed }"
                  />{{ $t('moderation.users.filter.unconfirmed') }}
                </button>
                <button
                  class="button-default dropdown-item"
                  @click="setStatus()"
                >
                  <span
                    class="menu-checkbox -radio"
                    :class="{ 'menu-checkbox-checked': all(status) }"
                  />{{ $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.Person }"
                  />{{ $t('moderation.users.filter.person') }}
                </button>
                <button
                  class="button-default dropdown-item"
                  @click="setActorType('Service')"
                >
                  <span
                    class="menu-checkbox -radio"
                    :class="{ 'menu-checkbox-checked': actorType.Service }"
                  />{{ $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.Application }"
                  />{{ $t('moderation.users.filter.application') }}
                </button>
                <button
                  class="button-default dropdown-item"
                  @click="setActorType()"
                >
                  <span
                    class="menu-checkbox -radio"
                    :class="{ 'menu-checkbox-checked': all(actorType) }"
                  />{{ $t('moderation.users.filter.all') }}
                </button>
              </div>
            </template>
          </Popover>
        </div>
      </div>
      <div class="users">
        <div v-if="users.length == 0 && page == 1">
          <p>{{ $t('moderation.users.no_results') }}</p>
        </div>
        <div
          v-for="user in users"
          :key="user.id"
          class="user"
        >
          <BasicUserCard :user="user" />
          <ModerationTools
            :user="user"
            class="user-moderation"
            extended="true"
          />
        </div>
      </div>
    </div>

    <teleport
      v-if="isActive"
      to="#navigation"
    >
      <div class="pagination-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>
<style src="./users_tab.scss" lang="scss"></style>