allow to assign fmus when creating operator

src/app/app.module.ts

@@ -46,6 +46,7 @@ import { CategoryListComponent } from 'app/pages/fields/categories/category-list
 import { HeaderComponent } from 'app/shared/header/header.component';
 import { NavigationComponent } from 'app/shared/navigation/navigation.component';
 import { UsersService } from 'app/services/users.service';
+import { FmusService } from 'app/services/fmus.service';
 // import { TabsComponent } from 'app/shared/tabs/tabs.component';
 import { ObservationDetailComponent } from 'app/pages/observations/observation-detail.component';
 import { FieldListComponent } from 'app/pages/fields/field-list.component';
@@ -187,6 +188,7 @@ export function createTranslateLoader(http: HttpClient) {
     ObservationsService,
     SubcategoriesService,
     ObserversService,
+    FmusService,
     OperatorsService,
     CategoriesService,
     ObservationReportsService,

src/app/pages/fields/governments/government-detail.component.html

@@ -26,7 +26,7 @@ <h2 *ngIf="canEdit() && government.id">{{'Edit government entity' | translate}}<
     <!-- 2. Country -->
     <div class="form-group -required">
       <label for="country_field">{{'Country' | translate}}</label>
-      <select id="country_field" name="country_field" [(ngModel)]="government.country" #country_field="ngModel" [disabled]="!canEdit() || country" required>
+      <select id="country_field" name="country_field" [(ngModel)]="government.country" #country_field="ngModel" [disabled]="!canEdit() || fixedCountry" required>
         <option disabled [ngValue]="null">{{'Select a country' | translate}}</option>
         <option *ngFor="let country of countries" [ngValue]="country">{{ country.name }}</option>
       </select>

src/app/pages/fields/governments/government-detail.component.ts

@@ -24,7 +24,7 @@ export class GovernmentDetailComponent {
   @Input() useRouter: boolean = true;
   @Input() showActionsOnTop: boolean = true;
   @Input() showSuccessMessage: boolean = true;
-  @Input() country: Country = null;
+  @Input() fixedCountry: Country = null;
   @Input() uniqueNameErrorMessage: string = null;
 
   @Output() afterCancel: EventEmitter<void> = new EventEmitter<void>();
@@ -42,7 +42,7 @@ export class GovernmentDetailComponent {
   }
 
   ngOnInit() {
-    if (!this.country) {
+    if (!this.fixedCountry) {
       this.countriesService.getAll({ sort: 'name', filter: { id: this.authService.observerCountriesIds } })
         .then(data => this.countries = data)
         .then(() => {
@@ -72,9 +72,9 @@ export class GovernmentDetailComponent {
       this.government = this.datastoreService.createRecord(Government, {});
     }
 
-    if (this.country) {
-      this.countries = [this.country];
-      this.government.country = this.country;
+    if (this.fixedCountry) {
+      this.countries = [this.fixedCountry];
+      this.government.country = this.fixedCountry;
     }
   }
 

src/app/pages/fields/operators/operator-detail.component.html

@@ -36,11 +36,18 @@ <h2 *ngIf="canEdit() && operator.id">{{'Edit operator' | translate}}</h2>
     <!-- Country -->
     <div class="form-group -required">
       <label for="country_field">{{'Country' | translate}}</label>
-      <select id="country_field" name="country_field" [(ngModel)]="operator.country" #country_field="ngModel" [disabled]="!canEdit() || country" required>
+      <select id="country_field" name="country_field" [(ngModel)]="country" #country_field="ngModel" [disabled]="!canEdit() || fixedCountry" required>
         <option disabled [ngValue]="null">{{'Select a country' | translate}}</option>
         <option *ngFor="let country of countries" [ngValue]="country">{{ country.name }}</option>
       </select>
-      <div *ngIf="f.submitted && !country_field.valid" class="help-text">{{'Please select a country' | translate}}</div>
+      <div *ngIf="f.submitted && !country_field.valid && !fixedCountry" class="help-text">{{'Please select a country' | translate}}</div>
+    </div>
+
+    <!-- FMUs -->
+
+    <div class="form-group">
+      <label>{{'fmus' | translate}}</label>
+      <ss-multiselect-dropdown name="fmus" id="fmus" #fmus="ngModel" [texts]="multiSelectTexts" [settings]="multiSelectSettings" [options]="fmusOptions" [(ngModel)]="fmusSelection" (ngModelChange)="onChangeFmus($event)" [disabled]="!canEditFmus()"></ss-multiselect-dropdown>
     </div>
 
     <!-- Details -->

src/app/pages/fields/operators/operator-detail.component.ts

@@ -9,6 +9,10 @@ import { Country } from 'app/models/country.model';
 import { CountriesService } from 'app/services/countries.service';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { forkJoin ,  Observable } from "rxjs";
+import { Fmu } from 'app/models/fmu.model';
+import { IMultiSelectOption, IMultiSelectTexts, IMultiSelectSettings } from 'angular-2-dropdown-multiselect';
+import { FmusService } from 'app/services/fmus.service';
+import sortBy from 'lodash/sortBy';
 
 @Component({
   selector: 'otp-operator-detail',
@@ -26,11 +30,20 @@ export class OperatorDetailComponent {
   loading = false;
   nameServerError: string = null;
 
+  _fmus: Fmu[] = [];
+  fmusOptions: IMultiSelectOption[] = [];
+  fmusSelection: string[] = [];
+  multiSelectTexts: IMultiSelectTexts = {};
+  multiSelectSettings: IMultiSelectSettings = {
+    enableSearch: true,
+    dynamicTitleMaxItems: 8
+  };
+
   @Input() useRouter: boolean = true;
   @Input() showActionsOnTop: boolean = true;
   @Input() showSuccessMessage: boolean = true;
   @Input() longForm: boolean = true;
-  @Input() country: Country = null;
+  @Input() fixedCountry: Country = null;
   @Input() uniqueNameErrorMessage: string = null;
 
   @Output() afterCancel: EventEmitter<void> = new EventEmitter<void>();
@@ -44,51 +57,84 @@ export class OperatorDetailComponent {
     return this.operator.logo;
   }
 
+  get fmus() {
+    return this._fmus;
+  }
+  set fmus(data) {
+    this._fmus = data;
+    this.fmusOptions = sortBy(data.map(c => ({ id: c.id, name: c.name })), 'name');
+  }
+
+  get country() : Country {
+    return this.operator.country;
+  }
+  set country(country: Country) {
+    if (this.operator) {
+      this.operator.country = country;
+
+      // API.get('fmus', { locale: lang, 'filter[country]': countryId, 'filter[free]': true })
+      if (this.canEditFmus()) {
+        this.fmusService.getAll({ 'filter[country]': country.id, 'filter[free]': true }).then((data) => {
+          this.fmus = data;
+        });
+      }
+    }
+  }
+
   constructor(
     private countriesService: CountriesService,
     private operatorsService: OperatorsService,
+    private fmusService: FmusService,
     private datastoreService: DatastoreService,
     private router: Router,
     private route: ActivatedRoute,
     private translateService: TranslateService,
     private authService: AuthService
   ) {
     this.updateTranslatedOptions(this.operatorTypes, 'operatorType');
+    this.updateMultiSelectTexts();
 
     this.translateService.onLangChange.subscribe(() => {
       this.updateTranslatedOptions(this.operatorTypes, 'operatorType');
     });
   }
 
   ngOnInit() {
-    if (!this.country) {
-      this.countriesService.getAll({ sort: 'name', filter: { id: this.authService.observerCountriesIds } })
-        .then((data) => this.countries = data)
-        .then(() => {
-          if (this.operator && this.operator.id) {
-            this.operator.country = this.countries.find(c => c.id === this.operator.country.id);
-          } else {
-            this.operator.country = this.countries[0];
-          }
-        })
-        .catch(err => console.error(err)); // TODO: visual feedback
-    }
-
     // If we're editing an operator, we need to fetch the model
     // and do a bit more stuff
     if (this.useRouter && this.route.snapshot.params.id) {
       this.loading = true;
-      this.operatorsService.getById(this.route.snapshot.params.id, { include: 'country' })
-        .then(operator => this.operator = operator)
+      this.operatorsService.getById(this.route.snapshot.params.id, { include: 'country,fmus' })
+        .then(operator => {
+          this.operator = operator;
+          this.country = operator.country;
+          this.fmus = operator.fmus;
+          this.fmusSelection = operator.fmus.map(f => f.id);
+        })
         .catch(err => console.error(err)) // TODO: visual feedback
         .then(() => this.loading = false);
     } else {
       this.operator = this.datastoreService.createRecord(Operator, {});
     }
 
-    if (this.country) {
-      this.countries = [this.country];
-      this.operator.country = this.country;
+    if (!this.fixedCountry) {
+      this.countriesService.getAll({ sort: 'name', filter: { id: this.authService.observerCountriesIds } })
+        .then((data) => this.countries = data)
+        .then(() => {
+          if (!this.operator) return;
+
+          let country = null;
+          if (this.operator.id) {
+            country = this.countries.find(c => c.id === this.operator.country.id);
+          } else {
+            country = this.countries[0];
+          }
+          this.country = country;
+        })
+        .catch(err => console.error(err)); // TODO: visual feedback
+    } else {
+      this.countries = [this.fixedCountry];
+      this.country = this.fixedCountry;
     }
   }
 
@@ -105,6 +151,9 @@ export class OperatorDetailComponent {
     const isEdition = !!this.operator.id;
     this.nameServerError = null;
 
+    if (this.canEditFmus()) {
+      this.operator.fmus = this.fmus.filter(f => this.fmusSelection.includes(f.id));
+    }
     this.operator.save()
       .toPromise()
       .then(async (savedOperator) => {
@@ -173,6 +222,27 @@ export class OperatorDetailComponent {
     }
   }
 
+  canEditFmus(): boolean {
+    return this.canEdit() && Boolean(this.operator && !this.operator.id);
+  }
+
+  onChangeFmus(options: string[]) {
+    this.fmusSelection = options;
+  }
+
+  private async updateMultiSelectTexts() {
+    await Promise.all([
+      this.translateService.get('multiselect.checked').toPromise(),
+      this.translateService.get('multiselect.checkedPlural').toPromise(),
+      this.translateService.get('multiselect.defaultTitle').toPromise(),
+      this.translateService.get('multiselect.allSelected').toPromise(),
+      this.translateService.get('multiselect.searchPlaceholder').toPromise(),
+      this.translateService.get('multiselect.searchEmptyResult').toPromise(),
+    ]).then(([checked, checkedPlural, defaultTitle, allSelected, searchPlaceholder, searchEmptyResult]) => {
+      this.multiSelectTexts = { checked, checkedPlural, defaultTitle, allSelected, searchPlaceholder, searchEmptyResult };
+    });
+  }
+
   private updateTranslatedOptions(phrases: string[], field: string): void {
     this[`${field}Options`] = {};
     const observables: Observable<string | any>[] =

src/app/pages/observations/observation-detail.component.html

@@ -3,7 +3,7 @@
 <otp-modal [title]="'New Gov' | translate" [opened]="newGovEntityModalOpen" (onClose)="newGovEntityModalOpen = false">
   <otp-government-detail
     *ngIf="newGovEntityModalOpen"
-    [country]="country"
+    [fixedCountry]="country"
     [showSuccessMessage]="false"
     [showActionsOnTop]="false"
     [useRouter]="false"
@@ -16,7 +16,7 @@
 <otp-modal [title]="'New Producer' | translate" [opened]="newOperatorModalOpen" (onClose)="onNewOperatorModalClosed()">
   <otp-operator-detail
     *ngIf="newOperatorModalOpen"
-    [country]="country"
+    [fixedCountry]="country"
     [longForm]="false"
     [showSuccessMessage]="false"
     [showActionsOnTop]="false"

src/app/services/fmus.service.ts

@@ -0,0 +1,31 @@
+import { JsonApiService } from 'app/services/json-api.service';
+import { Fmu } from 'app/models/fmu.model';
+import { DatastoreService } from 'app/services/datastore.service';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable()
+export class FmusService extends JsonApiService<Fmu> {
+
+  public model = Fmu;
+
+  constructor(
+    protected datastoreService: DatastoreService,
+    protected http: HttpClient
+  ) {
+    super();
+  }
+
+  /**
+   * Return the list of fmus
+   * @param {any} [params={}] Additional params for the query
+   * @returns {Promise<Fmu[]>}
+   */
+  getAll(params = {}): Promise<Fmu[]> {
+    return this.datastoreService.findAll(Fmu, Object.assign(
+      {},
+      { page: { size: 3000 } },
+      params
+    )).toPromise().then((data) => data.getModels());
+  }
+}

src/assets/locale/zu.json

@@ -397,5 +397,6 @@
   "Add a new government entity to the list": "Add a new government entity to the list",
   "Add a new producer to the list": "Add a new producer to the list",
   "Please select an existing report or upload a new one": "Please select an existing report or upload a new one",
-  "You will not be able to submit this observation to review with unknown operator selected": "You will not be able to submit this observation to review with unknown operator selected"
+  "You will not be able to submit this observation to review with unknown operator selected": "You will not be able to submit this observation to review with unknown operator selected",
+  "fmus": "FMUs"
 }