Skip to content

[CYB-143] Delete button removes incorrect item on UI #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
carolynduby merged 2 commits into from
Jun 14, 2023
Merged

[CYB-143] Delete button removes incorrect item on UI #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6028c14
[CYB-143] Delete button removes incorrect item on UI
vpavlenko-cv Apr 6, 2023
c0bf6b3
[CYB-143] Delete button removes incorrect item on UI
vpavlenko-cv May 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions ...-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,14 @@ export const LOAD_CHAINS = '[Chain List] load all start';
export const LOAD_CHAINS_SUCCESS = '[Chain List] load all success';
export const LOAD_CHAINS_FAIL = '[Chain List] load all fail';
export const DELETE_CHAIN = '[Chain List] delete item';
export const DELETE_CHAIN_SELECT = '[Chain List] prepare delete item';
export const DELETE_CHAIN_SUCCESS = '[Chain List] delete item success';
export const DELETE_CHAIN_FAIL = '[Chain List] delete item fail';
export const CREATE_CHAIN = '[Chain List] create item';
export const SHOW_CREATE_MODAL = '[Chain List] show create modal';
export const HIDE_CREATE_MODAL = '[Chain List] hide create modal';
export const SHOW_DELETE_MODAL = '[Chain List] show delete modal';
export const HIDE_DELETE_MODAL = '[Chain List] hide delete modal';
export const CREATE_CHAIN_SUCCESS = '[Chain List] create item success';
export const CREATE_CHAIN_FAIL = '[Chain List] create item fail';

Expand All @@ -49,6 +52,10 @@ export class DeleteChainAction implements Action {
readonly type = DELETE_CHAIN;
constructor(public chainId: string, public chainName: string) {}
}
export class SelectDeleteChainAction implements Action {
readonly type = DELETE_CHAIN_SELECT;
constructor(public chainId: string) {}
}

