Merge branch 'refacto/clean-structure-type-picker' into 'dev'

refactor(NewStructure): Clean-up structure-type-picker

See merge request !763

src/app/form/form-view/structure-form/structure-type/structure-type.component.html

@@ -4,8 +4,45 @@
     <h3>De quel type de structure s'agit-il&nbsp;?</h3>
     <p>1 seul choix possible</p>
   </div>
-  <app-structure-type-picker
-    [pickedTypeId]="structureForm.get('structureType').valid ? structureForm.get('structureType').value : null"
-    (selectedType)="setTypeStructure($event)"
-  />
+  <div class="title" style="gap: 12px">
+    <h4>{{ structureTypeCategoryEnum.public }}</h4>
+    <div class="tagList">
+      <app-tag-item
+        *ngFor="let type of publicTypes"
+        [iconName]="type._id === pickedTypeId ? 'check' : null"
+        [label]="type.name"
+        [color]="type._id === pickedTypeId ? 'black' : 'white'"
+        [clickable]="true"
+        (action)="pickStructureType(type._id)"
+      />
+    </div>
+  </div>
+
+  <div class="title" style="gap: 12px">
+    <h4>{{ structureTypeCategoryEnum.private }}</h4>
+    <div class="tagList">
+      <app-tag-item
+        *ngFor="let type of privateTypes"
+        [iconName]="type._id === pickedTypeId ? 'check' : null"
+        [label]="type.name"
+        [color]="type._id === pickedTypeId ? 'black' : 'white'"
+        [clickable]="true"
+        (action)="pickStructureType(type._id)"
+      />
+    </div>
+  </div>
+
+  <div class="title" style="gap: 12px">
+    <h4>{{ structureTypeCategoryEnum.privateLucrative }}</h4>
+    <div class="tagList">
+      <app-tag-item
+        *ngFor="let type of privateLucrativeTypes"
+        [iconName]="type._id === pickedTypeId ? 'check' : null"
+        [label]="type.name"
+        [color]="type._id === pickedTypeId ? 'black' : 'white'"
+        [clickable]="true"
+        (action)="pickStructureType(type._id)"
+      />
+    </div>
+  </div>
 </form>

src/app/form/form-view/structure-form/structure-type/structure-type.component.ts

 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
