1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
| $(function () { // Quand tout le HTML et la page est prete cela remplace le <body onload="onLoad()">
var ProductTabMateriel = [{ id: 1, name : "Processeur", price: 199.9, quantity: 15 }
, { id: 2, name : "EcranLCD", price: 99.9, quantity: 3 }
, { id: 3, name : "Carte mère", price: 338.14, quantity: 5 }
, { id: 4, name : "Adaptateur VGA-HDMI", price: 7.99, quantity: 2 }
, { id: 5, name : "Carte graphique", price: 449.99, quantity: 4 }
];
var
$Dial_Saisie = $('#dial-matos'),
$Bt_Validation = $('#bt-dial-valid'),
$intitule = $('#intitule'),
$prix = $('#prix'),
$quantite = $('#quantite')
;
$.each(ProductTabMateriel, function (Idx, Matos) {
Table_Product_Ajout(Matos.id, Matos.name, Matos.price, Matos.quantity)
});
function Table_Product_Ajout(id, name, price, Qte) {
var nvTR = '<tr><td>' + name;
nvTR += '</td><td>' + price;
nvTR += '</td><td>' + Qte;
nvTR += '</td><td><button class="Modif" data-ref="' + id;
nvTR += '">Modifier</button></td></tr>';
$('#MaterialTableId > tbody:last').append(nvTR);
}
$Dial_Saisie.dialog({ // on prévient jQuery UI que ce truc va servir de Dialogue
autoOpen: false,
title: "",
height: 250,
width: 450,
margin: 0,
padding: 0,
modal: true
});
// ajout d'une ligne matérielle (lancement dialogue)
$("#bt-Ajout").on("click", function () {
$("#dial-matos > form")[0].reset();
$Bt_Validation.data('ref', '-1'); // valeur négative permet de savoir que le Dial est utilisé pour un Ajout
Bt_saisie_Status();
$intitule.attr('disabled', false);
$prix.attr('disabled', false);
$("#bt-dial-clear").attr('disabled', false);
$Dial_Saisie.dialog({ title: "Ajouter un matériel" }).dialog("open");
});
// modification d'une ligne matérielle (lancement dialogue)
$('#MaterialTableId').on("click", "button.Modif", function () {
let
refID = parseInt($(this).data('ref')),
idx = ProductTabMateriel.findIndex(Matos => Matos.id === refID);
$intitule.val(ProductTabMateriel[idx].name).attr('disabled', true);
$prix.val(ProductTabMateriel[idx].price).attr('disabled', true);
$quantite.val(ProductTabMateriel[idx].quantity);
$Bt_Validation.data('ref', ProductTabMateriel[idx].id);
$("#bt-dial-clear").attr('disabled', true);
Bt_saisie_Status();
$Dial_Saisie.dialog({ title: "Modification matériel" }).dialog("open");
});
// Validation de la saisie.... ( sur les 2 Dialogues )
$Bt_Validation.on("click", function (e) {
e.preventDefault(); // désactive l'action de rechargement de la page que le "submit" lance automatiquement
var
refID = parseInt($Bt_Validation.data('ref')),
xNom = $intitule.val(),
xPrix = parseFloat($prix.val()),
xQte = parseInt($quantite.val());
if (refID < 0) // ==> mode = ajout d'une ligne dans le tableau
{
refID = Calcul_Nv_ID();
ProductTabMateriel.push({ id: refID, name: xNom, price: xPrix, quantity: xQte });
Table_Product_Ajout(refID, xNom, xPrix, xQte);
}
else // ==> mode = modification d'une ligne dans le tableau ...
{
var
idx = ProductTabMateriel.findIndex(Matos => Matos.id === refID),
xTR = $("#MaterialTableContentId").find("tr").eq(idx)
;
ProductTabMateriel[idx].name = xNom;
ProductTabMateriel[idx].price = xPrix;
ProductTabMateriel[idx].quantity = xQte;
xTR.find('td').eq(0).text(xNom);
xTR.find('td').eq(1).text(xPrix);
xTR.find('td').eq(2).text(xQte);
}
$Dial_Saisie.dialog("close");
});
// controle de saisie sur le dialoque...
$intitule.on('change', Bt_saisie_Status);
$prix.on('change', Bt_saisie_Status);
$quantite.on('change', Bt_saisie_Status);
$Dial_Saisie.keyup(Bt_saisie_Status).keyup();
$('#bt-dial-clear').on("click", function (e) {
$Bt_Validation.attr('disabled', true);
});
// gestion du On / Off du bouton de saisie
function Bt_saisie_Status() {
var
NoValid = $Dial_Saisie.find('input:invalid').length,
Status = (!$intitule.val() || !$prix.val() || !$quantite.val() || NoValid > 0);
$Bt_Validation.attr('disabled', Status);
}
// fournisseur d`ID
function Calcul_Nv_ID() {
let iRef = ProductTabMateriel.map(x => x.id).sort((a, b) => a - b).findIndex((x, i) => x > i);
if (iRef < 0) iRef = ProductTabMateriel.length;
return iRef;
}
}); /// jQuery |
