091124/full conversation and revisions page

src/dotnet/APIView/ClientSPA/src/app/_components/api-revision-options/api-revision-options.component.spec.ts

@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ApiRevisionOptionsComponent } from './api-revision-options.component';
 import { ActivatedRoute, convertToParamMap } from '@angular/router';
-import { ReviewPageModule } from 'src/app/_modules/review-page/review-page.module';
+import { ReviewPageModule } from 'src/app/_modules/review-page.module';
 import { SharedAppModule } from 'src/app/_modules/shared/shared-app.module';
 
 describe('ApiRevisionOptionsComponent', () => {

src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.spec.ts

@@ -5,7 +5,7 @@ import { CommentsService } from 'src/app/_services/comments/comments.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ActivatedRoute, convertToParamMap } from '@angular/router';
 import { SharedAppModule } from 'src/app/_modules/shared/shared-app.module';
-import { ReviewPageModule } from 'src/app/_modules/review-page/review-page.module';
+import { ReviewPageModule } from 'src/app/_modules/review-page.module';
 import { MessageService } from 'primeng/api';
 
 describe('CodePanelComponent', () => {

src/dotnet/APIView/ClientSPA/src/app/_components/conversation-page/conversation-page.component.html

@@ -0,0 +1,11 @@
+<app-review-page-layout
+    [review]="review"
+    [sideMenu]="sideMenu">
+    <div class="conversation-panel overflow-auto border rounded py-3">
+        <app-conversations
+            [apiRevisions]="apiRevisions"
+            [comments]="comments"
+            [userProfile]="userProfile">
+        </app-conversations>
+    </div>
+</app-review-page-layout>

src/dotnet/APIView/ClientSPA/src/app/_components/conversation-page/conversation-page.component.scss

@@ -0,0 +1,6 @@
+:host ::ng-deep {
+    .conversation-panel{
+        height: calc(100vh - 130px);
+        background-color: var(--base-fg-color);
+    }
+}

src/dotnet/APIView/ClientSPA/src/app/_components/conversation-page/conversation-page.component.spec.ts

@@ -0,0 +1,56 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConversationPageComponent } from './conversation-page.component';
+import { ActivatedRoute, convertToParamMap } from '@angular/router';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ReviewPageLayoutComponent } from '../shared/review-page-layout/review-page-layout.component';
+import { ConversationsComponent } from '../conversations/conversations.component';
+import { NavBarComponent } from '../shared/nav-bar/nav-bar.component';
+import { ReviewInfoComponent } from '../shared/review-info/review-info.component';
+import { MenuModule } from 'primeng/menu';
+import { FooterComponent } from '../shared/footer/footer.component';
+import { MenubarModule } from 'primeng/menubar';
+import { LanguageNamesPipe } from 'src/app/_pipes/language-names.pipe';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('ConversationPageComponent', () => {
+  let component: ConversationPageComponent;
+  let fixture: ComponentFixture<ConversationPageComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        ConversationPageComponent,
+        ConversationsComponent,
+        NavBarComponent,
+        FooterComponent,
+        ReviewInfoComponent,
+        ReviewPageLayoutComponent,
+        LanguageNamesPipe
+      ],
+      imports: [
+        BrowserAnimationsModule,
+        HttpClientTestingModule,
+        MenuModule,
+        MenubarModule
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              paramMap: convertToParamMap({ reviewId: 'test' })
+            }
+          }
+        }
+      ]
+    });
+    fixture = TestBed.createComponent(ConversationPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/dotnet/APIView/ClientSPA/src/app/_components/conversation-page/conversation-page.component.ts

@@ -0,0 +1,91 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MenuItem } from 'primeng/api';
+import { Subject, takeUntil } from 'rxjs';
+import { REVIEW_ID_ROUTE_PARAM } from 'src/app/_helpers/common-helpers';
+import { CommentItemModel } from 'src/app/_models/commentItemModel';
+import { Review } from 'src/app/_models/review';
+import { APIRevision } from 'src/app/_models/revision';
+import { UserProfile } from 'src/app/_models/userProfile';
+import { CommentsService } from 'src/app/_services/comments/comments.service';
+import { ReviewsService } from 'src/app/_services/reviews/reviews.service';
+import { RevisionsService } from 'src/app/_services/revisions/revisions.service';
+import { UserProfileService } from 'src/app/_services/user-profile/user-profile.service';
+
+@Component({
+  selector: 'app-conversation-page',
+  templateUrl: './conversation-page.component.html',
+  styleUrls: ['./conversation-page.component.scss']
+})
+export class ConversationPageComponent {
+  reviewId : string | null = null;
+  review : Review | undefined = undefined;
+  userProfile : UserProfile | undefined;
+  sideMenu: MenuItem[] | undefined;
+  comments: CommentItemModel[] = [];
+  apiRevisions: APIRevision[] = [];
+
+  apiRevisionPageSize = 50;
+
+  private destroy$ = new Subject<void>();
+
+  constructor(private route: ActivatedRoute, private reviewsService: ReviewsService, private userProfileService: UserProfileService,
+    private apiRevisionsService: RevisionsService, private commentsService: CommentsService
+  ) {}
+
+  ngOnInit() {
+    this.userProfileService.getUserProfile().subscribe(
+      (userProfile : any) => {
+        this.userProfile = userProfile;
+      }
+    );
+    this.reviewId = this.route.snapshot.paramMap.get(REVIEW_ID_ROUTE_PARAM);
+    this.createSideMenu();
+    this.loadReview(this.reviewId!);
+    this.loadAPIRevisions(0, this.apiRevisionPageSize);
+    this.loadComments();
+  }
+
+  createSideMenu() {
+    this.sideMenu = [
+      {
+        icon: 'bi bi-braces',
+        tooltip: 'API',
+        command: () => this.openLatestAPIReivisonForReview()
+      }
+    ];
+  }
+
+  loadReview(reviewId: string) {
+    this.reviewsService.getReview(reviewId)
+      .pipe(takeUntil(this.destroy$)).subscribe({
+        next: (review: Review) => {
+          this.review = review;
+        }
+    });
+  }
+
+  loadAPIRevisions(noOfItemsRead : number, pageSize: number) {
+    this.apiRevisionsService.getAPIRevisions(noOfItemsRead, pageSize, this.reviewId!, undefined, undefined, 
+      undefined, "createdOn", undefined, undefined, undefined, true)
+      .pipe(takeUntil(this.destroy$)).subscribe({
+        next: (response: any) => {
+          this.apiRevisions = response.result;
+        }
+    });
+  }
+
+  loadComments() {
+    this.commentsService.getComments(this.reviewId!)
+      .pipe(takeUntil(this.destroy$)).subscribe({
+        next: (comments: CommentItemModel[]) => {
+          this.comments = comments;
+        }
+    });
+  }
+
+  openLatestAPIReivisonForReview() {
+    const apiRevision = this.apiRevisions.find(x => x.apiRevisionType === "Automatic") ?? this.apiRevisions[0];
+    this.apiRevisionsService.openAPIRevisionPage(apiRevision, this.route);
+  }
+}