export class DeleteChainSuccessAction implements Action {
readonly type = DELETE_CHAIN_SUCCESS;
Expand All @@ -75,6 +82,16 @@ export class HideCreateModalAction implements Action {
constructor() {}
}

export class ShowDeleteModalAction implements Action {
readonly type = SHOW_DELETE_MODAL;
constructor() {}
}

export class HideDeleteModalAction implements Action {
readonly type = HIDE_DELETE_MODAL;
constructor() {}
}

export class CreateChainSuccessAction implements Action {
readonly type = CREATE_CHAIN_SUCCESS;
constructor(public chain: ChainModel) {}
Expand All @@ -88,6 +105,9 @@ export class CreateChainFailAction implements Action {
export type ChainListAction = LoadChainsAction
| LoadChainsSuccessAction
| LoadChainsFailAction
| ShowDeleteModalAction
| HideDeleteModalAction
| SelectDeleteChainAction
| DeleteChainAction
| DeleteChainSuccessAction
| DeleteChainFailAction
Expand Down
126 changes: 65 additions & 61 deletions ...vice/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,76 +11,80 @@
-->

<ng-template #AddButton>
<button
class="add-new-chain-button"
nz-tooltip="Add New Chain ToolTip"
nzTooltipTitle="Add New Chain"
nzTooltipPlacement="left"
nz-button
data-qe-id="add-chain-btn"
nzType="primary"
(click)="showAddChainModal()"
>
<i nz-icon nzType="plus" nzTheme="outline"></i>
</button>
<button
class="add-new-chain-button"
nz-tooltip="Add New Chain ToolTip"
nzTooltipTitle="Add New Chain"
nzTooltipPlacement="left"
nz-button
data-qe-id="add-chain-btn"
nzType="primary"
(click)="showAddChainModal()"
>
<i nz-icon nzType="plus" nzTheme="outline"></i>
</button>
</ng-template>
<nz-modal
[nzVisible]="isChainCreateModalVisible$ | async"
nzTitle="Add Chain Name"
(nzOnCancel)="handleCancelChainModal()"
(nzOnOk)="pushChain()"
[nzOkDisabled]="!newChainForm.valid"
[nzOkLoading]="isOkLoading$ | async"
[nzVisible]="isChainCreateModalVisible$ | async"
nzTitle="Add Chain Name"
(nzOnCancel)="handleCancelChainModal()"
(nzOnOk)="pushChain()"
[nzOkDisabled]="!newChainForm.valid"
[nzOkLoading]="isOkLoading$ | async"
>
<form nz-form *nzModalContent [formGroup]="newChainForm" (ngSubmit)='pushChain()' [nzLayout]="'vertical'">
<nz-form-item>
<nz-form-label>Chain name:</nz-form-label>
<nz-form-control nzErrorTip="Chain Name is Required with at least 3 characters" nzSpan="14">
<input nz-input data-qe-id="chain-name" formControlName="chainName" type="text" id="chainName"
placeholder="Parser Chain Name">
</nz-form-control>
</nz-form-item>
</form>
<form nz-form *nzModalContent [formGroup]="newChainForm" (ngSubmit)='pushChain()' [nzLayout]="'vertical'">
<nz-form-item>
<nz-form-label>Chain name:</nz-form-label>
<nz-form-control nzErrorTip="Chain Name is Required with at least 3 characters" nzSpan="14">
<input nz-input data-qe-id="chain-name" formControlName="chainName" type="text" id="chainName"
placeholder="Parser Chain Name">
</nz-form-control>
</nz-form-item>
</form>
</nz-modal>
<nz-modal
*ngIf="deleteChainItem$ | async as deleteChainItem"
[nzVisible]="isChainDeleteModalVisible$ | async"
[nzTitle]="modalTitle"
[nzContent]="modalContent"
[nzFooter]="modalFooter"
(nzOnCancel)="handleCancelDeleteModal()">
<ng-template #modalTitle>Delete Chain Name</ng-template>
<ng-template #modalContent>
<p>Are you sure you want to delete the chain <b>{{deleteChainItem.name}}</b>?</p>
</ng-template>
<ng-template #modalFooter>
<button nz-button nzType="default" (click)="handleCancelDeleteModal()">Cancel</button>
<button nz-button nzType="primary" (click)="deleteChain(deleteChainItem.id, deleteChainItem.name)" [nzLoading]="isOkLoading$ | async">Delete</button>
</ng-template>
</nz-modal>

<nz-card nzTitle="Parser Chains" [nzExtra]="AddButton">
<nz-table #basicTable [nzData]="$any(chainDataSorted$ | async)" [nzShowPagination]="false">
<thead>
<tr>
<th nzShowSort nzSortKey="name">Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data">
<td>{{ data.name }}</td>
<td>
<a routerLink="{{ 'chains/' + data.id }}" class="chain-open-btn"><i nz-icon nzType="right-square"
nzTheme="fill"></i>Open</a>
<nz-divider nzType="vertical"></nz-divider>
<span nz-tooltip nzTitle="Remove" nzPlacement="right">
<nz-table #basicTable [nzData]="$any(chainDataSorted$ | async)" [nzShowPagination]="false">
<thead>
<tr>
<th nzShowSort nzSortKey="name">Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data">
<td>{{ data.name }}</td>
<td>
<a routerLink="{{ 'chains/' + data.id }}" class="chain-open-btn"><i nz-icon nzType="right-square"
nzTheme="fill"></i>Open</a>
<nz-divider nzType="vertical"></nz-divider>
<span nz-tooltip="Remove">
<a
class="chain-delete-btn"
nz-popconfirm
nzTitle="Are you Sure to Delete?"
(click)="showDeleteModal()"
nzOkType="primary"
nzPlacement="right"
class="chain-delete-btn"
title="Are you Sure to Delete?"
(click)="showDeleteModal(data.id)"
>
<i nz-icon nzType="delete" nzTheme="fill"></i> <span>Delete</span>
</a>
</span>
<nz-modal
nzModalType="confirm"
[(nzVisible)]="isVisibleDeleteModal"
nzTitle="Delete Chain Name"
(nzOnCancel)="handleCancelDeleteModal()"
(nzOnOk)="deleteChain(data.id, data.name)"
[nzOkLoading]="isOkLoading$ | async">
<p *nzModalContent>Are you sure you want to delete the chain '{{data.name}}'?</p>
</nz-modal>
</td>
</tr>
</tbody>
</nz-table>
</td>
</tr>
</tbody>
</nz-table>
</nz-card>
44 changes: 23 additions & 21 deletions ...ervice/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,23 @@
* limitations governing your use of the file.
*/

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { select, Store } from '@ngrx/store';
import { BehaviorSubject, combineLatest, Observable, of } from 'rxjs';
import { switchMap, take } from 'rxjs/operators';
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {ActivatedRoute} from '@angular/router';
import {select, Store} from '@ngrx/store';
import {BehaviorSubject, combineLatest, Observable, of} from 'rxjs';
import {switchMap, take} from 'rxjs/operators';

import { LoadChainsAction } from './chain-list-page.actions';
import * as fromActions from './chain-list-page.actions';
import {LoadChainsAction} from './chain-list-page.actions';
import {
ChainListPageState,
getChains,
getCreateModalVisible,
getCreateModalVisible, getDeleteChain,
getDeleteModalVisible,
getLoading,
} from './chain-list-page.reducers';
import { ChainModel, ChainOperationalModel } from './chain.model';
import {ChainModel, ChainOperationalModel} from './chain.model';
import {NzMessageService} from "ng-zorro-antd/message";

@Component({
Expand All @@ -35,12 +36,13 @@ import {NzMessageService} from "ng-zorro-antd/message";
})
export class ChainListPageComponent implements OnInit {
isChainCreateModalVisible$: Observable<boolean>;
isVisibleDeleteModal: boolean = false;
isOkLoading$: Observable<boolean>;
chains$: Observable<ChainModel[]>;
isChainDeleteModalVisible$: Observable<boolean>;
deleteChainItem$: Observable<ChainModel>;
totalRecords = 200;
chainDataSorted$: Observable<ChainModel[]>;
sortDescription$: BehaviorSubject<{key: string, value: string}> = new BehaviorSubject({ key: 'name', value: '' });
sortDescription$: BehaviorSubject<{ key: string, value: string }> = new BehaviorSubject({key: 'name', value: ''});
newChainForm: FormGroup;

constructor(
Expand All @@ -49,18 +51,18 @@ export class ChainListPageComponent implements OnInit {
private route: ActivatedRoute,
private messageService: NzMessageService,
) {
this.route.queryParams.subscribe(() => {
store.dispatch(new LoadChainsAction());
this.chains$ = store.pipe(select(getChains));
this.isOkLoading$ = store.pipe(select(getLoading));
this.isChainCreateModalVisible$ = store.pipe(select(getCreateModalVisible));
});
store.dispatch(new LoadChainsAction());
this.chains$ = store.pipe(select(getChains));
this.isOkLoading$ = store.pipe(select(getLoading));
this.isChainCreateModalVisible$ = store.pipe(select(getCreateModalVisible));
this.isChainDeleteModalVisible$ = store.pipe(select(getDeleteModalVisible));
this.deleteChainItem$ = this.store.pipe(select(getDeleteChain));

this.chainDataSorted$ = combineLatest([
this.chains$,
this.sortDescription$
]).pipe(
switchMap(([ chains, sortDescription ]) => this.sortTable(chains, sortDescription))
switchMap(([chains, sortDescription]) => this.sortTable(chains, sortDescription))
);
}

Expand All @@ -72,8 +74,8 @@ export class ChainListPageComponent implements OnInit {
this.store.dispatch(new fromActions.ShowCreateModalAction());
}

showDeleteModal(): void {
this.isVisibleDeleteModal = true;
showDeleteModal(id): void {
this.store.dispatch(new fromActions.SelectDeleteChainAction(id));
}

pushChain(): void {
Expand Down Expand Up @@ -101,7 +103,7 @@ export class ChainListPageComponent implements OnInit {
}

handleCancelDeleteModal(): void {
this.isVisibleDeleteModal = false;
this.store.dispatch(new fromActions.HideDeleteModalAction());
}

sortTable(data: ChainModel[], sortDescription: any): Observable<ChainModel[]> {
Expand Down
44 changes: 29 additions & 15 deletions ...-service/frontend/parser-chains-client/src/app/chain-list-page/chain-list-page.effects.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,25 @@
* limitations governing your use of the file.
*/

import { Injectable } from '@angular/core';
import { Actions, createEffect, Effect, ofType } from '@ngrx/effects';
import { Action } from '@ngrx/store';
import { NzMessageService } from 'ng-zorro-antd/message';
import { Observable, of } from 'rxjs';
import { catchError, map, switchMap } from 'rxjs/operators';
import {Injectable} from '@angular/core';
import {Actions, createEffect, Effect, ofType} from '@ngrx/effects';
import {Action} from '@ngrx/store';
import {NzMessageService} from 'ng-zorro-antd/message';
import {Observable, of} from 'rxjs';
import {catchError, map, switchMap} from 'rxjs/operators';

import { ChainListPageService } from '../services/chain-list-page.service';
import {ChainListPageService} from '../services/chain-list-page.service';
import * as fromActions from './chain-list-page.actions';
import { ChainModel } from './chain.model';
import {ChainModel} from './chain.model';

@Injectable()
export class ChainListEffects {
constructor(
private actions$: Actions,
private messageService: NzMessageService,
private chainListService: ChainListPageService
) { }
) {
}

loadChains$: Observable<Action> = createEffect(() => this.actions$.pipe(
ofType(fromActions.LOAD_CHAINS),
Expand Down Expand Up @@ -63,14 +64,27 @@ export class ChainListEffects {
));

hideCreateModal$: Observable<Action> = createEffect(() => this.actions$.pipe(
ofType(
fromActions.CREATE_CHAIN_SUCCESS,
fromActions.CREATE_CHAIN_FAIL
),
map(() => new fromActions.HideCreateModalAction())
ofType(
fromActions.CREATE_CHAIN_SUCCESS,
fromActions.CREATE_CHAIN_FAIL
),
map(() => new fromActions.HideCreateModalAction())
))
hideDeleteModal$: Observable<Action> = createEffect(() => this.actions$.pipe(
ofType(
fromActions.DELETE_CHAIN_SUCCESS,
fromActions.DELETE_CHAIN_FAIL
),
map(() => new fromActions.HideDeleteModalAction())
))

showDeleteModal$: Observable<Action> = createEffect(() => this.actions$.pipe(
ofType(fromActions.DELETE_CHAIN_SELECT),
map(() => new fromActions.ShowDeleteModalAction())
),
)

deleteChain$: Observable<Action> = createEffect(()=> this.actions$.pipe(
deleteChain$: Observable<Action> = createEffect(() => this.actions$.pipe(
ofType(fromActions.DELETE_CHAIN),
switchMap((action: fromActions.DeleteChainAction) => {
return this.chainListService.deleteChain(action.chainId)
Expand Down
Loading