feat: mobileshop search products/stores (df53d28d) · Commits · Isfand Yar Khan / ever-demand

packages/shop-mobile-ionic/src/app/pages/+products/+searchProducts/searchProducts.component.html

+62 −19

Original line number	Diff line number	Diff line
		@@ -30,25 +30,68 @@
		<ion-label>{{ merchant.name }} </ion-label>
		</ion-item>

		<ion-item
		*ngFor="let product of searchResultProducts"
		lines="none"
		class="m-2"
		<div class="center">
		<ion-button
		color="tertiary"
		size="small"
		(click)="loadMerchants()"
		>View More</ion-button
		>
		<ion-avatar slot="start">
		<img
		[src]="
		product.warehouseProduct.product['images'][0].url
		"
		/>
		</ion-avatar>
		<ion-label
		>{{ product.warehouseProduct.product['title'][0].value }}
		</ion-label>
		<ion-label
		>price: {{ product.warehouseProduct.price }}
		</ion-label>
		</ion-item>
		</div>

		<ion-card *ngFor="let productInfo of searchResultProducts">
		<ion-row
		class="product-container"
		(click)="goToDetailsPage(productInfo)"
		>
		<ion-col class="col-3 image-container">
		<img [src]="getProductImage(productInfo)" />
		</ion-col>
		<ion-col class="col-9" class="col-9 info-container">
		<ion-row>
		<ion-col>
		<span class="product-title">
		{{
		localeTranslate(
		productInfo.warehouseProduct
		.product['title']
		)
		}}
		</span>
		</ion-col>
		<ion-col class="col-3 price">
		<ion-badge color="primary"
		>{{
		productInfo.warehouseProduct.price
		}}
		$</ion-badge
		>
		</ion-col>
		</ion-row>
		<ion-row>
		<span class="product-description">
		{{
		shortenDescription(
		localeTranslate(
		productInfo.warehouseProduct
		.product['description']
		)
		)
		}}
		</span>
		</ion-row>
		</ion-col>
		</ion-row>
		</ion-card>

		<div class="center">
		<ion-button
		color="tertiary"
		size="small"
		(click)="loadProducts()"
		>View More</ion-button
		>
		</div>
		</div>
		</ion-list>
		</div>

packages/shop-mobile-ionic/src/app/pages/+products/+searchProducts/searchProducts.component.ts

+66 −6

