From c75ca68c440a20e197213ecbb47d05fc293afd9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wieland=20Sch=C3=B6bl?= <wulkanat@gmail.com>
Date: Wed, 24 Mar 2021 12:23:56 +0100
Subject: [PATCH] feat: add "no results" screen to search

---
 src/app/modules/data/detail/data-detail.scss    | 17 -----------------
 .../modules/data/list/data-list.component.ts    |  1 +
 src/app/modules/data/list/data-list.html        |  9 ++++++++-
 src/assets/i18n/de.json                         |  3 +++
 src/assets/i18n/en.json                         |  3 +++
 src/global.scss                                 | 17 +++++++++++++++++
 6 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/app/modules/data/detail/data-detail.scss b/src/app/modules/data/detail/data-detail.scss
index bb3ec455..1829b4b8 100644
--- a/src/app/modules/data/detail/data-detail.scss
+++ b/src/app/modules/data/detail/data-detail.scss
@@ -11,20 +11,3 @@
     }
   }
 }
-
-.notFoundContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  min-height: 50vh;
-
-  ion-icon {
-    font-size: 64px;
-  }
-
-  ion-label {
-    font-size: x-large;
-  }
-}
diff --git a/src/app/modules/data/list/data-list.component.ts b/src/app/modules/data/list/data-list.component.ts
index 3da20aad..4368571a 100644
--- a/src/app/modules/data/list/data-list.component.ts
+++ b/src/app/modules/data/list/data-list.component.ts
@@ -34,6 +34,7 @@ import {DataProvider} from '../data.provider';
 @Component({
   selector: 'stapps-data-list',
   templateUrl: 'data-list.html',
+  styleUrls: ['data-list.scss'],
   providers: [ContextMenuService],
 })
 export class DataListComponent implements OnInit {
diff --git a/src/app/modules/data/list/data-list.html b/src/app/modules/data/list/data-list.html
index a91fe533..df699e8c 100644
--- a/src/app/modules/data/list/data-list.html
+++ b/src/app/modules/data/list/data-list.html
@@ -19,9 +19,16 @@
 
 <ion-content  id="data-list">
   <div *ngIf="items | async as items; else loading">
-    <ion-list>
+    <ion-list *ngIf='items.length > 0; else empty'>
       <stapps-data-list-item [item]="item" *ngFor="let item of items"></stapps-data-list-item>
     </ion-list>
+    <ng-template #empty>
+      <div>
+        <ion-label class='notFoundContainer'>
+          {{'search.nothing_found' | translate}}
+        </ion-label>
+      </div>
+    </ng-template>
   </div>
   <ng-template #loading>
     <stapps-skeleton-list-item *ngFor="let skeleton of [1, 2, 3, 4, 5]"></stapps-skeleton-list-item>
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 07f9b7a9..f1e2092d 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -68,6 +68,9 @@
       "settings": "Einstellungen"
     }
   },
+  "search": {
+    "nothing_found": "Keine Ergebnisse"
+  },
   "settings": {
     "resetAlert.title": "Alle Einstellungen zurücksetzen?",
     "resetAlert.message": "Sind Sie sich sicher, alle Einstellungen auf ihre Anfangswerte zurückzusetzen?",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index d850cd64..eff26015 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -68,6 +68,9 @@
       "settings": "settings"
     }
   },
+  "search": {
+    "nothing_found": "No results"
+  },
   "settings": {
     "resetAlert.title": "Reset all settings?",
     "resetAlert.message": "Are you sure to reset all settings to their default values?",
diff --git a/src/global.scss b/src/global.scss
index f026cea8..f0fa50cb 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -31,3 +31,20 @@ ion-item {
     }
   }
 }
+
+.notFoundContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  min-height: 50vh;
+
+  ion-icon {
+    font-size: 64px;
+  }
+
+  ion-label {
+    font-size: x-large;
+  }
+}