Skip to content

Commit a469d40

Browse files
scopsyscopsy
committed
Added logic and ui for forms editor
1 parent 639a165 commit a469d40

24 files changed

+569
-65
lines changed

‎src/app/app.module.ts

+23-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
1-
import { MatToolbarModule } from '@angular/material';
1+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
2+
import {
3+
MatButtonModule,
4+
MatCheckboxModule,
5+
MatFormFieldModule,
6+
MatIconModule,
7+
MatInputModule,
8+
MatListModule,
9+
MatSelectModule,
10+
MatToolbarModule
11+
} from '@angular/material';
212
import { BrowserModule } from '@angular/platform-browser';
313
import { NgModule } from '@angular/core';
414

@@ -8,8 +18,8 @@ import { PizzaFormContainerComponent } from './containers/pizza-form-container/p
818
import { NavbarComponent } from './components/navbar/navbar.component';
919
import { SelectedPizzaViewerComponent } from './components/selected-pizza-viewer/selected-pizza-viewer.component';
1020
import { PizzaListComponent } from './components/pizza-list/pizza-list.component';
11-
import { PizzaListItemComponent } from './components/pizza-list-item/pizza-list-item.component';
1221
import { CustomerDetailsComponent } from './components/customer-details/customer-details.component';
22+
import { PizzaSizePickerComponent } from './components/pizza-size-picker/pizza-size-picker.component';
1323

