abstruse/src/app/components/app-team/app-team.component.html

Abstruse CI

<app-header></app-header>

<nav class="nav sub-nav">
  <div class="container">
    <div class="nav-left">
      <span class="nav-item">
        <h1>Team Management</h1>
      </span>
    </div>
    <div class="nav-center">

    </div>
    <div class="nav-right">
      <button type="button" class="button w200" (click)="showAddUser()" name="btn-addUser" [disabled]="addUser || !user.admin">
        <i class="ionicon ion-person-add"></i>
        Add User
      </button>
    </div>
  </div>
</nav>

<div class="container">
  <div class="columns">
    <div class="column is-12">
      <div class="content">
        <div *ngIf="loading">
          <img src="/assets/images/icons/flickr.svg" class="main-loader">
        </div>

        <div class="columns is-multiline" *ngIf="!loading">
          <div class="column is-12" *ngIf="!users || !users.length">
            <div class="notification is-info">
              No users found.
            </div>
          </div>

          <div class="column is-12" *ngIf="users && users.length">
            <div class="columns is-multiline">
              <div class="column is-4" *ngFor="let user of users; let i = index;">
                <div class="team-user-item">
                  <div class="user-item-avatar-container">
                    <img [src]="user.avatarUrl">
                  </div>
                  <div class="user-item-data has-text-centered">
                    <h2>{{ user.fullname }}</h2>
                    <h3>{{ user.email }}</h3>
                    <p>{{ user.created_at | date:'medium' }}</p>
                  </div>
                  <div class="user-item-data has-text-centered" name="user-type">
                    <h3 *ngIf="user.admin">admin</h3>
                    <h3 *ngIf="!user.admin">user</h3>
                  </div>
                  <div class="user-item-buttons">
                    <button type="button" class="button edit-user-button" (click)="goToUser(user.id)">Edit Profile</button>
                  </div>
                </div>
              </div>
              <div class="column is-4" *ngIf="addUser">
                <form class="form" (ngSubmit)="addNewUser($event)" #addForm="ngForm">
                  <h4>Add New User</h4>
                  <div class="message red" *ngIf="error">
                    <p>
                      <i class="ion ion-close-round"></i>
                      Adding user failed.
                    </p>
                  </div>
                  <div class="message green" *ngIf="success">
                    <p>
                      <i class="ion ion-checkmark-round"></i>
                      User successfully added.
                    </p>
                  </div>
                  <div class="form-field">
                    <label class="form-label">Email (Username)</label>
                    <input class="form-input" type="text" placeholder="Email" name="email" required [(ngModel)]="userForm.email">
                  </div>
                  <div class="form-field">
                    <label class="form-label">Full Name</label>
                    <input class="form-input" type="text" placeholder="Full Name" name="fullname" required [(ngModel)]="userForm.fullname">
                  </div>
                  <div class="form-field">
                    <label class="form-label">New Password</label>
                    <input class="form-input" type="password" placeholder="New Password" name="password" required [(ngModel)]="userForm.password">
                  </div>
                  <div class="form-field">
                    <label class="form-label">Repeat New Password</label>
                    <input class="form-input" type="password" placeholder="Repeat New Password" name="repeat_password" required validateEqual="password" [(ngModel)]="userForm.confirmPassword">
                  </div>
                  <div class="form-field">
                    <label class="form-label">Admin</label>
                    <app-selectbox [data]="yesNoOptions" name="admin" [(ngModel)]="userForm.admin" required></app-selectbox>
                  </div>
                  <div class="user-item-buttons">
                    <button type="button" class="button red" (click)="resetForm()">Cancel</button>
                    <button type="submit" class="button" name="btn-saveNewUser" [disabled]="!addForm.form.valid" required>Add New User</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>