Luis Suarez / autoservicio-axion

Commit ece306d2c2879276d73afa047a790536ba1f17a2

Authored by Marcelo Puebla 2020-02-14 11:05:35 -0300

Exists in develop

Add

Logica para validad fechas

Showing 4 changed files with 20 additions and 6 deletions Show diff stats

src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts

Diff comments View file @ ece306d

 import { Component, OnInit, HostListener, Output, EventEmitter } from '@angular/core';
 import { ICategoria } from 'src/app/interfaces/ICategoria';
 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
+import { DateExtension } from 'src/app/utils/dateExtension';
 @Component({
   selector: 'app-filtro-categorias',
   templateUrl: './filtro-categorias.component.html',
   styleUrls: ['./filtro-categorias.component.scss']
 })
 export class FiltroCategoriasComponent implements OnInit {
   @Output() getProductos = new EventEmitter<any>();
   @Output() setProductos = new EventEmitter<any>();
   @Output() filterItems = new EventEmitter<any>();
   categorias: ICategoria[] = [];
   timeoutHandler: any;
   categoriaActive = null;
   allActive = true;
   queMostrar = 'todos';
   urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
   constructor(
     private categoriaService: CategoriaService,
     private inactiveScreen: InactiveScreenService
   ) { }
   ngOnInit() {
     this.mediaPantalla();
   }
   getCategorias() {
     this.categoriaService.getAll()
       .subscribe((categorias: ICategoria[]) => {
         switch (this.queMostrar) {
           case 'todos':
             this.categorias = categorias;
             this.categoriaActive = 0;
             break;
           case 'promociones':
             this.categorias = categorias;
             this.categoriaActive = 19;
             break;
           case 'ordenar':
             this.categorias = categorias.filter((categoria: ICategoria) => {
               return categoria.ES_PEDIDO;
             });
             this.categoriaActive = 4;
             break;
           default:
             this.categorias = categorias;
             this.categoriaActive = 0;
             break;
         }
         !localStorage.getItem('articulos') ?
           this.getProductos.emit() :
           this.setProductos.emit();
       });
     this.mediaPantalla();
   }
   selectCategoria(index: number, idCategoria?: number) {
     if (this.categoriaActive === idCategoria) return;
     this.categoriaActive = idCategoria;
     this.allActive = idCategoria === 0 ? true : false;
     this.categorias.forEach((categoria, i) => {
       categoria.selected = index === i ? true : false;
     });
     this.filterItems.emit();
   }
   @HostListener('scroll', ['$event'])
   scrollEvent(event: Event) {
     clearTimeout(this.inactiveScreen.timerReposo);
     this.inactiveScreen.startTimeOutInactividad();
   }
   mouseup() {
     if (!this.timeoutHandler) return;
     clearInterval(this.timeoutHandler);
   }
   scrollY(el: HTMLElement, value) {
     el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     }, 500);
   }
-  validarFecha(fechaInicioString: string, fechaFinString: string) {
+  validarFecha(fechaInicio: string, fechaFin: string) {
-    const fechaInicio = new Date(fechaInicioString);
+    return DateExtension.ValidateDateRange(fechaInicio, fechaFin);
-    const fechaFin = new Date(fechaFinString);
-    const fechaAux = Date.now();
-    const fechaHoy = new Date(fechaAux);
-    return (fechaHoy >= fechaInicio && fechaHoy <= fechaFin) ? true : false;
   }
   mediaPantalla() {
     if ($('body').hasClass('media-pantalla')) {
       $('.cat-content,#cat-content')
         .addClass('media-pantalla')
         .addBack('media-pantalla');
     }
   }
 }

src/app/modules/seleccion-articulos/seleccion-articulos.component.html

