feat: add "no results" screen to search

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

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 {

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>

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?",

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?",

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