Merge branch '15-gerer-l-affichage-du-datatable' into 'develop'

#15 => done

Closes #15

See merge request !7

src/app/search/components/datatable.component.html

-<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>

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);
     }

src/app/search/components/url-display.component.html

-<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>