talk - client

Author: root-server

ElectronNetAngular/ClientApp/app/app.shared.module.ts

@@ -4,18 +4,20 @@ import { NgModule } from "@angular/core";
 import { MatSidenavModule } from "@angular/material";
 import { RouterModule } from "@angular/router";
 import { CoreModule } from "@dotnetru/core";
-import { SpeakerEditorModule } from "@dotnetru/speaker-editor";
+import { SearchPageModule } from "@dotnetru/pages/search";
+import { SpeakerEditorModule } from "@dotnetru/pages/speaker-editor";
+import { TalkEditorModule } from "@dotnetru/pages/talk-editor";
+import { AutocompleteModule } from "@dotnetru/shared/autocomplete";
 import { SpeakerListModule } from "@dotnetru/speaker-list";
 
 import { AppComponent } from "./app.component";
-import { HomeComponent } from "./components/home/home.component";
 import { NavMenuModule } from "./components/navmenu/navmenu.module";
 import { ToolbarModule } from "./components/toolbar/toolbar.module";
+import { SearchPageComponent } from "./pages/search/search.component";
 
 @NgModule({
     declarations: [
         AppComponent,
-        HomeComponent,
     ],
     imports: [
         CommonModule,
@@ -26,14 +28,21 @@ import { ToolbarModule } from "./components/toolbar/toolbar.module";
         NavMenuModule,
 
         CoreModule,
+
+        AutocompleteModule,
+
         SpeakerEditorModule,
         SpeakerListModule,
+
+        TalkEditorModule,
+
+        SearchPageModule,
+
         RouterModule.forRoot([
-            { path: "", redirectTo: "home", pathMatch: "full" },
-            { path: "home", component: HomeComponent },
-            { path: "**", redirectTo: "home" },
+            { path: "", redirectTo: "search", pathMatch: "full" },
+            { path: "search", component: SearchPageComponent },
+            { path: "**", redirectTo: "search" },
         ]),
     ],
 })
-export class AppModuleShared {
-}
+export class AppModuleShared { }

ElectronNetAngular/ClientApp/app/components/home/home.component.html

@@ -1,29 +1,7 @@
-<div class="base-component-container">
-
-    <mat-form-field class="full-width">
-        <input type="text"
-               placeholder="Поиск спикера"
-               matInput
-               [formControl]="speakersControl"
-               [matAutocomplete]="auto">
-
-        <mat-autocomplete autoActiveFirstOption
-                          #auto="matAutocomplete"
-                          (optionSelected)="onSelected($event.option.value)">
-            <mat-option *ngFor="let speaker of speakers$ | async"
-                        [value]="speaker">
-                {{ speaker.name }}
-            </mat-option>
-        </mat-autocomplete>
-
-        <a [routerLink]="['/speaker-creator']"
-           color="primary"
-           mat-button
-           matSuffix>
-            <mat-icon>add</mat-icon>
-            <span>Добавить</span>
-        </a>
-
-    </mat-form-field>
-
-</div>
+<mtp-autocomplete #autocomplete
+                  [title]="title"
+                  [data]="speakers"
+                  [iconName]="iconName"
+                  [iconText]="iconText"
+                  (selected)="onSelected($event)"
+                  (iconClicked)="onIconClicked()"></mtp-autocomplete>

ElectronNetAngular/ClientApp/app/components/home/home.component.ts

@@ -1,70 +1,70 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from "@angular/core";
-import { FormBuilder, FormControl } from "@angular/forms";
-import { Router } from "@angular/router";
-import { Observable, Subscription } from "rxjs";
-import { debounceTime, filter, map } from "rxjs/operators";
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    EventEmitter,
+    Input,
+    OnDestroy,
+    OnInit,
+    Output,
+    ViewChild,
+} from "@angular/core";
+import { AutocompleteComponent, IAutocompleteRow } from "@dotnetru/shared/autocomplete";
+import { BehaviorSubject, Subscription } from "rxjs";
+import { debounceTime, switchMap } from "rxjs/operators";
 