Original line number	Diff line number	Diff line
		import { Component, OnInit } from '@angular/core';
		import { Component, OnInit, Output, EventEmitter } from '@angular/core';
		import { first } from 'rxjs/operators';

		import Warehouse from '@modules/server.common/entities/Warehouse';
		@@ -12,9 +12,12 @@ import { Store } from 'app/services/store.service';
		import { UserRouter } from '@modules/client.common.angular2/routers/user-router.service';
		import { GeoLocationService } from 'app/services/geo-location';
		import { Router } from '@angular/router';
		import { ProductLocalesService } from '@modules/client.common.angular2/locale/product-locales.service';
		import { ILocaleMember } from '@modules/server.common/interfaces/ILocale';

		import { environment } from 'environments/environment';
		import { GeoLocationProductsService } from 'app/services/geo-location/geo-location-products';
		import { WarehouseProductsService } from 'app/services/merchants/warehouse-products';

		@Component({
		selector: 'search-products',
		@@ -22,6 +25,10 @@ import { GeoLocationProductsService } from 'app/services/geo-location/geo-locati
		styleUrls: ['./searchProducts.style.scss'],
		})
		export class SearchProductsComponent implements OnInit {
		private static MAX_DESCRIPTION_LENGTH: number = 100;
		private loadingOrdersLimit: number = 6;
		private loadingMerchantsLimit: number = 5;

		searchInput: string = '';
		searchResultMerchants: Warehouse[] = [];
		searchResultProducts: ProductInfo[] = [];
		@@ -33,7 +40,9 @@ export class SearchProductsComponent implements OnInit {
		private userRouter: UserRouter,
		private geoLocationService: GeoLocationService,
		private geoLocationProductsService: GeoLocationProductsService,
		private router: Router
		private router: Router,
		private readonly translateProductLocales: ProductLocalesService,
		private warehouseProductsService: WarehouseProductsService
		) {}
		ngOnInit() {
		this.loadFullData();
		@@ -43,7 +52,6 @@ export class SearchProductsComponent implements OnInit {
		await this.loadGeoLocationProducts();
		this.loadMerchants();
		this.loadProducts();
		console.log(this.searchResultProducts);
		}

		async loadMerchants() {
		@@ -52,7 +60,12 @@ export class SearchProductsComponent implements OnInit {
		this.searchInput,
		{ loc: location }
		);
		this.searchResultMerchants = merchants.slice(0, 5);
		merchants
		.slice(
		this.searchResultMerchants.length,
		this.searchResultMerchants.length + this.loadingMerchantsLimit
		)
		.map((merch) => this.searchResultMerchants.push(merch));
		}

		async loadProducts() {
		@@ -63,7 +76,10 @@ export class SearchProductsComponent implements OnInit {
		await this.geoLocationProductsService
		.geoLocationProductsByPaging(
		this.getOrdersGeoObj,
		{ limit: 20 },
		{
		limit: this.loadingOrdersLimit,
		skip: this.searchResultProducts.length,
		},
		{
		isDeliveryRequired,
		isTakeaway,
		@@ -72,7 +88,7 @@ export class SearchProductsComponent implements OnInit {
		)
		.pipe(first())
		.subscribe((products) => {
		this.searchResultProducts = products;
		products.map((pr) => this.searchResultProducts.push(pr));
		});
		}

		@@ -106,4 +122,48 @@ export class SearchProductsComponent implements OnInit {
		};
		}
		}
		localeTranslate(member: ILocaleMember[]): string {
		return this.translateProductLocales.getTranslate(member);
		}

		shortenDescription(desc: string) {
		return desc.length < SearchProductsComponent.MAX_DESCRIPTION_LENGTH
		? desc
		: desc.substr(
		0,
		SearchProductsComponent.MAX_DESCRIPTION_LENGTH - 3
		) + '...';
		}
		getProductImage(product) {
		return this.localeTranslate(product.warehouseProduct.product['images']);
		}

		async goToDetailsPage(product: ProductInfo) {
		const prod = await this.warehouseProductsService.getWarehouseProduct(
		product.warehouseId,
		product.warehouseProduct.id
		);

		if (prod) {
		this.router.navigate(
		[
		`/products/product-details/${product.warehouseProduct.product['id']}`,
		],
		{
		queryParams: {
		backUrl: '/products',
		warehouseId: product.warehouseId,
		},
		}
		);
		} else {
		const loadedProduct = this.searchResultProducts.find(
		(p) => p.warehouseProduct.id === product.warehouseProduct.id
		);

		if (loadedProduct) {
		loadedProduct['soldOut'] = true;
		}
		}
		}
		}

packages/shop-mobile-ionic/src/app/pages/+products/+searchProducts/searchProducts.module.ts

+12 −1

Original line number	Diff line number	Diff line
		@@ -7,9 +7,20 @@ import { MerchantsService } from 'app/services/merchants/merchants.service';
		import { CommonModule } from '@angular/common';
		import { FormsModule } from '@angular/forms';
		import { IonicModule } from '@ionic/angular';
		import { TranslateModule } from '@ngx-translate/core';

		import { WarehouseLogoModule } from '../../../components/warehouse-logo/warehouse-logo.module';
		import { ProductsModule } from '../../../components/products/products.module';

		@NgModule({
		imports: [CommonModule, FormsModule, IonicModule],
		imports: [
		CommonModule,
		FormsModule,
		IonicModule,
		WarehouseLogoModule,
		ProductsModule,
		TranslateModule.forChild(),
		],
		declarations: [SearchProductsComponent],
		exports: [SearchProductsComponent],
		providers: [GeoLocationService, MerchantsService],

packages/shop-mobile-ionic/src/app/pages/+products/+searchProducts/searchProducts.style.scss

+36 −0

Original line number	Diff line number	Diff line
		@@ -6,3 +6,39 @@
		text-align: center;
		}
		}

		.product-container {
		padding: 0;
		height: 6rem;

		.image-container {
		padding: 0;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		}
		.info-container {
		.product-title {
		font-size: 1.2rem;
		font-weight: bold;
		}
		padding: 0;
		.price {
		display: flex;
		justify-content: flex-end;
		ion-badge {
		padding: 10px 20px;
		font-size: 1rem;
		}
		}
		.product-description {
		text-indent: 30px;
		padding: 5px;
		}
		}
		}
		.center {
		text-align: center;
		padding: 1rem;
		}