test-task-sws

1
import { useCallback, useState } from "react";
2
import { CiwCreateData, CiwUpdateData } from "../../ts/ApiData";
3
import DefaultRow from "../defaultrow/DefaultRow";
4
import EditableRow from "../editablerow/EditableRow";
5
import LvlButtonsTemplate from "../lvlbuttonstemplate/LvlButtonsTemplate";
6
import { IRow } from "./Row.types";
7

8
/**
9
 * Row component
10
 */
11
export function Row({ qRowsWithLessNesting, node, onCreateNewRow, onAddChildRow, onUpdateRow, onDeleteRow }: IRow) {
12
	const [visible, setVisible] = useState(false);
13
	const [editMode, setEditMode] = useState(node.editMode);
14

15
	const menuButtonVisible = visible && !node.editMode;
16
	const nestingLvl = node.key.split("-").length - 1;
17
	const linesClassName = nestingLvl === 0 ? "" : node.key.at(-1) === "0" ? "lines" : "lines-long";
18

19
	const convertToNumber = useCallback((string: string) => {
20
		return Number(string.split(" ").join("").split(",").join("."));
21
	}, []);
22

23
	const onSendCreatedRow = useCallback(
24
		(formData: { rowName: string; salary: string; equipmentCosts: string; overheads: string; estimatedProfit: string }) => {
25
			const data: CiwCreateData = {
26
				equipmentCosts: formData.equipmentCosts ? convertToNumber(formData.equipmentCosts) : 0,
27
				estimatedProfit: formData.estimatedProfit ? convertToNumber(formData.estimatedProfit) : 0,
28
				machineOperatorSalary: 0,
29
				mainCosts: 0,
30
				materials: 0,
31
				mimExploitation: 0,
32
				overheads: formData.overheads ? convertToNumber(formData.overheads) : 0,
33
				parentId: node.parentId,
34
				rowName: formData.rowName,
35
				salary: formData.salary ? convertToNumber(formData.salary) : 0,
36
				supportCosts: 0,
37
			};
38

39
			onCreateNewRow(data, node.key);
40
		},
41
		[onCreateNewRow, convertToNumber],
42
	);
43

44
	const onSendEditedRow = useCallback(
45
		(formData: { rowName: string; salary: string; equipmentCosts: string; overheads: string; estimatedProfit: string }) => {
46
			const data: CiwUpdateData = {
47
				id: node.data.id,
48
				equipmentCosts: formData.equipmentCosts ? convertToNumber(formData.equipmentCosts) : 0,
49
				estimatedProfit: formData.estimatedProfit ? convertToNumber(formData.estimatedProfit) : 0,
50
				machineOperatorSalary: 0,
51
				mainCosts: 0,
52
				materials: 0,
53
				mimExploitation: 0,
54
				overheads: formData.overheads ? convertToNumber(formData.overheads) : 0,
55
				parentId: node.parentId,
56
				rowName: formData.rowName,
57
				salary: formData.salary ? convertToNumber(formData.salary) : 0,
58
				supportCosts: 0,
59
			};
60

61
			setEditMode(false);
62

63
			onUpdateRow(data, node.key);
64
		},
65
		[onCreateNewRow, convertToNumber],
66
	);
67

68
	const onShowButtonMenu = useCallback(() => {
69
		if (!menuButtonVisible) setVisible(true);
70
	}, []);
71

72
	const onHideButtonMenu = useCallback(() => {
73
		setVisible(false);
74
	}, []);
75

76
	const onDoubleRowClick = () => setEditMode(!editMode);
77

78
	return (
79
		<>
80
			{!editMode && (
81
				<>
82
					<DefaultRow
83
						qRowsWithLessNesting={qRowsWithLessNesting}
84
						linesClassName={linesClassName}
85
						nestingLvl={nestingLvl}
86
						rowName={node.data.rowName}
87
						salary={node.data.salary}
88
						equipmentCosts={node.data.equipmentCosts}
89
						overheads={node.data.overheads}
90
						estimatedProfit={node.data.estimatedProfit}
91
						onDoubleRowClick={onDoubleRowClick}
92
					>
93
						<LvlButtonsTemplate
94
							idRow={node.data.id}
95
							nestingLvl={nestingLvl}
96
							editMode={editMode}
97
							menuButtonVisible={menuButtonVisible}
98
							onShowButtonMenu={onShowButtonMenu}
99
							onHideButtonMenu={onHideButtonMenu}
100
							onAddChildRow={onAddChildRow}
101
							onDeleteRow={onDeleteRow}
102
						/>
103
					</DefaultRow>
104
				</>
105
			)}
106
			{editMode && (
107
				<>
108
					<EditableRow
109
						qRowsWithLessNesting={qRowsWithLessNesting}
110
						linesClassName={linesClassName}
111
						nestingLvl={nestingLvl}
112
						node={node}
113
						onSendCreatedRow={onSendCreatedRow}
114
						onSendEditedRow={onSendEditedRow}
115
					>
116
						<LvlButtonsTemplate
117
							idRow={node.data.id}
118
							nestingLvl={nestingLvl}
119
							editMode={editMode}
120
							menuButtonVisible={menuButtonVisible}
121
							onShowButtonMenu={onShowButtonMenu}
122
							onHideButtonMenu={onHideButtonMenu}
123
							onAddChildRow={onAddChildRow}
124
							onDeleteRow={onDeleteRow}
125
						/>
126
					</EditableRow>
127
				</>
128
			)}
129
		</>
130
	);
131
}
132