Using only-parameters for surveys

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

@@ -14,19 +14,18 @@
 <strong mat-dialog-title>{{ 'survey.choose_survey' | translate }}</strong>
 
 <div mat-dialog-content>
-  <app-spinner class="spinner" *ngIf="!types"></app-spinner>
-  <ul role="list" class="types-list" *ngIf="!!types" [data-qa]="'add-post-modal-surveys'">
-    <li *ngFor="let type of types">
+  <app-spinner class="spinner" *ngIf="!surveys"></app-spinner>
+  <ul role="list" class="types-list" [data-qa]="'add-post-modal-surveys'">
+    <li *ngFor="let survey of surveys | async">
       <div
         matRipple
-        *ngIf="type.visible"
         role="listitem"
-        [ngStyle]="{ '--color': type.color }"
-        [mat-dialog-close]="{ type: type.id }"
+        [ngStyle]="{ '--color': survey.color }"
+        [mat-dialog-close]="{ type: survey.id }"
         class="type-item"
-        [data-qa]="'add-post-modal-surveys-item' + type.id"
+        [data-qa]="'add-post-modal-surveys-item' + survey.id"
       >
-        {{ type.name }}
+        {{ survey.name }}
       </div>
     </li>
   </ul>

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

@@ -1,30 +1,37 @@
-import { Component } from '@angular/core';
-import { SurveysService, SurveyItem, generalHelpers } from '@mzima-client/sdk';
-
+import { Component, OnInit } from '@angular/core';
+import { SurveysService, generalHelpers } from '@mzima-client/sdk';
+import { Observable, of } from 'rxjs';
 @Component({
   selector: 'app-add-post-modal',
   templateUrl: './add-post-modal.component.html',
   styleUrls: ['./add-post-modal.component.scss'],
 })
