Merge branch 'master' into 8099-coursesresource---image-searchfilter

package.json

@@ -3,8 +3,8 @@
   "license": "AGPL-3.0",
   "version": "0.16.74",
   "myplanet": {
-    "latest": "v0.22.23",
-    "min": "v0.21.23"
+    "latest": "v0.22.29",
+    "min": "v0.21.29"
   },
   "scripts": {
     "ng": "ng",

src/app/courses/courses.component.html

@@ -176,7 +176,7 @@ <h3 class="header">
               <mat-icon>clear</mat-icon>
               <span i18n>Leave</span>
             </a>
-            <a mat-menu-item planetFeedback [feedbackOf]="{'state': 'courses', 'item': element._id}" i18n-title title="Feedback">
+            <a mat-menu-item planetFeedback [feedbackOf]="{'state': 'courses', 'item': element._id, name: element.doc.courseTitle}" i18n-title title="Feedback">
               <mat-icon>feedback</mat-icon>
               <span i18n>Feedback</span>
             </a>

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

@@ -12,7 +12,7 @@
         <mat-icon *ngSwitchCase="'Suggestion'">speaker_notes</mat-icon>
       </ng-container>
       <ng-container *ngIf="!editTitleMode; else editTitleBlock">
-        <span class="margin-lr-3" i18n>{{feedback.title || feedback.type + ' regarding ' + feedback.url}}</span>
+        <span class="margin-lr-3 ellipsis-title" matTooltip="{{feedback.title || feedback.type + ' regarding ' + feedback.url}}">{{feedback.title || feedback.type + ' regarding ' + feedback.url}}</span>
         <a (click)="changeEditTitleMode(true)" mat-icon-button>
           <mat-icon>edit</mat-icon>
         </a>
@@ -32,15 +32,20 @@
         </a>
       </ng-template>
       <span class="toolbar-fill"></span>
-      <a *ngIf="feedback?.state" [routerLink]="['/', feedback.state, 'view', feedback.item]" mat-raised-button color="accent">
-        <ng-container [ngSwitch]="feedback.state">
-          <span *ngSwitchCase="'resources'" i18n>Go to Resource</span>
-          <span *ngSwitchCase="'courses'" i18n>Go to Course</span>
-          <span *ngSwitchCase="'meetups'" i18n>Go to Meetup</span>
-          <span *ngSwitchCase="'teams'" i18n>Go to Team</span>
-          <span *ngSwitchCase="'enterprises'" i18n>Go to Enterprise</span>
-        </ng-container>
-      </a>
+      <a
+      *ngIf="feedback?.routerLink"
+      [routerLink]="feedback.routerLink"
+      mat-raised-button
+      color="accent"
+      class="no-shrink-button">
+      <ng-container [ngSwitch]="feedback.state">
+        <span *ngSwitchCase="'resources'" i18n>Go to Resource</span>
+        <span *ngSwitchCase="'courses'" i18n>Go to Course</span>
+        <span *ngSwitchCase="'meetups'" i18n>Go to Meetup</span>
+        <span *ngSwitchCase="'teams'" i18n>Go to Team</span>
+        <span *ngSwitchCase="'enterprises'" i18n>Go to Enterprise</span>
+      </ng-container>
+    </a>
     </mat-toolbar-row>
   </mat-toolbar>
   <div class="view-container view-full-height">

src/app/feedback/feedback-view.scss

@@ -33,3 +33,16 @@
     width: 100%;
   }
 }
+
+.ellipsis-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: inline-block;
+}
+
+.no-shrink-button {
+  flex-shrink: 0;
+  margin-left: auto;
+}

src/app/feedback/feedback.component.html

@@ -68,8 +68,10 @@
       <!-- Title Column -->
       <ng-container matColumnDef="title">
         <mat-header-cell *matHeaderCellDef mat-sort-header="title" i18n>Title</mat-header-cell>
