quay/static/partials/team-view.html

<div class="resource-view team-view" resources="[orgResource, membersResource]"
     error-message="'No matching organization or team found'">
  <div class="page-content">
    <div class="cor-title">
      <span class="cor-title-link">
        <a class="back-link" href="/organization/{{ organization.name }}?tab=teams">
          <span class="avatar" size="24" data="organization.avatar" style="margin-right: 4px"></span>
          {{ organization.name }}
        </a>
      </span>
      <span class="cor-title-content">
        <span class="team-title">Team</span>
        <span class="avatar" data="team.avatar" size="32"></span>
        <span class="team-name">{{ teamname }}</span>
      </span>
    </div>

    <div class="co-main-content-panel">
      <div class="team-view-header">
        <div ng-show="canEditMembers" class="side-controls">
          <div class="hidden-xs">
          <button class="btn btn-primary"
                  id="showAddMember"
                  data-title="Add Team Member"
                  data-content-template="/static/directives/team-view-add.html"
                  data-placement="bottom-right"
                  bs-popover="bs-popover">
            <i class="fa fa-plus"></i>
            Add Team Member
          </button>
          </div>
        </div>

        <div class="description markdown-input" content="team.description"
             can-write="organization.is_admin"
             content-changed="updateForDescription"
             field-title="'team description'"></div>
      </div>

      <div class="empty" ng-if="!members.length">
        <div class="empty-primary-msg">This team has no members.</div>
        <div class="empty-secondary-msg">
          Click the "Add Team Member" button above to add or invite team members.
        </div>
      </div>

      <table class="co-table no-lines" ng-if="members.length">
        <!-- Team Members -->
        <tr class="co-table-header-row"
            ng-if="(members | filter: filterFunction(false, false)).length">
          <td colspan="3"><i class="fa fa-user"></i> Team Members</td>
        </tr>

        <tr class="indented-row"
            ng-repeat="member in members | filter: filterFunction(false, false) | orderBy: 'name'">
          <td class="user entity">
            <span class="entity-reference" entity="member" namespace="organization.name"
                  show-avatar="true" avatar-size="24"></span>
          </td>
          <td>
            <span class="cor-options-menu" ng-if="canEditMembers">
              <span class="cor-option" option-click="removeMember(member.name)">
                <i class="fa fa-times"></i> Remove {{ member.name }}
              </span>
            </span>
          </td>
        </tr>

        <!-- Robot Accounts -->
        <tr class="co-table-header-row"
            ng-if="(members | filter: filterFunction(false, true)).length">
          <td colspan="3"><i class="fa ci-robot"></i> Robot Accounts</td>
        </tr>

        <tr class="indented-row"
            ng-repeat="member in members | filter: filterFunction(false, true) | orderBy: 'name'">
          <td class="user entity">
            <span class="entity-reference" entity="member" namespace="organization.name"></span>
          </td>
          <td>
            <span class="cor-options-menu" ng-if="canEditMembers">
              <span class="cor-option" option-click="removeMember(member.name)">
                <i class="fa fa-times"></i> Remove {{ member.name }}
              </span>
            </span>
          </td>
        </tr>

        <!-- Invitations -->
        <tr class="co-table-header-row"
            ng-if="(members | filter: filterFunction(true, false)).length">
          <td colspan="3"><i class="fa ci-invite"></i> Invited to Join</td>
        </tr>

        <tr class="indented-row"
            ng-repeat="member in members | filter: filterFunction(true, false) | orderBy: 'name'">
          <td class="user entity">
            <span ng-if="member.kind != 'invite'">
              <span class="entity-reference" entity="member" namespace="organization.name" show-avatar="true" avatar-size="24"></span>
            </span>
            <span class="invite-listing" ng-if="member.kind == 'invite'">
              <span class="avatar" size="24" data="member.avatar" style="margin-right: 6px;"></span>
              {{ member.email }}
            </span>
          </td>
          <td>
            <span class="cor-options-menu" ng-if="canEditMembers">
              <span class="cor-option" option-click="revokeInvite(member)">
                <i class="fa fa-times"></i> Revoke invite
              </span>
            </span>
          </td>
        </tr>
      </table>

      <div ng-show="canEditMembers">
        <div ng-if-media="'(max-width: 767px)'">
          <div ng-include="'/static/directives/team-view-add.html'"></div>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- Modal message dialog -->
<div class="modal fade" id="cannotChangeTeamModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Cannot change team</h4>
      </div>
      <div class="modal-body">
        You do not have permission to change properties of this team.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Modal message dialog -->
<div class="modal fade" id="cannotChangeMembersModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Cannot change members</h4>
      </div>
      <div class="modal-body">
        You do not have permission to change the members of this team.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->