feat: display alert on home page when no data

fix #14

frontend/src/app/pillars/pillars.component.html

-<ul class="list-unstyled pillar">
-  <li *ngFor="let pillar of (pillars$ | async)">
-    <span class="pillar-name">{{ pillar.name }}</span>
-    <ul class="list-unstyled source">
-      <li *ngFor="let databaseSource of pillar.databaseSources">
-        <rare-document-count [name]="databaseSource.name"
-                             [url]="databaseSource.url"
-                             [count]="databaseSource.documentCount">
-        </rare-document-count>
-      </li>
-    </ul>
-  </li>
-</ul>
+<ng-container *ngIf="(pillars$ | async) as pillars">
+  <ul *ngIf="pillars.length > 0; else noPillar" class="list-unstyled pillar">
+    <li *ngFor="let pillar of pillars">
+      <span class="pillar-name">{{ pillar.name }}</span>
+      <ul class="list-unstyled source">
+        <li *ngFor="let databaseSource of pillar.databaseSources">
+          <rare-document-count [name]="databaseSource.name"
+                               [url]="databaseSource.url"
+                               [count]="databaseSource.documentCount">
+          </rare-document-count>
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <ng-template #noPillar>
+    <div class="alert alert-warning" role="alert">
+      <div class="text-center" style="font-size: 6em;"><span class="fa fa-frown-o"></span></div>
+      <div>
+        Aucune donnée trouvée.<br/>
+        Merci de contacter l'administrateur de l'application pour qu'il remplisse la base de données.
+      </div>
+    </div>
+  </ng-template>
+</ng-container>

frontend/src/app/pillars/pillars.component.spec.ts

@@ -32,6 +32,10 @@ class PillarsComponentTester extends ComponentTester<PillarsComponent> {
   databaseSourceLink(pillarIndex: number, sourceIndex: number) {
     return this.databaseSourceItem(pillarIndex, sourceIndex).element('a');
   }
+
+  get noDataAlert() {
+    return this.element('.alert');
+  }
 }
 
 describe('PillarsComponent', () => {
@@ -57,12 +61,13 @@ describe('PillarsComponent', () => {
     jasmine.addMatchers(speculoosMatchers);
   });
 
-  it('should not display any pillar while pillars are not available yet', () => {
+  it('should not display any pillar nor any alert while pillars are not available yet', () => {
     spyOn(pillarService, 'list').and.returnValue(EMPTY);
 
     tester.detectChanges();
 
     expect(tester.pillarListItems.length).toBe(0);
+    expect(tester.noDataAlert).toBeNull();
   });
 
   it('should display pillars', () => {
@@ -104,4 +109,12 @@ describe('PillarsComponent', () => {
       .toBe('http://florilege.arcad-project.org/fr/collections');
     expect(tester.databaseSourceLink(0, 1)).toBeNull();
   });
+
+  it('should display alert if no pillar has been found', () => {
+    spyOn(pillarService, 'list').and.returnValue(of([]));
+
+    tester.detectChanges();
+
+    expect(tester.noDataAlert).toContainText('Aucune donnée trouvée');
+  });
 });

frontend/src/custom-bootstrap.scss

@@ -24,7 +24,7 @@
 @import "../node_modules/bootstrap/scss/pagination";
 @import "../node_modules/bootstrap/scss/badge";
 // @import "../node_modules/bootstrap/scss/jumbotron";
-// @import "../node_modules/bootstrap/scss/alert";
+@import "../node_modules/bootstrap/scss/alert";
 // @import "../node_modules/bootstrap/scss/progress";
 // @import "../node_modules/bootstrap/scss/media";
 // @import "../node_modules/bootstrap/scss/list-group";