blob: 9689d9f981bc9847aa9d74ffb63ae37d211c7b37 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
/*
* OpenBills - Self hosted browser app to generate and keep track of simple invoices
* Version - 0
* Licensed under the MIT license - https://opensource.org/licenses/MIT
*
* Copyright (c) 2021 Vidhu Kant Sharma
*/
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "./../../../styles/datepicker.scss"; // custom datepicker css
import { Person } from "./../../../Interfaces/interfaces";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSync } from '@fortawesome/free-solid-svg-icons';
import "./../Form.scss";
import SelectClientForm from "./../People/SelectClientForm";
interface Props {
savedPeople: Person[]
invoiceNumber: number
setInvoiceNumber: any
}
const DocumentInfoForm: React.FC<Props> = (props) => {
const dummyPerson: Person = {
Name: "",
Address: "",
Phone: "",
Email: "",
BillAddress: {
AddressLine: "",
City: "",
State: "",
PINCode: "",
Country: "India" // TODO: Get default from server
}
}
const [invoiceNumber, setInvoiceNumber] = useState<number>(props.invoiceNumber);
const [invoiceDate, setInvoiceDate] = useState(new Date());
const [selectedClient, setSelectedClient] = useState<Person>(dummyPerson);
return (
<div className={"DocumentInfoForm"}>
<SelectClientForm
savedPeople={props.savedPeople}
selectedClient={selectedClient}
setSelectedClient={setSelectedClient}
/>
<div className={"documentInfoChild"}>
<label>
Invoice Number:
<span className={"buttonInput"}>
{invoiceNumber === props.invoiceNumber ||
<FontAwesomeIcon icon={faSync} className={"icon"} onClick={
(event) => {
event.preventDefault(); // don't select the input box
setInvoiceNumber(props.invoiceNumber);
}
}/>
}
<input className={"smallInputBox"} type="number" step="0.0" value={invoiceNumber}
onInput={(event: React.FormEvent<HTMLInputElement>) => setInvoiceNumber(parseInt(event.currentTarget.value))}
required />
</span>
</label>
<label>
Invoice Date:
<DatePicker className={"smallInputBox"} selected={invoiceDate} onChange={(date: Date) => setInvoiceDate(date)} />
</label>
</div>
<div className={"documentInfoChild"}>
</div>
</div>
);
}
export default DocumentInfoForm;
|