1424
@NgModule({
1525
declarations: [
@@ -18,10 +28,19 @@ import { CustomerDetailsComponent } from './components/customer-details/customer
1828
NavbarComponent,
1929
SelectedPizzaViewerComponent,
2030
PizzaListComponent,
21-
PizzaListItemComponent,
22-
CustomerDetailsComponent
31+
CustomerDetailsComponent,
32+
PizzaSizePickerComponent
2333
],
2434
imports: [
35+
ReactiveFormsModule,
36+
FormsModule,
37+
MatButtonModule,
38+
MatInputModule,
39+
MatFormFieldModule,
40+
MatSelectModule,
41+
MatCheckboxModule,
42+
MatIconModule,
43+
MatListModule,
2544
MatToolbarModule,
2645
BrowserModule,
2746
BrowserAnimationsModule

‎src/app/components/customer-details/customer-details.component.html

+56-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,56 @@
1-
<p>
2-
customer-details works!
3-
</p>
1+
<div class="CustomerDetails" [formGroup]="group">
2+
<div class="row">
3+
<div class="col-md-12">
4+
<h3>
5+
Customer Details
6+
</h3>
7+
</div>
8+
<div class="col-md-3">
9+
<mat-form-field class="full-width-input">
10+
<input matInput placeholder="First Name" formControlName="firstName" />
11+
</mat-form-field>
12+
</div>
13+
<div class="col-md-3">
14+
<mat-form-field class="full-width-input">
15+
<input matInput placeholder="Last Name" formControlName="lastName" />
16+
</mat-form-field>
17+
</div>
18+
<div class="col-md-3">
19+
<mat-form-field class="full-width-input">
20+
<input matInput placeholder="Phone Number" formControlName="phoneNumber" />
21+
</mat-form-field>
22+
</div>
23+
</div>
24+
25+
<div class="row" [formGroup]="group.get('address')">
26+
<div class="col-md-12">
27+
<h3>
28+
Delivery Address
29+
</h3>
30+
</div>
31+
<div class="col-md-3">
32+
<mat-form-field class="full-width-input">
33+
<input matInput placeholder="Street" formControlName="street" />
34+
</mat-form-field>
35+
</div>
36+
<div class="col-md-3">
37+
<mat-form-field class="full-width-input">
38+
<input matInput placeholder="Apt. Number" formControlName="houseNum" />
39+
</mat-form-field>
40+
</div>
41+
<div class="col-md-3">
42+
<mat-form-field class="full-width-input">
43+
<input matInput placeholder="City" formControlName="city" />
44+
</mat-form-field>
45+
</div>
46+
<div class="col-md-3">
47+
<mat-form-field class="full-width-input">
48+
<input matInput placeholder="Floor" formControlName="floor" />
49+
</mat-form-field>
50+
</div>
51+
</div>
52+
</div>
53+
54+
55+
56+

‎src/app/components/customer-details/customer-details.component.scss

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
.CustomerDetails {
3+
margin-top: 15px;
4+
}

‎src/app/components/customer-details/customer-details.component.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, Input, OnInit } from '@angular/core';
2+
import { FormGroup } from '@angular/forms';
23

34
@Component({
45
selector: 'app-customer-details',
56
templateUrl: './customer-details.component.html',
67
styleUrls: ['./customer-details.component.scss']
78
})
89
export class CustomerDetailsComponent implements OnInit {
9-
10+
@Input() group: FormGroup;
1011
constructor() { }
1112

1213
ngOnInit() {

‎src/app/components/pizza-list-item/pizza-list-item.component.html

-3
This file was deleted.

‎src/app/components/pizza-list-item/pizza-list-item.component.scss

Whitespace-only changes.

‎src/app/components/pizza-list-item/pizza-list-item.component.ts

-15
This file was deleted.

‎src/app/components/pizza-list/pizza-list.component.html

+32-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,32 @@
1-
<p>
2-
pizza-list works!
3-
</p>
1+
2+
<div class="row" [formGroup]="group">
3+
<div class="col-md-12">
4+
<div class="PizzaList">
5+
<div class="PizzaList__title">
6+
<h2>
7+
Pizzas order
8+
</h2>
9+
</div>
10+
<div class="PizzaList__content" formArrayName="pizzas">
11+
<div class="PizzaList__item"
12+
*ngFor="let pizza of pizzasArray.controls; let i = index;"
13+
[ngClass]="{'PizzaList__item--active': group.get('selectedPizza').value === i}"
14+
(click)="pizzaSelected.emit(i)"
15+
[formGroup]="pizza">
16+
<span>
17+
{{getPizzaTitle(pizza.value)}}
18+
</span>
19+
20+
<button mat-icon-button (click)="deletePizza.emit(i); $event.stopPropagation()">
21+
<mat-icon class="PizzaList__item__icon">remove_circle</mat-icon>
22+
</button>
23+
</div>
24+
25+
<div class="PizzaList__item PizzaList__item--add" (click)="addPizza.emit()">
26+
<mat-icon class="PizzaList__item__icon">add_circle</mat-icon>
27+
</div>
28+
</div>
29+
30+
</div>
31+
</div>
32+
</div>

‎src/app/components/pizza-list/pizza-list.component.scss

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.PizzaList {
2+
.PizzaList__item {
3+
border: 1px solid #f1f1f1;
4+
padding: 15px;
5+
margin-bottom: 10px;
6+
box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
7+
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
8+
display: flex;
9+
align-items: center;
10+
justify-content: space-between;
11+
12+
> span {
13+
white-space: nowrap;
14+
overflow: hidden;
15+
text-overflow: ellipsis;
16+
}
17+
18+
&:hover {
19+
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
20+
border: 1px solid #ededed;
21+
background: #f1f1f1;
22+
cursor: pointer;
23+
24+
.PizzaList__item__icon {
25+
color: #D42434;
26+
}
27+
}
28+
29+
&.PizzaList__item--active {
30+
background: #673ab7;
31+
32+
span,
33+
.PizzaList__item__icon {
34+
color: white;
35+
}
36+
}
37+
38+
&.PizzaList__item--add {
39+
justify-content: center;
40+
41+
&:hover {
42+
.PizzaList__item__icon {
43+
color: #673ab7;
44+
transform: rotate(90deg);
45+
}
46+
}
47+
}
48+
49+
.PizzaList__item__icon {
50+
transition: all .3s cubic-bezier(.25,.8,.25,1);
51+
color: #b6b6b6;
52+
}
53+
}
54+
}

‎src/app/components/pizza-list/pizza-list.component.ts

+43-1
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,57 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
2+
import { FormArray, FormGroup } from '@angular/forms';
3+
import { IPizzaItem, PizzaSizeEnum } from '../../containers/pizza-form-container/pizza-form.interface';
24

35
@Component({
46
selector: 'app-pizza-list',
57
templateUrl: './pizza-list.component.html',
68
styleUrls: ['./pizza-list.component.scss']
79
})
810
export class PizzaListComponent implements OnInit {
11+
@Input() group: FormGroup;
12+
13+
@Output() deletePizza = new EventEmitter<number>();
14+
@Output() addPizza = new EventEmitter();
15+
@Output() pizzaSelected = new EventEmitter<number>();
16+
17+
get pizzasArray(): FormArray {
18+
return this.group.get('pizzas') as FormArray;
19+
}
920

1021
constructor() { }
1122

1223
ngOnInit() {
1324
}
1425

26+
getPizzaTitle(pizza: IPizzaItem): string {
27+
const selectedToppings = pizza.toppings.filter(i => i.selected).map(i => i.name);
28+
const toppingsString = this.getToppingsString(selectedToppings);
29+
const sizeString = this.getPizzaSizeTitle(pizza.size);
30+
31+
return `${sizeString} pizza ${toppingsString}`;
32+
}
33+
34+
private getToppingsString(toppings: string[]): string {
35+
if (!toppings || !toppings.length) return '';
36+
37+
return `- ${toppings.toString()}`;
38+
}
39+
40+
private getPizzaSizeTitle(size: PizzaSizeEnum): string {
41+
let pizzaSize;
42+
switch (size) {
43+
case PizzaSizeEnum.SMALL:
44+
pizzaSize = 'S';
45+
break;
46+
case PizzaSizeEnum.MEDIUM:
47+
pizzaSize = 'M';
48+
break;
49+
case PizzaSizeEnum.LARGE:
50+
pizzaSize = 'L';
51+
break;
52+
}
53+
54+
return pizzaSize;
55+
}
56+
1557
}

‎src/app/components/pizza-size-picker/pizza-size-picker.component.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
<div class="row">
3+
<div class="col-md-12">
4+
<div class="PizzaSizePicker">
5+
<div class="PizzaSizePicker__item"
6+
(click)="changeSize(PizzaSizeEnum.SMALL)"
7+
[ngClass]="{'PizzaSizePicker__item--active': pizzaSize === PizzaSizeEnum.SMALL}">
8+
SMALL
9+
</div>
10+
<div class="PizzaSizePicker__item"
11+
(click)="changeSize(PizzaSizeEnum.MEDIUM)"
12+
[ngClass]="{'PizzaSizePicker__item--active': pizzaSize === PizzaSizeEnum.MEDIUM}">
13+
MEDIUM
14+
</div>
15+
<div class="PizzaSizePicker__item"
16+
(click)="changeSize(PizzaSizeEnum.LARGE)"
17+
[ngClass]="{'PizzaSizePicker__item--active': pizzaSize === PizzaSizeEnum.LARGE}">
18+
LARGE
19+
</div>
20+
</div>
21+
</div>
22+
</div>

‎src/app/components/pizza-size-picker/pizza-size-picker.component.scss

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.PizzaSizePicker {
2+
max-width: 700px;
3+
display: flex;
4+
5+
.PizzaSizePicker__item {
6+
flex: 1;
7+
border: 1px solid #bdaaff;
8+
border-right: none;
9+
padding: 15px;
10+
text-align: center;
11+
transition: .3s all ease-in;
12+
13+
&:last-child {
14+
border-right: 1px solid #bdaaff;
15+
}
16+
17+
&:hover {
18+
cursor: pointer;
19+
background: #dac9ff;
20+
}
21+
22+
&.PizzaSizePicker__item--active {
23+
background: #673ab7;
24+
color: white;
25+
}
26+
}
27+
}

‎src/app/components/pizza-list-item/pizza-list-item.component.spec.ts renamed to ‎src/app/components/pizza-size-picker/pizza-size-picker.component.spec.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
22

3-
import { PizzaListItemComponent } from './pizza-list-item.component';
3+
import { PizzaSizePickerComponent } from './pizza-size-picker.component';
44

5-
describe('PizzaListItemComponent', () => {
6-
let component: PizzaListItemComponent;
7-
let fixture: ComponentFixture<PizzaListItemComponent>;
5+
describe('PizzaSizePickerComponent', () => {
6+
let component: PizzaSizePickerComponent;
7+
let fixture: ComponentFixture<PizzaSizePickerComponent>;
88

99
beforeEach(async(() => {
1010
TestBed.configureTestingModule({
11-
declarations: [ PizzaListItemComponent ]
11+
declarations: [ PizzaSizePickerComponent ]
1212
})
1313
.compileComponents();
1414
}));
1515

1616
beforeEach(() => {
17-
fixture = TestBed.createComponent(PizzaListItemComponent);
17+
fixture = TestBed.createComponent(PizzaSizePickerComponent);
1818
component = fixture.componentInstance;
1919
fixture.detectChanges();
2020
});

0 commit comments

Comments
 (0)