Skip to content

Commit

Permalink
refactor: use formly for quickorder page and fix multiple issues in it (
Browse files Browse the repository at this point in the history 
#752)

* use formly form for adding multiple products to the basket
* use the quantity component instead of usual input, so there is an automatic validation of min/ max order values and quantity steps of the chosen product
* fix UI problems in the mobile view
* fix breaking form after reset

Co-authored-by: Silke Grüber <sgrueber@intershop.de>
  • Loading branch information
@cbratsch
cbratsch and Silke Grüber authored Jul 30, 2021
1 parent dafafe1 commit b3bb4c5
Show file tree
Hide file tree
Showing 23 changed files with 681 additions and 382 deletions.
1 change: 1 addition & 0 deletions e2e/cypress/integration/pages/quickorder/quickorder.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export class QuickorderPage {
fillFormField(`[data-testing-id="quickorder-line-${idx}"]`, 'sku', sku);
if (quantity !== undefined) {
fillFormField(`[data-testing-id="quickorder-line-${idx}"]`, 'quantity', quantity);
return this;
}
}

Expand Down
160 changes: 12 additions & 148 deletions src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,153 +1,17 @@
<div class="content-page">
<form [formGroup]="quickOrderForm" (ngSubmit)="onAddProducts()">
<ish-breadcrumb></ish-breadcrumb>
<div class="row">
<div class="col-md-12">
<h1>{{ 'quickorder.page.title' | translate }}</h1>
</div>
<ish-breadcrumb></ish-breadcrumb>
<div class="row">
<div class="col-md-12">
<h1>{{ 'quickorder.page.title' | translate }}</h1>
</div>
<div class="row">
<div class="col-md-8">
<h3>{{ 'quickorder.page.subtitle' | translate }}</h3>
<p>{{ 'quickorder.page.subtitle.description' | translate }}</p>
<div class="list-header d-sm-flex">
<div class="col-md-6 list-header-item no-seperator">{{ 'quickorder.page.product.id' | translate }}</div>
<div class="col-md-2 list-header-item no-seperator">{{ 'quickorder.page.product.quantity' | translate }}</div>
</div>

<div class="pt-1">
<div formArrayName="quickOrderLines">
<div
class="row list-item-row py-2"
*ngFor="let item of quickOrderLines.controls; let i = index"
[formGroupName]="i"
[attr.data-testing-id]="'quickorder-line-' + i"
>
<div class="col-sm-6 list-item search-container">
<div class="d-sm-none">{{ 'quickorder.page.product.id' | translate }}</div>
<div class="quickorder-search-container position-relative">
<ish-input
type="text"
controlName="sku"
inputClass="w-100 col-12"
[form]="item"
[errorMessages]="{
not_exists: 'quickorder.page.error.invalid.product' | translate: { '0': item.value.sku }
}"
></ish-input>
<ul class="search-suggest-results w-100" *ngIf="item.value.sku === searchSuggestions[0].sku">
<li>
<button type="button" class="search-result">
<div class="row">
<div class="col-sm-3">
<img [src]="searchSuggestions[0].imgPath" class="product-image" height="110" width="110" />
</div>
<div class="col-sm-9">
<span [innerHtml]="searchSuggestions[0].sku"></span>
<span><br />{{ searchSuggestions[0].name }}</span>
</div>
</div>
</button>
</li>
<li>
<button type="button" class="search-result">
<div class="row">
<div class="col-sm-3">
<img [src]="searchSuggestions[0].imgPath" class="product-image" height="110" width="110" />
</div>
<div class="col-sm-9">
<span [innerHtml]="searchSuggestions[0].sku"></span>
<span><br />{{ searchSuggestions[0].name }}</span>
</div>
</div>
</button>
</li>
</ul>
</div>
</div>
<div class="col-sm-2 list-item">
<div class="d-sm-none">{{ 'quickorder.page.product.quantity' | translate }}</div>
<ish-input
type="number"
[form]="item"
controlName="quantity"
inputClass="w-100"
[min]="1"
[errorMessages]="{
required: 'product.quantity.notempty.text',
integer: 'product.quantity.integer.text',
min: 'product.quantity.greaterthan.text' | translate: { '0': item.value.product.minOrderQuantity },
max: 'product.quantity.lessthan.text' | translate: { '0': item.value.product.maxOrderQuantity }
}"
></ish-input>
</div>
<div class="col-sm-2 list-item">
<a class="btn btn-link remove-row" title="remove-current-row" (click)="deleteItem(i)">{{
'quickorder.page.remove.row' | translate
}}</a>
</div>
</div>
<a class="d-block" (click)="addRows(1)" data-testing-id="add-quickorder-line">{{
'quickorder.page.add.row' | translate
}}</a>
<hr class="mt-2 mb-4" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h3>{{ 'quickorder.page.subtitle' | translate }}</h3>
<p>{{ 'quickorder.page.subtitle.description' | translate }}</p>
<ish-quickorder-add-products-form></ish-quickorder-add-products-form>
<ish-quickorder-csv-form></ish-quickorder-csv-form>
</div>
<div>
<button
type="submit"
class="btn btn-primary"
[disabled]="quickOrderFormDisabled"
data-testing-id="add-form-to-cart"
>
{{ 'quickorder.page.add.cart' | translate }}
</button>
<button type="reset" class="btn btn-link" (click)="resetFields()">
{{ 'quickorder.page.reset.form' | translate }}
</button>
</div>
<div class="row mt-4">
<div class="col-md-6">
<h3>{{ 'quickorder.page.csv.title' | translate }}</h3>
<p>{{ 'quickorder.page.csv.subtitle' | translate }}</p>
<form [formGroup]="csvForm" (ngSubmit)="addCsvToCart()">
<div class="form-group section section-seperator">
<input
type="file"
name="csvFile"
id="CSVFile"
size="35"
class="form-control"
accept=".csv"
(change)="uploadListener($event.target)"
/>
<div [ngSwitch]="status" class="position-absolute">
<small *ngSwitchCase="'IncorrectInput'" class="has-error"
><span class="form-text">{{ 'quickorder.page.csv.file.invalid.input' | translate }}</span></small
>
<small *ngSwitchCase="'InvalidFormat'" class="has-error"
><span class="form-text">{{ 'quickorder.page.csv.file.invalid.format' | translate }}</span></small
>
<small *ngSwitchCase="'ValidFormat'" class="has-success"
><span class="form-text">{{ 'quickorder.page.csv.file.uploaded' | translate }}</span></small
>
<small *ngSwitchDefault></small>
</div>
</div>
<div>
<button type="submit" class="btn btn-primary" name="addToCartCSV" [disabled]="isCsvDisabled">
{{ 'quickorder.page.add.cart' | translate }}
</button>
<button type="reset" class="btn btn-link" name="reset" (click)="resetCsvProductArray()">
{{ 'quickorder.page.csv.reset.form' | translate }}
</button>
</div>
</form>
</div>
</div>
</form>

