@vuu-ui/vuu-data-react 2.1.17 → 2.1.19-beta.1
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.
- package/package.json +17 -19
- package/cjs/data-editing/EditForm.css.js +0 -6
- package/cjs/data-editing/EditForm.css.js.map +0 -1
- package/cjs/data-editing/EditForm.js +0 -90
- package/cjs/data-editing/EditForm.js.map +0 -1
- package/cjs/data-editing/UnsavedChangesReport.css.js +0 -6
- package/cjs/data-editing/UnsavedChangesReport.css.js.map +0 -1
- package/cjs/data-editing/UnsavedChangesReport.js +0 -29
- package/cjs/data-editing/UnsavedChangesReport.js.map +0 -1
- package/cjs/data-editing/edit-rule-validation-checker.js +0 -41
- package/cjs/data-editing/edit-rule-validation-checker.js.map +0 -1
- package/cjs/data-editing/edit-validation-rules.js +0 -52
- package/cjs/data-editing/edit-validation-rules.js.map +0 -1
- package/cjs/data-editing/form-edit-state.js +0 -26
- package/cjs/data-editing/form-edit-state.js.map +0 -1
- package/cjs/data-editing/get-data-item-edit-control.js +0 -105
- package/cjs/data-editing/get-data-item-edit-control.js.map +0 -1
- package/cjs/data-editing/useEditForm.js +0 -258
- package/cjs/data-editing/useEditForm.js.map +0 -1
- package/cjs/datasource-provider/VuuDataSourceProvider.js +0 -34
- package/cjs/datasource-provider/VuuDataSourceProvider.js.map +0 -1
- package/cjs/datasource-provider/useAutoLoginToVuuServer.js +0 -52
- package/cjs/datasource-provider/useAutoLoginToVuuServer.js.map +0 -1
- package/cjs/hooks/useLookupValues.js +0 -100
- package/cjs/hooks/useLookupValues.js.map +0 -1
- package/cjs/hooks/useSessionDataSource.js +0 -58
- package/cjs/hooks/useSessionDataSource.js.map +0 -1
- package/cjs/hooks/useTypeaheadSuggestions.js +0 -57
- package/cjs/hooks/useTypeaheadSuggestions.js.map +0 -1
- package/cjs/hooks/useVisualLinks.js +0 -84
- package/cjs/hooks/useVisualLinks.js.map +0 -1
- package/cjs/hooks/useVuuMenuActions.js +0 -352
- package/cjs/hooks/useVuuMenuActions.js.map +0 -1
- package/cjs/hooks/useVuuTables.js +0 -38
- package/cjs/hooks/useVuuTables.js.map +0 -1
- package/cjs/index.js +0 -42
- package/cjs/index.js.map +0 -1
- package/cjs/lost-connection-indicator/LostConnectionIndicator.css.js +0 -6
- package/cjs/lost-connection-indicator/LostConnectionIndicator.css.js.map +0 -1
- package/cjs/lost-connection-indicator/LostConnectionIndicator.js +0 -24
- package/cjs/lost-connection-indicator/LostConnectionIndicator.js.map +0 -1
- package/cjs/lost-connection-indicator/useLostConnection.js +0 -34
- package/cjs/lost-connection-indicator/useLostConnection.js.map +0 -1
- package/cjs/session-editing-form/SessionEditingForm.css.js +0 -6
- package/cjs/session-editing-form/SessionEditingForm.css.js.map +0 -1
- package/cjs/session-editing-form/SessionEditingForm.js +0 -270
- package/cjs/session-editing-form/SessionEditingForm.js.map +0 -1
- package/esm/data-editing/EditForm.css.js +0 -4
- package/esm/data-editing/EditForm.css.js.map +0 -1
- package/esm/data-editing/EditForm.js +0 -88
- package/esm/data-editing/EditForm.js.map +0 -1
- package/esm/data-editing/UnsavedChangesReport.css.js +0 -4
- package/esm/data-editing/UnsavedChangesReport.css.js.map +0 -1
- package/esm/data-editing/UnsavedChangesReport.js +0 -27
- package/esm/data-editing/UnsavedChangesReport.js.map +0 -1
- package/esm/data-editing/edit-rule-validation-checker.js +0 -37
- package/esm/data-editing/edit-rule-validation-checker.js.map +0 -1
- package/esm/data-editing/edit-validation-rules.js +0 -50
- package/esm/data-editing/edit-validation-rules.js.map +0 -1
- package/esm/data-editing/form-edit-state.js +0 -23
- package/esm/data-editing/form-edit-state.js.map +0 -1
- package/esm/data-editing/get-data-item-edit-control.js +0 -103
- package/esm/data-editing/get-data-item-edit-control.js.map +0 -1
- package/esm/data-editing/useEditForm.js +0 -256
- package/esm/data-editing/useEditForm.js.map +0 -1
- package/esm/datasource-provider/VuuDataSourceProvider.js +0 -32
- package/esm/datasource-provider/VuuDataSourceProvider.js.map +0 -1
- package/esm/datasource-provider/useAutoLoginToVuuServer.js +0 -50
- package/esm/datasource-provider/useAutoLoginToVuuServer.js.map +0 -1
- package/esm/hooks/useLookupValues.js +0 -98
- package/esm/hooks/useLookupValues.js.map +0 -1
- package/esm/hooks/useSessionDataSource.js +0 -56
- package/esm/hooks/useSessionDataSource.js.map +0 -1
- package/esm/hooks/useTypeaheadSuggestions.js +0 -54
- package/esm/hooks/useTypeaheadSuggestions.js.map +0 -1
- package/esm/hooks/useVisualLinks.js +0 -82
- package/esm/hooks/useVisualLinks.js.map +0 -1
- package/esm/hooks/useVuuMenuActions.js +0 -348
- package/esm/hooks/useVuuMenuActions.js.map +0 -1
- package/esm/hooks/useVuuTables.js +0 -36
- package/esm/hooks/useVuuTables.js.map +0 -1
- package/esm/index.js +0 -16
- package/esm/index.js.map +0 -1
- package/esm/lost-connection-indicator/LostConnectionIndicator.css.js +0 -4
- package/esm/lost-connection-indicator/LostConnectionIndicator.css.js.map +0 -1
- package/esm/lost-connection-indicator/LostConnectionIndicator.js +0 -22
- package/esm/lost-connection-indicator/LostConnectionIndicator.js.map +0 -1
- package/esm/lost-connection-indicator/useLostConnection.js +0 -32
- package/esm/lost-connection-indicator/useLostConnection.js.map +0 -1
- package/esm/session-editing-form/SessionEditingForm.css.js +0 -4
- package/esm/session-editing-form/SessionEditingForm.css.js.map +0 -1
- package/esm/session-editing-form/SessionEditingForm.js +0 -268
- package/esm/session-editing-form/SessionEditingForm.js.map +0 -1
- package/types/csv-upload/CsvUpload.d.ts +0 -0
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuDataRemote = require('@vuu-ui/vuu-data-remote');
|
|
5
|
-
var react = require('react');
|
|
6
|
-
var vuuNotifications = require('@vuu-ui/vuu-notifications');
|
|
7
|
-
var LostConnectionIndicator = require('./LostConnectionIndicator.js');
|
|
8
|
-
|
|
9
|
-
const useLostConnection = () => {
|
|
10
|
-
const { hideNotification, showNotification } = vuuNotifications.useNotifications();
|
|
11
|
-
const isConnectedRef = react.useRef(vuuDataRemote.ConnectionManager.connected);
|
|
12
|
-
const handleConnectionStatusChange = react.useCallback(
|
|
13
|
-
(connectionStatus) => {
|
|
14
|
-
const { current: wasConnected } = isConnectedRef;
|
|
15
|
-
isConnectedRef.current = vuuDataRemote.isConnected(connectionStatus);
|
|
16
|
-
if (wasConnected && connectionStatus === "disconnected") {
|
|
17
|
-
showNotification({
|
|
18
|
-
content: /* @__PURE__ */ jsxRuntime.jsx(LostConnectionIndicator.LostConnectionIndicator, {}),
|
|
19
|
-
status: "error",
|
|
20
|
-
type: vuuNotifications.NotificationType.Workspace
|
|
21
|
-
});
|
|
22
|
-
} else if (!wasConnected && isConnectedRef.current) {
|
|
23
|
-
hideNotification();
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
[hideNotification, showNotification]
|
|
27
|
-
);
|
|
28
|
-
react.useMemo(async () => {
|
|
29
|
-
vuuDataRemote.ConnectionManager.on("connection-status", handleConnectionStatusChange);
|
|
30
|
-
}, [handleConnectionStatusChange]);
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
exports.useLostConnection = useLostConnection;
|
|
34
|
-
//# sourceMappingURL=useLostConnection.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useLostConnection.js","sources":["../../../../packages/vuu-data-react/src/lost-connection-indicator/useLostConnection.tsx"],"sourcesContent":["import {\n ConnectionManager,\n ConnectionStatus,\n isConnected,\n} from \"@vuu-ui/vuu-data-remote\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { NotificationType, useNotifications } from \"@vuu-ui/vuu-notifications\";\nimport { LostConnectionIndicator } from \"../lost-connection-indicator/LostConnectionIndicator\";\n\nexport const useLostConnection = () => {\n const { hideNotification, showNotification } = useNotifications();\n\n const isConnectedRef = useRef(ConnectionManager.connected);\n\n const handleConnectionStatusChange = useCallback(\n (connectionStatus: ConnectionStatus) => {\n const { current: wasConnected } = isConnectedRef;\n isConnectedRef.current = isConnected(connectionStatus);\n\n if (wasConnected && connectionStatus === \"disconnected\") {\n showNotification({\n content: <LostConnectionIndicator />,\n status: \"error\",\n type: NotificationType.Workspace,\n });\n } else if (!wasConnected && isConnectedRef.current) {\n hideNotification();\n }\n },\n [hideNotification, showNotification],\n );\n\n useMemo(async () => {\n ConnectionManager.on(\"connection-status\", handleConnectionStatusChange);\n }, [handleConnectionStatusChange]);\n};\n"],"names":["useNotifications","useRef","ConnectionManager","useCallback","isConnected","LostConnectionIndicator","NotificationType","useMemo"],"mappings":";;;;;;;;AASO,MAAM,oBAAoB,MAAM;AACrC,EAAA,MAAM,EAAE,gBAAA,EAAkB,gBAAiB,EAAA,GAAIA,iCAAiB,EAAA;AAEhE,EAAM,MAAA,cAAA,GAAiBC,YAAO,CAAAC,+BAAA,CAAkB,SAAS,CAAA;AAEzD,EAAA,MAAM,4BAA+B,GAAAC,iBAAA;AAAA,IACnC,CAAC,gBAAuC,KAAA;AACtC,MAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,cAAA;AAClC,MAAe,cAAA,CAAA,OAAA,GAAUC,0BAAY,gBAAgB,CAAA;AAErD,MAAI,IAAA,YAAA,IAAgB,qBAAqB,cAAgB,EAAA;AACvD,QAAiB,gBAAA,CAAA;AAAA,UACf,OAAA,iCAAUC,+CAAwB,EAAA,EAAA,CAAA;AAAA,UAClC,MAAQ,EAAA,OAAA;AAAA,UACR,MAAMC,iCAAiB,CAAA;AAAA,SACxB,CAAA;AAAA,OACQ,MAAA,IAAA,CAAC,YAAgB,IAAA,cAAA,CAAe,OAAS,EAAA;AAClD,QAAiB,gBAAA,EAAA;AAAA;AACnB,KACF;AAAA,IACA,CAAC,kBAAkB,gBAAgB;AAAA,GACrC;AAEA,EAAAC,aAAA,CAAQ,YAAY;AAClB,IAAkBL,+BAAA,CAAA,EAAA,CAAG,qBAAqB,4BAA4B,CAAA;AAAA,GACxE,EAAG,CAAC,4BAA4B,CAAC,CAAA;AACnC;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var sessionEditingFormCss = ".vuuSessionEditingForm {\n display: flex;\n flex-direction: column;\n gap: 3px;\n min-width: 400px;\n}\n\n.vuuSessionEditingForm-content {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n gap: 3px;\n overflow: auto;\n padding: var(--salt-spacing-200);\n}\n\n\n.vuuSessionEditingForm-fieldValue.vuuReadOnly {\n font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n.vuuSessionEditingForm-buttonbar {\n align-items: center;\n border-top: solid 1px var(--salt-container-primary-borderColor);\n box-sizing: content-box;\n display: flex;\n justify-content: flex-end;\n flex: 0 0 autox;\n gap: 6px;\n height: var(--salt-size-base);\n margin: var(--salt-spacing-200);\n padding-top: var(--salt-spacing-200);\n\n}\n\n.vuuSessionEditingForm-errorBanner {\n --vuu-icon-left: 3px;\n --vuu-icon-size: 18px;\n --vuu-icon-top: 3px;\n border: solid 1px var(--salt-status-error-borderColor);\n line-height: 24px;\n padding: 0 6px 0 26px;\n position: relative;\n}";
|
|
4
|
-
|
|
5
|
-
module.exports = sessionEditingFormCss;
|
|
6
|
-
//# sourceMappingURL=SessionEditingForm.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SessionEditingForm.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,270 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuDataRemote = require('@vuu-ui/vuu-data-remote');
|
|
5
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
6
|
-
var core = require('@salt-ds/core');
|
|
7
|
-
var styles = require('@salt-ds/styles');
|
|
8
|
-
var window = require('@salt-ds/window');
|
|
9
|
-
var cx = require('clsx');
|
|
10
|
-
var react = require('react');
|
|
11
|
-
var SessionEditingForm$1 = require('./SessionEditingForm.css.js');
|
|
12
|
-
|
|
13
|
-
const classBase = "vuuSessionEditingForm";
|
|
14
|
-
const getField = (fields, name) => {
|
|
15
|
-
const field = fields.find((f) => f.name === name);
|
|
16
|
-
if (field) {
|
|
17
|
-
return field;
|
|
18
|
-
} else {
|
|
19
|
-
throw Error(`SessionEditingForm, no field '${name}' found`);
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
const getFieldNameAndValue = ({
|
|
23
|
-
target
|
|
24
|
-
}) => {
|
|
25
|
-
const formField = vuuUtils.queryClosest(target, ".saltFormField");
|
|
26
|
-
if (formField) {
|
|
27
|
-
const {
|
|
28
|
-
dataset: { field }
|
|
29
|
-
} = formField;
|
|
30
|
-
if (field === void 0) {
|
|
31
|
-
throw Error("SessionEditingForm, form field has no field data attribute");
|
|
32
|
-
}
|
|
33
|
-
return [field, target.value];
|
|
34
|
-
} else {
|
|
35
|
-
throw Error("Form control is not enclosed in FormField");
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
const Status = {
|
|
39
|
-
uninitialised: 0,
|
|
40
|
-
unchanged: 1,
|
|
41
|
-
changed: 2,
|
|
42
|
-
invalid: 3
|
|
43
|
-
};
|
|
44
|
-
const getDataSource = (dataSource, schema) => {
|
|
45
|
-
if (dataSource) {
|
|
46
|
-
return dataSource;
|
|
47
|
-
} else if (schema) {
|
|
48
|
-
return new vuuDataRemote.VuuDataSource({
|
|
49
|
-
bufferSize: 0,
|
|
50
|
-
table: schema.table,
|
|
51
|
-
columns: schema.columns.map((col) => col.name)
|
|
52
|
-
});
|
|
53
|
-
} else {
|
|
54
|
-
throw Error(
|
|
55
|
-
"SessionEditingForm: either a DataSource or a TableSchema must be provided"
|
|
56
|
-
);
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
const SessionEditingForm = ({
|
|
60
|
-
className,
|
|
61
|
-
config: { fields, key: keyField },
|
|
62
|
-
dataSource: dataSourceProp,
|
|
63
|
-
id: idProp,
|
|
64
|
-
onClose,
|
|
65
|
-
schema,
|
|
66
|
-
...htmlAttributes
|
|
67
|
-
}) => {
|
|
68
|
-
const targetWindow = window.useWindow();
|
|
69
|
-
styles.useComponentCssInjection({
|
|
70
|
-
testId: "vuu-session-editing-form",
|
|
71
|
-
css: SessionEditingForm$1,
|
|
72
|
-
window: targetWindow
|
|
73
|
-
});
|
|
74
|
-
const [fieldStatusValues, setFieldStatusValues] = react.useState({});
|
|
75
|
-
const [values, setValues] = react.useState();
|
|
76
|
-
const [errorMessage, setErrorMessage] = react.useState("");
|
|
77
|
-
const formContentRef = react.useRef(null);
|
|
78
|
-
const initialDataRef = react.useRef(void 0);
|
|
79
|
-
const dataStatusRef = react.useRef(Status.uninitialised);
|
|
80
|
-
const dataSource = react.useMemo(() => {
|
|
81
|
-
const ds = getDataSource(dataSourceProp, schema);
|
|
82
|
-
const { columns } = ds;
|
|
83
|
-
const columnMap = vuuUtils.buildColumnMap(ds.columns);
|
|
84
|
-
const applyServerData = (data) => {
|
|
85
|
-
if (columnMap) {
|
|
86
|
-
const values2 = {};
|
|
87
|
-
for (const column of columns) {
|
|
88
|
-
values2[column] = data[columnMap[column]];
|
|
89
|
-
}
|
|
90
|
-
if (dataStatusRef.current === Status.uninitialised) {
|
|
91
|
-
dataStatusRef.current = Status.unchanged;
|
|
92
|
-
initialDataRef.current = values2;
|
|
93
|
-
}
|
|
94
|
-
setValues(values2);
|
|
95
|
-
}
|
|
96
|
-
};
|
|
97
|
-
ds.subscribe({ range: vuuUtils.Range(0, 5) }, (message) => {
|
|
98
|
-
if (message.type === "viewport-update" && message.rows) {
|
|
99
|
-
if (dataStatusRef.current === Status.uninitialised) {
|
|
100
|
-
applyServerData(message.rows[0]);
|
|
101
|
-
} else {
|
|
102
|
-
console.log("what do we do with server updates");
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
});
|
|
106
|
-
return ds;
|
|
107
|
-
}, [dataSourceProp, schema]);
|
|
108
|
-
const id = core.useIdMemo(idProp);
|
|
109
|
-
const handleChange = react.useCallback(
|
|
110
|
-
(evt) => {
|
|
111
|
-
const [field, value] = getFieldNameAndValue(evt);
|
|
112
|
-
const { type } = getField(fields, field);
|
|
113
|
-
const typedValue = vuuUtils.getTypedValue(value, type);
|
|
114
|
-
setValues((values2 = {}) => {
|
|
115
|
-
const newValues = {
|
|
116
|
-
...values2,
|
|
117
|
-
[field]: typedValue
|
|
118
|
-
};
|
|
119
|
-
const notUpdated = vuuUtils.shallowEquals(newValues, initialDataRef.current);
|
|
120
|
-
dataStatusRef.current = notUpdated ? Status.unchanged : typedValue !== void 0 ? Status.changed : Status.invalid;
|
|
121
|
-
return newValues;
|
|
122
|
-
});
|
|
123
|
-
},
|
|
124
|
-
[fields]
|
|
125
|
-
);
|
|
126
|
-
const handleBlur = react.useCallback(
|
|
127
|
-
async (evt) => {
|
|
128
|
-
const [column, value] = getFieldNameAndValue(evt);
|
|
129
|
-
const key = values?.[keyField];
|
|
130
|
-
const { type } = getField(fields, column);
|
|
131
|
-
const data = vuuUtils.getTypedValue(value, type, true);
|
|
132
|
-
if (typeof key === "string") {
|
|
133
|
-
const response = await dataSource.rpcRequest?.({
|
|
134
|
-
params: {
|
|
135
|
-
key,
|
|
136
|
-
column,
|
|
137
|
-
data
|
|
138
|
-
},
|
|
139
|
-
rpcName: "editCell",
|
|
140
|
-
type: "RPC_REQUEST"
|
|
141
|
-
});
|
|
142
|
-
if (response?.type === "SUCCESS_RESULT") {
|
|
143
|
-
setFieldStatusValues((map) => ({
|
|
144
|
-
...map,
|
|
145
|
-
[column]: void 0
|
|
146
|
-
}));
|
|
147
|
-
} else if (response?.type === "ERROR_RESULT") {
|
|
148
|
-
console.log(`edit rejected ${response.errorMessage}`);
|
|
149
|
-
setFieldStatusValues((map) => ({
|
|
150
|
-
...map,
|
|
151
|
-
[column]: response.errorMessage
|
|
152
|
-
}));
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
},
|
|
156
|
-
[dataSource, fields, keyField, values]
|
|
157
|
-
);
|
|
158
|
-
const handleSubmit = react.useCallback(async () => {
|
|
159
|
-
const response = await dataSource.rpcRequest?.({
|
|
160
|
-
params: { comment: "" },
|
|
161
|
-
rpcName: "submitForm",
|
|
162
|
-
type: "RPC_REQUEST"
|
|
163
|
-
});
|
|
164
|
-
if (response?.type === "SUCCESS_RESULT") {
|
|
165
|
-
onClose?.();
|
|
166
|
-
} else if (response?.type === "ERROR_RESULT") {
|
|
167
|
-
setErrorMessage(response.errorMessage);
|
|
168
|
-
}
|
|
169
|
-
}, [dataSource, onClose]);
|
|
170
|
-
const handleKeyDown = react.useCallback(
|
|
171
|
-
(evt) => {
|
|
172
|
-
if (evt.key === "Enter" && dataStatusRef.current === Status.changed) {
|
|
173
|
-
handleSubmit();
|
|
174
|
-
}
|
|
175
|
-
},
|
|
176
|
-
[handleSubmit]
|
|
177
|
-
);
|
|
178
|
-
const handleCancel = react.useCallback(() => {
|
|
179
|
-
onClose?.();
|
|
180
|
-
}, [onClose]);
|
|
181
|
-
const getFormControl = (field) => {
|
|
182
|
-
const value = String(values?.[field.name] ?? "");
|
|
183
|
-
if (field.readonly || field.name === keyField) {
|
|
184
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-fieldValue vuuReadOnly`, children: value });
|
|
185
|
-
} else {
|
|
186
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
187
|
-
core.Input,
|
|
188
|
-
{
|
|
189
|
-
className: `${classBase}-fieldValue`,
|
|
190
|
-
onBlur: handleBlur,
|
|
191
|
-
onChange: handleChange,
|
|
192
|
-
value,
|
|
193
|
-
id: `${id}-input-${field.name}`
|
|
194
|
-
}
|
|
195
|
-
);
|
|
196
|
-
}
|
|
197
|
-
};
|
|
198
|
-
react.useEffect(() => {
|
|
199
|
-
if (formContentRef.current) {
|
|
200
|
-
const firstInput = formContentRef.current.querySelector(
|
|
201
|
-
"input"
|
|
202
|
-
);
|
|
203
|
-
if (firstInput) {
|
|
204
|
-
setTimeout(() => {
|
|
205
|
-
firstInput.focus();
|
|
206
|
-
firstInput.select();
|
|
207
|
-
}, 100);
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
}, []);
|
|
211
|
-
react.useEffect(() => {
|
|
212
|
-
return () => {
|
|
213
|
-
if (dataSource) {
|
|
214
|
-
dataSource.unsubscribe();
|
|
215
|
-
}
|
|
216
|
-
};
|
|
217
|
-
}, [dataSource]);
|
|
218
|
-
const isDirty = dataStatusRef.current === Status.changed;
|
|
219
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
|
|
220
|
-
errorMessage ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
221
|
-
"div",
|
|
222
|
-
{
|
|
223
|
-
className: `${classBase}-errorBanner`,
|
|
224
|
-
"data-icon": "error",
|
|
225
|
-
title: errorMessage,
|
|
226
|
-
children: "Error, edit(s) not saved"
|
|
227
|
-
}
|
|
228
|
-
) : void 0,
|
|
229
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
230
|
-
"div",
|
|
231
|
-
{
|
|
232
|
-
className: `${classBase}-content`,
|
|
233
|
-
ref: formContentRef,
|
|
234
|
-
onKeyDown: handleKeyDown,
|
|
235
|
-
children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
236
|
-
core.FormField,
|
|
237
|
-
{
|
|
238
|
-
className: `${classBase}-field`,
|
|
239
|
-
"data-field": field.name,
|
|
240
|
-
necessity: field.required ? "required" : "optional",
|
|
241
|
-
readOnly: field.readonly,
|
|
242
|
-
validationStatus: fieldStatusValues[field.name] ? "error" : void 0,
|
|
243
|
-
children: [
|
|
244
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: field?.label ?? field.description }),
|
|
245
|
-
getFormControl(field),
|
|
246
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.FormFieldHelperText, { children: fieldStatusValues[field.name] ?? "" })
|
|
247
|
-
]
|
|
248
|
-
},
|
|
249
|
-
field.name
|
|
250
|
-
))
|
|
251
|
-
}
|
|
252
|
-
),
|
|
253
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-buttonbar salt-theme salt-density-high`, children: [
|
|
254
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
255
|
-
core.Button,
|
|
256
|
-
{
|
|
257
|
-
type: "submit",
|
|
258
|
-
variant: "cta",
|
|
259
|
-
disabled: !isDirty,
|
|
260
|
-
onClick: handleSubmit,
|
|
261
|
-
children: "Submit"
|
|
262
|
-
}
|
|
263
|
-
),
|
|
264
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.Button, { variant: "secondary", onClick: handleCancel, children: "Cancel" })
|
|
265
|
-
] })
|
|
266
|
-
] });
|
|
267
|
-
};
|
|
268
|
-
|
|
269
|
-
exports.SessionEditingForm = SessionEditingForm;
|
|
270
|
-
//# sourceMappingURL=SessionEditingForm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SessionEditingForm.js","sources":["../../../../packages/vuu-data-react/src/session-editing-form/SessionEditingForm.tsx"],"sourcesContent":["import { VuuDataSource } from \"@vuu-ui/vuu-data-remote\";\nimport { DataSource, TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport {\n VuuColumnDataType,\n VuuDataRow,\n VuuRowDataItemType,\n} from \"@vuu-ui/vuu-protocol-types\";\nimport {\n buildColumnMap,\n getTypedValue,\n queryClosest,\n Range,\n shallowEquals,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n Button,\n FormField,\n FormFieldHelperText,\n FormFieldLabel,\n Input,\n useIdMemo,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n ChangeEvent,\n ChangeEventHandler,\n FocusEvent,\n FocusEventHandler,\n HTMLAttributes,\n KeyboardEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport sessionEditingFormCss from \"./SessionEditingForm.css\";\n\nexport type FormFieldDescriptor = {\n isKeyField?: boolean;\n label?: string;\n name: string;\n type: VuuColumnDataType;\n description: string;\n readonly?: boolean;\n required?: boolean;\n};\n\nexport type FormConfig = {\n title: string;\n key: string;\n fields: FormFieldDescriptor[];\n};\n\nexport interface SessionEditingFormProps\n extends HTMLAttributes<HTMLDivElement> {\n config: FormConfig;\n onClose?: () => void;\n dataSource?: DataSource;\n schema?: TableSchema;\n}\n\nconst classBase = \"vuuSessionEditingForm\";\n\nconst getField = (\n fields: FormFieldDescriptor[],\n name: string,\n): FormFieldDescriptor => {\n const field = fields.find((f) => f.name === name);\n if (field) {\n return field;\n } else {\n throw Error(`SessionEditingForm, no field '${name}' found`);\n }\n};\n\nconst getFieldNameAndValue = ({\n target,\n}: ChangeEvent<HTMLInputElement> | FocusEvent<HTMLInputElement>): [\n string,\n string,\n] => {\n const formField = queryClosest(target, \".saltFormField\");\n if (formField) {\n const {\n dataset: { field },\n } = formField;\n if (field === undefined) {\n throw Error(\"SessionEditingForm, form field has no field data attribute\");\n }\n return [field, target.value];\n } else {\n throw Error(\"Form control is not enclosed in FormField\");\n }\n};\n\nconst Status = {\n uninitialised: 0,\n unchanged: 1,\n changed: 2,\n invalid: 3,\n};\n\nconst getDataSource = (\n dataSource?: DataSource,\n schema?: TableSchema,\n): DataSource => {\n if (dataSource) {\n return dataSource;\n } else if (schema) {\n return new VuuDataSource({\n bufferSize: 0,\n table: schema.table,\n columns: schema.columns.map((col) => col.name),\n }) as DataSource;\n } else {\n throw Error(\n \"SessionEditingForm: either a DataSource or a TableSchema must be provided\",\n );\n }\n};\n\ntype FormValues = { [key: string]: VuuRowDataItemType | undefined };\n\nexport const SessionEditingForm = ({\n className,\n config: { fields, key: keyField },\n dataSource: dataSourceProp,\n id: idProp,\n onClose,\n schema,\n ...htmlAttributes\n}: SessionEditingFormProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-session-editing-form\",\n css: sessionEditingFormCss,\n window: targetWindow,\n });\n\n const [fieldStatusValues, setFieldStatusValues] = useState<\n Record<string, string | undefined>\n >({});\n const [values, setValues] = useState<FormValues>();\n const [errorMessage, setErrorMessage] = useState(\"\");\n const formContentRef = useRef<HTMLDivElement>(null);\n const initialDataRef = useRef<FormValues>(undefined);\n const dataStatusRef = useRef(Status.uninitialised);\n\n const dataSource = useMemo(() => {\n const ds = getDataSource(dataSourceProp, schema);\n const { columns } = ds;\n const columnMap = buildColumnMap(ds.columns);\n\n const applyServerData = (data: VuuDataRow) => {\n if (columnMap) {\n const values: { [key: string]: VuuRowDataItemType } = {};\n for (const column of columns) {\n values[column] = data[columnMap[column]];\n }\n if (dataStatusRef.current === Status.uninitialised) {\n dataStatusRef.current = Status.unchanged;\n initialDataRef.current = values;\n }\n setValues(values);\n }\n };\n\n ds.subscribe({ range: Range(0, 5) }, (message) => {\n if (message.type === \"viewport-update\" && message.rows) {\n if (dataStatusRef.current === Status.uninitialised) {\n applyServerData(message.rows[0]);\n } else {\n console.log(\"what do we do with server updates\");\n }\n }\n });\n return ds;\n }, [dataSourceProp, schema]);\n\n const id = useIdMemo(idProp);\n\n const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n (evt) => {\n const [field, value] = getFieldNameAndValue(evt);\n const { type } = getField(fields, field);\n const typedValue = getTypedValue(value, type);\n setValues((values = {}) => {\n const newValues = {\n ...values,\n [field]: typedValue,\n };\n const notUpdated = shallowEquals(newValues, initialDataRef.current);\n dataStatusRef.current = notUpdated\n ? Status.unchanged\n : typedValue !== undefined\n ? Status.changed\n : Status.invalid;\n return newValues;\n });\n },\n [fields],\n );\n\n const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n async (evt) => {\n const [column, value] = getFieldNameAndValue(evt);\n const key = values?.[keyField];\n // TODO link this with client side validation if we're going to use it\n const { type } = getField(fields, column);\n const data = getTypedValue(value, type, true);\n if (typeof key === \"string\") {\n const response = await dataSource.rpcRequest?.({\n params: {\n key,\n column,\n data,\n },\n rpcName: \"editCell\",\n type: \"RPC_REQUEST\",\n });\n if (response?.type === \"SUCCESS_RESULT\") {\n setFieldStatusValues((map) => ({\n ...map,\n [column]: undefined,\n }));\n } else if (response?.type === \"ERROR_RESULT\") {\n console.log(`edit rejected ${response.errorMessage}`);\n setFieldStatusValues((map) => ({\n ...map,\n [column]: response.errorMessage,\n }));\n }\n }\n },\n [dataSource, fields, keyField, values],\n );\n\n // const applyAction = useCallback(\n // // eslint-disable-next-line @typescript-eslint/no-explicit-any\n // (action: any) => {\n // if (action?.type === \"CLOSE_DIALOG_ACTION\") {\n // onClose?.();\n // }\n // },\n // [onClose],\n // );\n\n const handleSubmit = useCallback(async () => {\n const response = await dataSource.rpcRequest?.({\n params: { comment: \"\" },\n rpcName: \"submitForm\",\n type: \"RPC_REQUEST\",\n });\n if (response?.type === \"SUCCESS_RESULT\") {\n // applyAction(response.action);\n onClose?.();\n } else if (response?.type === \"ERROR_RESULT\") {\n setErrorMessage(response.errorMessage);\n }\n }, [dataSource, onClose]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (evt) => {\n if (evt.key === \"Enter\" && dataStatusRef.current === Status.changed) {\n handleSubmit();\n }\n },\n [handleSubmit],\n );\n\n const handleCancel = useCallback(() => {\n onClose?.();\n }, [onClose]);\n\n const getFormControl = (field: FormFieldDescriptor) => {\n const value = String(values?.[field.name] ?? \"\");\n if (field.readonly || field.name === keyField) {\n return (\n <div className={`${classBase}-fieldValue vuuReadOnly`}>{value}</div>\n );\n } else {\n return (\n <Input\n className={`${classBase}-fieldValue`}\n onBlur={handleBlur}\n onChange={handleChange}\n value={value}\n id={`${id}-input-${field.name}`}\n />\n );\n }\n };\n\n useEffect(() => {\n if (formContentRef.current) {\n const firstInput = formContentRef.current.querySelector(\n \"input\",\n ) as HTMLInputElement;\n if (firstInput) {\n setTimeout(() => {\n firstInput.focus();\n firstInput.select();\n }, 100);\n }\n }\n }, []);\n\n useEffect(() => {\n return () => {\n if (dataSource) {\n dataSource.unsubscribe();\n }\n };\n }, [dataSource]);\n\n const isDirty = dataStatusRef.current === Status.changed;\n return (\n <div {...htmlAttributes} className={cx(classBase, className)}>\n {errorMessage ? (\n <div\n className={`${classBase}-errorBanner`}\n data-icon=\"error\"\n title={errorMessage}\n >\n Error, edit(s) not saved\n </div>\n ) : undefined}\n <div\n className={`${classBase}-content`}\n ref={formContentRef}\n onKeyDown={handleKeyDown}\n >\n {fields.map((field) => (\n <FormField\n className={`${classBase}-field`}\n data-field={field.name}\n key={field.name}\n necessity={field.required ? \"required\" : \"optional\"}\n readOnly={field.readonly}\n validationStatus={\n fieldStatusValues[field.name] ? \"error\" : undefined\n }\n >\n <FormFieldLabel>{field?.label ?? field.description}</FormFieldLabel>\n {getFormControl(field)}\n <FormFieldHelperText>\n {fieldStatusValues[field.name] ?? \"\"}\n </FormFieldHelperText>\n </FormField>\n ))}\n </div>\n <div className={`${classBase}-buttonbar salt-theme salt-density-high`}>\n <Button\n type=\"submit\"\n variant=\"cta\"\n disabled={!isDirty}\n onClick={handleSubmit}\n >\n Submit\n </Button>\n <Button variant=\"secondary\" onClick={handleCancel}>\n Cancel\n </Button>\n </div>\n </div>\n );\n};\n"],"names":["queryClosest","VuuDataSource","useWindow","useComponentCssInjection","sessionEditingFormCss","useState","useRef","useMemo","buildColumnMap","values","Range","useIdMemo","useCallback","getTypedValue","shallowEquals","jsx","Input","useEffect","jsxs","FormField","FormFieldLabel","FormFieldHelperText","Button"],"mappings":"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"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var editFormCss = ".EditForm {\n display: flex;\n flex-direction: column;\n gap: var(--salt-spacing-400);\n height: 100%;\n padding: var(--salt-spacing-200) var(--salt-spacing-200)\n var(--salt-spacing-200) var(--salt-spacing-400);\n width: 100%;\n}\n\n.EditForm-form-fields {\n display: flex;\n flex-direction: column;\n gap: var(--salt-spacing-400);\n}\n\n.EditForm-buttons {\n align-items: center;\n display: flex;\n gap: var(--salt-spacing-200);\n justify-content: flex-end;\n}\n\n.EditForm-field {\n display: flex;\n\n .saltFormField {\n flex: 1 1 auto;\n }\n\n .EditForm-edit-indicator {\n flex: 0 0 14px;\n position: relative;\n }\n\n &[data-edited=\"true\"] {\n .EditForm-edit-indicator:after {\n background-color: var(--salt-content-secondary-foreground);\n border-radius: 5px;\n content: \"\";\n height: 10px;\n position: absolute;\n top: 50%;\n right: -3px;\n width: 10px;\n }\n }\n}\n";
|
|
2
|
-
|
|
3
|
-
export { editFormCss as default };
|
|
4
|
-
//# sourceMappingURL=EditForm.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"EditForm.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { FormField, FormFieldLabel, Button } from '@salt-ds/core';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import cx from 'clsx';
|
|
6
|
-
import { registerRules } from './edit-validation-rules.js';
|
|
7
|
-
import { useEditForm } from './useEditForm.js';
|
|
8
|
-
import editFormCss from './EditForm.css.js';
|
|
9
|
-
import { getDataItemEditControl } from './get-data-item-edit-control.js';
|
|
10
|
-
|
|
11
|
-
const classBase = "EditForm";
|
|
12
|
-
registerRules();
|
|
13
|
-
const EditForm = ({
|
|
14
|
-
className,
|
|
15
|
-
dataSource,
|
|
16
|
-
formFieldDescriptors,
|
|
17
|
-
onSubmit: onSubmitProp,
|
|
18
|
-
...htmlAttributes
|
|
19
|
-
}) => {
|
|
20
|
-
const targetWindow = useWindow();
|
|
21
|
-
useComponentCssInjection({
|
|
22
|
-
testId: "vuu-edit-form",
|
|
23
|
-
css: editFormCss,
|
|
24
|
-
window: targetWindow
|
|
25
|
-
});
|
|
26
|
-
const {
|
|
27
|
-
editedFields,
|
|
28
|
-
editEntity,
|
|
29
|
-
errorMessages,
|
|
30
|
-
formFieldsContainerRef,
|
|
31
|
-
isClean,
|
|
32
|
-
ok,
|
|
33
|
-
onCancel,
|
|
34
|
-
onChange,
|
|
35
|
-
onCommit,
|
|
36
|
-
onFocus,
|
|
37
|
-
onSubmit
|
|
38
|
-
} = useEditForm({
|
|
39
|
-
dataSource,
|
|
40
|
-
formFieldDescriptors,
|
|
41
|
-
onSubmit: onSubmitProp
|
|
42
|
-
});
|
|
43
|
-
return /* @__PURE__ */ jsxs(
|
|
44
|
-
"div",
|
|
45
|
-
{
|
|
46
|
-
...htmlAttributes,
|
|
47
|
-
className: cx(classBase, className),
|
|
48
|
-
onFocus,
|
|
49
|
-
children: [
|
|
50
|
-
/* @__PURE__ */ jsx("div", { className: `${classBase}-form-fields`, ref: formFieldsContainerRef, children: formFieldDescriptors.map((dataDescriptor) => {
|
|
51
|
-
const { name, label = name } = dataDescriptor;
|
|
52
|
-
const errorMessage = errorMessages[name];
|
|
53
|
-
const isEdited = !isClean && editedFields.includes(name);
|
|
54
|
-
return /* @__PURE__ */ jsxs(
|
|
55
|
-
"div",
|
|
56
|
-
{
|
|
57
|
-
className: `${classBase}-field`,
|
|
58
|
-
"data-edited": isEdited,
|
|
59
|
-
children: [
|
|
60
|
-
/* @__PURE__ */ jsxs(FormField, { "data-field": name, children: [
|
|
61
|
-
/* @__PURE__ */ jsx(FormFieldLabel, { children: label }),
|
|
62
|
-
getDataItemEditControl({
|
|
63
|
-
InputProps: {
|
|
64
|
-
onChange,
|
|
65
|
-
value: editEntity?.[name]?.toString() ?? ""
|
|
66
|
-
},
|
|
67
|
-
dataDescriptor,
|
|
68
|
-
errorMessage,
|
|
69
|
-
onCommit
|
|
70
|
-
})
|
|
71
|
-
] }),
|
|
72
|
-
/* @__PURE__ */ jsx("div", { className: `${classBase}-edit-indicator` })
|
|
73
|
-
]
|
|
74
|
-
},
|
|
75
|
-
name
|
|
76
|
-
);
|
|
77
|
-
}) }),
|
|
78
|
-
/* @__PURE__ */ jsxs("div", { className: `${classBase}-buttons`, children: [
|
|
79
|
-
/* @__PURE__ */ jsx(Button, { disabled: isClean, onClick: onCancel, children: "Cancel" }),
|
|
80
|
-
/* @__PURE__ */ jsx(Button, { onClick: onSubmit, disabled: !ok || isClean, children: "Save" })
|
|
81
|
-
] })
|
|
82
|
-
]
|
|
83
|
-
}
|
|
84
|
-
);
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
export { EditForm };
|
|
88
|
-
//# sourceMappingURL=EditForm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"EditForm.js","sources":["../../../../packages/vuu-data-react/src/data-editing/EditForm.tsx"],"sourcesContent":["import { Button, FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { registerRules } from \"./edit-validation-rules\";\nimport { EditFormHookProps, useEditForm } from \"./useEditForm\";\n\nimport editFormCss from \"./EditForm.css\";\nimport { getDataItemEditControl } from \"./get-data-item-edit-control\";\n\nconst classBase = \"EditForm\";\n\nregisterRules();\n\nexport interface EditFormProps\n extends EditFormHookProps,\n Omit<HTMLAttributes<HTMLDivElement>, \"onSubmit\"> {}\n\nexport const EditForm = ({\n className,\n dataSource,\n formFieldDescriptors,\n onSubmit: onSubmitProp,\n ...htmlAttributes\n}: EditFormProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-edit-form\",\n css: editFormCss,\n window: targetWindow,\n });\n\n const {\n editedFields,\n editEntity,\n errorMessages,\n formFieldsContainerRef,\n isClean,\n ok,\n onCancel,\n onChange,\n onCommit,\n onFocus,\n onSubmit,\n } = useEditForm({\n dataSource,\n formFieldDescriptors,\n onSubmit: onSubmitProp,\n });\n\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className)}\n onFocus={onFocus}\n >\n <div className={`${classBase}-form-fields`} ref={formFieldsContainerRef}>\n {formFieldDescriptors.map((dataDescriptor) => {\n const { name, label = name } = dataDescriptor;\n const errorMessage = errorMessages[name];\n const isEdited = !isClean && editedFields.includes(name);\n\n return (\n <div\n className={`${classBase}-field`}\n key={name}\n data-edited={isEdited}\n >\n <FormField data-field={name}>\n <FormFieldLabel>{label}</FormFieldLabel>\n {getDataItemEditControl({\n InputProps: {\n onChange,\n value: editEntity?.[name]?.toString() ?? \"\",\n },\n dataDescriptor,\n errorMessage,\n onCommit,\n })}\n </FormField>\n <div className={`${classBase}-edit-indicator`} />\n </div>\n );\n })}\n </div>\n <div className={`${classBase}-buttons`}>\n <Button disabled={isClean} onClick={onCancel}>\n Cancel\n </Button>\n <Button onClick={onSubmit} disabled={!ok || isClean}>\n Save\n </Button>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAWA,MAAM,SAAY,GAAA,UAAA;AAElB,aAAc,EAAA;AAMP,MAAM,WAAW,CAAC;AAAA,EACvB,SAAA;AAAA,EACA,UAAA;AAAA,EACA,oBAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,GAAG;AACL,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAA,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,sBAAA;AAAA,IACA,OAAA;AAAA,IACA,EAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,MACE,WAAY,CAAA;AAAA,IACd,UAAA;AAAA,IACA,oBAAA;AAAA,IACA,QAAU,EAAA;AAAA,GACX,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,OAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,YAAA,CAAA,EAAgB,KAAK,sBAC9C,EAAA,QAAA,EAAA,oBAAA,CAAqB,GAAI,CAAA,CAAC,cAAmB,KAAA;AAC5C,UAAA,MAAM,EAAE,IAAA,EAAM,KAAQ,GAAA,IAAA,EAAS,GAAA,cAAA;AAC/B,UAAM,MAAA,YAAA,GAAe,cAAc,IAAI,CAAA;AACvC,UAAA,MAAM,QAAW,GAAA,CAAC,OAAW,IAAA,YAAA,CAAa,SAAS,IAAI,CAAA;AAEvD,UACE,uBAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,MAAA,CAAA;AAAA,cAEvB,aAAa,EAAA,QAAA;AAAA,cAEb,QAAA,EAAA;AAAA,gCAAC,IAAA,CAAA,SAAA,EAAA,EAAU,cAAY,IACrB,EAAA,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,kBAAgB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,kBACtB,sBAAuB,CAAA;AAAA,oBACtB,UAAY,EAAA;AAAA,sBACV,QAAA;AAAA,sBACA,KAAO,EAAA,UAAA,GAAa,IAAI,CAAA,EAAG,UAAc,IAAA;AAAA,qBAC3C;AAAA,oBACA,cAAA;AAAA,oBACA,YAAA;AAAA,oBACA;AAAA,mBACD;AAAA,iBACH,EAAA,CAAA;AAAA,gCACC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAmB,eAAA,CAAA,EAAA;AAAA;AAAA,aAAA;AAAA,YAf1C;AAAA,WAgBP;AAAA,SAEH,CACH,EAAA,CAAA;AAAA,wBACC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,QAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAO,EAAA,EAAA,QAAA,EAAU,OAAS,EAAA,OAAA,EAAS,UAAU,QAE9C,EAAA,QAAA,EAAA,CAAA;AAAA,0BACA,GAAA,CAAC,UAAO,OAAS,EAAA,QAAA,EAAU,UAAU,CAAC,EAAA,IAAM,SAAS,QAErD,EAAA,MAAA,EAAA;AAAA,SACF,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var unsavedChangesCss = ".vuuUnsavedChanges-table {\n border-collapse: collapse;\n width: 100%;\n}\n\n.vuuUnsavedChanges-row {\n box-sizing: content-box;\n border-bottom: solid 1px var(--salt-separable-secondary-borderColor);\n height: 32px;\n\n td {\n padding: 0 var(--salt-spacing-200);\n }\n}\n\n.vuuUnsavedChanges-fieldName {\n text-transform: capitalize;\n}\n\n.vuuUnsavedChanges-new {\n font-weight: bold;\n}\n";
|
|
2
|
-
|
|
3
|
-
export { unsavedChangesCss as default };
|
|
4
|
-
//# sourceMappingURL=UnsavedChangesReport.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"UnsavedChangesReport.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
3
|
-
import { useWindow } from '@salt-ds/window';
|
|
4
|
-
import { buildFormEditState } from './form-edit-state.js';
|
|
5
|
-
import unsavedChangesCss from './UnsavedChangesReport.css.js';
|
|
6
|
-
|
|
7
|
-
const classBase = "vuuUnsavedChanges";
|
|
8
|
-
const UnsavedChangesReport = ({
|
|
9
|
-
entity,
|
|
10
|
-
editedEntity
|
|
11
|
-
}) => {
|
|
12
|
-
const targetWindow = useWindow();
|
|
13
|
-
useComponentCssInjection({
|
|
14
|
-
testId: "vuu-unsaved-changes-report",
|
|
15
|
-
css: unsavedChangesCss,
|
|
16
|
-
window: targetWindow
|
|
17
|
-
});
|
|
18
|
-
const { editedFields } = buildFormEditState(entity, editedEntity);
|
|
19
|
-
return /* @__PURE__ */ jsx("div", { className: classBase, children: /* @__PURE__ */ jsx("table", { className: `${classBase}-table`, children: /* @__PURE__ */ jsx("tbody", { children: editedFields.map((fieldName, i) => /* @__PURE__ */ jsxs("tr", { className: `${classBase}-row`, children: [
|
|
20
|
-
/* @__PURE__ */ jsx("td", { className: `${classBase}-fieldName`, children: fieldName }),
|
|
21
|
-
/* @__PURE__ */ jsx("td", { className: `${classBase}-old`, children: entity[fieldName] }),
|
|
22
|
-
/* @__PURE__ */ jsx("td", { className: `${classBase}-new`, children: editedEntity[fieldName] })
|
|
23
|
-
] }, i)) }) }) });
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
export { UnsavedChangesReport };
|
|
27
|
-
//# sourceMappingURL=UnsavedChangesReport.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"UnsavedChangesReport.js","sources":["../../../../packages/vuu-data-react/src/data-editing/UnsavedChangesReport.tsx"],"sourcesContent":["import { Entity } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { buildFormEditState } from \"./form-edit-state\";\n\nimport unsavedChangesCss from \"./UnsavedChangesReport.css\";\n\nconst classBase = \"vuuUnsavedChanges\";\n\nexport interface UnsavedChangesReportProps<T extends Entity = Entity> {\n entity: T;\n editedEntity: T;\n}\n\nexport const UnsavedChangesReport = ({\n entity,\n editedEntity,\n}: UnsavedChangesReportProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-unsaved-changes-report\",\n css: unsavedChangesCss,\n window: targetWindow,\n });\n\n const { editedFields } = buildFormEditState(entity, editedEntity);\n\n return (\n <div className={classBase}>\n <table className={`${classBase}-table`}>\n <tbody>\n {editedFields.map((fieldName, i) => (\n <tr className={`${classBase}-row`} key={i}>\n <td className={`${classBase}-fieldName`}>{fieldName}</td>\n <td className={`${classBase}-old`}>{entity[fieldName]}</td>\n <td className={`${classBase}-new`}>{editedEntity[fieldName]}</td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,mBAAA;AAOX,MAAM,uBAAuB,CAAC;AAAA,EACnC,MAAA;AAAA,EACA;AACF,CAAiC,KAAA;AAC/B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,4BAAA;AAAA,IACR,GAAK,EAAA,iBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAiB,GAAA,kBAAA,CAAmB,QAAQ,YAAY,CAAA;AAEhE,EACE,uBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,SAAA,EACd,8BAAC,OAAM,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC5B,MAAA,CAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,WACE,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,SAAW,EAAA,CAAA,0BAC3B,IAAG,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CACzB,IAAA,CAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAG,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,cAAe,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,oBACpD,GAAA,CAAC,QAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,IAAA,CAAA,EAAA,QAAA,EAAA,MAAA,CAAO,SAAS,CAAE,EAAA,CAAA;AAAA,oBACtD,GAAA,CAAC,QAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,IAAA,CAAA,EAAA,QAAA,EAAA,YAAA,CAAa,SAAS,CAAE,EAAA;AAAA,GAAA,EAAA,EAHtB,CAIxC,CACD,CACH,EAAA,CAAA,EACF,CACF,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { isTypeDescriptor, getEditRuleValidator } from '@vuu-ui/vuu-utils';
|
|
2
|
-
|
|
3
|
-
const OK = { ok: true };
|
|
4
|
-
const NO_VALIDATION_RULES = [];
|
|
5
|
-
function getEditValidationRules(descriptor, editPhase) {
|
|
6
|
-
if (isTypeDescriptor(descriptor.type)) {
|
|
7
|
-
return editPhase === "*" ? descriptor.type.rules ?? [] : descriptor.type.rules?.filter(
|
|
8
|
-
({ phase: a = "commit" }) => a === editPhase
|
|
9
|
-
) ?? NO_VALIDATION_RULES;
|
|
10
|
-
}
|
|
11
|
-
return NO_VALIDATION_RULES;
|
|
12
|
-
}
|
|
13
|
-
const buildValidationChecker = (rules) => (value, editPhase) => applyRules(rules, value, editPhase);
|
|
14
|
-
function applyRules(rules, value, editPhase = "commit") {
|
|
15
|
-
const result = { ok: true };
|
|
16
|
-
for (const rule of rules) {
|
|
17
|
-
const { phase = "commit" } = rule;
|
|
18
|
-
if (editPhase === "*" || phase === editPhase) {
|
|
19
|
-
const applyRuleToValue = getEditRuleValidator(rule.name);
|
|
20
|
-
if (applyRuleToValue) {
|
|
21
|
-
const res = applyRuleToValue(rule, value);
|
|
22
|
-
if (!res.ok) {
|
|
23
|
-
result.ok = false;
|
|
24
|
-
(result.messages ?? (result.messages = [])).push(res.message);
|
|
25
|
-
}
|
|
26
|
-
} else {
|
|
27
|
-
throw Error(
|
|
28
|
-
`editable-utils applyRules, no validator registered for rule '${rule.name}'`
|
|
29
|
-
);
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
return result;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export { OK, buildValidationChecker, getEditValidationRules };
|
|
37
|
-
//# sourceMappingURL=edit-rule-validation-checker.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"edit-rule-validation-checker.js","sources":["../../../../packages/vuu-data-react/src/data-editing/edit-rule-validation-checker.ts"],"sourcesContent":["import type {\n DataValueDescriptor,\n DataValueValidationChecker,\n DataValueValidationResult,\n EditPhase,\n EditRuleValidationSuccessResult,\n EditValidationRule,\n} from \"@vuu-ui/vuu-data-types\";\nimport type { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { getEditRuleValidator, isTypeDescriptor } from \"@vuu-ui/vuu-utils\";\n\nexport const OK: EditRuleValidationSuccessResult = { ok: true };\n\nconst NO_VALIDATION_RULES: EditValidationRule[] = [] as const;\n\nexport function getEditValidationRules(\n descriptor: DataValueDescriptor,\n editPhase: EditPhase | \"*\",\n) {\n if (isTypeDescriptor(descriptor.type)) {\n return editPhase === \"*\"\n ? (descriptor.type.rules ?? [])\n : (descriptor.type.rules?.filter(\n ({ phase: a = \"commit\" }) => a === editPhase,\n ) ?? NO_VALIDATION_RULES);\n }\n\n return NO_VALIDATION_RULES;\n}\n\nexport const buildValidationChecker =\n (rules: EditValidationRule[]): DataValueValidationChecker =>\n (value: VuuRowDataItemType | undefined, editPhase: EditPhase | \"*\") =>\n applyRules(rules, value, editPhase);\n\nfunction applyRules(\n rules: EditValidationRule[],\n value?: VuuRowDataItemType,\n editPhase: EditPhase | \"*\" = \"commit\",\n) {\n const result: { ok: boolean; messages?: string[] } = { ok: true };\n for (const rule of rules) {\n const { phase = \"commit\" } = rule;\n if (editPhase === \"*\" || phase === editPhase) {\n const applyRuleToValue = getEditRuleValidator(rule.name);\n if (applyRuleToValue) {\n const res = applyRuleToValue(rule, value);\n if (!res.ok) {\n result.ok = false;\n (result.messages ?? (result.messages = [])).push(res.message);\n }\n } else {\n throw Error(\n `editable-utils applyRules, no validator registered for rule '${rule.name}'`,\n );\n }\n }\n }\n return result as DataValueValidationResult;\n}\n"],"names":[],"mappings":";;AAWa,MAAA,EAAA,GAAsC,EAAE,EAAA,EAAI,IAAK;AAE9D,MAAM,sBAA4C,EAAC;AAEnC,SAAA,sBAAA,CACd,YACA,SACA,EAAA;AACA,EAAI,IAAA,gBAAA,CAAiB,UAAW,CAAA,IAAI,CAAG,EAAA;AACrC,IAAO,OAAA,SAAA,KAAc,MAChB,UAAW,CAAA,IAAA,CAAK,SAAS,EAAC,GAC1B,UAAW,CAAA,IAAA,CAAK,KAAO,EAAA,MAAA;AAAA,MACtB,CAAC,EAAE,KAAA,EAAO,CAAI,GAAA,QAAA,OAAe,CAAM,KAAA;AAAA,KAChC,IAAA,mBAAA;AAAA;AAGX,EAAO,OAAA,mBAAA;AACT;AAEa,MAAA,sBAAA,GACX,CAAC,KACD,KAAA,CAAC,OAAuC,SACtC,KAAA,UAAA,CAAW,KAAO,EAAA,KAAA,EAAO,SAAS;AAEtC,SAAS,UACP,CAAA,KAAA,EACA,KACA,EAAA,SAAA,GAA6B,QAC7B,EAAA;AACA,EAAM,MAAA,MAAA,GAA+C,EAAE,EAAA,EAAI,IAAK,EAAA;AAChE,EAAA,KAAA,MAAW,QAAQ,KAAO,EAAA;AACxB,IAAM,MAAA,EAAE,KAAQ,GAAA,QAAA,EAAa,GAAA,IAAA;AAC7B,IAAI,IAAA,SAAA,KAAc,GAAO,IAAA,KAAA,KAAU,SAAW,EAAA;AAC5C,MAAM,MAAA,gBAAA,GAAmB,oBAAqB,CAAA,IAAA,CAAK,IAAI,CAAA;AACvD,MAAA,IAAI,gBAAkB,EAAA;AACpB,QAAM,MAAA,GAAA,GAAM,gBAAiB,CAAA,IAAA,EAAM,KAAK,CAAA;AACxC,QAAI,IAAA,CAAC,IAAI,EAAI,EAAA;AACX,UAAA,MAAA,CAAO,EAAK,GAAA,KAAA;AACZ,UAAC,CAAA,MAAA,CAAO,aAAa,MAAO,CAAA,QAAA,GAAW,EAAK,CAAA,EAAA,IAAA,CAAK,IAAI,OAAO,CAAA;AAAA;AAC9D,OACK,MAAA;AACL,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,6DAAA,EAAgE,KAAK,IAAI,CAAA,CAAA;AAAA,SAC3E;AAAA;AACF;AACF;AAEF,EAAO,OAAA,MAAA;AACT;;;;"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { registerComponent } from '@vuu-ui/vuu-utils';
|
|
2
|
-
import { OK } from './edit-rule-validation-checker.js';
|
|
3
|
-
|
|
4
|
-
const isString = (value) => typeof value === "string";
|
|
5
|
-
const NUMERIC = /^(?:[0-9]|\.)+$/;
|
|
6
|
-
const CharValidatorNumeric = (rule, value) => {
|
|
7
|
-
if (isString(value)) {
|
|
8
|
-
if (value.trim() === "") {
|
|
9
|
-
return OK;
|
|
10
|
-
} else if (value.match(NUMERIC)) {
|
|
11
|
-
return OK;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
return { ok: false, message: "only numeric characters are permitted" };
|
|
15
|
-
};
|
|
16
|
-
const ValueValidatorInteger = (rule, value) => {
|
|
17
|
-
if (isString(value)) {
|
|
18
|
-
if (value.trim() === "") {
|
|
19
|
-
return OK;
|
|
20
|
-
} else {
|
|
21
|
-
if (!value.match(NUMERIC)) {
|
|
22
|
-
return {
|
|
23
|
-
ok: false,
|
|
24
|
-
message: "value must be an integer, invalid character"
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
if (parseFloat(value) === parseInt(value)) {
|
|
28
|
-
return OK;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
return { ok: false, message: "must be an integer value" };
|
|
33
|
-
};
|
|
34
|
-
const registerRules = () => {
|
|
35
|
-
registerComponent(
|
|
36
|
-
"char-numeric",
|
|
37
|
-
CharValidatorNumeric,
|
|
38
|
-
"data-edit-validator",
|
|
39
|
-
{}
|
|
40
|
-
);
|
|
41
|
-
registerComponent(
|
|
42
|
-
"value-integer",
|
|
43
|
-
ValueValidatorInteger,
|
|
44
|
-
"data-edit-validator",
|
|
45
|
-
{}
|
|
46
|
-
);
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export { registerRules };
|
|
50
|
-
//# sourceMappingURL=edit-validation-rules.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"edit-validation-rules.js","sources":["../../../../packages/vuu-data-react/src/data-editing/edit-validation-rules.ts"],"sourcesContent":["import type { EditRuleValidator } from \"@vuu-ui/vuu-data-types\";\nimport type { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { OK } from \"./edit-rule-validation-checker\";\n\nconst isString = (value?: VuuRowDataItemType): value is string =>\n typeof value === \"string\";\n\nconst NUMERIC = /^(?:[0-9]|\\.)+$/;\n\nconst CharValidatorNumeric: EditRuleValidator = (rule, value) => {\n if (isString(value)) {\n if (value.trim() === \"\") {\n return OK;\n } else if (value.match(NUMERIC)) {\n return OK;\n }\n }\n return { ok: false, message: \"only numeric characters are permitted\" };\n};\n\nconst ValueValidatorInteger: EditRuleValidator = (rule, value) => {\n if (isString(value)) {\n if (value.trim() === \"\") {\n return OK;\n } else {\n if (!value.match(NUMERIC)) {\n return {\n ok: false,\n message: \"value must be an integer, invalid character\",\n };\n }\n if (parseFloat(value) === parseInt(value)) {\n return OK;\n }\n }\n }\n return { ok: false, message: \"must be an integer value\" };\n};\n\nexport const registerRules = () => {\n registerComponent(\n \"char-numeric\",\n CharValidatorNumeric,\n \"data-edit-validator\",\n {},\n );\n registerComponent(\n \"value-integer\",\n ValueValidatorInteger,\n \"data-edit-validator\",\n {},\n );\n};\n"],"names":[],"mappings":";;;AAKA,MAAM,QAAW,GAAA,CAAC,KAChB,KAAA,OAAO,KAAU,KAAA,QAAA;AAEnB,MAAM,OAAU,GAAA,iBAAA;AAEhB,MAAM,oBAAA,GAA0C,CAAC,IAAA,EAAM,KAAU,KAAA;AAC/D,EAAI,IAAA,QAAA,CAAS,KAAK,CAAG,EAAA;AACnB,IAAI,IAAA,KAAA,CAAM,IAAK,EAAA,KAAM,EAAI,EAAA;AACvB,MAAO,OAAA,EAAA;AAAA,KACE,MAAA,IAAA,KAAA,CAAM,KAAM,CAAA,OAAO,CAAG,EAAA;AAC/B,MAAO,OAAA,EAAA;AAAA;AACT;AAEF,EAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,uCAAwC,EAAA;AACvE,CAAA;AAEA,MAAM,qBAAA,GAA2C,CAAC,IAAA,EAAM,KAAU,KAAA;AAChE,EAAI,IAAA,QAAA,CAAS,KAAK,CAAG,EAAA;AACnB,IAAI,IAAA,KAAA,CAAM,IAAK,EAAA,KAAM,EAAI,EAAA;AACvB,MAAO,OAAA,EAAA;AAAA,KACF,MAAA;AACL,MAAA,IAAI,CAAC,KAAA,CAAM,KAAM,CAAA,OAAO,CAAG,EAAA;AACzB,QAAO,OAAA;AAAA,UACL,EAAI,EAAA,KAAA;AAAA,UACJ,OAAS,EAAA;AAAA,SACX;AAAA;AAEF,MAAA,IAAI,UAAW,CAAA,KAAK,CAAM,KAAA,QAAA,CAAS,KAAK,CAAG,EAAA;AACzC,QAAO,OAAA,EAAA;AAAA;AACT;AACF;AAEF,EAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,0BAA2B,EAAA;AAC1D,CAAA;AAEO,MAAM,gBAAgB,MAAM;AACjC,EAAA,iBAAA;AAAA,IACE,cAAA;AAAA,IACA,oBAAA;AAAA,IACA,qBAAA;AAAA,IACA;AAAC,GACH;AACA,EAAA,iBAAA;AAAA,IACE,eAAA;AAAA,IACA,qBAAA;AAAA,IACA,qBAAA;AAAA,IACA;AAAC,GACH;AACF;;;;"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
const CLEAN_FORM = {
|
|
2
|
-
isClean: true,
|
|
3
|
-
editedFields: []
|
|
4
|
-
};
|
|
5
|
-
const buildFormEditState = (entity, newEntity) => {
|
|
6
|
-
if (entity === void 0) {
|
|
7
|
-
return CLEAN_FORM;
|
|
8
|
-
} else {
|
|
9
|
-
const editedFields = [];
|
|
10
|
-
for (const [fieldName, value] of Object.entries(entity)) {
|
|
11
|
-
if (value !== newEntity[fieldName]) {
|
|
12
|
-
editedFields.push(fieldName);
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
return {
|
|
16
|
-
isClean: editedFields.length === 0,
|
|
17
|
-
editedFields
|
|
18
|
-
};
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
export { CLEAN_FORM, buildFormEditState };
|
|
23
|
-
//# sourceMappingURL=form-edit-state.js.map
|