Add Search by Company Name field to the Companies admin page

src/app/modules/admin/components/companies/companies-admin-page/companies-admin-page.component.html

@@ -3,6 +3,41 @@
 <div class="container my-5" *ngIf="companies; else dataLoading">
   <div class="card">
     <div class="card-body">
+      <div class="mb-3">
+        <div class="row">
+          <div class="col-md-6 mb-1">
+            <input
+              type="text"
+              placeholder="Поиск по названию компании. Минимум {{
+                MIN_SEARCH_QUERY_LENGTH
+              }} символа"
+              class="form-control"
+              id="searchQuery"
+              [(ngModel)]="searchQuery"
+              (keyup)="onKeyupEvent($event)"
+            />
+          </div>
+          <div class="col-md-6 mb-1">
+            <button
+              type="button"
+              class="btn btn-outline-primary"
+              [disabled]="!searchButtonShouldBeEnabled"
+              [class.disabled]="!searchButtonShouldBeEnabled"
+              (click)="search()"
+            >
+              Найти
+            </button>
+            <button
+              type="button"
+              class="btn btn-outline-dark ms-2"
+              (click)="clearSearch()"
+            >
+              Сбросить
+            </button>
+          </div>
+        </div>
+      </div>
+
       <div class="mb-5">
         <button class="btn btn-primary" (click)="create()">
           Добавить компанию

src/app/modules/admin/components/companies/companies-admin-page/companies-admin-page.component.spec.ts

@@ -32,4 +32,35 @@ describe("CompaniesAdminPageComponent", () => {
   it("should create", () => {
     expect(component).toBeTruthy();
   });
+
+  it("should enable search button when query is long enough", () => {
+    component.searchQuery = "te";
+    expect(component.searchButtonShouldBeEnabled).toBeTruthy();
+  });
+
+  it("should disable search button when query is too short", () => {
+    component.searchQuery = "t";
+    expect(component.searchButtonShouldBeEnabled).toBeFalsy();
+  });
+
+  it("should clear search query and reload data", () => {
+    component.searchQuery = "test";
+    spyOn(component, "loadData");
+
+    component.clearSearch();
+
+    expect(component.searchQuery).toBe("");
+    expect(component.currentPage).toBe(1);
+    expect(component.loadData).toHaveBeenCalledWith(1);
+  });
+
+  it("should trigger search on Enter key press", () => {
+    component.searchQuery = "test";
+    spyOn(component, "search");
+
+    const event = new KeyboardEvent("keyup", { key: "Enter" });
+    component.onKeyupEvent(event);
+
+    expect(component.search).toHaveBeenCalled();
+  });
 });

src/app/modules/admin/components/companies/companies-admin-page/companies-admin-page.component.ts

@@ -3,7 +3,10 @@ import { Router } from "@angular/router";
 import { Company } from "@models/companies.model";
 import { defaultPageParams } from "@models/page-params";
 import { PaginatedList } from "@models/paginated-list";
-import { CompaniesService } from "@services/companies.service";
+import {
+  CompaniesSearchParamsForAdmin,
+  CompaniesService,
+} from "@services/companies.service";
 import { TitleService } from "@services/title.service";
 import { untilDestroyed } from "@shared/subscriptions/until-destroyed";
 import { EditCompanyForm } from "../shared/edit-company-form";
@@ -17,14 +20,24 @@ import { ConfirmMsg } from "@shared/components/dialogs/models/confirm-msg";
   standalone: false,
 })
 export class CompaniesAdminPageComponent implements OnInit, OnDestroy {
+  readonly MIN_SEARCH_QUERY_LENGTH = 2;
+
   companies: Array<Company> | null = null;
   source: PaginatedList<Company> | null = null;
   currentPage: number = 1;
+  searchQuery: string = "";
 
   editForm: EditCompanyForm | null = null;
   itemToEdit: Company | null = null;
   confirmDeletionMessage: DialogMessage<ConfirmMsg> | null = null;
 
+  get searchButtonShouldBeEnabled(): boolean {
+    return (
+      this.searchQuery != null &&
+      this.searchQuery.length >= this.MIN_SEARCH_QUERY_LENGTH
+    );
+  }
+
   constructor(
     private readonly service: CompaniesService,
     private readonly title: TitleService,
@@ -43,12 +56,14 @@ export class CompaniesAdminPageComponent implements OnInit, OnDestroy {
     this.source = null;
     this.currentPage = pageToLoad;
 
+    const params: CompaniesSearchParamsForAdmin = {
+      companyName: this.searchQuery || null,
+      page: pageToLoad,
+      pageSize: defaultPageParams.pageSize,
+    };
+
     this.service
-      .allForAdmin({
-        searchQuery: null,
-        page: pageToLoad,
-        pageSize: defaultPageParams.pageSize,
-      })
+      .allForAdmin(params)
       .pipe(untilDestroyed(this))
       .subscribe((i) => {
         this.companies = i.results;
@@ -60,6 +75,27 @@ export class CompaniesAdminPageComponent implements OnInit, OnDestroy {
     this.title.resetTitle();
   }
 
+  search(): void {
+    if (this.searchButtonShouldBeEnabled) {
+      this.currentPage = 1;
+      this.loadData(1);
+    }
+  }
+
+  onKeyupEvent(event: KeyboardEvent): void {
+    if (event.key === "Enter") {
+      this.search();
+    }
+  }
+
+  clearSearch(): void {
+    if (this.searchQuery.length >= this.MIN_SEARCH_QUERY_LENGTH) {
+      this.searchQuery = "";
+      this.currentPage = 1;
+      this.loadData(1);
+    }
+  }
+
   edit(item: Company): void {
     this.editForm = new EditCompanyForm(item);
     this.itemToEdit = item;

src/app/services/companies.service.ts

@@ -10,12 +10,13 @@ import { PageParams } from "@models/page-params";
 import { ConvertObjectToHttpParams } from "@shared/value-objects/convert-object-to-http";
 import { PaginatedList } from "@models/paginated-list";
 
-export interface CompaniesSearchParams extends CompaniesSearchParamsForAdmin {
+export interface CompaniesSearchParams extends PageParams {
+  searchQuery: string | null;
   withRating: boolean;
 }
 
 export interface CompaniesSearchParamsForAdmin extends PageParams {
-  searchQuery: string | null;
+  companyName: string | null;
 }
 
 export interface CompanyEditRequest {