Wyszukiwanie po nazwie :
import React, { useState } from "react";
import axios from "axios";
function Find() {
const [productName, setProductName] = useState("");
const [productData, setProductData] = useState(null);
const handleSearch = async () => {
try {
const encodedProductName = encodeURIComponent(productName);
const response = await axios.get(
`https://localhost:7003/api/InvoceXml/GetProductByName?name=${encodedProductName}`
);
if (response && response.data) {
setProductData(response.data);
}
} catch (error) {
console.error("Wystąpił błąd:", error);
}
};
const handleInputChange = (event) => {
setProductName(event.target.value);
};
return (
<div className="container mt-5">
<div className="row justify-content-center">
<div className="col-6">
<div className="input-group mb-3">
<input
type="text"
className="form-control"
placeholder="Wprowadź nazwę produktu"
value={productName}
onChange={handleInputChange}
/>
<button className="btn btn-primary" type="button" onClick={handleSearch}>Szukaj</button>
</div>
{productData && productData.length > 0 && (
<div className="mt-4">
<p><strong>Wynik:</strong></p>
<table className="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Lp</th>
<th>Nazwa Produktu</th>
<th>Cena</th>
<th>Amount</th>
<th>Tax Vat</th>
<th>Value</th>
<th>Value Tax</th>
<th>invoce Number</th>
</tr>
</thead>
<tbody>
{productData.map((product, index) => (
<tr key={index}>
<td>{product.id}</td>
<td>{product.lp}</td>
<td>{product.nameProduct}</td>
<td>{product.price}</td>
<td>{product.taxVat}</td>
<td>{product.amount}</td>
<td>{product.value}</td>
<td>{product.valueTax}</td>
<td>{product.invoceNumber}</td>
</tr>
))}
</tbody>
</table>
</div>
)}
{productData && productData.length === 0 && (
<p>Nie znaleziono produktów spełniających kryteria wyszukiwania.</p>
)}
</div>
</div>
</div>
);
}
export default Find;
Servis obsługujący Endpoin w API :
public List<Product> FindProductsByName(string productName)
{
// Search for products by exact name (case-sensitive)
var foundProducts = _mssqlConnect.products.Where(p => p.nameProduct.Contains(productName)).ToList();
return foundProducts;
}
Implementacja kasowania po przez podanie ID produktu.
import React, { useState } from "react";
function App() {
const [deleted, setDeleted] = useState(false);
const [productId, setProductId] = useState("");
const handleDeleteProduct = async () => {
try {
const response = await fetch(
`https://localhost:7003/api/InvoceXml/DeleteProductById?id=${productId}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
}
);
if (response.ok) {
setDeleted(true);
console.log("Produkt został pomyślnie usunięty.");
} else {
console.error("Wystąpił problem podczas usuwania produktu.");
}
} catch (error) {
console.error("Wystąpił błąd sieci:", error);
}
};
const handleInputChange = (event) => {
setProductId(event.target.value);
};
return (
<div className="container mt-5">
<div className="row justify-content-center">
<div className="col-6">
<input
type="text"
className="form-control mb-2"
placeholder="Wprowadź ID produktu"
value={productId}
onChange={handleInputChange}
/>
{deleted ? (
<p className="alert alert-success">
Produkt został pomyślnie usunięty.
</p>
) : (
<button onClick={handleDeleteProduct} className="btn btn-danger">
Usuń produkt
</button>
)}
</div>
</div>
</div>
);
}
export default App;
Endpoint odpowiedzialny po stronie APi za kasowanie produktu.
public void DeleteProduct(int productId)
{ // Find the product by its ID
var product = _mssqlConnect.products.Find(productId);
if (product != null)
{ // Remove the product from the database and save changes
_mssqlConnect.products.Remove(product);
_mssqlConnect.SaveChanges();
}
}
Pozycja numer 4 została wykasowana.