-import { ISpeakerRow } from "./interfaces";
 import { SpeakerListService } from "./speaker-list.service";
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: "mtp-speaker-list",
-    styleUrls: ["./speaker-list.component.css"],
     templateUrl: "./speaker-list.component.html",
 })
 export class SpeakerListComponent implements OnInit, OnDestroy {
-    public speakers: ISpeakerRow[] = [];
-    public speakers$: Observable<ISpeakerRow[]>;
-    public speakersControl: FormControl;
+    @Input() public title: string = "Поиск спикера";
+    @Input() public iconName: string = "add";
+    @Input() public iconText: string = "Добавить";
 
+    @Input() public set speakerLink(value: { speakerId?: string }) {
+        if (value && value.speakerId) {
+            this._speakerId$.next(value.speakerId);
+        }
+    }
+
+    @ViewChild("autocomplete") public autocomplete!: AutocompleteComponent;
+
+    @Output() public readonly selected: EventEmitter<IAutocompleteRow> = new EventEmitter<IAutocompleteRow>();
+    @Output() public readonly iconClicked: EventEmitter<void> = new EventEmitter<void>();
+
+    public speakers: IAutocompleteRow[] = [];
+
+    private _speakerId$: BehaviorSubject<string> = new BehaviorSubject("");
     private _subs: Subscription[] = [];
 
     constructor(
         private _speakerListService: SpeakerListService,
-        private _router: Router,
         private _changeDetectorRef: ChangeDetectorRef,
-        fb: FormBuilder,
-    ) {
-        this.speakersControl = fb.control(undefined);
-        this.speakers$ = this.speakersControl.valueChanges
-            .pipe(
-                filter((val) => typeof val === "string"),
-                debounceTime(300),
-                map((query: string) => {
-                    const searchPhrases: string[] = (query || "")
-                        .toLowerCase()
-                        .replace(/\s+/, " ")
-                        .split(" ")
-                        .map((x) => x.replace(/[^а-яёa-z\d]/gi, ""));
-                    return this.speakers.filter((x) => {
-                        const lowerName: string = x.name.toLowerCase();
-                        let ix: number = 0;
-                        for (const searchPhrase of searchPhrases) {
-                            // important order
-                            ix = lowerName/* .substring(ix) */.indexOf(searchPhrase);
-                            if (ix < 0) {
-                                return false;
-                            }
-                        }
-
-                        return true;
-                    });
-                }),
-            );
-    }
+    ) { }
 
     public ngOnInit(): void {
         this._subs = [
             this._speakerListService.speakers$
                 .subscribe(
-                    (speakers: ISpeakerRow[]) => {
+                    (speakers: IAutocompleteRow[]) => {
                         this.speakers = speakers;
-                        this.speakersControl.setValue("");
                         this._changeDetectorRef.detectChanges();
                     },
-                    (error) => console.warn(error),
                 ),
+            this._speakerListService.speakers$.pipe(switchMap((_) => this._speakerId$.pipe()))
+                .pipe(debounceTime(100))
+                .subscribe((speakerId: string) => {
+                    const speaker = this.speakers.find((x) => x.id === speakerId);
+                    if (speaker) {
+                        this.autocomplete.queryControl.patchValue(speaker.name);
+                    } else {
+                        console.warn("speaker not found", speakerId);
+                    }
+                }),
         ];
 
         this._speakerListService.fetchSpeakers();
@@ -74,7 +74,11 @@ export class SpeakerListComponent implements OnInit, OnDestroy {
         this._subs.forEach((x) => x.unsubscribe());
     }
 
-    public onSelected(speaker: ISpeakerRow): void {
-        this._router.navigateByUrl(`speaker-editor/${speaker.id}`);
+    public onSelected(row: IAutocompleteRow): void {
+        this.selected.emit(row);
+    }
+
+    public onIconClicked(): void {
+        this.iconClicked.emit();
     }
 }

ElectronNetAngular/ClientApp/app/components/speaker-list/speaker-list.component.css

@@ -8,7 +8,7 @@ import {
     MatIconModule,
     MatInputModule,
 } from "@angular/material";
-import { RouterModule } from "@angular/router";
+import { AutocompleteModule } from "@dotnetru/shared/autocomplete";
 
 import { SpeakerListComponent } from "./speaker-list.component";
 import { SpeakerListService } from "./speaker-list.service";
@@ -24,12 +24,11 @@ import { SpeakerListService } from "./speaker-list.service";
         SpeakerListComponent,
     ],
     imports: [
-        RouterModule.forChild([
-            { path: "speaker-list", component: SpeakerListComponent },
-        ]),
         CommonModule,
         ReactiveFormsModule,
 
+        AutocompleteModule,
+
         MatAutocompleteModule,
         MatButtonModule,
         MatFormFieldModule,

ElectronNetAngular/ClientApp/app/components/speaker-list/speaker-list.component.html

@@ -3,13 +3,13 @@ import { API_ENDPOINTS, HttpService } from "@dotnetru/core";
 import { BehaviorSubject, Observable } from "rxjs";
 import { filter } from "rxjs/operators";
 
-import { ISpeakerRow } from "./interfaces";
+import { IAutocompleteRow } from "@dotnetru/shared/autocomplete";
 
 @Injectable()
 export class SpeakerListService {
-    private _speakers$: BehaviorSubject<ISpeakerRow[]> = new BehaviorSubject<ISpeakerRow[]>([]);
+    private _speakers$: BehaviorSubject<IAutocompleteRow[]> = new BehaviorSubject<IAutocompleteRow[]>([]);
 
-    public get speakers$(): Observable<ISpeakerRow[]> {
+    public get speakers$(): Observable<IAutocompleteRow[]> {
         return this._speakers$.pipe(filter((x) => x.length > 0));
     }
 
@@ -18,9 +18,9 @@ export class SpeakerListService {
     ) { }
 
     public fetchSpeakers(): void {
-        this._httpService.get<ISpeakerRow[]>(
+        this._httpService.get<IAutocompleteRow[]>(
             API_ENDPOINTS.getSpeakersUrl,
-            (speakers: ISpeakerRow[]) => this._speakers$.next(speakers),
+            (speakers: IAutocompleteRow[]) => this._speakers$.next(speakers),
         );
     }
 }

ElectronNetAngular/ClientApp/app/components/speaker-list/speaker-list.component.ts

@@ -0,0 +1,2 @@
+export { TalkListComponent } from "./talk-list.component";
+export { TalkListModule } from "./talk-list.module";

ElectronNetAngular/ClientApp/app/components/speaker-list/speaker-list.module.ts

@@ -0,0 +1,7 @@
+<mtp-autocomplete #autocomplete
+                  [title]="title"
+                  [data]="talks"
+                  [iconName]="iconName"
+                  [iconText]="iconText"
+                  (selected)="onSelected($event)"
+                  (iconClicked)="onIconClicked()"></mtp-autocomplete>