clean up, using variable colors , and :host when overriding mat components

Author: Lauest-Iterator

src/app/app-routing.module.ts

@@ -5,7 +5,6 @@ import { UserPageComponent } from "./admin/users/user-page/user-page.component";
 import { AuthGuardService as AuthGuard } from "./auth/auth-guard.service";
 import { AuthComponent } from "./auth/auth.component";
 import { ErrorPageComponent } from "./error-page/error-page.component";
-import { SearchComponent } from "./search/search.component";
 
 const routes: Routes = [
   {
@@ -44,7 +43,6 @@ const routes: Routes = [
     loadChildren: () => import("./device-model/device-model.module").then(m => m.DeviceModelModule),
     canActivate: [AuthGuard],
   },
-  { path: "search", component: SearchComponent, canActivate: [AuthGuard] },
   { path: "not-found", component: ErrorPageComponent, data: { message: "not-found", code: 404 } },
   { path: "not-authorized", component: ErrorPageComponent },
   { path: "new-user", component: NewUserComponent, canActivate: [AuthGuard] },

src/app/applications/application.service.ts

@@ -89,6 +89,10 @@ export class ApplicationService {
     return this.restService.get("application", body);
   }
 
+  getApplicationFilterOptions(id: number): Observable<string[]> {
+    return this.restService.get(`application/${id}/filter-information`, {}, id);
+  }
+
   deleteApplication(id: number) {
     return this.restService.delete("application", id);
   }

src/app/applications/applications-list/application-filter/application-filter.component.scss

@@ -1,3 +1,5 @@
+@import "../../../../assets/scss/setup/variables";
+
 .filter-container {
   display: flex;
   flex-direction: row;
@@ -30,7 +32,7 @@
   justify-content: center;
   display: flex !important;
   align-items: center;
-  border: 1px solid black !important;
+  border: 1px solid $color-link !important;
 }
 
 .filter-icon-container {
@@ -42,28 +44,28 @@
   font-size: 16px;
 }
 
-.mat-mdc-select {
+:host .mat-mdc-select {
   height: 20px;
   line-height: 35px;
   display: flex;
   align-items: center;
   font-size: 16px !important;
-  color: #737373 !important;
+  color: $selector-font-color !important;
 }
 
-.mat-mdc-form-field {
+:host .mat-mdc-form-field {
   height: 20px !important;
   display: flex;
   align-items: center;
 }
 
-.mat-mdc-text-field-wrapper {
-  background-color: #ffff !important;
+:host .mat-mdc-text-field-wrapper {
+  background-color: $white !important;
   height: 40px !important;
   display: flex !important;
   align-items: center !important;
 }
 
-.mat-mdc-select-arrow {
+:host .mat-mdc-select-arrow {
   display: none;
 }

src/app/applications/applications-list/application-filter/application-filter.component.ts

@@ -7,6 +7,7 @@ import { MatIconModule } from "@angular/material/icon";
 import { MatSelectModule } from "@angular/material/select";
 import { ApplicationService } from "@applications/application.service";
 import { ApplicationState, ApplicationStatus } from "@applications/enums/status.enum";
+import { SharedVariableService } from "@shared/shared-variable/shared-variable.service";
 import { ApplicationsFilterService } from "../applications-filter.service";
 
 @Component({
@@ -26,9 +27,15 @@ import { ApplicationsFilterService } from "../applications-filter.service";
   encapsulation: ViewEncapsulation.ShadowDom,
 })
 export class ApplicationFilterComponent implements OnInit {
-  constructor(private applicationService: ApplicationService, private filterService: ApplicationsFilterService) {}
+  constructor(
+    private applicationService: ApplicationService,
+    private filterService: ApplicationsFilterService,
+    private sharedVariableService: SharedVariableService
+  ) {}
   ngOnInit(): void {
-    this.loadOwnerOptions();
+    this.sharedVariableService.getValue().subscribe(organizationId => {
+      this.loadOwnerOptions(organizationId);
+    });
   }
 
   stateOptions: { label: string; value: ApplicationState | "All" }[] = [
@@ -48,10 +55,12 @@ export class ApplicationFilterComponent implements OnInit {
 
   ownerOptions: { label: string; value: string | "All" }[] = [];
 
-  loadOwnerOptions(): void {
-    this.filterService.getOwnerOptions().subscribe(options => {
-      options.push({ label: "Alle", value: "All" });
-      this.ownerOptions = options;
+  loadOwnerOptions(orgId: number): void {
+    this.applicationService.getApplicationFilterOptions(orgId).subscribe(options => {
+      console.log(options);
+      const optionsArray: { label: string; value: string }[] = [{ label: "Alle", value: "All" }];
+      options.forEach(option => optionsArray.push({ label: option, value: option }));
+      this.ownerOptions = optionsArray;
     });
   }