Add the functionality to show all comments of a PDF file #3.

JabRef · Dec 1, 2017 · 9771b17 · 9771b17
1 parent a3f2013
commit 9771b17
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 28 deletions.
diff --git a/frontend/src/app/pages/references/components/reference/components/pdf/pdf.component.ts b/frontend/src/app/pages/references/components/reference/components/pdf/pdf.component.ts
@@ -64,15 +64,40 @@ export class PdfViewComponent implements AfterViewInit, OnDestroy {
 
   searchableList = ['author', 'content'];
   sort: string = 'pageNumber';
-  private queryString: string = '';
+  private queryString: string = null;
   private lastPageNumberLabel: number;
   private searchInputValue: string;
+  private showAll: boolean = false;
+  private disableShowAll: boolean = false;
+
+  private triggerShowAll() {
+    // toggle
+    this.showAll = !this.showAll;
+
+    if (this.showAll) {
+      // show all comments
+      this.queryString = '';
+    } else {
+      // reset show all
+      this.queryString = null;
+    }
+  }
 
   private searchComments() {
     // check if search input changed
     if (this.queryString !== this.searchInputValue) {
-      // change search string
-      this.queryString = this.searchInputValue;
+
+      if (this.searchInputValue != null && this.searchInputValue !== '') {
+        // change search string
+        this.queryString = this.searchInputValue;
+        this.showAll = true;
+        this.disableShowAll = true;
+      } else {
+        // reset search
+        this.queryString = null;
+        this.showAll = false;
+        this.disableShowAll = false;
+      }
 
       // check if a comment is selected
       if (this.selectedComment != null) {

diff --git a/frontend/src/app/pages/references/components/reference/components/pdf/pdf.html b/frontend/src/app/pages/references/components/reference/components/pdf/pdf.html
@@ -26,6 +26,15 @@
         <button class="btn btn-danger btn-block no-transform" (click)="back()">Back to reference</button>
       </div>
     </div>
+    <!-- Toggle all comments -->
+    <div class="row" style="padding: 3px 26px 14px 18px; font-size: 15px;">
+      <label class="checkbox-inline custom-checkbox nowrap">
+        <input type="checkbox" [(ngModel)]="showAll"
+               (click)="triggerShowAll()"
+               [disabled]="disableShowAll">
+        <span>Show all comments</span>
+      </label>
+    </div>
     <!-- search -->
     <form #search="ngForm" (ngSubmit)="searchComments()">
       <div class="input-group" style="padding-left: 3px; padding-right: 11px">
@@ -45,7 +54,7 @@
            [@anim]="comment">
         <ng-template #tipContentEdited>Edited on<br>{{comment.alterationDate}}</ng-template>
         <!--page of current comment-->
-        <div *ngIf="(queryString != null && queryString !== '') && !sameAsLastPageNumberLabel(i, comment.pageNumber)"
+        <div *ngIf="(queryString != null) && !sameAsLastPageNumberLabel(i, comment.pageNumber)"
              style="width: 100%; height: 10px; border-bottom: 1px solid #797979; text-align: center; margin: 0 20px 17px 20px;">
           <span style="font-size: 16px; background-color: #eff2f3; padding: 0 10px;">
             Page {{comment.pageNumber}}
@@ -54,7 +63,7 @@
         <!--all comments-->
         <div class="col-md-12" *ngIf="(comment.author !== currentUser) || (comment.id !== selectedComment)">
           <div class="card" (click)="comment.author === currentUser ? editComment(comment.id) : ''"
-               *ngIf="(queryString != null && queryString !== '') || (currentPageNumber === comment.pageNumber)"
+               *ngIf="(queryString != null) || (currentPageNumber === comment.pageNumber)"
                [@fadeInOut]
                [style.cursor]="comment.author === currentUser ? 'pointer' : 'default'">
             <div class="card-header midnight-green" style="padding-top: 12px;">
@@ -81,7 +90,7 @@
         <!--selected comment for editing-->
         <div class="col-md-12" *ngIf="(comment.id === selectedComment)">
           <div class="card"
-               *ngIf="(queryString != null && queryString !== '') || (currentPageNumber === comment.pageNumber)"
+               *ngIf="(queryString != null) || (currentPageNumber === comment.pageNumber)"
                [@fadeInOut]>
             <form #form="ngForm" (ngSubmit)="updateComment(comment.id)">
               <div class="card-header deep-green-cyan-turquoise" style="padding-top: 6px;">

diff --git a/frontend/src/app/theme/pipes/search/search.pipe.ts b/frontend/src/app/theme/pipes/search/search.pipe.ts
@@ -19,30 +19,32 @@ export class SearchPipe implements PipeTransform {
   transform(list: any, input: string, searchableList: any, sort: string) {
     let result = list;
 
-    if (input) {
-      input = input.toLowerCase();
-      result = result.filter(function (el: any) {
-        let isTrue = false;
-        for (let k in searchableList) {
-          if (el[searchableList[k]].toLowerCase().indexOf(input) > -1) {
-            isTrue = true;
+    if (input != null) {
+      if (input) {
+        input = input.toLowerCase();
+        result = result.filter(function (el: any) {
+          let isTrue = false;
+          for (let k in searchableList) {
+            if (el[searchableList[k]].toLowerCase().indexOf(input) > -1) {
+              isTrue = true;
+            }
+            if (isTrue) {
+              return el;
+            }
           }
-          if (isTrue) {
-            return el;
-          }
-        }
-      });
+        });
 
-      // sort result
-      result = result.sort((obj1, obj2) => {
-        if (obj1[sort] > obj2[sort]) {
-          return 1;
-        }
-        if (obj1[sort] < obj2[sort]) {
-          return -1;
-        }
-        return 0;
-      });
+        // sort result
+        result = result.sort((obj1, obj2) => {
+          if (obj1[sort] > obj2[sort]) {
+            return 1;
+          }
+          if (obj1[sort] < obj2[sort]) {
+            return -1;
+          }
+          return 0;
+        });
+      }
     }
     return result;
   }