DM2-2833-estado-de-su-solicitud-de-arreglo-de-electrodomesticos

teamq-ec · Aug 7, 2024 · 6afacef · 6afacef
1 parent 7c7c95e
commit 6afacef
Show file tree

Hide file tree

Showing 13 changed files with 286 additions and 23 deletions.
diff --git 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
@@ -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
@@ -28,6 +28,11 @@ <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
                 <div class="bg-white p-5 rounded-lg shadow-sm border border-blue-100 flex-shrink-0 min-w-[300px] max-w-sm hover:shadow-md transition-shadow duration-300"
                     *ngFor="let appliance of appliances">
                     <div class="space-y-4">
+                        <div class="flex items-center gap-x-4 text-xs">
+                            <a href="#"
+                                class="relative z-10 rounded-full bg-yellow-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-yellow-100">{{
+                                'repair' | translate }}</a>
+                        </div>
                         <div class="flex items-center mb-4">
                             <img [src]="appliance.damaged_appliance_image" alt="Producto"
                                 class="h-16 w-16 rounded-full bg-blue-100 border border-blue-200 mr-4">
@@ -45,6 +50,9 @@ <h3 class="text-lg font-semibold mb-2 text-gray-700">{{ 'productInfo' | translat
                                 </div>
                             </div>
                         </div>
+                        <button (click)="navigateToProduct(appliance.user.id, appliance.id)" type="submit"
+                            class="flex-none rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">
+                            Detalles</button>
                     </div>
                 </div>
             </div>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,153 @@
+<app-menu></app-menu>
+<div class="custom-position">
+  <button (click)="goToHome()"
+    class="inline-flex items-center justify-center w-10 h-10 bg-indigo-600 rounded-md shadow-sm text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+    title="Go to Home">
+    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+    </svg>
+  </button>
+</div>
+
+<div class="card">
+  <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
+    <div class="lg:pr-8 lg:pt-4">
+      <div class="lg:max-w-lg">
+        <h2 class="text-base font-semibold leading-7 text-indigo-600">{{ 'repair' | translate }}</h2>
+        <p class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{{ product?.appliance_type
+          }}-{{ product?.brand }}</p>
+        <p class="mt-6 text-lg leading-8 text-gray-600">{{ product?.problem_details}}</p>
+        <dl class="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-600 lg:max-w-none">
+          <div class="relative pl-9">
+            <dt class="inline font-semibold text-gray-900">
+              <svg class="absolute left-1 top-1 h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor"
+                aria-hidden="true">
+                <path fill-rule="evenodd"
+                  d="M5.5 17a4.5 4.5 0 01-1.44-8.765 4.5 4.5 0 018.302-3.046 3.5 3.5 0 014.504 4.272A4 4 0 0115 17H5.5zm3.75-2.75a.75.75 0 001.5 0V9.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.1 0l-3.25 3.5a.75.75 0 101.1 1.02l1.95-2.1v4.59z"
+                  clip-rule="evenodd" />
+              </svg>
+              {{ 'service' | translate }}
+            </dt>
+            <br>
+            <dd class="inline">{{ product?.service_type}}</dd>
+          </div>
+          <div class="relative pl-9">
+            <dt class="inline font-semibold text-gray-900">
+              <svg class="absolute left-1 top-1 h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor"
+                aria-hidden="true">
+                <path fill-rule="evenodd"
+                  d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z"
+                  clip-rule="evenodd" />
+              </svg>
+              {{ 'contact' | translate }}
+            </dt>
+            <br>
+            <dd class="inline">{{ product?.preferred_contact_method}}</dd>
+            <br>
+            <dd class="inline">{{ product?.user?.email}}</dd>
+            <br>
+            <dd class="inline">{{ product?.user?.phone_number}}</dd>
+          </div>
+          <div class="relative pl-9">
+            <dt class="inline font-semibold text-gray-900">
+              <svg class="absolute left-1 top-1 h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor"
+                aria-hidden="true">
+                <path
+                  d="M4.632 3.533A2 2 0 016.577 2h6.846a2 2 0 011.945 1.533l1.976 8.234A3.489 3.489 0 0016 11.5H4c-.476 0-.93.095-1.344.267l1.976-8.234z" />
+                <path fill-rule="evenodd"
+                  d="M4 13a2 2 0 100 4h12a2 2 0 100-4H4zm11.24 2a.75.75 0 01.75-.75H16a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75h-.01a.75.75 0 01-.75-.75V15zm-2.25-.75a.75.75 0 00-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 00.75-.75V15a.75.75 0 00-.75-.75h-.01z"
+                  clip-rule="evenodd" />
+              </svg>
+              {{ 'collection_address' | translate }}
+            </dt>
+            <br>
+            <dd class="inline">{{ product?.collection_address}}-{{ product?.application_date}}</dd>
+          </div>
+        </dl>
+
+      </div>
+    </div>
+    <img [src]="product?.damaged_appliance_image" alt="Product screenshot"
+      class="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[30rem] md:-ml-4 lg:-ml-0"
+      width="2432" height="1442">
+  </div>
+</div>
+
+<div class="bg-white mt-8 ml-10 mr-10">
+  <div
+    class="relative isolate overflow-hidden bg-white-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:px-24 lg:pt-0">
+    <ul role="list" class="divide-y divide-gray-100">
+      <li class="flex justify-between gap-x-6 py-5">
+        <div class="flex min-w-0 gap-x-4">
+          <div class="h-12 w-12 flex-none rounded-full bg-gray-50 flex items-center justify-center">
+            <svg class="h-6 w-6 text-blue-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M12 2a2 2 0 00-2 2v4a2 2 0 00-2 2v4a2 2 0 002 2h4a2 2 0 002-2V8a2 2 0 00-2-2V4a2 2 0 00-2-2z" />
+            </svg>
+          </div>
+          <div class="min-w-0 flex-auto">
+            <p class="text-sm font-semibold leading-6 text-gray-900">{{ 'collection' | translate }}</p>
+            <p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ 'collection_details' | translate }} {{
+              product?.collection_address}}-{{ product?.application_date}}.</p>
+          </div>
+        </div>
+      </li>
+      <li class="flex justify-between gap-x-6 py-5">
+        <div class="flex min-w-0 gap-x-4">
+          <div class="h-12 w-12 flex-none rounded-full bg-gray-50 flex items-center justify-center">
+            <svg class="h-6 w-6 text-green-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M5 3h10a1 1 0 011 1v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4a1 1 0 011-1z" />
+              <path d="M3 4h14v1H3V4z" />
+            </svg>
+          </div>
+          <div class="min-w-0 flex-auto">
+            <p class="text-sm font-semibold leading-6 text-gray-900">{{ 'diagnosis' | translate }}</p>
+            <p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ 'diagnosis_details' | translate }}</p>
+          </div>
+        </div>
+      </li>
+      <li class="flex justify-between gap-x-6 py-5">
+        <div class="flex min-w-0 gap-x-4">
+          <div class="h-12 w-12 flex-none rounded-full bg-gray-50 flex items-center justify-center">
+            <svg class="h-6 w-6 text-yellow-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M6 9h8V7H6v2zm0 4h8v-2H6v2z" />
+            </svg>
+          </div>
+          <div class="min-w-0 flex-auto">
+            <p class="text-sm font-semibold leading-6 text-gray-900">{{ 'repair' | translate }}</p>
+            <p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ 'repair_details' | translate }}</p>
+          </div>
+        </div>
+      </li>
+      <li class="flex justify-between gap-x-6 py-5">
+        <div class="flex min-w-0 gap-x-4">
+          <div class="h-12 w-12 flex-none rounded-full bg-gray-50 flex items-center justify-center">
+            <svg class="h-6 w-6 text-red-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M10 3.5a1 1 0 00-1 1v7a1 1 0 002 0v-7a1 1 0 00-1-1zM10 13.5a1 1 0 100 2 1 1 0 000-2z" />
+            </svg>
+          </div>
+          <div class="min-w-0 flex-auto">
+            <p class="text-sm font-semibold leading-6 text-gray-900">{{ 'delivery' | translate }}</p>
+            <p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ 'delivery_details' | translate }}</p>
+          </div>
+        </div>
+      </li>
+      <li class="flex justify-between gap-x-6 py-5">
+        <div class="flex min-w-0 gap-x-4">
+          <div class="h-12 w-12 flex-none rounded-full bg-gray-50 flex items-center justify-center">
+            <svg class="h-6 w-6 text-purple-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M8 4v4H6v4h2v4h4v-4h2V8h-2V4H8z" />
+            </svg>
+          </div>
+          <div class="min-w-0 flex-auto">
+            <p class="text-sm font-semibold leading-6 text-gray-900">{{ 'completion' | translate }}</p>
+            <p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ 'completion_details' | translate }}</p>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
+
+<div class="mt-24">
+  <app-footer></app-footer>
+</div>
diff --git a/src/app/pages/product/product.component.ts 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
@@ -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
@@ -16,4 +16,9 @@ export class ProductService {
   registerProduct(formData: FormData): Observable<Product> {
     return this.httpClient.post<Product>(this.apiUrl, formData);
   }
+
+  getProduct(productId: number): Observable<any> {
+    const url = `${this.apiUrl}/${productId}`;
+    return this.httpClient.get<any>(url);
+  }
 }