Merge branch 'development' into e2e-tests-data-view-bulk-actions-sele…

…ct-all

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

@@ -1,5 +1,11 @@
 <app-onboarding
-  *ngIf="!isOnboardingDone && isDesktop && checkAllowedAccessToSite() && showOnboarding"
+  *ngIf="
+    !isOnboardingDone &&
+    deploymentFound &&
+    isDesktop &&
+    checkAllowedAccessToSite() &&
+    showOnboarding
+  "
 ></app-onboarding>
 
 <mat-sidenav-container
@@ -32,6 +38,6 @@
   </mat-sidenav-content>
 </mat-sidenav-container>
 
-<app-cookies-notification></app-cookies-notification>
+<app-cookies-notification *ngIf="deploymentFound"></app-cookies-notification>
 
 <app-spinner fullscreen="true" *ngIf="isShowLoader"></app-spinner>

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

@@ -16,7 +16,7 @@ import {
   LoaderService,
   SessionService,
 } from '@services';
-import { filter } from 'rxjs';
+import { debounceTime, filter } from 'rxjs';
 import { BaseComponent } from './base.component';
 import { EnumGtmEvent } from './core/enums/gtm';
 import { Intercom } from '@supy-io/ngx-intercom';
@@ -35,6 +35,7 @@ export class AppComponent extends BaseComponent implements OnInit {
   public isRTL?: boolean;
   public isOnboardingDone = false;
   public showOnboarding = true;
+  public deploymentFound = false;
 
   constructor(
     protected override sessionService: SessionService,
@@ -99,6 +100,17 @@ export class AppComponent extends BaseComponent implements OnInit {
       next: () => (this.isOnboardingDone = false),
     });
 
+    this.sessionService.configLoaded$
+      .pipe(
+        debounceTime(500),
+        filter((configLoaded) => configLoaded === true),
+      )
+      .subscribe(() => {
+        if (this.sessionService.siteFound) {
+          this.deploymentFound = true;
+        }
+      });
+
     const isOnboardingDone = localStorage.getItem(
       this.sessionService.getLocalStorageNameMapper('is_onboarding_done')!,
     );

apps/web-mzima-client/src/app/core/enums/icons.ts

@@ -74,5 +74,5 @@ export enum Icons {
   infoCircle = 'info-circle',
   thumbUp = 'thumb-up',
   ellipses = 'ellipses',
-  https = 'https',
+  lock = 'lock',
 }

apps/web-mzima-client/src/app/core/guards/deployment-found.guard.ts

@@ -11,7 +11,7 @@ export class DeploymentFoundGuard implements CanActivate {
 
   canActivate(): Observable<boolean | UrlTree> {
     return this.service.configLoaded$.pipe(
-      filter((configLoaded) => configLoaded !== undefined),
+      filter((configLoaded) => configLoaded !== false),
       take(1),
       switchMap((configLoaded) => {
         const siteFound: boolean = this.service.siteFound;

apps/web-mzima-client/src/app/core/services/config.service.ts

@@ -47,7 +47,7 @@ export class ConfigService {
           },
           error: (error) => {
             if (error.status === 404 && error.error.errors[0].message === 'Deployment not found')
-              this.sessionService.configLoaded = false;
+              this.sessionService.configLoaded = true;
             else setTimeout(() => this.getConfig(), 5000);
           },
         }),

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

@@ -253,7 +253,7 @@ <h3 class="menu-title">{{ 'app.mark_as' | translate }}</h3>
                 (refresh)="refreshPost(post)"
                 (deleted)="postDeleted([post])"
                 (click)="showPostDetails(post)"
-                [selectable]="isBulkOptionsVisible"
+                [selectable]="isBulkOptionsVisible && !isLocked(post)"
                 [isChecked]="isPostChecked(post)"
                 (statusChanged)="postStatusChanged()"
                 (selected)="isPostSelected($event, post)"

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

@@ -9,7 +9,7 @@ import { searchFormHelper } from '@helpers';
 import { TranslateService } from '@ngx-translate/core';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { NgxMasonryComponent, NgxMasonryOptions } from 'ngx-masonry';
-import { filter, forkJoin, Subject, Subscription } from 'rxjs';
+import { filter, forkJoin, Subscription } from 'rxjs';
 import { PostDetailsModalComponent } from '../map';
 import { MainViewComponent } from '@shared';
 import { SessionService, BreakpointService, EventBusService, EventType } from '@services';
@@ -18,7 +18,6 @@ import { LanguageService } from '../core/services/language.service';
 import {
   SavedsearchesService,
   PostsService,
-  GeoJsonFilter,
   PostResult,
   PostStatus,
   postHelpers,
@@ -43,10 +42,10 @@ export class FeedComponent extends MainViewComponent implements OnInit, OnDestro
   private _routerEvent = Subscription.EMPTY;
   @ViewChild('feed') public feed: ElementRef;
   @ViewChild('masonry') public masonry: NgxMasonryComponent;
-  private readonly getPostsSubject = new Subject<{
-    params: GeoJsonFilter;
-    add?: boolean;
-  }>();
+  // private readonly getPostsSubject = new Subject<{
+  //   params: GeoJsonFilter;
+  //   add?: boolean;
+  // }>();
   public pagination = {
     page: 0,
     limit: 20,
@@ -104,6 +103,7 @@ export class FeedComponent extends MainViewComponent implements OnInit, OnDestro
   public initialLoad = true;
   public urlFromRouteTrigger: string;
   public urlAfterInteractionWithFilters: string;
+  private postRequests: Subscription[] = [];
 
   constructor(
     protected override router: Router,
@@ -428,17 +428,26 @@ export class FeedComponent extends MainViewComponent implements OnInit, OnDestro
   loadData(): void {}
 
   private getPosts({ params, loadMore }: { params: any; loadMore?: boolean }): void {
-    /* --------------------------------------------
-      Work with Posts Service to get posts from API
-    ----------------------------------------------*/
-    this.postsService.getPosts('', { ...params, ...this.activeSorting }).subscribe({
-      next: (data) => {
-        this.posts = loadMore ? [...this.posts, ...data.results] : data.results;
-      },
-      // complete: () => {
-      //   // console.log('complete?');
-      // },
+    // Call the posts service, keeping the subscription for later
+    const postRequestSubscription = this.postsService
+      .getPosts('', { ...params, ...this.activeSorting })
+      .subscribe({
+        next: (data) => {
+          this.posts = loadMore ? [...this.posts, ...data.results] : data.results;
+        },
+      });
+
+    // Unsubscribe and destroy existing subscriptions....
+    this.postRequests.forEach((subscription) => {
+      subscription.unsubscribe();
     });
+
+    // Reset everything so the user sees some loading indicators
+    this.posts = [];
+    this.isLoading = true;
+
+    // Keep the subscription so we can end it later if its replaced with a new api call
+    this.postRequests.push(postRequestSubscription);
   }
 
   public updateMasonry(): void {
@@ -791,7 +800,9 @@ export class FeedComponent extends MainViewComponent implements OnInit, OnDestro
       });
     }
   }
-
+  public isLocked(post: PostResult) {
+    return this.postsService.isPostLockedForCurrentUser(post);
+  }
   public postStatusChanged(): void {
     this.getPosts({ params: this.params });
     this.selectedPosts = [];

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

@@ -48,7 +48,7 @@ export class MapComponent extends MainViewComponent implements OnInit {
   fitBoundsOptions: FitBoundsOptions = {
     animate: true,
   };
-  cachedFilter: string;
+  // cachedFilter: string;
   filtersSubscription$: Observable<any>;
   public leafletOptions: MapOptions;
   public progress = 0;
@@ -310,6 +310,12 @@ export class MapComponent extends MainViewComponent implements OnInit {
           const isThisInProgress =
             pageNumber > 1 && posts.meta.total !== this.mapLayers[0].getLayers().length;
 
+          const doMarkersAndResultsMismatch =
+            this.mapLayers.length === 0 ||
+            posts.meta.total !== this.mapLayers[0].getLayers().length;
+
+          const isFirstAndOnlyPage = pageNumber === 1 && pageNumber === posts.meta.last_page;
+
           // Has the filter changed from when we last saw it?
           let hasTheFilterChanged = false;
           if (filter !== undefined) {
@@ -325,7 +331,8 @@ export class MapComponent extends MainViewComponent implements OnInit {
           if (
             isFirstLayerEmpty ||
             hasTheFilterChanged ||
-            isThisInProgress // ||
+            isThisInProgress ||
+            (isFirstAndOnlyPage && doMarkersAndResultsMismatch)
             // isLayerCountMismatch
           ) {
             if (!isFirstLayerEmpty && !isThisInProgress) {

apps/web-mzima-client/src/app/post/post-conversation/post-conversation.component.html

@@ -1,4 +1,5 @@
-<div class="page-content post-conversation">
+<!-- TODO: remove *ngIf="source !== 'sislog'" once reply is working -->
+<div class="page-content post-conversation" *ngIf="source !== 'sislog'">
   <ng-container>
     <h2>{{ 'post.messages.title' | translate }}</h2>
   </ng-container>

apps/web-mzima-client/src/app/post/post-conversation/post-conversation.component.ts

@@ -24,10 +24,12 @@ export class PostConversationComponent implements OnInit {
   public messageLimit: number = 5;
   public newMessage = new FormControl();
   public sender: string;
+  public source: string;
 
   constructor(private messagesService: MessagesService, private sessionService: SessionService) {}
 
   ngOnInit(): void {
+    this.source = this.post?.contact?.data_source;
     this.getMessagesData();
     this.getSender();
   }

apps/web-mzima-client/src/app/post/post-edit/post-edit.component.html

@@ -72,28 +72,6 @@ <h1 class="survey-name">{{ surveyName }}</h1>
         <div [ngStyle]="{ '--color': color }">
           <ng-container *ngIf="task.type !== 'post'">
             <h2 class="task-label">{{ task.translations[activeLanguage]?.label || task.label }}</h2>
-
-            <div *ngIf="task.show_when_published">
-              <p>{{ 'survey.task_visible_when_published' | translate }}</p>
-            </div>
-
-            <div *ngIf="task.task_is_internal_only">
-              <p>{{ 'survey.marked_for_internal' | translate }}</p>
-            </div>
-
-            <div class="form-row">
-              <mat-slide-toggle
-                class="task-complete"
-                name="accept-survey"
-                [required]="task.reqiured"
-                labelPosition="before"
-                [checked]="task.completed"
-                (change)="taskComplete(task, $event)"
-              >
-                {{ 'post.task_completed' | translate }}
-                <span class="color-accent" *ngIf="task.required">*</span>
-              </mat-slide-toggle>
-            </div>
           </ng-container>
 
           <div
@@ -105,7 +83,7 @@ <h2 class="task-label">{{ task.translations[activeLanguage]?.label || task.label
                 aria-label="Field responses will be private"
                 *ngIf="field.response_private"
                 icon
-                svgIcon="https"
+                svgIcon="lock"
                 class="field__icon"
               ></mat-icon>
               {{ field?.translations[activeLanguage]?.label || field?.label }}
@@ -536,6 +514,93 @@ <h2 class="task-label">{{ task.translations[activeLanguage]?.label || task.label
               </p>
             </mat-error>
           </div>
+
+          <ng-container *ngIf="task.type !== 'post'">
+            <div
+              class="task__info-banner task__info-banner-warning"
+              *ngIf="task.show_when_published"
+            >
+              <div>
+                <mat-icon
+                  icon
+                  svgIcon="info-circle"
+                  class="task__info-icon task__info-icon-warning"
+                ></mat-icon>
+              </div>
+              <p>{{ 'survey.task_visible_when_published' | translate }}</p>
+            </div>
+
+            <div
+              class="task__info-banner task__info-banner-warning"
+              *ngIf="task.task_is_internal_only"
+            >
+              <div>
+                <mat-icon
+                  icon
+                  svgIcon="info-circle"
+                  class="task__info-icon task__info-icon-warning"
+                >
+                </mat-icon>
+              </div>
+              <div>
+                <p>{{ 'survey.marked_for_internal.header' | translate }}</p>
+                <p>{{ 'survey.marked_for_internal.body' | translate }}</p>
+              </div>
+            </div>
+
+            <!---------------------------------------------------------------------------------
+            Depending on if a task is marked as completed or not (through the toggle),
+            the id for that task is added to or removed from "this.taskForm.value" accordingly.
+            Task info banner's color change (for an individual task) is controlled by whether that
+            task's id is present or absent in "this.taskForm.value" - i.e. more like the
+            ngIf value is supplied directly by the form in "real time" 
+            ----------------------------------------------------------------------------------->
+            <div
+              class="task__info-banner"
+              [ngClass]="{
+                'task__info-banner-completed': taskForm.value[task.id],
+                'task__info-banner-warning': !taskForm.value[task.id]
+              }"
+            >
+              <div>
+                <mat-icon
+                  icon
+                  [svgIcon]="taskForm.value[task.id] ? 'thumb-up' : 'info-circle'"
+                  class="task__info-icon"
+                  [ngClass]="{
+                    'task__info-icon-completed': taskForm.value[task.id],
+                    'task__info-icon-warning': !taskForm.value[task.id]
+                  }"
+                >
+                </mat-icon>
+              </div>
+              <div>
+                <p>
+                  {{
+                    (taskForm.value[task.id]
+                      ? 'survey.task_is_marked_as.completed'
+                      : 'survey.task_is_marked_as.not_completed'
+                    ) | translate : { taskName: task.label }
+                  }}
+                </p>
+              </div>
+            </div>
+            <!---->
+
+            <div class="form-row">
+              <mat-slide-toggle
+                class="task-complete"
+                name="accept-survey"
+                [required]="task.reqiured"
+                labelPosition="after"
+                [checked]="task.completed"
+                (change)="taskComplete(task, $event)"
+              >
+                {{ 'post.task_completed' | translate }}
+                <span class="color-accent" *ngIf="task.required">*</span>
+              </mat-slide-toggle>
+            </div>
+          </ng-container>
         </div>
       </div>