[USH-1238] "There are no posts yet" - Separate the text for when there are no posts & when no filters match

apps/web-mzima-client/src/app/feed/feed.component.html

@@ -212,9 +212,28 @@ <h3 class="menu-title">{{ 'app.mark_as' | translate }}</h3>
       [attr.data-qa]="'posts'"
     >
       <!-- No posts -->
-      <ng-container *ngIf="!posts.length">
-        <span class="posts-empty">{{ 'post.no_posts_yet' | translate }}</span>
-      </ng-container>
+      <span *ngIf="!posts.length" class="posts-empty">
+        <ng-container *ngIf="isDefaultFilters">
+          <!-- No posts 1a: When there are no posts at all in the deployment or there no posts because none can be viewed by a user due to the permissions they have  -->
+          <ng-container *ngIf="!userIsSearchingPostsByKeyword">
+            {{ 'post.no_posts_yet' | translate }}
+          </ng-container>
+          <!-- No posts 1b: Keyword search (when default filters is on) -->
+          <ng-container *ngIf="userIsSearchingPostsByKeyword">
+            {{ 'post.no_posts_match_search' | translate }}
+          </ng-container>
+        </ng-container>
+        <ng-container *ngIf="!isDefaultFilters">
+          <!-- No posts 2a: When there's no posts matching user's filter selection/combination -->
+          <ng-container *ngIf="!userIsSearchingPostsByKeyword">
+            {{ 'post.no_posts_match_your_current_filters' | translate }}
+          </ng-container>
+          <!-- No posts 2b: Keyword search (when not in default filters) -->
+          <ng-container *ngIf="userIsSearchingPostsByKeyword">
+            {{ 'post.no_posts_match_search_plus_filter' | translate }}
+          </ng-container>
+        </ng-container>
+      </span>
       <!-- When there are posts -->
       <ng-container *ngIf="posts.length">
         <div

apps/web-mzima-client/src/app/feed/feed.component.scss

@@ -162,12 +162,16 @@
 }
 
 .posts-empty {
-  width: 100%;
   display: block;
-  margin: 20vh 0;
+  max-width: 400px;
+  margin: 7vh auto;
+  padding: 20px 10px;
   font-size: 16px;
   line-height: 1.5;
   text-align: center;
+  background: var(--color-light);
+  border-radius: 3px;
+  border: 1px solid var(--color-neutral-30);
 }
 
 .load-more {

apps/web-mzima-client/src/app/feed/feed.component.ts

@@ -22,6 +22,7 @@ import {
   PostStatus,
   postHelpers,
 } from '@mzima-client/sdk';
+import _ from 'lodash';
 
 enum FeedMode {
   Preview = 'PREVIEW',
@@ -63,6 +64,8 @@ export class FeedComponent extends MainViewComponent implements OnInit, OnDestro
   public posts: PostResult[] = [];
   public postCurrentLength = 0;
   public isLoading: boolean;
+  public isDefaultFilters: boolean;
+  public userIsSearchingPostsByKeyword: number;
   public atLeastOnePostExists: boolean;
   public noPostsYet: boolean = false;
   public loadingMorePosts: boolean;
@@ -277,8 +280,21 @@ export class FeedComponent extends MainViewComponent implements OnInit, OnDestro
     ----------------------------------------------*/
     this.postsService.isLoadingPosts$.pipe(untilDestroyed(this)).subscribe({
       next: (isLoading: boolean) => {
-        // Get end of post load directly from the posts API, use it to set is loading state to false
-        this.isLoading = isLoading;
+        // ---------------
+        this.sessionService.currentUserData$.pipe(untilDestroyed(this)).subscribe({
+          next: (currentUser) => {
+            // Check if default filters is on or not to display "no posts" messages accordingly
+            this.isDefaultFilters = this.getDefaultFilters(currentUser.role as string);
+            // ---------------
+            // Check if default filters is on or not to display "no posts" messages accordingly
+            const searchPostsByKeyword = localStorage.getItem('USH_searchPostByKeyword') as string;
+            this.userIsSearchingPostsByKeyword = searchPostsByKeyword?.length;
+            // ---------------
+            // Get end of post load directly from the posts API, use it to set is loading state to false
+            this.isLoading = isLoading;
+          },
+        });
+        // ---------------
       },
     });
 
@@ -515,6 +531,61 @@ export class FeedComponent extends MainViewComponent implements OnInit, OnDestro
     },
   };
 
