anonymous_github/public/partials/admin/users.htm

<div class="container page">
  <div class="row">
    <div class="border-bottom color-border-secondary py-3 w-100">
      <div class="d-flex flex-items-start w-100">
        <form class="w-100" aria-label="Users" accept-charset="UTF-8">
          <div class="d-flex flex-column flex-lg-row flex-auto">
            <div class="mb-1 mb-md-0 mr-md-3">
              <input
                type="search"
                id="search"
                class="form-control"
                aria-label="Find a user…"
                placeholder="Find a user…"
                autocomplete="off"
                ng-model="query.search"
              />
            </div>

            <div class="mb-1 mb-md-0 mr-md-3 col-2 input-group">
              <input
                type="number"
                id="page"
                class="form-control"
                autocomplete="off"
                ng-model="query.page"
                min="1"
                max="{{totalPage}}"
              />
              <div class="input-group-append">
                <span class="input-group-text">/{{totalPage}}</span>
              </div>
            </div>

            <div class="d-flex flex-wrap">
              <div class="dropdown mt-1 mt-lg-0 mr-1">
                <button
                  class="btn btn-secondary dropdown-toggle"
                  type="button"
                  id="dropdownSort"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  Sort
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownSort">
                  <h6 class="dropdown-header">Select order</h6>
                  <div class="form-check dropdown-item">
                    <input
                      class="form-check-input"
                      type="radio"
                      name="sort"
                      id="username"
                      value="username"
                      ng-model="query.sort"
                    />
                    <label class="form-check-label" for="username">
                      Username
                    </label>
                  </div>
                </div>
              </div>

              <div class="dropdown mt-1 mt-lg-0 mr-1">
                <button
                  class="btn btn-secondary dropdown-toggle"
                  type="button"
                  id="dropdownStatus"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  Status
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownStatus">
                  <h6 class="dropdown-header">Select status</h6>
                  <div class="form-check dropdown-item">
                    <input
                      class="form-check-input"
                      type="checkbox"
                      name="sort"
                      id="statusReady"
                      value="ready"
                      ng-model="query.ready"
                    />
                    <label class="form-check-label" for="statusReady">
                      Active
                    </label>
                  </div>
                  <div class="form-check dropdown-item">
                    <input
                      class="form-check-input"
                      type="checkbox"
                      name="sort"
                      id="statusExpired"
                      value="expired"
                      ng-model="query.expired"
                    />
                    <label class="form-check-label" for="statusExpired">
                      Expired
                    </label>
                  </div>
                  <div class="form-check dropdown-item">
                    <input
                      class="form-check-input"
                      type="checkbox"
                      name="sort"
                      id="statusExpired"
                      value="expired"
                      ng-model="query.preparing"
                    />
                    <label class="form-check-label" for="statusExpired">
                      Preparing
                    </label>
                  </div>
                  <div class="form-check dropdown-item">
                    <input
                      class="form-check-input"
                      type="checkbox"
                      name="sort"
                      id="statusRemoved"
                      value="removed"
                      ng-model="query.removed"
                    />
                    <label class="form-check-label" for="statusRemoved">
                      Removed
                    </label>
                  </div>
                  <div class="form-check dropdown-item">
                    <input
                      class="form-check-input"
                      type="checkbox"
                      name="sort"
                      id="statusRemoved"
                      value="removed"
                      ng-model="query.error"
                    />
                    <label class="form-check-label" for="statusRemoved">
                      Error
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    <ul class="p-0 m-0 w-100">
      <li
        class="col-12 d-flex px-0 py-3 border-bottom color-border-secondary"
        ng-class="{'expired': user.status == 'expired','removed': user.status == 'removed','error': user.status == 'error' }"
        ng-repeat="user in users| filter:userFiler| orderBy:orderBy as filteredUsers"
      >
        <div class="w-100">
          <div class="">
            <h3>
              {{user.username}}
              <span
                class="badge"
                ng-class="{'badge-warning': user.status == 'removed' || user.status == 'expired' ||  user.status == 'removing' || user.status == 'expiring', 'badge-info': user.status == 'preparing' || user.status == 'download', 'badge-success': user.status == 'active', 'badge-danger': user.status == 'error'}"
                ><span ng-bind="user.status | title"></span>
              </span>
            </h3>
          </div>
          <div class="color-text-secondary mt-2"></div>
        </div>
        <div class="d-flex">
          <div class="dropdown">
            <button
              class="btn black_border dropdown-toggle btn-sm"
              type="button"
              id="dropdownMenuButton"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Actions
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="/admin/user/{{user._id}}">
                <i class="far fa-edit" aria-hidden="true"></i> Edit
              </a>
              <a
                class="dropdown-item"
                href="#"
                ng-show="user.status == 'ready' || user.status == 'error'"
                ng-click="banUser(user)"
              >
                <i class="fas fa-sync"></i> Ban
              </a>
              <a
                class="dropdown-item"
                href="#"
                ng-show="user.status == 'removed'"
                ng-click="activateUser(user)"
              >
                <i class="fas fa-check-circle"></i>
                Activate
              </a>
            </div>
          </div>
        </div>
      </li>
      <li
        class="col-12 d-flex px-0 py-3 border-bottom color-border-secondary"
        ng-if="filteredUsers.length == 0"
      >
        There is no user to display.
      </li>
    </ul>
  </div>
</div>