allaw-ui 4.0.1 → 4.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9,6 +9,11 @@ export interface ContactCardEditProps {
|
|
|
9
9
|
birthDate?: Date;
|
|
10
10
|
hideActions?: boolean;
|
|
11
11
|
controlled?: boolean;
|
|
12
|
+
hasExternalChanges?: boolean;
|
|
13
|
+
clientTypeOptions?: {
|
|
14
|
+
label: string;
|
|
15
|
+
value: string;
|
|
16
|
+
}[];
|
|
12
17
|
datepickerYearDropdownItemNumber?: number;
|
|
13
18
|
datepickerMaxDaysInPast?: number;
|
|
14
19
|
datepickerMinDate?: Date;
|
|
@@ -16,8 +16,8 @@ import Select from "../../atoms/selects/Select";
|
|
|
16
16
|
import Datepicker from "../../atoms/datepickers/Datepicker";
|
|
17
17
|
import IconButton from "../../atoms/buttons/IconButton";
|
|
18
18
|
var ContactCardEdit = function (_a) {
|
|
19
|
-
var name = _a.name, status = _a.status, phone = _a.phone, email = _a.email, _b = _a.clientOfStudy, clientOfStudy = _b === void 0 ? false : _b, _c = _a.officeName, officeName = _c === void 0 ? "du cabinet" : _c, birthDate = _a.birthDate, _d = _a.hideActions, hideActions = _d === void 0 ? false : _d, _e = _a.controlled, controlled = _e === void 0 ? false : _e, _f = _a.datepickerYearDropdownItemNumber, datepickerYearDropdownItemNumber =
|
|
20
|
-
var
|
|
19
|
+
var name = _a.name, status = _a.status, phone = _a.phone, email = _a.email, _b = _a.clientOfStudy, clientOfStudy = _b === void 0 ? false : _b, _c = _a.officeName, officeName = _c === void 0 ? "du cabinet" : _c, birthDate = _a.birthDate, _d = _a.hideActions, hideActions = _d === void 0 ? false : _d, _e = _a.controlled, controlled = _e === void 0 ? false : _e, _f = _a.hasExternalChanges, hasExternalChanges = _f === void 0 ? false : _f, clientTypeOptions = _a.clientTypeOptions, _g = _a.datepickerYearDropdownItemNumber, datepickerYearDropdownItemNumber = _g === void 0 ? 10 : _g, datepickerMaxDaysInPast = _a.datepickerMaxDaysInPast, datepickerMinDate = _a.datepickerMinDate, datepickerMaxDate = _a.datepickerMaxDate, _h = _a.datepickerDisableFutur, datepickerDisableFutur = _h === void 0 ? true : _h, externalEditData = _a.editData, onEditDataChange = _a.onEditDataChange, onSave = _a.onSave, onCancel = _a.onCancel;
|
|
20
|
+
var _j = useState({
|
|
21
21
|
firstName: "",
|
|
22
22
|
lastName: "",
|
|
23
23
|
status: status,
|
|
@@ -25,7 +25,9 @@ var ContactCardEdit = function (_a) {
|
|
|
25
25
|
phone: phone,
|
|
26
26
|
email: email,
|
|
27
27
|
birthDate: birthDate,
|
|
28
|
-
}), internalEditData =
|
|
28
|
+
}), internalEditData = _j[0], setInternalEditData = _j[1];
|
|
29
|
+
// État pour suivre les modifications
|
|
30
|
+
var _k = useState(false), hasChanges = _k[0], setHasChanges = _k[1];
|
|
29
31
|
// Utiliser les données externes si contrôlé, sinon les données internes
|
|
30
32
|
var editData = controlled && externalEditData ? externalEditData : internalEditData;
|
|
31
33
|
var updateEditData = function (updater) {
|
|
@@ -37,12 +39,13 @@ var ContactCardEdit = function (_a) {
|
|
|
37
39
|
setInternalEditData(updater);
|
|
38
40
|
}
|
|
39
41
|
};
|
|
40
|
-
// Options
|
|
41
|
-
var
|
|
42
|
+
// Options par défaut si non fournies
|
|
43
|
+
var defaultClientTypeOptions = [
|
|
42
44
|
{ label: "Client du cabinet", value: "Client du cabinet" },
|
|
43
45
|
{ label: "Client de l'étude", value: "Client de l'étude" },
|
|
44
46
|
{ label: "Contact", value: "Contact" },
|
|
45
47
|
];
|
|
48
|
+
var finalClientTypeOptions = clientTypeOptions || defaultClientTypeOptions;
|
|
46
49
|
// Initialisation des données d'édition
|
|
47
50
|
useEffect(function () {
|
|
48
51
|
if (name && !controlled) {
|
|
@@ -59,6 +62,41 @@ var ContactCardEdit = function (_a) {
|
|
|
59
62
|
officeName,
|
|
60
63
|
controlled,
|
|
61
64
|
]);
|
|
65
|
+
// Détection des changements
|
|
66
|
+
useEffect(function () {
|
|
67
|
+
var _a, _b;
|
|
68
|
+
if (!controlled) {
|
|
69
|
+
var nameParts = name.split(" ");
|
|
70
|
+
var originalData = {
|
|
71
|
+
firstName: nameParts[0] || "",
|
|
72
|
+
lastName: nameParts.slice(1).join(" ") || "",
|
|
73
|
+
status: status,
|
|
74
|
+
clientType: clientOfStudy ? "Client ".concat(officeName) : "Non client",
|
|
75
|
+
phone: phone,
|
|
76
|
+
email: email,
|
|
77
|
+
birthDate: birthDate,
|
|
78
|
+
};
|
|
79
|
+
var currentData = editData;
|
|
80
|
+
var changed = originalData.firstName !== currentData.firstName ||
|
|
81
|
+
originalData.lastName !== currentData.lastName ||
|
|
82
|
+
originalData.status !== currentData.status ||
|
|
83
|
+
originalData.clientType !== currentData.clientType ||
|
|
84
|
+
originalData.phone !== currentData.phone ||
|
|
85
|
+
originalData.email !== currentData.email ||
|
|
86
|
+
((_a = originalData.birthDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = currentData.birthDate) === null || _b === void 0 ? void 0 : _b.getTime());
|
|
87
|
+
setHasChanges(changed);
|
|
88
|
+
}
|
|
89
|
+
}, [
|
|
90
|
+
editData,
|
|
91
|
+
name,
|
|
92
|
+
status,
|
|
93
|
+
phone,
|
|
94
|
+
email,
|
|
95
|
+
birthDate,
|
|
96
|
+
clientOfStudy,
|
|
97
|
+
officeName,
|
|
98
|
+
controlled,
|
|
99
|
+
]);
|
|
62
100
|
var handleSave = function () {
|
|
63
101
|
onSave === null || onSave === void 0 ? void 0 : onSave(editData);
|
|
64
102
|
};
|
|
@@ -78,7 +116,7 @@ var ContactCardEdit = function (_a) {
|
|
|
78
116
|
}
|
|
79
117
|
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
|
|
80
118
|
};
|
|
81
|
-
return (React.createElement("div", { className: styles.contactCardEdit },
|
|
119
|
+
return (React.createElement("div", { className: "".concat(styles.contactCardEdit, " ").concat((controlled ? hasExternalChanges : hasChanges) ? styles.modified : "") },
|
|
82
120
|
React.createElement("div", { className: styles.contentContainer },
|
|
83
121
|
React.createElement("div", { className: styles.nameTagContainer },
|
|
84
122
|
React.createElement("div", { className: styles.nameInputsContainer },
|
|
@@ -92,7 +130,7 @@ var ContactCardEdit = function (_a) {
|
|
|
92
130
|
React.createElement("div", { className: styles.infoItem },
|
|
93
131
|
React.createElement("i", { className: "allaw-icon-user ".concat(styles.infoIcon) }),
|
|
94
132
|
React.createElement("div", { className: styles.clientTypeSelectContainer },
|
|
95
|
-
React.createElement(Select, { items:
|
|
133
|
+
React.createElement(Select, { items: finalClientTypeOptions, selectedItem: editData.clientType, placeholder: "Type de client", onChange: function (value) {
|
|
96
134
|
return updateEditData(function (prev) { return (__assign(__assign({}, prev), { clientType: value })); });
|
|
97
135
|
} }))),
|
|
98
136
|
React.createElement("div", { className: styles.telephoneEmailItems },
|
|
@@ -11,6 +11,11 @@
|
|
|
11
11
|
justify-content: space-between;
|
|
12
12
|
align-items: stretch;
|
|
13
13
|
align-self: stretch;
|
|
14
|
+
transition: border-color 0.3s ease;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.contactCardEdit.modified {
|
|
18
|
+
border-color: #25beeb;
|
|
14
19
|
}
|
|
15
20
|
|
|
16
21
|
.contentContainer {
|
|
@@ -108,6 +113,20 @@
|
|
|
108
113
|
min-width: 160px;
|
|
109
114
|
}
|
|
110
115
|
|
|
116
|
+
/* Media queries pour les largeurs en fonction du viewport */
|
|
117
|
+
@media (min-width: 1152px) {
|
|
118
|
+
.phoneInputContainer {
|
|
119
|
+
width: 190px;
|
|
120
|
+
min-width: 190px;
|
|
121
|
+
max-width: 190px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.clientTypeSelectContainer {
|
|
125
|
+
max-width: 190px;
|
|
126
|
+
min-width: 190px;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
111
130
|
/* Media queries responsive */
|
|
112
131
|
@media (max-width: 1000px) {
|
|
113
132
|
.phoneInputContainer {
|