Action Info Toggle

action.component.html

<div class="card">
  <div class="row">
    <div class="row">
      <p class="email">{{action.userEmail}}</p>
      <p>{{actionType}}</p>
    </div>
    <div class="row">
      <p>{{timestamp}}</p>
      <a (click)="toggleMoreInfo()" *ngIf="oldData || newData">{{showMoreInfo ? "Less Info" : "More Info"}}</a>
    </div>
  </div>
  <div class="moreInfo" *ngIf="showMoreInfo">
    <pre semanticDiff [left]="oldData" [right]="newData"></pre>
  </div>
</div>

action.component.scss

p {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0px 10px 0px 0px;
}

a {
  margin: 0;
  font-weight: 700;
  color: #269e2c;
}

a:hover {
  font-weight: 700;
  color: darkgreen;
  text-decoration: underline;
  cursor: pointer;
}

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

.card {
  margin-bottom: 10px;
}

.row {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

action.component.ts

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

@Component({
  selector: 'app-action',
  templateUrl: './action.component.html',
  styleUrls: ['./action.component.scss']
})

export class ActionComponent implements OnInit {
  // brings in each action from wherever
  @Input() action: Action;
  oldData = "";
  newData = "";
  timestamp = "";
  actionType = "";
  showMoreInfo = false;

  constructor(private userService: UserService) { }

  ngOnInit() {
    // Parse if data is string (remnants of old or invalid history data)
    if (this.action.oldData && typeof this.action.oldData === 'string') {
      this.action.oldData = JSON.parse(this.action.oldData);
    }
    if (this.action.newData && typeof this.action.newData === 'string') {
      this.action.newData = JSON.parse(this.action.newData);
    }
    // Format old and new action data (if possible) so it's presentable to the user
    this.oldData = this.formatActionData(this.action.actionType, this.action.oldData);
    this.newData = this.formatActionData(this.action.actionType, this.action.newData);
    this.actionType = ActionType[this.action.actionType];

    this.timestamp = this.action.timestamp.toLocaleString();
  }

  toggleMoreInfo() {
    this.showMoreInfo = !this.showMoreInfo;
  }

  // Formats user role based on enum
  formatUserRole(userRole) {
    switch(userRole) {
      case 0:
        userRole = "Associate";
        break;
      case 1:
        userRole = "Administrator";
        break;
      // By default don't expose anything
      default:
        userRole = "";
        break;
    }
    return userRole;
  }

  // Parses keywords into comma seperated list
  keywordParser(keywordList) {
    let keywords = "";
    if (keywordList) {
      keywords = keywordList[0].Text;
    }
    for (let i = 1; i < keywordList.length; i++) {
      keywords = keywords + ", " + keywordList[i].Text;
    }
    return keywords;
  }

  // Returns string of the formatted JSON action
  formatActionData(typeOfAction, actionData) {
    switch(typeOfAction) {
      // Add, edit, or delete a pre-written response
      case 0:
      case 1:
      case 2:
        if (!actionData || !actionData.Title || !actionData.Text || !actionData.Reference || !actionData.KeywordList || !actionData.KeywordList.Subject || !actionData.KeywordList.Topic || !actionData.KeywordList.Keywords) {
         return null;
        }
        return "Title: " + actionData.Title + "\nText: " + actionData.Text + "\nSubject: " + actionData.KeywordList.Subject + "\nTopic: " + actionData.KeywordList.Topic + "\nOther Keywords: " + this.keywordParser(actionData.KeywordList.Keywords) + "\nReference: " + actionData.Reference;
      // Add, edit, or delete a user
    	case 3:
      case 4:
      case 5:
        if (!actionData || !actionData.Email) {
          return null;
        }
        return "Email: " + actionData.Email + "\nUser Role: " + this.formatUserRole(actionData.UserRole);
      // By default don't expose anything
      default:
        return null;
    }
  }
}