mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-31 09:37:15 +01:00
[HIMA-87] After close tab navigate to process current route
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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() {
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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]);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
@@ -114,6 +114,7 @@ export class ProductService {
|
||||
if (response.error) {
|
||||
throw new Error(response.message);
|
||||
}
|
||||
this.persistLastSearchToLocalStorage(query);
|
||||
return response;
|
||||
})
|
||||
);
|
||||
|
||||
@@ -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) {}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user