Browse Source

Added ability to choose type and set image link

keplyx 2 years ago
parent
commit
68029d4eb4
3 changed files with 128 additions and 42 deletions
  1. 19
    17
      admin/index.php
  2. 18
    8
      assets/css/stock.css
  3. 91
    17
      assets/js/stock.js

+ 19
- 17
admin/index.php View File

@@ -2,20 +2,26 @@
2 2
 $relativePath = "../";
3 3
 ob_start();
4 4
 ?>
5
+<tr>
6
+    <th class="name-column">Nom</th>
7
+    <th class="quantity-column">Quantité</th>
8
+    <th class="price-column">Prix</th>
9
+    <th class="code-column">Code Barre</th>
10
+    <th class="type-column">Type</th>
11
+    <th class="image-column">Image</th>
12
+    <th class="actions-column">Actions</th>
13
+</tr>
14
+<?php
15
+$tableHeader = ob_get_clean();
16
+ob_start();
17
+?>
5 18
 <div class="stock-container">
6 19
 
7 20
     <h1 class="text-center">Gestion des Stocks</h1>
8 21
     <h2 class="text-center">Ajouter un article</h2>
9 22
     <table>
10 23
         <tbody>
11
-        <tr>
12
-            <th class="name-column">Nom</th>
13
-            <th>Quantité</th>
14
-            <th>Prix</th>
15
-            <th class="code-column">Code Barre</th>
16
-            <th class="image-column">Image</th>
17
-            <th class="actions-column">Actions</th>
18
-        </tr>
24
+        <?= $tableHeader ?>
19 25
         <tr>
20 26
             <td>
21 27
                 <input type="text" class="form-control" id="nameInput" placeholder="Nom">
@@ -29,8 +35,11 @@ ob_start();
29 35
             <td>
30 36
                 <input type="text" class="form-control" id="codeInput" placeholder="Code Barre">
31 37
             </td>
38
+            <td id="typeCheckboxesCell">
39
+
40
+            </td>
32 41
             <td>
33
-                <button class="btn btn-primary">Importer</button>
42
+                <input type="text" class="form-control" id="imageInput" placeholder="Lien Image">
34 43
             </td>
35 44
             <td>
36 45
                 <button type="submit" class="btn btn-success" onclick="addNewItem()"><i class="fas fa-check"></i></button>
@@ -43,14 +52,7 @@ ob_start();
43 52
     <h2 class="text-center">Liste d'articles</h2>
44 53
     <table id="stockTable">
45 54
         <tbody>
46
-        <tr>
47
-            <th class="name-column">Nom</th>
48
-            <th>Quantité</th>
49
-            <th>Prix</th>
50
-            <th class="code-column">Code Barre</th>
51
-            <th class="image-column">Image</th>
52
-            <th class="actions-column">Actions</th>
53
-        </tr>
55
+        <?= $tableHeader ?>
54 56
         </tbody>
55 57
     </table>
56 58
 </div>

+ 18
- 8
assets/css/stock.css View File

@@ -3,23 +3,33 @@ table {
3 3
     margin-bottom: 20px;
4 4
 }
5 5
 
