manager: smoother survey submissions team column (fixes #9066) (#9074)

Co-authored-by: dogi <[email protected]>

Author: Mutugiii

package.json

@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.20.16",
+  "version": "0.20.17",
   "myplanet": {
-    "latest": "v0.30.39",
-    "min": "v0.29.39"
+    "latest": "v0.30.63",
+    "min": "v0.29.63"
   },
   "scripts": {
     "ng": "ng",

src/app/submissions/submissions.component.html

@@ -68,6 +68,12 @@
         <mat-header-cell *matHeaderCellDef mat-sort-header="stepNum" i18n>Course Step</mat-header-cell>
         <mat-cell *matCellDef="let element" style="cursor: pointer">{{element.stepNum || ''}}</mat-cell>
       </ng-container>
+      <ng-container matColumnDef="teamInfo">
+        <mat-header-cell *matHeaderCellDef mat-sort-header="teamInfo" i18n>Team/Enterprise</mat-header-cell>
+        <mat-cell *matCellDef="let element" style="cursor: pointer">
+          <ng-container *ngIf="element.teamInfo">{{element.teamInfo?.name}} ({{element.teamInfo?.type}})</ng-container>
+        </mat-cell>
+      </ng-container>
       <ng-container matColumnDef="status">
         <mat-header-cell *matHeaderCellDef mat-sort-header="status" i18n>Status</mat-header-cell>
         <mat-cell *matCellDef="let element" [ngSwitch]="element.status" style="cursor: pointer">

src/app/submissions/submissions.component.ts

@@ -4,21 +4,23 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { composeFilterFunctions, filterDropdowns, dropdownsFill, filterSpecificFieldsByWord } from '../shared/table-helpers';
 import { Router, ActivatedRoute } from '@angular/router';
-import { takeUntil } from 'rxjs/operators';
-import { Subject, zip } from 'rxjs';
+import { takeUntil, map } from 'rxjs/operators';
+import { Subject, zip, forkJoin, of, Observable } from 'rxjs';
 import { SubmissionsService } from './submissions.service';
 import { UserService } from '../shared/user.service';
 import { findDocuments } from '../shared/mangoQueries';
 import { DialogsLoadingService } from '../shared/dialogs/dialogs-loading.service';
 import { CoursesService } from '../courses/courses.service';
 import { DeviceInfoService, DeviceType } from '../shared/device-info.service';
+import { TeamsService } from '../teams/teams.service';
+
 const columnsByFilterAndMode = {
   exam: {
     grade: [ 'name', 'courseTitle', 'stepNum', 'status', 'grade', 'user', 'lastUpdateTime', 'gradeTime' ]
   },
   survey: {
-    grade: [ 'name', 'courseTitle', 'stepNum', 'status', 'user', 'lastUpdateTime' ],
-    survey: [ 'name', 'courseTitle', 'stepNum', 'status', 'lastUpdateTime' ]
+    grade: [ 'name', 'courseTitle', 'stepNum', 'teamInfo', 'status', 'user', 'lastUpdateTime' ],
+    survey: [ 'name', 'courseTitle', 'stepNum', 'teamInfo', 'status', 'lastUpdateTime' ]
   }
 };
 
@@ -31,7 +33,7 @@ export class SubmissionsComponent implements OnInit, AfterViewChecked, OnDestroy
 
   @Input() isDialog = false;
   @Input() parentId: string;
-  @Input() displayedColumns = [ 'name', 'courseTitle', 'stepNum', 'status', 'user', 'lastUpdateTime', 'gradeTime' ];
+  @Input() displayedColumns = [ 'name', 'courseTitle', 'stepNum', 'teamInfo', 'status', 'user', 'lastUpdateTime', 'gradeTime' ];
   @Output() submissionClick = new EventEmitter<any>();
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -60,6 +62,7 @@ export class SubmissionsComponent implements OnInit, AfterViewChecked, OnDestroy
     private coursesService: CoursesService,
     private dialogsLoadingService: DialogsLoadingService,
     private deviceInfoService: DeviceInfoService,
+    private teamsService: TeamsService
   ) {
     this.dialogsLoadingService.start();
     this.deviceType = this.deviceInfoService.getDeviceType();
@@ -89,13 +92,16 @@ export class SubmissionsComponent implements OnInit, AfterViewChecked, OnDestroy
         }
         return sList;
       }, []).map(submission => this.appendCourseInfo(submission, courses));
-      // Sort in descending lastUpdateTime order, so the recent submission can be shown on the top
-      submissions.sort((a, b) => b.lastUpdateTime - a.lastUpdateTime);
-      this.submissions.data = submissions.map(submission => ({
-        ...submission, submittedBy: this.submissionsService.submissionName(submission.user)
-      }));
-      this.dialogsLoadingService.stop();
-      this.applyFilter('');
+      forkJoin(submissions.map(s => this.appendTeamInfo$(s))).subscribe(subs => {
+        // Sort in descending lastUpdateTime order, so the recent submission can be shown on the top
+        subs.sort((a, b) => b.lastUpdateTime - a.lastUpdateTime);
+        this.submissions.data = subs.map(submission => ({
+          ...submission,
+          submittedBy: this.submissionsService.submissionName(submission.user)
+        }));
+        this.dialogsLoadingService.stop();
+        this.applyFilter('');
+      });
     });
     this.submissionsService.updateSubmissions({ query: this.submissionQuery() });
     this.setupTable();
