0

Se esta desarrollando un sistema de inventario, donde estos despues de registrar van apareciendo en una tabla. En la forma de registro de debe de especificar quantity, reorder_level (cantidad minimima), `target_Stock(cantidad maxima). Por ciertos procesos la cantidad puede aumentar o disminuir.

El usuario puede dar de baja o dar de alta cualquier articulo cuando el lo desee.

Lo que necesito que haga es que dependiendo la cantidad actual, cambie de status, es decir

0 = el articulo se encuentra inactivo,dibuja punto gris.

1 = el articulo se encuentra activo, en cantidad se encuentra estable, dibuja punto verde.

2 = el articulo esta apunto de acabarse ,dibuja punto amarillo.

3 = el articulo esta por debajo de su minimo,dibuja punto rojo.

Por medio de una api, estoy haciendo los cambios.

        else if(isset($_POST['id']) && isset($_POST['x']))
{
        
   $connection = new MySqlServerConnection();
        
    $query1 = 'SELECT quantity-2, reorder_Level FROM inventory_list WHERE id= ?';
    $result1 = $connection->executeQuery($query1,array($_POST['id']));
    echo $result1[0][0];
    echo $result1[0][1];
        
     if (intval($result1[0][0]) == intval($result1[0][1]))
       {
        $query = 'UPDATE inventory_list SET status = 2 WHERE  id = ?';
        $result = $connection->executeNonQueryWithReturn($query,array($_POST['id']));
       }
        else
        {
        $query = 'UPDATE Supplies SET status = 1 WHERE  id = ?';
        $result = $connection->executeNonQueryWithReturn($query,array($_POST['id']));
        }            
                if ($result == 1)
                {
                  echo json_encode(array(
                    'status' => '0',
                    'errorMessage' => 'articulo cambio status'
                  ));
                }
                else
                {
                  echo json_encode(array(
                    'status' => '2',
                    'errorMessage' => 'articulo no cambio status'
                  ));
                }
          }
    
    else if(isset($_POST['id']))
      {
    
    $connection = new MySqlServerConnection();
    $query1 = 'SELECT quantity, reorder_Level FROM inventory_list WHERE id = ?';
    $result1 = $connection->executeQuery($query1,array($_POST['id']));

    	if (intval($result1[0][0]) <= intval($result1[0][1]))
    	{
          $query = 'UPDATE inventory_list SET status = 3 WHERE  id = ?';
          $result = $connection >executeNonQuery($query,array($_POST['id']));
    	}
    	else
    	{
    	$query = 'UPDATE inventory_list SET status = 0 WHERE  id = ?';
    	$result = $connection->executeNonQuery($query,array($_POST['id']));
    			}
    
          if ($result == 0)
          {
            echo json_encode(array(
              'status' => '0',
              'errorMessage' => 'articulo cambio status'
            ));
          }
          else
          {
            echo json_encode(array(
              'status' => '2',
              'errorMessage' => 'articulo no cambio status'
            ));
          }
    
    }

El los querys siempre estoy comparando quantity, y reorder_level(cantidad minima), en el primero estoy tratando de restarle 2 a mi cantidad actual.

Ejemplo si tengo 2 como reorder_level, y en mi cantidad actual tengo 4, pero restandole 2 desde un inicio esto da un resultado de 2, significa que estos son iguales como la condicion lo dice y tengo 2 de diferencia y esta apunto de acabarse, por lo que cambiara a status 2 y dibujara en punto amarillo.

Si no es asi, significa que su quantity es estable, por lo que dibujara el punto verde.

EN el siguiente query se esta diciendo que si mi quantity es menor o igual a reorder_level, significa que esta por debajo de su minimo, por lo que debera cambiar a status 3 y dibujara el punto rojo.

Si no es asi entonces este lo dio de baja por su propia cuenta, por lo que es status 0 y dibujara el punto gris.

Este es el codigo js que uso para poner en la fila de status los puntos de colores.

fa fa-circle text-navy - punto verde.

fa fa-circle text-warning -punto amarillo.

fa fa-circle text-danger - punto rojo.

fa fa-circle dot - punto gris.

if (articulos[i].status == 1) {

            //si es activo se dibuja el circulo verde en la tabla
            var status=document.createElement('i');
            status.setAttribute("class", "fa fa-circle text-navy");
            status.setAttribute("data-toggle", "tooltip");
            status.setAttribute("data-placement", "top");
            status.setAttribute("data-html", "true");
            status.setAttribute("title", "Item activo.");
            CellStatus.appendChild(status);
    }


    else if (articulos[i].status == 2)
    {

        //si es activo se dibuja el circulo amarillo en la tabla
            var status = document.createElement('i');
            status.setAttribute("class", "fa fa-circle text-warning"); 


            status.setAttribute("data-toggle", "tooltip");
            status.setAttribute("data-placement", "top");
            status.setAttribute("data-html", "true");
            status.setAttribute("title", "Ya es por terminarse.");

            CellStatus.appendChild(status);
    }
    else if (articulos[i].status == 3)
    {

        //si es activo se dibuja el circulo rojo en la tabla
        var status = document.createElement('i');
        status.setAttribute("class", "fa fa-circle text-danger");
        status.setAttribute("data-toggle", "tooltip");
        status.setAttribute("data-placement", "top");
        status.setAttribute("data-html", "true");
        status.setAttribute("title", "cantidad en 0.");
        CellStatus.appendChild(status);

    }

    else
    {
            //si es activo se dibuja el circulo gris en la tabla
            var status = document.createElement('i');
                //dibuja el circulo rojo de inactivo
            status.setAttribute("class", "fa fa-circle dot");
            status.setAttribute("data-toggle", "tooltip");
            status.setAttribute("data-placement", "top");
            status.setAttribute("data-html", "true");
            status.setAttribute("title", "Item inactivo.");
            CellStatus.appendChild(status);
    }


var CellAcciones = document.createElement('td');
CellAcciones.style.textAlign = "center";
var edit = document.createElement('button');
var editImg = document.createElement('img');


    /*Crea toda la celda de editar*/
    var editImg = document.createElement('i');
editImg.setAttribute("class", "fa fa-pencil");
    editImg.style.color="#000000";
edit.appendChild(editImg);
edit.className = 'btn btn-w-m btn-warning';
edit.style.minWidth = '0px';
    edit.setAttribute("onclick", "editModal('" + articulos[i].cat_name +"', '" +
    articulos[i].idSub +"','" +
    articulos[i].numFile +"', '" + articulos[i].description_item +"', '" +
    articulos[i].price_item +"', '" + articulos[i].manufacturer +"', '"+
    articulos[i].model_item +"', '" +   articulos[i].reorder_Level +"','" +
    articulos[i].target_Stock +"','" + articulos[i].image +"','" +
    articulos[i].commentt +"','" + articulos[i].registerDate +"', '"+
    articulos[i].id_category +"','" + articulos[i].id_supplier +"','" +
    articulos[i].id_unit +"','" + articulos[i].id_location +"','" + articulos[i].id_engineer +"','" + articulos[i].idSub +"',)");
    edit.setAttribute("data-toggle", "tooltip");
    edit.setAttribute("data-placement", "top");
    edit.setAttribute("data-html", "true");
    edit.setAttribute("title", "Click para editar informacion de alta de este item.");
     CellAcciones.appendChild(edit);


            //Da de alta
            if (articulos[i].status == 1) {
                    var remove = document.createElement('button');
                    var removeImg = document.createElement('i');
                    removeImg.setAttribute("class", "fa fa-arrow-up");
                    removeImg.style.color="#000000";
                    remove.appendChild(removeImg);
                    remove.className = "btn btn-w-m btn-primary";
                    remove.style.minWidth = '0px';
                    remove.style.marginLeft="20px";
                    remove.setAttribute("onclick", "changeStatusx2('" +
                    articulos[i].numFile + "', '" + articulos[i].description_item +"')");
                    //muestra el mensaje por arriba dle boton
                    remove.setAttribute("data-toggle", "tooltip");
                    remove.setAttribute("data-placement", "top");
                    remove.setAttribute("data-html", "true");
                    remove.setAttribute("title", "Este item se encuentra activo, click para cambiar estado");
                    CellAcciones.appendChild(remove)
            }
    else{
        /*dar de baja*/
        var remove = document.createElement('button');
        var removeImg = document.createElement('i');
        removeImg.setAttribute("class", "fa fa-arrow-down");
        removeImg.style.color="#000000";
        remove.appendChild(removeImg);
        remove.className = "btn btn-w-m btn-dot";
        remove.style.minWidth = '0px';
        remove.style.marginLeft="20px";
        remove.setAttribute("onclick", "changeStatus('" +
        articulos[i].numFile + "', '" + articulos[i].description_item +"')");
        //muestra el mensaje por arriba dle boton
        remove.setAttribute("data-toggle", "tooltip");
        remove.setAttribute("data-placement", "top");
        remove.setAttribute("data-html", "true");
        remove.setAttribute("title", "Este item se encuentra inactivo, click para cambiar estado");
        CellAcciones.appendChild(remove)
    }

Dependiendo lo que obtenga la api, va a cambiar el status yel color del punto en la tabla, pero como dije el usuario puede dar de baja o de alta un item cuando el quiera, por eso, vuelvo a repetir la condicion de status == 1, pero con las otras debera ir cambiando, si esta activo.

El problema que tengo es que, los colores rojo y amarillo se revuelven, no los indica cuando se deben, por los otros verde y gris no hay problema esto los ejecuta exitosamente.

Mi api la hice asi, no se si sea correctO, lo que si estoy haciendo,pero estoy segura es que en el js donde se dibujan los puntos, esta mal, pero no se como hacer que coincidan cuando deben de hacerlo.

Alguien que pueda indicarme como hacerlo?

1 respuesta 1

1

Te estás ahogando en un vaso de agua. No necesitas cuatro if para obtener cada color según el status (menos mal que no son más colores, tendrías un código interminable y repetitivo).

Esto se resuelve muy fácil usando un objeto que almacene otro objeto anidado con pares: clave / valor tanto para el color que se debe aplicar como para el título. La clave de cada objeto será el número que recuperarás con articulos[i].status y luego, según ese número podrás encontrar tanto el color como el título leyendo la propiedad class y la propiedad title.

El objeto sería este:

var refColors = {
  "1": {
    "class": "text-navy",
    "title": "Item activo"
  },
  "2": {
    "class": "text-warning",
    "title": "Ya es por terminarse"
  },
  "3": {
    "class": "text-danger",
    "title": "cantidad en 0"
  }
};

Nótese que aquí no aparece dot, porque de lo que se desprende de la lógica que estás implementando sería el valor por defecto.

Entonces lo que haremos será establecer dos variables con los valores que irían por defecto (en el caso de que no se encuentre el número), y esas variables sólo cambiarían dentro del if.

Haciendo esto, tu código quedaría libre de todos los if que estás implementando y, si en un futuro se agrega otra opción de colores sólo tienes que colocarla en el objeto que guarda los pares clave/objeto anidado.

El código completo quedaría entonces así:

var refColors = {
  "1": {
    "class": "text-navy",
    "title": "Item activo"
  },
  "2": {
    "class": "text-warning",
    "title": "Ya es por terminarse"
  },
  "3": {
    "class": "text-danger",
    "title": "cantidad en 0"
  }
};

var refStatus=articulos[i].status;
/*Valores por defecto*/
var theTitle = "Item inactivo";
var cssClass = "dot";
if (refColors.hasOwnProperty(refStatus)) {
  theTitle = refColors[refStatus].title;
  cssClass = `fa fa-circle ${refColors[refStatus].class}`;
}

var status = document.createElement('i');
/*Ojo aquí, cssClass tendrá lo que corresponda según el valor numérico hallado*/
status.setAttribute("class", cssClass); 
status.setAttribute("data-toggle", "tooltip");
status.setAttribute("data-placement", "top");
status.setAttribute("data-html", "true");
/*Aquí theTitle tendrá lo que corresponda según el valor numérico hallado*/
status.setAttribute("title", theTitle);
CellStatus.appendChild(status);

Veamos algunas pruebas con los posibles valores:

var refColors = {
  "1": {
    "class": "text-navy",
    "title": "Item activo"
  },
  "2": {
    "class": "text-warning",
    "title": "Ya es por terminarse"
  },
  "3": {
    "class": "text-danger",
    "title": "cantidad en 0"
  }
};

var refStatus = "1"; //articulos[i].status;
/*Valores por defecto*/
var theTitle = "Item inactivo";
var cssClass = "dot";
if (refColors.hasOwnProperty(refStatus)) {
  theTitle = refColors[refStatus].title;
  cssClass = `fa fa-circle ${refColors[refStatus].class}`;
}
console.log(cssClass);
console.log(theTitle);

/* ... */
var refStatus = "2"; //articulos[i].status;
/*Valores por defecto*/
var theTitle = "Item inactivo";
var cssClass = "dot";
if (refColors.hasOwnProperty(refStatus)) {
  theTitle = refColors[refStatus].title;
  cssClass = `fa fa-circle ${refColors[refStatus].class}`;
}
console.log(cssClass);
console.log(theTitle);

/* ... */
var refStatus = "3"; //articulos[i].status;
/*Valores por defecto*/
var theTitle = "Item inactivo";
var cssClass = "dot";
if (refColors.hasOwnProperty(refStatus)) {
  theTitle = refColors[refStatus].title;
  cssClass = `fa fa-circle ${refColors[refStatus].class}`;
}
console.log(cssClass);
console.log(theTitle);

/* ... */
var refStatus = "4"; //articulos[i].status;
/*Valores por defecto*/
var theTitle = "Item inactivo";
var cssClass = "dot";
if (refColors.hasOwnProperty(refStatus)) {
  theTitle = refColors[refStatus].title;
  cssClass = `fa fa-circle ${refColors[refStatus].class}`;
}
console.log(cssClass);
console.log(theTitle);

Como ya dije antes, la ventaja de usar un objeto como refColors es colors es que si en un futuro necesitas agregar más opciones, sólo agregas una nueva clave en el objeto, por ejemplo si extendemos el objeto así, tomará los valores indicados cuando el status sea igual a 4:

var refColors = {
  "1": {
    "class": "text-navy",
    "title": "Item activo"
  },
  "2": {
    "class": "text-warning",
    "title": "Ya es por terminarse"
  },
  "3": {
    "class": "text-danger",
    "title": "cantidad en 0"
  },
  "4": {
    "class": "text-primary",
    "title": "Nueva opción añadida"
  }
};

Además, supongamos que otro atributo cualquiera sería cambiante (por ejemplo cualquiera de los atributos data- que tienes). Sólo lo agregas dentro del objeto anidado y lo obtienes de forma dinámica como se hizo con theTitle o con cssClass.

Espero te sirva. Si tienes dudas o problemas para implementarlo, puedes decirlo en comentarios.

1
  • Gracias, por comentar, aplicare lo que me dices, y te mantengo al tanto....Respecto a la api donde se define el status es correcto lo que estoy haciendo? Saludos .
    – cosito
    Commented el 29 nov. 2018 a las 16:26

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.