From 515990c9b4818a6a36aac0af1bc63ddc0d37e1c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Agneray?= <francois.agneray@lam.fr>
Date: Mon, 20 May 2019 17:09:14 +0200
Subject: [PATCH] #15 => done

---
 .../components/datatable.component.html       | 15 +++++++-------
 .../search/components/datatable.component.ts  |  2 +-
 .../components/url-display.component.html     | 20 ++++++++++++++++---
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/app/search/components/datatable.component.html b/src/app/search/components/datatable.component.html
index e7562e4f..0626b4ef 100644
--- a/src/app/search/components/datatable.component.html
+++ b/src/app/search/components/datatable.component.html
@@ -1,9 +1,5 @@
-<p>
-    <button (click)="click()">click</button>
-</p>
-
 <accordion>
-    <accordion-group #ag [panelClass]="'custom-accordion'" class="my-2">
+    <accordion-group (isOpenChange)="initDatatable()" #ag [panelClass]="'custom-accordion'" class="my-2">
         <button class="btn btn-link btn-block clearfix" accordion-heading>
             <div class="pull-left float-left">
                 Datatable
@@ -13,7 +9,7 @@
             </div>
         </button>
         <div *ngIf="searchMeta">
-            <div class="table-responsive-sm">
+            <div class="table-responsive">
                 <table class="table table-striped">
                     <thead>
                         <tr>
@@ -27,7 +23,12 @@
                     </tbody>
                 </table>
             </div>
-            <pagination [totalItems]="searchMeta.total_items" (pageChanged)="getSearchData.emit($event.page)"></pagination>
+            <div class="mt-3">
+                <p>Total items {{searchMeta.total_items}}</p>
+            </div>
+            <div class="mt-3">
+                <pagination [totalItems]="searchMeta.total_items" [boundaryLinks]="true" [rotate]="true" [maxSize]="5" (pageChanged)="getSearchData.emit($event.page)"></pagination>
+            </div>
         </div>
     </accordion-group>
 </accordion>
diff --git a/src/app/search/components/datatable.component.ts b/src/app/search/components/datatable.component.ts
index f6a25556..6ddcaecc 100644
--- a/src/app/search/components/datatable.component.ts
+++ b/src/app/search/components/datatable.component.ts
@@ -14,7 +14,7 @@ export class DatatableComponent {
     @Output() initSearchMeta: EventEmitter<{}> = new EventEmitter();
     @Output() getSearchData: EventEmitter<number> = new EventEmitter();
 
-    click() {
+    initDatatable() {
         this.initSearchMeta.emit();
         this.getSearchData.emit(1);
     }
diff --git a/src/app/search/components/url-display.component.html b/src/app/search/components/url-display.component.html
index 0449fd73..2b6689cd 100644
--- a/src/app/search/components/url-display.component.html
+++ b/src/app/search/components/url-display.component.html
@@ -1,3 +1,17 @@
-<p>
-   Direct link to the result (JSON format): <a target="_blank" [href]="getUrl()">{{ getUrl() }}</a>
-</p>
\ No newline at end of file
+<accordion>
+   <accordion-group (isOpenChange)="initDatatable()" #ag [isOpen]="true" [panelClass]="'custom-accordion'" class="my-2">
+       <button class="btn btn-link btn-block clearfix" accordion-heading>
+           <div class="pull-left float-left">
+               Direct link to the result (JSON)
+               &nbsp;
+               <span *ngIf="ag.isOpen"><i class="fas fa-chevron-up"></i></span>
+               <span *ngIf="!ag.isOpen"><i class="fas fa-chevron-down"></i></span>
+           </div>
+       </button>
+       <div>
+         <p>
+            <a target="_blank" [href]="getUrl()">{{ getUrl() }}</a>
+         </p>
+       </div>
+   </accordion-group>
+</accordion>
-- 
GitLab