-        <mat-cell title={{element.title}} *matCellDef="let element" i18n>{{element.title || element.type + ' regarding ' + element.url}}</mat-cell>
-      </ng-container>
+        <mat-cell *matCellDef="let element">
+          <span class="ellipsis-title" matTooltip="{{ element.title || element.type + ' regarding ' + element.url }}">{{ element.title || element.type + ' regarding ' + element.url }}</span>
+        </mat-cell>
+      </ng-container>      
       <!-- Type Column -->
       <ng-container matColumnDef="type">
         <mat-header-cell *matHeaderCellDef mat-sort-header="type" i18n>Type</mat-header-cell>

src/app/feedback/feedback.component.ts

@@ -23,12 +23,8 @@ import { DeviceInfoService, DeviceType } from '../shared/device-info.service';
 
 @Component({
   templateUrl: './feedback.component.html',
-  styles: [ `
-    .mat-column-type {
-      display: flex;
-      align-items: center;
-    }
-  ` ]
+  styleUrls: [ './feedback.scss' ]
+
 })
 export class FeedbackComponent implements OnInit, AfterViewInit, OnDestroy {
   readonly dbName = 'feedback';
@@ -113,9 +109,20 @@ export class FeedbackComponent implements OnInit, AfterViewInit, OnDestroy {
   getFeedback() {
     const selector = !this.user.isUserAdmin ? { 'owner': this.user.name } : { '_id': { '$gt': null } };
     this.couchService.findAll(this.dbName, findDocuments(selector, 0, [ { 'openTime': 'desc' } ])).subscribe((feedbackData: any[]) => {
-      this.feedback.data = feedbackData.map(feedback => ({ ...feedback, user: this.users.find(u => u.doc.name === feedback.owner) }));
+      this.feedback.data = feedbackData.map(feedback => {
+        const truncatedTitle = feedback.title.length > 100
+          ? `${feedback.title.slice(0, 100)}...`
+          : feedback.title;
+        return {
+          ...feedback,
+          title: truncatedTitle,
+          user: this.users.find(u => u.doc.name === feedback.owner)
+        };
+      });
       this.dialogsLoadingService.stop();
-    }, (error) => this.message = $localize`There is a problem of getting data.`);
+    }, (error) => {
+      this.message = $localize`There is a problem of getting data.`;
+    });
   }
 
   deleteClick(feedback) {

src/app/feedback/feedback.directive.ts

@@ -78,33 +78,72 @@ export class FeedbackDirective {
   ) {}
 
   addFeedback(post: any) {
-    const date = this.couchService.datePlaceholder;
-    const user = this.userService.get().name,
-      { message, ...feedbackInfo } = post,
-      startingMessage: Message = { message, time: date, user },
-      newFeedback: Feedback = {
-        owner: user,
-        ...feedbackInfo,
-        openTime: date,
-        status: 'Open',
-        messages: [ startingMessage ],
-        url: this.router.url,
-        source: this.stateService.configuration.code,
-        parentCode: this.stateService.configuration.parentCode,
-        ...this.feedbackOf
-      };
-    const feedbackUrl = newFeedback.url.substring(0, newFeedback.url.indexOf(';')) || newFeedback.url;
-    this.couchService.updateDocument('feedback', {
-      ...newFeedback, title: $localize`${newFeedback.type} regarding ${feedbackUrl}` })
-    .subscribe((data) => {
-      this.feedbackService.setFeedback();
-      this.planetMessageService.showMessage($localize`Thank you, your feedback is submitted!`);
-    },
-    (error) => {
-      this.planetMessageService.showAlert($localize`Error, your feedback cannot be submitted`);
-    });
+    const date = new Date();
+    const user = this.userService.get().name;
+    const feedbackUrl = this.router.url && this.router.url !== '/' ? this.router.url.split(';')[0] : '/';
+    const urlParts = feedbackUrl.split('/');
+    const firstPart = urlParts[1] || 'home';
+    const lastPart = urlParts.length > 2 ? urlParts[urlParts.length - 1] : null;
+    let feedback: any = {
+      ...post,
+      routerLink: null,
+      state: firstPart,
+    };
+    if (firstPart === 'home') {
+      feedback.title = $localize`Feedback regarding home`;
+      feedback.routerLink = ['/home'];
+      this.updateFeedback(feedback, date, user, feedbackUrl);
+    } else if (this.feedbackOf?.name) {
+      feedback.title = $localize`Feedback regarding ${firstPart}/${this.feedbackOf.name}`;
+      feedback.routerLink = ['/', firstPart, 'view', this.feedbackOf.item];
+      this.updateFeedback(feedback, date, user, feedbackUrl);
+    } else if (urlParts.length === 2) {
+      feedback.title = $localize`Feedback regarding ${firstPart}`;
+      feedback.routerLink = ['/', firstPart];
+      this.updateFeedback(feedback, date, user, feedbackUrl);
+    } else if (lastPart) {
+      this.couchService.getDocumentByID(firstPart, lastPart).subscribe(
+        (document: any) => {
+          const resourceName = document?.type === 'enterprise'
+            ? document?.name
+            : document?.title || document?.courseTitle || document?.name || lastPart;
+          feedback.title = $localize`Feedback regarding ${firstPart}/${resourceName}`;
+          feedback.routerLink = ['/', firstPart, 'view', lastPart];
+          this.updateFeedback(feedback, date, user, feedbackUrl);
+        },
+        (error) => {
+          feedback.title = $localize`Feedback regarding ${firstPart}/${lastPart}`;
+          feedback.routerLink = ['/', firstPart, 'view', lastPart];
+          this.updateFeedback(feedback, date, user, feedbackUrl);
+        }
+      );
+    }
   }
-
+
+  private updateFeedback(feedback: any, date: Date, user: string, url: string) {
+    const startingMessage: Message = { message: feedback.message, time: date, user };
+    const newFeedback: Feedback = {
+      owner: user,
+      ...feedback,
+      openTime: date,
+      status: 'Open',
+      messages: [startingMessage],
+      url,
+      source: this.stateService.configuration.code,
+      parentCode: this.stateService.configuration.parentCode,
+      ...this.feedbackOf,
+    };
+    this.couchService.updateDocument('feedback', newFeedback).subscribe(
+      () => {
+        this.feedbackService.setFeedback();
+        this.planetMessageService.showMessage($localize`Thank you, your feedback is submitted!`);
+      },
+      () => {
+        this.planetMessageService.showAlert($localize`Error, your feedback cannot be submitted`);
+      }
+    );
+  }
+
   @HostListener('click')
   openFeedback() {
     const title = $localize`Feedback`;

src/app/feedback/feedback.scss

@@ -0,0 +1,14 @@
+.mat-column-type {
+    display: flex;
+    align-items: center;
+  }
+
+.ellipsis-title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+    word-break: break-word;
+  }

src/app/meetups/meetups.component.html

@@ -65,7 +65,7 @@ <h3 class="header">
                 <span *ngIf="element.participate; else joinMeetup"><mat-icon>clear</mat-icon><span i18n>Leave</span></span>
                 <ng-template #joinMeetup><mat-icon>done</mat-icon><span i18n>Join</span></ng-template>
               </a>
-              <a mat-menu-item planetFeedback [feedbackOf]="{'state': 'meetups', 'item': element._id}" i18n-title title="Feedback">
+              <a mat-menu-item planetFeedback [feedbackOf]="{'state': 'meetups', 'item': element._id, name: element.doc.title}" i18n-title title="Feedback">
                 <mat-icon>feedback</mat-icon>
                 <span i18n>Feedback</span>
               </a>

src/app/resources/resources.component.html

@@ -167,7 +167,7 @@ <h3 class="header">
               <a mat-menu-item *ngIf="element.libraryInfo" (click)="libraryToggle([ element._id ], 'remove')">
                 <mat-icon>clear</mat-icon><span i18n>Remove from myLibrary</span>
               </a>
-              <a mat-menu-item planetFeedback [feedbackOf]="{'state': 'resources', 'item': element._id}" i18n-title title="Feedback">
+              <a mat-menu-item planetFeedback [feedbackOf]="{'state': 'resources', 'item': element._id, name: element.doc.title}" i18n-title title="Feedback">
                 <mat-icon>feedback</mat-icon>
                 <span i18n>Feedback</span>
               </a>

src/app/shared/couchdb.service.ts

@@ -197,4 +197,14 @@ export class CouchService {
     return Date.UTC(localDate.getFullYear(), localDate.getMonth(), localDate.getDate());
   }
 
+  getDocumentByID(db: string, docId: string): Observable<any> {
+    const url = `${this.baseUrl}/${db}/${docId}`;
+    return this.http.get(url, this.defaultOpts).pipe(
+      catchError(err => {
+        this.planetMessageService.showAlert($localize`Error fetching document: ${err.message}`);
+        return throwError(err);
+      })
+    );
+  }
+
 }

