element', () => {
- // https://on.cypress.io/select
-
- // at first, no option should be selected
- cy.get('.action-select')
- .should('have.value', '--Select a fruit--')
-
- // Select option(s) with matching text content
- cy.get('.action-select').select('apples')
- // confirm the apples were selected
- // note that each value starts with "fr-" in our HTML
- cy.get('.action-select').should('have.value', 'fr-apples')
-
- cy.get('.action-select-multiple')
- .select(['apples', 'oranges', 'bananas'])
- // when getting multiple values, invoke "val" method first
- .invoke('val')
- .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
-
- // Select option(s) with matching value
- cy.get('.action-select').select('fr-bananas')
- // can attach an assertion right away to the element
- .should('have.value', 'fr-bananas')
-
- cy.get('.action-select-multiple')
- .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
- .invoke('val')
- .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
-
- // assert the selected values include oranges
- cy.get('.action-select-multiple')
- .invoke('val').should('include', 'fr-oranges')
- })
-
- it('.scrollIntoView() - scroll an element into view', () => {
- // https://on.cypress.io/scrollintoview
-
- // normally all of these buttons are hidden,
- // because they're not within
- // the viewable area of their parent
- // (we need to scroll to see them)
- cy.get('#scroll-horizontal button')
- .should('not.be.visible')
-
- // scroll the button into view, as if the user had scrolled
- cy.get('#scroll-horizontal button').scrollIntoView()
- .should('be.visible')
-
- cy.get('#scroll-vertical button')
- .should('not.be.visible')
-
- // Cypress handles the scroll direction needed
- cy.get('#scroll-vertical button').scrollIntoView()
- .should('be.visible')
-
- cy.get('#scroll-both button')
- .should('not.be.visible')
-
- // Cypress knows to scroll to the right and down
- cy.get('#scroll-both button').scrollIntoView()
- .should('be.visible')
- })
-
- it('.trigger() - trigger an event on a DOM element', () => {
- // https://on.cypress.io/trigger
-
- // To interact with a range input (slider)
- // we need to set its value & trigger the
- // event to signal it changed
-
- // Here, we invoke jQuery's val() method to set
- // the value and trigger the 'change' event
- cy.get('.trigger-input-range')
- .invoke('val', 25)
- .trigger('change')
- .get('input[type=range]').siblings('p')
- .should('have.text', '25')
- })
-
- it('cy.scrollTo() - scroll the window or element to a position', () => {
- // https://on.cypress.io/scrollto
-
- // You can scroll to 9 specific positions of an element:
- // -----------------------------------
- // | topLeft top topRight |
- // | |
- // | |
- // | |
- // | left center right |
- // | |
- // | |
- // | |
- // | bottomLeft bottom bottomRight |
- // -----------------------------------
-
- // if you chain .scrollTo() off of cy, we will
- // scroll the entire window
- cy.scrollTo('bottom')
-
- cy.get('#scrollable-horizontal').scrollTo('right')
-
- // or you can scroll to a specific coordinate:
- // (x axis, y axis) in pixels
- cy.get('#scrollable-vertical').scrollTo(250, 250)
-
- // or you can scroll to a specific percentage
- // of the (width, height) of the element
- cy.get('#scrollable-both').scrollTo('75%', '25%')
-
- // control the easing of the scroll (default is 'swing')
- cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })
-
- // control the duration of the scroll (in ms)
- cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
- })
-})
diff --git a/cypress/integration/2-advanced-examples/aliasing.spec.js b/cypress/integration/2-advanced-examples/aliasing.spec.js
deleted file mode 100644
index a02fb2b..0000000
--- a/cypress/integration/2-advanced-examples/aliasing.spec.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/// element in various ways
- .should('have.text', 'Column content')
- .should('contain', 'Column content')
- .should('have.html', 'Column content')
- // chai-jquery uses "is()" to check if element matches selector
- .should('match', 'td')
- // to match text content against a regular expression
- // first need to invoke jQuery method text()
- // and then match using regular expression
- .invoke('text')
- .should('match', /column content/i)
-
- // a better way to check element's text content against a regular expression
- // is to use "cy.contains"
- // https://on.cypress.io/contains
- cy.get('.assertion-table')
- .find('tbody tr:last')
- // finds first element with text content matching regular expression
- .contains('td', /column content/i)
- .should('be.visible')
-
- // for more information about asserting element's text
- // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
- })
-
- it('.and() - chain multiple assertions together', () => {
- // https://on.cypress.io/and
- cy.get('.assertions-link')
- .should('have.class', 'active')
- .and('have.attr', 'href')
- .and('include', 'cypress.io')
- })
- })
-
- describe('Explicit Assertions', () => {
- // https://on.cypress.io/assertions
- it('expect - make an assertion about a specified subject', () => {
- // We can use Chai's BDD style assertions
- expect(true).to.be.true
- const o = { foo: 'bar' }
-
- expect(o).to.equal(o)
- expect(o).to.deep.equal({ foo: 'bar' })
- // matching text using regular expression
- expect('FooBar').to.match(/bar$/i)
- })
-
- it('pass your own callback function to should()', () => {
- // Pass a function to should that can have any number
- // of explicit assertions within it.
- // The ".should(cb)" function will be retried
- // automatically until it passes all your explicit assertions or times out.
- cy.get('.assertions-p')
- .find('p')
- .should(($p) => {
- // https://on.cypress.io/$
- // return an array of texts from all of the p's
- const texts = $p.map((i, el) => Cypress.$(el).text())
-
- // jquery map returns jquery object
- // and .get() convert this to simple array
- const paragraphs = texts.get()
-
- // array should have length of 3
- expect(paragraphs, 'has 3 paragraphs').to.have.length(3)
-
- // use second argument to expect(...) to provide clear
- // message with each assertion
- expect(paragraphs, 'has expected text in each paragraph').to.deep.eq([
- 'Some text from first p',
- 'More text from second p',
- 'And even more text from third p',
- ])
- })
- })
-
- it('finds element by class name regex', () => {
- cy.get('.docs-header')
- .find('div')
- // .should(cb) callback function will be retried
- .should(($div) => {
- expect($div).to.have.length(1)
-
- const className = $div[0].className
-
- expect(className).to.match(/heading-/)
- })
- // .then(cb) callback is not retried,
- // it either passes or fails
- .then(($div) => {
- expect($div, 'text content').to.have.text('Introduction')
- })
- })
-
- it('can throw any error', () => {
- cy.get('.docs-header')
- .find('div')
- .should(($div) => {
- if ($div.length !== 1) {
- // you can throw your own errors
- throw new Error('Did not find 1 element')
- }
-
- const className = $div[0].className
-
- if (!className.match(/heading-/)) {
- throw new Error(`Could not find class "heading-" in ${className}`)
- }
- })
- })
-
- it('matches unknown text between two elements', () => {
- /**
- * Text from the first element.
- * @type {string}
- */
- let text
-
- /**
- * Normalizes passed text,
- * useful before comparing text with spaces and different capitalization.
- * @param {string} s Text to normalize
- */
- const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase()
-
- cy.get('.two-elements')
- .find('.first')
- .then(($first) => {
- // save text from the first element
- text = normalizeText($first.text())
- })
-
- cy.get('.two-elements')
- .find('.second')
- .should(($div) => {
- // we can massage text before comparing
- const secondText = normalizeText($div.text())
-
- expect(secondText, 'second text').to.equal(text)
- })
- })
-
- it('assert - assert shape of an object', () => {
- const person = {
- name: 'Joe',
- age: 20,
- }
-
- assert.isObject(person, 'value is object')
- })
-
- it('retries the should callback until assertions pass', () => {
- cy.get('#random-number')
- .should(($div) => {
- const n = parseFloat($div.text())
-
- expect(n).to.be.gte(1).and.be.lte(10)
- })
- })
- })
-})
diff --git a/cypress/integration/2-advanced-examples/connectors.spec.js b/cypress/integration/2-advanced-examples/connectors.spec.js
deleted file mode 100644
index ae87991..0000000
--- a/cypress/integration/2-advanced-examples/connectors.spec.js
+++ /dev/null
@@ -1,97 +0,0 @@
-///
- */
- function waitOneSecond () {
- // return a promise that resolves after 1 second
- return new Cypress.Promise((resolve, reject) => {
- setTimeout(() => {
- // set waited to true
- waited = true
-
- // resolve with 'foo' string
- resolve('foo')
- }, 1000)
- })
- }
-
- cy.then(() => {
- // return a promise to cy.then() that
- // is awaited until it resolves
- return waitOneSecond().then((str) => {
- expect(str).to.eq('foo')
- expect(waited).to.be.true
- })
- })
- })
-})
diff --git a/cypress/integration/2-advanced-examples/viewport.spec.js b/cypress/integration/2-advanced-examples/viewport.spec.js
deleted file mode 100644
index dbcd7ee..0000000
--- a/cypress/integration/2-advanced-examples/viewport.spec.js
+++ /dev/null
@@ -1,59 +0,0 @@
-///
- place-my-order.com
-
+ place-my-order.com
+
-
+
+
Ordering food has never been easier
- We make it easier than ever to order gourmet food
- from your favorite local restaurants.
+ We make it easier than ever to order gourmet food from your favorite local
+ restaurants.
- Choose a Restaurant
+ Choose a Restaurant
diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts
index 2cc8c54..001cb87 100644
--- a/src/app/home/home.component.spec.ts
+++ b/src/app/home/home.component.spec.ts
@@ -1,6 +1,7 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeComponent } from './home.component';
+import { RouterModule } from '@angular/router';
describe('HomeComponent', () => {
let component: HomeComponent;
@@ -8,9 +9,8 @@ describe('HomeComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [ HomeComponent ]
- })
- .compileComponents();
+ imports: [HomeComponent, RouterModule.forRoot([])],
+ }).compileComponents();
});
beforeEach(() => {
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 674d9b2..2b41959 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,8 +1,10 @@
import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
@Component({
selector: 'pmo-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
+ imports: [RouterLink],
})
export class HomeComponent {}
diff --git a/src/app/menu/menu.component.css b/src/app/menu/menu.component.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/menu/menu.component.html b/src/app/menu/menu.component.html
deleted file mode 100644
index 2c6c529..0000000
--- a/src/app/menu/menu.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
- menu works!
-
diff --git a/src/app/menu/menu.component.spec.ts b/src/app/menu/menu.component.spec.ts
deleted file mode 100644
index 706797e..0000000
--- a/src/app/menu/menu.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MenuComponent } from './menu.component';
-
-describe('MenuComponent', () => {
- let component: MenuComponent;
- let fixture: ComponentFixture
;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [ MenuComponent ]
- })
- .compileComponents();
- });
-
- beforeEach(() => {
- fixture = TestBed.createComponent(MenuComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/menu/menu.component.ts b/src/app/menu/menu.component.ts
deleted file mode 100644
index 9b3451f..0000000
--- a/src/app/menu/menu.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'pmo-menu',
- templateUrl: './menu.component.html',
- styleUrls: ['./menu.component.css'],
-})
-export class MenuComponent {}
diff --git a/src/app/order/details/details.component.html b/src/app/order/details/details.component.html
index 055db58..b7857ed 100644
--- a/src/app/order/details/details.component.html
+++ b/src/app/order/details/details.component.html
@@ -1,26 +1,28 @@
-Thanks for your order {{order.name}}!
-
- Confirmation Number: {{order._id}}
+
Thanks for your order {{ order.name }}!
+
+ Confirmation Number: {{ order._id }}
Items ordered:
-
-
- {{item.name}} {{item.price | currency}}
-
-
+ @for (item of order.items; track item) {
+
+
+ {{ item.name }} {{ item.price | currency }}
+
+
+ }
- Total {{(order.items | itemTotal) | currency}}
+ Total {{ order.items | itemTotal | currency }}
-
- Phone: {{order.phone}}
-
-
- Address: {{order.address}}
-
+
+ Phone: {{ order.phone }}
+
+
+ Address: {{ order.address }}
+
diff --git a/src/app/order/details/details.component.spec.ts b/src/app/order/details/details.component.spec.ts
index 6d17ee8..f01affb 100644
--- a/src/app/order/details/details.component.spec.ts
+++ b/src/app/order/details/details.component.spec.ts
@@ -1,8 +1,7 @@
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient } from '@angular/common/http';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { OrderDetailsComponent } from './details.component';
-import {ItemTotalPipe} from "../../shared/item-total.pipe";
describe('OrderDetailsComponent', () => {
let component: OrderDetailsComponent;
@@ -11,28 +10,25 @@ describe('OrderDetailsComponent', () => {
let fakeOrder: any;
beforeEach(() => {
-
fakeOrder = {
address: '285 W Adams Ave',
phone: '555-555-5555',
items: [
- {name: 'Spinach Fennel Watercress Ravioli', price: 35.99},
- {name: 'Truffle Noodles', price: 14.99},
+ { name: 'Spinach Fennel Watercress Ravioli', price: 35.99 },
+ { name: 'Truffle Noodles', price: 14.99 },
],
name: 'Justin Meyer',
slug: 'cheese-curd-city',
status: 'delivered',
- _id: '2CM3Qbs5toq3Dq0x'
+ _id: '2CM3Qbs5toq3Dq0x',
};
-
});
beforeEach(() => {
TestBed.configureTestingModule({
- imports: [ HttpClientModule ],
- declarations: [ OrderDetailsComponent, ItemTotalPipe ]
- })
- .compileComponents();
+ imports: [OrderDetailsComponent],
+ providers: [provideHttpClient()],
+ }).compileComponents();
});
beforeEach(() => {
diff --git a/src/app/order/details/details.component.ts b/src/app/order/details/details.component.ts
index b01e664..70c2aa0 100644
--- a/src/app/order/details/details.component.ts
+++ b/src/app/order/details/details.component.ts
@@ -1,19 +1,14 @@
-import { Component, OnInit, Input } from '@angular/core';
-import {Order} from "../order.service";
+import { Component, Input } from '@angular/core';
+import { Order } from '../order.service';
+import { ItemTotalPipe } from '../../shared/item-total.pipe';
+import { CurrencyPipe } from '@angular/common';
@Component({
selector: 'pmo-order-details',
templateUrl: './details.component.html',
- styleUrls: ['./details.component.css']
+ styleUrls: ['./details.component.css'],
+ imports: [CurrencyPipe, ItemTotalPipe],
})
-export class OrderDetailsComponent implements OnInit {
+export class OrderDetailsComponent {
@Input({ required: true }) order!: Order;
-
- constructor() { }
-
- ngOnInit() {
- if (!this.order) {
- throw new Error('Order is not defined');
- }
- }
}
diff --git a/src/app/order/history/history.component.html b/src/app/order/history/history.component.html
index 2f7d847..914a5d2 100644
--- a/src/app/order/history/history.component.html
+++ b/src/app/order/history/history.component.html
@@ -1,46 +1,50 @@
-
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
-
\ No newline at end of file
+
+
+
{
value: T[];
@@ -12,20 +13,17 @@ interface Data {
@Component({
selector: 'pmo-order-history',
templateUrl: './history.component.html',
- styleUrls: ['./history.component.css']
+ styleUrls: ['./history.component.css'],
+ imports: [OrderListComponent],
})
export class OrderHistoryComponent implements OnInit {
+ private orderService = inject(OrderService);
+
orders: Data = {
value: [],
- isPending: true
+ isPending: true,
};
- socket: SocketIOClient.Socket;
-
- constructor(
- private orderService: OrderService
- ) {
- this.socket = io(environment.apiUrl);
- }
+ socket: SocketIOClient.Socket = io(environment.apiUrl);
ngOnInit() {
this.getOrders();
@@ -35,13 +33,17 @@ export class OrderHistoryComponent implements OnInit {
});
this.socket.on('orders updated', (order: Order) => {
- const orderIndex = this.orders.value.findIndex(item => item._id === order._id);
+ const orderIndex = this.orders.value.findIndex(
+ (item) => item._id === order._id,
+ );
this.orders.value.splice(orderIndex, 1);
this.orders.value.push(order);
});
this.socket.on('orders removed', (order: Order) => {
- const orderIndex = this.orders.value.findIndex(item => item._id === order._id);
+ const orderIndex = this.orders.value.findIndex(
+ (item) => item._id === order._id,
+ );
this.orders.value.splice(orderIndex, 1);
});
}
@@ -53,23 +55,28 @@ export class OrderHistoryComponent implements OnInit {
}
get newOrders() {
- const orders = this.orders.value.filter((order) => order.status === 'new');
+ const orders = this.orders.value.filter((order) => order.status === 'new');
return orders;
}
- get preparingOrders() {
- const orders = this.orders.value.filter((order) => order.status === 'preparing');
+ get preparingOrders() {
+ const orders = this.orders.value.filter(
+ (order) => order.status === 'preparing',
+ );
return orders;
- }
+ }
- get deliveryOrders() {
- const orders = this.orders.value.filter((order) => order.status === 'delivery');
+ get deliveryOrders() {
+ const orders = this.orders.value.filter(
+ (order) => order.status === 'delivery',
+ );
return orders;
- }
+ }
- get deliveredOrders() {
- const orders = this.orders.value.filter((order) => order.status === 'delivered');
+ get deliveredOrders() {
+ const orders = this.orders.value.filter(
+ (order) => order.status === 'delivered',
+ );
return orders;
- }
-
+ }
}
diff --git a/src/app/order/list/list.component.html b/src/app/order/list/list.component.html
index 594db23..e68f7ea 100644
--- a/src/app/order/list/list.component.html
+++ b/src/app/order/list/list.component.html
@@ -1,33 +1,35 @@
-{{listTitle}}
-
-
-
+
{{ listTitle }}
+@if (isPending) {
+
+}
+@for (order of orders; track order) {
+
- {{order.name}}
-
- {{item.name}}
+ @for (item of order.items; track item) {
+ {{ item.name }}
+ }
-
-
{{(order.items | itemTotal) | currency}}
-
+
{{ order.items | itemTotal | currency }}
-
+}
-
{{emptyMessage}}
+
{{ emptyMessage }}
diff --git a/src/app/order/list/list.component.spec.ts b/src/app/order/list/list.component.spec.ts
index 826ce30..33fa11e 100644
--- a/src/app/order/list/list.component.spec.ts
+++ b/src/app/order/list/list.component.spec.ts
@@ -1,8 +1,7 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterModule } from '@angular/router';
import { OrderListComponent } from './list.component';
+import { provideHttpClient } from '@angular/common/http';
describe('ListComponent', () => {
let component: OrderListComponent;
@@ -10,10 +9,9 @@ describe('ListComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- imports: [ HttpClientTestingModule, RouterModule ],
- declarations: [ OrderListComponent ],
- })
- .compileComponents();
+ imports: [OrderListComponent],
+ providers: [provideHttpClient()],
+ }).compileComponents();
});
beforeEach(() => {
diff --git a/src/app/order/list/list.component.ts b/src/app/order/list/list.component.ts
index e00c95b..00ea267 100644
--- a/src/app/order/list/list.component.ts
+++ b/src/app/order/list/list.component.ts
@@ -1,13 +1,17 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
import { Order, OrderService } from '../order.service';
-
+import { ItemTotalPipe } from '../../shared/item-total.pipe';
+import { NgClass, CurrencyPipe } from '@angular/common';
@Component({
selector: 'pmo-order-list',
templateUrl: './list.component.html',
- styleUrls: ['./list.component.css']
+ styleUrls: ['./list.component.css'],
+ imports: [NgClass, CurrencyPipe, ItemTotalPipe],
})
-export class OrderListComponent implements OnInit {
+export class OrderListComponent {
+ private orderService = inject(OrderService);
+
@Input() orders: Order[] = [];
@Input() listTitle?: string;
@Input() status?: string;
@@ -17,18 +21,11 @@ export class OrderListComponent implements OnInit {
@Input() emptyMessage?: string;
isPending = false;
- constructor(private orderService: OrderService) { }
-
- ngOnInit() {}
-
markAs(order: Order, action: string) {
- this.orderService.updateOrder(order, action).subscribe(() => {
- });
+ this.orderService.updateOrder(order, action).subscribe();
}
delete(id: string) {
- this.orderService.deleteOrder(id).subscribe(() => {
- });
+ this.orderService.deleteOrder(id).subscribe();
}
-
}
diff --git a/src/app/order/menu-items/menu-items.component.html b/src/app/order/menu-items/menu-items.component.html
index 2836c11..78745d5 100644
--- a/src/app/order/menu-items/menu-items.component.html
+++ b/src/app/order/menu-items/menu-items.component.html
@@ -1,6 +1,28 @@
-
-
- {{item.price | currency}}
-
-
+
+
+
+
+
+
+
+
diff --git a/src/app/order/menu-items/menu-items.component.spec.ts b/src/app/order/menu-items/menu-items.component.spec.ts
index 4040011..3de4880 100644
--- a/src/app/order/menu-items/menu-items.component.spec.ts
+++ b/src/app/order/menu-items/menu-items.component.spec.ts
@@ -8,9 +8,8 @@ describe('MenuItemsComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [ MenuItemsComponent ]
- })
- .compileComponents();
+ imports: [MenuItemsComponent],
+ }).compileComponents();
});
beforeEach(() => {
diff --git a/src/app/order/menu-items/menu-items.component.ts b/src/app/order/menu-items/menu-items.component.ts
index 534a292..ecd8a99 100644
--- a/src/app/order/menu-items/menu-items.component.ts
+++ b/src/app/order/menu-items/menu-items.component.ts
@@ -1,6 +1,8 @@
-import { Component, Input, forwardRef } from '@angular/core';
+import { Component, forwardRef, input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Item } from '../order.service';
+import { CurrencyPipe } from '@angular/common';
+import { Item, Menu } from '../../restaurant/restaurant';
+import { TabsModule } from 'ngx-bootstrap/tabs';
@Component({
selector: 'pmo-menu-items',
@@ -9,51 +11,38 @@ import { Item } from '../order.service';
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MenuItemsComponent),
- multi: true
- }
- ]
+ multi: true,
+ },
+ ],
+ imports: [TabsModule, CurrencyPipe],
})
export class MenuItemsComponent implements ControlValueAccessor {
- @Input() data?: Item[];
-
- // eslint-disable-next-line @angular-eslint/no-input-rename
- @Input('value') _value?: Item[];
+ readonly menu = input
();
+ private value: Item[] = [];
- onChange: any = () => { };
- onTouched: any = () => { };
+ onChange: (value: Item[]) => void = () => {};
+ onTouched: () => void = () => {};
- get value() {
- return this._value;
- }
-
- set value(val) {
- this._value = val;
- this.onChange(val);
- this.onTouched();
- }
-
- registerOnChange( fn: any ): void {
+ registerOnChange(fn: (value: Item[]) => void): void {
this.onChange = fn;
}
- registerOnTouched( fn: any ): void {
+ registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}
- writeValue(value: any) {
+ writeValue(value: Item[]): void {
this.value = value;
}
toggleItem(item: Item) {
- if (this._value) {
- const index = this._value.indexOf(item);
- if(index !== -1) {
- this._value.splice(index, 1);
- } else {
- this._value.push(item);
- }
- this.writeValue(this._value);
+ const selected = this.value.indexOf(item) !== -1;
+ if (selected) {
+ this.value = this.value.filter((i) => i._id !== item._id);
+ } else {
+ this.value = [...this.value, item];
}
+ this.onChange(this.value);
+ this.onTouched();
}
-
}
diff --git a/src/app/order/order.component.html b/src/app/order/order.component.html
index 4e03d25..92ef6bd 100644
--- a/src/app/order/order.component.html
+++ b/src/app/order/order.component.html
@@ -1,49 +1,64 @@
+@let restaurant = restaurantResource.value();
+@let orderResource = createOrderResource;
+@let order = orderResource.value();
+
-
-
diff --git a/src/app/order/order.component.spec.ts b/src/app/order/order.component.spec.ts
index 7f0e16c..7a77a44 100644
--- a/src/app/order/order.component.spec.ts
+++ b/src/app/order/order.component.spec.ts
@@ -1,10 +1,9 @@
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient } from '@angular/common/http';
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
+import { provideRouter } from '@angular/router';
import { OrderComponent } from './order.component';
-import {ItemTotalPipe} from "../shared/item-total.pipe";
+import { ItemTotalPipe } from '../shared/item-total.pipe';
describe('OrderComponent', () => {
let component: OrderComponent;
@@ -12,15 +11,9 @@ describe('OrderComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
- imports: [
- HttpClientModule,
- ReactiveFormsModule,
- RouterModule.forRoot([])
- ],
- providers: [ItemTotalPipe],
- declarations: [ OrderComponent ]
- })
- .compileComponents();
+ imports: [OrderComponent],
+ providers: [provideHttpClient(), provideRouter([]), ItemTotalPipe],
+ }).compileComponents();
});
beforeEach(() => {
diff --git a/src/app/order/order.component.ts b/src/app/order/order.component.ts
index e85b5e5..101e080 100644
--- a/src/app/order/order.component.ts
+++ b/src/app/order/order.component.ts
@@ -1,22 +1,34 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
import {
- FormBuilder,
+ Component,
+ computed,
+ inject,
+ input,
+ linkedSignal,
+ ResourceStatus,
+ signal,
+ Signal,
+} from '@angular/core';
+import {
AbstractControl,
Validators,
FormGroup,
FormControl,
+ ReactiveFormsModule,
+ ValidationErrors,
+ NonNullableFormBuilder,
} from '@angular/forms';
import { RestaurantService } from '../restaurant/restaurant.service';
-import { Restaurant } from '../restaurant/restaurant';
-import { OrderService, Order, Item } from './order.service';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { OrderService } from './order.service';
+import { toSignal } from '@angular/core/rxjs-interop';
import { ItemTotalPipe } from '../shared/item-total.pipe';
+import { OnlyNumbersDirective } from '../shared/only-numbers.directive';
+import { MenuItemsComponent } from './menu-items/menu-items.component';
+import { OrderDetailsComponent } from './details/details.component';
+import { CurrencyPipe } from '@angular/common';
+import { Item } from '../restaurant/restaurant';
interface OrderForm {
- restaurant: FormControl;
name: FormControl;
address: FormControl;
phone: FormControl;
@@ -25,7 +37,7 @@ interface OrderForm {
const minLengthArray =
(min: number) =>
- (c: AbstractControl): { [key: string]: any } | null => {
+ (c: AbstractControl): ValidationErrors | null => {
if (c.value.length >= min) {
return null;
}
@@ -36,77 +48,86 @@ const minLengthArray =
selector: 'pmo-order',
templateUrl: './order.component.html',
styleUrls: ['./order.component.css'],
+ imports: [
+ OrderDetailsComponent,
+ ReactiveFormsModule,
+ MenuItemsComponent,
+ OnlyNumbersDirective,
+ CurrencyPipe,
+ ],
+ providers: [ItemTotalPipe],
})
-export class OrderComponent implements OnInit, OnDestroy {
- orderForm?: FormGroup;
- restaurant?: Restaurant;
- isLoading = true;
- orderTotal = 0.0;
- completedOrder?: Order;
- orderComplete = false;
- orderProcessing = false;
- private unSubscribe = new Subject();
-
- constructor(
- private route: ActivatedRoute,
- private restaurantService: RestaurantService,
- private orderService: OrderService,
- private formBuilder: FormBuilder,
- private itemTotal: ItemTotalPipe
- ) {}
-
- ngOnInit() {
- const slug = this.route.snapshot.paramMap.get('slug') as string;
-
- this.restaurantService.getRestaurant(slug).subscribe((data: Restaurant) => {
- this.restaurant = data;
- this.isLoading = false;
- this.createOrderForm();
- });
- }
+export class OrderComponent {
+ private readonly restaurantService = inject(RestaurantService);
+ private readonly orderService = inject(OrderService);
+ private readonly fb = inject(NonNullableFormBuilder);
+ private readonly itemTotal = inject(ItemTotalPipe);
- ngOnDestroy(): void {
- this.unSubscribe.next();
- this.unSubscribe.complete();
- }
+ slug = input();
- createOrderForm() {
- const restaurantId = this.restaurant && this.restaurant._id;
- this.orderForm = this.formBuilder.nonNullable.group({
- restaurant: [restaurantId],
- name: ['', Validators.required],
- address: ['', Validators.required],
- phone: ['', Validators.required],
- items: [[] as Item[], minLengthArray(1)],
- });
- this.onChanges();
- }
+ readonly ResourceStatus = ResourceStatus;
- onChanges() {
- this.orderForm
- ?.get('items')
- ?.valueChanges.pipe(takeUntil(this.unSubscribe))
- .subscribe((val: Item[]) => {
- this.orderTotal = this.itemTotal.transform(val);
- });
- }
+ readonly orderForm: FormGroup = this.fb.group({
+ name: this.fb.control('', [Validators.required]),
+ address: this.fb.control('', [Validators.required]),
+ phone: this.fb.control('', [Validators.required]),
+ items: this.fb.control([], [minLengthArray(1)]),
+ });
- onSubmit() {
- if (!this.orderForm?.valid) {
+ private readonly itemsControl: Signal = toSignal(
+ this.orderForm.controls.items.valueChanges,
+ { initialValue: this.orderForm.controls.items.value },
+ );
+
+ readonly orderTotal = computed(() => {
+ const items = this.itemsControl();
+ return this.itemTotal.transform(items);
+ });
+
+ readonly restaurantResource = this.restaurantService.getRestaurant(() => {
+ const slug = this.slug();
+
+ return slug ? { slug } : undefined;
+ });
+
+ readonly submitClicked = signal(0);
+
+ readonly formStatus = toSignal(this.orderForm.statusChanges, {
+ initialValue: this.orderForm.status,
+ });
+
+ readonly shouldCreateOrder = linkedSignal<
+ { clicked: number; valid: boolean },
+ boolean
+ >({
+ source: () => ({
+ clicked: this.submitClicked(),
+ valid: this.formStatus() === 'VALID',
+ }),
+ computation: (source, previous) =>
+ source.clicked !== previous?.source.clicked && source.valid,
+ });
+
+ readonly createOrderResource = this.orderService.createOrder(() => {
+ const restaurantId = this.restaurantResource.value()?._id;
+
+ if (!this.shouldCreateOrder() || !restaurantId) {
return;
}
- this.orderProcessing = true;
- this.orderService
- .createOrder(this.orderForm.getRawValue())
- .subscribe((newOrder) => {
- this.completedOrder = newOrder;
- this.orderComplete = true;
- this.orderProcessing = false;
- });
+
+ return {
+ order: {
+ ...this.orderForm.getRawValue(),
+ restaurant: restaurantId,
+ },
+ };
+ });
+
+ onSubmit() {
+ this.submitClicked.set(this.submitClicked() + 1);
}
startNewOrder() {
- this.orderComplete = false;
- this.createOrderForm();
+ this.orderForm.controls.items.setValue([]);
}
}
diff --git a/src/app/order/order.service.spec.ts b/src/app/order/order.service.spec.ts
index bbb7e90..9119fbd 100644
--- a/src/app/order/order.service.spec.ts
+++ b/src/app/order/order.service.spec.ts
@@ -1,12 +1,18 @@
-import { HttpClientModule } from '@angular/common/http';
+import {
+ provideHttpClient,
+ withInterceptorsFromDi,
+} from '@angular/common/http';
import { TestBed } from '@angular/core/testing';
import { OrderService } from './order.service';
describe('OrderService', () => {
- beforeEach(() => TestBed.configureTestingModule({
- imports: [ HttpClientModule ]
- }));
+ beforeEach(() =>
+ TestBed.configureTestingModule({
+ imports: [],
+ providers: [provideHttpClient(withInterceptorsFromDi())],
+ }),
+ );
it('should be created', () => {
const service: OrderService = TestBed.inject(OrderService);
diff --git a/src/app/order/order.service.ts b/src/app/order/order.service.ts
index 827c85e..22d574e 100644
--- a/src/app/order/order.service.ts
+++ b/src/app/order/order.service.ts
@@ -1,27 +1,23 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Injectable, Resource, inject } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
import { Config } from '../restaurant/restaurant.service';
-
-export interface Item {
- name: string;
- price: number;
-}
+import { Item } from '../restaurant/restaurant';
export interface Order {
_id: string;
name: string;
address: string;
phone: string;
+ restaurant: string;
status: string;
items: Item[];
}
interface CreateOrderDto {
+ restaurant: string;
name: string;
address: string;
phone: string;
- status?: string;
items: Item[];
}
@@ -29,24 +25,36 @@ interface CreateOrderDto {
providedIn: 'root',
})
export class OrderService {
- constructor(private httpClient: HttpClient) {}
+ private http = inject(HttpClient);
getOrders() {
- return this.httpClient.get>('/api/orders');
+ return this.http.get>('/api/orders');
}
- createOrder(order: CreateOrderDto): Observable {
- const orderData = { ...order, status: 'new' };
- return this.httpClient.post('/api/orders', orderData);
+ createOrder(
+ request: () => { order: CreateOrderDto } | undefined,
+ ): Resource {
+ return httpResource(() => {
+ const requestValue = request();
+ if (!requestValue) {
+ return undefined;
+ }
+
+ return {
+ url: '/api/orders',
+ method: 'POST',
+ body: { ...requestValue.order, status: 'new' },
+ };
+ });
}
updateOrder(order: Order, action: string) {
const orderData = Object.assign({}, order);
orderData.status = action;
- return this.httpClient.put('/api/orders/' + orderData._id, orderData);
+ return this.http.put('/api/orders/' + orderData._id, orderData);
}
deleteOrder(id: string) {
- return this.httpClient.delete('/api/orders/' + id);
+ return this.http.delete('/api/orders/' + id);
}
}
diff --git a/src/app/restaurant/detail/detail.component.html b/src/app/restaurant/detail/detail.component.html
index 40318eb..f2597ae 100644
--- a/src/app/restaurant/detail/detail.component.html
+++ b/src/app/restaurant/detail/detail.component.html
@@ -1,36 +1,42 @@
-
-
-
-
-