src/dotnet/APIView/ClientSPA/src/app/_components/conversations/conversations.component.html

@@ -1,7 +1,8 @@
-<h4>Conversations</h4>
-<p-divider />
-<p *ngIf="commentThreads.size === 0">This Review has no comments</p>
-<p-timeline [value]="getAPIRevisionWithComments()">
+<div *ngIf="isLoading" class="spinner-border m-3" role="status">
+    <span class="visually-hidden">Loading...</span>
+</div>
+<p *ngIf="!isLoading && (getAPIRevisionWithComments()).length == 0" class="ms-4">This Review has no comments</p>
+<p-timeline *ngIf="!isLoading" [value]="getAPIRevisionWithComments()">
     <ng-template pTemplate="marker" let-apiRevision>
         <i class="bi bi-clock-history"></i>
     </ng-template>

src/dotnet/APIView/ClientSPA/src/app/_components/conversations/conversations.component.spec.ts

@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ConversationsComponent } from './conversations.component';
 import { SharedAppModule } from 'src/app/_modules/shared/shared-app.module';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { ReviewPageModule } from 'src/app/_modules/review-page/review-page.module';
+import { ReviewPageModule } from 'src/app/_modules/review-page.module';
 import { APIRevision } from 'src/app/_models/revision';
 import { CommentItemModel } from 'src/app/_models/commentItemModel';
 import { ActivatedRoute, convertToParamMap } from '@angular/router';

src/dotnet/APIView/ClientSPA/src/app/_components/conversations/conversations.component.ts

