Skip to content

Commit 4b84cf6

Browse files
author
mac
committed
feat(transaction): add validation rules for transaction form, get gategorie id, delete testData file
1 parent 7a9eee7 commit 4b84cf6

5 files changed

Lines changed: 137 additions & 440 deletions

File tree

backend-nodejs/api/models/transactionsModel.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const getTransactions = (clbk, id) => {
66
const q = `SELECT
77
t.transaction_id, t.transaction_type, t.transaction_date,
88
t.transaction_amount, t.transaction_description, t.transaction_payment_mode,
9-
tc.transaction_category_name, tc.transaction_category_icon
9+
tc.transaction_category_id, tc.transaction_category_name, tc.transaction_category_icon
1010
FROM
1111
transactions AS t
1212
LEFT JOIN

frontend-vuejs/src/components/transactions/TransactionModal.vue

Lines changed: 128 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
<input
2525
type="radio"
2626
value="expense"
27-
name="transactiontype"
27+
v-validate="'required'"
28+
name="type"
2829
v-model="transactiontype"
2930
/>
3031
<span>Dépense</span>
@@ -33,71 +34,147 @@
3334
<input
3435
type="radio"
3536
value="income"
36-
name="transactiontype"
37+
v-validate="'required'"
38+
name="type"
3739
v-model="transactiontype"
3840
/>
3941
<span>Revenue</span>
4042
</label>
4143
</div>
44+
<span
45+
v-show="errors.has('type')"
46+
class="helper-text text-danger"
47+
>{{ errors.first('type') }}</span>
4248
</div>
4349
<div class="row">
4450
<div class="col-sm-6">
4551
<div class="md-form">
46-
<input class="md-form-control" type="date" v-model="transactiondate" />
52+
<input
53+
class="md-form-control"
54+
name="date"
55+
v-validate="'required'"
56+
type="date"
57+
v-model="transactiondate"
58+
/>
59+
<span
60+
v-show="errors.has('date')"
61+
class="helper-text"
62+
:data-error="errors.first('date')"
63+
></span>
4764
</div>
4865
</div>
4966
<div class="col-sm-6">
5067
<div class="md-form">
51-
<input class="md-form-control" type="time" v-model="transactiontime" />
68+
<input
69+
class="md-form-control"
70+
name="heure"
71+
v-validate="'required'"
72+
type="time"
73+
v-model="transactiontime"
74+
/>
75+
<span
76+
v-show="errors.has('heure')"
77+
class="helper-text"
78+
:data-error="errors.first('heure')"
79+
></span>
5280
</div>
5381
</div>
5482
</div>
5583
<div class="row">
5684
<div class="col-sm-6">
5785
<div class="md-form">
58-
<select class="md-form-control" v-model="transactioncategory">
59-
<option value>Choisir une catégorie</option>
86+
<select
87+
class="md-form-control"
88+
name="categorie"
89+
v-validate="'required'"
90+
v-model="transactioncategory"
91+
>
92+
<option>Choisir une catégorie</option>
6093
<option
6194
v-for="category in sortedTransactionOptions"
6295
v-bind:value="category.transaction_category_id"
6396
:key="category.transaction_category_id"
6497
>{{ category.transaction_category_name }}</option>
6598
</select>
6699
</div>
100+
<span
101+
v-show="errors.has('categorie')"
102+
class="helper-text"
103+
:data-error="errors.first('categorie')"
104+
></span>
67105
</div>
68106
<div class="col-sm-6">
69107
<div class="md-form">
70108
<input
71109
class="md-form-control"
72110
type="text"
111+
name="montant"
112+
v-validate="'required|regex:[1234567890€]'"
73113
@blur="onBlurHandler"
74114
@focus="onFocusHandler"
75115
placeholder="Entrer le montant"
76116
v-model="transactionamount"
77117
/>
78118
</div>
119+
<span
120+
v-show="errors.has('montant')"
121+
class="helper-text"
122+
:data-error="errors.first('montant')"
123+
></span>
79124
</div>
80125
</div>
81126
<div class="md-form">
82-
<textarea class="md-form-control" v-model="transactiondescription"></textarea>
127+
<textarea
128+
class="md-form-control"
129+
name="description"
130+
v-validate="'required|min:5|max:255'"
131+
v-model="transactiondescription"
132+
></textarea>
83133
<label>description</label>
134+
<span
135+
v-show="errors.has('description')"
136+
class="helper-text"
137+
:data-error="errors.first('description')"
138+
></span>
84139
</div>
85140
<div class="form-group mb-5">
86141
<label>Mode de payment :</label>
87142
<div class="d-flex justify-content-around">
88143
<label class="radio radio-inline radio-primary">
89-
<input type="radio" value="cash" name="paymentmode" v-model="paymentmode" />
144+
<input
145+
type="radio"
146+
value="cash"
147+
v-validate="'required'"
148+
name="payment"
149+
v-model="paymentmode"
150+
/>
90151
<span>En Espèces</span>
91152
</label>
92153
<label class="radio radio-inline radio-primary">
93-
<input type="radio" value="card" name="paymentmode" v-model="paymentmode" />
154+
<input
155+
type="radio"
156+
value="card"
157+
v-validate="'required'"
158+
name="payment"
159+
v-model="paymentmode"
160+
/>
94161
<span>Carte Bancaire</span>
95162
</label>
96163
<label class="radio radio-inline radio-primary">
97-
<input type="radio" value="transfer" name="paymentmode" v-model="paymentmode" />
164+
<input
165+
type="radio"
166+
value="transfer"
167+
v-validate="'required'"
168+
name="payment"
169+
v-model="paymentmode"
170+
/>
98171
<span>Virement</span>
99172
</label>
100173
</div>
174+
<span
175+
v-show="errors.has('payment')"
176+
class="helper-text text-danger"
177+
>{{ errors.first('payment') }}</span>
101178
</div>
102179
</form>
103180
</div>
@@ -142,7 +219,16 @@ export default {
142219
this.createTransaction = create;
143220
});
144221
EventBus.$on("edit-transaction", transaction => {
145-
console.log(transaction);
222+
const selectDate = transaction.transaction_date.split("T");
223+
const selectTime = selectDate[1].split(".");
224+
this.transactionId = transaction.transaction_id;
225+
this.paymentmode = transaction.transaction_payment_mode;
226+
this.transactiontype = transaction.transaction_type;
227+
this.transactiondate = selectDate[0];
228+
this.transactiontime = selectTime[0];
229+
this.transactionamount = transaction.transaction_amount;
230+
this.transactioncategory = transaction.transaction_category_name;
231+
this.transactiondescription = transaction.transaction_description;
146232
this.createTransaction = false;
147233
});
148234
this.$store
@@ -164,12 +250,42 @@ export default {
164250
transactionDescription: this.transactiondescription,
165251
transaction_category_id: this.transactioncategory
166252
};
167-
console.log(transactionData);
253+
this.$validator.validateAll().then(result => {
254+
if (result) {
255+
if (this.createTransaction) {
256+
this._createTransaction(transactionData);
257+
} else {
258+
this._editTransaction(transactionData);
259+
}
260+
} else {
261+
this.$awn.warning("Veuillez saisir des informations valides", {
262+
icons: { warning: "exclamation" }
263+
});
264+
}
265+
});
266+
},
267+
_createTransaction(transactionData) {
168268
this.$store
169269
.dispatch("transactions/createNewTransaction", transactionData)
270+
.then(response => {
271+
this.$store.dispatch("transactions/getAllTransactions");
272+
$("#transactionModalCenter").modal("hide");
273+
this.$awn.success(response.message, {
274+
icons: { success: "check" }
275+
});
276+
});
277+
},
278+
_editTransaction(transactionData) {
279+
const editTransactionData = {
280+
transactionData: transactionData,
281+
id: this.transactionId
282+
};
283+
this.$store
284+
.dispatch("transactions/editTransaction", editTransactionData)
170285
.then(response => {
171286
console.log(response);
172287
this.$store.dispatch("transactions/getAllTransactions");
288+
$("#transactionModalCenter").modal("hide");
173289
this.$awn.success(response.message, {
174290
icons: { success: "check" }
175291
});

frontend-vuejs/src/store/modules/transactions.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@ const actions = {
5959
async editTransaction({ commit }, transaction) {
6060
try {
6161
const response = await axios({
62-
url: `/transactions/${transaction.transaction_id}`,
63-
data: transaction,
62+
url: `/transactions/${transaction.id}`,
63+
data: transaction.transactionData,
6464
method: 'PUT'
6565
});
6666
const { data } = response;

0 commit comments

Comments
 (0)