#7 added stringify and transformer (prizm)

src/app/modules/meetup/components/filter-form/filter-form.component.html

@@ -11,8 +11,8 @@
     </prizm-input-layout>
 
     <prizm-input-layout label="Критерий">
-        <prizm-input-select #input formControlName="criterion" [items]="items"
-            [prizmHintCanShow]="true"></prizm-input-select>
+        <prizm-input-select #input formControlName="criterion" [stringify]="stringify" [items]="items"
+        [transformer]="transformer" [prizmHintCanShow]="true"></prizm-input-select>
         <ng-template [control]="input" prizmInputStatusText></ng-template>
     </prizm-input-layout>
 </form>

src/app/modules/meetup/components/filter-form/filter-form.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { MAT_DATE_LOCALE } from '@angular/material/core';
+import { PrizmSelectStringify, PrizmSelectValueTransformver } from '@prizm-ui/components';
 import 'moment/locale/ru';
 import { Subject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
 
@@ -13,12 +14,20 @@ import { Subject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
 
 export class FilterFormComponent implements OnInit {
 
+  // readonly items = [
+  //   'По названию',
+  //   'По описанию',
+  //   'По местоположению',
+  //   'По дате',
+  //   'По автору'
+  // ];
+
   readonly items = [
-    'По названию',
-    'По описанию',
-    'По местоположению',
-    'По дате',
-    'По автору'
+    { key: 'name', title: 'По названию' },
+    { key: 'description', title: 'По описанию' },
+    { key: 'location', title: 'По местоположению' },
+    { key: 'time', title: 'По дате' },
+    { key: 'owner', title: 'По автору' },
   ];
 
   filterForm: FormGroup;
@@ -34,34 +43,26 @@ export class FilterFormComponent implements OnInit {
       criterion: new FormControl<'name' | 'description' | 'location' | 'time' | 'owner'>('name', [Validators.required])
     });
   }
+  readonly stringify: PrizmSelectStringify<{ key: string, title: string }> = (item: { key: string, title: string }) => {
+      if (!item) {
+        return '';
+      }
+      return item.title
+    };
+  readonly transformer: PrizmSelectValueTransformver<{ key: string, title: string }> = (item) => {
+      if (!item) { return '' }
+      return item.key
+    };
+
   ngOnInit(): void {
+
     this.filterForm.controls['search'].valueChanges
       .pipe(
         debounceTime(500),
         distinctUntilChanged(),
         takeUntil(this.destroy))
       .subscribe((data) => {
         if (this.filterForm.invalid) { return }
-
-        switch (this.filterForm.value.criterion) {
-          case 'По названию':
-            this.filterForm.value.criterion = 'name'
-            break;
-          case 'По описанию':
-            this.filterForm.value.criterion = 'description'
-            break;
-          case 'По местоположению':
-            this.filterForm.value.criterion = 'location'
-            break;
-          case 'По дате':
-            this.filterForm.value.criterion = 'time'
-            break;
-          case 'По автору':
-            this.filterForm.value.criterion = 'owner'
-            break;
-          default:
-            break;
-        }
         this.filterEvent.emit({ search: data, criterion: this.filterForm.value.criterion })
       });
   }

src/app/modules/user/components/user-form/user-form.component.ts

@@ -25,6 +25,7 @@ export class UserFormComponent {
   @Output() closeFormEvent = new EventEmitter();
   private destroy: Subject<void> = new Subject();
 
+
   constructor(
     private fb: FormBuilder
   ) {