@@ -28,6 +28,10 @@ export class ConversationsComponent implements OnChanges {
   commentThreads: Map<string, CodePanelRowData[]> = new Map<string, CodePanelRowData[]>();
   numberOfActiveThreads: number = 0;
 
+  apiRevisionsLoaded = false;
+  commentsLoaded = false;
+  isLoading: boolean = true;
+
   destroy$ = new Subject<void>();
 
   constructor(private commentsService: CommentsService, private signalRService: SignalRService) { }
@@ -37,62 +41,76 @@ export class ConversationsComponent implements OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['apiRevisions'] || changes['comments']) {
-      if (this.apiRevisions.length > 0 && this.comments.length > 0) {
-        this.createCommentThreads();
-      }
+    if (changes['apiRevisions']) {
+      this.apiRevisionsLoaded = true;
+    }
+
+    if (changes['comments']) {
+      this.commentsLoaded = true;
+    }
+
+    if (this.apiRevisionsLoaded && this.commentsLoaded) {
+      this.createCommentThreads();
     }
   }
 
   createCommentThreads() {
-    this.commentThreads = new Map<string, CodePanelRowData[]>();
-    this.numberOfActiveThreads = 0;
-    const apiRevisionInOrder = this.apiRevisions.sort((a, b) => (new Date(b.createdOn) as any) - (new Date(a.createdOn) as any));
-    const groupedComments = this.comments
-      .reduce((acc: { [key: string]: CommentItemModel[] }, comment) => {
-        const key = comment.elementId;
-        if (!acc[key]) {
-          acc[key] = [];
-        }
-        acc[key].push(comment);
-        return acc;
-      }, {});
+    if (this.apiRevisions.length > 0 && this.comments.length > 0) {
+      this.commentThreads = new Map<string, CodePanelRowData[]>();
+      this.numberOfActiveThreads = 0;
+      const apiRevisionInOrder = this.apiRevisions.sort((a, b) => (new Date(b.createdOn) as any) - (new Date(a.createdOn) as any));
+      const groupedComments = this.comments
+        .reduce((acc: { [key: string]: CommentItemModel[] }, comment) => {
+          const key = comment.elementId;
+          if (!acc[key]) {
+            acc[key] = [];
+          }
+          acc[key].push(comment);
+          return acc;
+        }, {});
 
-    for (const elementId in groupedComments) {
-      if (groupedComments.hasOwnProperty(elementId)) {
-        const comments = groupedComments[elementId];
-        const apiRevisionIds = comments.map(c => c.apiRevisionId);
+      for (const elementId in groupedComments) {
+        if (groupedComments.hasOwnProperty(elementId)) {
+          const comments = groupedComments[elementId];
+          const apiRevisionIds = comments.map(c => c.apiRevisionId);
 
-        let apiRevisionPostion = Number.MAX_SAFE_INTEGER;
+          let apiRevisionPostion = Number.MAX_SAFE_INTEGER;
 
-        for (const apiRevisionId of apiRevisionIds) {
-          const apiRevisionIdPosition = apiRevisionInOrder.findIndex(apiRevision => apiRevision.id === apiRevisionId);
-          if (apiRevisionIdPosition >= 0 && apiRevisionIdPosition < apiRevisionPostion) {
-            apiRevisionPostion = apiRevisionIdPosition;
+          for (const apiRevisionId of apiRevisionIds) {
+            const apiRevisionIdPosition = apiRevisionInOrder.findIndex(apiRevision => apiRevision.id === apiRevisionId);
+            if (apiRevisionIdPosition >= 0 && apiRevisionIdPosition < apiRevisionPostion) {
+              apiRevisionPostion = apiRevisionIdPosition;
+            }
           }
-        }
 
-        if (apiRevisionPostion >= 0 && apiRevisionPostion < apiRevisionInOrder.length) {
-          const apiRevisionIdForThread = apiRevisionInOrder[apiRevisionPostion].id;
-          const codePanelRowData = new CodePanelRowData();
-          codePanelRowData.type = CodePanelRowDatatype.CommentThread;
-          codePanelRowData.comments = comments;
-          codePanelRowData.isResolvedCommentThread = comments.some(c => c.isResolved);
+          if (apiRevisionPostion >= 0 && apiRevisionPostion < apiRevisionInOrder.length) {
+            const apiRevisionIdForThread = apiRevisionInOrder[apiRevisionPostion].id;
+            const codePanelRowData = new CodePanelRowData();
+            codePanelRowData.type = CodePanelRowDatatype.CommentThread;
+            codePanelRowData.comments = comments;
+            codePanelRowData.isResolvedCommentThread = comments.some(c => c.isResolved);
 
-          if (!codePanelRowData.isResolvedCommentThread) {
-            this.numberOfActiveThreads++;
-          }
+            if (!codePanelRowData.isResolvedCommentThread) {
+              this.numberOfActiveThreads++;
+            }
 
-          if (this.commentThreads.has(apiRevisionIdForThread)) {
-            this.commentThreads.get(apiRevisionIdForThread)?.push(codePanelRowData);
-          }
-          else {
-            this.commentThreads.set(apiRevisionIdForThread, [codePanelRowData]);
+            if (this.commentThreads.has(apiRevisionIdForThread)) {
+              this.commentThreads.get(apiRevisionIdForThread)?.push(codePanelRowData);
+            }
+            else {
+              this.commentThreads.set(apiRevisionIdForThread, [codePanelRowData]);
+            }
           }
         }
       }
+      this.numberOfActiveThreadsEmitter.emit(this.numberOfActiveThreads);
+      this.isLoading = false;
+    }
+    else if (this.apiRevisions.length > 0 && this.comments.length === 0) {
+      setTimeout(() => {
+        this.isLoading = false;
+      }, 1000);
     }
-    this.numberOfActiveThreadsEmitter.emit(this.numberOfActiveThreads);
   }
 
   getAPIRevisionWithComments() {

src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.spec.ts

@@ -8,7 +8,7 @@ import { HttpErrorInterceptorService } from 'src/app/_services/http-error-interc
 import { PageOptionsSectionComponent } from '../shared/page-options-section/page-options-section.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SharedAppModule } from 'src/app/_modules/shared/shared-app.module';
-import { ReviewPageModule } from 'src/app/_modules/review-page/review-page.module';
+import { ReviewPageModule } from 'src/app/_modules/review-page.module';
 import { UserProfile } from 'src/app/_models/userProfile';
 
 describe('ReviewPageOptionsComponent', () => {