show 'no blank found' for loops over empty arrays

Author: Ian Redpath

public/project/components/libraries/libraries.view.html

@@ -13,6 +13,7 @@ <h1>Libraries</h1>
   	<div *ngIf="!showSearchResults" class="libraries-no-search">
 	  	<h4>Highest rated libraries</h4>
 	  	<div class="sample-libraries row">
+	  	<span class="no-results" *ngIf="highestRatedLibs.length ===0">No libraries found</span>
 		    <div *ngFor="#library of highestRatedLibs.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
 		        <div class="movie-poster-container">
 		          <img src="./assets/default_library.png" class="movie-image"[routerLink]="['/Library', { library: library._id }]">
@@ -31,6 +32,7 @@ <h4>Highest rated libraries</h4>
 		</div>
 		<h4>Libraries with the most movies</h4>
 		<div class="sample-libraries row">
+		<span class="no-results" *ngIf="mostMoviesLibs.length ===0">No libraries found</span>
 		    <div *ngFor="#library of mostMoviesLibs.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
 		        <div class="movie-poster-container">
 		          <img src="./assets/default_library.png" class="movie-image"[routerLink]="['/Library', { library: library._id }]">
@@ -43,6 +45,7 @@ <h4>Libraries with the most movies</h4>
 		</div>
 		<h4>Libraries with the most comments</h4>
 		<div class="sample-libraries row">
+		<span class="no-results" *ngIf="mostCommentsLibs.length ===0">No libraries found</span>
 		    <div *ngFor="#library of mostCommentsLibs.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
 		        <div class="movie-poster-container">
 		          <img src="./assets/default_library.png" class="movie-image"[routerLink]="['/Library', { library: library._id }]">
@@ -56,6 +59,7 @@ <h4>Libraries with the most comments</h4>
 	</div>
 	<div class="libraries-search" *ngIf="showSearchResults">
 		<div class="sample-libraries row">
+		<span class="no-results" *ngIf="getShownResults.length ===0">No results found</span>
 		    <div *ngFor="#library of getShownResults()" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
 		        <div class="movie-poster-container">
 		          <img src="./assets/default_library.png" class="movie-image"[routerLink]="['/Library', { library: library._id }]">

public/project/components/libraries/library.view.html

@@ -12,6 +12,7 @@ <h1 *ngIf="!hasEditRights()">{{library.name}}</h1>
     <a [routerLink]='["/User", { user: library.user._id }]'>{{library.user.username}}</a>
   </div>
   <div class="library-contents row">
+  <span class="no-results" *ngIf="library.movies.length ===0">No movies found</span>
     <div *ngFor="#movie of library.movies" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
         <button *ngIf="hasEditRights()" class="btn btn-xs glyphicon glyphicon-remove thumbnail-remove" (click)="removeMovie(movie._id)"></button>
         <div class="movie-poster-container-library">
@@ -52,6 +53,7 @@ <h1 *ngIf="!hasEditRights()">{{library.name}}</h1>
   </div>
 
   <h3>COMMENTS</h3>
+  <span class="no-results" *ngIf="library.comments.length ===0">No comments found</span>
   <table>
     <tr *ngFor="#comment of library.comments">
       <td><a [routerLink]='["/User", { user: comment.userId }]'>{{comment.username}}</a></td>

public/project/components/movies/movie.view.html

@@ -65,6 +65,7 @@ <h1 class="movie-title">{{omdbMovie.title}}</h1>
   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" *ngIf="!fetchingLibraries">
     <h3>Libraries With This Title</h3>
     <div class="sample-libraries row">
+    <span class="no-results" *ngIf="movie.libraries.length ===0">No libraries with this title</span>
         <div *ngFor="#library of movie.libraries" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
             <div class="movie-poster-container">
               <img src="./assets/default_library.png" class="movie-image"[routerLink]="['/Library', { library: library._id }]">

public/project/components/movies/movies.view.html

@@ -12,9 +12,8 @@ <h1>Movies</h1>
   	</div>
   	<div *ngIf="!showSearchResults" class="movies-no-search">
 	  	<h4>Highest rated movies</h4>
