Commit cf80d013 authored by Valentin's avatar Valentin
Browse files

feat: mobileshop products search bar

parent 0054b051

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

0 → 100644
+60 −0
Original line number Diff line number Diff line 
<div class="brand-dark search-products">

	<ion-searchbar

		[(ngModel)]="searchInput"

		mode="ios"

		color="light"

		placeholder="Product or a shop name"

		animated

		debounce="500"

		(ionChange)="loadProducts()"

	></ion-searchbar>



	<!-- <ion-list class="merchants-list">

    <ion-list-header class="p-0 mb-1">

    </ion-list-header>

    <div class="merchants-container">

        <h5 *ngIf="searchResultMerchants?.length === 0" class="not-found-text">

            ne e namereno

        </h5>



        <ion-item

            *ngFor="let merchant of searchResultMerchants"

            (click)="selectMerchant(merchant)"

            class="m-2"

            lines="none"

        >

            <ion-avatar slot="start">

                <img src="{{ merchant.logo }}" />

            </ion-avatar>

            <ion-label> {{ merchant.name }} </ion-label>

        </ion-item>

    </div>

</ion-list> -->



	<ion-list class="brand-dark">

		<div class="products-container">

			<h5

				*ngIf="searchResultProducts?.length === 0"

				class="not-found-text p-3"

			>

				Empty List

			</h5>



			<ion-item

				*ngFor="let product of searchResultProducts"

				lines="none"

				class="m-2"

			>

				<ion-avatar slot="start">

					<img src="{{ product.warehouseLogo }}" />

				</ion-avatar>

				<ion-label

					>{{ product.warehouseProduct.product['title'][0].value }}

				</ion-label>

				<ion-label

					>price: {{ product.warehouseProduct.price }}

				</ion-label>

			</ion-item>

		</div>

	</ion-list>

</div>

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

0 → 100644
+141 −0
Original line number Diff line number Diff line 
import { Component, OnInit } from '@angular/core';

import { first } from 'rxjs/operators';



import Warehouse from '@modules/server.common/entities/Warehouse';

import { ILocation } from '@modules/server.common/interfaces/IGeoLocation';

import GeoLocation from '@modules/server.common/entities/GeoLocation';

import RegistrationSystem from '@modules/server.common/enums/RegistrationSystem';

import ProductInfo from '@modules/server.common/entities/ProductInfo';



import { MerchantsService } from 'app/services/merchants/merchants.service';

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 { environment } from 'environments/environment';

import { GeoLocationProductsService } from 'app/services/geo-location/geo-location-products';



@Component({

	selector: 'search-products',

	templateUrl: './searchProducts.component.html',

	styleUrls: ['./searchProducts.style.scss'],

})

export class SearchProductsComponent implements OnInit {

	searchInput: string;

	searchResultMerchants: Warehouse[];

	searchResultProducts: ProductInfo[];

	getOrdersGeoObj: { loc: ILocation };



	constructor(

		private merchantsService: MerchantsService,

		private store: Store,

		private userRouter: UserRouter,

		private geoLocationService: GeoLocationService,

		private geoLocationProductsService: GeoLocationProductsService,

		private router: Router

	) {}

	ngOnInit() {

		this.loadGeoLocationProducts();

	}



	async loadProducts() {

		await this.geoLocationProductsService

			.geoLocationProductsByPaging(this.getOrdersGeoObj, {

				skip: 0,

				limit: 100,

			})

			.pipe(first())

			.subscribe((products: ProductInfo[]) => {

				this.filterProducts(products);

			});

	}



	filterProducts(products: ProductInfo[]) {

		if (products) {

			const filteredProducts = products.filter((product) => {

				const title = product.warehouseProduct.product['title'];



				const result = title.filter((t) =>

					t.value

						.toLowerCase()

						.includes(this.searchInput.toLowerCase())

				);

				if (result.length === 0) {

					return false;

				}

				return result;

			});

			this.searchResultProducts = filteredProducts;

			//  .filter(prod=>prod.warehouseProduct.isDeliveryRequired === !+this.store.deliveryType)

			// console.log(this.searchResultProducts)

		}

	}



	//  async loadSearchMerchants() {



	//     const location = await this.getLocation();



	//     this.searchResultMerchants = await this.merchantsService.getMerchantsBuyName(

	//         this.searchInput,

	//         { loc: location }

	//     );

	// }



	// private async getLocation() {

	// 	let location: ILocation;



	// 	const isProductionEnv = environment.production;



	// 	if (this.store.userId && isProductionEnv) {

	// 		const user = await this.userRouter

	// 			.get(this.store.userId)

	// 			.pipe(first())

	// 			.toPromise();



	// 		location = {

	// 			type: 'Point',

	// 			coordinates: user.geoLocation.loc.coordinates,

	// 		};

	// 	} else {

	// 		const findGeoLocation = await this.geoLocationService.getCurrentGeoLocation();

	// 		location = {

	// 			type: 'Point',

	// 			coordinates: findGeoLocation.loc.coordinates,

	// 		};

	// 	}



	// 	return location;

	// }



	private async loadGeoLocationProducts() {

		let geoLocationForProducts: GeoLocation;

		const isProductionEnv = environment.production;



		if (this.store.userId && isProductionEnv) {

			const user = await this.userRouter

				.get(this.store.userId)

				.pipe(first())

				.toPromise();



			geoLocationForProducts = user.geoLocation;

		} else {

			try {

				geoLocationForProducts = await this.geoLocationService.getCurrentGeoLocation();

			} catch (error) {

				console.warn(error);

				this.store.registrationSystem = RegistrationSystem.Once;

				this.router.navigate(['/invite']);

			}

		}



		if (geoLocationForProducts) {

			this.getOrdersGeoObj = {

				loc: {

					type: 'Point',

					coordinates: geoLocationForProducts.loc.coordinates,

				},

			};

		}

	}

}

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

0 → 100644
+17 −0
Original line number Diff line number Diff line 
import { NgModule } from '@angular/core';

import { SearchProductsComponent } from './searchProducts.component';



import { GeoLocationService } from 'app/services/geo-location';

import { MerchantsService } from 'app/services/merchants/merchants.service';



import { CommonModule } from '@angular/common';

import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';



@NgModule({

	imports: [CommonModule, FormsModule, IonicModule],

	declarations: [SearchProductsComponent],

	exports: [SearchProductsComponent],

	providers: [GeoLocationService, MerchantsService],

})

export class SearchProductsModule {}

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

0 → 100644
+8 −0
Original line number Diff line number Diff line 
.search-products {

	height: 100%;

	.not-found-text {

		color: white;

		width: 100%;

		text-align: center;

	}

}

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

+2 −0
Original line number Diff line number Diff line
@@ -21,6 +21,7 @@ import { OrderTakeawayInfoPopupModule } from './+order/takeaway/popup/popup.modu 
import { CommonProducts } from './common/common-products.module';

import { GeoLocationProductsService } from 'app/services/geo-location/geo-location-products';

import { WarehouseProductsService } from 'app/services/merchants/warehouse-products';

import { SearchProductsModule } from './+searchProducts/searchProducts.module';



const routes: Routes = [

	{
@@ -55,6 +56,7 @@ const routes: Routes = [ 
		CancelPageModule,

		OrderTakeawayInfoPopupModule,

		CommonProducts,

		SearchProductsModule,

	],

	providers: [

		ProductsPageGuard,