feat(page): add merchant and category segment to browse page

src/app/pages/browse/browse.module.ts

@@ -12,6 +12,8 @@ import { HttpClientModule } from "@angular/common/http";
 import { LocationSearchModule } from "src/app/components/location-search/location-search.module";
 import { LocalValueDirectiveModule } from "src/app/directives/local-value.module";
 import { IonImageModule } from "src/app/components/ion-image/ion-image.module";
+import { MerchantListComponent } from "./merchant-list/merchant-list.component";
+import { CategoryListComponent } from "./category-list/category-list.component";
 
 @NgModule({
   imports: [
@@ -25,6 +27,6 @@ import { IonImageModule } from "src/app/components/ion-image/ion-image.module";
     LocalValueDirectiveModule,
     IonImageModule
   ],
-  declarations: [BrowsePage]
+  declarations: [BrowsePage, MerchantListComponent, CategoryListComponent]
 })
 export class BrowsePageModule {}

src/app/pages/browse/browse.page.html

@@ -6,24 +6,15 @@
 
 <ion-content>
   <ion-row class="ion-padding">
-    <ion-col size="6" *ngFor="let merchant of merchants">
-      <ion-card 
-        class="card-merchant ion-no-margin"
-        [routerLink]="['/tabs/browse/merchants', merchant._id]"
-      >
-        <ion-card-content class="card-content-merchant ion-margin-bottom">
-          <div class="wrapper-merchant-img">
-            <app-ion-image
-            [src]="getPictureUrl(merchant)"
-            [alt]="merchant.name"
-            style="height: 180px; object-fit: cover;"
-          ></app-ion-image>
-          </div>
-          <ion-label class="label-merchant-name">
-            <h3 localValue [data]="merchant" key="name"></h3>
-          </ion-label>
-        </ion-card-content>
-      </ion-card>
-    </ion-col>
+    <ion-segment [(ngModel)]="viewMode">
+      <ion-segment-button value="merchant">
+        <ion-label translate="Merchant"></ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="category">
+        <ion-label translate="Category"></ion-label>
+      </ion-segment-button>
+    </ion-segment>
   </ion-row>
+  <merchant-list *ngIf="viewMode === 'merchant'"></merchant-list>
+  <category-list *ngIf="viewMode === 'category'"></category-list>
 </ion-content>

src/app/pages/browse/browse.page.scss

@@ -1,9 +0,0 @@
-.wrapper-merchant-img {
-  margin-top: -20px;
-  margin-left: -20px;
-  margin-right: -20px;
-  margin-bottom: 10px;
-}
-.label-merchant-name h3 {
-  font-weight: 600;
-}

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

@@ -9,13 +9,16 @@ import { IonImageModule } from "src/app/components/ion-image/ion-image.module";
 import { LocalValueDirectiveModule } from "src/app/directives/local-value.module";
 import { IonicStorageModule } from "@ionic/storage";
 import { RouterTestingModule } from "@angular/router/testing";
