feat: enhance POS module with dynamic routing, improved state management, and new search functionality

src/app/modules/pos/views/pos.component.ts

@@ -1,40 +1,44 @@
-import { Maybe } from '@/core';
 import { JalaliDateDirective } from '@/shared/directives';
-import { Component, signal } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import images from 'src/assets/images';
 import { PosOrderCardComponent } from '../components/order/order-card.component';
 import { PosProductsComponent } from '../components/products/products.component';
-import { IPosInfoResponse } from '../models';
-import { PosService } from '../services/main.service';
+import { POSStore, POS_ID } from '../store';
 
 @Component({
   selector: 'app-pos',
   templateUrl: './pos.component.html',
   imports: [JalaliDateDirective, PosProductsComponent, PosOrderCardComponent],
+  providers: [
+    {
+      provide: POS_ID,
+      useFactory: (route: ActivatedRoute) => Number(route.snapshot.params['posId']),
+      deps: [ActivatedRoute],
+    },
+    POSStore,
+  ],
 })
 export class POSComponent {
-  constructor(private service: PosService) {
-    this.getInfo();
-  }
+  private readonly store = inject(POSStore);
 
   placeholderLogo = images.placeholders.logo;
 
   now = new Date();
-  inventoryId = 2;
 
-  info = signal<Maybe<IPosInfoResponse>>(null);
-  infoLoading = signal(true);
+  info = this.store.info;
+  infoLoading = this.store.getInfoLoading;
 
-  getInfo() {
-    this.infoLoading.set(true);
-    this.service.getInfo().subscribe({
-      next: (res) => {
-        this.info.set(res);
-        this.infoLoading.set(false);
-      },
-      error: () => {
-        this.infoLoading.set(false);
-      },
-    });
-  }
+  // getInfo() {
+  //   this.infoLoading.set(true);
+  //   this.service.getInfo(Number(this.posId)).subscribe({
+  //     next: (res) => {
+  //       this.info.set(res);
+  //       this.infoLoading.set(false);
+  //     },
+  //     error: () => {
+  //       this.infoLoading.set(false);
+  //     },
+  //   });
+  // }
 }