teams: add surveys (fixes #7944) (#7957)

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.16.43",
+  "version": "0.16.44",
   "myplanet": {
     "latest": "v0.21.75",
     "min": "v0.20.75"

src/app/exams/exams-add.component.ts

@@ -37,6 +37,7 @@ export class ExamsAddComponent implements OnInit {
   pageType: 'Add' | 'Update' | 'Copy' = 'Add';
   courseName = '';
   examType: 'exam' | 'survey' = <'exam' | 'survey'>this.route.snapshot.paramMap.get('type') || 'exam';
+  teamId = this.route.parent?.snapshot.paramMap.get('teamId') || null;
   successMessage = this.examType === 'survey' ? $localize`New survey added` : $localize`New test added`;
   steps = [];
   showFormError = false;
@@ -120,6 +121,9 @@ export class ExamsAddComponent implements OnInit {
 
   onSubmit(reRoute = false) {
     if (this.examForm.valid) {
+      if (this.teamId) {
+        this.examForm.value.teamId = this.teamId;
+      }
       this.showFormError = false;
       this.addExam(Object.assign({}, this.examForm.value, this.documentInfo), reRoute);
     } else {

src/app/home/home.module.ts

@@ -27,6 +27,7 @@ import { UsersModule } from '../users/users.module';
 import { PlanetComponent } from './planet.component';
 import { CoursesViewDetailModule } from '../courses/view-courses/courses-view-detail.module';
 import { ChatModule } from '../chat/chat.module';
+import { SurveysModule } from '../surveys/surveys.module';
 
 @NgModule({
   imports: [
@@ -46,7 +47,8 @@ import { ChatModule } from '../chat/chat.module';
     PlanetCalendarModule,
     UsersModule,
     CoursesViewDetailModule,
-    ChatModule
+    ChatModule,
+    SurveysModule
   ],
   declarations: [
     HomeComponent,

src/app/submissions/submissions.component.html

@@ -62,7 +62,7 @@
       </ng-container>
       <ng-container matColumnDef="courseTitle">
         <mat-header-cell *matHeaderCellDef mat-sort-header="courseTitle" i18n>Course Name</mat-header-cell>
-        <mat-cell *matCellDef="let element">{{element.courseTitle}}</mat-cell>
+        <mat-cell *matCellDef="let element">{{element.courseTitle || element.parent.courseTitle}}</mat-cell>
       </ng-container>
       <ng-container matColumnDef="stepNum">
         <mat-header-cell *matHeaderCellDef mat-sort-header="stepNum" i18n>Course Step</mat-header-cell>

src/app/surveys/surveys.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar>
+<mat-toolbar *ngIf="!teamId">
   <button mat-icon-button (click)="goBack()">
     <mat-icon>arrow_back</mat-icon>
   </button>
@@ -11,7 +11,7 @@
 </mat-toolbar>
 
 <div class="space-container primary-link-hover">
-  <mat-toolbar class="primary-color font-size-1">
+  <mat-toolbar *ngIf="!teamId" class="primary-color font-size-1">
     <button mat-mini-fab (click)="routeToEditSurvey('add')" *ngIf="isAuthorized" >
       <mat-icon>add</mat-icon>
     </button>
@@ -61,8 +61,8 @@
         <mat-header-cell *matHeaderCellDef i18n>Action</mat-header-cell>
         <mat-cell *matCellDef="let element">
           <ng-container *ngIf="!element.parent === true">
-            <button mat-raised-button color="primary" (click)="routeToEditSurvey('update', element._id)" i18n><mat-icon>edit</mat-icon> Edit</button>
-            <button mat-raised-button color="primary" [disabled]="!element.questions.length" (click)="openSendSurveyDialog(element)" i18n><mat-icon>send</mat-icon> Send</button>
+            <button mat-raised-button color="primary" *ngIf="!teamId" (click)="routeToEditSurvey('update', element._id)" i18n><mat-icon>edit</mat-icon> Edit</button>
+            <button mat-raised-button color="primary" *ngIf="!teamId && !routeTeamId" [disabled]="!element.questions.length" (click)="openSendSurveyDialog(element)" i18n><mat-icon>send</mat-icon> Send</button>
             <button mat-raised-button color="primary" [disabled]="!element.questions.length" (click)="recordSurvey(element)"
               i18n-matTooltip matTooltip="Record survey information from a person who is not a member of {{configuration.name}}" i18n>
               <mat-icon>fiber_manual_record</mat-icon> Record

src/app/surveys/surveys.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy, Input } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { FormGroup } from '@angular/forms';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
@@ -25,6 +25,7 @@ import { DialogsFormService } from '../shared/dialogs/dialogs-form.service';
 import { DialogsAddTableComponent } from '../shared/dialogs/dialogs-add-table.component';
 
 @Component({
+  selector: 'planet-surveys',
   templateUrl: './surveys.component.html',
   styleUrls: [ './surveys.component.scss' ]
 })
@@ -44,6 +45,8 @@ export class SurveysComponent implements OnInit, AfterViewInit, OnDestroy {
   message = '';
   configuration = this.stateService.configuration;
   parentCount = 0;
+  routeTeamId = this.route.parent?.snapshot.paramMap.get('teamId') || null;
+  @Input() teamId?: string;
 
   constructor(
     private couchService: CouchService,
@@ -79,7 +82,17 @@ export class SurveysComponent implements OnInit, AfterViewInit, OnDestroy {
           }).length
         })),
         ...this.createParentSurveys(submissions)
-      ];
+      ].filter(survey => {
+        if (this.routeTeamId) {
+          return survey.teamId === this.routeTeamId;
+        }
+
+        if (this.teamId) {
+          return survey.teamId === this.teamId;
+        } else {
+          return true;
+        }
+      });
       this.surveys.data = this.surveys.data.map((data: any) => ({ ...data, courseTitle: data.course ? data.course.courseTitle : '' }));
       this.dialogsLoadingService.stop();
     });
@@ -245,7 +258,7 @@ export class SurveysComponent implements OnInit, AfterViewInit, OnDestroy {
   recordSurvey(survey: any) {
     this.submissionsService.createSubmission(survey, 'survey').subscribe((res: any) => {
       this.router.navigate([
-        'dispense',
+        this.teamId ? 'surveys/dispense' : 'dispense',
         { questionNum: 1, submissionId: res.id, status: 'pending', mode: 'take' }
       ], { relativeTo: this.route });
     });

src/app/surveys/surveys.module.ts

@@ -23,6 +23,7 @@ import { SharedComponentsModule } from '../shared/shared-components.module';
     SurveysRouterModule,
     SharedComponentsModule
   ],
+  exports: [ SurveysComponent ],
   declarations: [
     SurveysComponent
   ]

src/app/teams/teams-router.module.ts

@@ -6,6 +6,10 @@ import { TeamsViewComponent } from './teams-view.component';
 const routes: Routes = [
   { path: '', component: TeamsComponent },
   { path: 'view/:teamId', component: TeamsViewComponent },
+  {
+    path: 'view/:teamId/surveys',
+    loadChildren: () => import('../surveys/surveys.module').then(m => m.SurveysModule)
+  },
   { path: 'users', loadChildren: () => import('../users/users.module').then(m => m.UsersModule) },
 ];
 @NgModule({

src/app/teams/teams-view.component.html

@@ -43,6 +43,7 @@ <h3 *ngIf="mode==='services'" class="margin-lr-3 ellipsis-title">{{configuration
   <ng-template #actionButtons>
     <ng-container [ngSwitch]="userStatus" *ngIf="user.isUserAdmin || user.roles.length">
       <ng-container *ngSwitchCase="'member'">
+        <a class="margin-lr-3" [routerLink]="['surveys']" mat-stroked-button mat-button i18n>Manage Surveys</a>
         <button *ngIf="mode!=='services'" mat-stroked-button mat-button class=" toolbar-button margin-lr-3" (click)="openInviteMemberDialog()" i18n [disabled]="disableAddingMembers">
           Add Members
         </button>
@@ -184,7 +185,7 @@ <h3 *ngIf="mode==='services'" class="margin-lr-3 ellipsis-title">{{configuration
             </div>
           </ng-template>
         </mat-tab>
-        <mat-tab label="Courses">
+        <mat-tab i18n-label label="Courses">
           <ng-template mat-tab-label>
             <ng-container i18n>Courses</ng-container> ({{team?.courses?.length || 0}})
           </ng-template>
@@ -211,6 +212,9 @@ <h3 *ngIf="mode==='services'" class="margin-lr-3 ellipsis-title">{{configuration
             </div>
           </ng-template>
         </mat-tab>
+        <mat-tab i18n-label label="Surveys">
+          <planet-surveys [teamId]="teamId"></planet-surveys>
+        </mat-tab>
         <mat-tab *ngIf="mode!=='services'" #applicantTab>
           <ng-template mat-tab-label>
             <ng-container i18n>{ mode, select, team {Join Requests} enterprise {Applicants} }</ng-container> ({{requests.length}})

src/app/teams/teams.module.ts

@@ -18,6 +18,7 @@ import { TeamsMemberComponent } from './teams-member.component';
 import { TeamsReportsComponent } from './teams-reports.component';
 import { TeamsReportsDialogComponent } from './teams-reports-dialog.component';
 import { TeamsReportsDetailComponent } from './teams-reports-detail.component';
+import { SurveysModule } from '../surveys/surveys.module';
 
 @NgModule({
   exports: [ TeamsViewComponent, TeamsComponent, TeamsViewFinancesComponent, TeamsMemberComponent, TeamsReportsComponent ],
@@ -34,6 +35,7 @@ import { TeamsReportsDetailComponent } from './teams-reports-detail.component';
     SharedComponentsModule,
     PlanetCalendarModule,
     FormsModule,
+    SurveysModule
   ],
   declarations: [
     TeamsComponent,