Merge pull request #86 from Proyecto-integrador-ISPC-2024/development

Fix de estructura de componentes en dashboard

frontend/src/app/components/dashboard-table/dashboard-table.component.html

@@ -0,0 +1,30 @@
+<table class="table table-striped w-100">
+  <thead>
+    <tr>
+      <th scope="col">ID</th>
+      <th scope="col">Nombre</th>
+      <th scope="col">Precio</th>
+      <th scope="col">Imagen</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Camiseta Argentina 2021</td>
+      <td>$12345</td>
+      <td>"Argentina-2021-Primera.webp"</td>
+    </tr>
+    <tr>
+      <th scope="row">1</th>
+      <td>Camiseta Argentina 2021</td>
+      <td>$12345</td>
+      <td>"Argentina-2021-Primera.webp"</td>
+    </tr>
+    <tr>
+      <th scope="row">1</th>
+      <td>Camiseta Argentina 2021</td>
+      <td>$12345</td>
+      <td>"Argentina-2021-Primera.webp"</td>
+    </tr>
+  </tbody>
+</table>

frontend/src/app/components/dashboard-table/dashboard-table.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardTableComponent } from './dashboard-table.component';
+
+describe('DashboardTableComponent', () => {
+  let component: DashboardTableComponent;
+  let fixture: ComponentFixture<DashboardTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardTableComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DashboardTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/dashboard-table/dashboard-table.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard-table',
+  standalone: true,
+  imports: [],
+  templateUrl: './dashboard-table.component.html',
+  styleUrl: './dashboard-table.component.css'
+})
+export class DashboardTableComponent {
+
+}

frontend/src/app/components/management/management.component.html

@@ -0,0 +1,9 @@
+<section class="d-flex flex-column align-items-stretch justify-content-between">
+  <article class="mb-5">
+    <app-order-management></app-order-management>
+  </article>
+  <hr />
+  <article>
+    <app-product-management></app-product-management>
+  </article>
+</section>