@@ -227,4 +233,9 @@ export class SubmissionsComponent implements OnInit, AfterViewChecked, OnDestroy
     return { ...submission, courseTitle: submissionCourse.doc.courseTitle, stepNum };
   }
 
+  appendTeamInfo$(submission): Observable<any> {
+    if (!submission.team) { return of({ ...submission, teamName: '' }); }
+    return this.teamsService.getTeamName(submission.team).pipe(map((teamInfo: any) => ({ ...submission, teamInfo })));
+  }
+
 }

src/app/submissions/submissions.service.ts

@@ -287,9 +287,7 @@ export class SubmissionsService {
       return forkJoin(
           filteredSubmissions.map(submission => {
             if (submission.team) {
-              return this.teamsService.getTeamName(submission.team).pipe(
-                map(teamName => ({ ...submission, teamName }))
-              );
+              return this.teamsService.getTeamName(submission.team).pipe(map(teamInfo => ({ ...submission, teamInfo })));
             }
             return of(submission);
           })
@@ -304,7 +302,8 @@ export class SubmissionsService {
             'Age (years)': submission.user.birthDate ? ageFromBirthDate(time, submission.user.birthDate) : submission.user.age || 'N/A',
             'Planet': submission.source,
             'Date': submission.lastUpdateTime,
-            'Team/Enterprise': submission.teamName || 'N/A',
+            'Group': submission.teamInfo?.name || 'N/A',
+            'Group Type': submission.teamInfo?.type || 'N/A',
             ...questionTexts.reduce((answerObj, text, index) => ({
               ...answerObj,
               [`"Q${index + 1}: ${markdownToPlainText(text).replace(/"/g, '""')}"`]:
@@ -465,7 +464,7 @@ export class SubmissionsService {
           return forkJoin(
             submissionsWithPlanetName.map(submission => {
               if (submission.team) {
-                return this.teamsService.getTeamName(submission.team).pipe(map(teamName => ({ ...submission, teamName })));
+                return this.teamsService.getTeamName(submission.team).pipe(map(teamInfo => ({ ...submission, teamInfo })));
               }
               return of(submission);
             })
@@ -516,20 +515,18 @@ export class SubmissionsService {
   surveyHeader(responseHeader: boolean, exam, index: number, submission): string {
     if (responseHeader) {
       const shortDate = this.formatShortDate(submission.lastUpdateTime);
-      const userAge = submission.user.birthDate
-        ? ageFromBirthDate(submission.lastUpdateTime, submission.user.birthDate)
-        : submission.user.age;
+      const userAge = submission.user.birthDate ? ageFromBirthDate(submission.lastUpdateTime, submission.user.birthDate) : submission.user.age;
       const userGender = submission.user.gender;
       const communityOrNation = submission.planetName;
-      const teamName = submission.teamName
-      ? submission.teamName.replace(/^(Team|Enterprise):/, (match) => `<strong>${match}</strong>`)
-      : '';
+      const teamType = submission.teamInfo?.type ? toProperCase(submission.teamInfo.type) : '';
+      const teamName = submission.teamInfo?.name || '';
+      const teamInfo = teamType && teamName ? `<strong>${teamType}</strong>: ${teamName}` : '';
       return [
         `<h3>Submission ${index + 1}</h3>`,
         `<ul>`,
         `<li><strong>Planet ${communityOrNation}</strong></li>`,
         `<li><strong>Date:</strong> ${shortDate}</li>`,
-        teamName ? `<li>${teamName}</li>` : '',
+        teamInfo ? `<li>${teamInfo}</li>` : '',
         userGender ? `<li><strong>Gender:</strong> ${userGender}</li>` : '',
         userAge ? `<li><strong>Age:</strong> ${userAge}</li>` : '',
         `</ul>`,

src/app/teams/teams.service.ts

@@ -375,17 +375,13 @@ export class TeamsService {
     return this.updateTeam(newServicesDoc);
   }
 
-  getTeamName(teamId: string): Observable<string> {
+  getTeamName(teamId: string): Observable<Object> {
     return this.couchService.get(`${this.dbName}/${teamId}`).pipe(
       map((team: any) => {
-        if (team && team.name) {
-          if (team.type && team.type === 'enterprise') {
-            return `Enterprise: ${team.name}`;
-          } else {
-            return `Team: ${team.name}`;
-          }
+        if (team) {
+          return { 'name': team.name, 'type': team.type };
         }
-        return teamId;
+        return { id: teamId };
       }),
     );
   }