Diff comments View file @ ece306d

 <div class="h-92 bg-white fade-in-left">
   <!-- PUBLICIDADES -->
   <app-header-publicidad></app-header-publicidad>
   <div class="row mx-0 align-items-end"
        [ngClass]="boxCarrito.classList.contains('media-pantalla')
                   ? 'h-68' : 'h-80'">
     <!-- CABECERA -->
     <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
       <div class="col-12 p-2 align-self-center">
         <div class="px-3">
           <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
         </div>
       </div>
     </div>
     <!-- CUERPO -->
     <div class="row w-100 mr-4 h-50 h-md-70" id="content">
       <div class="col-12 h-100 px-0 py-3">
         <div class="row mx-0 h-100">
           <app-filtro-categorias
             class="col-5 col-sm-3 col-xl-2 h-100"
             #filtroCategorias
             (getProductos)="getProductos()"
             (setProductos)="setProductos()"
             (filterItems)="filterItems()">
           </app-filtro-categorias>
           <!-- LISTA DE ARTICULOS -->
           <div
             class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
             (scroll)="scrollEvent($event)">
             <!-- SPINNER -->
             <div
               class="d-flex justify-content-center"
               *ngIf="loading">
               <div class="spinner-border text-primary mt-5" role="status">
                 <span class="sr-only">Loading...</span>
               </div>
             </div>
             <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
               <!-- ARTICULO -->
               <div
                 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"
+                [hidden]="validarFecha(articulo.FECHA_VIGENCIA_DESDE, articulo.FECHA_VIGENCIA_HASTA)"
                 class="col px-2 my-1 my-md-3 h-auto">
                 <div
                   class="swing-in-top-fwd btn-effect card h-auto"
                   (click)="selectArticulo(articulo)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     *ngIf="articulo.ExiVta < 1"
                     class="w-50 position-fixed right-0"
                     src="assets/img/sin-stock.svg">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
                     class="card-img-top w-100 h-auto h-md-55 rounded-sm">
                   <div class="row mx-0 py-1 h-auto justify-content-center">
                     <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">
                      {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
                     </p>
                     <div class="col-12 px-1 align-self-end h-auto">
                       <div class="row mx-0 justify-content-between bg-primary badge-pill">
                         <div class="col px-0 align-self-center text-white text-right">
                           {{articulo.PreVen | currency}}
                         </div>
                         <div class="col-5 px-0">
                           <img
                             draggable="false"
                             ondragstart="return false;"
                             (contextmenu)="false"
                             class="d-block ml-auto py-1 icon-30"
                             src="assets/img/ir.svg">
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <!-- BOTON VER MAS -->
             <div class="row mx-0">
               <div
                 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
                 class="col-12 px-0 mb-2">
                 <button
                   (click)="increaseShow()"
                   class="btn btn-block btn-outline-primary">
                   Ver Más
                 </button>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- FOOTER CARRITO DE COMPRAS -->
     <div class="row w-90 mx-auto h-auto justify-content-center">
       <div class="h-75 px-0 border border-primary rounded" #boxCarrito
            [ngClass]="boxCarrito.classList.contains('media-pantalla')
                       ? 'col-8' : 'col-12'" id="boxCarrito">
         <!-- CABECERA -->
         <div class="row mx-0 h-15 border-bottom border-primary">
           <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
         </div>
         <!-- CUERPO -->
         <div class="row h-85 mx-0 justify-content-around">
           <!-- BOTON SCROLL IZQUIERDA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30 rotate-180-neg"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, -100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
           <!-- CARRITO -->
           <div class="col-6 col-sm-8 col-lg-10 h-100">
             <div
               #templateCarrito
               class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
               (scroll)="scrollEvent($event)">
               <!-- ARTICULOS -->
               <div
                 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
                 *ngFor="let articulo of articuloService.carrito; let i = index;"
                 @EnterLeaveY>
                 <img
                   class="btn-effect icon-20 mr-2 position-absolute right-0"
                   src="assets/img/icono-cancelar-color.svg"
                   (click)="deleteArticulo(i)">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="d-block img-fluid p-2 mx-auto rounded w-100 h-auto"
                   src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                   onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
                 <p class="d-block mt-auto text-center text-primary text-truncate">
                   <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small>
                 </p>
                 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
               </div>
               <!-- MENSAJE DE ADVERTENCIA -->
               <div *ngIf="!articuloService.carrito.length" class="col h-100">
                 <p class="text-center py-5">No hay artículos en el carrito</p>
               </div>
             </div>
           </div>
           <!-- BOTON SCROLL DERECHA -->
           <div *ngIf="articuloService.carrito.length"
                class="col-auto btn-effect h-20 align-self-center d-contents">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, 100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
         </div>
       </div>
       <!-- TOTAL-->
       <div
         class="col-auto mt-2 ml-auto h-20">
         <div class="row mx-0">
           <div class="col-auto font-weight-bold align-self-center text-primary py-2 h3">TOTAL</div>
           <div class="col-auto align-self-center bg-primary badge-pill">
             <p class="text-center font-weight-bold text-white py-2 h3 px-2">{{articuloService.total | currency}}</p>
           </div>
         </div>
       </div>
       <!-- VER CARRITO -->
       <div
         class="col-auto px-0 h-20"
         *ngIf="articuloService.carrito.length"
         [ngClass]="boxCarrito.classList.contains('media-pantalla') ? 'ml-auto' : 'mt-3'">
         <div
           class="btn-effect col-auto px-0 align-self-center bg-white"
           [routerLink]="['/carrito']">
           <div class="row mx-0 bg-light">
             <div class="col-auto p-0 bg-primary">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="p-2 icon-40"
                 src="assets/img/carrito.svg">
             </div>
             <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

src/app/modules/seleccion-articulos/seleccion-articulos.component.ts

Diff comments View file @ ece306d

 import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } from '@angular/core';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { ICategoria } from 'src/app/interfaces/ICategoria';
 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
 import * as _ from 'lodash';
 import { ANIMATIONS } from 'src/app/utils/animations';
 import { NoStockComponent } from './no-stock/no-stock.component';
