/
PrepaidCounters.tsx
130 lines (121 loc) · 5.47 KB
/
PrepaidCounters.tsx
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import { faExclamationTriangle } from "@fortawesome/pro-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import * as React from "react"
import {
Col,
Container,
Input,
InputGroup,
InputGroupAddon,
Label,
ListGroup,
ListGroupItem,
Row
} from "reactstrap"
import MembershipService from "../api/services/membership"
import { MembershipType } from "../types/models"
import ClientName from "./ClientName"
import "./PrepaidCounters.css"
import UncontrolledTooltipWrapper from "./UncontrolledTooltipWrapper"
type Props = {
memberships: Array<MembershipType>
funcRefreshPrepaidCnt: (
id: MembershipType["id"],
prepaidCnt: MembershipType["prepaid_cnt"]
) => void
isGroupActive: boolean
}
type PrepaidCntObjectsType = {
[key: number]: MembershipType["prepaid_cnt"]
}
/** Komponenta zobrazující počítadla předplacených lekcí pro členy skupiny. */
const PrepaidCounters: React.FC<Props> = props => {
const createPrepaidCntObjects = React.useCallback(() => {
const objects: PrepaidCntObjectsType = {}
props.memberships.forEach(membership => (objects[membership.id] = membership.prepaid_cnt))
return objects
}, [props.memberships])
const [prepaidCnts, setPrepaidCnts] = React.useState(() => createPrepaidCntObjects())
React.useEffect(() => {
setPrepaidCnts(createPrepaidCntObjects())
}, [createPrepaidCntObjects])
function onChange(e: React.ChangeEvent<HTMLInputElement>): void {
const target = e.currentTarget
const value = Number(target.value)
const id = Number(target.dataset.id as string)
setPrepaidCnts(prevPrepaidCnts => {
// vytvorime kopii prepaidCnts (ma jen jednu uroven -> staci melka kopie)
const newPrepaidCnts = { ...prevPrepaidCnts }
newPrepaidCnts[id] = value
return newPrepaidCnts
})
const data = { id, prepaid_cnt: value }
MembershipService.patch(data).then(() => {
props.funcRefreshPrepaidCnt(id, value)
})
}
function onFocus(e: React.ChangeEvent<HTMLInputElement>): void {
e.currentTarget.select()
}
return (
<Container fluid>
<Row className="justify-content-center">
{props.memberships.map(membership => (
<Col sm="9" md="3" lg="2" xl="2" key={membership.id}>
<ListGroup>
<ListGroupItem>
<h5>
<ClientName client={membership.client} link />{" "}
{props.isGroupActive && !membership.client.active && (
<>
<UncontrolledTooltipWrapper
target={
"PrepaidCounters_InactiveClientAlert_" +
membership.client.id
}>
Tento klient není aktivní (přestože skupina aktivní
je), není tedy možné přidávat této skupině lekce
</UncontrolledTooltipWrapper>
<FontAwesomeIcon
id={
"PrepaidCounters_InactiveClientAlert_" +
membership.client.id
}
icon={faExclamationTriangle}
className={"text-danger"}
size="1x"
/>
</>
)}
</h5>
<InputGroup>
<InputGroupAddon addonType="prepend">
<Label
className="input-group-text"
for={"prepaid_cnt" + membership.id}>
předplaceno
</Label>
</InputGroupAddon>
<Input
type="number"
value={prepaidCnts[membership.id]}
min="0"
onChange={onChange}
data-id={membership.id}
onFocus={onFocus}
id={"prepaid_cnt" + membership.id}
className="PrepaidCountersInput"
/>
</InputGroup>
</ListGroupItem>
</ListGroup>
</Col>
))}
{props.memberships.length === 0 && (
<p className="text-muted text-center">Žádní účastníci</p>
)}
</Row>
</Container>
)
}
export default PrepaidCounters