[HIMA-87] After close tab navigate to process current route

This commit is contained in:
Eraldo Hasanaj
2019-02-13 13:10:18 +01:00
parent 27d0c12ac9
commit 1a895d6c3d
6 changed files with 71 additions and 21 deletions

View File

@@ -1,21 +1,19 @@
<div class="align-center breadcrumb-container">
<ng-container *ngIf="bredcrumbDots">
<span class="breadcrumb" routerLink="{{ breadcrumbs[breadcrumbs.length - 4].path }}">...
<span class="breadcrumb" (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 4])">...
<img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next">
</span>
<span class="breadcrumb" routerLink="{{ breadcrumbs[breadcrumbs.length - 3].path }}">{{ breadcrumbs[breadcrumbs.length - 3].name }}
<span class="breadcrumb" (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 3])">{{ breadcrumbs[breadcrumbs.length - 3].name }}
<img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next">
</span>
<span class="breadcrumb" routerLink="{{ breadcrumbs[breadcrumbs.length - 2].path }}">{{ breadcrumbs[breadcrumbs.length - 2].name }}
<span class="breadcrumb" (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 2])">{{ breadcrumbs[breadcrumbs.length - 2].name }}
<img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next">
</span>
<span class="breadcrumb selected" routerLink="{{ breadcrumbs[breadcrumbs.length - 1].path }}">{{ breadcrumbs[breadcrumbs.length - 1].name }}</span>
<span class="breadcrumb selected" (click)="selectBreadcrumb(breadcrumbs[breadcrumbs.length - 1])">{{ breadcrumbs[breadcrumbs.length - 1].name }}</span>
</ng-container>
<ng-container *ngIf="!bredcrumbDots">
<span *ngFor="let breadcrumb of breadcrumbs; let i = index" class="breadcrumb" routerLink="{{ breadcrumb.path }}" [ngClass]="{ 'selected': breadcrumb.path.indexOf(currentRoute) >= 0 }">{{ breadcrumb.name }}
<span *ngFor="let breadcrumb of breadcrumbs; let i = index" class="breadcrumb" (click)="selectBreadcrumb(breadcrumb)" [ngClass]="{ 'selected': breadcrumb.path.indexOf(currentRoute) >= 0 }">{{ breadcrumb.name }}
<img class="next" src="../../../assets/images/Arrow_Next.svg" alt="next" *ngIf="breadcrumbs.length > 1 && breadcrumbs.length !== (i + 1)">
</span>
</ng-container>

View File

