Added ability to choose type and set image link

admin/index.php

@@ -2,20 +2,26 @@
 $relativePath = "../";
 ob_start();
 ?>
+<tr>
+    <th class="name-column">Nom</th>
+    <th class="quantity-column">Quantité</th>
+    <th class="price-column">Prix</th>
+    <th class="code-column">Code Barre</th>
+    <th class="type-column">Type</th>
+    <th class="image-column">Image</th>
+    <th class="actions-column">Actions</th>
+</tr>
+<?php
+$tableHeader = ob_get_clean();
+ob_start();
+?>
 <div class="stock-container">
 
     <h1 class="text-center">Gestion des Stocks</h1>
     <h2 class="text-center">Ajouter un article</h2>
     <table>
         <tbody>
-        <tr>
-            <th class="name-column">Nom</th>
-            <th>Quantité</th>
-            <th>Prix</th>
-            <th class="code-column">Code Barre</th>
-            <th class="image-column">Image</th>
-            <th class="actions-column">Actions</th>
-        </tr>
+        <?= $tableHeader ?>
         <tr>
             <td>
                 <input type="text" class="form-control" id="nameInput" placeholder="Nom">
@@ -28,9 +34,12 @@ ob_start();
             </td>
             <td>
                 <input type="text" class="form-control" id="codeInput" placeholder="Code Barre">
+            </td>
+            <td id="typeCheckboxesCell">
+
             </td>
             <td>
-                <button class="btn btn-primary">Importer</button>
+                <input type="text" class="form-control" id="imageInput" placeholder="Lien Image">
             </td>
             <td>
                 <button type="submit" class="btn btn-success" onclick="addNewItem()"><i class="fas fa-check"></i></button>
@@ -43,14 +52,7 @@ ob_start();
     <h2 class="text-center">Liste d'articles</h2>
     <table id="stockTable">
         <tbody>
-        <tr>
-            <th class="name-column">Nom</th>
-            <th>Quantité</th>
-            <th>Prix</th>
-            <th class="code-column">Code Barre</th>
-            <th class="image-column">Image</th>
-            <th class="actions-column">Actions</th>
-        </tr>
+        <?= $tableHeader ?>
         </tbody>
     </table>
 </div>

assets/css/stock.css

@@ -3,12 +3,25 @@ table {
     margin-bottom: 20px;
 }
 
