0

Hola muy buenas alguien sabe si es posible deshabilitar la opción de arrastrar el ion-toggle y que funcione solo al clikar.

<ion-toggle mode="ios" slot="start"   class="check_options"
            [(ngModel)]="product_item.standout" 
            (click)="change_product_standout($event, product_item.standout, product_item.product_id)" ></ion-toggle>

pues tengo problemas ya que lo que deseo hacer me lo hace al cliclar pero hay un momento que el toggle necesita volver a su estado inicial si el la base de datos hay un 0 y resulta que al clicar funciona todo de maravilla pero si lo arrastro no me cumple lo que quiero.

 change_product_standout(event, isStandout, productId){

console.log('Change Product', event)

const data = {
  'user_id': this.api.userdata.user_id,
  'api_token': this.api.userdata.api_token,
  'product_id': productId
};

this.productService.change_product_standout(data, !Boolean(Number(isStandout))).subscribe(response => {
  if(response.status == 1){
    this.util.errorToast(response.msg);
    const product = this.product_list.find(product => product.product_id == productId);
    product.standout = 0;        
  }
})

}

3
  • Cambia el evento. Usa ionChange en lugar de click.
    – Lobos
    Commented el 15 oct. 2021 a las 17:44
  • lo he probado pero no me funciona
    – luana
    Commented el 15 oct. 2021 a las 17:51
  • he añadido el código del ts
    – luana
    Commented el 15 oct. 2021 a las 18:02

1 respuesta 1

0

Hola buenas sigo con el problema ya que ion-toggle no he podido solucionar intente crear un componente toggle solo que ahora me encuentro que solo me realiza la función una vez la segunda vez que le doy no se desactiva automáticamente.

creo un componente de la siguiente manera:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'toggle-buttom',
  templateUrl: './toggle-buttom.component.html',
  styleUrls: ['./toggle-buttom.component.scss'],
})
export class ToggleButtom implements OnInit {

  @Input() isActive: boolean = false
  @Output() onChangeToggle = new EventEmitter<any>()

  constructor() { }

  ngOnInit() {}

  changeToggle(){
    if(this.isActive){
      this.isActive = false
    }else{
      this.isActive = true
    }
    this.onChangeToggle.emit({value: this.isActive})
  }

}

en html:

 <label class="toggle-content" [ngClass]="{'toggle-active': isActive}" (click)="changeToggle()">
<div class="toggle-circle"></div>

después en el ts donde va el componente:

  change_product_standout(event, productId){

    console.log('Change Product', event)

    const data = {
      'user_id': this.api.userdata.user_id,
      'api_token': this.api.userdata.api_token,
      'product_id': productId
    };

    this.productService.change_product_standout(data, (event.value)).subscribe(response => {
      if(response.status == true){
        this.util.errorToast(response.msg);
        const product = this.product_list.find(product => product.product_id == productId);
        product.standout = false;        
      }
    })

  } 

el el htm:

<ion-item lines = "none">
          
              <toggle-buttom [isActive]="product_item.standout" (onChangeToggle)="change_product_standout($event, product_item.product_id)" ></toggle-buttom>
              &nbsp;
              <ion-label class="general_txt">Destacar</ion-label>
  
              
            </ion-item> 

y por ultimo en la api tengo esto:

public function set_product_standout(Request $request){
    $result=$this->check_usertoken($request->user_id,$request->api_token);        
    if(!$result)    {
        return response()->json(['status'=>'0', 'msg'=>'Algo ha salido mal.']);
    }

    /* 
     1. Destacar el producto cuando el usuario no sea Free
     2. Destacar cuando la Cantidad permitida del Plan no ha excedido
    */
    $user = Users::find($request->user_id);
    $quota = Quota::where('user_id', $user->user_id)->orderByDesc('end_date')->get()[0];
    $subscriptionPlan = SubscriptionPlans::find($quota->subscription_plan_id);

    if($user->subscription_type == 'Free'){
        return response()->json(['status'=>'1', 'msg'=>'Tu cuenta es Free, no es posible destacar productos']);
    }

    $productsStandoutOfUser = Product::where('user_id', $user->user_id)->where('standout', true)->count();
    if($subscriptionPlan->product_quantity == $productsStandoutOfUser){
        return response()->json(['status'=>'1', 'msg'=>'Cantidad limite de productos destacados ha excedido, Productos Limite:' . $subscriptionPlan->product_quantity]);
    }

    /* Cambiar el Producto a Destacado */
    $product =  Product::find($request->product_id);
    Product::where('product_id', $product->product_id)->update(['standout' => true]);

    return response()->json(['status'=>'0', 'msg'=>'Producto actualizado como Destacado', 'data' => true]);     
  }

  public function set_product_not_standout(Request $request){

    $result=$this->check_usertoken($request->user_id,$request->api_token);        
    if(!$result)    {
        return response()->json(['status'=>'1', 'msg'=>'Algo ha salido mal.']);
    }

    $product =  Product::find($request->product_id);
    Product::where('product_id', $product->product_id)->update(['standout' => false]);

    return response()->json(['status'=>'0', 'msg'=>'Producto cambiado a no destacado', 'data' => true]);     

  }

vale esto es todo el funcionamiento es el siguiente tengo unos productos donde según la base de datos podemos destacar un numero X cuando apretar el toggle selecciono el producto a destacar y cuando sobrepasas la cantidad a destacar envió un aviso y el toggle retorna a su estado de apagado, así me funciona pero solo una vez al volver a seleccionar el toggle mas de dos veces no vuelve a su estado de apagado como que solo se repite una vez la función, con el toggle de ionic me funcionaba bien excepto cuando arrastraba el toggle no volvía a su estado, no se si alguien puede ayudarme se que es complicado pero gracias.

1
  • Alguien puede echarme una mano
    – luana
    Commented el 18 oct. 2021 a las 7:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.