From 82bdcdfceae6cce0e39c650faa10d06c982d5224 Mon Sep 17 00:00:00 2001
From: Romain Lebbadi-Breteau <romain@lebbadi.fr>
Date: Sun, 5 Feb 2023 09:04:15 -0500
Subject: [PATCH] It was the best of times, it was the worst of times
---
.../controllers/TransactionComponant.tsx | 48 +++++--------------
assets/react/controllers/TransactionList.tsx | 43 ++++++++---------
assets/styles/transaction.css | 9 ++--
templates/base.html.twig | 1 +
4 files changed, 39 insertions(+), 62 deletions(-)
diff --git a/assets/react/controllers/TransactionComponant.tsx b/assets/react/controllers/TransactionComponant.tsx
index 708b67a..935945e 100644
--- a/assets/react/controllers/TransactionComponant.tsx
+++ b/assets/react/controllers/TransactionComponant.tsx
@@ -57,9 +57,8 @@ export default function TransactionComponant(props: {
<div className="flex-row item" id="">
{isEditing ? (
<>
- <div>
- <strong>Lieu : </strong>
- <label htmlFor="location"></label>
+ <div style={{ marginBottom: "10px" }}>
+ <label htmlFor="location" style={{ minWidth: "100px" }}><strong>Lieu : </strong></label>
<input
type="text"
value={location}
@@ -68,7 +67,7 @@ export default function TransactionComponant(props: {
required
/>
</div>
- <div>
+ <div style={{ marginBottom: "10px" }}>
<strong>Description : </strong>
<label htmlFor="description"></label>
<input
@@ -79,7 +78,7 @@ export default function TransactionComponant(props: {
required
/>
</div>
- <div>
+ <div style={{ marginBottom: "10px" }}>
<strong>Categorie : </strong>
<label htmlFor="category"></label>
<datalist id="category_id">
@@ -102,7 +101,7 @@ export default function TransactionComponant(props: {
required
/>
</div>
- <div>
+ <div style={{ marginBottom: "10px" }}>
<strong>Montant : </strong>
<label htmlFor="amount"></label>
<input
@@ -126,7 +125,7 @@ export default function TransactionComponant(props: {
/>
</div>
<div>
- <strong>Revenue : </strong>{" "}
+ <strong>Revenu : </strong>{" "}
<input
type="checkbox"
value={Number(!expense)}
@@ -134,22 +133,11 @@ export default function TransactionComponant(props: {
/>
</div>
<div>
- <strong>Valider : </strong>
- <img
- id="icone"
- src="img/vert.png"
- alt="valider"
- onClick={() => persist()}
- />
+ <strong className="icone" onClick={() => persist()}><i className="fa-solid fa-floppy-disk" />Sauvegarder</strong>
+
</div>
<div>
- <strong>Supprimer : </strong>
- <img
- id="icone"
- src="img/download.png"
- alt="supprimer"
- onClick={() => props.deleteTransaction(props.index)}
- />
+ <strong className="icone" onClick={() => props.deleteTransaction(props.index)}><i className="fa-solid fa-trash-can"></i> Supprimer</strong>
</div>
</>
) : (
@@ -175,7 +163,7 @@ export default function TransactionComponant(props: {
{date}
</div>
<div>
- <strong>Revenue : </strong>{" "}
+ <strong>Revenu : </strong>{" "}
<input
type="checkbox"
disabled
@@ -184,22 +172,10 @@ export default function TransactionComponant(props: {
/>
</div>
<div>
- <strong>Modifier : </strong>
- <img
- id="icone"
- src="img/263087.png"
- alt="peinceau"
- onClick={() => edit()}
- />
+ <strong className="icone" onClick={() => edit()}><i className="fa-solid fa-pencil" /> Modifier</strong>
</div>
<div>
- <strong>Supprimer : </strong>
- <img
- id="icone"
- src="img/download.png"
- alt="peinceau"
- onClick={() => props.deleteTransaction(props.index)}
- />
+ <strong className="icone" onClick={() => props.deleteTransaction(props.index)}><i className="fa-solid fa-trash-can"></i> Supprimer</strong>
</div>
</>
)}
diff --git a/assets/react/controllers/TransactionList.tsx b/assets/react/controllers/TransactionList.tsx
index 3ab3b0f..10c13e2 100644
--- a/assets/react/controllers/TransactionList.tsx
+++ b/assets/react/controllers/TransactionList.tsx
@@ -3,15 +3,18 @@ import APIService, { OptionalTransaction, Transaction } from "../../APIService";
import TransactionComponant from "./TransactionComponant";
const transactionSort = (a: OptionalTransaction, b: OptionalTransaction) => {
- const dateA = new Date(a.date);
- const dateB = new Date(b.date);
+ const dateA = new Date(a.date);
+ const dateB = new Date(b.date);
- if (a.date !== b.date) return dateA.getTime() - dateB.getTime();
- return 0;
+ if (a.date !== b.date) return dateB.getTime() - dateA.getTime();
+ if (a.id === undefined && b.id !== undefined) return -1;
+ if (a.id !== undefined && b.id === undefined) return 1;
+ if (a.id !== b.id) return b.id - a.id;
+ return 0;
}
-export type VersionedOptionalTransaction = OptionalTransaction & {version: number}
-export type VersionedTransaction = Transaction & {version: number}
+export type VersionedOptionalTransaction = OptionalTransaction & { version: number }
+export type VersionedTransaction = Transaction & { version: number }
export default function TransactionList() {
const apiService = new APIService();
@@ -20,13 +23,13 @@ export default function TransactionList() {
);
React.useEffect(() => {
- apiService.list().then((transactions) => setTransactions(transactions.map(tr => ({...tr, version: 0})).sort(transactionSort)));
+ apiService.list().then((transactions) => setTransactions(transactions.map(tr => ({ ...tr, version: 0 })).sort(transactionSort)));
}, []);
const deleteTransaction = (idx: number) => {
const transaction = transactions.splice(idx, 1)[0];
if (transaction.id !== undefined) {
- apiService.delete(transaction.id);
+ apiService.delete(transaction.id);
}
setTransactions(transactions.slice());
};
@@ -34,15 +37,15 @@ export default function TransactionList() {
const saveTransaction = (idx: number, transaction: VersionedTransaction) => {
transactions[idx] = transaction;
if (transaction.id === undefined) apiService.create(transaction).then(result => {
- transactions[idx].category = result.category;
- transactions[idx].id = result.id;
- transactions[idx].version++;
- setTransactions(transactions.slice().sort(transactionSort));
+ transactions[idx].category = result.category;
+ transactions[idx].id = result.id;
+ transactions[idx].version++;
+ setTransactions(transactions.slice().sort(transactionSort));
});
else apiService.update(transaction).then(category => {
- transactions[idx].category = category;
- transactions[idx].version++;
- setTransactions(transactions.slice().sort(transactionSort));
+ transactions[idx].category = category;
+ transactions[idx].version++;
+ setTransactions(transactions.slice().sort(transactionSort));
})
}
@@ -51,13 +54,9 @@ export default function TransactionList() {
<div>
<h1>
Mes transactions
- <strong id="btn-ajouter"> Ajouter : </strong><img id="icone"
- src="img/plus.png"
- alt="ajouter"
- onClick={() => {
- setTransactions([{expense: true, category: 'auto-detect', version: 0}, ...transactions]);
- }}
- />
+ <strong onClick={() => {
+ setTransactions([{ expense: true, category: 'auto-detect', version: 0 }, ...transactions]);
+ }} className="icone" id="btn-ajouter" style={{ marginLeft: "20px", paddingRight: "5px" }}> <i className="fa-solid fa-plus" /> Ajouter </strong>
</h1>
</div>
<div style={{ display: "flex", flexDirection: "column", flexGrow: 1 }}>
diff --git a/assets/styles/transaction.css b/assets/styles/transaction.css
index 79cfd66..078df5d 100644
--- a/assets/styles/transaction.css
+++ b/assets/styles/transaction.css
@@ -58,14 +58,15 @@
.category {
color: orange;
}
-
- #icone {
+
+ .icone {
cursor: pointer;
border: 1px black solid;
- width: 25px;
- height: 25px;
+ padding: 5px;
}
.small-margin {
margin-bottom: 10px;
+ margin-left: 20px;
+ margin-right: 20px;
}
\ No newline at end of file
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 6959879..2583eda 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -8,6 +8,7 @@
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet">
{% endblock %}
{% block javascripts %}
--
GitLab