add search button on list page

Author: devnamdev2003

public/assets/img/icon/icons8-cross-50.png

@@ -0,0 +1,5 @@
+/* Optional: smoother animation for width transition */
+:host {
+  display: block;
+}
+

src/app/component/search-button/search-button.component.css

@@ -0,0 +1,20 @@
+<div class="fixed bottom-16 right-5 z-50 flex items-center">
+  <!-- Animated container -->
+  <div
+    class="flex items-center bg-[var(--color-surface)] shadow-lg rounded-full overflow-hidden transition-all duration-300 ease-in-out"
+    [ngClass]="isOpen ? 'w-[90vw] md:w-[400px] pl-3 pr-1 h-14' : 'w-14 h-14 justify-center'">
+    <!-- Search input -->
+    <input *ngIf="isOpen" #searchInput [(ngModel)]="query" (keyup.enter)="onSearch()" type="text" maxlength="100"
+      placeholder="Search..." class="flex-1 outline-none text-sm px-2 text-[var(--input-text)] bg-transparent focus:ring-[var(--theme-color)]
+    transition-all duration-200" />
+    <!-- Search button -->
+    <button (click)="toggleSearch()"
+      class="flex items-center justify-center w-12 h-12 bg-[var(--theme-color)] text-white rounded-full transition">
+      <!-- Search icon (when closed) -->
+      <img *ngIf="!isOpen" src="assets/img/icon/icons8-search-50.png" alt="Search" class="w-5 h-5 invert" />
+
+      <!-- Close icon (when open) -->
+      <img *ngIf="isOpen" src="assets/img/icon/icons8-cross-50.png" alt="Close" class="w-6 h-6 invert" />
+    </button>
+  </div>
+</div>

