feat: add options for campuses
All checks were successful
Build and Deploy Angular App / build (push) Successful in 1m27s
All checks were successful
Build and Deploy Angular App / build (push) Successful in 1m27s
This commit is contained in:
@ -19,17 +19,21 @@
|
|||||||
<div style="margin-top: 15px;">
|
<div style="margin-top: 15px;">
|
||||||
<p>Выбранные файлы:</p>
|
<p>Выбранные файлы:</p>
|
||||||
@for (item of selectedFiles; track $index) {
|
@for (item of selectedFiles; track $index) {
|
||||||
<div>
|
|
||||||
<p>
|
<p>
|
||||||
{{ item.file.name }}
|
{{ item.file.name }}
|
||||||
</p>
|
</p>
|
||||||
<mat-form-field color="accent">
|
<mat-form-field color="accent" style="margin-bottom: 18px;">
|
||||||
<mat-label>
|
<mat-label>Кампус по умолчанию</mat-label>
|
||||||
Кампус по умолчанию
|
<input matInput type="text" [(ngModel)]="item.campus"
|
||||||
</mat-label>
|
[matAutocomplete]="auto">
|
||||||
<input matInput type="text" [(ngModel)]="item.campus"/>
|
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectCampus($event.option.value, item)">
|
||||||
|
@for (option of onFilter(item.campus); track $index) {
|
||||||
|
<mat-option [value]="option">
|
||||||
|
{{ option }}
|
||||||
|
</mat-option>
|
||||||
|
}
|
||||||
|
</mat-autocomplete>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
@ -10,9 +10,11 @@ import {MatIcon} from "@angular/material/icon";
|
|||||||
import {ScheduleService} from "@api/v1/configuration/schedule.service";
|
import {ScheduleService} from "@api/v1/configuration/schedule.service";
|
||||||
import {DataSpinnerComponent} from "@component/common/data-spinner/data-spinner.component";
|
import {DataSpinnerComponent} from "@component/common/data-spinner/data-spinner.component";
|
||||||
import {MatFormFieldModule} from "@angular/material/form-field";
|
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 {MatInput} from "@angular/material/input";
|
||||||
import {ToastrService} from "ngx-toastr";
|
import {ToastrService} from "ngx-toastr";
|
||||||
|
import {MatAutocomplete, MatAutocompleteTrigger, MatOption} from "@angular/material/autocomplete";
|
||||||
|
import {CampusService} from "@api/v1/campus.service";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-schedule-file-upload',
|
selector: 'app-schedule-file-upload',
|
||||||
@ -23,17 +25,33 @@ import {ToastrService} from "ngx-toastr";
|
|||||||
DataSpinnerComponent,
|
DataSpinnerComponent,
|
||||||
MatFormFieldModule,
|
MatFormFieldModule,
|
||||||
FormsModule,
|
FormsModule,
|
||||||
MatInput
|
MatInput,
|
||||||
|
MatAutocomplete,
|
||||||
|
MatAutocompleteTrigger,
|
||||||
|
MatOption,
|
||||||
|
ReactiveFormsModule
|
||||||
],
|
],
|
||||||
templateUrl: './schedule-file-upload.component.html',
|
templateUrl: './schedule-file-upload.component.html',
|
||||||
providers: [ScheduleService]
|
providers: [ScheduleService, CampusService]
|
||||||
})
|
})
|
||||||
export class ScheduleFileUploadComponent {
|
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;
|
@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() {
|
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.fileLoading = true;
|
||||||
this.input.nativeElement.click();
|
this.input.nativeElement.click();
|
||||||
}
|
}
|
||||||
|
|
||||||
onFileSelected(event: any): void {
|
protected onFileSelected(event: any): void {
|
||||||
this.fileLoading = false;
|
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(_ => {
|
data.subscribe(_ => {
|
||||||
this.notify.info(`Файлы в размере ${this.selectedFiles.length} успешно загружены. Задача поставлена в очередь`);
|
this.notify.info(`Файлы в размере ${this.selectedFiles.length} успешно загружены. Задача поставлена в очередь`);
|
||||||
this.selectedFiles = [];
|
this.selectedFiles = [];
|
||||||
|
Reference in New Issue
Block a user