Skip to content
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

Feature/GH11461: Add error message when removing required attribute #12929

Merged
merged 23 commits into from
Jun 30, 2021
Merged

Feature/GH11461: Add error message when removing required attribute #12929

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
012c3ea
GH-11461: Add error message deselection not possible
Changsuwan Jun 22, 2021
a98a7d6
GH-11461: rename message element and styling
Changsuwan Jun 23, 2021
2b66818
GH-11461: unit-test for error msg when removing
Changsuwan Jun 23, 2021
6a6982e
Update feature-libs/product-configurator/rulebased/components/attribu…
Changsuwan Jun 25, 2021
1e34bb9
Update feature-libs/product-configurator/rulebased/components/attribu…
Changsuwan Jun 25, 2021
a24ebbf
Update feature-libs/product-configurator/rulebased/components/attribu…
Changsuwan Jun 25, 2021
2941fee
GH-11461: document styling changes
Changsuwan Jun 25, 2021
e0dd261
GH-11461: delete unecessary styling property
Changsuwan Jun 25, 2021
02088ba
GH-11461: put loading after ensuring value can be removed
Changsuwan Jun 25, 2021
b34434d
Merge branch 'develop' into feature/GH-11461
ChristophHi Jun 25, 2021
6702f59
GH-11461: rename/relocate section in the document
Changsuwan Jun 25, 2021
66f1c8a
Merge branch 'feature/GH-11461' of https://github.com/SAP/spartacus i…
Changsuwan Jun 25, 2021
6394c9a
Merge branch 'develop' into feature/GH-11461
ChristophHi Jun 28, 2021
4fa01df
Merge branch 'develop' into feature/GH-11461
ChristophHi Jun 28, 2021
b5ccb9b
GH-11461: fix SCSS property to align with styleslint
Changsuwan Jun 28, 2021
18a37eb
GH-11461: prettier fix
Changsuwan Jun 28, 2021
0bf5eda
Merge branch 'develop' into feature/GH-11461
ChristophHi Jun 28, 2021
4db674b
Merge branch 'develop' into feature/GH-11461
Changsuwan Jun 29, 2021
a5c3125
Merge branch 'develop' into feature/GH-11461
Changsuwan Jun 29, 2021
4dc94ff
Merge branch 'develop' into feature/GH-11461
Changsuwan Jun 29, 2021
b4e8c12
Merge branch 'develop' into feature/GH-11461
ChristophHi Jun 29, 2021
57f2c9f
Merge branch 'develop' into feature/GH-11461
ChristophHi Jun 30, 2021
0d14560
Merge branch 'develop' into feature/GH-11461
ChristophHi Jun 30, 2021
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
2 changes: 2 additions & 0 deletions feature-libs/product-configurator/common/assets/translations/en/configurator-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ export const configurator = {
multiSelectRequiredMessage: 'Select one or more values',
wrongNumericFormat:
'Wrong format, this numerical attribute should be entered according to pattern {{pattern}}',
deselectionNotPossible:
'Add a different product before removing this one',
},
button: {
previous: 'Previous',
Expand Down
13 changes: 8 additions & 5 deletions ...ased/components/attribute/product-card/configurator-attribute-product-card.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,15 +62,11 @@
"
class="btn btn-action"
(click)="onHandleDeselect()"
[disabled]="
productCardOptions?.disableAllButtons ||
productCardOptions?.hideRemoveButton ||
(loading$ | async)
"
[cxFocus]="focusConfig"
>
{{ 'configurator.button.remove' | cxTranslate }}
</button>

<ng-template #select>
<button
class="btn btn-primary"
Expand All @@ -84,6 +80,7 @@
</button>
</ng-template>
</ng-container>

<ng-template #single>
<button
class="btn btn-primary"
Expand Down Expand Up @@ -124,5 +121,11 @@
</div>
</div>
</div>
<ng-container *ngIf="showDeselectionNotPossible">
<div class="cx-product-card-rows deselection-error-message">
<cx-icon class="deselection-error-symbol" type="ERROR"></cx-icon>
{{ 'configurator.attribute.deselectionNotPossible' | cxTranslate }}
</div>
</ng-container>
</div>
</ng-container>
16 changes: 16 additions & 0 deletions ...d/components/attribute/product-card/configurator-attribute-product-card.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,22 @@ describe('ConfiguratorAttributeProductCardComponent', () => {

expect(button.innerText).toContain('configurator.button.remove');
});

it('should show deselection error message when removing required attribute', () => {
component.productCardOptions.multiSelect = true;
component.productCardOptions.hideRemoveButton = true;
setProductBoundValueAttributes(component);

fixture.detectChanges();

const button = fixture.debugElement.query(By.css('button.btn'))
.nativeElement;

button.click();

expect(component.onHandleDeselect).toHaveBeenCalled();
expect(component.showDeselectionNotPossible).toBeTruthy;
Changsuwan marked this conversation as resolved.
Show resolved Hide resolved
});
});

