date picker i zmiany wizualne tworzenia transakcji
This commit is contained in:
Kamil
parent
e1ba0c5c24
commit
af7380029b
32
firm/src/components/DatePicker.js
Normal file
32
firm/src/components/DatePicker.js
Normal file
@ -0,0 +1,32 @@
|
||||
const DatePicker = ({ value, onChange, name, className, minDate, maxDate }) => {
|
||||
const handleChange = (e) => {
|
||||
const newValue = e.target.value;
|
||||
const newDate = new Date(newValue);
|
||||
|
||||
if (isNaN(newDate.getTime())) {
|
||||
//alert('Podano niepoprawną datę');
|
||||
return;
|
||||
}
|
||||
|
||||
onChange(e);
|
||||
};
|
||||
|
||||
const getCurrentDate = () => {
|
||||
const now = new Date();
|
||||
const offset = now.getTimezoneOffset() * 60000;
|
||||
const localISOTime = new Date(now.getTime() - offset).toISOString().slice(0, 16);
|
||||
return localISOTime;
|
||||
};
|
||||
|
||||
return (
|
||||
<input
|
||||
type="datetime-local"
|
||||
name={name}
|
||||
value={value || getCurrentDate()}
|
||||
onChange={handleChange}
|
||||
className={className}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default DatePicker;
|
||||
@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Select from 'react-select';
|
||||
import {ReactComponent as MinusIcon} from "../icons/minus-icon.svg"
|
||||
import DatePicker from './DatePicker';
|
||||
|
||||
const DodawanieTransakcji = () => {
|
||||
const [error, setError] = useState(null);
|
||||
@ -10,7 +12,7 @@ const DodawanieTransakcji = () => {
|
||||
date: '',
|
||||
employeeId: '',
|
||||
paymentType: '',
|
||||
discount: '',
|
||||
discount: 0,
|
||||
description: '',
|
||||
transactionProducts: [
|
||||
{
|
||||
@ -62,6 +64,7 @@ const DodawanieTransakcji = () => {
|
||||
const handleInputChange = (event) => {
|
||||
const { name, value } = event.target;
|
||||
setNewTransaction({ ...newTransaction, [name]: value });
|
||||
console.log(`po: ${name}, ${value}`)
|
||||
};
|
||||
const handleCancel = () => {
|
||||
navigate('/transakcje');
|
||||
@ -160,37 +163,55 @@ const DodawanieTransakcji = () => {
|
||||
<h2 className="text-2xl font-bold mb-6 text-gray-800">Dodaj nową transakcję</h2>
|
||||
|
||||
{error && <p className="text-red-500 mb-4">{error}</p>}
|
||||
<div className="mb-4 flex items-center space-x-4">
|
||||
<div>
|
||||
<label className="block mb-2 text-gray-700 font-medium">Data transakcji</label>
|
||||
<DatePicker
|
||||
value={newTransaction.date}
|
||||
onChange={handleInputChange}
|
||||
name="date"
|
||||
className="flex-1 mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
maxDate="2099-12-31T23:59"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block mb-2 text-gray-700 font-medium">Nr pracownika</label>
|
||||
<input
|
||||
type="number"
|
||||
name="employeeId"
|
||||
value={newTransaction.employeeId}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Nr pracownika"
|
||||
className="flex mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/*<input
|
||||
type="datetime-local"
|
||||
name="date"
|
||||
value={newTransaction.date}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Data"
|
||||
className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
|
||||
<input
|
||||
type="number"
|
||||
name="employeeId"
|
||||
value={newTransaction.employeeId}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Nr. Pracownika"
|
||||
className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
|
||||
/>*/}
|
||||
<label className="block mb-2 text-gray-700 font-medium">Produkty transakcji</label>
|
||||
<div className="border border-gray-300 rounded-lg shadow-sm p-4 h-80 overflow-y-scroll">
|
||||
{isLoading ? (
|
||||
<div className="text-center">Ładowanie produktów...</div>
|
||||
) : (
|
||||
<>
|
||||
{newTransaction.transactionProducts.map((product, index) => (
|
||||
<div key={index} className="mb-4">
|
||||
<div key={index} className="mb-4 flex items-center space-x-4">
|
||||
<Select
|
||||
name={`productName-${index}`}
|
||||
value={products.find(option => option.value === product.productID)}
|
||||
onChange={(selectedOption) => handleProductChange(index, selectedOption)}
|
||||
options={products}
|
||||
className="block w-full mb-2"
|
||||
className="flex-1"
|
||||
placeholder="Wybierz produkt..."
|
||||
/>
|
||||
<input
|
||||
@ -203,13 +224,19 @@ const DodawanieTransakcji = () => {
|
||||
setNewTransaction({ ...newTransaction, transactionProducts: updatedTransactionProducts });
|
||||
}}
|
||||
placeholder="Ilość"
|
||||
className="block w-full mb-2 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="w-24 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<button
|
||||
{/*<button
|
||||
onClick={() => handleRemoveProduct(index)}
|
||||
className="bg-gradient-to-r from-red-500 to-red-700 text-white py-2 px-4 rounded-lg hover:from-red-600 hover:to-red-800 transition"
|
||||
>
|
||||
Usuń
|
||||
</button>*/}
|
||||
<button
|
||||
onClick={handleRemoveProduct}
|
||||
className="relative flex items-center justify-center w-10 h-10 rounded-full text-gray-500 hover:text-red-600 hover:bg-red-100 active:bg-red-200 transition focus:outline-none"
|
||||
>
|
||||
<MinusIcon className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
@ -222,16 +249,56 @@ const DodawanieTransakcji = () => {
|
||||
>
|
||||
Dodaj produkt
|
||||
</button>
|
||||
|
||||
<input
|
||||
</div>
|
||||
{/*<input
|
||||
type="text"
|
||||
name="paymentType"
|
||||
value={newTransaction.paymentType}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Sposób płatności"
|
||||
className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>*/}
|
||||
<div className="mt-6 flex justify-between">
|
||||
<div className="mb-4">
|
||||
<label className="block mb-2 text-gray-700 font-medium">Metoda płatności</label>
|
||||
<div className="flex space-x-4">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentType"
|
||||
value="BLIK"
|
||||
checked={newTransaction.paymentType === "BLIK"}
|
||||
onChange={handleInputChange}
|
||||
className="form-radio h-5 w-5 text-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
|
||||
<span className="ml-2">BLIK</span>
|
||||
</label>
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentType"
|
||||
value="Gotówka"
|
||||
checked={newTransaction.paymentType === "Gotówka"}
|
||||
onChange={handleInputChange}
|
||||
className="form-radio h-5 w-5 text-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="ml-2">Gotówka</span>
|
||||
</label>
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentType"
|
||||
value="Karta płatnicza"
|
||||
checked={newTransaction.paymentType === "Karta płatnicza"}
|
||||
onChange={handleInputChange}
|
||||
className="form-radio h-5 w-5 text-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="ml-2">Karta płatnicza</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="">
|
||||
<label className="block mb-2 text-gray-700 font-medium">Rabat</label>
|
||||
<input
|
||||
type="number"
|
||||
name="discount"
|
||||
@ -239,8 +306,11 @@ const DodawanieTransakcji = () => {
|
||||
onChange={handleInputChange}
|
||||
placeholder="Rabat"
|
||||
className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
/></div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<label className="block mb-2 text-gray-700 font-medium">Opis</label>
|
||||
<input
|
||||
type="text"
|
||||
name="description"
|
||||
@ -249,6 +319,8 @@ const DodawanieTransakcji = () => {
|
||||
placeholder="Opis"
|
||||
className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mt-6 flex justify-between">
|
||||
<button
|
||||
|
||||
Loading…
Reference in New Issue
Block a user