-.name-column {
-    width : 30%;
+.quantity-column, .price-column {
+    width: 150px;
 }
 
 .code-column {
-    width: 20%;
+    width: 200px;
+}
+
+.type-column {
+    width: 200px;
+    overflow-x: auto;
+}
+
+.image-column {
+    width: 150px;
+}
+
+.actions-column {
+    width: 100px;
 }
 
 .stock-container {
@@ -16,10 +29,7 @@ table {
     margin: 50px auto auto auto;
 }
 
-.actions-column {
-    width: 100px;
+#stockTable tr {
+    border-bottom: 1px solid #dedede;
 }
 
-.image-column {
-    width: 150px;
-}

assets/js/stock.js

@@ -1,9 +1,17 @@
+let defaultTypes = [
+    'Nouveau',
+    'Alimentaire',
+    'Boissons',
+    'Utilitaires'
+];
+
 let defaultStock = [
     {
         name: 'Granola',
         quantity: '2',
         price: '1.3',
         code: '7622210601988',
+        image : 'https://cookieandkate.com/images/2015/10/granola-mixed-in-bowl.jpg',
         type: [
             'Alimentaire',
         ]
@@ -15,6 +23,7 @@ let currentDataset = [];
 $(document).ready(function () {
     currentDataset = defaultStock;
     generateTable(currentDataset);
+    generateTypeCheckboxes();
 });
 
 
@@ -24,7 +33,6 @@ function generateTable(dataset) {
     }
 }
 
-
 function generateLine(item) {
     $.selector_cache('#stockTable').append(
         '<tr id="row_' + item.code + '">' +
@@ -32,13 +40,32 @@ function generateLine(item) {
         '<td>' + item.quantity + '</td>' +
         '<td>' + item.price + '</td>' +
         '<td>' + item.code + '</td>' +
-        '<td><a href="">LINK</a></td>' +
+        '<td><ul id="typeList_' + item.code + '"></ul></td>' +
+        '<td><a href="' + item.image + '" target="_blank">LINK</a></td>' +
         '<td>' +
         '<button class="btn btn-danger" id="delete_' + item.code + '" onclick="deleteItem(this)"><i class="fas fa-times"></i></button>' +
         '<button class="btn btn-primary" id="edit_' + item.code + '" onclick="editItem(this)"><i class="fas fa-edit"></i></button>' +
         '</td>' +
         '</tr>'
     );
+    // Fill in the type cell
+    for (let i = 0; i < item.type.length; i++) {
+        $('#typeList_' + item.code).append(
+            '<li>' + item.type[i] + '</li>'
+        );
+    }
+}
+
+function generateTypeCheckboxes() {
+    for (let i = 0; i < defaultTypes.length; i++) {
+        let id = 'typeCheck_' + defaultTypes[i];
+        $('#typeCheckboxesCell').append(
+            '<div class="form-check">' +
+            '<input type="checkbox" class="form-check-input" id="' + id + '">' +
+            '<label class="form-check-label" for="' + id + '">' + defaultTypes[i] + '</label>' +
+            '</div>'
+        );
+    }
 }
 
 function getItemOfCode(code) {
@@ -52,13 +79,29 @@ function getItemOfCode(code) {
     return item;
 }
 
+function addNewItem() {
+    if (isItemInputFilled()) {
+        let item = {
+            name: $.selector_cache('#nameInput').val(),
+            quantity: $.selector_cache('#quantityInput').val(),
+            price: $.selector_cache('#priceInput').val(),
+            code: $.selector_cache('#codeInput').val(),
+            type: getTypesChecked(),
+            image: $.selector_cache('#imageInput').val(),
+        };
+        if (isCodeAvailable(item.code)) {
+            setEditFieldValues('', '', '', '', [], '');
+            currentDataset.push(item);
+            generateLine(item);
+        }
+    }
+}
 
 function editItem(elem) {
     if (isItemInputEmpty()) {
         let code = elem.id.replace('edit_', '');
         let item = getItemOfCode(code);
-        console.log(item);
-        setEditFieldValues(item.name, item.quantity, item.price, item.code);
+        setEditFieldValues(item.name, item.quantity, item.price, item.code, item.type, item.image);
         removeItemFromList(item); // Move the item in the edit fields
     }
 }
@@ -66,7 +109,6 @@ function editItem(elem) {
 function deleteItem(elem) {
     let code = elem.id.replace('delete_', '');
     let item = getItemOfCode(code);
-    console.log(item);
     removeItemFromList(item);
 }
 
@@ -75,28 +117,60 @@ function removeItemFromList(item) {
     $('#row_' + item.code).remove();
 }
 
-function setEditFieldValues(name, quantity, price, code) {
+function getTypesChecked() {
+    let types = [];
+    for (let i = 0; i < defaultTypes.length; i++) {
+        let id = 'typeCheck_' + defaultTypes[i];
+        if ($('#' + id).is(':checked')) {
+            types.push(defaultTypes[i]);
+        }
+    }
+    return types;
+}
+
+function setTypesChecked(types) {
+    for (let i = 0; i < defaultTypes.length; i++) {
+        let id = 'typeCheck_' + defaultTypes[i];
+        $('#' + id).prop('checked', types.indexOf(defaultTypes[i]) !== -1);
+    }
+    return types;
+}
+
+function setEditFieldValues(name, quantity, price, code, type, image) {
     $.selector_cache('#nameInput').val(name);
     $.selector_cache('#quantityInput').val(quantity);
     $.selector_cache('#priceInput').val(price);
     $.selector_cache('#codeInput').val(code);
+    $.selector_cache('#codeInput').val(code);
+    setTypesChecked(type);
+    $.selector_cache('#imageInput').val(image);
+}
+
+function isCodeAvailable (code) {
+    let isAvailable = true;
+    for (let i = 0; i < currentDataset.length; i++) {
+        if (currentDataset[i].code === code) {
+            isAvailable = false;
+            break;
+        }
+    }
+    return isAvailable;
 }
 
 function isItemInputEmpty() {
     return $.selector_cache('#nameInput').val() === '' &&
         $.selector_cache('#quantityInput').val() === '' &&
         $.selector_cache('#priceInput').val() === '' &&
-        $.selector_cache('#codeInput').val() === '';
+        $.selector_cache('#codeInput').val() === '' &&
+        $.selector_cache('#imageInput').val() === '' &&
+        getTypesChecked().length === 0;
 }
 
-function addNewItem() {
-    let item = {
-        name: $.selector_cache('#nameInput').val(),
-        quantity: $.selector_cache('#quantityInput').val(),
-        price: $.selector_cache('#priceInput').val(),
-        code: $.selector_cache('#codeInput').val(),
-    };
-    setEditFieldValues('', '', '', '');
-    currentDataset.push(item);
-    generateLine(item);
+function isItemInputFilled() {
+    return $.selector_cache('#nameInput').val() !== '' &&
+        $.selector_cache('#quantityInput').val() !== '' &&
+        $.selector_cache('#priceInput').val() !== '' &&
+        $.selector_cache('#codeInput').val() !== '' &&
+        $.selector_cache('#imageInput').val() !== '' &&
+        getTypesChecked().length > 0;
 }