sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

[HIMA-66] Finished avoid double product search, [HIMA-67] Finished seemless Product search

Browse Source
This commit is contained in:
Eraldo Hasanaj
2019-02-07 17:29:24 +01:00
parent 0729fe83eb
commit 9581984911
13 changed files with 99 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -21,6 +21,7 @@
"@angular/router": "~7.2.0",
"@ngxs/store": "^3.3.4",
"core-js": "^2.5.4",
"ngx-infinite-scroll": "^7.0.1",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"

9
src/app/components/article-search/article-search.component.ts
View File

@@ -10,7 +10,8 @@ import { Process } from 'src/app/core/models/process.model';
import { getRandomPic } from 'src/app/core/utils/process.util';
import { Breadcrumb } from 'src/app/core/models/breadcrumb.model';
import { ProcessState } from 'src/app/core/store/state/process.state';
import { AddProcess, ChangeCurrentRoute, AddSearch } from 'src/app/core/store/actions/process.actions';
import { AddProcess, ChangeCurrentRoute, AddSearch} from 'src/app/core/store/actions/process.actions';
import { AllowProductLoad } from 'src/app/core/store/actions/process.actions';
import { LoadRecentProducts } from 'src/app/core/store/actions/product.actions';
@Component({
@@ -43,10 +44,12 @@ export class ArticleSearchComponent implements OnInit {
query: this.searchParams,
fitlers: this.filters,
take: 5,
skip: 0
skip: 0,
firstLoad: true
};
this.store.dispatch(new AllowProductLoad());
this.store.dispatch(new AddSearch(search));
this.navigateToRoute('search-results');
this.navigateToRoute('search-results#start');
}
navigateToRoute(route: string) {

3
src/app/components/process-tab/process-tab.component.ts
View File

@@ -2,7 +2,7 @@ import { Component, OnInit, Input } from '@angular/core';
import { Process } from 'src/app/core/models/process.model';
import { Router } from '@angular/router';
import { Store } from '@ngxs/store';
import { DeleteProcess, SelectProcess } from 'src/app/core/store/actions/process.actions';
import { DeleteProcess, SelectProcess, PreventProductLoad } from 'src/app/core/store/actions/process.actions';
import { Cart } from '../../core/models/cart.model';
@Component({
@@ -27,6 +27,7 @@ export class ProcessTabComponent implements OnInit {
selectProcess(process: Process): void {
this.store.dispatch(new SelectProcess(process));
this.store.dispatch(new PreventProductLoad());
this.router.navigate([process.currentRoute]);
}

2
src/app/components/product-card/product-card.component.html
View File

@@ -52,7 +52,7 @@
</div>
<div class="publisher-order">
<div class="publisher-serial">
<div class="publisher align-left">
<div class="publisher align-left wrap-text-more">
<span>{{product.publisher}}</span>
</div>
<div class="align-left">

7
src/app/components/search-results/search-results.component.html
View File

@@ -1,6 +1,7 @@
<div class="result-container">
<app-filter></app-filter>
<app-product-card *ngFor="let product of products"
[product]="product">
</app-product-card>
<div id="start" infiniteScroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="true">
<app-product-card *ngFor="let product of products" [product]="product">
</app-product-card>
</div>
</div>

10
src/app/components/search-results/search-results.component.ts
View File

@@ -10,6 +10,7 @@ import { ItemDTO } from 'dist/cat-service/lib/dtos';
import { Observable } from 'rxjs';
import { GetProducts } from 'src/app/core/store/actions/product.actions';
import { ProcessState } from 'src/app/core/store/state/process.state';
import { AddSearch, AllowProductLoad } from 'src/app/core/store/actions/process.actions';
@Component({
selector: 'app-search-results',
@@ -21,6 +22,7 @@ export class SearchResultsComponent implements OnInit {
currentSearch: Search;
products: Product[];
@Select(ProcessState.getProducts) products$: Observable<ItemDTO[]>;
skip = 0;
constructor(
private store: Store,
@@ -50,6 +52,14 @@ export class SearchResultsComponent implements OnInit {
);
}
onScroll() {
this.store.dispatch(new AllowProductLoad());
this.skip = this.skip + 5;
const search = { ...this.currentSearch, firstLoad: false, skip: this.skip};
this.store.dispatch(new GetProducts(search));
this.store.dispatch(new AddSearch(search));
}
loadProducts() {
this.products$.pipe(
filter(f => Array.isArray(f)),

1
src/app/core/models/process.model.ts
View File

@@ -16,4 +16,5 @@ export interface Process {
cart: Cart[];
itemsDTO: ItemDTO[];
selectedItem: ItemDTO;
preventLoading: boolean;
}

1
src/app/core/models/search.model.ts
View File

@@ -5,4 +5,5 @@ export interface Search {
skip: number;
take: number;
fitlers: Filter[];
firstLoad: boolean;
}

10
src/app/core/store/actions/process.actions.ts
View File

@@ -11,6 +11,8 @@ export const ADD_SEARCH = '[PROCESS] Add search';
export const SEARCH_USER = '[PROCESS] Search for user';
export const SET_USER_NAME = '[PROCESS] Set the users name in tab';
export const SET_CART = '[PROCESS] Set cart data for user';
export const PREVENT_PRODUCT_LOAD = '[POCESS] Prevent product load';
export const ALLOW_PRODUCT_LOAD = '[POCESS] Allow product load';
export class AddProcess {
static readonly type = ADD_PROCESS;
@@ -59,3 +61,11 @@ export class SetCartData {
constructor(public quantity: number, public payload: ItemDTO, public breadcrumb: Breadcrumb) {}
}
export class PreventProductLoad {
static readonly type = PREVENT_PRODUCT_LOAD;
}
export class AllowProductLoad {
static readonly type = ALLOW_PRODUCT_LOAD;
}

52
src/app/core/store/state/process.state.ts
View File

@@ -355,7 +355,11 @@ export class ProcessState {
return;
}
const currentProcess = getCurrentProcess(state.processes);
if (currentProcess.search === payload && currentProcess.itemsDTO && currentProcess.itemsDTO.length > 0) {
if (currentProcess.search === payload
&& currentProcess.itemsDTO
&& currentProcess.itemsDTO.length > 0
&& currentProcess.preventLoading
) {
ctx.patchState({
...state
});
@@ -365,7 +369,9 @@ export class ProcessState {
if (items) {
ctx.patchState({
...state,
processes: this.changeProducResultsForCurrentProcess(state.processes, items)
processes: payload.skip === 0 ?
this.changeProducResultsForCurrentProcess(state.processes, items)
: this.extendProducResultsForCurrentProcess(state.processes, items)
});
}
}
@@ -397,6 +403,38 @@ export class ProcessState {
});
}
@Action(actions.PreventProductLoad)
preventProductLoad(ctx: StateContext<ProcessStateModel>) {
const state = ctx.getState();
ctx.patchState({
...state,
processes: state.processes.map(
process => {
if (process.selected === true) {
return {...process, preventLoading: true};
}
return {...process};
}
)
});
}
@Action(actions.AllowProductLoad)
allowProductLoad(ctx: StateContext<ProcessStateModel>) {
const state = ctx.getState();
ctx.patchState({
...state,
processes: state.processes.map(
process => {
if (process.selected === true) {
return {...process, preventLoading: false};
}
return {...process};
}
)
});
}
changeSelectedItemForCurrentProcess(processes: Process[], item: ItemDTO): Process[] {
const newProcessState = processes.map(process => {
if (process.selected === true) {
@@ -416,4 +454,14 @@ export class ProcessState {
});
return newProcessState;
}
extendProducResultsForCurrentProcess(processes: Process[], items: ItemDTO[]): Process[] {
const newProcessState = processes.map(process => {
if (process.selected === true) {
return { ...process, itemsDTO: [...process.itemsDTO, ...items] };
}
return { ...process };
});
return newProcessState;
}
}

7
src/app/modules/components.module.ts
View File

@@ -16,6 +16,7 @@ import { RecommandationCardComponent } from '../components/recommandation-card/r
import { FormsModule } from '@angular/forms';
import { FilterComponent } from '../components/filter/filter.component';
import { FilterItemComponent } from '../components/filter-item/filter-item.component';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
@NgModule({
declarations: [
@@ -37,7 +38,8 @@ import { FilterItemComponent } from '../components/filter-item/filter-item.compo
imports: [
CommonModule,
AppRoutingModule,
FormsModule
FormsModule,
InfiniteScrollModule
],
exports: [
HeaderComponent,
@@ -53,7 +55,8 @@ import { FilterItemComponent } from '../components/filter-item/filter-item.compo
NewsCardComponent,
RecommandationCardComponent,
FilterComponent,
FilterItemComponent
FilterItemComponent,
InfiniteScrollModule
]
})
export class ComponentsModule { }

2
src/app/shared/routes/routes.ts
View File

@@ -12,6 +12,6 @@ export const routes: Routes = [
{ path: 'article-search', component: ArticleSearchComponent },
{ path: 'customer-search', component: CustomerSearchComponent },
{ path: 'customer-search-result', component: CustomerSearchResultComponent },
{ path: 'search-results', component: SearchResultsComponent },
{ path: 'search-results#start', component: SearchResultsComponent },
{ path: 'product-details/:id', component: ProductDetailsComponent }
];

7
yarn.lock
View File

@@ -5055,6 +5055,13 @@ ng-packagr@^4.2.0:
uglify-js "^3.0.7"
update-notifier "^2.3.0"
ngx-infinite-scroll@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/ngx-infinite-scroll/-/ngx-infinite-scroll-7.0.1.tgz#59472108f5b6960519c269d6997fe3ae0961be07"
integrity sha512-be9DAAuabV7VGI06/JUnS6pXC6mcBOzA4+SBCwOcP9WwJ2r5GjdZyOa34ls9hi1MnCOj3zrXLvPKQ/UDp6csIw==
dependencies:
opencollective "^1.0.3"
nice-try@^1.0.4:
version "1.0.5"
resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"