@vuu-ui/vuu-data-react 2.1.19-beta.1 → 2.1.19-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/cjs/data-editing/EditForm.css.js +6 -0
  2. package/cjs/data-editing/EditForm.css.js.map +1 -0
  3. package/cjs/data-editing/EditForm.js +90 -0
  4. package/cjs/data-editing/EditForm.js.map +1 -0
  5. package/cjs/data-editing/UnsavedChangesReport.css.js +6 -0
  6. package/cjs/data-editing/UnsavedChangesReport.css.js.map +1 -0
  7. package/cjs/data-editing/UnsavedChangesReport.js +29 -0
  8. package/cjs/data-editing/UnsavedChangesReport.js.map +1 -0
  9. package/cjs/data-editing/edit-rule-validation-checker.js +41 -0
  10. package/cjs/data-editing/edit-rule-validation-checker.js.map +1 -0
  11. package/cjs/data-editing/edit-validation-rules.js +52 -0
  12. package/cjs/data-editing/edit-validation-rules.js.map +1 -0
  13. package/cjs/data-editing/form-edit-state.js +26 -0
  14. package/cjs/data-editing/form-edit-state.js.map +1 -0
  15. package/cjs/data-editing/get-data-item-edit-control.js +105 -0
  16. package/cjs/data-editing/get-data-item-edit-control.js.map +1 -0
  17. package/cjs/data-editing/useEditForm.js +258 -0
  18. package/cjs/data-editing/useEditForm.js.map +1 -0
  19. package/cjs/datasource-provider/VuuDataSourceProvider.js +34 -0
  20. package/cjs/datasource-provider/VuuDataSourceProvider.js.map +1 -0
  21. package/cjs/datasource-provider/useAutoLoginToVuuServer.js +52 -0
  22. package/cjs/datasource-provider/useAutoLoginToVuuServer.js.map +1 -0
  23. package/cjs/hooks/useLookupValues.js +100 -0
  24. package/cjs/hooks/useLookupValues.js.map +1 -0
  25. package/cjs/hooks/useSessionDataSource.js +58 -0
  26. package/cjs/hooks/useSessionDataSource.js.map +1 -0
  27. package/cjs/hooks/useTypeaheadSuggestions.js +57 -0
  28. package/cjs/hooks/useTypeaheadSuggestions.js.map +1 -0
  29. package/cjs/hooks/useVisualLinks.js +84 -0
  30. package/cjs/hooks/useVisualLinks.js.map +1 -0
  31. package/cjs/hooks/useVuuMenuActions.js +352 -0
  32. package/cjs/hooks/useVuuMenuActions.js.map +1 -0
  33. package/cjs/hooks/useVuuTables.js +38 -0
  34. package/cjs/hooks/useVuuTables.js.map +1 -0
  35. package/cjs/index.js +42 -0
  36. package/cjs/index.js.map +1 -0
  37. package/cjs/lost-connection-indicator/LostConnectionIndicator.css.js +6 -0
  38. package/cjs/lost-connection-indicator/LostConnectionIndicator.css.js.map +1 -0
  39. package/cjs/lost-connection-indicator/LostConnectionIndicator.js +24 -0
  40. package/cjs/lost-connection-indicator/LostConnectionIndicator.js.map +1 -0
  41. package/cjs/lost-connection-indicator/useLostConnection.js +34 -0
  42. package/cjs/lost-connection-indicator/useLostConnection.js.map +1 -0
  43. package/cjs/session-editing-form/SessionEditingForm.css.js +6 -0
  44. package/cjs/session-editing-form/SessionEditingForm.css.js.map +1 -0
  45. package/cjs/session-editing-form/SessionEditingForm.js +270 -0
  46. package/cjs/session-editing-form/SessionEditingForm.js.map +1 -0
  47. package/esm/data-editing/EditForm.css.js +4 -0
  48. package/esm/data-editing/EditForm.css.js.map +1 -0
  49. package/esm/data-editing/EditForm.js +88 -0
  50. package/esm/data-editing/EditForm.js.map +1 -0
  51. package/esm/data-editing/UnsavedChangesReport.css.js +4 -0
  52. package/esm/data-editing/UnsavedChangesReport.css.js.map +1 -0
  53. package/esm/data-editing/UnsavedChangesReport.js +27 -0
  54. package/esm/data-editing/UnsavedChangesReport.js.map +1 -0
  55. package/esm/data-editing/edit-rule-validation-checker.js +37 -0
  56. package/esm/data-editing/edit-rule-validation-checker.js.map +1 -0
  57. package/esm/data-editing/edit-validation-rules.js +50 -0
  58. package/esm/data-editing/edit-validation-rules.js.map +1 -0
  59. package/esm/data-editing/form-edit-state.js +23 -0
  60. package/esm/data-editing/form-edit-state.js.map +1 -0
  61. package/esm/data-editing/get-data-item-edit-control.js +103 -0
  62. package/esm/data-editing/get-data-item-edit-control.js.map +1 -0
  63. package/esm/data-editing/useEditForm.js +256 -0
  64. package/esm/data-editing/useEditForm.js.map +1 -0
  65. package/esm/datasource-provider/VuuDataSourceProvider.js +32 -0
  66. package/esm/datasource-provider/VuuDataSourceProvider.js.map +1 -0
  67. package/esm/datasource-provider/useAutoLoginToVuuServer.js +50 -0
  68. package/esm/datasource-provider/useAutoLoginToVuuServer.js.map +1 -0
  69. package/esm/hooks/useLookupValues.js +98 -0
  70. package/esm/hooks/useLookupValues.js.map +1 -0
  71. package/esm/hooks/useSessionDataSource.js +56 -0
  72. package/esm/hooks/useSessionDataSource.js.map +1 -0
  73. package/esm/hooks/useTypeaheadSuggestions.js +54 -0
  74. package/esm/hooks/useTypeaheadSuggestions.js.map +1 -0
  75. package/esm/hooks/useVisualLinks.js +82 -0
  76. package/esm/hooks/useVisualLinks.js.map +1 -0
  77. package/esm/hooks/useVuuMenuActions.js +348 -0
  78. package/esm/hooks/useVuuMenuActions.js.map +1 -0
  79. package/esm/hooks/useVuuTables.js +36 -0
  80. package/esm/hooks/useVuuTables.js.map +1 -0
  81. package/esm/index.js +16 -0
  82. package/esm/index.js.map +1 -0
  83. package/esm/lost-connection-indicator/LostConnectionIndicator.css.js +4 -0
  84. package/esm/lost-connection-indicator/LostConnectionIndicator.css.js.map +1 -0
  85. package/esm/lost-connection-indicator/LostConnectionIndicator.js +22 -0
  86. package/esm/lost-connection-indicator/LostConnectionIndicator.js.map +1 -0
  87. package/esm/lost-connection-indicator/useLostConnection.js +32 -0
  88. package/esm/lost-connection-indicator/useLostConnection.js.map +1 -0
  89. package/esm/session-editing-form/SessionEditingForm.css.js +4 -0
  90. package/esm/session-editing-form/SessionEditingForm.css.js.map +1 -0
  91. package/esm/session-editing-form/SessionEditingForm.js +268 -0
  92. package/esm/session-editing-form/SessionEditingForm.js.map +1 -0
  93. package/package.json +19 -17
