From d292db89d535035df516c4b3c36b36e042935f39 Mon Sep 17 00:00:00 2001
From: Marcelo Puebla <mpuebla@focasoftware.com>
Date: Thu, 9 Jan 2020 17:56:44 -0300
Subject: [PATCH] Agregada archivo scss con clases para el scroll

---
 src/app/app.module.ts                              |  2 +
 src/app/modules/carrito/carrito.component.html     |  9 +++--
 src/app/modules/carrito/carrito.component.ts       | 19 +++++++++-
 .../seleccion-articulos.component.html             |  4 +-
 src/app/modules/shared/shared.module.ts            |  6 ++-
 src/scss/scroll.scss                               | 44 ++++++++++++++++++++++
 src/styles.scss                                    | 17 +--------
 7 files changed, 78 insertions(+), 23 deletions(-)
 create mode 100644 src/scss/scroll.scss

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index fa00bdd..9024416 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,4 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { HttpClientModule } from '@angular/common/http';
@@ -20,6 +21,7 @@ import { SharedModule } from './modules/shared/shared.module';
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     HttpClientModule,
     FormsModule,
diff --git a/src/app/modules/carrito/carrito.component.html b/src/app/modules/carrito/carrito.component.html
index 3281bf8..01bf8fe 100644
--- a/src/app/modules/carrito/carrito.component.html
+++ b/src/app/modules/carrito/carrito.component.html
@@ -13,7 +13,7 @@
     </div>
 
     <!-- CARRITO -->
-    <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y">
+    <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible">
       <!-- MENSAJE DE ADVERTENCIA -->
       <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
         <p class="h5 text-center">No hay artículos en el carrito</p>
@@ -21,7 +21,8 @@
       <!-- ARTICULOS -->
       <div
         class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
-        *ngFor="let articulo of articuloService.carrito">
+        *ngFor="let articulo of articuloService.carrito; let i = index;"
+        @EnterLeave>
         <!-- ARTICULO -->
         <div class="h-100 px-2 py-4 border border-primary rounded-sm">
           <div class="row mx-0 h-100">
@@ -92,7 +93,9 @@
             <!-- ELIMINAR -->
             <div class="col-3 align-self-center">
               <div class="row mx-0 justify-content-center">
-                <div class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white">
+                <div
+                  class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
+                  (click)="deleteArticulo(i)">
                   <span>
                     <small class="pr-2">ELIMINAR</small>
                     <img
diff --git a/src/app/modules/carrito/carrito.component.ts b/src/app/modules/carrito/carrito.component.ts
index 4ca33d6..62a40ae 100644
--- a/src/app/modules/carrito/carrito.component.ts
+++ b/src/app/modules/carrito/carrito.component.ts
@@ -2,11 +2,24 @@ import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 
 @Component({
   selector: 'app-carrito',
   templateUrl: './carrito.component.html',
-  styleUrls: ['./carrito.component.scss']
+  styleUrls: ['./carrito.component.scss'],
+  animations: [
+    trigger('EnterLeave', [
+      state('flyIn', style({ transform: 'translateX(0)' })),
+      transition(':enter', [
+        style({ transform: 'translateX(-100%)' }),
+        animate('1s ease-in')
+      ]),
+      transition(':leave', [
+        animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
+      ])
+    ])
+  ]
 })
 export class CarritoComponent implements OnInit {
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
@@ -18,6 +31,10 @@ export class CarritoComponent implements OnInit {
 
   ngOnInit() { }
 
+  deleteArticulo(index: number) {
+    this.articuloService.carrito.splice(index, 1);
+  }
+
   goBack() {
     this.location.back();
   }
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
index 02558ef..38a904d 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
@@ -74,7 +74,7 @@
             </div>
           </div>
           <!-- LISTA DE ARTICULOS -->
-          <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
+          <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible">
             <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
               <!-- ARTICULO -->
               <div
@@ -167,7 +167,7 @@
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
-                    class="d-block h-55 img-fluid p-2 mx-auto rounded"
+                    class="d-block img-fluid p-2 mx-auto rounded"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}">
                   <p class="d-block mt-auto text-center text-primary text-truncate">
                     <small>{{articulo.DetArt}}</small>
diff --git a/src/app/modules/shared/shared.module.ts b/src/app/modules/shared/shared.module.ts
index 0f743ca..004ffec 100644
--- a/src/app/modules/shared/shared.module.ts
+++ b/src/app/modules/shared/shared.module.ts
@@ -1,12 +1,16 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
+import { CategoriaService } from 'src/app/services/categoria/categoria.service';
 
 @NgModule({})
 export class SharedModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: SharedModule,
-      providers: [ArticuloService]
+      providers: [
+        ArticuloService,
+        CategoriaService
+      ]
     };
   }
 }
diff --git a/src/scss/scroll.scss b/src/scss/scroll.scss
new file mode 100644
index 0000000..631d24a
--- /dev/null
+++ b/src/scss/scroll.scss
@@ -0,0 +1,44 @@
+@import "node_modules/bootstrap/scss/variables";
+
+.scroll-y {
+  overflow-y: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.scroll-y-visible {
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 0.75em;
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 10px;
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
+    background-color: $white;
+  }
+  &::-webkit-scrollbar-thumb {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
+    outline: 1px solid slategrey;
+    border-radius: 10px;
+    height: 12px;
+    &:active {
+      box-shadow: inset 0 0 8px $primary;
+      -webkit-box-shadow: inset 0 0 8px $primary;
+    }
+  }
+  &::-webkit-scrollbar-corner {
+    border-radius: 10px;
+  }
+}
+
+.scroll-x {
+  overflow-x: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
index 78b4bc9..235d635 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,6 +3,7 @@
 @import "scss/height-width.scss";
 @import "scss/animations.scss";
 @import "scss/icons.scss";
+@import "scss/scroll.scss";
 @import "node_modules/bootstrap/scss/_variables.scss";
 
 @font-face {
@@ -65,19 +66,3 @@ p {
 .rotate-180-neg {
   transform: rotate(-180deg);
 }
-
-.scroll-y {
-  overflow-y: auto;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.scroll-x {
-  overflow-x: auto;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-- 
1.9.1