+import { FormsModule } from '@angular/forms';
+import { CategoryListComponent } from './category-list/category-list.component';
+import { MerchantListComponent } from './merchant-list/merchant-list.component';
 describe("BrowsePage", () => {
   let component: BrowsePage;
   let fixture: ComponentFixture<BrowsePage>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [BrowsePage],
+      declarations: [BrowsePage, CategoryListComponent, MerchantListComponent],
       imports: [
         IonicModule.forRoot(),
         TranslateModule.forRoot(),
@@ -31,7 +34,8 @@ describe("BrowsePage", () => {
         LocationSearchModule,
         IonImageModule,
         LocalValueDirectiveModule,
-        IonicStorageModule.forRoot()
+        IonicStorageModule.forRoot(),
+        FormsModule
       ]
     }).compileComponents();
 

src/app/pages/browse/browse.page.ts

@@ -1,9 +1,6 @@
 import { Component, OnInit } from "@angular/core";
-import { ApiService } from "src/app/services/api/api.service";
 import { TranslateService } from "@ngx-translate/core";
 import { LocationInterface } from "src/app/models/location.model";
-import { MerchantInterface } from "src/app/models/merchant.model";
-import { getPictureUrl } from "src/app/models/merchant.model";
 import { LocationService } from "src/app/services/location/location.service";
 import { AlertController } from "@ionic/angular";
 import { Router } from "@angular/router";
@@ -13,67 +10,26 @@ import { Router } from "@angular/router";
   styleUrls: ["./browse.page.scss"]
 })
 export class BrowsePage implements OnInit {
-  merchants: Array<MerchantInterface>;
   location: LocationInterface;
+  viewMode: string;
   constructor(
-    private api: ApiService,
-    private lang: TranslateService,
     private loc: LocationService,
     private alert: AlertController,
     private translator: TranslateService,
     private router: Router
   ) {
-    this.merchants = [];
+    this.viewMode = "merchant";
   }
 
   ngOnInit() {
     this.loc.getLocation().subscribe((location: LocationInterface) => {
-      if (location) {
-        this.api
-          .get("/Areas/G/my", { lat: location.lat, lng: location.lng })
-          .then((observable) => {
-            observable.subscribe((resp: { code: string; data: any }) => {
-              if (resp.code === "success") {
-                this.loadMerchants(resp.data._id);
-              }
-            });
-          });
-      } else if (location === null) {
+      if (location === null) {
         this.showAlert();
         this.router.navigate(["/tabs/my-account/setting"]);
       }
     });
   }
 
-  loadMerchants(areaId: string) {
-    this.api.get("Merchants/G", { status: "A" }).then((observable) => {
-      observable.subscribe((resp: any) => {
-        const data = resp.data;
-        const merchants: Array<any> = data;
-        if (areaId) {
-          this.api
-            .geth("MerchantSchedules/availableMerchants", { areaId })
-            .then((merchantIds: Array<string>) => {
-              if (merchantIds && merchantIds.length > 0) {
-                const availables = merchants.filter((merchant) =>
-                  merchantIds.includes(merchant._id)
-                );
-                this.merchants = availables;
-              } else {
-                this.merchants = [];
-              }
-            });
-        } else {
-          this.merchants = merchants;
-        }
-      });
-    });
-  }
-
-  getPictureUrl(merchant: MerchantInterface) {
-    return getPictureUrl(merchant);
-  }
-
   showAlert() {
     const header = "Notice";
     const message = "Please select delivery address";
@@ -90,4 +46,8 @@ export class BrowsePage implements OnInit {
         });
     });
   }
+
+  toggleViewMode(event) {
+    console.log(event);
+  }
 }

src/app/pages/browse/category-list/category-list.component.html

@@ -0,0 +1,7 @@
+<ion-row class="ion-padding">
+  <ion-list>
+    <ion-item *ngFor="let category of categories">
+      <h4 localValue [data]="category" key="name"></h4>
+    </ion-item>
+  </ion-list>
+</ion-row>

src/app/pages/browse/category-list/category-list.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from "@angular/core";
+import { ApiService } from "src/app/services/api/api.service";
+import { CategoryInterface } from "src/app/models/category.model";
+
+@Component({
+  selector: "category-list",
+  templateUrl: "./category-list.component.html",
+  styleUrls: ["./category-list.component.scss"]
+})
+export class CategoryListComponent implements OnInit {
+  loading: boolean;
+  categories: Array<CategoryInterface>;
+  constructor(private api: ApiService) {
+    this.loading = true;
+    this.categories = [];
+  }
+
+  ngOnInit() {
+    this.api.get("Categories/G").then((observable) => {
+      observable.subscribe((resp: { code: string; data: Array<any> }) => {
+        if (resp.code === "success") {
+          this.categories = resp.data;
+        }
+        this.loading = false;
+      });
+    });
+  }
+}

src/app/pages/browse/merchant-list/merchant-list.component.html