@@ -2,8 +2,10 @@ import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Breadcrumb } from 'src/app/core/models/breadcrumb.model';
import { Process } from 'src/app/core/models/process.model';
import { Select } from '@ngxs/store';
import { Select, Store } from '@ngxs/store';
import { ProcessState } from 'src/app/core/store/state/process.state';
import { PopBreadcrumbsAfterCurrent } from 'src/app/core/store/actions/process.actions';
import { Router } from '@angular/router';
@Component({
selector: 'app-breadcrumbs',
@@ -17,7 +19,10 @@ export class BreadcrumbsComponent implements OnInit {
bredcrumbDots = false;
currentRoute = '';
constructor() {
constructor(
private store: Store,
private router: Router
) {
this.processes$.subscribe(
(data: Process[]) => this.getBreadcrumbsFromCurentProcess(data)
);
@@ -32,6 +37,11 @@ export class BreadcrumbsComponent implements OnInit {
}
}
selectBreadcrumb(breadcrumb: Breadcrumb) {
this.store.dispatch(new PopBreadcrumbsAfterCurrent(breadcrumb));
this.router.navigate([breadcrumb.path]);
}
ngOnInit() {
}
}

View File

@@ -23,6 +23,7 @@ import { Observable } from 'rxjs';
export class ProcessTabComponent implements OnInit {
@Input() process: Process;
@Input() processes: Array<Process>;
@Select(ProcessState.getProcesses) procecesses$: Observable<Process[]>;
@Select(ProcessState.getProcessCount) processCount: Observable<number>;
@ViewChild('deleteporcessdialog') processDeleteDialogComponent: ProcessDeleteDialogComponent;
cartCount = 0;
@@ -35,6 +36,15 @@ export class ProcessTabComponent implements OnInit {
(count: number) => {
if (count < 1) {
this.router.navigate(['/dashboard']);
} else {
this.procecesses$.subscribe(
(data: Process[]) => {
const newSelectedProcess = data[count - 1];
if (newSelectedProcess) {
this.router.navigate([newSelectedProcess.currentRoute]);
}
}
);
}
}
);

View File

@@ -114,6 +114,7 @@ export class ProductService {
if (response.error) {
throw new Error(response.message);
}
this.persistLastSearchToLocalStorage(query);
return response;
})
);

View File

@@ -18,6 +18,7 @@ export const ADD_USER = '[PROCESS] Add new user to store';
export const SET_EDIT_USER = '[PROCESS] User which data will be updated';
export const ADD_BREADCRUMB = '[PROCESS] Add breadcrumb';
export const UPDATE_BREADCRUMB = '[PROCESS] Update breadcrumb';
export const POP_BREADCRUMB = '[PROCESS] Pop breadcrumb';
export class AddProcess {
static readonly type = ADD_PROCESS;
@@ -97,3 +98,9 @@ export class UpdateBreadcrump {
constructor(public payload: Breadcrumb) {}
}
export class PopBreadcrumbsAfterCurrent {
static readonly type = POP_BREADCRUMB;
constructor(public payload: Breadcrumb) {}
}

View File

@@ -384,10 +384,10 @@ export class ProcessState {
if (!state.processes) {
return;
}
const breadcrumb = <Breadcrumb>{ name: payload.query, path: '/search-results#start' };
const currentProcess = this.updateBreadcrumbForCurrentProcess(
getCurrentProcess(state.processes),
payload.query,
'/search-results#start');
breadcrumb);
if (
currentProcess.search === payload &&
currentProcess.itemsDTO &&
@@ -516,10 +516,11 @@ export class ProcessState {
search: string
): Process[] {
const newProcessState = processes.map(process => {
const breadcrumb = <Breadcrumb>{ name: search, path: '/search-results#start' };
if (process.selected === true) {
return { ...this.updateBreadcrumbForCurrentProcess(process, search, '/search-results#start'), itemsDTO: items, loading: false };
return { ...this.updateBreadcrumbForCurrentProcess(process, breadcrumb), itemsDTO: items, loading: false };
}
return { ...this.updateBreadcrumbForCurrentProcess(process, search, '/search-results#start') };
return { ...this.updateBreadcrumbForCurrentProcess(process, breadcrumb) };
});
return newProcessState;
}
@@ -583,7 +584,7 @@ export class ProcessState {
...state,
processes: state.processes.map(process => {
if (process.selected === true) {
return { ...this.updateBreadcrumbForCurrentProcess(process, payload.name, payload.path) };
return { ...this.updateBreadcrumbForCurrentProcess(process, payload) };
}
return { ...process };
})
@@ -600,24 +601,47 @@ export class ProcessState {
...state,
processes: state.processes.map(process => {
if (process.selected === true) {
return { ...this.updateBreadcrumbForCurrentProcess(process, payload.name, payload.path) };
return { ...this.updateBreadcrumbForCurrentProcess(process, payload) };
}
return { ...process };
})
});
}
updateBreadcrumbForCurrentProcess(process: Process, payload: string, path: string): Process {
@Action(actions.PopBreadcrumbsAfterCurrent)
popBreadcrumbs(ctx: StateContext<ProcessStateModel>, { payload }: actions.PopBreadcrumbsAfterCurrent) {
const state = ctx.getState();
const process = state.processes.find(t => t.selected === true);
const breadcrumbs = [ ...process.breadcrumbs];
const indexOfCurrentBreadcrumb = breadcrumbs.findIndex(b => b.name === payload.name);
console.log(indexOfCurrentBreadcrumb);
for (let x = breadcrumbs.length - 1; x >= 0; x--) {
if (indexOfCurrentBreadcrumb < x) {
breadcrumbs.pop();
}
}
ctx.patchState({
...state,
processes: state.processes.map(p => {
if (p.selected === true) {
return { ...p, breadcrumbs: breadcrumbs };
}
return { ...p };
})
});
}
updateBreadcrumbForCurrentProcess(process: Process, payload: Breadcrumb): Process {
const breadcrumbExist = process.breadcrumbs.filter(
(breadcrumb: Breadcrumb) => breadcrumb.name === payload
(breadcrumb: Breadcrumb) => breadcrumb.name === payload.name
);
if (breadcrumbExist.length > 0) {
return process;
}
const updatedBreadcrumbs = process.breadcrumbs.map(
(breadcrumb: Breadcrumb) => {
if (breadcrumb.path === path || breadcrumb.path.substring(0, 16) === path.substring(0, 16)) {
return { name: payload, path: path };
if (breadcrumb.path === payload.path || breadcrumb.path.substring(0, 16) === payload.path.substring(0, 16)) {
return { name: payload, path: payload.path };
}
return breadcrumb;
}
@@ -628,8 +652,8 @@ export class ProcessState {
breadcrumbs: [
...process.breadcrumbs,
{
name: payload,
path: path
name: payload.name,
path: payload.path
}
]
};