src/app/component/search-button/search-button.component.html

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchButtonComponent } from './search-button.component';
+
+describe('SearchButtonComponent', () => {
+  let component: SearchButtonComponent;
+  let fixture: ComponentFixture<SearchButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SearchButtonComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SearchButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/component/search-button/search-button.component.spec.ts

@@ -0,0 +1,51 @@
+import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { GlobalLoaderService } from '../../service/global-loader/global-loader.service';
+
+@Component({
+  selector: 'app-search-button',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './search-button.component.html',
+  styleUrls: ['./search-button.component.css']
+})
+
+export class SearchButtonComponent {
+
+  isOpen = false;
+  query = '';
+
+  constructor(
+    private globalLoader: GlobalLoaderService
+  ) { }
+
+  @ViewChild('searchInput') searchInput!: ElementRef<HTMLInputElement>;
+  @Output() search = new EventEmitter<string>();
+
+  toggleSearch() {
+    this.isOpen = !this.isOpen;
+
+    if (this.isOpen) {
+      setTimeout(() => {
+        this.searchInput?.nativeElement.focus();
+      }, 50);
+    }
+  }
+
+  onSearch() {
+    console.log('Child emitting search query:', this.query);
+    this.search.emit(this.query);
+    this.searchInput?.nativeElement.blur();
+    this.globalLoader.show('Searching...');
+    setTimeout(() => {
+      this.globalLoader.hide();
+    }, 500);
+  }
+
+  onInputChange() {
+    if (this.query.trim().length > 10) {
+      this.query = this.query.slice(0, 10);
+    }
+  }
+}

src/app/component/search-button/search-button.component.ts

@@ -7,7 +7,7 @@
             <!-- Amount -->
             <div class="relative w-full md:w-1/2">
                 <label class="block mb-1 font-medium">Amount</label>
-                <input type="number" min="0" formControlName="amount" class="w-full p-2 rounded border"
+                <input #amountInput type="number" min="0" formControlName="amount" class="w-full p-2 rounded border"
                     style="background-color: var(--input-bg); color: var(--input-text); border-color: var(--input-border);"
                     step="0.01" />
 

src/app/features/add-expense/add-expense.component.html

@@ -44,6 +44,9 @@ export class AddExpenseComponent implements OnInit {
   /** Controls visibility of note suggestions dropdown */
   showNoteSuggestions = false;
 
+  /** Reference to the amount input element */
+  @ViewChild('amountInput') amountInput!: ElementRef<HTMLInputElement>;
+
   /**
    * Constructor to inject dependencies
    * @param fb FormBuilder instance
@@ -60,6 +63,9 @@ export class AddExpenseComponent implements OnInit {
 
   /** Lifecycle hook that initializes the component */
   ngOnInit(): void {
+    setTimeout(() => {
+      this.amountInput?.nativeElement.focus();
+    }, 50);
     this.resetFormWithCurrentDateTime();
     this.loadSuggestionsFromLocalStorage();
     this.onInputChanges();

src/app/features/add-expense/add-expense.component.ts

@@ -194,4 +194,6 @@ <h3 class="text-base font-semibold pb-2 border-b-2 border-[var(--color-gray-500)
         </div>
     </ng-template>
 
+    <app-search-button (search)="onSearch($event)"></app-search-button>
+
 </section>

src/app/features/list-expenses/list-expenses.component.html

@@ -7,11 +7,12 @@ import { UserService } from '../../service/localStorage/user.service';
 import { FormsModule } from '@angular/forms';
 import { ExpenseDetailsModalComponent } from "../../component/list-expenses/expense-details-modal/expense-details-modal.component";
 import { ExpenseListComponent } from "../../component/list-expenses/expense-list/expense-list.component";
+import { SearchButtonComponent } from '../../component/search-button/search-button.component';
 
 @Component({
   standalone: true,
   selector: 'app-list-expenses',
-  imports: [CommonModule, FormsModule, ExpenseDetailsModalComponent, ExpenseListComponent],
+  imports: [CommonModule, FormsModule, ExpenseDetailsModalComponent, ExpenseListComponent, SearchButtonComponent],
   templateUrl: './list-expenses.component.html',
   styleUrls: ['./list-expenses.component.css'],
 })
@@ -158,7 +159,7 @@ export class ListExpensesComponent implements OnInit {
 
   applyFilter() {
     this.totalAmount = 0;
-    let filtered = this.expenseService.getAll();
+    let filtered = this.expenses;
     this.appliedFilter = structuredClone(this.filter);
 
     if (this.appliedFilter.fromDate) {
@@ -172,7 +173,7 @@ export class ListExpensesComponent implements OnInit {
     if (this.appliedFilter.selectedCategoryIds.length) {
       filtered = filtered.filter(e => this.appliedFilter.selectedCategoryIds.includes(e.category_id));
     }
-    
+
     if (this.appliedFilter.paymentMode.length) {
       filtered = filtered.filter(e => this.appliedFilter.paymentMode.includes(e.payment_mode));
     }
@@ -254,4 +255,29 @@ export class ListExpensesComponent implements OnInit {
       this.filter.paymentMode = this.filter.paymentMode.filter(id => id !== categoryId);
     }
   }
+
+  onSearch(query: string) {
+    this.totalAmount = 0;
+    console.log('Parent received search query:', query);
+    this.expenses = this.expenseService.getAll();
+    this.expenses = this.expenses.filter(ex => {
+      return ((ex.location && ex.location.toLowerCase().includes(query.toLowerCase())) || (ex.note && ex.note.toLowerCase().includes(query.toLowerCase())));
+    });
+    this.expenses.forEach((val) => {
+      this.totalAmount = this.totalAmount + val.amount;
+    })
+    this.totalAmount = parseFloat(this.totalAmount.toFixed(2));
+    this.clearFiltersAndSorting();
+  }
+
+  clearFiltersAndSorting() {
+    this.filter.fromDate = '';
+    this.filter.toDate = '';
+    this.filter.selectedCategoryIds = [];
+    this.filter.paymentMode = [];
+    this.filter.isExtraSpending = false;
+    this.isFiltered = false;
+    this.isSorted = false;
+    this.selectedFieldName = "Sort By";
+  }
 }

src/app/features/list-expenses/list-expenses.component.ts

@@ -19,7 +19,7 @@ export const environment = {
    * Current environment type.
    * Possible values: 'local', 'live'
    */
-  developmentEnvironment: 'live', // Change to 'live' for production or 'local' for local development
+  developmentEnvironment: 'local', // Change to 'live' for production or 'local' for local development
 
   /**
    * Application version.