2-minimalna zmiana działania funkcjonalości oraz poprawki wizualne
This commit is contained in:
Wiktor Szynaka
parent
77c4dc9c36
commit
ec358faf9f
@ -24,7 +24,7 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>FirmTracker</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
@ -15,7 +15,7 @@ const App = () => {
|
||||
<div className="">
|
||||
<NavBar />
|
||||
<div className="flex w-screen">
|
||||
<div className="w-17/100">
|
||||
<div className="w-17/100 bg-gray-200">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div className="w-3/4">
|
||||
|
||||
@ -35,12 +35,13 @@ const Raporty = () => {
|
||||
|
||||
const handleDeleteReport = async (reportId) => {
|
||||
try {
|
||||
await axios.delete(`https://localhost:7039/api/Report/${reportId}`);
|
||||
fetchReports();
|
||||
await axios.delete(`https://localhost:7039/api/Report?${reportId}`);
|
||||
setReports(reports.filter(report => report.id !== reportId)); // Update state after deletion
|
||||
} catch (error) {
|
||||
console.error('Błąd podczas usuwania raportu:', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' };
|
||||
|
||||
@ -9,6 +9,7 @@ const Transakcje = () => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
const [editTransaction, setEditTransaction] = useState(null);
|
||||
const [error, setError] = useState(null);
|
||||
const [newTransaction, setNewTransaction] = useState({
|
||||
id: 2,
|
||||
date: "",
|
||||
@ -17,8 +18,9 @@ const Transakcje = () => {
|
||||
{
|
||||
id: 0,
|
||||
transactionId: 2,
|
||||
productID: "",
|
||||
quantity:""
|
||||
productID: 0,
|
||||
productName: "",
|
||||
quantity: ""
|
||||
}
|
||||
],
|
||||
paymentType: "",
|
||||
@ -32,7 +34,7 @@ const Transakcje = () => {
|
||||
const response = await axios.get('https://localhost:7039/api/Transaction');
|
||||
setTransactions(response.data);
|
||||
} catch (error) {
|
||||
console.error('Błąd podczas pobierania transakcji:', error);
|
||||
console.error('Błąd podczas dodawania transakcji:', error);
|
||||
}
|
||||
};
|
||||
|
||||
@ -53,9 +55,10 @@ const Transakcje = () => {
|
||||
employeeId: "",
|
||||
transactionProducts: [
|
||||
{
|
||||
id: 0,
|
||||
transactionId: 2,
|
||||
productID: "",
|
||||
id: 2,
|
||||
transactionId: 0,
|
||||
productID: 0,
|
||||
productName: "",
|
||||
quantity: ""
|
||||
}
|
||||
],
|
||||
@ -66,6 +69,11 @@ const Transakcje = () => {
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Błąd podczas dodawania transakcji:', error);
|
||||
if (error.response && error.response.data) {
|
||||
setError(error.response.data);
|
||||
} else {
|
||||
setError('Wystąpił nieoczekiwany błąd. Spróbuj ponownie później.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -82,9 +90,10 @@ const Transakcje = () => {
|
||||
transactionProducts: [
|
||||
...newTransaction.transactionProducts,
|
||||
{
|
||||
id: 0,
|
||||
transactionId: 2,
|
||||
productID: "",
|
||||
id: 2,
|
||||
transactionId: 0,
|
||||
productID: 0,
|
||||
productName: "",
|
||||
quantity: ""
|
||||
}
|
||||
]
|
||||
@ -108,20 +117,33 @@ const Transakcje = () => {
|
||||
console.error('Błąd podczas usuwania transakcji:', error);
|
||||
}
|
||||
};
|
||||
const handleEditTransaction = (transaction) => {
|
||||
setEditTransaction(transaction);
|
||||
setIsEditModalOpen(true);
|
||||
};
|
||||
const handleSaveEditedTransaction = async () => {
|
||||
const handleEditTransaction = async (transaction) => {
|
||||
try {
|
||||
// Jeśli transakcja nie jest ustawiona, oznacza to, że chcemy ją tylko edytować
|
||||
if (!editTransaction) {
|
||||
setEditTransaction(transaction);
|
||||
setIsEditModalOpen(true);
|
||||
return; // Przerwij dalsze wykonanie funkcji
|
||||
}
|
||||
|
||||
// Jeśli transakcja jest ustawiona, zapisujemy ją na serwerze
|
||||
await axios.put(`https://localhost:7039/api/Transaction/${editTransaction.id}`, editTransaction);
|
||||
fetchTransactions();
|
||||
setIsEditModalOpen(false);
|
||||
fetchTransactions(); // Pobranie najnowszych danych po udanej aktualizacji
|
||||
setIsEditModalOpen(false); // Zamknięcie modala po udanej aktualizacji
|
||||
setEditTransaction(null); // Wyczyszczenie transakcji po zakończeniu edycji
|
||||
setError(null); // Wyczyszczenie ewentualnego błędu
|
||||
|
||||
} catch (error) {
|
||||
console.error('Błąd podczas edycji transakcji:', error);
|
||||
if (error.response && error.response.data) {
|
||||
setError(error.response.data); // Ustawienie błędu na odpowiedź z serwera
|
||||
} else {
|
||||
setError('Wystąpił nieoczekiwany błąd. Spróbuj ponownie później.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className='p-10 ml-11'>
|
||||
@ -133,6 +155,17 @@ const Transakcje = () => {
|
||||
<img src={plusIcon} alt="" className="w-8 h-8 mr-2" />Dodaj
|
||||
</button>
|
||||
</div>
|
||||
{error && (
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
|
||||
<div className="bg-white p-8 rounded-lg">
|
||||
<h2 className="text-2xl font-bold mb-4">Błąd</h2>
|
||||
<p>{error}</p>
|
||||
<button onClick={() => window.location.reload()} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
|
||||
Zamknij
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{isEditModalOpen && editTransaction && (
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
|
||||
<div className="bg-white p-8 rounded-lg">
|
||||
@ -156,15 +189,15 @@ const Transakcje = () => {
|
||||
{editTransaction.transactionProducts.map((product, index) => (
|
||||
<div key={index}>
|
||||
<input
|
||||
type="number"
|
||||
name={`productID-${index}`}
|
||||
value={product.productID}
|
||||
type="text"
|
||||
name={`productName-${index}`}
|
||||
value={product.productName}
|
||||
onChange={(e) => {
|
||||
const newTransactionProducts = [...editTransaction.transactionProducts];
|
||||
newTransactionProducts[index].productID = e.target.value;
|
||||
newTransactionProducts[index].productName = e.target.value;
|
||||
setEditTransaction({ ...editTransaction, transactionProducts: newTransactionProducts });
|
||||
}}
|
||||
placeholder="ID Produktu"
|
||||
placeholder="Nazwa Produktu"
|
||||
className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"/>
|
||||
<input
|
||||
type="number"
|
||||
@ -206,7 +239,7 @@ const Transakcje = () => {
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
handleSaveEditedTransaction();
|
||||
handleEditTransaction();
|
||||
setIsEditModalOpen(false);
|
||||
}}
|
||||
className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
|
||||
@ -223,7 +256,6 @@ const Transakcje = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{isModalOpen && (
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
|
||||
<div className="bg-white p-8 rounded-lg">
|
||||
@ -247,15 +279,15 @@ const Transakcje = () => {
|
||||
{newTransaction.transactionProducts.map((product, index) => (
|
||||
<div key={index}>
|
||||
<input
|
||||
type="number"
|
||||
name={`productID-${index}`}
|
||||
value={product.productID}
|
||||
type="text"
|
||||
name={`productName-${index}`}
|
||||
value={product.productName}
|
||||
onChange={(e) => {
|
||||
const newTransactionProducts = [...newTransaction.transactionProducts];
|
||||
newTransactionProducts[index].productID = e.target.value;
|
||||
newTransactionProducts[index].productName = e.target.value;
|
||||
setNewTransaction({ ...newTransaction, transactionProducts: newTransactionProducts });
|
||||
}}
|
||||
placeholder="ID Produktu"
|
||||
placeholder="Nazwa Produktu"
|
||||
className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
|
||||
/>
|
||||
<input
|
||||
@ -321,7 +353,7 @@ const Transakcje = () => {
|
||||
</div>
|
||||
)}
|
||||
<div className="w-8/10 mx-auto mt-2">
|
||||
<div className="h-140 overflow-y-auto">
|
||||
<div className="h-screen overflow-y-auto">
|
||||
<table className="w-full border-collapse border border-gray-300">
|
||||
<thead className="bg-gray-200">
|
||||
<tr>
|
||||
@ -374,7 +406,7 @@ const Transakcje = () => {
|
||||
);
|
||||
}
|
||||
|
||||
export default Transakcje
|
||||
export default Transakcje
|
||||
|
||||
|
||||
|
||||
|
||||
@ -183,7 +183,7 @@ const ZarzadzanieProduktami = () => {
|
||||
name="type"
|
||||
value={newProduct.type}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Typ"
|
||||
placeholder="Kategoria"
|
||||
className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg"
|
||||
/>
|
||||
<input
|
||||
@ -210,9 +210,9 @@ const ZarzadzanieProduktami = () => {
|
||||
</div>
|
||||
)}
|
||||
<div className="w-8/10 mx-auto mt-2">
|
||||
<div className="h-140 overflow-y-auto">
|
||||
<table className="w-full border-collapse border border-gray-300">
|
||||
<thead className="bg-gray-200 top-0 z-10">
|
||||
<div className="h-screen overflow-y-auto margin-0">
|
||||
<table className="w-full border-collapse border border-gray-500">
|
||||
<thead className="bg-gray-200 top-0 z-10 sticky">
|
||||
<tr>
|
||||
<th className="border border-gray-300 p-2">ID</th>
|
||||
<th className="border border-gray-300 p-2">Produkt</th>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user