feedback: smoother name (fixes #7892, #7963, #7965)

src/app/courses/courses.component.html

@@ -175,7 +175,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,7 +32,7 @@
         </a>
       </ng-template>
       <span class="toolbar-fill"></span>
-      <a *ngIf="feedback?.state" [routerLink]="['/', feedback.state, 'view', feedback.item]" mat-raised-button color="accent">
+      <a *ngIf="feedback?.state" [routerLink]="['/', feedback.state, 'view', feedback.item]" 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>

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

@@ -79,32 +79,38 @@ 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 user = this.userService.get().name;
+    const feedbackUrl = this.router.url && this.router.url !== '/' ? this.router.url.split(';')[0] : '';
+    const itemName = this.feedbackOf.name || '';
+    const feedbackTitle = itemName
+      ? $localize`${post.type} regarding ${feedbackUrl}/${itemName}`
+      : feedbackUrl
+        ? $localize`${post.type} regarding ${feedbackUrl}`
+        : $localize`${post.type} regarding Home`
+    const startingMessage: Message = { message: post.message, time: date, user };
+    const newFeedback: Feedback = {
+      owner: user,
+      ...post,
+      openTime: date,
+      status: 'Open',
+      messages: [startingMessage],
+      url: feedbackUrl,
+      source: this.stateService.configuration.code,
+      parentCode: this.stateService.configuration.parentCode,
+      ...this.feedbackOf,
+      title: feedbackTitle,
+    };
+    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,15 @@
+.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/teams/teams.component.html

@@ -107,7 +107,7 @@ <h3>
                 <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>