From 6afacefbf94435751f767754f2c3050803311399 Mon Sep 17 00:00:00 2001 From: Fernanda Andrade <119636766+fe222004@users.noreply.github.com> Date: Wed, 7 Aug 2024 13:29:53 -0500 Subject: [PATCH] DM2-2833-estado-de-su-solicitud-de-arreglo-de-electrodomesticos --- src/app/app.module.ts | 5 +- src/app/constants/routes.constants.ts | 4 +- src/app/pages/home/home.component.html | 8 + src/app/pages/home/home.component.ts | 17 +-- src/app/pages/pages-routing.module.ts | 6 +- src/app/pages/pages.module.ts | 1 + src/app/pages/product/product.component.css | 4 + src/app/pages/product/product.component.html | 153 +++++++++++++++++++ src/app/pages/product/product.component.ts | 52 +++++++ src/app/pages/product/product.module.ts | 20 +++ src/app/pages/services/product.service.ts | 5 + src/assets/i18n/en.json | 18 ++- src/assets/i18n/es.json | 16 +- 13 files changed, 286 insertions(+), 23 deletions(-) create mode 100644 src/app/pages/product/product.component.css create mode 100644 src/app/pages/product/product.component.html create mode 100644 src/app/pages/product/product.component.ts create mode 100644 src/app/pages/product/product.module.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2255f8c..2191a2c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,12 +10,12 @@ import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { AppComponent } from './app.component'; -import { MenuModule } from './pages/components/menu/menu.module'; -import { FooterModule } from './pages/components/footer/footer.module'; + import { HomeModule } from './pages/home/home.module'; import { DashboardModule } from './pages/dashboard/dashboard.module'; import { PaymentModule } from './pages/payment/payment.module'; +import { ProductModule } from './pages/product/product.module'; export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http); @@ -29,6 +29,7 @@ export function HttpLoaderFactory(http: HttpClient) { AppRoutingModule, HomeModule, DashboardModule, + ProductModule, PaymentModule, ReactiveFormsModule, HttpClientModule, diff --git a/src/app/constants/routes.constants.ts b/src/app/constants/routes.constants.ts index e2aa545..99afbf6 100644 --- a/src/app/constants/routes.constants.ts +++ b/src/app/constants/routes.constants.ts @@ -4,6 +4,6 @@ export const RoutesConstants = { home: '', dashboard: '/pages/:userId/home', form: '/pages/:userId/form', - product: '/pages/:userId/product', - payment: '/pages/:userId/payment/:id', + //product: '/pages/:userId/product', + product: '/pages/:userId/product/:id', }; diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 2dcc257..4242dae 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -28,6 +28,11 @@

+
+ {{ + 'repair' | translate }} +
Producto @@ -45,6 +50,9 @@

{{ 'productInfo' | translat

+ diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 6ee3fdb..c4d9d89 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -1,5 +1,5 @@ import { Component, inject } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { ImageConstants } from 'src/app/constants/images.constants'; import { PaginationConstants } from 'src/app/constants/pagination.constants'; import { ProductConstants } from 'src/app/constants/product.constants'; @@ -15,6 +15,7 @@ export class HomeComponent { private readonly applianceService: ApplianceServiceService = inject( ApplianceServiceService ); + private readonly router: Router = inject(Router); userName: string | null = ''; userLastName: string | null = ''; @@ -28,14 +29,12 @@ export class HomeComponent { initialPage = ProductConstants.INITIAL_PAGE; initialTotalPages = ProductConstants.INITIAL_TOTAL_PAGES; initialTotalItems = ProductConstants.INITIAL_TOTAL_ITEMS; - + currentPage: number = this.initialPage; totalPages: number = this.initialTotalPages; totalItems: number = this.initialTotalItems; PaginationConstants = PaginationConstants; - - constructor(private activatedRoute: ActivatedRoute) { this.homepages = ImageConstants.homepages; this.avatar = ImageConstants.avatar; @@ -54,7 +53,7 @@ export class HomeComponent { this.totalPages = response.meta.last_page; this.totalItems = response.meta.total; }); -} + } toggleMenu(): void { this.isOpen = !this.isOpen; } @@ -67,11 +66,7 @@ export class HomeComponent { } } - goProduct(): string[] { - if (this.userId) { - return [RoutesConstants.product.replace(':userId', this.userId)]; - } else { - return [RoutesConstants.home]; - } + navigateToProduct(userId: number, productId: number): void { + this.router.navigate([`/pages/${userId}/product/${productId}`]); } } diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index d8089be..843d501 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -1,8 +1,8 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; -import { PaymentComponent } from './payment/payment.component'; import { RegisterComponent } from './register/register.component'; +import { ProductComponent } from './product/product.component'; const routes: Routes = [ { @@ -14,8 +14,8 @@ const routes: Routes = [ component: RegisterComponent, }, { - path: 'payment/:id', - component: PaymentComponent, + path: 'product/:id', + component: ProductComponent, }, ]; diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index a974034..bf260f1 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -4,6 +4,7 @@ import { PagesRoutingModule } from './pages-routing.module'; import { TranslateModule } from '@ngx-translate/core'; import { RegisterModule } from './register/register.module'; import { MobilMenuModule } from './components/mobil-menu/mobil-menu.module'; +import { ProductComponent } from './product/product.component'; @NgModule({ declarations: [], diff --git a/src/app/pages/product/product.component.css b/src/app/pages/product/product.component.css new file mode 100644 index 0000000..1e0f311 --- /dev/null +++ b/src/app/pages/product/product.component.css @@ -0,0 +1,4 @@ +.card{ + margin-left: 200px; + margin-right: 300px; +} diff --git a/src/app/pages/product/product.component.html b/src/app/pages/product/product.component.html new file mode 100644 index 0000000..4d2246d --- /dev/null +++ b/src/app/pages/product/product.component.html @@ -0,0 +1,153 @@ + +
+ +
+ +
+
+
+
+

{{ 'repair' | translate }}

+

{{ product?.appliance_type + }}-{{ product?.brand }}

+

{{ product?.problem_details}}

+
+
+
+ + {{ 'service' | translate }} +
+
+
{{ product?.service_type}}
+
+
+
+ + {{ 'contact' | translate }} +
+
+
{{ product?.preferred_contact_method}}
+
+
{{ product?.user?.email}}
+
+
{{ product?.user?.phone_number}}
+
+
+
+ + {{ 'collection_address' | translate }} +
+
+
{{ product?.collection_address}}-{{ product?.application_date}}
+
+
+ +
+
+ Product screenshot +
+
+ +
+
+
    +
  • +
    +
    + +
    +
    +

    {{ 'collection' | translate }}

    +

    {{ 'collection_details' | translate }} {{ + product?.collection_address}}-{{ product?.application_date}}.

    +
    +
    +
    • +
  • +
    +
    + +
    +
    +

    {{ 'diagnosis' | translate }}

    +

    {{ 'diagnosis_details' | translate }}

    +
    +
    +
    • +
  • +
    +
    + +
    +
    +

    {{ 'repair' | translate }}

    +

    {{ 'repair_details' | translate }}

    +
    +
    +
    • +
  • +
    +
    + +
    +
    +

    {{ 'delivery' | translate }}

    +

    {{ 'delivery_details' | translate }}

    +
    +
    +
    • +
  • +
    +
    + +
    +
    +

    {{ 'completion' | translate }}

    +

    {{ 'completion_details' | translate }}

    +
    +
    +
    • +
+
+
+ +
+ +
diff --git a/src/app/pages/product/product.component.ts b/src/app/pages/product/product.component.ts new file mode 100644 index 0000000..3cda0ac --- /dev/null +++ b/src/app/pages/product/product.component.ts @@ -0,0 +1,52 @@ +import { Component, inject } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { ApplianceServiceService } from '../services/appliance-service.service'; +import { ProductService } from '../services/product.service'; +import { Product } from 'src/app/models/product'; + +@Component({ + selector: 'app-product', + templateUrl: './product.component.html', + styleUrls: ['./product.component.css'], +}) +export class ProductComponent { + private readonly productService: ProductService = inject(ProductService); + + userId: number | undefined; + productId: number | undefined; + + product: Product | null = null; + + constructor(private router: Router, private route: ActivatedRoute) { + this.getid(); + } + + getid() { + return this.route.paramMap.subscribe((params) => { + const userIdParam = params.get('userId'); + const productIdParam = params.get('id'); + + this.userId = userIdParam ? +userIdParam : undefined; + this.productId = productIdParam ? +productIdParam : undefined; + + if (this.productId) { + this.loadUserProduct(this.productId); + } + }); + } + + loadUserProduct(productId: number): void { + this.productService.getProduct(productId).subscribe((response) => { + this.product = response.data; + }); + } + + getUserIdFromRoute(): string { + const urlSegments = window.location.pathname.split('/'); + return urlSegments[urlSegments.indexOf('pages') + 1]; + } + goToHome(): void { + const userId = this.getUserIdFromRoute(); + this.router.navigate([`/pages/${userId}/home`]); + } +} diff --git a/src/app/pages/product/product.module.ts b/src/app/pages/product/product.module.ts new file mode 100644 index 0000000..d64567b --- /dev/null +++ b/src/app/pages/product/product.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ProductComponent } from './product.component'; +import { MenuModule } from '../components/menu/menu.module'; +import { FooterModule } from '../components/footer/footer.module'; +import { TranslateModule } from '@ngx-translate/core'; + + + +@NgModule({ + declarations: [ProductComponent], + imports: [ + CommonModule, + MenuModule, + FooterModule, + TranslateModule + ], + exports: [ProductComponent] +}) +export class ProductModule { } diff --git a/src/app/pages/services/product.service.ts b/src/app/pages/services/product.service.ts index ca4d008..68a2d66 100644 --- a/src/app/pages/services/product.service.ts +++ b/src/app/pages/services/product.service.ts @@ -16,4 +16,9 @@ export class ProductService { registerProduct(formData: FormData): Observable { return this.httpClient.post(this.apiUrl, formData); } + + getProduct(productId: number): Observable { + const url = `${this.apiUrl}/${productId}`; + return this.httpClient.get(url); + } } diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 3e0bd85..65bef98 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -291,6 +291,18 @@ "productInfo": "Product Information", "problem": "Problem:", "service": "Service: repair", - "contact": "Contact:", - "date": "Date:" -} + "contact": "Contact", + "date": "Date:", + "repairi":"In repair", + "address_time": "Address and Time", + "collection": "Collection", + "collection_details": "The order was collected at {{ product?.collection_address }}-{{ product?.application_date }} at 10:00 am.", + "diagnosis": "Diagnosis", + "diagnosis_details": "The technician will perform an initial evaluation of the appliance.", + "repair": "Repair", + "repair_details": "Necessary repairs are carried out and defective parts are replaced.", + "delivery": "Delivery", + "delivery_details": "The repaired appliance is delivered to the customer's address.", + "completion": "Completion", + "completion_details": "A final inspection is carried out to ensure the appliance is functioning correctly." + } diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json index 849c0cc..bddfdc6 100644 --- a/src/assets/i18n/es.json +++ b/src/assets/i18n/es.json @@ -294,6 +294,18 @@ "productInfo": "Información del Producto", "problem": "Problema:", "service": "Servicio: reparación", - "contact": "Contacto:", - "date": "Fecha:" + "contact": "Contacto", + "date": "Fecha:", + "repairi":"En reparación ", + "repair": "Reparación", + "address_time": "Dirección y Hora", + "collection": "Recolección", + "collection_details": "A las 10:00 am se recogió el pedido en", + "diagnosis": "Diagnóstico", + "diagnosis_details": "El técnico realizará una evaluación inicial del electrodoméstico.", + "repair_details": "Se llevan a cabo las reparaciones necesarias y se reemplazan las piezas defectuosas.", + "delivery": "Entrega", + "delivery_details": "Se entrega el electrodoméstico reparado en la dirección del cliente.", + "completion": "Finalización", + "completion_details": "Se realiza una inspección final para asegurar que el electrodoméstico funciona correctamente." }