describe('quantity', () => {
Expand Down
27 changes: 23 additions & 4 deletions ...ebased/components/attribute/product-card/configurator-attribute-product-card.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import {
} from '@angular/core';
import { Product, ProductService } from '@spartacus/core';
import { ConfiguratorProductScope } from '@spartacus/product-configurator/common';
import { FocusConfig, KeyboardFocusService } from '@spartacus/storefront';
import {
FocusConfig,
ICON_TYPE,
KeyboardFocusService,
} from '@spartacus/storefront';
import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { Configurator } from '../../../core/model/configurator.model';
Expand Down Expand Up @@ -47,6 +51,7 @@ export class ConfiguratorAttributeProductCardComponent
implements OnInit {
product$: Observable<Product>;
loading$ = new BehaviorSubject<boolean>(true);
showDeselectionNotPossible = false;

@Input()
productCardOptions: ConfiguratorAttributeProductCardComponentOptions;
Expand All @@ -61,6 +66,7 @@ export class ConfiguratorAttributeProductCardComponent
) {
super();
}
iconType = ICON_TYPE;

ngOnInit() {
this.loading$.next(true);
Expand Down Expand Up @@ -116,9 +122,18 @@ export class ConfiguratorAttributeProductCardComponent

onHandleDeselect(): void {
this.loading$.next(true);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, loading must not be emitted here! Otherwise it's e.g. not possible to change qty when the error message is visible.
Please emit loading only after you checked that the product can really be removed

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

this.handleDeselect.emit(
this.productCardOptions.productBoundValue.valueCode
);
{
if (
this.productCardOptions?.productBoundValue?.selected &&
Changsuwan marked this conversation as resolved.
Show resolved Hide resolved
this.productCardOptions?.hideRemoveButton
Changsuwan marked this conversation as resolved.
Show resolved Hide resolved
) {
this.showDeselectionNotPossibleMessage();
return;
}
this.handleDeselect.emit(
this.productCardOptions.productBoundValue.valueCode
);
}
}

onChangeQuantity(eventObject: any): void {
Expand Down Expand Up @@ -230,4 +245,8 @@ export class ConfiguratorAttributeProductCardComponent
valueCode: this.productCardOptions.productBoundValue.valueCode,
});
}

showDeselectionNotPossibleMessage() {
this.showDeselectionNotPossible = true;
}
}
7 changes: 6 additions & 1 deletion ...rulebased/components/attribute/product-card/configurator-attribute-product-card.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { I18nModule, UrlModule } from '@spartacus/core';
import { KeyboardFocusModule, MediaModule } from '@spartacus/storefront';
import {
IconModule,
KeyboardFocusModule,
MediaModule,
} from '@spartacus/storefront';
import { ConfiguratorPriceModule } from '../../price/configurator-price.module';
import { ConfiguratorShowMoreModule } from '../../show-more/configurator-show-more.module';
import { ConfiguratorAttributeQuantityModule } from '../quantity/configurator-attribute-quantity.module';
Expand All @@ -24,6 +28,7 @@ import { ConfiguratorAttributeProductCardComponent } from './configurator-attrib
MediaModule,
ConfiguratorPriceModule,
KeyboardFocusModule,
IconModule,
],
})
export class ConfiguratorAttributeProductCardModule {}
16 changes: 16 additions & 0 deletions feature-libs/product-configurator/rulebased/styles/_configurator-attribute-product-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,11 @@
align-self: flex-end;
}
}

ChristophHi marked this conversation as resolved.
Show resolved Hide resolved
&.deselection-error-message {
display: inline-block;
width: 80%;
}
}

.cx-product-card-imgs {
Expand Down Expand Up @@ -164,10 +169,21 @@
}

.cx-product-card-selected {
flex-wrap: wrap;
background-color: var(--cx-color-background);

cx-item-counter {
background-color: #fff;
}
}

.deselection-error-message {
padding-top: 5px;
display: flex;
color: var(--cx-color-danger);
}

.deselection-error-symbol {
padding-right: 5px;
}
}