+import { DateExtension } from 'src/app/utils/dateExtension';
 @Component({
   selector: 'app-seleccion-articulos',
   templateUrl: './seleccion-articulos.component.html',
   styleUrls: ['./seleccion-articulos.component.scss'],
   animations: [ANIMATIONS.EnterLeaveY]
 })
 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {
   loading = true;
   timeoutHandler: any;
   urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
   articulos: IArticulo[] = [];
   auxArticulos: IArticulo[] = [];
   showQuantity = 100;
   searchTerm = '';
   ordenandoByVendidos = true;
   modalRef: BsModalRef;
   total = 0;
   @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent;
   constructor(
     public articuloService: ArticuloService,
     private sinonimoService: SinonimoService,
     private modalService: BsModalService,
     private inactiveScreen: InactiveScreenService,
   ) { }
   ngOnInit() { }
   ngAfterViewInit(): void {
     this.filtroCategorias.getCategorias();
     this.mediaPantalla();
   }
   ngOnDestroy() {
     for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
       this.modalService.hide(i);
     }
   }
   getProductos() {
     this.articuloService.getAll()
       .subscribe((result: IArticulo[]) => {
         this.articuloService.setArticulosSinImagen(result);
         if (this.filtroCategorias.queMostrar === 'ordenar') {
           this.filtroCategorias.categorias.forEach((categoria: ICategoria) => {
             const tempArticulos = result.filter((articulo: IArticulo) => {
               return articulo.categoria_selfservice === categoria.id;
             });
             result = tempArticulos;
           });
         }
         localStorage.setItem('articulos', JSON.stringify(result));
         this.setProductos();
       }, (error) => {
         console.error(error);
       });
   }
   setProductos() {
     this.articulos = JSON.parse(localStorage.getItem('articulos'));
     this.filterItems();
     this.loading = false;
   }
   filterItems() {
     if (this.filtroCategorias.categoriaActive === 0) {
       this.auxArticulos = this.articulos;
       return;
     }
     this.auxArticulos = this.articulos.filter(x => {
       return x.categoria_selfservice === this.filtroCategorias.categoriaActive;
     });
     this.ordenar();
   }
   ordenar() {
     if (this.ordenandoByVendidos) {
       this.auxArticulos.sort((a, b) => {
         return b.cantidadVendida - a.cantidadVendida;
       });
     }
   }
   selectArticulo(articulo: IArticulo) {
     if (articulo.ExiVta < 1) {
       if (this.modalRef) return;
       this.modalRef = this.modalService.show(NoStockComponent, {
         class: 'modal-dialog-centered',
         backdrop: false,
         ignoreBackdropClick: true,
       });
       this.modalRef.content.onClose
         .subscribe(() => this.modalRef = null);
     } else {
       this.getByID(articulo.id);
     }
   }
   getByID(id: number) {
     this.articuloService.getById(id)
       .subscribe((res: IArticulo) => {
         if (res.FPP) {
           this.openModalPromos(res);
         } else {
           this.getSinonimos(res);
         }
       }, err => console.error(err));
   }
   getSinonimos(articulo: IArticulo) {
     this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
       .subscribe((res: any[]) => {
         if (res.length) {
           const sinonimos = [];
           const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
           Object.keys(gruposArticulos).forEach((key, i) => {
             sinonimos.push({ productos: gruposArticulos[key], });
             for (const a of articulo.productos) {
               if (key === a.idSinonimo.toString()) {
                 sinonimos[i].cantidad = sinonimos[i].cantidadRestante = a.cantidad;
                 continue;
               }
             }
           });
           res = sinonimos;
           this.openModalSinonimos(res, articulo);
         } else {
           this.articuloService.setArticulo(articulo);
         }
       });
   }
   openModalPromos(articulo: IArticulo) {
     if (this.modalRef) return;
     this.articuloService.setArticulosSinImagen([articulo]);
     this.modalRef = this.modalService.show(PromocionComponent, {
       initialState: { articulosPromo: [articulo] },
       class: 'modal-dialog-centered',
       ignoreBackdropClick: true,
     });
     this.modalRef.content.onClose
       .subscribe(() => this.modalRef = null);
     this.mediaPantalla();
   }
   openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
     if (this.modalRef) return;
     this.modalRef = this.modalService.show(SinonimoComponent, {
       initialState: {
         sinonimos: sinonimosData,
         articulo
       },
       class: 'modal-dialog-centered',
       ignoreBackdropClick: true,
     });
     this.modalRef.content.onClose
       .subscribe((res: any) => {
         this.modalRef = null;
         if (!res) return;
         articulo.productos = res.articulos;
         this.articuloService.setArticulo(articulo);
       });
     this.mediaPantalla();
   }
   deleteArticulo(index: number) {
     this.articuloService.deleteArticulo(index);
   }
   increaseShow() {
     this.showQuantity += 100;
   }
