feat(page): add category page

src/app/pages/category/category-routing.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router";
+
+import { CategoryPage } from "./category.page";
+
+const routes: Routes = [
+  {
+    path: ":id",
+    component: CategoryPage
+  },
+  {
+    path: "",
+    redirectTo: "/tabs/browse",
+    pathMatch: "full"
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CategoryPageRoutingModule {}

src/app/pages/category/category.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+
+import { IonicModule } from "@ionic/angular";
+
+import { CategoryPageRoutingModule } from "./category-routing.module";
+
+import { CategoryPage } from "./category.page";
+import { LocalValueDirectiveModule } from "src/app/directives/local-value.module";
+import { ProductListModule } from "src/app/components/product-list/product-list.module";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    CategoryPageRoutingModule,
+    LocalValueDirectiveModule,
+    ProductListModule
+  ],
+  declarations: [CategoryPage]
+})
+export class CategoryPageModule {}

src/app/pages/category/category.page.html

@@ -0,0 +1,16 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/browse" text=""></ion-back-button>
+    </ion-buttons>
+    <ion-title localValue [data]="category" key="name" fallback="Category"></ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <product-list
+    [loading]="loading"
+    [products]="products"
+    (onProductClick)="onProductClick($event)"
+  ></product-list>
+</ion-content>

src/app/pages/category/category.page.spec.ts

@@ -0,0 +1,38 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { IonicModule } from "@ionic/angular";
+
+import { CategoryPage } from "./category.page";
+import { LocalValueDirectiveModule } from "src/app/directives/local-value.module";
+import { ProductListModule } from "src/app/components/product-list/product-list.module";
+import { IonicStorageModule } from "@ionic/storage";
+import { RouterModule } from "@angular/router";
+import { HttpClientModule } from "@angular/common/http";
+import { TranslateModule } from "@ngx-translate/core";
+
+describe("CategoryPage", () => {
+  let component: CategoryPage;
+  let fixture: ComponentFixture<CategoryPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [CategoryPage],
+      imports: [
+        IonicModule.forRoot(),
+        LocalValueDirectiveModule,
+        ProductListModule,
+        IonicStorageModule.forRoot(),
+        RouterModule.forRoot([]),
+        HttpClientModule,
+        TranslateModule.forRoot()
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CategoryPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/category/category.page.ts

@@ -0,0 +1,96 @@
+import { Component, OnInit } from "@angular/core";
+import { CategoryInterface } from "src/app/models/category.model";
+import { ProductInterface } from "src/app/models/product.model";
+import { ApiService } from "src/app/services/api/api.service";
+import { ActivatedRoute, Router } from "@angular/router";
+import { LocationService } from "src/app/services/location/location.service";
+import { LocationInterface } from "src/app/models/location.model";
+@Component({
+  selector: "app-category",
+  templateUrl: "./category.page.html",
+  styleUrls: ["./category.page.scss"]
+})
+export class CategoryPage implements OnInit {
+  loading: boolean;
+  category: CategoryInterface;
+  products: Array<ProductInterface>;
+  availableMerchantIds: Array<string>;
+  location: LocationInterface;
+  constructor(
+    private api: ApiService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private locSvc: LocationService
+  ) {
+    this.loading = true;
+  }
+
+  ngOnInit() {
+    this.route.params.subscribe((params: { id: string }) => {
+      const categoryId = params.id;
+      this.getAvailableMerchantIds().then(() => {
+        this.api.get(`Categories/G/${categoryId}`).then((observable) => {
+          observable.subscribe(
+            (resp: { code: string; data: CategoryInterface }) => {
+              if (resp.code === "success") {
+                this.category = resp.data;
+                this.getProducts();
+              }
+            }
+          );
+        });
+      });
+    });
+  }
+  async getAvailableMerchantIds() {
+    return new Promise((resolve, reject) => {
+      this.locSvc.getLocation().subscribe((location) => {
+        this.location = location;
+        if (!this.location) return;
+        this.api
+          .get("/Areas/G/my", {
+            lat: this.location.lat,
+            lng: this.location.lng
+          })
+          .then((observable) => {
+            observable.subscribe((resp: { code: string; data: any }) => {
+              if (resp.code === "success") {
+                this.api
+                  .geth("MerchantSchedules/availableMerchants", {
+                    areaId: resp.data._id
+                  })
+                  .then((merchantIds: Array<string>) => {
+                    this.availableMerchantIds = merchantIds;
+                    resolve(merchantIds);
+                  });
+              } else {
+                reject(resp);
+              }
+            });
+          })
+          .catch((e) => {
+            reject(e);
+          });
+      });
+    });
+  }
+  getProducts() {
+    this.api
+      .geth(
+        "Products",
+        {
+          categoryId: this.category._id,
+          merchantId: { $in: this.availableMerchantIds }
+        },
+        true,
+        "filter"
+      )
+      .then((resp: Array<ProductInterface>) => {
+        this.products = resp;
+        this.loading = false;
+      });
+  }
+  onProductClick(product: ProductInterface) {
+    this.router.navigate(["/tabs/browse/products", product._id]);
+  }
+}