6
-.name-column {
7
-    width : 30%;
6
+.quantity-column, .price-column {
7
+    width: 150px;
8 8
 }
9 9
 
10 10
 .code-column {
11
-    width: 20%;
11
+    width: 200px;
12 12
 }
13 13
 
14
-.stock-container {
15
-    width: 90%;
16
-    margin: 50px auto auto auto;
14
+.type-column {
15
+    width: 200px;
16
+    overflow-x: auto;
17
+}
18
+
19
+.image-column {
20
+    width: 150px;
17 21
 }
18 22
 
19 23
 .actions-column {
20 24
     width: 100px;
21 25
 }
22 26
 
23
-.image-column {
24
-    width: 150px;
27
+.stock-container {
28
+    width: 90%;
29
+    margin: 50px auto auto auto;
30
+}
31
+
32
+#stockTable tr {
33
+    border-bottom: 1px solid #dedede;
25 34
 }
35
+

+ 91
- 17
assets/js/stock.js View File

@@ -1,9 +1,17 @@
1
+let defaultTypes = [
2
+    'Nouveau',
3
+    'Alimentaire',
4
+    'Boissons',
5
+    'Utilitaires'
6
+];
7
+
1 8
 let defaultStock = [
2 9
     {
3 10
         name: 'Granola',
4 11
         quantity: '2',
5 12
         price: '1.3',
6 13
         code: '7622210601988',
14
+        image : 'https://cookieandkate.com/images/2015/10/granola-mixed-in-bowl.jpg',
7 15
         type: [
8 16
             'Alimentaire',
9 17
         ]
@@ -15,6 +23,7 @@ let currentDataset = [];
15 23
 $(document).ready(function () {
16 24
     currentDataset = defaultStock;
17 25
     generateTable(currentDataset);
26
+    generateTypeCheckboxes();
18 27
 });
19 28
 
20 29
 
@@ -24,7 +33,6 @@ function generateTable(dataset) {
24 33
     }
25 34
 }
26 35
 
27
-
28 36
 function generateLine(item) {
29 37
     $.selector_cache('#stockTable').append(
30 38
         '<tr id="row_' + item.code + '">' +
@@ -32,13 +40,32 @@ function generateLine(item) {
32 40
         '<td>' + item.quantity + '</td>' +
33 41
         '<td>' + item.price + '</td>' +
34 42
         '<td>' + item.code + '</td>' +
35
-        '<td><a href="">LINK</a></td>' +
43
+        '<td><ul id="typeList_' + item.code + '"></ul></td>' +
44
+        '<td><a href="' + item.image + '" target="_blank">LINK</a></td>' +
36 45
         '<td>' +
37 46
         '<button class="btn btn-danger" id="delete_' + item.code + '" onclick="deleteItem(this)"><i class="fas fa-times"></i></button>' +
38 47
         '<button class="btn btn-primary" id="edit_' + item.code + '" onclick="editItem(this)"><i class="fas fa-edit"></i></button>' +
39 48
         '</td>' +
40 49
         '</tr>'
41 50
     );
51
+    // Fill in the type cell
52
+    for (let i = 0; i < item.type.length; i++) {
53
+        $('#typeList_' + item.code).append(
54
+            '<li>' + item.type[i] + '</li>'
55
+        );
56
+    }
57
+}
58
+
59
+function generateTypeCheckboxes() {
60
+    for (let i = 0; i < defaultTypes.length; i++) {
61
+        let id = 'typeCheck_' + defaultTypes[i];
62
+        $('#typeCheckboxesCell').append(
63
+            '<div class="form-check">' +
64
+            '<input type="checkbox" class="form-check-input" id="' + id + '">' +
65
+            '<label class="form-check-label" for="' + id + '">' + defaultTypes[i] + '</label>' +
66
+            '</div>'
67
+        );
68
+    }
42 69
 }
43 70
 
44 71
 function getItemOfCode(code) {
@@ -52,13 +79,29 @@ function getItemOfCode(code) {
52 79
     return item;
53 80
 }
54 81
 
82
+function addNewItem() {
83
+    if (isItemInputFilled()) {
84
+        let item = {
85
+            name: $.selector_cache('#nameInput').val(),
86
+            quantity: $.selector_cache('#quantityInput').val(),
87
+            price: $.selector_cache('#priceInput').val(),
88
+            code: $.selector_cache('#codeInput').val(),
89
+            type: getTypesChecked(),
90
+            image: $.selector_cache('#imageInput').val(),
91
+        };
92
+        if (isCodeAvailable(item.code)) {
93
+            setEditFieldValues('', '', '', '', [], '');
94
+            currentDataset.push(item);
95
+            generateLine(item);
96
+        }
97
+    }
98
+}
55 99
 
56 100
 function editItem(elem) {
57 101
     if (isItemInputEmpty()) {
58 102
         let code = elem.id.replace('edit_', '');
59 103
         let item = getItemOfCode(code);
60
-        console.log(item);
61
-        setEditFieldValues(item.name, item.quantity, item.price, item.code);
104
+        setEditFieldValues(item.name, item.quantity, item.price, item.code, item.type, item.image);
62 105
         removeItemFromList(item); // Move the item in the edit fields
63 106
     }
64 107
 }
@@ -66,7 +109,6 @@ function editItem(elem) {
66 109
 function deleteItem(elem) {
67 110
     let code = elem.id.replace('delete_', '');
68 111
     let item = getItemOfCode(code);
69
-    console.log(item);
70 112
     removeItemFromList(item);
71 113
 }
72 114
 
@@ -75,28 +117,60 @@ function removeItemFromList(item) {
75 117
     $('#row_' + item.code).remove();
76 118
 }
77 119
 
78
-function setEditFieldValues(name, quantity, price, code) {
120
+function getTypesChecked() {
121
+    let types = [];
122
+    for (let i = 0; i < defaultTypes.length; i++) {
123
+        let id = 'typeCheck_' + defaultTypes[i];
124
+        if ($('#' + id).is(':checked')) {
125
+            types.push(defaultTypes[i]);
126
+        }
127
+    }
128
+    return types;
129
+}
130
+
131
+function setTypesChecked(types) {
132
+    for (let i = 0; i < defaultTypes.length; i++) {
133
+        let id = 'typeCheck_' + defaultTypes[i];
134
+        $('#' + id).prop('checked', types.indexOf(defaultTypes[i]) !== -1);
135
+    }
136
+    return types;
137
+}
138
+
139
+function setEditFieldValues(name, quantity, price, code, type, image) {
79 140
     $.selector_cache('#nameInput').val(name);
80 141
     $.selector_cache('#quantityInput').val(quantity);
81 142
     $.selector_cache('#priceInput').val(price);
82 143
     $.selector_cache('#codeInput').val(code);
144
+    $.selector_cache('#codeInput').val(code);
145
+    setTypesChecked(type);
146
+    $.selector_cache('#imageInput').val(image);
147
+}
148
+
149
+function isCodeAvailable (code) {
150
+    let isAvailable = true;
151
+    for (let i = 0; i < currentDataset.length; i++) {
152
+        if (currentDataset[i].code === code) {
153
+            isAvailable = false;
154
+            break;
155
+        }
156
+    }
157
+    return isAvailable;
83 158
 }
84 159
 
85 160
 function isItemInputEmpty() {
86 161
     return $.selector_cache('#nameInput').val() === '' &&
87 162
         $.selector_cache('#quantityInput').val() === '' &&
88 163
         $.selector_cache('#priceInput').val() === '' &&
89
-        $.selector_cache('#codeInput').val() === '';
164
+        $.selector_cache('#codeInput').val() === '' &&
165
+        $.selector_cache('#imageInput').val() === '' &&
166
+        getTypesChecked().length === 0;
90 167
 }
91 168
 
92
-function addNewItem() {
93
-    let item = {
94
-        name: $.selector_cache('#nameInput').val(),
95
-        quantity: $.selector_cache('#quantityInput').val(),
96
-        price: $.selector_cache('#priceInput').val(),
97
-        code: $.selector_cache('#codeInput').val(),
98
-    };
99
-    setEditFieldValues('', '', '', '');
100
-    currentDataset.push(item);
101
-    generateLine(item);
169
+function isItemInputFilled() {
170
+    return $.selector_cache('#nameInput').val() !== '' &&
171
+        $.selector_cache('#quantityInput').val() !== '' &&
172
+        $.selector_cache('#priceInput').val() !== '' &&
173
+        $.selector_cache('#codeInput').val() !== '' &&
174
+        $.selector_cache('#imageInput').val() !== '' &&
175
+        getTypesChecked().length > 0;
102 176
 }

Loading…
Cancel
Save