User Edit UI

user-line.component.html

<!-- Uneditable User Line Component -->
<div class="card user-line-card" *ngIf="!editing">
  <p id="email" class="email"><strong>{{user.email}}</strong></p>

  <p id="role">{{role}}</p>

  <div id="buttons_{{user.id}}">
    <a (click)="edit()" id="edit_{{user.id}}"><img src="../../../assets/empty-pencil.png" class="buttonImage"/></a>
  </div>
</div>
<!-- Editable User Line Component -->
<div class="card user-line-card" *ngIf="editing">
  <p id="email_{{user.id}}" placeholder="Email Address" class="email editable" contenteditable="true"><strong>{{user.email}}</strong></p>

  <select id="selectRole_{{user.id}}">
    <option *ngFor="let roleOption of roles" [value]="roleOption" [attr.selected]="role == roleOption ? true : null">{{roleOption}}</option>
  </select>

  <div class="buttons">
    <button id="saveButton" class="btn-primary" (click)="save(user.id)">Save</button>
    <button id="cancelButton" class="btn-secondary" (click)="cancel(user.id)">Cancel</button>
    <button id="deleteButton" class="btn-delete" (click)="deleteModal.open()" *ngIf="user.id != -1">Delete</button>
  </div>
</div>

<ngx-smart-modal class="modal" #deleteModal identifier="deleteModal">
  <h2>Confirm User Deletion</h2>
  <p>Are you sure you want to delete <strong>{{user.email}}</strong>?</p>

  <button class="btn-delete" (click)="deleteUser(user.id)">Yes, Delete</button>
</ngx-smart-modal>

user-line.component.scss

.user-line-card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px 5px 20px;
  margin: 0;
  margin-bottom: 10px;
}

p {
  font-family: 'Open Sans', sans-serif;
  width: 200px;
}

.email {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

.buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.buttonImage {
  height: 30px;
  cursor: pointer;
}

.editable {
  padding: 0;
  outline: none;
  border-bottom: 2px solid #979797;
}

.editable:focus {
  padding: 0;
  outline: none;
  border-bottom: 2px solid #269e2c;
}

.modal {
  text-align: center;
}

user-line.component.ts

import { Component, OnInit, Input } from '@angular/core';
import UserService from 'src/app/services/user.service';
import { User } from '../../models/User';
import { Role } from 'src/app/models/Role';

@Component({
  selector: 'app-user-line',
  templateUrl: './user-line.component.html',
  styleUrls: ['./user-line.component.scss']
})
export class UserLineComponent implements OnInit {

  // brings in each response from the home component
  @Input() user: User;
  // brings in possible roles
  @Input() roles;
  editing = false;
  role;

  // Will be pulled from API when authentication is implemented
  currentUserId = 1;

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.role = Role[this.user.userRole];

    // If it is a new user, state should be editable
    if (this.user.id == -1) {
      this.editing = true;
    }
  }

  // delete user from system
  deleteUser(id) {
    // simply cancel if its a new user (can't be deleted)
    if (id == -1) {
      this.cancel(id);
    } else {
      this.userService.deleteUser(id, this.currentUserId).subscribe(complete => {
        location.reload();
      });
    }
  }

  edit(id) {
    this.editing = true;
  }

  cancel(id) {
    // If it is a new user that is being cancelled, must reload the page to remove the card
    if (id == -1) {
      location.reload();
    } else {
      this.editing = false;
    }
  }

  // Used to validate text to conform to an email address
  validateEmail(email) {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
  }

  // Saves users
  save(id) {
    const email = document.getElementById(`email_${this.user.id}`).innerText;
    // Validate email address
    if (this.validateEmail(email)) {
      this.user.email = email;
      const selectedRole = (<HTMLSelectElement>document.getElementById(`selectRole_${this.user.id}`)).value;
      this.user.userRole = Object.values(Role).indexOf(selectedRole);

      this.role = selectedRole;
      this.editing = false;

      // If the user is new, save it with undefined id
      if (id == -1) {
        this.userService.addUser(this.user, this.currentUserId).subscribe(complete => {
          location.reload();
        });
      // Otherwise update the user and maintain their id
      } else {
        this.userService.updateUser(this.user, this.currentUserId).subscribe(complete => {
          location.reload();
        });
      }
    } else {
      window.alert("Please enter a valid email address.")
    }
  }

}