Commit cf80d013 authored by Valentin's avatar Valentin
Browse files

feat: mobileshop products search bar

parent 0054b051
Loading
Loading
Loading
Loading
+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>
+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,
				},
			};
		}
	}
}
+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 {}
+8 −0
Original line number Diff line number Diff line
.search-products {
	height: 100%;
	.not-found-text {
		color: white;
		width: 100%;
		text-align: center;
	}
}
+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,
Loading