+import { StructureType } from '../../../../models/structureType.model';
+import { StructureTypeService } from '../../../../services/structure-type.service';
+import { StructureCategoryEnum } from '../../../../shared/enum/structureCategory.enum';
 
 @Component({
   selector: 'app-structure-type',
@@ -11,14 +14,41 @@ export class StructureTypeComponent implements OnInit {
   @Output() typeStructure = new EventEmitter<string>();
   @Output() validateForm = new EventEmitter<any>();
 
+  public pickedTypeId = '';
+  public publicTypes: StructureType[];
+  public privateTypes: StructureType[];
+  public privateLucrativeTypes: StructureType[];
+  public structureTypeCategoryEnum = StructureCategoryEnum;
+
+  constructor(private structureTypeService: StructureTypeService) {}
+
   ngOnInit(): void {
+    // Defines which format is valid for the 'structureType' field of the form
     this.validateForm.emit();
-  }
 
-  public setTypeStructure(value: string): void {
-    this.typeStructure.emit(value);
+    // Get the list of structure types, without the "other" one
+    this.structureTypeService.getStructureTypes().subscribe((types) => {
+      types = types.filter((type) => type.selectable);
+      types = types.sort((a, b) => a.name.localeCompare(b.name));
+      this.publicTypes = types.filter((type) => type.category === this.structureTypeCategoryEnum.public);
+      this.privateTypes = types.filter((type) => type.category === this.structureTypeCategoryEnum.private);
+      this.privateLucrativeTypes = types.filter(
+        (type) => type.category === this.structureTypeCategoryEnum.privateLucrative,
+      );
+    });
+
+    // If any, get the ID of the previously selected structure type
+    this.pickedTypeId = this.structureForm.get('structureType').valid
+      ? this.structureForm.get('structureType').value
+      : null;
   }
+
   public goBack(): void {
     history.back();
   }
+
+  public pickStructureType(structureTypeId: string): void {
+    this.pickedTypeId = structureTypeId;
+    this.typeStructure.emit(structureTypeId);
+  }
 }

src/app/shared/components/index.ts

@@ -26,7 +26,6 @@ import { SearchBarComponent } from './search-bar/search-bar.component';
 import { StructureDetailPrintComponent } from './structure-detail-print/structure-detail-print.component';
 import { StructureHoursListComponent } from './structure-hours/structure-hours-list.component';
 import { StructurePmrComponent } from './structure-pmr/structure-pmr.component';
-import { StructureTypePickerComponent } from './structure-type-picker/structure-type-picker.component';
 import { SvgIconComponent } from './svg-icon/svg-icon.component';
 import { SwitchComponent } from './switch/switch.component';
 import { TagItemComponent } from './tag-item/tag-item.component';
@@ -55,7 +54,6 @@ export {
   StructureHoursListComponent,
   StructurePmrComponent,
   StructurePublicTargetComponent,
-  StructureTypePickerComponent,
   SvgIconComponent,
   SwitchComponent,
   TagItemComponent,
@@ -90,7 +88,6 @@ export const SharedComponents = [
   StructureDetailPrintComponent,
   StructurePmrComponent,
   StructurePublicTargetComponent,
-  StructureTypePickerComponent,
   SvgIconComponent,
   TagItemComponent,
   TrainingTypePickerComponent,

src/app/shared/components/structure-type-picker/structure-type-picker.component.html

-<form>
-  <div class="title" style="gap: 12px">
-    <h4>{{ structureTypeCategoryEnum.public }}</h4>
-    <div class="tagList">
-      <app-tag-item
-        *ngFor="let type of publicTypes"
-        [iconName]="type._id === pickedTypeId ? 'check' : null"
-        [label]="type.name"
-        [color]="type._id === pickedTypeId ? 'black' : 'white'"
-        [clickable]="true"
-        (action)="pickStructureType(type._id)"
-      />
-    </div>
-  </div>
-
-  <div class="title" style="gap: 12px">
-    <h4>{{ structureTypeCategoryEnum.private }}</h4>
-    <div class="tagList">
-      <app-tag-item
-        *ngFor="let type of privateTypes"
-        [iconName]="type._id === pickedTypeId ? 'check' : null"
-        [label]="type.name"
-        [color]="type._id === pickedTypeId ? 'black' : 'white'"
-        [clickable]="true"
-        (action)="pickStructureType(type._id)"
-      />
-    </div>
-  </div>
-
-  <div class="title" style="gap: 12px">
-    <h4>{{ structureTypeCategoryEnum.privateLucrative }}</h4>
-    <div class="tagList">
-      <app-tag-item
-        *ngFor="let type of privateLucrativeTypes"
-        [iconName]="type._id === pickedTypeId ? 'check' : null"
-        [label]="type.name"
-        [color]="type._id === pickedTypeId ? 'black' : 'white'"
-        [clickable]="true"
-        (action)="pickStructureType(type._id)"
-      />
-    </div>
-  </div>
-</form>

src/app/shared/components/structure-type-picker/structure-type-picker.component.ts

-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { StructureType } from '../../../models/structureType.model';
-import { StructureTypeService } from '../../../services/structure-type.service';
-import { StructureCategoryEnum } from '../../enum/structureCategory.enum';
-
-@Component({
-  selector: 'app-structure-type-picker',
-  templateUrl: './structure-type-picker.component.html',
-})
-export class StructureTypePickerComponent implements OnInit {
-  public publicTypes: StructureType[];
-  public privateTypes: StructureType[];
-  public privateLucrativeTypes: StructureType[];
-  @Input() public pickedTypeId?: string;
-  @Output() selectedType: EventEmitter<string> = new EventEmitter<string>();
-
-  public structureTypeCategoryEnum = StructureCategoryEnum;
-
-  constructor(private structureTypeService: StructureTypeService) {}
-
-  ngOnInit(): void {
-    this.structureTypeService.getStructureTypes().subscribe((types) => {
-      // Filter "other" structure type
-      types = types.filter((type) => type.selectable);
-      types = types.sort((a, b) => a.name.localeCompare(b.name));
-      this.publicTypes = types.filter((type) => type.category === this.structureTypeCategoryEnum.public);
-      this.privateTypes = types.filter((type) => type.category === this.structureTypeCategoryEnum.private);
-      this.privateLucrativeTypes = types.filter(
-        (type) => type.category === this.structureTypeCategoryEnum.privateLucrative,
-      );
-    });
-  }
-
-  public pickStructureType(structureTypeId: string): void {
-    this.pickedTypeId = structureTypeId;
-    this.selectedType.emit(structureTypeId);
-  }
-}