src/app/surveys/surveys.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy, Input } from '@angular/core';
+import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { FormGroup } from '@angular/forms';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
@@ -34,6 +34,7 @@ export class SurveysComponent implements OnInit, AfterViewInit, OnDestroy {
   surveys = new MatTableDataSource<any>();
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatPaginator) paginator: MatPaginator;
+  @Output() surveyCount = new EventEmitter<number>();
   displayedColumns = (this.userService.doesUserHaveRole([ '_admin', 'manager' ]) ? [ 'select' ] : []).concat(
     [ 'name', 'taken', 'courseTitle', 'createdDate', 'action' ]
   );
@@ -97,7 +98,10 @@ export class SurveysComponent implements OnInit, AfterViewInit, OnDestroy {
       this.dialogsLoadingService.stop();
     });
     this.couchService.checkAuthorization(this.dbName).subscribe((isAuthorized) => this.isAuthorized = isAuthorized);
-    this.surveys.connect().subscribe(surveys => this.parentCount = surveys.filter(survey => survey.parent === true).length);
+    this.surveys.connect().subscribe(surveys => {
+      this.parentCount = surveys.filter(survey => survey.parent === true).length;
+      this.surveyCount.emit(surveys.length);
+    });
   }
 
   ngAfterViewInit() {

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

@@ -213,7 +213,10 @@ <h3 *ngIf="mode==='services'" class="margin-lr-3 ellipsis-title">{{configuration
           </ng-template>
         </mat-tab>
         <mat-tab i18n-label label="Surveys">
-          <planet-surveys [teamId]="teamId"></planet-surveys>
+          <ng-template mat-tab-label>
+            <ng-container i18n>Surveys</ng-container> ({{surveysCount}})
+          </ng-template>
+          <planet-surveys [teamId]="teamId" (surveyCount)="surveysCount = $event"></planet-surveys>
         </mat-tab>
         <mat-tab *ngIf="mode!=='services'" #applicantTab>
           <ng-template mat-tab-label>

src/app/teams/teams.component.html

@@ -107,7 +107,7 @@ <h3 class="team-name">
                 <label *ngIf="!isMobile" i18n> Request pending </label>
               </button>
             </ng-container>
-            <button mat-raised-button color="primary" planetFeedback [feedbackOf]="{'state': mode + 's', 'item': element.doc._id}" (click)="$event.stopPropagation()">
+            <button mat-raised-button color="primary" planetFeedback [feedbackOf]="{'state': mode + 's', 'item': element.doc._id, name: element.doc.name}" (click)="$event.stopPropagation()">
               <mat-icon>feedback</mat-icon>
               <label *ngIf="!isMobile" i18n> Feedback </label>
             </button>

src/app/users/users-profile/users-profile.scss

@@ -9,6 +9,15 @@
     grid-column-gap: 2rem;
   }
 
+  .mat-list-item p{
+    overflow-wrap: break-word;
+    white-space: normal;
+    word-break: break-word;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
   @media (max-width: $screen-sm) {
     .profile-image-section {
       grid-area: icon;

src/app/users/users-update/users-update.component.ts

@@ -152,6 +152,7 @@ export class UsersUpdateComponent implements OnInit, CanComponentDeactivate {
       showFormErrors(this.editForm.controls);
       return;
     }
+    this.hasUnsavedChanges = false;
     this.submitUser();
 
   }