From 229356bd3d5513efe343236fabed3d6ef4c28916 Mon Sep 17 00:00:00 2001
From: mpuebla <mpuebla@focasoftware.com>
Date: Fri, 30 Aug 2019 15:10:05 -0300
Subject: [PATCH] Agregada carousel para mostrar imagenes cargadas.

---
 .../amb-imagenes/amb-imagenes.component.html       | 62 +++++++++++++++++-----
 1 file changed, 50 insertions(+), 12 deletions(-)

diff --git a/src/app/components/amb-imagenes/amb-imagenes.component.html b/src/app/components/amb-imagenes/amb-imagenes.component.html
index d439793..117e1c9 100644
--- a/src/app/components/amb-imagenes/amb-imagenes.component.html
+++ b/src/app/components/amb-imagenes/amb-imagenes.component.html
@@ -3,11 +3,11 @@
 <div class="container-fluid">
   <div class="row m-3">
     <div class="col">
-      <p class="h2">Configuración imágenes</p>
+      <p class="h2">Configuración de imágenes</p>
     </div>
   </div>
   
-  <div class="row search">
+  <div class="row mx-3 search">
     <div class="col">
       <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
       <input
@@ -15,30 +15,68 @@
         class="form-control form-control-lg shadow-sm rounded-pill px-5"
         placeholder="Búsqueda productos"
         [(ngModel)]="searchTerm"
-        (ngModelChange)="filterItems()">
+        (ngModelChange)="filterItems()"
+        (keyup.enter)="onEnter()">
     </div>
   </div>
   
   <div class="row m-3 vh-70 overflow-scroll">
     <div class="col">
       <h5>Productos</h5>
-      <table class="table">
+      <table class="table table-striped table-hover table-borderless shadow">
         <thead>
-          <tr class="text-center">
+          <tr class="bg-primary text-center text-white shadow-sm">
             <th>Nombre</th>
-            <th>Descripción</th>
             <th colspan="2">Imagen</th>
           </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let articulo of auxProductos">
-            <td>{{articulo.DET_LAR}}</td>
-            <td>{{articulo.DET_LAR}}</td>
+          <tr class="shadow-sm" *ngFor="let articulo of auxProductos">
+            <td class="align-middle">
+              <p class="m-0">{{articulo.DET_LAR}}</p>
+              <p class="m-0"><small>Descripción: {{articulo.DET_LAR}}</small></p>
+              <p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p>
+              <p class="m-0"><small>Código: {{articulo.CodArt}}</small></p>
+            </td>
             <td>
-              <img *ngIf="articulo.imagenes.length" src="{{apiUrl}}/imagenes/{{articulo.imagenes[0].imagen}}">
-              <img id="{{articulo.CodSec + articulo.CodArt}}" [hidden]="articulo.imagenes.length">
+              <img
+                *ngIf="articulo.imagenes.length == 0"
+                class="fade-in w-100 mx-auto img-fluid"
+                src="{{apiUrl}}/imagenes/noImage.jpg">
+              <carousel [interval]="false">
+                <slide *ngFor="let item of articulo.imagenes; let index = index">
+                  <img
+                    *ngIf="!item.fromGallery"
+                    class="fade-in img-fluid w-100"
+                    src="{{apiUrl}}/imagenes/{{item.imagen}}">
+                  <img
+                    *ngIf="item.fromGallery"
+                    class="fade-in img-fluid w-100"
+                    src="{{item.imagen}}">
+                  <button
+                    (click)="deleteImage(articulo.imagenes, index)"
+                    type="button"
+                    class="btn btn-light btn-delete-image position-absolute close">
+                      <span aria-hidden="true">&times;</span>
+                  </button>
+                </slide>
+              </carousel>
+            </td>
+            <td class="align-middle text-center">
+              <div class="custom-file">
+                <input
+                  type="file"
+                  class="custom-file-input"
+                  id="customFileLang"
+                  accept="image/*"
+                  (change)="onFileSelected($event, articulo)"
+                  lang="es"
+                  multiple>
+                <label class="custom-file-label text-left pr-5" for="customFileLang">
+                  <small>Seleccionar archivo</small>
+                </label>
+              </div>
             </td>
-            <td><input type="file" accept="image/*" (change)="onFileSelected($event, articulo)"></td>
           </tr>
         </tbody>
       </table>
-- 
1.9.1