Improved stock management

assets/css/stock.css

@@ -1,17 +1,20 @@
 #dataList {
-    display: grid;
+    display: flex;
+    flex-wrap: wrap;
     grid-template-columns: auto auto ;
     width: 100%;
 }
 
 .img-container {
     display: flex;
-    width: 100%;
+    width: 100px;
+    height: 100px;
+    margin-bottom: 5px;
 }
 
 .grid-item {
     display: flex;
-    padding: 5px;
+    margin: 10px;
 }
 
 
@@ -25,13 +28,19 @@
     width: 100px;
 }
 
-.grid-container p {
+.grid-container p, .grid-container h5 {
     text-align: center;
 }
 
+.grid-container h5 {
+    overflow: hidden;
+}
+
 .grid-container img {
-    width : 100px;
     margin: auto;
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
 }
 
 .button-container {

assets/js/stock.js

@@ -2,31 +2,31 @@ let listContainer = $("#dataList");
 let displayedItems = [];
 let fetchedData = {};
 
-let currentMode = "sell";
+let currentMode = "buy";
 
-let sellCLass = 'btn-danger';
+let sellClass = 'btn-danger';
 let buyClass = 'btn-success';
 
 $(document).ready(async function () {
-    fetchedData = await AjaxManager.getAll();
+    await generateList();
+
+    $('#buyButton').addClass(buyClass);
+    $('#saveButton').addClass(buyClass);
 
-    $('#sellButton').addClass(sellCLass);
-    $('#saveButton').addClass(sellCLass);
 
-    generateList();
     $('#buyButton').on('click', function () {
         if (!$(this).hasClass(buyClass)) {
             $(this).addClass(buyClass);
-            $('#sellButton').removeClass(sellCLass);
-            $('#saveButton').removeClass(sellCLass).addClass(buyClass);
+            $('#sellButton').removeClass(sellClass);
+            $('#saveButton').removeClass(sellClass).addClass(buyClass);
             currentMode = "buy";
         }
     });
     $('#sellButton').on('click', function () {
-        if (!$(this).hasClass(sellCLass)) {
-            $(this).addClass(sellCLass);
+        if (!$(this).hasClass(sellClass)) {
+            $(this).addClass(sellClass);
             $('#buyButton').removeClass(buyClass);
-            $('#saveButton').removeClass(buyClass).addClass(sellCLass);
+            $('#saveButton').removeClass(buyClass).addClass(sellClass);
             currentMode = "sell";
         }
     });
@@ -51,8 +51,9 @@ $(document).ready(async function () {
             buttons: {
                 formSubmit: {
                     text: 'Confirmer',
-                    action: function () {
-                        window.location.reload();
+                    action: async function () {
+                        await AjaxManager.saveStockChange(getFormattedValues(values), currentMode === "sell");
+                        await generateList();
                     }
                 },
                 cancel: {
@@ -60,24 +61,37 @@ $(document).ready(async function () {
                 }
             }
         });
-        AjaxManager.saveStockChange(getFormattedValues(values), currentMode === "sell");
     });
 });
 
 function getListItem(item) {
+    const inputId = 'stockDiffInput' + item['id'];
+    const labelId = 'stockDiffLabel' + item['id'];
     return (
         '<div class="grid-item">' +
         '<div class="grid-container">' +
+        '<div class="img-container">' +
         '<img class="list-image" src="../uploaded_images/' + item['id'] + '.jpg"/>' +
-        '<p>' + item['name'] + '</p>' +
-        '<p>Quantité : ' + item['quantity'] + '</p>' +
-        '<input placeholder="Nombre" type="number" value="0" class="form-control"/>' +
+        '</div>' +
+        '<h5>' + item['name'] + '</h5>' +
+        '<p>Quantité : <strong>' + item['quantity'] + '</strong></p>' +
+        '<label for="' + inputId + '" id="' + labelId + '">À Ajouter :</label>' +
+        '<input id="' + inputId + '" placeholder="Nombre" type="number" value="0" class="form-control" onchange="onStockDiffInputChange(this)"/>' +
         '</div>' +
         '</div>');
 }
 
+function onStockDiffInputChange(input) {
+    if ($(input).val() < 0 || isNaN(parseInt($(input).val()))) {
+        $(input).val(0);
+    }
+}
 
-function generateList() {
+
+async function generateList() {
+    fetchedData = await AjaxManager.getAll();
+    displayedItems = [];
+    listContainer.html('');
     for (let i = 0; i < fetchedData['articles'].length; i++) {
         let listItem = getListItem(fetchedData['articles'][i]);
         displayedItems.push($(listItem));