Merge branch 'develop' into feature/#156-configure-map-in-'create-act…

…ivity'

src/app/header/header.component.html

@@ -49,7 +49,7 @@ <h2 class="header_descr">
         <h1>{{userName$ | async}}</h1>
       </button>
       <mat-menu #log="matMenu">
-        <button mat-menu-item><a [routerLink]="'./' + roles[role] +'/' + 'activities'">Гуртки</a></button>
+        <button mat-menu-item><a [routerLink]="'./' + roles[role] +'/' + 'workshops'">Гуртки</a></button>
         <button mat-menu-item><a [routerLink]="'./' + roles[role] +'/' + 'config'">Налаштування</a></button>
         <button mat-menu-item (click)="logout()">Вийти</button>
       </mat-menu>

src/app/shared/components/hobby-select/category-select.component.html

@@ -0,0 +1,26 @@
+<form>
+  <!-- select reffers to selectedCategory object in component (selectedCategory.value === selected option) -->
+  <mat-select class="custom-select" [formControl]="selectedCategory" name="category" (selectionChange)="handleCategorySelect($event.value)">
+    <mat-option value="">Оберіть напрямок</mat-option>
+    <!-- reffers to direction field for options -->
+    <mat-option *ngFor="let option of category" [value]="option">
+      {{ option }}
+    </mat-option>
+  </mat-select>
+  <!-- select reffers to selectedSubcategory object in component (selectedSubcategory.value === selected option) -->
+  <mat-select *ngIf="selectedCategory.value !== ''" class="custom-select" [formControl]="selectedSubcategory" name="subcategory" (selectionChange)="handleSubcategorySelect($event.value)">
+    <mat-option value="">Оберіть напрямок</mat-option>
+    <!-- reffers to faculty field for options (will update after field change) -->
+    <mat-option *ngFor="let option of subcategories" [value]="option">
+      {{ option }}
+    </mat-option>
+  </mat-select>
+    <!-- select reffers to selectedStudy object in component (selectedStudy.value === selected option) -->
+  <mat-select *ngIf="selectedSubcategory.value !== ''" class="custom-select" [formControl]="selectedStudy" name="study" (selectionChange)="handleStudySelect($event.value)">
+    <mat-option value="">Оберіть напрямок</mat-option>
+    <!-- reffers to study field for options (will update after field change) -->
+    <mat-option *ngFor="let option of study" [value]="option">
+      {{ option }}
+    </mat-option>
+  </mat-select>
+</form>

src/app/shared/components/hobby-select/hobby-select.component.spec.ts → src/app/shared/components/hobby-select/category-select.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HobbySelectComponent } from './hobby-select.component';
+import { CategorySelectComponent } from './category-select.component';
 
 describe('HobbySelectComponent', () => {
-  let component: HobbySelectComponent;
-  let fixture: ComponentFixture<HobbySelectComponent>;
+  let component: CategorySelectComponent;
+  let fixture: ComponentFixture<CategorySelectComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ HobbySelectComponent ]
+      declarations: [ CategorySelectComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(HobbySelectComponent);
+    fixture = TestBed.createComponent(CategorySelectComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/shared/components/hobby-select/category-select.component.ts

@@ -0,0 +1,116 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { CategorySelect } from '../../models/category-select.model';
+import { CategorySelectService } from '../../services/category-select/category-select.service';
+
+@Component({
+  selector: 'app-category-select',
+  templateUrl: './category-select.component.html',
+  styleUrls: ['./category-select.component.scss']
+})
+export class CategorySelectComponent implements OnInit {
+  @Output() categoriesSelect = new EventEmitter<FormGroup>();
+  //lists of options in dropdowns
+  data: CategorySelect[] = [];
+  category: object = {};
+  subcategories: string[] = [];
+  study: string[] = [];
+  selectedCategory = new FormControl(''); //contains current state (which direction was selected)
+  selectedSubcategory = new FormControl('');
+  selectedStudy = new FormControl('');
+  CategoryFormGroup: FormGroup;
+
+  constructor(private formBuilder: FormBuilder, private service: CategorySelectService) {
+    this.CategoryFormGroup = this.formBuilder.group({
+      id: new FormControl(''),
+      title: new FormControl(''),
+      subcategories: [
+        {
+          id: new FormControl(''),
+          title: new FormControl(''),
+          study: [
+            {
+              id: new FormControl(''),
+              title: new FormControl('')
+            }
+          ]
+        }
+      ]
+    });
+  }
+
+  ngOnInit(): void {
+    this.service.getCategories().subscribe(categories => {
+      this.data = categories;
+      this.getCategories(this.data);
+    });
+
+    this.categoriesSelect.emit(this.CategoryFormGroup);
+  }
+
+  getCategories(data: CategorySelect[]): void {
+    this.category = data.map(el => el.title);
+  }
+
+  handleCategorySelect(value: string): void {
+    //sets selected option in current "state"
+    this.selectedCategory.setValue(value);
+    //clears selected faculty and study (all dropdowns should be consistant)
+    this.selectedSubcategory.setValue('');
+    this.selectedStudy.setValue('');
+    //finds faculties, related to selected direction
+    const targetCategory = this.data.find(el => el.title === value);
+    //creates list of options for 2d dropdown
+    const subcategoriesList = targetCategory?.subcategories?.map(el => el.title);
+    //sets list of options in this.faculty
+    this.subcategories = subcategoriesList;
+    //sets output data
+    this.CategoryFormGroup.get('title').setValue(value);
+    this.CategoryFormGroup.get('id').setValue(targetCategory?.id);
+    this.CategoryFormGroup.get('subcategories').setValue([{
+      id: null,
+      title: null,
+      study: [{
+        id: null,
+        title: null
+      }]
+    }]);
+  }
+
+  handleSubcategorySelect(value: string): void {
+    //the same logic as for handleDirectionSelect
+    this.selectedSubcategory.setValue(value);
+    this.selectedStudy.setValue('');
+    const targetCategory = this.data.find(el => el.title === this.selectedCategory.value);
+    const targetSubcategory = targetCategory?.subcategories?.find(el => el.title === value);
+    const studyList = targetSubcategory?.study;
+    this.study = studyList?.map(el => el.title);
+    //sets output data
+    this.CategoryFormGroup.get('subcategories').setValue([{
+      id: targetSubcategory?.id,
+      title: value,
+      study: [{
+        id: null,
+        title: null
+      }]
+    }]);
+  }
+
+  handleStudySelect(value: string): void {
+    this.selectedStudy.setValue(value);
+    const targetCategory = this.data.find(el => el.title === this.selectedCategory.value);
+    const targetSubcategory = targetCategory?.subcategories.find(el => el.title === this.selectedSubcategory.value);
+    const targetStudy = targetSubcategory?.study.find(el => el.title === value);
+    //sets output data
+    this.CategoryFormGroup.get('subcategories').setValue([{
+      id: targetSubcategory?.id,
+      title: targetSubcategory.title,
+      study: [
+        {
+          id: targetStudy?.id,
+          title: value,
+        }
+      ]
+    }]);
+  }
+}