feat: added rating for formgroup example

Author: Anlanther

src/app/form-filter/components/rating-filter/rating-filter.component.html

@@ -0,0 +1,5 @@
+<form class="example-form" [formGroupName]="this.controlKey()" ngNativeValidate>
+  <mat-slide-toggle formControlName="a">A</mat-slide-toggle>
+  <mat-slide-toggle formControlName="b">B</mat-slide-toggle>
+  <mat-slide-toggle formControlName="c">C</mat-slide-toggle>
+</form>

src/app/form-filter/components/rating-filter/rating-filter.component.scss

@@ -0,0 +1,49 @@
+import { Component, inject, input, OnDestroy, OnInit } from '@angular/core';
+import { ControlContainer, FormControl, FormGroup } from '@angular/forms';
+import { Subscription } from 'rxjs';
+
+@Component({
+  standalone: false,
+  selector: 'app-rating-filter',
+  templateUrl: './rating-filter.component.html',
+  styleUrl: './rating-filter.component.scss',
+  viewProviders: [
+    {
+      provide: ControlContainer,
+      useFactory: () => inject(ControlContainer, { skipSelf: true }),
+    },
+  ],
+})
+export class RatingFilterComponent implements OnInit, OnDestroy {
+  controlKey = input.required<string>();
+  parentContainer = inject(ControlContainer);
+
+  subs = new Subscription();
+
+  get parentFormGroup() {
+    return this.parentContainer.control as FormGroup;
+  }
+
+  constructor() {}
+
+  ngOnInit(): void {
+    console.log('testing', this.controlKey());
+    this.initialiseForm();
+  }
+
+  ngOnDestroy() {
+    this.parentFormGroup.removeControl(this.controlKey());
+    this.subs.unsubscribe();
+  }
+
+  initialiseForm() {
+    this.parentFormGroup.addControl(
+      this.controlKey(),
+      new FormGroup({
+        a: new FormControl(false),
+        b: new FormControl(false),
+        c: new FormControl(false),
+      }),
+    );
+  }
+}

src/app/form-filter/components/rating-filter/rating-filter.component.ts

@@ -27,4 +27,10 @@ export const FILTER_DEFAULTS: SavedFilter = {
       displayName: 'Company',
     },
   },
+  [FilterKey.Rating]: {
+    filterForm: { [FilterKey.Rating]: [], key: FilterKey.Rating },
+    filterConfig: {
+      displayName: 'Rating',
+    },
+  },
 };

src/app/form-filter/constants/filter-default-map.constant.ts

@@ -3,4 +3,5 @@ export enum FilterKey {
   Date = 'date',
   Industry = 'industry',
   Company = 'company',
+  Rating = 'rating',
 }

src/app/form-filter/constants/filter-key.enum.ts

@@ -0,0 +1 @@
+export const RATING_DATA = ['A', 'B', 'C'];

src/app/form-filter/dummy-data/rating-data.constant.ts

@@ -68,6 +68,19 @@
             <app-company-filter [controlKey]="filter.key"></app-company-filter>
           </mat-expansion-panel>
         }
+        @case (filterKey.Rating) {
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                {{ filter.value.filterConfig.displayName }}
+              </mat-panel-title>
+              <button mat-icon-button (click)="deleteFilter(filter.key)">
+                <mat-icon>close</mat-icon>
+              </button>
+            </mat-expansion-panel-header>
+            <app-rating-filter [controlKey]="filter.key"></app-rating-filter>
+          </mat-expansion-panel>
+        }
       }
     }
   </mat-accordion>

src/app/form-filter/form-filter.component.html

@@ -6,6 +6,7 @@ import { CompanyFilterComponent } from './components/company-filter/company-filt
 import { CountryFilterComponent } from './components/country-filter/country-filter.component';
 import { DateFilterComponent } from './components/date-filter/date-filter.component';
 import { IndustryFilterComponent } from './components/industry-filter/industry-filter.component';
+import { RatingFilterComponent } from './components/rating-filter/rating-filter.component';
 import { FormFilterComponent } from './form-filter.component';
 
 @NgModule({
@@ -15,6 +16,7 @@ import { FormFilterComponent } from './form-filter.component';
     DateFilterComponent,
     IndustryFilterComponent,
     CompanyFilterComponent,
+    RatingFilterComponent,
   ],
   imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule],
   exports: [FormFilterComponent, CountryFilterComponent, DateFilterComponent],

src/app/form-filter/form-filter.module.ts

@@ -4,7 +4,8 @@ export type FilterForm =
   | CountryFilter
   | DateFilter
   | IndustryFilter
-  | CompanyFilter;
+  | CompanyFilter
+  | RatingFilter;
 
 export interface CountryFilter {
   key: FilterKey.Country;
@@ -25,3 +26,8 @@ export interface CompanyFilter {
   key: FilterKey.Company;
   [FilterKey.Company]: string[];
 }
+
+export interface RatingFilter {
+  key: FilterKey.Rating;
+  [FilterKey.Rating]: string[];
+}

src/app/form-filter/models/filter-form.model.ts

@@ -17,6 +17,7 @@ export class BroadcastFactoryService {
     [FilterKey.Date]: (value) => this.getDatePayload(value),
     [FilterKey.Industry]: (value) => this.getIndustryPayload(value),
     [FilterKey.Company]: (value) => this.getCompanyPayload(value),
+    [FilterKey.Rating]: (value) => this.getRatingPayload(value),
   };
 
   getBroadcastPayload(value: Partial<{}>): BroadcastPayload[] {
@@ -70,4 +71,13 @@ export class BroadcastFactoryService {
       date,
     };
   }
+
+  private getRatingPayload(value: unknown): BroadcastPayload {
+    const ratings = value as string[];
+
+    return {
+      key: FilterBroadcastKey.Rating,
+      ratings,
+    };
+  }
 }