+  public getDefaultFilters(isUserLoggedIn: string) {
+    /* --------------------------------------------
+      Goal: To help us know about the DEFAULT state
+      of individual filters ALL AT ONCE, so that we 
+      can use it to "make decisions" for anything
+      relating to DEFAULT FILTERS on the UI.
+    ---------------------------------------------*/
+    const filtersObj = JSON.parse(localStorage.getItem('USH_filters') as string);
+
+    const filtersDefaultStatus = {
+      // ---------------
+      surveys: JSON.parse(localStorage.getItem('USH_allSurveysChecked') as string),
+      // ---------------
+      source: _.isEqual(filtersObj.source, [
+        'web',
+        'mobile',
+        'email',
+        'sms',
+        'twitter',
+        'ussd',
+        'whatsapp',
+      ]),
+      // ---------------
+      status: isUserLoggedIn
+        ? _.isEqual(filtersObj.status, ['published', 'draft'])
+        : _.isEqual(filtersObj.status, ['published']),
+      // ---------------
+      categories: _.isEqual(filtersObj.tags, []) || filtersObj.tags === '',
+      // ---------------
+      date_range:
+        filtersObj.date === '' ||
+        _.isEqual(filtersObj.date, {
+          start: '',
+          end: '',
+        }),
+      // ---------------
+      location:
+        filtersObj.center_point === '' ||
+        _.isEqual(filtersObj.center_point, {
+          location: {
+            lat: null,
+            lng: null,
+          },
+          distance: 1,
+        }) ||
+        _.isEqual(filtersObj.center_point, {
+          location: {},
+          distance: 1,
+        }),
+      // ---------------
+    };
+
+    return Object.values(filtersDefaultStatus).every((filterType) => filterType === true);
+  }
+
   public showPostDetails(post: PostResult): void {
     //---------------------------
     this.onlyModeUIChanged = true;

apps/web-mzima-client/src/app/shared/components/search-form/search-form.component.ts

@@ -225,6 +225,7 @@ export class SearchFormComponent extends BaseComponent implements OnInit {
   }
 
   private initFilters() {
+    this.clearPostsResults();
     if (this.filters) {
       const filters = JSON.parse(this.filters!);
       if (!this.router.url.includes('collection')) {
@@ -795,6 +796,10 @@ export class SearchFormComponent extends BaseComponent implements OnInit {
 
   public searchPosts(): void {
     this.searchSubject.next(this.searchQuery);
+    //------------------------
+    // Save to localstorage: Needed for "search + filter" detection for posts ("no posts" message display particularly)
+    localStorage.setItem('USH_searchPostByKeyword', this.searchQuery);
+    //------------------------
   }
 
   public displayFn(city: SearchResponse): string {

apps/web-mzima-client/src/assets/locales/en.json

@@ -793,6 +793,9 @@
     "all_posts": "All Posts",
     "no_search_results": "Your search didn't match any posts",
     "no_search_results_location": "Your search didn't match any posts with location information",
+    "no_posts_match_search": "No posts match your keyword search. Please change or clear keyword search to see matching posts.",
+    "no_posts_match_search_plus_filter": "No posts match your keyword search + filters. Please change or clear keyword search and/or filters to see matching posts.",
+    "no_posts_match_your_current_filters": "No posts match the current filters. Please change or clear filters to see matching posts.",
     "no_posts_yet": "There are no posts yet!",
     "no_posts_yet_location": "There are no posts with location information yet!",
     "add_first_post": "Add the first post",