+  validarFecha(fechaInicio: string, fechaFin: string) {
+    return DateExtension.ValidateDateRange(fechaInicio, fechaFin);
+  }
   @HostListener('scroll', ['$event'])
   scrollEvent(event: Event) {
     clearTimeout(this.inactiveScreen.timerReposo);
     this.inactiveScreen.startTimeOutInactividad();
   }
   mouseup() {
     if (!this.timeoutHandler) return;
     clearInterval(this.timeoutHandler);
   }
   scrollY(el: HTMLElement, value) {
     el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     }, 500);
   }
   scrollX(el: HTMLElement, value) {
     el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     }, 500);
   }
   mediaPantalla() {
     if ($('body').hasClass('media-pantalla')) {
       $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito,
         .cat-box,.img-categoria, .modal-content`)
         .addClass('media-pantalla')
         .addBack('media-pantalla');
     }
   }
 }

src/app/utils/dateExtension.ts

Diff comments View file @ ece306d

File was created	1	export class DateExtension {
	2
	3	public static ValidateDateRange(dateStart: string, dateEnd: string) {
	4	if (dateEnd === null) return false;
	5	const today = new Date(Date.now());
	6	return (new Date(dateStart) <= today && today <= new Date(dateEnd))
	7	? true : false;
	8	}
	9
	10	}