-export class AddPostModalComponent {
-  public types: SurveyItem[];
+export class AddPostModalComponent implements OnInit {
+  public surveys: Observable<any>;
+
+  constructor(private surveysService: SurveysService) {}
+  ngOnInit() {
+    this.getSurveys();
+  }
 
-  constructor(private surveysService: SurveysService) {
-    this.getPostAllowedTypes();
+  private getSurveys(): void {
+    this.surveysService
+      .getSurveys('', { only: 'name,color,everyone_can_create,can_create' })
+      .subscribe(({ results }) => {
+        let surveys = this.mapVisibility(results);
+        surveys = surveys.filter((survey: any) => survey.visible === true);
+        this.surveys = of(surveys);
+      });
   }
 
-  private getPostAllowedTypes(): void {
-    this.surveysService.get().subscribe({
-      next: (types) => {
-        this.types = types.results || [];
-        this.types.map((el) => {
-          el.visible =
-            el.everyone_can_create ||
-            el.can_create.includes(
-              localStorage.getItem(`${generalHelpers.CONST.LOCAL_STORAGE_PREFIX}role`),
-            );
-        });
-      },
+  private mapVisibility(surveys: any) {
+    return surveys.map((el: any) => {
+      el.visible =
+        el.everyone_can_create ||
+        el.can_create.includes(
+          localStorage.getItem(`${generalHelpers.CONST.LOCAL_STORAGE_PREFIX}role`),
+        );
+      return el;
     });
   }
 }

apps/web-mzima-client/src/app/settings/data-import/data-import.component.html

@@ -26,12 +26,11 @@ <h1 *ngIf="isDesktop">{{ 'app.import' | translate }}</h1>
     <mat-select
       [data-qa]="'select-survey'"
       disableOptionCentering
-      [(value)]="selectedForm"
       placeholder="{{ 'survey.choose_survey' | translate }}"
-      (selectionChange)="formChanged()"
+      (selectionChange)="formChanged($event.value)"
     >
-      <mat-option *ngFor="let option of surveys | async" [value]="option">
-        {{ option.name }}
+      <mat-option *ngFor="let survey of surveys" [value]="survey">
+        {{ survey.name }}
       </mat-option>
     </mat-select>
   </mat-form-field>
@@ -167,7 +166,7 @@ <h1 *ngIf="isDesktop">{{ 'app.import' | translate }}</h1>
                 [placeholder]="'data_import.leave_empty' | translate"
               >
                 <mat-option selected="selected" value="">
-                  {{ 'data_import.leave_empty' | translate }} {{ field.key }}
+                  {{ 'data_import.leave_empty' | translate }}
                 </mat-option>
                 <mat-option *ngFor="let column of uploadedCSV.columns; let i = index" [value]="i">
                   {{ column }}

apps/web-mzima-client/src/app/settings/data-import/data-import.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { omit, clone, invert, keys, includes } from 'lodash';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
 import {
   DataImportService,
   FormsService,
@@ -43,11 +43,12 @@ export class DataImportComponent extends BaseComponent implements OnInit {
   uploadErrors: any[] = [];
   importErrors: boolean = false;
   fileChanged = false;
-  public surveys: Observable<any>;
+  public surveys: SurveyItem[] = [];
 
   statusOption: string;
   selectedStatus: PostStatus;
   displayedColumns: string[] = ['survey', 'csv'];
+  public isLoading = false;
 
   constructor(
     protected override sessionService: SessionService,
@@ -72,8 +73,12 @@ export class DataImportComponent extends BaseComponent implements OnInit {
   }
 
   getSurveys() {
-    this.surveysService.get().subscribe((result) => {
-      this.surveys = of(result.results);
+    this.isLoading = true;
+    this.surveysService.getSurveys('', { only: 'id,name' }).subscribe({
+      next: (result) => {
+        this.isLoading = false;
+        this.surveys = result.results;
+      },
     });
   }
   loadData(): void {}
@@ -197,7 +202,11 @@ export class DataImportComponent extends BaseComponent implements OnInit {
     return field.key;
   }
 
-  formChanged() {
+  formChanged(selectedSurvey: SurveyItem) {
+    this.selectedForm = selectedSurvey;
+    this.surveysService.getSurveyById(this.selectedForm.id).subscribe((result) => {
+      this.selectedForm = result.result;
+    });
     if (this.selectedFile && this.selectedForm) {
       this.checkFormAndFile();
     }

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

@@ -21,6 +21,7 @@
     (selectLanguageCall)="chooseTranslation($event)"
   >
   </app-settings-header>
+  <app-spinner class="spinner" *ngIf="isLoading"></app-spinner>
 
   <app-survey-task
     #configTask
@@ -29,7 +30,7 @@
     [isMain]="true"
     [survey]="surveyObject"
     (taskChange)="taskUpdate($event)"
-    *ngIf="mainPost"
+    *ngIf="mainPost && !isLoading"
     (colorSelected)="setNewColor($event)"
     (languageChange)="languageChange($event)"
     [isDefaultLanguageSelected]="isDefaultLanguageSelected"
@@ -107,7 +108,7 @@
   </app-survey-task>
 </form>
 
-<div class="form-head-panel">
+<div class="form-head-panel" *ngIf="!isLoading">
   <h1>{{ 'survey.tasks' | translate }}</h1>
   <mzima-client-button
     color="secondary"
@@ -134,7 +135,7 @@ <h1>{{ 'survey.tasks' | translate }}</h1>
 </ng-container>
 
 <ng-template #noTasks>
-  <div class="form-row empty">{{ 'survey.no_tasks' | translate }}</div>
+  <div class="form-row empty" *ngIf="!isLoading">{{ 'survey.no_tasks' | translate }}</div>
 </ng-template>
 
 <div class="form-controls-spacer" *ngIf="!isDesktop"></div>

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

@@ -38,6 +38,7 @@ export class SurveyItemComponent extends BaseComponent implements OnInit {
   public name: string;
   public form: FormGroup;
   public isEdit = false;
+  public isLoading = false;
   roles: RoleResult[] = [];
   surveyId: string;
   additionalTasks: SurveyItemTask[] = [];
@@ -114,10 +115,12 @@ export class SurveyItemComponent extends BaseComponent implements OnInit {
     this.initRoles();
     const id = this.route.snapshot.paramMap.get('id');
     if (id) {
+      this.isLoading = true;
       this.surveyId = id;
       this.isEdit = !!id;
       this.surveysService.getSurveyById(id).subscribe({
         next: (response) => {
+          this.isLoading = false;
           this.updateForm(response.result);
           this.initLanguages(response.result.enabled_languages);
           this.initTasks();

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

@@ -49,6 +49,7 @@ export class SurveysComponent implements OnInit {
         page: this.params.page,
         order: this.params.order,
         limit: this.params.limit,
+        only: 'name,id,color',
       })
       .subscribe({
         next: (res) => {
@@ -57,10 +58,6 @@ export class SurveysComponent implements OnInit {
           this.params = { ...this.params, current_page: currentPage, last_page: lastPage, total };
           this.isLoading = false;
         },
-        error: (err) => {
-          console.log(err);
-          this.isLoading = false;
-        },
       });
   }
 

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

@@ -465,7 +465,7 @@ export class SearchFormComponent extends BaseComponent implements OnInit {
     this.surveysLoaded = false;
 
     forkJoin([
-      this.surveysService.get('', { show_unknown_form: true }),
+      this.surveysService.getSurveys('', { only: 'id,name,color', show_unknown_form: true }),
       this.getPostsStatistic(),
     ]).subscribe({
       next: (responses) => {