From e4cb2c180fab48bf861e40063df7c7806a8e2f04 Mon Sep 17 00:00:00 2001 From: katyastan <134015338+katyastan@users.noreply.github.com> Date: Sun, 25 Aug 2024 23:05:03 +0300 Subject: [PATCH] feat: add start time and station in order --- src/app/api/models/order.ts | 2 - src/app/api/ordersService/orders.data.ts | 86 +++++++++++++++++++ src/app/api/ordersService/orders.service.ts | 15 +++- .../components/order/order.component.html | 13 +++ .../order/order.component.scss} | 0 .../components/order/order.component.ts | 27 ++++++ .../orders-list/orders-list.component.html | 8 ++ .../orders-list/orders-list.component.scss | 0 .../orders-list/orders-list.component.ts | 17 ++++ .../orders/pages/orders/orders.component.html | 7 ++ .../pages/orders/orders.component.spec.ts | 22 ----- .../orders/pages/orders/orders.component.ts | 28 +++++- 12 files changed, 194 insertions(+), 31 deletions(-) create mode 100644 src/app/api/ordersService/orders.data.ts create mode 100644 src/app/orders/components/order/order.component.html rename src/app/orders/{services/.gitkeep => components/order/order.component.scss} (100%) create mode 100644 src/app/orders/components/order/order.component.ts create mode 100644 src/app/orders/components/orders-list/orders-list.component.html create mode 100644 src/app/orders/components/orders-list/orders-list.component.scss create mode 100644 src/app/orders/components/orders-list/orders-list.component.ts delete mode 100644 src/app/orders/pages/orders/orders.component.spec.ts diff --git a/src/app/api/models/order.ts b/src/app/api/models/order.ts index 8914277..3896ab5 100644 --- a/src/app/api/models/order.ts +++ b/src/app/api/models/order.ts @@ -15,8 +15,6 @@ export interface Order { schedule: { segments: Segment[]; }; - stationStart: number; - stationEnd: number; } export interface User extends Profile { diff --git a/src/app/api/ordersService/orders.data.ts b/src/app/api/ordersService/orders.data.ts new file mode 100644 index 0000000..4be79fa --- /dev/null +++ b/src/app/api/ordersService/orders.data.ts @@ -0,0 +1,86 @@ +import { Order } from '@/app/api/models/order'; + +export const ordersDummyData: Order[] = [ + { + id: 64, + rideId: 45, + routeId: 18, + seatId: 33, + userId: 3, + status: 'active', + path: [33, 5, 62, 11, 48, 34], + carriages: [ + 'carriage_type_2', + 'carriage_type_2', + 'carriage_type_2', + 'carriage_type_2', + 'carriage_type_7', + 'carriage_type_7', + 'carriage_type_7', + 'carriage_type_7', + ], + schedule: { + segments: [ + { + time: ['2021-08-10T08:00:00', '2021-08-10T08:30:00'], + price: { + adult: 1000, + child: 500, + student: 700, + }, + occupiedSeats: [32], + }, + { + time: ['2021-08-10T08:30:00', '2021-08-10T09:00:00'], + price: { + adult: 1000, + child: 500, + student: 700, + }, + occupiedSeats: [32], + }, + ], + }, + }, + { + id: 65, + rideId: 46, + routeId: 19, + seatId: 34, + userId: 3, + status: 'active', + path: [33, 5, 62, 11, 48, 34], + carriages: [ + 'carriage_type_2', + 'carriage_type_2', + 'carriage_type_2', + 'carriage_type_2', + 'carriage_type_7', + 'carriage_type_7', + 'carriage_type_7', + 'carriage_type_7', + ], + schedule: { + segments: [ + { + time: ['2021-08-11T08:00:00', '2021-08-11T08:30:00'], + price: { + adult: 1000, + child: 500, + student: 700, + }, + occupiedSeats: [33], + }, + { + time: ['2021-08-11T08:30:00', '2021-08-11T09:00:00'], + price: { + adult: 1000, + child: 500, + student: 700, + }, + occupiedSeats: [33], + }, + ], + }, + }, +]; diff --git a/src/app/api/ordersService/orders.service.ts b/src/app/api/ordersService/orders.service.ts index 0bfd605..305f812 100644 --- a/src/app/api/ordersService/orders.service.ts +++ b/src/app/api/ordersService/orders.service.ts @@ -1,19 +1,26 @@ import { HttpClient } from '@angular/common/http'; -import { inject, Injectable } from '@angular/core'; +import { inject, Injectable, signal } from '@angular/core'; -import { Observable } from 'rxjs'; +import { Observable, shareReplay, tap } from 'rxjs'; import ENDPOINTS from '../constants/constants'; import { Order, OrderId, OrderRequest, User } from '../models/order'; +import { ordersDummyData } from './orders.data'; @Injectable({ providedIn: 'root', }) export class OrdersService { private httpClient = inject(HttpClient); + public allOrders = signal([]); - public getAllOrders(): Observable { - return this.httpClient.get(ENDPOINTS.ORDER); + public getOrders(): Observable { + return this.httpClient.get(ENDPOINTS.ORDER).pipe( + shareReplay(1), + // Temporar solution with hardcoded data + // tap((orders) => this.allOrders.set(orders)), + tap(() => this.allOrders.set(ordersDummyData)), + ); } public makeOrder(order: OrderRequest): Observable { diff --git a/src/app/orders/components/order/order.component.html b/src/app/orders/components/order/order.component.html new file mode 100644 index 0000000..b4d46d8 --- /dev/null +++ b/src/app/orders/components/order/order.component.html @@ -0,0 +1,13 @@ +
+
+

Order ID: {{ order.id }}

+

+ Start Time: {{ order.schedule.segments[0].time[0] | date: 'MMMM dd HH:mm' }} +

+

+ Start Station: + @if (stationsService.findStationById(order.path[0]); as startStation) { + {{ startStation.city }} + } +

+
diff --git a/src/app/orders/services/.gitkeep b/src/app/orders/components/order/order.component.scss similarity index 100% rename from src/app/orders/services/.gitkeep rename to src/app/orders/components/order/order.component.scss diff --git a/src/app/orders/components/order/order.component.ts b/src/app/orders/components/order/order.component.ts new file mode 100644 index 0000000..8aa551e --- /dev/null +++ b/src/app/orders/components/order/order.component.ts @@ -0,0 +1,27 @@ +import { DatePipe } from '@angular/common'; +import { ChangeDetectionStrategy, Component, inject, Input, OnDestroy } from '@angular/core'; + +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; +import { Subscription } from 'rxjs'; + +import { Order } from '@/app/api/models/order'; +import { StationsService } from '@/app/api/stationsService/stations.service'; + +@Component({ + selector: 'app-order', + standalone: true, + imports: [ButtonModule, RippleModule, DatePipe], + templateUrl: './order.component.html', + styleUrl: './order.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class OrderComponent implements OnDestroy { + @Input() public order!: Order; + public stationsService = inject(StationsService); + private subsciption = new Subscription(); + + public ngOnDestroy(): void { + this.subsciption.unsubscribe(); + } +} diff --git a/src/app/orders/components/orders-list/orders-list.component.html b/src/app/orders/components/orders-list/orders-list.component.html new file mode 100644 index 0000000..d8ff49d --- /dev/null +++ b/src/app/orders/components/orders-list/orders-list.component.html @@ -0,0 +1,8 @@ +
+ orders-list works! +
+ @for (order of orders; track order.id) { + + } +
+
diff --git a/src/app/orders/components/orders-list/orders-list.component.scss b/src/app/orders/components/orders-list/orders-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/orders/components/orders-list/orders-list.component.ts b/src/app/orders/components/orders-list/orders-list.component.ts new file mode 100644 index 0000000..225a069 --- /dev/null +++ b/src/app/orders/components/orders-list/orders-list.component.ts @@ -0,0 +1,17 @@ +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; + +import { Order } from '@/app/api/models/order'; + +import { OrderComponent } from '../order/order.component'; + +@Component({ + selector: 'app-orders-list', + standalone: true, + imports: [OrderComponent], + templateUrl: './orders-list.component.html', + styleUrl: './orders-list.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class OrdersListComponent { + @Input() public orders!: Order[]; +} diff --git a/src/app/orders/pages/orders/orders.component.html b/src/app/orders/pages/orders/orders.component.html index 66000b4..139e32c 100644 --- a/src/app/orders/pages/orders/orders.component.html +++ b/src/app/orders/pages/orders/orders.component.html @@ -1 +1,8 @@

orders works!

+ +
+ @let orders = ordersService.allOrders(); + @if (orders.length) { + + } +
diff --git a/src/app/orders/pages/orders/orders.component.spec.ts b/src/app/orders/pages/orders/orders.component.spec.ts deleted file mode 100644 index 9af7f8d..0000000 --- a/src/app/orders/pages/orders/orders.component.spec.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { OrdersComponent } from './orders.component'; - -describe('OrdersComponent', () => { - let component: OrdersComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [OrdersComponent], - }).compileComponents(); - - fixture = TestBed.createComponent(OrdersComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/orders/pages/orders/orders.component.ts b/src/app/orders/pages/orders/orders.component.ts index 915c502..1d98c76 100644 --- a/src/app/orders/pages/orders/orders.component.ts +++ b/src/app/orders/pages/orders/orders.component.ts @@ -1,11 +1,33 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { CommonModule, DatePipe } from '@angular/common'; +import { ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit } from '@angular/core'; + +import { Subscription } from 'rxjs'; + +import { OrdersService } from '@/app/api/ordersService/orders.service'; +import { StationsService } from '@/app/api/stationsService/stations.service'; + +import { OrdersListComponent } from '../../components/orders-list/orders-list.component'; @Component({ selector: 'app-orders', standalone: true, - imports: [], + imports: [CommonModule, OrdersListComponent], templateUrl: './orders.component.html', styleUrl: './orders.component.scss', + providers: [DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class OrdersComponent {} +export class OrdersComponent implements OnInit, OnDestroy { + public ordersService = inject(OrdersService); + public stationsService = inject(StationsService); + private subsciption = new Subscription(); + + public ngOnInit(): void { + this.subsciption.add(this.ordersService.getOrders().subscribe()); + this.subsciption.add(this.stationsService.getStations().subscribe()); + } + + public ngOnDestroy(): void { + this.subsciption.unsubscribe(); + } +}