@@ -0,0 +1,21 @@
+<ion-row class="ion-padding">
+  <ion-col size="6" *ngFor="let merchant of merchants">
+    <ion-card 
+      class="card-merchant ion-no-margin"
+      [routerLink]="['/tabs/browse/merchants', merchant._id]"
+    >
+      <ion-card-content class="card-content-merchant ion-margin-bottom">
+        <div class="wrapper-merchant-img">
+          <app-ion-image
+          [src]="getPictureUrl(merchant)"
+          [alt]="merchant.name"
+          style="height: 180px; object-fit: cover;"
+        ></app-ion-image>
+        </div>
+        <ion-label class="label-merchant-name">
+          <h3 localValue [data]="merchant" key="name"></h3>
+        </ion-label>
+      </ion-card-content>
+    </ion-card>
+  </ion-col>
+</ion-row>

src/app/pages/browse/merchant-list/merchant-list.component.scss

@@ -0,0 +1,9 @@
+.wrapper-merchant-img {
+  margin-top: -20px;
+  margin-left: -20px;
+  margin-right: -20px;
+  margin-bottom: 10px;
+}
+.label-merchant-name h3 {
+  font-weight: 600;
+}

src/app/pages/browse/merchant-list/merchant-list.component.ts

@@ -0,0 +1,62 @@
+import { Component, OnInit } from "@angular/core";
+import { ApiService } from "src/app/services/api/api.service";
+import { LocationInterface } from "src/app/models/location.model";
+import { MerchantInterface } from "src/app/models/merchant.model";
+import { getPictureUrl } from "src/app/models/merchant.model";
+import { LocationService } from "src/app/services/location/location.service";
+
+@Component({
+  selector: "merchant-list",
+  templateUrl: "./merchant-list.component.html",
+  styleUrls: ["./merchant-list.component.scss"]
+})
+export class MerchantListComponent implements OnInit {
+  merchants: Array<MerchantInterface>;
+  location: LocationInterface;
+  constructor(private locSvc: LocationService, private api: ApiService) {}
+
+  ngOnInit() {
+    this.locSvc.getLocation().subscribe((location: LocationInterface) => {
+      if (location) {
+        this.api
+          .get("/Areas/G/my", { lat: location.lat, lng: location.lng })
+          .then((observable) => {
+            observable.subscribe((resp: { code: string; data: any }) => {
+              if (resp.code === "success") {
+                this.loadMerchants(resp.data._id);
+              }
+            });
+          });
+      }
+    });
+  }
+
+  loadMerchants(areaId: string) {
+    this.api.get("Merchants/G", { status: "A" }).then((observable) => {
+      observable.subscribe((resp: any) => {
+        const data = resp.data;
+        const merchants: Array<any> = data;
+        if (areaId) {
+          this.api
+            .geth("MerchantSchedules/availableMerchants", { areaId })
+            .then((merchantIds: Array<string>) => {
+              if (merchantIds && merchantIds.length > 0) {
+                const availables = merchants.filter((merchant) =>
+                  merchantIds.includes(merchant._id)
+                );
+                this.merchants = availables;
+              } else {
+                this.merchants = [];
+              }
+            });
+        } else {
+          this.merchants = merchants;
+        }
+      });
+    });
+  }
+
+  getPictureUrl(merchant: MerchantInterface) {
+    return getPictureUrl(merchant);
+  }
+}

src/assets/i18n/en.json

@@ -67,5 +67,7 @@
   "Save": "Save",
   "Input delivery address": "Input delivery address",
   "Please select delivery address": "Please select delivery address",
-  "Saved successfully": "Saved successfully"
+  "Saved successfully": "Saved successfully",
+  "Merchant": "Merchant",
+  "Category": "Category"
 }

src/assets/i18n/zh.json

@@ -67,5 +67,7 @@
   "Save": "保存",
   "Input delivery address": "输入收货地址",
   "Please select delivery address": "请选择收货地址",
-  "Saved successfully": "保存成功"
+  "Saved successfully": "保存成功",
+  "Merchant": "商店",
+  "Category": "类别"
 }