-
-
 	  	<div class="sample-movies row">
+	  	<span class="no-results" *ngIf="highestRatedMovies.length ===0">No movies found</span>
 		    <div *ngFor="#movie of highestRatedMovies.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
 		        <div class="movie-poster-container">
 		          <img src={{movie.image}} class="movie-image"[routerLink]="['/Movie', { movie: movie.imdbId }]">
@@ -34,6 +33,7 @@ <h4>Highest rated movies</h4>
 		  </div>	
 		<h4>Movies with the most libraries</h4>
 		<div class="sample-movies row">
+		<span class="no-results" *ngIf="mostLibsMovies.length ===0">No movies found</span>
 		    <div *ngFor="#movie of mostLibsMovies.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
 		        <div class="movie-poster-container">
 		          <img src={{movie.image}} class="movie-image" [routerLink]="['/Movie', { movie: movie.imdbId }]">
@@ -46,6 +46,7 @@ <h4>Movies with the most libraries</h4>
 		  </div>
 		<h4>Movies with the most comments</h4>
 		<div class="sample-movies row">
+		<span class="no-results" *ngIf="mostCommentsMovies.length ===0">No movies found</span>
 		    <div *ngFor="#movie of mostCommentsMovies.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
 		        <div class="movie-poster-container">
 		          <img src={{movie.image}} class="movie-image" [routerLink]="['/Movie', { movie: movie.imdbId }]">
@@ -59,6 +60,7 @@ <h4>Movies with the most comments</h4>
 	</div>
 	<div class="movies-search" *ngIf="showSearchResults">
 		<div class="movies-search-results row">
+	<span class="no-results" *ngIf="results.length ===0">No results found</span>
 			<div *ngFor="#movie of results" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
 		        <div class="movie-poster-container">
 		          <img src={{movie.image}} class="movie-image"[routerLink]="['/Movie', { movie: movie.imdbId }]">

public/project/components/users/user.view.html

@@ -18,6 +18,7 @@ <h4 class="no-bot-margin">Create a new library!</h4>
 
     <h3 class="no-bot-margin">{{ getWhoseLibraries() }} libraries</h3>
     <div class="user-libraries row">
+    <span class="no-results" *ngIf="user.libraries.length ===0">No libraries found</span>
         <div *ngFor="#library of user.libraries" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
           <button *ngIf="hasEditRights()" class="btn btn-xs glyphicon glyphicon-remove thumbnail-remove" (click)="removeLibrary(library._id)"></button>
             <div class="movie-poster-container">

public/project/components/users/users.view.html

@@ -13,6 +13,7 @@ <h1>Users</h1>
   	<div *ngIf="!showSearchResults" class="users-no-search">
   	<h4>Users with the most libraries</h4>
   	<div class="sample-users row">
+  	<span class="no-results" *ngIf="mostLibUsers.length ===0">No users found</span>
 	    <div *ngFor="#user of mostLibUsers.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
 	        <div class="movie-poster-container">
 	          <img src="./assets/default_user.png" class="movie-image"[routerLink]="['/User', { user: user._id }]">
@@ -25,6 +26,7 @@ <h4>Users with the most libraries</h4>
 	  </div>
 	<h4>Users with the most ratings</h4>
 	<div class="sample-users row">
+	<span class="no-results" *ngIf="mostRatingsUsers.length ===0">No users found</span>
 		<div *ngFor="#user of mostRatingsUsers.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
 	        <div class="movie-poster-container">
 	          <img src="./assets/default_user.png" class="movie-image"[routerLink]="['/User', { user: user._id }]">
@@ -37,8 +39,8 @@ <h4>Users with the most ratings</h4>
 	  </div>
 	</div>
 	<div class="users-search" *ngIf="showSearchResults">
-
 		<div class="users-search-results row">
+		<span class="no-results" *ngIf="getShownResults.length ===0">No results found</span>
 	    <div *ngFor="#user of getShownResults()" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
 	        <div class="movie-poster-container">
 	          <img src="./assets/default_user.png" class="movie-image"[routerLink]="['/User', { user: user._id }]">