Hello guys,
in the code below everything works fine except that "{{
activity.assignedToName }}" is loading slower than the other fields. By
this I mean when I initially open the page everything is loading in same
speed but the place of assignedToName is white for 1 additional second. Is
there a fix for that? Thanks in advance!
import { Component } from '@angular/core';
import { first } from 'rxjs/operators';
import { ActivityHistory, AcceptActivityHistory } from
'../../interfaces/activity-history';
import { User } from '../../interfaces/user';
import { ActivityHistoriesService } from
'../../services/activity-histories.service';
import { UsersService } from '../../services/users.service';
@Component({
selector: 'app-activity-histories',
templateUrl: './activity-histories.component.html',
styleUrls: ['./activity-histories.component.css']
})
export class ActivityHistoriesComponent {
activityHistories: ActivityHistory[];
currentUser: User;
constructor(private activityHistoriesService: ActivityHistoriesService,
private usersService: UsersService) {
this.getActivityHistories();
this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
}
getActivityHistories() {
this.activityHistoriesService.getActivityHistories().subscribe(result =>
{
this.activityHistories = this.getAssignedToInfo(result);
}, error => console.error(error));
}
deleteActivityHistory(id: number) {
let ans = confirm(`Do you want to delete activity #${id}`);
if (ans) {
this.activityHistoriesService.deleteActivityHistory(id).subscribe(()
=> {
this.getActivityHistories();
}, error => console.log(error));
}
}
getAssignedToInfo(activities: ActivityHistory[]): ActivityHistory[] {
for (let i = 0; i < activities.length; i++) {
if (activities[i].assignedTo) {
this.usersService.getUserById(activities[i].assignedTo)
.pipe(first())
.subscribe(result => {
activities[i].assignedToName = result.email;
}, error => console.log(error));
}
}
return activities;
}
acceptActivityHistory(id: number) {
let activity: AcceptActivityHistory = {
id: id,
assignedTo: this.currentUser.id
}
this.activityHistoriesService.acceptActivityHistory(activity).subscribe
(() => {
this.getActivityHistories();
}, error => console.log(error));
}
}
<h1>Activity Histories</h1>
<p *ngIf="!activityHistories"><em>Loading...</em></p>
<p><a [routerLink]='["add"]'>Create New</a></p>
<table class='table activityTable' *ngIf="activityHistories">
<thead>
<tr>
<th>Subject</th>
<th>Created</th>
<th>Last Updated</th>
<th style='text-align: center'>Assigned To</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let activity of activityHistories">
<td>{{ activity.subject }}</td>
<td>{{ activity.createdAt | date:'dd MMM yyyy - hh:mm a' }}</td>
<td>{{ activity.updatedAt | date:'dd MMM yyyy - hh:mm a' }}</td>
<td style='text-align: center'>
<div [hidden]='activity.assignedTo'>
<button type='button' class='btn btn-default' (click)=
'acceptActivityHistory(activity.id)'>Accept</button>
</div>
<div [hidden]='!activity.assignedTo'>
{{ activity.assignedTo == currentUser.id ? 'Yours' :
activity.assignedToName }}
</div>
</td>
<td style='text-align: center'><a [routerLink]='["edit", activity.id]'
>Edit</a> | <a [routerLink]='' (click)='deleteActivityHistory(activity.id)'>
Delete</a></td>
</tr>
</tbody>
</table>
interface file:
export interface ActivityHistory {
id: number;
companyId: number;
subject: string;
assignedTo: number;
assignedToName: string;
createdAt: string;
updatedAt: string;
}
export interface AcceptActivityHistory {
id: number;
assignedTo: number;
}
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
