Theo

angular/src/app/app-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

angular/src/app/app.component.html

@@ -0,0 +1,2 @@
+<router-outlet></router-outlet>
+<app-form></app-form>

angular/src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [RouterTestingModule],
+    declarations: [AppComponent]
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'control_stock'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('control_stock');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('control_stock app is running!');
+  });
+});

angular/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'control_stock';
+}

angular/src/app/app.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { MovimientoComponent } from './movimiento/movimiento.component';
+import { HttpClientModule } from '@angular/common/http';
+import { MovimientoService } from './service/movimiento.service';
+import { FormComponent } from './form/form.component';
+import { FormsModule } from '@angular/forms';
+import { ProductoDepositoComponent } from './producto-deposito/producto-deposito.component';
+@NgModule({
+  declarations: [
+    AppComponent,
+    MovimientoComponent,
+    FormComponent,
+    ProductoDepositoComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    FormsModule
+  ],
+  providers: [MovimientoService],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

angular/src/app/datos-formulario.ts

@@ -0,0 +1,6 @@
+export interface DatosFormulario {
+    cantidad: number;
+  productoId: number;
+  movimientoTipoId: number;
+  depositoId: number;
+}

angular/src/app/form/form.component.css

@@ -0,0 +1,70 @@
+/* Center the form and make inputs smaller */
+.my-form {
+    text-align: center;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+
+  /* Custom input style */
+  .custom-input {
+    border: 1px solid #3498db;
+    border-radius: 5px;
+    padding: 5px;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  /* Custom select style */
+  .custom-select {
+    border: 1px solid #e74c3c;
+    border-radius: 5px;
+    padding: 5px;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  /* Custom button style */
+  .custom-button {
+    background-color: #27ae60;
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    width: 100%;
+  }
+  .page-header {
+    font-size: 24px;
+    text-align: center;
+    margin-bottom: 20px;
+    color: #333; /* Color de texto deseado */
+  }
+  .error-message {
+    background-color: #f44336; /* Color de fondo rojo */
+    color: white; /* Color de texto blanco */
+    padding: 10px; /* Espaciado interior */
+    border: 1px solid #d32f2f; /* Borde rojo */
+    border-radius: 4px; /* Bordes redondeados */
+    margin-top: 10px; /* Margen superior para separar de otros elementos */
+    text-align: center;
+  }
+  .producto-cantidad {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  .lista-depositos {
+    list-style: none;
+    padding: 0;
+  }
+
+  .deposito-item {
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    margin: 5px 0;
+    padding: 10px;
+    font-size: 16px;
+  }
+
+

angular/src/app/form/form.component.html

@@ -0,0 +1,44 @@
+<div class="page-header">
+  <h1>Ingresa tu Movimiento</h1>
+</div>
+
+<div *ngIf="errorMensaje" class="error-message">
+  {{ errorMensaje }}
+</div>
+
+<form (ngSubmit)="enviarDatos()" #formulario="ngForm" class="my-form">
+  <div class="form-group">
+    <label for="cantidad">Cantidad:</label>
+    <input type="number" id="cantidad" name="cantidad" [(ngModel)]="formularioData.cantidad" required class="form-control custom-input">
+  </div>
+  <div class="form-group">
+  <label for="producto">Producto:</label>
+  <select id="producto" name="producto" [(ngModel)]="formularioData.productoId" (change)="cargarCantidadProducto()" required class="form-control custom-select">
+    <option *ngFor="let producto of productos" [value]="producto.id">{{ producto.nombre }}</option>
+  </select>
+</div>
+<p class="producto-cantidad">Cantidad total del producto: {{ cantidadProducto }}</p>
+
+<ul class="lista-depositos">
+  <li *ngFor="let deposito of cantidadDeposito" class="deposito-item">
+    {{ deposito.deposito.nombre }} - Cantidad: {{ deposito.cantidad }}
+  </li>
+</ul>
+
+  <div class="form-group">
+    <label for="movimientoTipo">Tipo de Movimiento:</label>
+    <select id="movimientoTipo" name="movimientoTipo" [(ngModel)]="formularioData.movimientoTipoId" required class="form-control custom-select">
+      <option *ngFor="let tipo of tiposMovimiento" [value]="tipo.id">{{ tipo.nombre }}</option>
+    </select>
+  </div>
+  <div class="form-group">
+    <label for="deposito">Depósito:</label>
+    <select id="deposito" name="deposito" [(ngModel)]="formularioData.depositoId" required class="form-control custom-select">
+      <option *ngFor="let deposito of depositos" [value]="deposito.id">{{ deposito.nombre }}</option>
+    </select>
+  </div>
+  <button type="submit" class="btn btn-primary custom-button">Enviar</button>
+</form>
+
+
+

angular/src/app/form/form.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormComponent } from './form.component';
+
+describe('FormComponent', () => {
+  let component: FormComponent;
+  let fixture: ComponentFixture<FormComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FormComponent]
+    });
+    fixture = TestBed.createComponent(FormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/form/form.component.ts

@@ -0,0 +1,111 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { ProductoService } from '../service/producto.service';
+import { MovimientoTipoService } from '../service/movimiento-tipo.service';
+import { DepositoService } from '../service/deposito.service';
+import { ProductoDepositoService } from '../service/producto-deposito.service';
+import { MovimientoService } from '../service/movimiento.service';
+import { DatosFormulario } from '../datos-formulario';
+@Component({
+  selector: 'app-form',
+  templateUrl: './form.component.html',
+  styleUrls: ['./form.component.css']
+})
+export class FormComponent implements OnInit {
+  formularioData: DatosFormulario = { cantidad: 0, productoId: 0, movimientoTipoId: 0, depositoId: 0 };
+  productos: any[] = [];
+  tiposMovimiento: any[] = [];
+  depositos: any[] = [];
+  errorMensaje: string = '';
+  cantidadProducto: number = 0;
+  cantidadDeposito: any[] = [];
+
+  constructor(private http: HttpClient, private productoService: ProductoService, private movimientoTipoService: MovimientoTipoService,
+    private depositoService: DepositoService, private productoDepositoService: ProductoDepositoService, private movimientoService: MovimientoService) {}
+
+  ngOnInit() {
+    this.cargarProductos();
+    this.cargarTiposMovimiento();
+    this.cargarDepositos();
+    this.cargarCantidadProducto();
+  }
+
+  cargarProductos() {
+    this.productoService.cargarProductos().subscribe(
+      (response: any) => {
+        this.productos = response;
+      },
+      (error) => {
+        this.errorMensaje = 'Error al cargar opciones de productos: ' + error;
+      }
+    );
+  }
+
+  cargarTiposMovimiento() {
+    this.movimientoTipoService.cargarTiposMovimiento().subscribe(
+      (response: any) => {
+        this.tiposMovimiento = response;
+      },
+      (error) => {
+        this.errorMensaje = 'Error al cargar opciones de tipos de movimiento: ' + error;
+      }
+    );
+  }
+
+  cargarDepositos() {
+    this.depositoService.cargarDeposito().subscribe(
+      (response: any) => {
+        this.depositos = response;
+      },
+      (error) => {
+        this.errorMensaje = 'Error al cargar opciones de depósitos: ' + error;
+      }
+    );
+  }
+
+  cargarCantidadProducto() {
+    const productoId = this.formularioData.productoId;
+    this.productoService.cargarProductoId(productoId).subscribe(
+      (response: any) => {
+        this.cantidadProducto = response.cantidad;
+      },
+      (error) => {
+        console.error('Error al cargar la cantidad del producto', error);
+      }
+    );
+
+    // Obtener la lista de depósitos y sus cantidades respectivas
+    this.productoDepositoService.cargarProductoDeposito(productoId).subscribe(
+      (response: any) => {
+        this.cantidadDeposito = response;
+      },
+      (error) => {
+        console.error('Error al cargar la lista de depósitos', error);
+      }
+    );
+  }
+
+  enviarDatos() {
+    const requestData = {
+      producto: { id: this.formularioData['productoId'] },
+      deposito: { id: this.formularioData['depositoId'] },
+      movimientoTipo: { id: this.formularioData['movimientoTipoId'] },
+      cantidad: this.formularioData['cantidad']
+    };
+
+    this.movimientoService.enviarDatos(requestData).subscribe(
+      (response) => {
+        this.errorMensaje = 'Datos enviados con éxito';
+      },
+      (error) => {
+        this.errorMensaje = 'Error al enviar los datos';
+      });
+    console.log('Datos a enviar:', requestData);
+    console.log(this.cantidadDeposito);
+
+    setTimeout(() => {
+      window.location.reload();
+  }, 1000);
+  }
+
+}  

angular/src/app/model/model.spec.ts

@@ -0,0 +1,7 @@
+import { Model } from './model';
+
+describe('Model', () => {
+  it('should create an instance', () => {
+    expect(new Model()).toBeTruthy();
+  });
+});

angular/src/app/model/model.ts

@@ -0,0 +1,7 @@
+export class Model {
+    id?: any;
+    cantidad?: any;
+    producto_id?: any;
+    deposito_id?: any;
+    movimiento_tipo_id?: any;
+  }

angular/src/app/movimiento/movimiento.component.html

@@ -0,0 +1,16 @@
+<div class="container mt-4">
+    <div class="row">
+      <div class="col-md-4" *ngFor="let card of listaCard">
+        <div class="card mb-4">
+          <div class="card-body">
+            <h5 class="card-title">{{ card.cantidad}}</h5>
+            <h6 class="card-subtitle mb-2 text-muted">{{ card.movimientoTipo.nombre}}</h6>
+            <p class="card-text">{{ card.deposito.nombre}}</p>
+            <h5 class="card-title">{{ card.producto.nombre }}</h5>
+            <h6 class="card-subtitle mb-2 text-muted">{{ card.producto.descripcion}}</h6>
+            <p class="card-text">{{ card.precio }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>

angular/src/app/movimiento/movimiento.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MovimientoComponent } from './movimiento.component';
+
+describe('MovimientoComponent', () => {
+  let component: MovimientoComponent;
+  let fixture: ComponentFixture<MovimientoComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MovimientoComponent]
+    });
+    fixture = TestBed.createComponent(MovimientoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});