@@ -0,0 +1 @@
1
+ {"version":3,"file":"form-edit-state.js","sources":["../../../../packages/vuu-data-react/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;;;;"}
@@ -0,0 +1,103 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { VuuInput, VuuTimePicker, VuuDatePicker, VuuTypeaheadInput } from '@vuu-ui/vuu-ui-controls';
3
+ import { isTimeDataValue, asTimeString, isDateTimeDataValue } from '@vuu-ui/vuu-utils';
4
+ import { ToggleFilter } from '@vuu-ui/vuu-filters';
5
+
6
+ const getDataItemEditControl = ({
7
+ InputProps: InputProps2,
8
+ TypeaheadProps,
9
+ className,
10
+ commitOnBlur,
11
+ commitWhenCleared,
12
+ dataDescriptor,
13
+ errorMessage,
14
+ onCommit,
15
+ table,
16
+ values,
17
+ variant
18
+ }) => {
19
+ const handleCommitNumber = (evt, value) => {
20
+ onCommit(evt, value.toString());
21
+ };
22
+ const dataVariant = variant && variant !== "toggle" ? variant : void 0;
23
+ if (dataDescriptor.editable === false) {
24
+ return /* @__PURE__ */ jsx(
25
+ VuuInput,
26
+ {
27
+ variant: "secondary",
28
+ ...InputProps2,
29
+ onCommit,
30
+ readOnly: true,
31
+ "data-edit-control": true
32
+ }
33
+ );
34
+ } else if (isTimeDataValue(dataDescriptor)) {
35
+ if (InputProps2?.inputProps) {
36
+ const { value, onChange } = InputProps2.inputProps;
37
+ return /* @__PURE__ */ jsx(
38
+ VuuTimePicker,
39
+ {
40
+ className,
41
+ value: asTimeString(value, true),
42
+ onChange,
43
+ onCommit,
44
+ "data-edit-control": true
45
+ }
46
+ );
47
+ }
48
+ } else if (isDateTimeDataValue(dataDescriptor)) {
49
+ return /* @__PURE__ */ jsx(
50
+ VuuDatePicker,
51
+ {
52
+ className,
53
+ onCommit: handleCommitNumber,
54
+ "data-edit-control": true
55
+ }
56
+ );
57
+ } else if (dataDescriptor.serverDataType === "string" && table) {
58
+ if (variant === "toggle" && values?.length) {
59
+ return /* @__PURE__ */ jsx(
60
+ ToggleFilter,
61
+ {
62
+ className,
63
+ column: dataDescriptor.name,
64
+ "data-edit-control": true,
65
+ onCommit,
66
+ table,
67
+ values,
68
+ value: InputProps2?.inputProps?.value ?? "all"
69
+ }
70
+ );
71
+ } else {
72
+ return /* @__PURE__ */ jsx(
73
+ VuuTypeaheadInput,
74
+ {
75
+ ...InputProps2,
76
+ ...TypeaheadProps,
77
+ className,
78
+ column: dataDescriptor.name,
79
+ "data-edit-control": true,
80
+ "data-variant": dataVariant,
81
+ onCommit,
82
+ table
83
+ }
84
+ );
85
+ }
86
+ }
87
+ return /* @__PURE__ */ jsx(
88
+ VuuInput,
89
+ {
90
+ variant: "secondary",
91
+ ...InputProps2,
92
+ className,
93
+ commitOnBlur,
94
+ commitWhenCleared,
95
+ onCommit,
96
+ errorMessage,
97
+ "data-edit-control": true
98
+ }
99
+ );
100
+ };
101
+
102
+ export { getDataItemEditControl };
103
+ //# sourceMappingURL=get-data-item-edit-control.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"get-data-item-edit-control.js","sources":["../../../../packages/vuu-data-react/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 VuuTimePicker,\n VuuTypeaheadInput,\n VuuTypeaheadInputProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n CommitHandler,\n isDateTimeDataValue,\n isTimeDataValue,\n} from \"@vuu-ui/vuu-utils\";\nimport { InputProps } from \"@salt-ds/core\";\nimport { asTimeString } from \"@vuu-ui/vuu-utils\";\nimport { ToggleFilter } from \"@vuu-ui/vuu-filters\";\n\n/**\n * variant can be used to provide a rendering hint to the filter control rendered.\n * 'toggle' for A ToggleButtonGroup, only suitable for up to 3 value choices\n * 'search' to render a search icon and require at least one character to be entered.\n * 'pick' to show a dropdown list, even before any text is entered, best for smaller lists\n */\nexport type FilterControlVariant = \"search\" | \"pick\" | \"toggle\";\nexport interface DataItemEditControlProps {\n InputProps?: Partial<InputProps>;\n TypeaheadProps?: Pick<\n VuuTypeaheadInputProps,\n | \"highlightFirstSuggestion\"\n | \"minCharacterCountToTriggerSuggestions\"\n | \"selectOnTab\"\n >;\n className?: string;\n commitOnBlur?: boolean;\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 * Where provided, only these values will be offered as suggestions.\n * They will be validated against server with Typeahead service, so\n * unavailable options are not offered.\n * Recommended for toggle filters, not usually necessary for other\n * filter variants.\n */\n values?: string[];\n variant?: FilterControlVariant;\n}\n\nexport type ValidationStatus = \"initial\" | true | string;\n\nexport const getDataItemEditControl = ({\n InputProps,\n TypeaheadProps,\n className,\n commitOnBlur,\n commitWhenCleared,\n dataDescriptor,\n errorMessage,\n onCommit,\n table,\n values,\n variant,\n}: DataItemEditControlProps) => {\n const handleCommitNumber: CommitHandler<HTMLElement, number> = (\n evt,\n value,\n ) => {\n onCommit(evt, value.toString());\n };\n\n const dataVariant = variant && variant !== \"toggle\" ? variant : undefined;\n\n if (dataDescriptor.editable === false) {\n return (\n <VuuInput\n variant=\"secondary\"\n {...InputProps}\n onCommit={onCommit}\n readOnly\n data-edit-control\n />\n );\n } else if (isTimeDataValue(dataDescriptor)) {\n if (InputProps?.inputProps) {\n const { value, onChange } = InputProps.inputProps;\n return (\n <VuuTimePicker\n className={className}\n value={asTimeString(value, true)}\n onChange={onChange}\n onCommit={onCommit}\n data-edit-control\n />\n );\n }\n } else if (isDateTimeDataValue(dataDescriptor)) {\n return (\n <VuuDatePicker\n className={className}\n onCommit={handleCommitNumber}\n data-edit-control\n />\n );\n } else if (dataDescriptor.serverDataType === \"string\" && table) {\n if (variant === \"toggle\" && values?.length) {\n return (\n <ToggleFilter\n className={className}\n column={dataDescriptor.name}\n data-edit-control\n onCommit={onCommit}\n table={table}\n values={values}\n value={InputProps?.inputProps?.value ?? \"all\"}\n />\n );\n } else {\n return (\n <VuuTypeaheadInput\n {...InputProps}\n {...TypeaheadProps}\n className={className}\n column={dataDescriptor.name}\n data-edit-control\n data-variant={dataVariant}\n onCommit={onCommit}\n table={table}\n />\n );\n }\n }\n\n return (\n <VuuInput\n variant=\"secondary\"\n {...InputProps}\n className={className}\n commitOnBlur={commitOnBlur}\n commitWhenCleared={commitWhenCleared}\n onCommit={onCommit}\n errorMessage={errorMessage}\n data-edit-control\n />\n );\n};\n"],"names":["InputProps"],"mappings":";;;;;AA0DO,MAAM,yBAAyB,CAAC;AAAA,EACrC,UAAAA,EAAAA,WAAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;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,EAAA,MAAM,WAAc,GAAA,OAAA,IAAW,OAAY,KAAA,QAAA,GAAW,OAAU,GAAA,KAAA,CAAA;AAEhE,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,IAAA;AAAA,QACR,mBAAiB,EAAA;AAAA;AAAA,KACnB;AAAA,GAEJ,MAAA,IAAW,eAAgB,CAAA,cAAc,CAAG,EAAA;AAC1C,IAAA,IAAIA,aAAY,UAAY,EAAA;AAC1B,MAAA,MAAM,EAAE,KAAA,EAAO,QAAS,EAAA,GAAIA,WAAW,CAAA,UAAA;AACvC,MACE,uBAAA,GAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACA,KAAA,EAAO,YAAa,CAAA,KAAA,EAAO,IAAI,CAAA;AAAA,UAC/B,QAAA;AAAA,UACA,QAAA;AAAA,UACA,mBAAiB,EAAA;AAAA;AAAA,OACnB;AAAA;AAEJ,GACF,MAAA,IAAW,mBAAoB,CAAA,cAAc,CAAG,EAAA;AAC9C,IACE,uBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACA,QAAU,EAAA,kBAAA;AAAA,QACV,mBAAiB,EAAA;AAAA;AAAA,KACnB;AAAA,GAEO,MAAA,IAAA,cAAA,CAAe,cAAmB,KAAA,QAAA,IAAY,KAAO,EAAA;AAC9D,IAAI,IAAA,OAAA,KAAY,QAAY,IAAA,MAAA,EAAQ,MAAQ,EAAA;AAC1C,MACE,uBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACA,QAAQ,cAAe,CAAA,IAAA;AAAA,UACvB,mBAAiB,EAAA,IAAA;AAAA,UACjB,QAAA;AAAA,UACA,KAAA;AAAA,UACA,MAAA;AAAA,UACA,KAAA,EAAOA,WAAY,EAAA,UAAA,EAAY,KAAS,IAAA;AAAA;AAAA,OAC1C;AAAA,KAEG,MAAA;AACL,MACE,uBAAA,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACE,GAAGA,WAAAA;AAAA,UACH,GAAG,cAAA;AAAA,UACJ,SAAA;AAAA,UACA,QAAQ,cAAe,CAAA,IAAA;AAAA,UACvB,mBAAiB,EAAA,IAAA;AAAA,UACjB,cAAc,EAAA,WAAA;AAAA,UACd,QAAA;AAAA,UACA;AAAA;AAAA,OACF;AAAA;AAEJ;AAGF,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,WAAA;AAAA,MACP,GAAGA,WAAAA;AAAA,MACJ,SAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,mBAAiB,EAAA;AAAA;AAAA,GACnB;AAEJ;;;;"}
@@ -0,0 +1,256 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { buildColumnMap, Range, messageHasDataRows, dataSourceRowToEntity, queryClosest } from '@vuu-ui/vuu-utils';
3
+ import { Button } from '@salt-ds/core';
4
+ import { useRef, useState, useCallback, useMemo } from 'react';
5
+ import { UnsavedChangesReport } from './UnsavedChangesReport.js';
6
+ import { getEditValidationRules, buildValidationChecker } from './edit-rule-validation-checker.js';
7
+ import { CLEAN_FORM, buildFormEditState } from './form-edit-state.js';
8
+ import { useModal } from '@vuu-ui/vuu-ui-controls';
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 } = useModal();
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?.rpcRequest?.({
95
+ params: {},
96
+ rpcName: "VP_BULK_EDIT_SUBMIT_RPC",
97
+ type: "RPC_REQUEST"
98
+ });
99
+ console.log({ rpcResponse });
100
+ }, []);
101
+ const showSaveOrDiscardPrompt = useCallback(async () => {
102
+ const { current: currentEntity } = entityRef;
103
+ const { current: originalEntity } = originalEntityRef;
104
+ let resolver = void 0;
105
+ const save = async () => {
106
+ await submitChanges();
107
+ closeDialog();
108
+ resolver?.("saved");
109
+ };
110
+ const discard = () => {
111
+ closeDialog();
112
+ resolver?.("discarded");
113
+ };
114
+ requestAnimationFrame(() => {
115
+ showDialog(
116
+ /* @__PURE__ */ jsx(
117
+ UnsavedChangesReport,
118
+ {
119
+ entity: originalEntity,
120
+ editedEntity: currentEntity
121
+ }
122
+ ),
123
+ "Unsaved Changes",
124
+ [
125
+ /* @__PURE__ */ jsx(Button, { onClick: discard, children: "Discard Changes" }, "cancel"),
126
+ /* @__PURE__ */ jsx(Button, { onClick: save, children: "Save Changes" }, "submit")
127
+ ],
128
+ true
129
+ // hideCloseButton
130
+ );
131
+ });
132
+ return new Promise((resolve) => {
133
+ resolver = resolve;
134
+ });
135
+ }, [closeDialog, showDialog, submitChanges]);
136
+ useMemo(async () => {
137
+ if (dataSource) {
138
+ if (formEditStateRef.current.isClean === false) {
139
+ await showSaveOrDiscardPrompt();
140
+ }
141
+ currentDataSource.current = dataSource;
142
+ originalEntityRef.current = void 0;
143
+ const columnMap = buildColumnMap(dataSource.columns);
144
+ dataSource?.subscribe({ range: Range(0, 1) }, (message) => {
145
+ if (messageHasDataRows(message)) {
146
+ const [row] = message.rows;
147
+ if (row) {
148
+ const entity2 = dataSourceRowToEntity(row, columnMap);
149
+ if (originalEntityRef.current === void 0) {
150
+ originalEntityRef.current = entity2;
151
+ setEntity(entity2);
152
+ }
153
+ const { editedFields: editedFields2 } = buildFormEditState(
154
+ entityRef.current,
155
+ entity2
156
+ );
157
+ if (editedFields2.length === 1) {
158
+ setEntity(entity2);
159
+ }
160
+ }
161
+ }
162
+ });
163
+ }
164
+ }, [dataSource, setEntity, showSaveOrDiscardPrompt]);
165
+ const setValidationState = useCallback((state) => {
166
+ validationStateRef.current = state;
167
+ forceUpdate({});
168
+ }, []);
169
+ const handleFieldCommit = useCallback(
170
+ async (_, value) => {
171
+ const { current: fieldName } = focusedFieldRef;
172
+ const dataDescriptor = find(formFieldDescriptors, fieldName);
173
+ const { current: state } = validationStateRef;
174
+ const newState = nextValidationState(state, dataDescriptor, value);
175
+ if (newState !== state) {
176
+ setValidationState(newState);
177
+ }
178
+ if (newState.ok && dataSource?.tableSchema) {
179
+ const { key } = dataSource.tableSchema;
180
+ const keyValue = entity?.[key];
181
+ const response = await dataSource.rpcRequest?.({
182
+ params: {
183
+ column: fieldName,
184
+ data: value,
185
+ key: keyValue
186
+ },
187
+ rpcName: "editCell",
188
+ type: "RPC_REQUEST"
189
+ });
190
+ console.log({ response });
191
+ }
192
+ },
193
+ [dataSource, entity, formFieldDescriptors, setValidationState]
194
+ );
195
+ const handleFieldChange = useCallback(
196
+ (evt) => {
197
+ const { current: fieldName } = focusedFieldRef;
198
+ if (fieldName) {
199
+ const input = queryClosest(evt.target, "input", true);
200
+ const dataDescriptor = find(formFieldDescriptors, fieldName);
201
+ const value = input.value;
202
+ const { current: state } = validationStateRef;
203
+ const newState = nextValidationState(state, dataDescriptor, value);
204
+ if (newState !== state) {
205
+ setValidationState(newState);
206
+ }
207
+ setEntity({ ...entity, [fieldName]: value });
208
+ }
209
+ },
210
+ [entity, formFieldDescriptors, setEntity, setValidationState]
211
+ );
212
+ const handleFormSubmit = useCallback(async () => {
213
+ submitChanges();
214
+ setFormEditState(CLEAN_FORM);
215
+ originalEntityRef.current = entity;
216
+ onSubmit?.();
217
+ forceUpdate({});
218
+ }, [entity, onSubmit, setFormEditState, submitChanges]);
219
+ const handleFormCancel = useCallback(async () => {
220
+ setFormEditState(CLEAN_FORM);
221
+ setValidationState(CLEAN_VALIDATION);
222
+ setEntity(originalEntityRef.current);
223
+ }, [setEntity, setFormEditState, setValidationState]);
224
+ const handleFocus = useCallback((evt) => {
225
+ if (formFieldsContainerRef.current?.contains(evt.target)) {
226
+ const fieldName = getField(evt.target);
227
+ if (fieldName) {
228
+ if (fieldName) {
229
+ focusedFieldRef.current = fieldName;
230
+ }
231
+ }
232
+ }
233
+ }, []);
234
+ const {
235
+ current: { ok, messages: errorMessages }
236
+ } = validationStateRef;
237
+ const {
238
+ current: { isClean, editedFields }
239
+ } = formEditStateRef;
240
+ return {
241
+ editedFields,
242
+ editEntity: entity,
243
+ errorMessages,
244
+ formFieldsContainerRef,
245
+ isClean,
246
+ ok,
247
+ onCancel: handleFormCancel,
248
+ onChange: handleFieldChange,
249
+ onCommit: handleFieldCommit,
250
+ onFocus: handleFocus,
251
+ onSubmit: handleFormSubmit
252
+ };
253
+ };
254
+
255
+ export { useEditForm };
256
+ //# sourceMappingURL=useEditForm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useEditForm.js","sources":["../../../../packages/vuu-data-react/src/data-editing/useEditForm.tsx"],"sourcesContent":["import type { DataSource, DataValueDescriptor } from \"@vuu-ui/vuu-data-types\";\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} 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\";\nimport { useModal } from \"@vuu-ui/vuu-ui-controls\";\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 } = useModal();\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?.rpcRequest?.({\n params: {},\n rpcName: \"VP_BULK_EDIT_SUBMIT_RPC\",\n type: \"RPC_REQUEST\",\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 async (_, 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 const response = await dataSource.rpcRequest?.({\n params: {\n column: fieldName,\n data: value,\n key: keyValue,\n },\n rpcName: \"editCell\",\n type: \"RPC_REQUEST\",\n });\n console.log({ response });\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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"}
@@ -0,0 +1,32 @@
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
@@ -0,0 +1 @@
1
+ {"version":3,"file":"VuuDataSourceProvider.js","sources":["../../../../packages/vuu-data-react/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\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;AAED,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;;;;"}
@@ -0,0 +1,50 @@
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
+ token: tokenProp = "no-token",
11
+ user = "steve",
12
+ websocketUrl
13
+ } = {}) => {
14
+ const [errorMessage, setErrorMessage] = useState("");
15
+ useEffect(() => {
16
+ const connect = async () => {
17
+ try {
18
+ let token = tokenProp;
19
+ if (authenticate$1) {
20
+ const response = await authenticate(user, "xyz", "/api/authn");
21
+ token = response.token;
22
+ }
23
+ const url = websocketUrl ?? `${secure ? "wss" : "ws"}://localhost/8090/websocket`;
24
+ ConnectionManager.connect({
25
+ url,
26
+ token
27
+ });
28
+ } catch (e) {
29
+ if (e instanceof Error) {
30
+ console.error(e.message);
31
+ setErrorMessage(e.message);
32
+ }
33
+ }
34
+ };
35
+ if (autoConnect) {
36
+ connect();
37
+ }
38
+ return () => {
39
+ if (autoConnect) {
40
+ ConnectionManager.disconnect();
41
+ }
42
+ };
43
+ }, [authenticate$1, autoConnect, secure, tokenProp, user, websocketUrl]);
44
+ if (errorMessage) {
45
+ return /* @__PURE__ */ jsx("p", { children: "Unable to authenticate against Vuu Server A Vuu Server instance must be running to show this example." });
46
+ }
47
+ };
48
+
49
+ export { useAutoLoginToVuuServer };
50
+ //# sourceMappingURL=useAutoLoginToVuuServer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useAutoLoginToVuuServer.js","sources":["../../../../packages/vuu-data-react/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 token: tokenProp = \"no-token\",\n user = \"steve\",\n websocketUrl,\n}: {\n /**\n * if true, auth url on vuuserver will be used to get token\n * auth url is \"/api/authn\"\n */\n authenticate?: boolean;\n /**\n * true by default, will go ahead and open websocket connection\n */\n autoConnect?: boolean;\n autoLogin?: boolean;\n secure?: boolean;\n /**\n * use with no authenticate step, to provide auth token.\n * Used when vuu server is performing no token check\n */\n token?: string;\n user?: string;\n websocketUrl?: string;\n} = {}) => {\n const [errorMessage, setErrorMessage] = useState(\"\");\n useEffect(() => {\n const connect = async () => {\n try {\n let token = tokenProp;\n if (authenticate) {\n const response = await vuuAuthenticate(user, \"xyz\", \"/api/authn\");\n token = response.token;\n }\n\n const url =\n websocketUrl ?? `${secure ? \"wss\" : \"ws\"}://localhost/8090/websocket`;\n\n ConnectionManager.connect({\n url,\n token,\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, tokenProp, user, 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,OAAO,SAAY,GAAA,UAAA;AAAA,EACnB,IAAO,GAAA,OAAA;AAAA,EACP;AACF,CAAA,GAmBI,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,SAAA;AACZ,QAAA,IAAIA,cAAc,EAAA;AAChB,UAAA,MAAM,QAAW,GAAA,MAAMC,YAAgB,CAAA,IAAA,EAAM,OAAO,YAAY,CAAA;AAChE,UAAA,KAAA,GAAQ,QAAS,CAAA,KAAA;AAAA;AAGnB,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;AAAA,SACD,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,GACF,EAAG,CAACD,cAAc,EAAA,WAAA,EAAa,QAAQ,SAAW,EAAA,IAAA,EAAM,YAAY,CAAC,CAAA;AAErE,EAAA,IAAI,YAAc,EAAA;AAChB,IACE,uBAAA,GAAA,CAAC,OAAE,QAGH,EAAA,uGAAA,EAAA,CAAA;AAAA;AAGN;;;;"}
@@ -0,0 +1,98 @@
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
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useLookupValues.js","sources":["../../../../packages/vuu-data-react/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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"}