frontend/src/app/components/management/management.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManagementComponent } from './management.component';
+
+describe('ManagementComponent', () => {
+  let component: ManagementComponent;
+  let fixture: ComponentFixture<ManagementComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ManagementComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/management/management.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { ProductManagementComponent } from '../product-management/product-management.component';
+import { OrderManagementComponent } from '../order-management/order-management.component';
+
+@Component({
+  selector: 'app-management',
+  standalone: true,
+  imports: [ProductManagementComponent, OrderManagementComponent],
+  templateUrl: './management.component.html',
+  styleUrl: './management.component.css',
+})
+export class ManagementComponent {}

frontend/src/app/components/order-management/order-management.component.html

@@ -0,0 +1,108 @@
+<section>
+  <h2 class="my-3">Gestión de pedidos</h2>
+  <div class="mb-4">
+    <form>
+      <div class="input-group">
+        <input
+          type="text"
+          class="form-control"
+          placeholder="Buscar pedido..."
+          aria-label="Buscar orden"
+          aria-describedby="button-addon2"
+        />
+        <button class="btn btn-success" type="button" id="button-addon2">
+          Buscar
+        </button>
+      </div>
+    </form>
+  </div>
+  <div class="card text-center products-summary-card">
+    <div class="card-header">
+      <ul class="nav nav-tabs card-header-tabs align-items-end">
+        <li class="nav-item m-0">
+          <a
+            class="nav-link py-2 px-3 text-center btn-block btn-custom"
+            href="#"
+            style="color: #ffffff; background-color: #21ad6c"
+            >Resumen de pedidos</a
+          >
+        </li>
+        <li class="nav-item m-0">
+          <a
+            class="nav-link py-2 px-3 text-center btn-block btn-custom"
+            href="#"
+            style="color: #ffffff; background-color: #166b43"
+            >Historial de pedidos</a
+          >
+        </li>
+      </ul>
+    </div>
+
+    <div class="card-body">
+      <div
+        class="card d-flex flex-column justify-content-between align-items-start p-3"
+      >
+        <div
+          class="w-100 d-flex flex-row align-items-center justify-content-start p-2"
+        >
+          <h4>Orden N°12345</h4>
+        </div>
+        <div
+          class="w-100 d-flex flex-column flex-md-row flex-wrap align-items-stretch justify-content-between"
+        >
+          <div class="border-bottom border-md-end w-100">
+            <ul class="list-group list-group-flush">
+              <li
+                class="list-group-item d-flex flex-row align-items-center justify-content-between py-1 my-1"
+              >
+                <span>Camiseta Argentina 2022</span>
+                <span>$12345</span>
+              </li>
+              <li
+                class="list-group-item d-flex flex-row align-items-center justify-content-between py-1 my-1"
+              >
+                <span>Camiseta Argentina 2018</span>
+                <span>$12345</span>
+              </li>
+              <li
+                class="list-group-item d-flex flex-row align-items-center justify-content-between py-1 my-1"
+              >
+                <span>Camiseta Argentina 2014</span>
+                <span>$12345</span>
+              </li>
+            </ul>
+          </div>
+          <div class="border-md-start w-100 my-3">
+            <ul class="list-group list-group-flush">
+              <li class="list-group-item m-0">
+                <h6 class="text-start my-1 fs-5">Datos de entrega:</h6>
+                <ul class="list-group list-group-flush">
+                  <li class="list-group-item my-1">
+                    <h6>Fecha estimada de entrega:</h6>
+                    <p>A definir | 18/10/1998 | Entregado</p>
+                  </li>
+                  <li class="list-group-item my-1">
+                    <h6>Estado:</h6>
+                    <p>Pendiente/Enviando/Entregado</p>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="w-100">
+          <div
+            class="d-flex flex-row align-items-center justify-content-end p-2"
+          >
+            <button type="button" class="btn btn-danger me-2">
+              Eliminar Orden
+            </button>
+            <!-- <button type="button" class="btn btn-primary btn-custom-green">
+              Editar Orden
+            </button> -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

frontend/src/app/components/products-summary/products-summary.component.spec.ts → frontend/src/app/components/order-management/order-management.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ProductsSummaryComponent } from './products-summary.component';
+import { OrderManagementComponent } from './order-management.component';
 
-describe('ProductsSummaryComponent', () => {
-  let component: ProductsSummaryComponent;
-  let fixture: ComponentFixture<ProductsSummaryComponent>;
+describe('OrderManagementComponent', () => {
+  let component: OrderManagementComponent;
+  let fixture: ComponentFixture<OrderManagementComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ProductsSummaryComponent]
+      imports: [OrderManagementComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ProductsSummaryComponent);
+    fixture = TestBed.createComponent(OrderManagementComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

frontend/src/app/components/order-management/order-management.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-order-management',
+  standalone: true,
+  imports: [],
+  templateUrl: './order-management.component.html',
+  styleUrl: './order-management.component.css'
+})
+export class OrderManagementComponent {
+
+}

frontend/src/app/components/product-management/product-management.component.html

@@ -0,0 +1,100 @@
+<section>
+  <h2 class="my-3">Gestión de productos</h2>
+  <div class="mb-4">
+    <form>
+      <div class="input-group">
+        <input
+          type="text"
+          class="form-control"
+          placeholder="Buscar producto..."
+          aria-label="Buscar producto"
+          aria-describedby="button-addon3"
+        />
+        <button class="btn btn-success" type="button" id="button-addon3">
+          Buscar
+        </button>
+      </div>
+    </form>
+  </div>
+  <div class="card text-center products-summary-card">
+    <div class="card-header">
+      <ul class="nav nav-tabs card-header-tabs align-items-end">
+        <li class="nav-item m-0">
+          <a
+            class="nav-link py-2 px-3 text-center btn-block btn-custom"
+            href="#"
+            style="color: #ffffff; background-color: #21ad6c"
+            >Lista de productos</a
+          >
+        </li>
+        <li class="nav-item m-0">
+          <a
+            class="nav-link py-2 px-3 text-center btn-block btn-custom"
+            href="#"
+            style="color: #ffffff; background-color: #166b43"
+            >Agregar producto</a
+          >
+        </li>
+      </ul>
+    </div>
+
+    <div class="card-body">
+      <div
+        class="card d-flex flex-column justify-content-between align-items-start p-3"
+      >
+        <div
+          class="card-header w-100 d-flex flex-row align-items-center justify-content-start p-2"
+        >
+          <h4>Camisetas de Argentina</h4>
+        </div>
+        <div
+          class="card-body w-100 d-flex flex-column flex-md-row flex-wrap align-items-stretch justify-content-between"
+        >
+          <table class="table table-striped">
+            <thead>
+              <tr>
+                <th scope="col">ID</th>
+                <th scope="col">Nombre</th>
+                <th scope="col">Precio</th>
+                <th scope="col">Imagen</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">1</th>
+                <td>Camiseta Argentina 2021</td>
+                <td>$12345</td>
+                <td>"Argentina-2021-Primera.webp"</td>
+              </tr>
+              <tr>
+                <th scope="row">2</th>
+                <td>Camiseta Argentina 2021</td>
+                <td>$12345</td>
+                <td>"Argentina-2021-Primera.webp"</td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td>Camiseta Argentina 2021</td>
+                <td>$12345</td>
+                <td>"Argentina-2021-Primera.webp"</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="card-footer w-100">
+          <div
+            class="d-flex flex-row align-items-center justify-content-end p-2"
+          >
+            <button type="button" class="btn btn-danger me-2">
+              Eliminar producto
+            </button>
+            <button type="button" class="btn btn-warning btn-custom-green">
+              Editar producto
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

frontend/src/app/components/product-management/product-management.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductManagementComponent } from './product-management.component';
+
+describe('ProductManagementComponent', () => {
+  let component: ProductManagementComponent;
+  let fixture: ComponentFixture<ProductManagementComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProductManagementComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProductManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/product-management/product-management.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-product-management',
+  standalone: true,
+  imports: [],
+  templateUrl: './product-management.component.html',
+  styleUrl: './product-management.component.css'
+})
+export class ProductManagementComponent {
+
+}