energylink/public/app/features/org/partials/orgUsers.html

<page-header model="ctrl.navModel"></page-header>

<div class="page-container page-body">
  <div class="page-action-bar">
    <label class="gf-form gf-form--has-input-icon">
      <input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" placeholder="Filter by username or email" />
      <i class="gf-form-input-icon fa fa-search"></i>
    </label>

    <div ng-if="ctrl.pendingInvites.length" style="margin-left: 1rem">
      <button class="btn toggle-btn active" ng-if="!ctrl.showInvites">
        Users
      </button><button class="btn toggle-btn" ng-if="!ctrl.showInvites" ng-click="ctrl.showInvites = true">
        Pending Invites ({{ctrl.pendingInvites.length}})
      </button>
      <button class="btn toggle-btn" ng-if="ctrl.showInvites" ng-click="ctrl.showInvites = false">
        Users
      </button><button class="btn toggle-btn active" ng-if="ctrl.showInvites">
        Pending Invites ({{ctrl.pendingInvites.length}})
      </button>
    </div>

    <div class="page-action-bar__spacer"></div>

    <a class="btn btn-success" href="org/users/invite" ng-show="ctrl.canInvite">
      <i class="fa fa-plus"></i>
      <span>Invite</span>
    </a>

    <a class="btn btn-success" ng-href="{{ctrl.externalUserMngLinkUrl}}" target="_blank" ng-if="ctrl.externalUserMngLinkUrl">
      <i class="fa fa-external-link-square"></i>
      {{ctrl.externalUserMngLinkName}}
    </a>
  </div>

  <div class="grafana-info-box" ng-if="ctrl.externalUserMngInfo">
    <span ng-bind-html="ctrl.externalUserMngInfo"></span>
  </div>

  <div ng-hide="ctrl.showInvites">
    <table class="filter-table form-inline">
      <thead>
        <tr>
          <th></th>
          <th>Login</th>
          <th>Email</th>
          <th>
            Seen
            <tip>Time since user was seen using Grafana</tip>
          </th>
          <th>Role</th>
          <th style="width: 34px;"></th>
        </tr>
      </thead>
      <tr ng-repeat="user in ctrl.users">
        <td class="width-4 text-center">
          <img class="filter-table__avatar" ng-src="{{user.avatarUrl}}"></img>
        </td>
        <td>{{user.login}}</td>
        <td><span class="ellipsis">{{user.email}}</span></td>
        <td>{{user.lastSeenAtAge}}</td>
        <td>
          <div class="gf-form-select-wrapper width-12">
            <select type="text" ng-model="user.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Admin']" ng-change="ctrl.updateOrgUser(user)">
            </select>
          </div>
        </td>
        <td>
          <a ng-click="ctrl.removeUser(user)" class="btn btn-danger btn-mini">
            <i class="fa fa-remove"></i>
          </a>
        </td>
      </tr>
    </table>
  </div>

  <div ng-if="ctrl.showInvites">
    <table class="filter-table form-inline">
      <thead>
        <tr>
          <th>Email</th>
          <th>Name</th>
          <th></th>
          <th style="width: 34px;"></th>
        </tr>
      </thead>
      <tr ng-repeat="invite in ctrl.pendingInvites">
        <td>{{invite.email}}</td>
        <td>{{invite.name}}</td>
        <td class="text-right">
          <button class="btn btn-inverse btn-mini" clipboard-button="ctrl.getInviteUrl(invite)" ng-click="ctrl.copyInviteToClipboard($event)">
            <i class="fa fa-clipboard"></i> Copy Invite
          </button>
          &nbsp;
        </td>
        <td>
          <button class="btn btn-danger btn-mini" ng-click="ctrl.revokeInvite(invite, $event)">
            <i class="fa fa-remove"></i>
          </button>
        </td>
      </tr>
    </table>
  </div>
</div>