Merge branch 'development' of https://github.com/ushahidi/platform-cl…

…ient-mzima into e2e-tests-for-add-post-to-a-collection

apps/mobile-mzima-client/package.json

@@ -7,7 +7,7 @@
   "dependencies": {
     "@capacitor-community/intercom": "^5.0.0",
     "@capacitor/android": "^5.6.0",
-    "@capacitor/app": "^5.6.0",
+    "@capacitor/app": "^5.0.6",
     "@capacitor/camera": "^5.0.8",
     "@capacitor/core": "^5.0.0",
     "@capacitor/device": "^5.0.6",

apps/mobile-mzima-client/src/app/core/helpers/map.ts

@@ -52,7 +52,7 @@ export const getMapLayers = () => {
       MapQuest: mapboxStaticTiles('Streets', 'mapbox/streets-v11'),
       hOSM: {
         name: 'Humanitarian',
-        url: '//{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
+        url: 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
         layerOptions: {
           attribution:
             '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>, &copy; <a href="http://hot.openstreetmap.org/">Humanitarian OpenStreetMap</a> | <a href="https://www.mapbox.com/feedback/" target="_blank">Improve the underlying map</a>',

apps/mobile-mzima-client/src/app/map/components/map-view/map-view.component.ts

@@ -73,22 +73,37 @@ export class MapViewComponent implements AfterViewInit {
     this.sessionService.mapConfig$.subscribe({
       next: (mapConfig) => {
         if (mapConfig) {
-          this.mapConfig = mapConfig;
-
-          this.baseLayer = this.mapConfig.default_view!.baselayer;
-          const currentLayer = mapHelper.getMapLayer(this.baseLayer, this.isDarkMode);
-          this.offlineLayer = tileLayerOffline(currentLayer.url, currentLayer.layerOptions);
-          this.onlineLayer = tileLayer(currentLayer.url, currentLayer.layerOptions);
-
-          this.leafletOptions = {
-            minZoom: 4,
-            maxZoom: 17,
-            scrollWheelZoom: true,
-            zoomControl: false,
-            layers: [this.offlineLayer, this.onlineLayer],
-            center: [this.mapConfig.default_view!.lat, this.mapConfig.default_view!.lon],
-            zoom: this.mapConfig.default_view!.zoom,
-          };
+          // The map can only be configured using leafletOptions on creation...
+          if (!this.mapConfig && this.mapLayers.length === 0) {
+            this.mapConfig = mapConfig;
+            this.baseLayer = this.mapConfig.default_view!.baselayer;
+            const currentLayer = mapHelper.getMapLayer(this.baseLayer, this.isDarkMode);
+            this.offlineLayer = tileLayerOffline(currentLayer.url, currentLayer.layerOptions);
+            this.onlineLayer = tileLayer(currentLayer.url, currentLayer.layerOptions);
+            this.leafletOptions = {
+              minZoom: 4,
+              maxZoom: 17,
+              scrollWheelZoom: true,
+              zoomControl: false,
+              layers: [this.offlineLayer, this.onlineLayer],
+              center: [this.mapConfig.default_view!.lat, this.mapConfig.default_view!.lon],
+              zoom: this.mapConfig.default_view!.zoom,
+            };
+          } else {
+            // So if the baseLayer has changed and its an already created map, we need to manipulate the layers manually
+            if (this.mapConfig.default_view!.baselayer !== mapConfig.default_view.baselayer) {
+              this.map.eachLayer((layer) => {
+                if (layer instanceof TileLayer) this.map.removeLayer(layer);
+              });
+              this.mapConfig = mapConfig;
+              this.baseLayer = this.mapConfig.default_view!.baselayer;
+              const currentLayer = mapHelper.getMapLayer(this.baseLayer, this.isDarkMode);
+              this.offlineLayer = tileLayerOffline(currentLayer.url, currentLayer.layerOptions);
+              this.onlineLayer = tileLayer(currentLayer.url, currentLayer.layerOptions);
+              this.map.addLayer(this.offlineLayer);
+              this.map.addLayer(this.onlineLayer);
+            }
+          }
           this.markerClusterOptions.maxClusterRadius = this.mapConfig.cluster_radius;
         }
       },

apps/mobile-mzima-client/src/app/profile/information/information.page.html

@@ -74,7 +74,7 @@
         [required]="true"
         formControlName="currentEmail"
         placeholder="Enter your current email"
-        [errors]="changeEmailForm.hasError('notSameAsCurrent') ? ['The entered email does not match the current email. Please make sure to enter the correct email address.'] : undefined"
+        [errors]="changeEmailForm.get('currentEmail')?.touched && changeEmailForm.hasError('notSameAsCurrent') ? ['The entered email does not match the current email. Please make sure to enter the correct email address.'] : undefined"
       >
       </app-form-control>
       <app-form-control

apps/web-mzima-client/src/app/core/helpers/regex.ts

@@ -9,7 +9,7 @@ export const decimalPattern = (value: string) => {
 };
 
 export const alphaNumeric = (value: string) => {
-  const pattern = XRegExp('^[\\p{L}\\p{N}\\s\\-".?!;:,#+_=*&№<>@\'()“”«»\\\\/|]*$', 'gu');
+  const pattern = XRegExp('^[\\p{L}\\p{N}\\s\\-".?!;:,#_=*&№<>@\'()“”«»\\\\/|]*$', 'gu');
   return pattern.test(value);
 };
 

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

@@ -38,19 +38,13 @@ enum FeedMode {
 export class FeedComponent extends MainViewComponent implements OnInit {
   @ViewChild('feed') public feed: ElementRef;
   @ViewChild('masonry') public masonry: NgxMasonryComponent;
-  public override params: GeoJsonFilter = {
-    limit: 20,
-    page: 1,
-    include_unstructured_posts: true,
-    // created_before_by_id: '',
-  };
   private readonly getPostsSubject = new Subject<{
     params: GeoJsonFilter;
     add?: boolean;
   }>();
   public pagination = {
-    page: 1,
-    size: this.params.limit,
+    page: 0,
+    limit: 20,
   };
   public postsSkeleton = new Array(20).fill(''); // used for Post mode's skeleton loader
   public posts: PostResult[] = [];
@@ -117,7 +111,9 @@ export class FeedComponent extends MainViewComponent implements OnInit {
       sessionService,
       breakpointService,
     );
+
     this.checkDesktop();
+    this.setupFeedDefaultFilters();
     this.initGetPostsListener();
 
     if (!this.isDesktop) {
@@ -221,6 +217,17 @@ export class FeedComponent extends MainViewComponent implements OnInit {
     this.eventBusListeners();
   }
 
+  private setupFeedDefaultFilters() {
+    if (this.params.include_unstructured_posts) this.params['form[]']?.push('0');
+    this.params.currentView = 'feed';
+    (this.params.limit = 20),
+      (this.params.page = 1),
+      (this.pagination = {
+        limit: this.params.limit,
+        page: this.params.page,
+      });
+  }
+
   private eventBusListeners() {
     this.eventBusService
       .on(EventType.DeleteCollection)

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

@@ -80,6 +80,7 @@ export class MapComponent extends MainViewComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.reInitParams();
     this.route.params.subscribe(() => {
       this.initCollection();
     });
@@ -130,7 +131,6 @@ export class MapComponent extends MainViewComponent implements OnInit {
   }
 
   loadData(): void {
-    this.reInitParams();
     this.getPostsGeoJson();
   }
 
@@ -140,14 +140,14 @@ export class MapComponent extends MainViewComponent implements OnInit {
         if (this.route.snapshot.data['view'] === 'search' && !this.searchId) return;
         if (this.route.snapshot.data['view'] === 'collection' && !this.collectionId) return;
 
-        this.reInitParams();
         this.getPostsGeoJson();
       },
     });
   }
 
   private reInitParams() {
     this.params.page = 1;
+    this.params.currentView = 'map';
     this.mapLayers.map((layer) => {
       this.map.removeLayer(layer);
       this.markerClusterData.removeLayer(layer);

apps/web-mzima-client/src/app/settings/surveys/survey-item/survey-item.component.html

@@ -2,7 +2,7 @@
   novalidate
   [formGroup]="form"
   class="main-form"
-  (ngSubmit)="save()"
+  (ngSubmit)="form.valid && save()"
   [ngStyle]="{
     '--color': this.form.get('color')?.value
   }"

apps/web-mzima-client/src/app/settings/surveys/survey-item/survey-item.component.ts

@@ -8,7 +8,7 @@ import { LanguageInterface } from '@models';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { BreakpointService, SessionService } from '@services';
 import { BaseComponent } from '../../../base.component';
-import { noWhitespaceValidator } from '../../../core/validators';
+import { AlphanumericValidatorValidator, noWhitespaceValidator } from '../../../core/validators';
 import { SelectLanguagesModalComponent } from '../../../shared/components';
 import { CreateTaskModalComponent } from '../create-task-modal/create-task-modal.component';
 import { SurveyTaskComponent } from '../survey-task/survey-task.component';
@@ -68,7 +68,7 @@ export class SurveyItemComponent extends BaseComponent implements OnInit {
     this.checkDesktop();
 
     this.form = this.formBuilder.group({
-      name: ['', [Validators.required, noWhitespaceValidator]],
+      name: ['', [Validators.required, noWhitespaceValidator, AlphanumericValidatorValidator()]],
       description: [''],
       color: [null],
       enabled_languages: this.formBuilder.group({
@@ -289,7 +289,8 @@ export class SurveyItemComponent extends BaseComponent implements OnInit {
         error: ({ error }) => {
           this.submitted = false;
           if (error.errors.status === 422) {
-            this.notification.showError(JSON.stringify(error.errors.message));
+            this.form.controls['name'].setErrors({ invalidCharacters: true });
+            this.notification.showError('Please remove invalid characters (e.g. +, $, ^, =)');
           } else {
             this.notification.showError(JSON.stringify(error.name[0]));
           }

apps/web-mzima-client/src/app/shared/components/collections/collections.component.scss

@@ -37,7 +37,7 @@
   margin: 0 -8px -24px;
   justify-content: flex-start;
 
-  @include breakpoint-max($mobile) {
+  @include breakpoint-max($tablet) {
     margin: 0;
     display: block;
   }

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

@@ -6,6 +6,7 @@ import { surveyHelper, formHelper } from '@helpers';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateService } from '@ngx-translate/core';
 import { SessionService, BreakpointService, EventBusService, EventType } from '@services';
+import { debounceTime } from 'rxjs';
 import {
   CollectionsService,
   NotificationsService,
@@ -75,6 +76,7 @@ export class CollectionsComponent extends BaseComponent implements OnInit {
     this.initializeForm();
     this.formSubscribe();
     this.checkPermission();
+    this.loadSearchCollections();
 
     const permissions = localStorage.getItem('USH_permissions')!;
     this.featuredEnabled = permissions ? permissions.split(',').includes('Manage Posts') : false;
@@ -90,6 +92,15 @@ export class CollectionsComponent extends BaseComponent implements OnInit {
     }
   }
 
+  private loadSearchCollections() {
+    this.searchForm
+      .get('query')
+      ?.valueChanges.pipe(debounceTime(500), untilDestroyed(this))
+      .subscribe((query: string) => {
+        this.loadData(query);
+      });
+  }
+
   private initializeForm() {
     this.collectionForm = this.formBuilder.group({
       name: ['', [Validators.required]],

apps/web-mzima-client/src/app/shared/components/fragments/menu-list-links/menu-list-links.component.html

@@ -6,30 +6,15 @@
         class="sidebar-menu-button"
         [data-qa]="'btn-' + item.icon"
         [attr.data-onboard-id]="'sidebar-btn-' + item.icon"
-        *ngIf="item.router; else menuAction"
-        [routerLink]="createRouterLink(item.router)"
+        [routerLink]="item.router && createRouterLink(item.router)"
         routerLinkActive="sidebar-menu-button--active"
-        (click)="registerPage($event, item.router, item.label)"
+        (click)="item.router && registerPage($event, item.router, item.label)"
       >
         <mat-icon class="sidebar-menu-button__icon" [svgIcon]="item.icon"></mat-icon>
         <span class="sidebar-menu-button__title">
           {{ item.label | translate }}
         </span>
       </a>
-      <ng-template #menuAction>
-        <button
-          [id]="item.ref"
-          class="sidebar-menu-button"
-          [data-qa]="'btn-' + item.icon"
-          [attr.data-onboard-id]="'sidebar-btn-' + item.icon"
-          (click)="item.action && item.action()"
-        >
-          <mat-icon class="sidebar-menu-button__icon" [svgIcon]="item.icon"></mat-icon>
-          <span class="sidebar-menu-button__title">
-            {{ item.label | translate }}
-          </span>
-        </button>
-      </ng-template>
     </ng-container>
   </ng-container>
 </nav>

apps/web-mzima-client/src/app/shared/components/fragments/menu-list-non-links/menu-list-non-links.component.html

@@ -6,30 +6,16 @@
     <ng-container *ngIf="item.forDesktop && (!item.adminGuard || isHost)">
       <button
         [id]="item.ref"
-        (click)="item.action()"
+        (click)="item.action && item.action()"
         class="sidebar-menu-button"
         [data-qa]="'btn-' + item.icon"
-        *ngIf="item.action; else menuLink"
         [attr.data-onboard-id]="'sidebar-btn-' + item.icon"
       >
         <mat-icon class="sidebar-menu-button__icon" [svgIcon]="item.icon"></mat-icon>
-        <span [attr.data-qa]="'auth-btn-label'" class="sidebar-menu-button__title">{{ item.label | translate }}</span>
+        <span [attr.data-qa]="'auth-btn-label'" class="sidebar-menu-button__title">{{
+          item.label | translate
+        }}</span>
       </button>
-      <ng-template #menuLink>
-        <a
-          [id]="item.ref"
-          class="sidebar-menu-button"
-          [data-qa]="'btn-' + item.icon"
-          (click)="item.action && item.action()"
-          [attr.data-onboard-id]="'sidebar-btn-' + item.icon"
-          routerLinkActive="sidebar-menu-button--active"
-        >
-          <mat-icon class="sidebar-menu-button__icon" [svgIcon]="item.icon"></mat-icon>
-          <span [attr.data-qa]="'auth-btn-label'" class="sidebar-menu-button__title">
-            {{ item.label | translate }}
-          </span>
-        </a>
-      </ng-template>
     </ng-container>
   </ng-container>
 </div>

apps/web-mzima-client/src/app/shared/components/fragments/mobile-menu/mobile-menu.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
 import { Observable, fromEvent } from 'rxjs';
 import { NavToolbarService } from '../../../helpers/navtoolbar.service';
 import { BaseComponent } from '../../../../base.component';
@@ -10,6 +10,7 @@ import { BreakpointService, SessionService } from '@services';
   styleUrls: ['./mobile-menu.component.scss'],
 })
 export class MobileMenuComponent extends BaseComponent {
+  @Output() isBurgerMenuOpenEvent = new EventEmitter<boolean>();
   public isBurgerMenuOpen: boolean;
   public clickObservable: Observable<Event> = fromEvent(document, 'click');
 
@@ -31,6 +32,12 @@ export class MobileMenuComponent extends BaseComponent {
       this.isBurgerMenuOpen
         ? document.body.classList.add('burger-menu-open')
         : document.body.classList.remove('burger-menu-open');
+      // Get isBurgerMenuOpen for use in parent component to hide (the whole of) mobile-menu
+      this.getIsBurgerMenuOpen(this.isBurgerMenuOpen);
     });
   }
+
+  public getIsBurgerMenuOpen(value: boolean) {
+    this.isBurgerMenuOpenEvent.emit(value);
+  }
 }