feat: add options for campuses

src/components/admin/schedule-file-upload/schedule-file-upload.component.html

@@ -19,17 +19,21 @@
     <div style="margin-top: 15px;">
       <p>Выбранные файлы:</p>
       @for (item of selectedFiles; track $index) {
-        <div>
+        <p>
-          <p>
+          {{ item.file.name }}
-            {{ item.file.name }}
+        </p>
-          </p>
+        <mat-form-field color="accent" style="margin-bottom: 18px;">
-          <mat-form-field color="accent">
+          <mat-label>Кампус по умолчанию</mat-label>
-            <mat-label>
+          <input matInput type="text" [(ngModel)]="item.campus"
-              Кампус по умолчанию
+                 [matAutocomplete]="auto">
-            </mat-label>
+          <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectCampus($event.option.value, item)">
-            <input matInput type="text" [(ngModel)]="item.campus"/>
+            @for (option of onFilter(item.campus); track $index) {
-          </mat-form-field>
+              <mat-option [value]="option">
-        </div>
+                {{ option }}
+              </mat-option>
+            }
+          </mat-autocomplete>
+        </mat-form-field>
       }
     </div>
   }

src/components/admin/schedule-file-upload/schedule-file-upload.component.ts

@@ -10,9 +10,11 @@ import {MatIcon} from "@angular/material/icon";
 import {ScheduleService} from "@api/v1/configuration/schedule.service";
 import {DataSpinnerComponent} from "@component/common/data-spinner/data-spinner.component";
 import {MatFormFieldModule} from "@angular/material/form-field";
-import {FormsModule} from "@angular/forms";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {MatInput} from "@angular/material/input";
 import {ToastrService} from "ngx-toastr";
+import {MatAutocomplete, MatAutocompleteTrigger, MatOption} from "@angular/material/autocomplete";
+import {CampusService} from "@api/v1/campus.service";
 
 @Component({
   selector: 'app-schedule-file-upload',
@@ -23,17 +25,33 @@ import {ToastrService} from "ngx-toastr";
     DataSpinnerComponent,
     MatFormFieldModule,
     FormsModule,
-    MatInput
+    MatInput,
+    MatAutocomplete,
+    MatAutocompleteTrigger,
+    MatOption,
+    ReactiveFormsModule
   ],
   templateUrl: './schedule-file-upload.component.html',
-  providers: [ScheduleService]
+  providers: [ScheduleService, CampusService]
 })
 export class ScheduleFileUploadComponent {
-  selectedFiles: { file: File, campus: string }[] = [];
+  protected selectedFiles: { file: File, campus: string }[] = [];
-  fileLoading: boolean = false;
+  protected fileLoading: boolean = false;
+  protected campuses: string[] = [];
   @ViewChild('fileInput') input!: ElementRef;
 
-  constructor(private dialog: MatDialog, private api: ScheduleService, private notify: ToastrService) {
+  constructor(
+    private dialog: MatDialog,
+    private api: ScheduleService,
+    private notify: ToastrService,
+    campus: CampusService) {
+    campus.getCampus().subscribe(data => {
+      this.campuses = data.map(x => x.codeName);
+    });
+  }
+
+  protected onSelectCampus(value: string, item: { file: File, campus: string }) {
+    item.campus = value;
   }
 
   protected saveFunction() {
@@ -49,18 +67,22 @@ export class ScheduleFileUploadComponent {
     };
   }
 
-  onFileChooseClick() {
+  protected onFilter(value: string): string[] {
+    const filterValue = value?.toLowerCase() || '';
+    return this.campuses.filter(campus => campus.toLowerCase().includes(filterValue));
+  }
+
+  protected onFileChooseClick() {
     this.fileLoading = true;
     this.input.nativeElement.click();
   }
 
-  onFileSelected(event: any): void {
+  protected onFileSelected(event: any): void {
     this.fileLoading = false;
-    this.selectedFiles = Array.from(event.target.files)
+    this.selectedFiles = Array.from(event.target.files).map(file => ({file: <File>file, campus: ''}));
-      .map(x => <{file: File, campus: string}>{file: x, campus: ''});
   }
 
-  onUpload(data: Observable<any>): void {
+  protected onUpload(data: Observable<any>): void {
     data.subscribe(_ => {
       this.notify.info(`Файлы в размере ${this.selectedFiles.length} успешно загружены. Задача поставлена в очередь`);
       this.selectedFiles = [];