@vuu-ui/vuu-data-react 0.13.6 → 0.13.8
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/cjs/index.js +1556 -40
- package/cjs/index.js.map +1 -1
- package/esm/index.js +1535 -15
- package/esm/index.js.map +1 -1
- package/package.json +14 -14
- 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 -56
- package/cjs/data-editing/get-data-item-edit-control.js.map +0 -1
- package/cjs/data-editing/useEditForm.js +0 -249
- package/cjs/data-editing/useEditForm.js.map +0 -1
- package/cjs/datasource-provider/RestDataSourceProvider.js +0 -78
- package/cjs/datasource-provider/RestDataSourceProvider.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 -54
- 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 -72
- package/cjs/hooks/useSessionDataSource.js.map +0 -1
- package/cjs/hooks/useTypeaheadSuggestions.js +0 -41
- package/cjs/hooks/useTypeaheadSuggestions.js.map +0 -1
- package/cjs/hooks/useVisualLinks.js +0 -83
- package/cjs/hooks/useVisualLinks.js.map +0 -1
- package/cjs/hooks/useVuuMenuActions.js +0 -362
- 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/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 -269
- 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 -54
- package/esm/data-editing/get-data-item-edit-control.js.map +0 -1
- package/esm/data-editing/useEditForm.js +0 -247
- package/esm/data-editing/useEditForm.js.map +0 -1
- package/esm/datasource-provider/RestDataSourceProvider.js +0 -75
- package/esm/datasource-provider/RestDataSourceProvider.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 -52
- 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 -70
- package/esm/hooks/useSessionDataSource.js.map +0 -1
- package/esm/hooks/useTypeaheadSuggestions.js +0 -38
- package/esm/hooks/useTypeaheadSuggestions.js.map +0 -1
- package/esm/hooks/useVisualLinks.js +0 -81
- package/esm/hooks/useVisualLinks.js.map +0 -1
- package/esm/hooks/useVuuMenuActions.js +0 -358
- 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/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 -267
- package/esm/session-editing-form/SessionEditingForm.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"form-edit-state.js","sources":["../../src/data-editing/form-edit-state.ts"],"sourcesContent":["import { Entity } from \"@vuu-ui/vuu-utils\";\n\nexport type FormEditState = {\n isClean: boolean;\n editedFields: string[];\n};\n\nexport const CLEAN_FORM: FormEditState = {\n isClean: true,\n editedFields: [],\n};\n\nexport const buildFormEditState = (\n entity: Entity | undefined,\n newEntity: Entity,\n): FormEditState => {\n if (entity === undefined) {\n return CLEAN_FORM;\n } else {\n const editedFields: string[] = [];\n for (const [fieldName, value] of Object.entries(entity)) {\n if (value !== newEntity[fieldName]) {\n editedFields.push(fieldName);\n }\n }\n\n return {\n isClean: editedFields.length === 0,\n editedFields,\n };\n }\n};\n"],"names":[],"mappings":"AAOO,MAAM,UAA4B,GAAA;AAAA,EACvC,OAAS,EAAA,IAAA;AAAA,EACT,cAAc;AAChB;AAEa,MAAA,kBAAA,GAAqB,CAChC,MAAA,EACA,SACkB,KAAA;AAClB,EAAA,IAAI,WAAW,KAAW,CAAA,EAAA;AACxB,IAAO,OAAA,UAAA;AAAA,GACF,MAAA;AACL,IAAA,MAAM,eAAyB,EAAC;AAChC,IAAA,KAAA,MAAW,CAAC,SAAW,EAAA,KAAK,KAAK,MAAO,CAAA,OAAA,CAAQ,MAAM,CAAG,EAAA;AACvD,MAAI,IAAA,KAAA,KAAU,SAAU,CAAA,SAAS,CAAG,EAAA;AAClC,QAAA,YAAA,CAAa,KAAK,SAAS,CAAA;AAAA;AAC7B;AAGF,IAAO,OAAA;AAAA,MACL,OAAA,EAAS,aAAa,MAAW,KAAA,CAAA;AAAA,MACjC;AAAA,KACF;AAAA;AAEJ;;;;"}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { VuuInput, VuuDatePicker, VuuTypeaheadInput } from '@vuu-ui/vuu-ui-controls';
|
|
3
|
-
import { isDateTimeDataValue } from '@vuu-ui/vuu-utils';
|
|
4
|
-
|
|
5
|
-
const getDataItemEditControl = ({
|
|
6
|
-
InputProps: InputProps2,
|
|
7
|
-
TypeaheadProps,
|
|
8
|
-
commitWhenCleared,
|
|
9
|
-
dataDescriptor,
|
|
10
|
-
errorMessage,
|
|
11
|
-
onCommit,
|
|
12
|
-
table
|
|
13
|
-
}) => {
|
|
14
|
-
const handleCommitNumber = (evt, value) => {
|
|
15
|
-
onCommit(evt, value.toString());
|
|
16
|
-
};
|
|
17
|
-
if (dataDescriptor.editable === false) {
|
|
18
|
-
return /* @__PURE__ */ jsx(
|
|
19
|
-
VuuInput,
|
|
20
|
-
{
|
|
21
|
-
variant: "secondary",
|
|
22
|
-
...InputProps2,
|
|
23
|
-
onCommit,
|
|
24
|
-
readOnly: true
|
|
25
|
-
}
|
|
26
|
-
);
|
|
27
|
-
} else if (isDateTimeDataValue(dataDescriptor)) {
|
|
28
|
-
return /* @__PURE__ */ jsx(VuuDatePicker, { onCommit: handleCommitNumber });
|
|
29
|
-
} else if (dataDescriptor.serverDataType === "string" && table) {
|
|
30
|
-
return /* @__PURE__ */ jsx(
|
|
31
|
-
VuuTypeaheadInput,
|
|
32
|
-
{
|
|
33
|
-
...InputProps2,
|
|
34
|
-
...TypeaheadProps,
|
|
35
|
-
column: dataDescriptor.name,
|
|
36
|
-
onCommit,
|
|
37
|
-
table
|
|
38
|
-
}
|
|
39
|
-
);
|
|
40
|
-
}
|
|
41
|
-
return /* @__PURE__ */ jsx(
|
|
42
|
-
VuuInput,
|
|
43
|
-
{
|
|
44
|
-
variant: "secondary",
|
|
45
|
-
...InputProps2,
|
|
46
|
-
commitWhenCleared,
|
|
47
|
-
onCommit,
|
|
48
|
-
errorMessage
|
|
49
|
-
}
|
|
50
|
-
);
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
export { getDataItemEditControl };
|
|
54
|
-
//# sourceMappingURL=get-data-item-edit-control.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"get-data-item-edit-control.js","sources":["../../src/data-editing/get-data-item-edit-control.tsx"],"sourcesContent":["import type {\n DataValueDescriptor,\n TableSchemaTable,\n} from \"@vuu-ui/vuu-data-types\";\nimport {\n VuuDatePicker,\n VuuInput,\n VuuTypeaheadInput,\n VuuTypeaheadInputProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { CommitHandler, isDateTimeDataValue } from \"@vuu-ui/vuu-utils\";\nimport { InputProps } from \"@salt-ds/core\";\n\nexport interface DataItemEditControlProps {\n InputProps?: Partial<InputProps>;\n TypeaheadProps?: Pick<VuuTypeaheadInputProps, \"highlightFirstSuggestion\">;\n commitWhenCleared?: boolean;\n /**\n * A table column or form field Descriptor.\n */\n dataDescriptor: DataValueDescriptor;\n errorMessage?: string;\n onCommit: CommitHandler<HTMLElement>;\n table?: TableSchemaTable;\n}\n\nexport type ValidationStatus = \"initial\" | true | string;\n\nexport const getDataItemEditControl = ({\n InputProps,\n TypeaheadProps,\n commitWhenCleared,\n dataDescriptor,\n errorMessage,\n onCommit,\n table,\n}: DataItemEditControlProps) => {\n const handleCommitNumber: CommitHandler<HTMLElement, number> = (\n evt,\n value,\n ) => {\n onCommit(evt, value.toString());\n };\n\n if (dataDescriptor.editable === false) {\n return (\n <VuuInput\n variant=\"secondary\"\n {...InputProps}\n onCommit={onCommit}\n readOnly\n />\n );\n } else if (isDateTimeDataValue(dataDescriptor)) {\n return <VuuDatePicker onCommit={handleCommitNumber} />;\n } else if (dataDescriptor.serverDataType === \"string\" && table) {\n return (\n <VuuTypeaheadInput\n {...InputProps}\n {...TypeaheadProps}\n column={dataDescriptor.name}\n onCommit={onCommit}\n table={table}\n />\n );\n }\n return (\n <VuuInput\n variant=\"secondary\"\n {...InputProps}\n commitWhenCleared={commitWhenCleared}\n onCommit={onCommit}\n errorMessage={errorMessage}\n />\n );\n};\n"],"names":["InputProps"],"mappings":";;;;AA4BO,MAAM,yBAAyB,CAAC;AAAA,EACrC,UAAAA,EAAAA,WAAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EAAM,MAAA,kBAAA,GAAyD,CAC7D,GAAA,EACA,KACG,KAAA;AACH,IAAS,QAAA,CAAA,GAAA,EAAK,KAAM,CAAA,QAAA,EAAU,CAAA;AAAA,GAChC;AAEA,EAAI,IAAA,cAAA,CAAe,aAAa,KAAO,EAAA;AACrC,IACE,uBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACP,GAAGA,WAAAA;AAAA,QACJ,QAAA;AAAA,QACA,QAAQ,EAAA;AAAA;AAAA,KACV;AAAA,GAEJ,MAAA,IAAW,mBAAoB,CAAA,cAAc,CAAG,EAAA;AAC9C,IAAO,uBAAA,GAAA,CAAC,aAAc,EAAA,EAAA,QAAA,EAAU,kBAAoB,EAAA,CAAA;AAAA,GAC3C,MAAA,IAAA,cAAA,CAAe,cAAmB,KAAA,QAAA,IAAY,KAAO,EAAA;AAC9D,IACE,uBAAA,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACE,GAAGA,WAAAA;AAAA,QACH,GAAG,cAAA;AAAA,QACJ,QAAQ,cAAe,CAAA,IAAA;AAAA,QACvB,QAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA;AAGJ,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,WAAA;AAAA,MACP,GAAGA,WAAAA;AAAA,MACJ,iBAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -1,247 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useDialogContext } from '@vuu-ui/vuu-popups';
|
|
3
|
-
import { viewportRpcRequest, buildColumnMap, Range, messageHasDataRows, dataSourceRowToEntity, queryClosest } from '@vuu-ui/vuu-utils';
|
|
4
|
-
import { Button } from '@salt-ds/core';
|
|
5
|
-
import { useRef, useState, useCallback, useMemo } from 'react';
|
|
6
|
-
import { UnsavedChangesReport } from './UnsavedChangesReport.js';
|
|
7
|
-
import { getEditValidationRules, buildValidationChecker } from './edit-rule-validation-checker.js';
|
|
8
|
-
import { CLEAN_FORM, buildFormEditState } from './form-edit-state.js';
|
|
9
|
-
|
|
10
|
-
const CLEAN_VALIDATION = {
|
|
11
|
-
ok: true,
|
|
12
|
-
messages: {}
|
|
13
|
-
};
|
|
14
|
-
const getValidationChecker = (descriptor, editPhase) => {
|
|
15
|
-
const rules = getEditValidationRules(descriptor, editPhase) ?? [];
|
|
16
|
-
return buildValidationChecker(rules);
|
|
17
|
-
};
|
|
18
|
-
const nextValidationState = (state, dataDescriptor, value) => {
|
|
19
|
-
const check = getValidationChecker(dataDescriptor, "change");
|
|
20
|
-
const result = check(value, "change");
|
|
21
|
-
const { name } = dataDescriptor;
|
|
22
|
-
const { ok: wasOk, messages: existingMessages } = state;
|
|
23
|
-
if (result.ok) {
|
|
24
|
-
if (!wasOk) {
|
|
25
|
-
const fieldsInError = Object.keys(existingMessages);
|
|
26
|
-
if (fieldsInError.includes(name)) {
|
|
27
|
-
if (fieldsInError.length === 1) {
|
|
28
|
-
return { ok: true, messages: {} };
|
|
29
|
-
} else {
|
|
30
|
-
const messages = { ...existingMessages };
|
|
31
|
-
delete messages[name];
|
|
32
|
-
return { ok: false, messages };
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
} else {
|
|
37
|
-
return {
|
|
38
|
-
ok: false,
|
|
39
|
-
messages: {
|
|
40
|
-
...existingMessages,
|
|
41
|
-
[name]: result.messages.join("\n")
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
}
|
|
45
|
-
return state;
|
|
46
|
-
};
|
|
47
|
-
function find(descriptors, fieldname) {
|
|
48
|
-
const d = descriptors.find(({ name }) => name === fieldname);
|
|
49
|
-
if (d) {
|
|
50
|
-
return d;
|
|
51
|
-
}
|
|
52
|
-
throw Error(`DataValueDescriptor not found for field ${fieldname}`);
|
|
53
|
-
}
|
|
54
|
-
const getField = (target) => {
|
|
55
|
-
const fieldElement = queryClosest(target, "[data-field]");
|
|
56
|
-
if (fieldElement) {
|
|
57
|
-
return fieldElement.dataset.field;
|
|
58
|
-
} else {
|
|
59
|
-
throw Error("no field ");
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
const useEditForm = ({
|
|
63
|
-
dataSource,
|
|
64
|
-
formFieldDescriptors,
|
|
65
|
-
onSubmit
|
|
66
|
-
}) => {
|
|
67
|
-
const { showDialog, closeDialog } = useDialogContext();
|
|
68
|
-
const currentDataSource = useRef(void 0);
|
|
69
|
-
const formFieldsContainerRef = useRef(null);
|
|
70
|
-
const entityRef = useRef(void 0);
|
|
71
|
-
const focusedFieldRef = useRef("");
|
|
72
|
-
const originalEntityRef = useRef(void 0);
|
|
73
|
-
const formEditStateRef = useRef(CLEAN_FORM);
|
|
74
|
-
const validationStateRef = useRef({
|
|
75
|
-
ok: true,
|
|
76
|
-
messages: {}
|
|
77
|
-
});
|
|
78
|
-
const [entity, _setEntity] = useState();
|
|
79
|
-
const [, forceUpdate] = useState({});
|
|
80
|
-
const setFormEditState = useCallback((newState) => {
|
|
81
|
-
formEditStateRef.current = newState;
|
|
82
|
-
}, []);
|
|
83
|
-
const setEntity = useCallback(
|
|
84
|
-
(newEntity) => {
|
|
85
|
-
setFormEditState(
|
|
86
|
-
buildFormEditState(originalEntityRef.current, newEntity)
|
|
87
|
-
);
|
|
88
|
-
entityRef.current = newEntity;
|
|
89
|
-
_setEntity(newEntity);
|
|
90
|
-
},
|
|
91
|
-
[setFormEditState]
|
|
92
|
-
);
|
|
93
|
-
const submitChanges = useCallback(async () => {
|
|
94
|
-
const rpcResponse = await currentDataSource.current?.rpcCall?.(
|
|
95
|
-
viewportRpcRequest("VP_BULK_EDIT_SUBMIT_RPC")
|
|
96
|
-
);
|
|
97
|
-
console.log({ rpcResponse });
|
|
98
|
-
}, []);
|
|
99
|
-
const showSaveOrDiscardPrompt = useCallback(async () => {
|
|
100
|
-
const { current: currentEntity } = entityRef;
|
|
101
|
-
const { current: originalEntity } = originalEntityRef;
|
|
102
|
-
let resolver = void 0;
|
|
103
|
-
const save = async () => {
|
|
104
|
-
await submitChanges();
|
|
105
|
-
closeDialog();
|
|
106
|
-
resolver?.("saved");
|
|
107
|
-
};
|
|
108
|
-
const discard = () => {
|
|
109
|
-
closeDialog();
|
|
110
|
-
resolver?.("discarded");
|
|
111
|
-
};
|
|
112
|
-
requestAnimationFrame(() => {
|
|
113
|
-
showDialog(
|
|
114
|
-
/* @__PURE__ */ jsx(
|
|
115
|
-
UnsavedChangesReport,
|
|
116
|
-
{
|
|
117
|
-
entity: originalEntity,
|
|
118
|
-
editedEntity: currentEntity
|
|
119
|
-
}
|
|
120
|
-
),
|
|
121
|
-
"Unsaved Changes",
|
|
122
|
-
[
|
|
123
|
-
/* @__PURE__ */ jsx(Button, { onClick: discard, children: "Discard Changes" }, "cancel"),
|
|
124
|
-
/* @__PURE__ */ jsx(Button, { onClick: save, children: "Save Changes" }, "submit")
|
|
125
|
-
],
|
|
126
|
-
true
|
|
127
|
-
// hideCloseButton
|
|
128
|
-
);
|
|
129
|
-
});
|
|
130
|
-
return new Promise((resolve) => {
|
|
131
|
-
resolver = resolve;
|
|
132
|
-
});
|
|
133
|
-
}, [closeDialog, showDialog, submitChanges]);
|
|
134
|
-
useMemo(async () => {
|
|
135
|
-
if (dataSource) {
|
|
136
|
-
if (formEditStateRef.current.isClean === false) {
|
|
137
|
-
await showSaveOrDiscardPrompt();
|
|
138
|
-
}
|
|
139
|
-
currentDataSource.current = dataSource;
|
|
140
|
-
originalEntityRef.current = void 0;
|
|
141
|
-
const columnMap = buildColumnMap(dataSource.columns);
|
|
142
|
-
dataSource?.subscribe({ range: Range(0, 1) }, (message) => {
|
|
143
|
-
if (messageHasDataRows(message)) {
|
|
144
|
-
const [row] = message.rows;
|
|
145
|
-
if (row) {
|
|
146
|
-
const entity2 = dataSourceRowToEntity(row, columnMap);
|
|
147
|
-
if (originalEntityRef.current === void 0) {
|
|
148
|
-
originalEntityRef.current = entity2;
|
|
149
|
-
setEntity(entity2);
|
|
150
|
-
}
|
|
151
|
-
const { editedFields: editedFields2 } = buildFormEditState(
|
|
152
|
-
entityRef.current,
|
|
153
|
-
entity2
|
|
154
|
-
);
|
|
155
|
-
if (editedFields2.length === 1) {
|
|
156
|
-
setEntity(entity2);
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
});
|
|
161
|
-
}
|
|
162
|
-
}, [dataSource, setEntity, showSaveOrDiscardPrompt]);
|
|
163
|
-
const setValidationState = useCallback((state) => {
|
|
164
|
-
validationStateRef.current = state;
|
|
165
|
-
forceUpdate({});
|
|
166
|
-
}, []);
|
|
167
|
-
const handleFieldCommit = useCallback(
|
|
168
|
-
(_, value) => {
|
|
169
|
-
const { current: fieldName } = focusedFieldRef;
|
|
170
|
-
const dataDescriptor = find(formFieldDescriptors, fieldName);
|
|
171
|
-
const { current: state } = validationStateRef;
|
|
172
|
-
const newState = nextValidationState(state, dataDescriptor, value);
|
|
173
|
-
if (newState !== state) {
|
|
174
|
-
setValidationState(newState);
|
|
175
|
-
}
|
|
176
|
-
if (newState.ok && dataSource?.tableSchema) {
|
|
177
|
-
const { key } = dataSource.tableSchema;
|
|
178
|
-
const keyValue = entity?.[key];
|
|
179
|
-
dataSource?.applyEdit(keyValue, fieldName, value).then((rpcResponse) => {
|
|
180
|
-
console.log({ rpcResponse });
|
|
181
|
-
});
|
|
182
|
-
}
|
|
183
|
-
},
|
|
184
|
-
[dataSource, entity, formFieldDescriptors, setValidationState]
|
|
185
|
-
);
|
|
186
|
-
const handleFieldChange = useCallback(
|
|
187
|
-
(evt) => {
|
|
188
|
-
const { current: fieldName } = focusedFieldRef;
|
|
189
|
-
if (fieldName) {
|
|
190
|
-
const input = queryClosest(evt.target, "input", true);
|
|
191
|
-
const dataDescriptor = find(formFieldDescriptors, fieldName);
|
|
192
|
-
const value = input.value;
|
|
193
|
-
const { current: state } = validationStateRef;
|
|
194
|
-
const newState = nextValidationState(state, dataDescriptor, value);
|
|
195
|
-
if (newState !== state) {
|
|
196
|
-
setValidationState(newState);
|
|
197
|
-
}
|
|
198
|
-
setEntity({ ...entity, [fieldName]: value });
|
|
199
|
-
}
|
|
200
|
-
},
|
|
201
|
-
[entity, formFieldDescriptors, setEntity, setValidationState]
|
|
202
|
-
);
|
|
203
|
-
const handleFormSubmit = useCallback(async () => {
|
|
204
|
-
submitChanges();
|
|
205
|
-
setFormEditState(CLEAN_FORM);
|
|
206
|
-
originalEntityRef.current = entity;
|
|
207
|
-
onSubmit?.();
|
|
208
|
-
forceUpdate({});
|
|
209
|
-
}, [entity, onSubmit, setFormEditState, submitChanges]);
|
|
210
|
-
const handleFormCancel = useCallback(async () => {
|
|
211
|
-
setFormEditState(CLEAN_FORM);
|
|
212
|
-
setValidationState(CLEAN_VALIDATION);
|
|
213
|
-
setEntity(originalEntityRef.current);
|
|
214
|
-
}, [setEntity, setFormEditState, setValidationState]);
|
|
215
|
-
const handleFocus = useCallback((evt) => {
|
|
216
|
-
if (formFieldsContainerRef.current?.contains(evt.target)) {
|
|
217
|
-
const fieldName = getField(evt.target);
|
|
218
|
-
if (fieldName) {
|
|
219
|
-
if (fieldName) {
|
|
220
|
-
focusedFieldRef.current = fieldName;
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
}, []);
|
|
225
|
-
const {
|
|
226
|
-
current: { ok, messages: errorMessages }
|
|
227
|
-
} = validationStateRef;
|
|
228
|
-
const {
|
|
229
|
-
current: { isClean, editedFields }
|
|
230
|
-
} = formEditStateRef;
|
|
231
|
-
return {
|
|
232
|
-
editedFields,
|
|
233
|
-
editEntity: entity,
|
|
234
|
-
errorMessages,
|
|
235
|
-
formFieldsContainerRef,
|
|
236
|
-
isClean,
|
|
237
|
-
ok,
|
|
238
|
-
onCancel: handleFormCancel,
|
|
239
|
-
onChange: handleFieldChange,
|
|
240
|
-
onCommit: handleFieldCommit,
|
|
241
|
-
onFocus: handleFocus,
|
|
242
|
-
onSubmit: handleFormSubmit
|
|
243
|
-
};
|
|
244
|
-
};
|
|
245
|
-
|
|
246
|
-
export { useEditForm };
|
|
247
|
-
//# sourceMappingURL=useEditForm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useEditForm.js","sources":["../../src/data-editing/useEditForm.tsx"],"sourcesContent":["import type { DataSource, DataValueDescriptor } from \"@vuu-ui/vuu-data-types\";\nimport { useDialogContext } from \"@vuu-ui/vuu-popups\";\nimport type { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n CommitHandler,\n Entity,\n Range,\n buildColumnMap,\n dataSourceRowToEntity,\n messageHasDataRows,\n queryClosest,\n viewportRpcRequest,\n} from \"@vuu-ui/vuu-utils\";\nimport { Button } from \"@salt-ds/core\";\nimport {\n FocusEventHandler,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { UnsavedChangesReport } from \"./UnsavedChangesReport\";\nimport {\n buildValidationChecker,\n getEditValidationRules,\n} from \"./edit-rule-validation-checker\";\nimport {\n CLEAN_FORM,\n FormEditState,\n buildFormEditState,\n} from \"./form-edit-state\";\n\nexport interface EditFormHookProps {\n dataSource?: DataSource;\n formFieldDescriptors: DataValueDescriptor[];\n onSubmit?: () => void;\n}\n\ntype ValidationState = {\n ok: boolean;\n messages: Record<string, string>;\n};\n\nconst CLEAN_VALIDATION: ValidationState = {\n ok: true,\n messages: {},\n};\n\nconst getValidationChecker = (\n descriptor: DataValueDescriptor,\n editPhase: \"change\" | \"commit\",\n) => {\n const rules = getEditValidationRules(descriptor, editPhase) ?? [];\n return buildValidationChecker(rules);\n};\n\nconst nextValidationState = (\n state: ValidationState,\n dataDescriptor: DataValueDescriptor,\n value: VuuRowDataItemType,\n): ValidationState => {\n const check = getValidationChecker(dataDescriptor, \"change\");\n const result = check(value, \"change\");\n const { name } = dataDescriptor;\n\n const { ok: wasOk, messages: existingMessages } = state;\n\n if (result.ok) {\n if (!wasOk) {\n // if this field was the only one in error, the overall state\n // will now be ok, but not if there is still one or more other\n // field still in error.\n const fieldsInError = Object.keys(existingMessages);\n if (fieldsInError.includes(name)) {\n if (fieldsInError.length === 1) {\n return { ok: true, messages: {} };\n } else {\n const messages = { ...existingMessages };\n delete messages[name];\n return { ok: false, messages };\n }\n }\n }\n } else {\n return {\n ok: false,\n messages: {\n ...existingMessages,\n [name]: result.messages.join(\"\\n\"),\n },\n };\n }\n\n return state;\n};\n\nfunction find(descriptors: DataValueDescriptor[], fieldname: string) {\n const d = descriptors.find(({ name }) => name === fieldname);\n if (d) {\n return d;\n }\n throw Error(`DataValueDescriptor not found for field ${fieldname}`);\n}\n\nconst getField = (target: EventTarget | HTMLElement) => {\n const fieldElement = queryClosest(target, \"[data-field]\");\n if (fieldElement) {\n return fieldElement.dataset.field as string;\n } else {\n throw Error(\"no field \");\n }\n};\n\ntype Resolver = (value: unknown) => void;\n\nexport const useEditForm = ({\n dataSource,\n formFieldDescriptors,\n onSubmit,\n}: EditFormHookProps) => {\n const { showDialog, closeDialog } = useDialogContext();\n\n const currentDataSource = useRef<DataSource>(undefined);\n const formFieldsContainerRef = useRef<HTMLDivElement>(null);\n const entityRef = useRef<Entity>(undefined);\n const focusedFieldRef = useRef(\"\");\n const originalEntityRef = useRef<Entity>(undefined);\n const formEditStateRef = useRef<FormEditState>(CLEAN_FORM);\n const validationStateRef = useRef<ValidationState>({\n ok: true,\n messages: {},\n });\n\n const [entity, _setEntity] = useState<Entity>();\n const [, forceUpdate] = useState({});\n\n const setFormEditState = useCallback((newState: FormEditState) => {\n formEditStateRef.current = newState;\n }, []);\n\n const setEntity = useCallback(\n (newEntity: Entity) => {\n setFormEditState(\n buildFormEditState(originalEntityRef.current, newEntity),\n );\n entityRef.current = newEntity;\n _setEntity(newEntity);\n },\n [setFormEditState],\n );\n\n const submitChanges = useCallback(async () => {\n const rpcResponse = await currentDataSource.current?.rpcCall?.(\n viewportRpcRequest(\"VP_BULK_EDIT_SUBMIT_RPC\"),\n );\n console.log({ rpcResponse });\n }, []);\n\n const showSaveOrDiscardPrompt = useCallback(async () => {\n const { current: currentEntity } = entityRef;\n const { current: originalEntity } = originalEntityRef;\n let resolver: Resolver | undefined = undefined;\n const save = async () => {\n await submitChanges();\n closeDialog();\n resolver?.(\"saved\");\n };\n\n const discard = () => {\n closeDialog();\n resolver?.(\"discarded\");\n };\n\n requestAnimationFrame(() => {\n showDialog(\n <UnsavedChangesReport\n entity={originalEntity as Entity}\n editedEntity={currentEntity as Entity}\n />,\n \"Unsaved Changes\",\n [\n <Button key=\"cancel\" onClick={discard}>\n Discard Changes\n </Button>,\n <Button key=\"submit\" onClick={save}>\n Save Changes\n </Button>,\n ],\n true, // hideCloseButton\n );\n });\n\n return new Promise((resolve) => {\n resolver = resolve;\n });\n }, [closeDialog, showDialog, submitChanges]);\n\n useMemo(async () => {\n if (dataSource) {\n if (formEditStateRef.current.isClean === false) {\n await showSaveOrDiscardPrompt();\n }\n\n currentDataSource.current = dataSource;\n\n originalEntityRef.current = undefined;\n\n const columnMap = buildColumnMap(dataSource.columns);\n\n dataSource?.subscribe({ range: Range(0, 1) }, (message) => {\n if (messageHasDataRows(message)) {\n const [row] = message.rows;\n if (row) {\n const entity = dataSourceRowToEntity(row, columnMap);\n if (originalEntityRef.current === undefined) {\n originalEntityRef.current = entity;\n setEntity(entity);\n }\n\n const { editedFields } = buildFormEditState(\n entityRef.current,\n entity,\n );\n\n // for controls which do not yield incremental changes, e.g dropdown, calendar\n // we apply the server update to our entity.\n if (editedFields.length === 1) {\n setEntity(entity);\n }\n\n // Do not overwrite entity here, just check that values returned by server\n // match whats expected\n }\n }\n });\n }\n }, [dataSource, setEntity, showSaveOrDiscardPrompt]);\n\n const setValidationState = useCallback((state: ValidationState) => {\n validationStateRef.current = state;\n forceUpdate({});\n }, []);\n\n const handleFieldCommit = useCallback<CommitHandler<HTMLElement>>(\n (_, value) => {\n const { current: fieldName } = focusedFieldRef;\n const dataDescriptor = find(formFieldDescriptors, fieldName);\n\n const { current: state } = validationStateRef;\n const newState = nextValidationState(state, dataDescriptor, value);\n if (newState !== state) {\n setValidationState(newState);\n }\n\n if (newState.ok && dataSource?.tableSchema) {\n const { key } = dataSource.tableSchema;\n const keyValue = entity?.[key] as string;\n dataSource\n ?.applyEdit(keyValue, fieldName, value)\n .then((rpcResponse) => {\n console.log({ rpcResponse });\n });\n }\n },\n [dataSource, entity, formFieldDescriptors, setValidationState],\n );\n\n const handleFieldChange = useCallback(\n (evt: SyntheticEvent<HTMLInputElement>) => {\n const { current: fieldName } = focusedFieldRef;\n if (fieldName) {\n const input = queryClosest<HTMLInputElement>(evt.target, \"input\", true);\n const dataDescriptor = find(formFieldDescriptors, fieldName);\n const value = input.value as string;\n const { current: state } = validationStateRef;\n const newState = nextValidationState(state, dataDescriptor, value);\n if (newState !== state) {\n setValidationState(newState);\n }\n\n setEntity({ ...entity, [fieldName]: value });\n }\n },\n [entity, formFieldDescriptors, setEntity, setValidationState],\n );\n\n const handleFormSubmit = useCallback(async () => {\n submitChanges();\n setFormEditState(CLEAN_FORM);\n originalEntityRef.current = entity;\n onSubmit?.();\n forceUpdate({});\n }, [entity, onSubmit, setFormEditState, submitChanges]);\n\n const handleFormCancel = useCallback(async () => {\n // const rpcResponse = await dataSource?.rpcCall?.(\n // viewportRpcRequest(\"VP_BULK_EDIT_CANCEL_RPC\"),\n // );\n setFormEditState(CLEAN_FORM);\n setValidationState(CLEAN_VALIDATION);\n // console.log({ rpcResponse });\n setEntity(originalEntityRef.current as Entity);\n }, [setEntity, setFormEditState, setValidationState]);\n\n const handleFocus = useCallback<FocusEventHandler>((evt) => {\n // Ignore focus on popup Calendars, Lists etc\n if (formFieldsContainerRef.current?.contains(evt.target)) {\n const fieldName = getField(evt.target);\n if (fieldName) {\n if (fieldName) {\n focusedFieldRef.current = fieldName;\n }\n }\n }\n }, []);\n\n const {\n current: { ok, messages: errorMessages },\n } = validationStateRef;\n\n const {\n current: { isClean, editedFields },\n } = formEditStateRef;\n\n return {\n editedFields,\n editEntity: entity,\n errorMessages,\n formFieldsContainerRef,\n isClean,\n ok,\n onCancel: handleFormCancel,\n onChange: handleFieldChange,\n onCommit: handleFieldCommit,\n onFocus: handleFocus,\n onSubmit: handleFormSubmit,\n };\n};\n"],"names":["entity","editedFields"],"mappings":"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"}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { RestDataSource } from '@vuu-ui/vuu-data-remote';
|
|
3
|
-
import { isObject, DataProvider } from '@vuu-ui/vuu-utils';
|
|
4
|
-
|
|
5
|
-
const serverAPI = (schemas) => ({
|
|
6
|
-
getTableList: async () => {
|
|
7
|
-
if (schemas) {
|
|
8
|
-
return {
|
|
9
|
-
tables: Object.keys(schemas).map((key) => {
|
|
10
|
-
const [module, table] = key.split(":");
|
|
11
|
-
return { module, table };
|
|
12
|
-
})
|
|
13
|
-
};
|
|
14
|
-
} else {
|
|
15
|
-
console.log(`Rest data source does not yet support table list`);
|
|
16
|
-
return { tables: [] };
|
|
17
|
-
}
|
|
18
|
-
},
|
|
19
|
-
getTableSchema: async ({ module, table }) => {
|
|
20
|
-
const schema = schemas?.[`${module}:${table}`];
|
|
21
|
-
if (schema) {
|
|
22
|
-
return schema;
|
|
23
|
-
} else {
|
|
24
|
-
throw Error(
|
|
25
|
-
`Rest data source does not yet support table schema (${table})`
|
|
26
|
-
);
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
rpcCall: async (message) => Promise.reject(
|
|
30
|
-
Error(`Rest data source does not yet support RPC (${message.type})`)
|
|
31
|
-
)
|
|
32
|
-
});
|
|
33
|
-
const getServerAPI = (schemas) => async () => serverAPI(schemas);
|
|
34
|
-
const isRestDataSourceExtension = (o) => {
|
|
35
|
-
return isObject(o) && "createHttpHeaders" in o && typeof o["createHttpHeaders"] === "function";
|
|
36
|
-
};
|
|
37
|
-
const getRestDataSourceClass = ({
|
|
38
|
-
createHttpHeaders
|
|
39
|
-
}) => {
|
|
40
|
-
if (createHttpHeaders) {
|
|
41
|
-
return class ExtendedClass extends RestDataSource {
|
|
42
|
-
constructor(props) {
|
|
43
|
-
super(props);
|
|
44
|
-
}
|
|
45
|
-
get httpHeaders() {
|
|
46
|
-
return createHttpHeaders();
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
} else {
|
|
50
|
-
return RestDataSource;
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
const RestDataSourceProvider = ({
|
|
54
|
-
children,
|
|
55
|
-
createHttpHeaders,
|
|
56
|
-
tableSchemas,
|
|
57
|
-
url
|
|
58
|
-
}) => {
|
|
59
|
-
RestDataSource.api = url;
|
|
60
|
-
const restDataSourceClass = getRestDataSourceClass({ createHttpHeaders });
|
|
61
|
-
return /* @__PURE__ */ jsx(
|
|
62
|
-
DataProvider,
|
|
63
|
-
{
|
|
64
|
-
VuuDataSource: restDataSourceClass,
|
|
65
|
-
dataSourceExtensions: { createHttpHeaders },
|
|
66
|
-
getServerAPI: getServerAPI(tableSchemas),
|
|
67
|
-
isLocalData: false,
|
|
68
|
-
tableSchemas,
|
|
69
|
-
children
|
|
70
|
-
}
|
|
71
|
-
);
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
export { RestDataSourceProvider, isRestDataSourceExtension };
|
|
75
|
-
//# sourceMappingURL=RestDataSourceProvider.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RestDataSourceProvider.js","sources":["../../src/datasource-provider/RestDataSourceProvider.tsx"],"sourcesContent":["import { RestDataSource } from \"@vuu-ui/vuu-data-remote\";\nimport {\n DataSourceConstructorProps,\n ServerAPI,\n TableSchema,\n} from \"@vuu-ui/vuu-data-types\";\nimport {\n VuuCreateVisualLink,\n VuuRemoveVisualLink,\n VuuRpcMenuRequest,\n VuuRpcServiceRequest,\n VuuRpcViewportRequest,\n VuuTable,\n} from \"@vuu-ui/vuu-protocol-types\";\nimport { DataProvider, isObject } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode } from \"react\";\n\nconst serverAPI = (\n schemas?: Record<string, TableSchema>,\n): Pick<ServerAPI, \"getTableList\" | \"getTableSchema\" | \"rpcCall\"> => ({\n getTableList: async () => {\n if (schemas) {\n return {\n tables: Object.keys(schemas).map((key) => {\n const [module, table] = key.split(\":\");\n return { module, table };\n }),\n };\n } else {\n console.log(`Rest data source does not yet support table list`);\n return { tables: [] };\n }\n },\n getTableSchema: async ({ module, table }: VuuTable) => {\n const schema = schemas?.[`${module}:${table}`];\n if (schema) {\n return schema;\n } else {\n throw Error(\n `Rest data source does not yet support table schema (${table})`,\n );\n }\n },\n rpcCall: async (\n message:\n | VuuRpcServiceRequest\n | VuuRpcMenuRequest\n | VuuRpcViewportRequest\n | VuuCreateVisualLink\n | VuuRemoveVisualLink,\n ) =>\n Promise.reject(\n Error(`Rest data source does not yet support RPC (${message.type})`),\n ),\n});\n\nconst getServerAPI = (schemas?: Record<string, TableSchema>) => async () =>\n serverAPI(schemas);\n\nexport type RestDataSourceExtension = {\n createHttpHeaders?: () => Headers;\n};\n\nexport const isRestDataSourceExtension = (\n o?: unknown,\n): o is RestDataSourceExtension => {\n return (\n isObject(o) &&\n \"createHttpHeaders\" in o &&\n typeof o[\"createHttpHeaders\"] === \"function\"\n );\n};\n\nconst getRestDataSourceClass = ({\n createHttpHeaders,\n}: RestDataSourceExtension) => {\n if (createHttpHeaders) {\n return class ExtendedClass extends RestDataSource {\n constructor(props: DataSourceConstructorProps) {\n super(props);\n }\n get httpHeaders(): Headers | undefined {\n return createHttpHeaders();\n }\n };\n } else {\n return RestDataSource;\n }\n};\n\nexport const RestDataSourceProvider = ({\n children,\n createHttpHeaders,\n tableSchemas,\n url,\n}: {\n children: ReactNode;\n tableSchemas?: Record<string, TableSchema>;\n url: string;\n} & RestDataSourceExtension) => {\n RestDataSource.api = url;\n\n const restDataSourceClass = getRestDataSourceClass({ createHttpHeaders });\n\n return (\n <DataProvider\n VuuDataSource={restDataSourceClass}\n dataSourceExtensions={{ createHttpHeaders }}\n getServerAPI={getServerAPI(tableSchemas)}\n isLocalData={false}\n tableSchemas={tableSchemas}\n >\n {children}\n </DataProvider>\n );\n};\n"],"names":[],"mappings":";;;;AAiBA,MAAM,SAAA,GAAY,CAChB,OACoE,MAAA;AAAA,EACpE,cAAc,YAAY;AACxB,IAAA,IAAI,OAAS,EAAA;AACX,MAAO,OAAA;AAAA,QACL,QAAQ,MAAO,CAAA,IAAA,CAAK,OAAO,CAAE,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA;AACxC,UAAA,MAAM,CAAC,MAAQ,EAAA,KAAK,CAAI,GAAA,GAAA,CAAI,MAAM,GAAG,CAAA;AACrC,UAAO,OAAA,EAAE,QAAQ,KAAM,EAAA;AAAA,SACxB;AAAA,OACH;AAAA,KACK,MAAA;AACL,MAAA,OAAA,CAAQ,IAAI,CAAkD,gDAAA,CAAA,CAAA;AAC9D,MAAO,OAAA,EAAE,MAAQ,EAAA,EAAG,EAAA;AAAA;AACtB,GACF;AAAA,EACA,cAAgB,EAAA,OAAO,EAAE,MAAA,EAAQ,OAAsB,KAAA;AACrD,IAAA,MAAM,SAAS,OAAU,GAAA,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;AAC7C,IAAA,IAAI,MAAQ,EAAA;AACV,MAAO,OAAA,MAAA;AAAA,KACF,MAAA;AACL,MAAM,MAAA,KAAA;AAAA,QACJ,uDAAuD,KAAK,CAAA,CAAA;AAAA,OAC9D;AAAA;AACF,GACF;AAAA,EACA,OAAA,EAAS,OACP,OAAA,KAOA,OAAQ,CAAA,MAAA;AAAA,IACN,KAAM,CAAA,CAAA,2CAAA,EAA8C,OAAQ,CAAA,IAAI,CAAG,CAAA,CAAA;AAAA;AAEzE,CAAA,CAAA;AAEA,MAAM,YAAe,GAAA,CAAC,OAA0C,KAAA,YAC9D,UAAU,OAAO,CAAA;AAMN,MAAA,yBAAA,GAA4B,CACvC,CACiC,KAAA;AACjC,EACE,OAAA,QAAA,CAAS,CAAC,CACV,IAAA,mBAAA,IAAuB,KACvB,OAAO,CAAA,CAAE,mBAAmB,CAAM,KAAA,UAAA;AAEtC;AAEA,MAAM,yBAAyB,CAAC;AAAA,EAC9B;AACF,CAA+B,KAAA;AAC7B,EAAA,IAAI,iBAAmB,EAAA;AACrB,IAAO,OAAA,MAAM,sBAAsB,cAAe,CAAA;AAAA,MAChD,YAAY,KAAmC,EAAA;AAC7C,QAAA,KAAA,CAAM,KAAK,CAAA;AAAA;AACb,MACA,IAAI,WAAmC,GAAA;AACrC,QAAA,OAAO,iBAAkB,EAAA;AAAA;AAC3B,KACF;AAAA,GACK,MAAA;AACL,IAAO,OAAA,cAAA;AAAA;AAEX,CAAA;AAEO,MAAM,yBAAyB,CAAC;AAAA,EACrC,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAIgC,KAAA;AAC9B,EAAA,cAAA,CAAe,GAAM,GAAA,GAAA;AAErB,EAAA,MAAM,mBAAsB,GAAA,sBAAA,CAAuB,EAAE,iBAAA,EAAmB,CAAA;AAExE,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,aAAe,EAAA,mBAAA;AAAA,MACf,oBAAA,EAAsB,EAAE,iBAAkB,EAAA;AAAA,MAC1C,YAAA,EAAc,aAAa,YAAY,CAAA;AAAA,MACvC,WAAa,EAAA,KAAA;AAAA,MACb,YAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { VuuDataSource, ConnectionManager } from '@vuu-ui/vuu-data-remote';
|
|
3
|
-
import { DataProvider } from '@vuu-ui/vuu-utils';
|
|
4
|
-
import { useAutoLoginToVuuServer } from './useAutoLoginToVuuServer.js';
|
|
5
|
-
|
|
6
|
-
const getServerAPI = () => ConnectionManager.serverAPI;
|
|
7
|
-
const VuuDataSourceProvider = ({
|
|
8
|
-
authenticate,
|
|
9
|
-
autoConnect = false,
|
|
10
|
-
autoLogin = false,
|
|
11
|
-
children,
|
|
12
|
-
websocketUrl
|
|
13
|
-
}) => {
|
|
14
|
-
useAutoLoginToVuuServer({
|
|
15
|
-
authenticate,
|
|
16
|
-
autoConnect,
|
|
17
|
-
autoLogin,
|
|
18
|
-
websocketUrl
|
|
19
|
-
});
|
|
20
|
-
return /* @__PURE__ */ jsx(
|
|
21
|
-
DataProvider,
|
|
22
|
-
{
|
|
23
|
-
VuuDataSource,
|
|
24
|
-
getServerAPI,
|
|
25
|
-
isLocalData: false,
|
|
26
|
-
children
|
|
27
|
-
}
|
|
28
|
-
);
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
export { VuuDataSourceProvider };
|
|
32
|
-
//# sourceMappingURL=VuuDataSourceProvider.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"VuuDataSourceProvider.js","sources":["../../src/datasource-provider/VuuDataSourceProvider.tsx"],"sourcesContent":["import { ConnectionManager, VuuDataSource } from \"@vuu-ui/vuu-data-remote\";\nimport { DataProvider } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode } from \"react\";\nimport { useAutoLoginToVuuServer } from \"./useAutoLoginToVuuServer\";\n\nconst getServerAPI = () => ConnectionManager.serverAPI;\n\nexport const VuuDataSourceProvider = ({\n authenticate,\n autoConnect = false,\n autoLogin = false,\n children,\n websocketUrl,\n}: {\n authenticate?: boolean;\n autoConnect?: boolean;\n autoLogin?: boolean;\n children: ReactNode;\n websocketUrl?: string;\n}) => {\n useAutoLoginToVuuServer({\n authenticate,\n autoConnect,\n autoLogin,\n websocketUrl,\n });\n return (\n <DataProvider\n VuuDataSource={VuuDataSource}\n getServerAPI={getServerAPI}\n isLocalData={false}\n >\n {children}\n </DataProvider>\n );\n};\n"],"names":[],"mappings":";;;;;AAKA,MAAM,YAAA,GAAe,MAAM,iBAAkB,CAAA,SAAA;AAEtC,MAAM,wBAAwB,CAAC;AAAA,EACpC,YAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAAA,EACd,SAAY,GAAA,KAAA;AAAA,EACZ,QAAA;AAAA,EACA;AACF,CAMM,KAAA;AACJ,EAAwB,uBAAA,CAAA;AAAA,IACtB,YAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACD,CAAA;AACD,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,aAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAa,EAAA,KAAA;AAAA,MAEZ;AAAA;AAAA,GACH;AAEJ;;;;"}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { ConnectionManager, authenticate } from '@vuu-ui/vuu-data-remote';
|
|
3
|
-
import { useState, useEffect } from 'react';
|
|
4
|
-
|
|
5
|
-
const useAutoLoginToVuuServer = ({
|
|
6
|
-
authenticate: authenticate$1 = true,
|
|
7
|
-
autoConnect = true,
|
|
8
|
-
// autoLogin = true,
|
|
9
|
-
secure = true,
|
|
10
|
-
websocketUrl
|
|
11
|
-
} = {}) => {
|
|
12
|
-
const [errorMessage, setErrorMessage] = useState("");
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
const connect = async () => {
|
|
15
|
-
try {
|
|
16
|
-
let token = "no-token";
|
|
17
|
-
if (authenticate$1) {
|
|
18
|
-
token = await authenticate(
|
|
19
|
-
"steve",
|
|
20
|
-
"xyz",
|
|
21
|
-
"/api/authn"
|
|
22
|
-
);
|
|
23
|
-
}
|
|
24
|
-
const url = websocketUrl ?? `${secure ? "wss" : "ws"}://localhost/8090/websocket`;
|
|
25
|
-
ConnectionManager.connect({
|
|
26
|
-
url,
|
|
27
|
-
token,
|
|
28
|
-
username: "steve"
|
|
29
|
-
});
|
|
30
|
-
} catch (e) {
|
|
31
|
-
if (e instanceof Error) {
|
|
32
|
-
console.error(e.message);
|
|
33
|
-
setErrorMessage(e.message);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
if (autoConnect) {
|
|
38
|
-
connect();
|
|
39
|
-
}
|
|
40
|
-
return () => {
|
|
41
|
-
if (autoConnect) {
|
|
42
|
-
ConnectionManager.disconnect();
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
}, [authenticate$1, autoConnect, secure, websocketUrl]);
|
|
46
|
-
if (errorMessage) {
|
|
47
|
-
return /* @__PURE__ */ jsx("p", { children: "Unable to authenticate against Vuu Server A Vuu Server instance must be running to show this example." });
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
export { useAutoLoginToVuuServer };
|
|
52
|
-
//# sourceMappingURL=useAutoLoginToVuuServer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useAutoLoginToVuuServer.js","sources":["../../src/datasource-provider/useAutoLoginToVuuServer.tsx"],"sourcesContent":["import {\n authenticate as vuuAuthenticate,\n ConnectionManager,\n} from \"@vuu-ui/vuu-data-remote\";\nimport { useEffect, useState } from \"react\";\n\nexport const useAutoLoginToVuuServer = ({\n authenticate = true,\n autoConnect = true,\n // autoLogin = true,\n secure = true,\n websocketUrl,\n}: {\n authenticate?: boolean;\n autoConnect?: boolean;\n autoLogin?: boolean;\n secure?: boolean;\n websocketUrl?: string;\n} = {}) => {\n const [errorMessage, setErrorMessage] = useState(\"\");\n useEffect(() => {\n const connect = async () => {\n try {\n let token = \"no-token\";\n if (authenticate) {\n token = (await vuuAuthenticate(\n \"steve\",\n \"xyz\",\n \"/api/authn\",\n )) as string;\n }\n\n const url =\n websocketUrl ?? `${secure ? \"wss\" : \"ws\"}://localhost/8090/websocket`;\n\n ConnectionManager.connect({\n url,\n token,\n username: \"steve\",\n });\n } catch (e: unknown) {\n if (e instanceof Error) {\n console.error(e.message);\n setErrorMessage(e.message);\n }\n }\n };\n if (autoConnect) {\n connect();\n }\n\n return () => {\n if (autoConnect) {\n ConnectionManager.disconnect();\n }\n };\n }, [authenticate, autoConnect, secure, websocketUrl]);\n\n if (errorMessage) {\n return (\n <p>\n Unable to authenticate against Vuu Server A Vuu Server instance must be\n running to show this example.\n </p>\n );\n }\n};\n"],"names":["authenticate","vuuAuthenticate"],"mappings":";;;;AAMO,MAAM,0BAA0B,CAAC;AAAA,gBACtCA,cAAe,GAAA,IAAA;AAAA,EACf,WAAc,GAAA,IAAA;AAAA;AAAA,EAEd,MAAS,GAAA,IAAA;AAAA,EACT;AACF,CAAA,GAMI,EAAO,KAAA;AACT,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,EAAE,CAAA;AACnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,YAAY;AAC1B,MAAI,IAAA;AACF,QAAA,IAAI,KAAQ,GAAA,UAAA;AACZ,QAAA,IAAIA,cAAc,EAAA;AAChB,UAAA,KAAA,GAAS,MAAMC,YAAA;AAAA,YACb,OAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA,WACF;AAAA;AAGF,QAAA,MAAM,GACJ,GAAA,YAAA,IAAgB,CAAG,EAAA,MAAA,GAAS,QAAQ,IAAI,CAAA,2BAAA,CAAA;AAE1C,QAAA,iBAAA,CAAkB,OAAQ,CAAA;AAAA,UACxB,GAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAU,EAAA;AAAA,SACX,CAAA;AAAA,eACM,CAAY,EAAA;AACnB,QAAA,IAAI,aAAa,KAAO,EAAA;AACtB,UAAQ,OAAA,CAAA,KAAA,CAAM,EAAE,OAAO,CAAA;AACvB,UAAA,eAAA,CAAgB,EAAE,OAAO,CAAA;AAAA;AAC3B;AACF,KACF;AACA,IAAA,IAAI,WAAa,EAAA;AACf,MAAQ,OAAA,EAAA;AAAA;AAGV,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAa,EAAA;AACf,QAAA,iBAAA,CAAkB,UAAW,EAAA;AAAA;AAC/B,KACF;AAAA,KACC,CAACD,cAAA,EAAc,WAAa,EAAA,MAAA,EAAQ,YAAY,CAAC,CAAA;AAEpD,EAAA,IAAI,YAAc,EAAA;AAChB,IACE,uBAAA,GAAA,CAAC,OAAE,QAGH,EAAA,uGAAA,EAAA,CAAA;AAAA;AAGN;;;;"}
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import { VuuDataSource } from '@vuu-ui/vuu-data-remote';
|
|
2
|
-
import { useShellContext, isTypeDescriptor, isValueListRenderer, getSelectedOption, buildColumnMap, Range, isLookupRenderer } from '@vuu-ui/vuu-utils';
|
|
3
|
-
import { useMemo, useState } from 'react';
|
|
4
|
-
|
|
5
|
-
const NO_VALUES = [];
|
|
6
|
-
const toListOption = (value) => ({
|
|
7
|
-
label: value,
|
|
8
|
-
value
|
|
9
|
-
});
|
|
10
|
-
const lookupValueMap = /* @__PURE__ */ new Map();
|
|
11
|
-
const loadLookupValues = ({
|
|
12
|
-
labelColumn,
|
|
13
|
-
table,
|
|
14
|
-
valueColumn
|
|
15
|
-
}) => {
|
|
16
|
-
const tableKey = `${table.module}:${table.table}`;
|
|
17
|
-
const lookupValues = lookupValueMap.get(tableKey);
|
|
18
|
-
if (lookupValues) {
|
|
19
|
-
return lookupValues;
|
|
20
|
-
} else {
|
|
21
|
-
const promise = new Promise((resolve) => {
|
|
22
|
-
const columns = [valueColumn, labelColumn];
|
|
23
|
-
const columnMap = buildColumnMap(columns);
|
|
24
|
-
const dataSource = new VuuDataSource({
|
|
25
|
-
bufferSize: 0,
|
|
26
|
-
table
|
|
27
|
-
});
|
|
28
|
-
dataSource.subscribe(
|
|
29
|
-
{
|
|
30
|
-
columns,
|
|
31
|
-
range: Range(0, 100)
|
|
32
|
-
},
|
|
33
|
-
(message) => {
|
|
34
|
-
if (message.type === "viewport-update") {
|
|
35
|
-
if (message.rows) {
|
|
36
|
-
const listOptions = message.rows.map((row) => ({
|
|
37
|
-
value: row[columnMap[valueColumn]],
|
|
38
|
-
label: row[columnMap[labelColumn]]
|
|
39
|
-
}));
|
|
40
|
-
resolve(listOptions);
|
|
41
|
-
dataSource.unsubscribe();
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
);
|
|
46
|
-
});
|
|
47
|
-
lookupValueMap.set(tableKey, promise);
|
|
48
|
-
return promise;
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
const getLookupDetails = ({ name, type }) => {
|
|
52
|
-
if (isTypeDescriptor(type) && isLookupRenderer(type.renderer)) {
|
|
53
|
-
return type.renderer.lookup;
|
|
54
|
-
} else {
|
|
55
|
-
throw Error(
|
|
56
|
-
`useLookupValues column ${name} is not configured to use lookup values`
|
|
57
|
-
);
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
const useLookupValues = (column, initialValueProp) => {
|
|
61
|
-
const { type: columnType } = column;
|
|
62
|
-
const { getLookupValues } = useShellContext();
|
|
63
|
-
const initialState = useMemo(() => {
|
|
64
|
-
if (isTypeDescriptor(columnType) && isValueListRenderer(columnType?.renderer)) {
|
|
65
|
-
const values2 = columnType.renderer.values.map(toListOption);
|
|
66
|
-
return {
|
|
67
|
-
initialValue: getSelectedOption(values2, initialValueProp) ?? null,
|
|
68
|
-
values: values2
|
|
69
|
-
};
|
|
70
|
-
} else {
|
|
71
|
-
const lookupDetails = getLookupDetails(column);
|
|
72
|
-
const values2 = getLookupValues?.(lookupDetails.table) ?? NO_VALUES;
|
|
73
|
-
return {
|
|
74
|
-
initialValue: getSelectedOption(values2, initialValueProp) ?? null,
|
|
75
|
-
values: values2
|
|
76
|
-
};
|
|
77
|
-
}
|
|
78
|
-
}, [column, columnType, getLookupValues, initialValueProp]);
|
|
79
|
-
const [{ initialValue, values }, setLookupState] = useState(initialState);
|
|
80
|
-
useMemo(() => {
|
|
81
|
-
if (values === NO_VALUES) {
|
|
82
|
-
const lookupDetails = getLookupDetails(column);
|
|
83
|
-
loadLookupValues(lookupDetails).then(
|
|
84
|
-
(values2) => setLookupState({
|
|
85
|
-
initialValue: getSelectedOption(values2, initialValueProp) ?? null,
|
|
86
|
-
values: values2
|
|
87
|
-
})
|
|
88
|
-
);
|
|
89
|
-
}
|
|
90
|
-
}, [values, column, initialValueProp]);
|
|
91
|
-
return {
|
|
92
|
-
initialValue,
|
|
93
|
-
values
|
|
94
|
-
};
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
export { useLookupValues };
|
|
98
|
-
//# sourceMappingURL=useLookupValues.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useLookupValues.js","sources":["../../src/hooks/useLookupValues.ts"],"sourcesContent":["import {\n ColumnDescriptor,\n ListOption,\n LookupTableDetails,\n} from \"@vuu-ui/vuu-table-types\";\nimport { VuuDataSource } from \"@vuu-ui/vuu-data-remote\";\nimport {\n buildColumnMap,\n getSelectedOption,\n isLookupRenderer,\n isTypeDescriptor,\n isValueListRenderer,\n Range,\n useShellContext,\n} from \"@vuu-ui/vuu-utils\";\nimport { useMemo, useState } from \"react\";\n\nconst NO_VALUES: ListOption[] = [];\n\nconst toListOption = (value: string): ListOption => ({\n label: value,\n value,\n});\n\nconst lookupValueMap = new Map<string, Promise<ListOption[]>>();\n\nconst loadLookupValues = ({\n labelColumn,\n table,\n valueColumn,\n}: LookupTableDetails): Promise<ListOption[]> => {\n const tableKey = `${table.module}:${table.table}`;\n const lookupValues = lookupValueMap.get(tableKey);\n if (lookupValues) {\n return lookupValues;\n } else {\n const promise: Promise<ListOption[]> = new Promise((resolve) => {\n const columns = [valueColumn, labelColumn];\n const columnMap = buildColumnMap(columns);\n const dataSource = new VuuDataSource({\n bufferSize: 0,\n table,\n });\n dataSource.subscribe(\n {\n columns,\n range: Range(0, 100),\n },\n (message) => {\n if (message.type === \"viewport-update\") {\n //TODO check we have full dataset\n if (message.rows) {\n const listOptions = message.rows.map<ListOption>((row) => ({\n value: row[columnMap[valueColumn]] as string | number,\n label: row[columnMap[labelColumn]] as string,\n }));\n resolve(listOptions);\n dataSource.unsubscribe();\n }\n }\n },\n );\n });\n lookupValueMap.set(tableKey, promise);\n return promise;\n }\n};\n\ntype LookupState = {\n initialValue: ListOption | null;\n values: ListOption[];\n};\n\nconst getLookupDetails = ({ name, type }: ColumnDescriptor) => {\n if (isTypeDescriptor(type) && isLookupRenderer(type.renderer)) {\n return type.renderer.lookup;\n } else {\n throw Error(\n `useLookupValues column ${name} is not configured to use lookup values`,\n );\n }\n};\n\nexport const useLookupValues = (\n column: ColumnDescriptor,\n initialValueProp: number | string,\n) => {\n const { type: columnType } = column;\n const { getLookupValues } = useShellContext();\n\n const initialState = useMemo<LookupState>(() => {\n if (\n isTypeDescriptor(columnType) &&\n isValueListRenderer(columnType?.renderer)\n ) {\n const values = columnType.renderer.values.map(toListOption);\n return {\n initialValue: getSelectedOption(values, initialValueProp) ?? null,\n values,\n };\n } else {\n const lookupDetails = getLookupDetails(column);\n const values = getLookupValues?.(lookupDetails.table) ?? NO_VALUES;\n\n return {\n initialValue: getSelectedOption(values, initialValueProp) ?? null,\n values,\n };\n }\n }, [column, columnType, getLookupValues, initialValueProp]);\n\n const [{ initialValue, values }, setLookupState] =\n useState<LookupState>(initialState);\n\n useMemo(() => {\n if (values === NO_VALUES) {\n const lookupDetails = getLookupDetails(column);\n loadLookupValues(lookupDetails).then((values) =>\n setLookupState({\n initialValue: getSelectedOption(values, initialValueProp) ?? null,\n values,\n }),\n );\n }\n }, [values, column, initialValueProp]);\n\n return {\n initialValue,\n values,\n };\n};\n"],"names":["values"],"mappings":"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"}
|