</div>
<ish-loading *ngIf="loading$ | async"></ish-loading>
</div>
34 changes: 7 additions & 27 deletions src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core';
import { MockComponent } from 'ng-mocks';
import { instance, mock } from 'ts-mockito';

import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
import { BreadcrumbComponent } from 'ish-shared/components/common/breadcrumb/breadcrumb.component';
import { LoadingComponent } from 'ish-shared/components/common/loading/loading.component';
import { InputComponent } from 'ish-shared/forms/components/input/input.component';

import { QuickorderAddProductsFormComponent } from '../../shared/quickorder-add-products-form/quickorder-add-products-form.component';
import { QuickorderCsvFormComponent } from '../../shared/quickorder-csv-form/quickorder-csv-form.component';

import { QuickorderPageComponent } from './quickorder-page.component';

Expand All @@ -19,17 +19,15 @@ describe('Quickorder Page Component', () => {

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ReactiveFormsModule, TranslateModule.forRoot()],
imports: [TranslateModule.forRoot()],
declarations: [
MockComponent(BreadcrumbComponent),
MockComponent(InputComponent),
MockComponent(LoadingComponent),
MockComponent(QuickorderAddProductsFormComponent),
MockComponent(QuickorderCsvFormComponent),
QuickorderPageComponent,
],
providers: [
{ provide: ShoppingFacade, useFactory: () => instance(mock(ShoppingFacade)) },
{ provide: CheckoutFacade, useFactory: () => instance(mock(CheckoutFacade)) },
],
providers: [{ provide: CheckoutFacade, useFactory: () => instance(mock(CheckoutFacade)) }],
}).compileComponents();
});

Expand All @@ -44,22 +42,4 @@ describe('Quickorder Page Component', () => {
expect(element).toBeTruthy();
expect(() => fixture.detectChanges()).not.toThrow();
});

it('should be always initialized with numberOfRows quick order lines', () => {
fixture.detectChanges();

expect(component.quickOrderLines).toHaveLength(component.numberOfRows);
});

it('should always delete one line', () => {
fixture.detectChanges();
component.deleteItem(0);
expect(component.quickOrderLines).toHaveLength(component.numberOfRows - 1);
});

it('should always add one line', () => {
fixture.detectChanges();
component.addRows(1);
expect(component.quickOrderLines).toHaveLength(component.numberOfRows + 1);
});
});
Loading

0 comments on commit b3bb4c5

Please sign in to comment.