refactor: clean code

src/components/schedule/tabs/other/other.component.html

@@ -1,24 +1,24 @@
 <!--suppress CssInvalidPropertyValue -->
-<button mat-button [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" [id]="idButton">{{ textButton }}</button>
+<button mat-button [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" [id]="idButton" style="margin-bottom: 10px;">{{ textButton }}</button>
 
 <mat-menu #menu="matMenu" [hasBackdrop]="false" class="menu-options">
   <div (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()" style="padding: 0 15px 15px">
     <div class="header-menu">
       <mat-form-field appearance="outline" color="accent" style="display:flex;">
-        <input matInput placeholder="Поиск..." [(ngModel)]="searchQuery" [disabled]="data.length === 0">
+        <input matInput placeholder="Поиск..." [(ngModel)]="searchQuery" [disabled]="data === null || data.length === 0">
-        <button mat-icon-button matSuffix (click)="clearSearchQuery()" [disabled]="data.length === 0">
+        <button mat-icon-button matSuffix (click)="clearSearchQuery()" [disabled]="data === null || data.length === 0">
           <mat-icon style="color: var(--mdc-filled-button-label-text-color);">close</mat-icon>
         </button>
       </mat-form-field>
 
       <div class="button-group">
-        <mat-checkbox (click)="checkData()" [disabled]="data.length === 0" #chooseCheckbox/>
+        <mat-checkbox (click)="checkData()" [disabled]="data === null || data.length === 0" #chooseCheckbox/>
-        <button mat-button (click)="clearAll()" [disabled]="data.length === 0">Очистить</button>
+        <button mat-button (click)="clearAll()" [disabled]="data === null || data.length === 0">Очистить</button>
       </div>
       <hr/>
     </div>
-    @if (data.length === 0) {
+    @if (data === null || data.length === 0) {
-      <app-loading-indicator style="display: flex; justify-content: center;" [loading]="dataLoaded !== null"
+      <app-loading-indicator style="display: flex; justify-content: center;" [loading]="data === null"
                              (retryFunction)="retryLoadData.emit()"/>
     } @else {
       <mat-selection-list>

src/components/schedule/tabs/other/other.component.ts

@@ -47,17 +47,19 @@ export interface SelectData {
 export class OtherComponent {
   private _searchQuery: string = '';
   protected filteredData: BehaviorSubject<SelectData[]> = new BehaviorSubject<SelectData[]>([]);
-  protected data: SelectData[] = [];
+  protected data: SelectData[] | null = null;
 
   @Input() idButton!: string;
   @Input() textButton!: string;
   @ViewChild('menuTrigger') menuTrigger!: MatMenuTrigger;
   @ViewChild('chooseCheckbox') chooseCheckbox!: MatCheckbox;
 
-  @Input() dataLoaded: boolean | null = false;
   @Output() retryLoadData: EventEmitter<void> = new EventEmitter<void>();
 
   get selectedIds(): number[] {
+    if (this.data === null)
+      return [];
+
     return this.data.filter(x => x.selected).map(x => x.id);
   }
 
@@ -72,6 +74,9 @@ export class OtherComponent {
   }
 
   private updateCheckBox() {
+    if (this.data === null)
+      return;
+
     this.chooseCheckbox.checked = this.data.every(x => x.selected);
     this.chooseCheckbox.indeterminate = this.data.some(x => x.selected) && !this.chooseCheckbox.checked;
   }
@@ -82,6 +87,9 @@ export class OtherComponent {
   }
 
   protected updateFilteredData(): void {
+    if (this.data === null)
+      return;
+
     this.filteredData.next(this.data.filter(x =>
       x.name.toLowerCase().includes(this.searchQuery.toLowerCase())
     ));
@@ -92,7 +100,7 @@ export class OtherComponent {
   }
 
   protected clearAll(): void {
-    this.data.forEach(x => x.selected = false);
+    this.data?.forEach(x => x.selected = false);
 
     if (this.searchQuery !== '') {
       const updatedData = this.filteredData.value.map(x => {
@@ -109,7 +117,7 @@ export class OtherComponent {
     const check: boolean = this.filteredData.value.some(x => !x.selected) && !this.filteredData.value.every(x => x.selected);
 
     const updatedData = this.filteredData.value.map(data => {
-      this.data.find(x => x.id === data.id)!.selected = check;
+      this.data!.find(x => x.id === data.id)!.selected = check;
       return {...data, selected: check};
     });
 
@@ -118,7 +126,7 @@ export class OtherComponent {
   }
 
   protected checkboxStateChange(item: number) {
-    const data = this.data.find(x => x.id === item)!;
+    const data = this.data!.find(x => x.id === item)!;
     data.selected = !data.selected;
     const updatedData = this.filteredData.value;
     updatedData.find(x => x.id === item)!.selected = data.selected;

src/directives/has-role.directive.ts

@@ -20,7 +20,7 @@ export class HasRoleDirective {
 
     this.authService
       .getRole()
-      .pipe(catchError(error => {
+      .pipe(catchError(_ => {
         this.viewContainer.clear();
         return of(null);
       }))

src/pages/login/login.component.ts

@@ -40,11 +40,11 @@ export class LoginComponent {
   protected loginButtonIsDisable: boolean = true;
   protected errorText: string = '';
 
-  constructor(private formBuilder: FormBuilder, private auth: AuthApiService, private route: Router) {
+  constructor(private formBuilder: FormBuilder, private auth: AuthApiService, private router: Router) {
     this.auth.getRole()
       .subscribe(data => {
         if (data !== null)
-          route.navigate(['admin']).then();
+          router.navigate(['admin']).then();
       });
 
     this.loginForm = this.formBuilder.group({
@@ -89,7 +89,7 @@ export class LoginComponent {
       .subscribe(_ => {
         this.loaderActive = false;
         this.errorText = '';
-        this.route.navigate(['admin']).then();
+        this.router.navigate(['admin']).then();
       });
   }
 }