@evoke-platform/ui-components 1.0.2-testing.2 → 1.1.0-testing.0

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 (6) hide show
  1. package/dist/published/components/custom/CriteriaBuilder/ValueEditor.js +33 -2
  2. package/dist/published/components/custom/Form/Common/Form.js +4 -2
  3. package/dist/published/stories/CriteriaBuilder.stories.js +99 -315
  4. package/dist/published/stories/FormField.stories.d.ts +1 -0
  5. package/dist/published/stories/FormField.stories.js +15 -0
  6. package/package.json +1 -1
package/dist/published/components/custom/CriteriaBuilder/ValueEditor.js CHANGED
@@ -1,6 +1,7 @@
1
+ import { Instant, LocalDate, LocalDateTime, LocalTime, ZoneId } from '@js-joda/core';
1
2
  import { ClearRounded } from '@mui/icons-material';
2
3
  import { Box, darken, lighten, styled } from '@mui/material';
3
- import { TimePicker } from '@mui/x-date-pickers';
4
+ import { DateTimePicker, TimePicker } from '@mui/x-date-pickers';
4
5
  import React, { useRef, useState } from 'react';
5
6
  import { Autocomplete, Chip, DatePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
6
7
  import { NumericFormat } from '../FormField/InputFieldComponent';
@@ -31,6 +32,7 @@ const ValueEditor = (props) => {
31
32
  }));
32
33
  }
33
34
  }
35
+ const [anchorEl, setAnchorEl] = useState(null);
34
36
  const inputRef = useRef(null);
35
37
  const [openPresetValues, setOpenPresetValues] = useState(false);
36
38
  // Manages input value for Autocomplete when using 'in/not in' operators, ensuring correct handling on blur.
@@ -48,7 +50,7 @@ const ValueEditor = (props) => {
48
50
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
49
51
  const onClick = (e) => {
50
52
  // if property is date and date picker is open, don't open preset values
51
- if (inputType && ['date', 'time'].includes(inputType) && e.target?.tagName !== 'INPUT') {
53
+ if (inputType && ['date', 'time', 'date-time'].includes(inputType) && e.target?.tagName !== 'INPUT') {
52
54
  return;
53
55
  }
54
56
  setOpenPresetValues(true);
@@ -66,6 +68,13 @@ const ValueEditor = (props) => {
66
68
  const groupRenderGroup = (params) => (React.createElement("li", { key: params.key },
67
69
  React.createElement(GroupHeader, null, params.group),
68
70
  React.createElement(GroupItems, null, params.children)));
71
+ function parseISOStringToLocalDateTime(value) {
72
+ if (!value) {
73
+ return null;
74
+ }
75
+ const d = new Date(value);
76
+ return LocalDateTime.ofInstant(Instant.ofEpochMilli(d.getTime()), ZoneId.systemDefault());
77
+ }
69
78
  const getEditor = () => {
70
79
  if (isPresetValueSelected) {
71
80
  return;
@@ -82,6 +91,28 @@ const ValueEditor = (props) => {
82
91
  return (React.createElement(LocalizationProvider, null,
83
92
  React.createElement(TimePicker, { inputRef: inputRef, disabled: disabled, value: disabled || !value ? null : value, onChange: handleOnChange, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: { width: '33%', background: '#fff' } })), readOnly: readOnly })));
84
93
  }
94
+ else if (inputType === 'date-time') {
95
+ const dateTimeValue = parseISOStringToLocalDateTime(value);
96
+ return (React.createElement(LocalizationProvider, null,
97
+ React.createElement(DateTimePicker, { inputRef: inputRef, value: dateTimeValue, onChange: (date) => {
98
+ if (!date) {
99
+ handleOnChange('');
100
+ return;
101
+ }
102
+ let localDateTime;
103
+ if (date instanceof LocalDate && !(date instanceof LocalDateTime)) {
104
+ // onChange initially returns a LocalDate after date is selected
105
+ localDateTime = LocalDateTime.of(date, LocalTime.of(0));
106
+ }
107
+ else {
108
+ localDateTime = date;
109
+ }
110
+ handleOnChange(new Date(localDateTime.toString()).toISOString());
111
+ }, onClose: onClose, PopperProps: {
112
+ anchorEl,
113
+ }, renderInput: (params) => (React.createElement(Box, { sx: { width: '33%', background: '#fff' }, ref: setAnchorEl },
114
+ React.createElement(TextField, { ...params, disabled: disabled, onClick: onClick, placeholder: "Value", size: "small", inputRef: inputRef }))), readOnly: readOnly })));
115
+ }
85
116
  else if (inputType === 'number' || inputType === 'integer') {
86
117
  const isMultiple = ['in', 'notIn'].includes(operator);
87
118
  const options = presetValues;
package/dist/published/components/custom/Form/Common/Form.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { useApp, useAuthenticationContext, } from '@evoke-platform/context';
2
2
  import { Components, Form as FormIO, Utils } from '@formio/react';
3
3
  import { flatten } from 'flat';
4
- import { isEqual, toPairs } from 'lodash';
4
+ import { isEmpty, isEqual, toPairs } from 'lodash';
5
5
  import React, { useEffect, useRef, useState } from 'react';
6
6
  import '../../../../styles/form-component.css';
7
7
  import { Skeleton, Snackbar } from '../../../core';
@@ -320,7 +320,9 @@ export function Form(props) {
320
320
  const submittedFields = {};
321
321
  for (const field in submission.data) {
322
322
  const value = submission.data[field];
323
- if (value === '' || (Array.isArray(value) && !value.length)) {
323
+ if (value === '' ||
324
+ (Array.isArray(value) && !value.length) ||
325
+ (typeof value === 'object' && isEmpty(value))) {
324
326
  submittedFields[field] = null;
325
327
  }
326
328
  else {
package/dist/published/stories/CriteriaBuilder.stories.js CHANGED
@@ -4,6 +4,98 @@ export default {
4
4
  title: 'Input/CriteriaBuilder',
5
5
  component: BuildCriteria,
6
6
  };
7
+ const defaultProperties = [
8
+ {
9
+ id: 'name',
10
+ name: 'name',
11
+ type: 'string',
12
+ required: true,
13
+ },
14
+ {
15
+ id: 'licenseNumber',
16
+ name: 'license number',
17
+ type: 'string',
18
+ required: true,
19
+ },
20
+ {
21
+ id: 'issueDate',
22
+ name: 'issue date',
23
+ type: 'date',
24
+ required: false,
25
+ },
26
+ {
27
+ id: 'applicationDate',
28
+ name: 'Application Date',
29
+ type: 'date-time',
30
+ required: false,
31
+ },
32
+ {
33
+ id: 'status',
34
+ name: 'status',
35
+ type: 'string',
36
+ enum: ['active', 'expired', 'pending approval'],
37
+ required: false,
38
+ },
39
+ {
40
+ id: 'licenseeName',
41
+ name: 'Licensee Name',
42
+ type: 'string',
43
+ required: false,
44
+ formula: '{{person.firstName}} {{person.middleName}} {{person.lastName}}',
45
+ },
46
+ {
47
+ id: 'calculated',
48
+ name: 'calculated',
49
+ type: 'string',
50
+ required: false,
51
+ formula: '{{status}} - {{licensee.firstName}}',
52
+ },
53
+ {
54
+ id: 'application',
55
+ name: 'applicant',
56
+ type: 'object',
57
+ required: false,
58
+ objectId: 'application',
59
+ },
60
+ {
61
+ id: 'applicantName',
62
+ name: 'Application Info',
63
+ type: 'string',
64
+ required: false,
65
+ formula: '{{application.name}} - {{status}}',
66
+ },
67
+ {
68
+ id: 'licensedFor',
69
+ name: 'licensed for',
70
+ type: 'array',
71
+ enum: [
72
+ 'amusements',
73
+ 'food and beverage',
74
+ 'entertainment',
75
+ 'transportation',
76
+ 'hot dogs',
77
+ 'swimming pools',
78
+ 'ferris wheels',
79
+ 'bungee jumping',
80
+ ],
81
+ required: true,
82
+ searchable: false,
83
+ },
84
+ {
85
+ id: 'inState',
86
+ name: 'In State',
87
+ type: 'string',
88
+ enum: ['Yes', 'No'],
89
+ required: false,
90
+ searchable: false,
91
+ },
92
+ {
93
+ id: 'amountOfInspections',
94
+ name: 'Inspection Count',
95
+ type: 'integer',
96
+ required: false,
97
+ },
98
+ ];
7
99
  const CriteriaBuilderTemplate = (args) => {
8
100
  const [criteria, setCriteria] = React.useState(args.criteria);
9
101
  args.setCriteria = setCriteria;
@@ -13,182 +105,12 @@ const CriteriaBuilderTemplate = (args) => {
13
105
  };
14
106
  export const CriteriaBuilderEmpty = CriteriaBuilderTemplate.bind({});
15
107
  CriteriaBuilderEmpty.args = {
16
- properties: [
17
- {
18
- id: 'name',
19
- name: 'name',
20
- type: 'string',
21
- required: true,
22
- },
23
- {
24
- id: 'licenseNumber',
25
- name: 'license number',
26
- type: 'string',
27
- required: true,
28
- },
29
- {
30
- id: 'issueDate',
31
- name: 'issue date',
32
- type: 'date',
33
- required: false,
34
- objectId: '',
35
- },
36
- {
37
- id: 'status',
38
- name: 'status',
39
- type: 'string',
40
- enum: ['active', 'expired', 'pending approval'],
41
- required: false,
42
- objectId: '',
43
- },
44
- {
45
- id: 'licenseeName',
46
- name: 'Licensee Name',
47
- type: 'string',
48
- required: false,
49
- formula: '{{person.firstName}} {{person.middleName}} {{person.lastName}}',
50
- },
51
- {
52
- id: 'calculated',
53
- name: 'calculated',
54
- type: 'string',
55
- required: false,
56
- objectId: '',
57
- formula: '{{status}} - {{licensee.firstName}}',
58
- },
59
- {
60
- id: 'application',
61
- name: 'applicant',
62
- type: 'object',
63
- required: false,
64
- objectId: 'application',
65
- },
66
- {
67
- id: 'applicantName',
68
- name: 'Application Info',
69
- type: 'string',
70
- required: false,
71
- formula: '{{application.name}} - {{status}}',
72
- },
73
- {
74
- id: 'licensedFor',
75
- name: 'licensed for',
76
- type: 'array',
77
- enum: [
78
- 'amusements',
79
- 'food and beverage',
80
- 'entertainment',
81
- 'transportation',
82
- 'hot dogs',
83
- 'swimming pools',
84
- 'ferris wheels',
85
- 'bungee jumping',
86
- ],
87
- required: true,
88
- searchable: false,
89
- },
90
- {
91
- id: 'inState',
92
- name: 'In State',
93
- type: 'string',
94
- enum: ['Yes', 'No'],
95
- required: false,
96
- searchable: false,
97
- },
98
- ],
108
+ properties: [...defaultProperties],
99
109
  criteria: {},
100
110
  };
101
111
  export const CriteriaBuilder = CriteriaBuilderTemplate.bind({});
102
112
  CriteriaBuilder.args = {
103
- properties: [
104
- {
105
- id: 'name',
106
- name: 'name',
107
- type: 'string',
108
- required: true,
109
- },
110
- {
111
- id: 'licenseNumber',
112
- name: 'license number',
113
- type: 'string',
114
- required: true,
115
- },
116
- {
117
- id: 'issueDate',
118
- name: 'issue date',
119
- type: 'date',
120
- required: false,
121
- objectId: '',
122
- },
123
- {
124
- id: 'status',
125
- name: 'status',
126
- type: 'string',
127
- enum: ['active', 'expired', 'pending approval'],
128
- required: false,
129
- objectId: '',
130
- },
131
- {
132
- id: 'licenseeName',
133
- name: 'Licensee Name',
134
- type: 'string',
135
- required: false,
136
- formula: '{{person.firstName}} {{person.middleName}} {{person.lastName}}',
137
- },
138
- {
139
- id: 'calculated',
140
- name: 'calculated',
141
- type: 'string',
142
- required: false,
143
- objectId: '',
144
- formula: '{{status}} - {{licensee.firstName}}',
145
- },
146
- {
147
- id: 'application',
148
- name: 'applicant',
149
- type: 'object',
150
- required: false,
151
- objectId: 'application',
152
- },
153
- {
154
- id: 'applicantName',
155
- name: 'Application Info',
156
- type: 'string',
157
- required: false,
158
- formula: '{{application.name}} - {{status}}',
159
- },
160
- {
161
- id: 'licensedFor',
162
- name: 'licensed for',
163
- type: 'array',
164
- enum: [
165
- 'amusements',
166
- 'food and beverage',
167
- 'entertainment',
168
- 'transportation',
169
- 'hot dogs',
170
- 'swimming pools',
171
- 'ferris wheels',
172
- 'bungee jumping',
173
- ],
174
- required: true,
175
- searchable: false,
176
- },
177
- {
178
- id: 'inState',
179
- name: 'In State',
180
- type: 'string',
181
- enum: ['Yes', 'No'],
182
- required: false,
183
- searchable: false,
184
- },
185
- {
186
- id: 'amountOfInspections',
187
- name: 'Inspection Count',
188
- type: 'integer',
189
- required: false,
190
- },
191
- ],
113
+ properties: [...defaultProperties],
192
114
  criteria: {
193
115
  $or: [
194
116
  {
@@ -202,6 +124,9 @@ CriteriaBuilder.args = {
202
124
  $lt: 3,
203
125
  },
204
126
  },
127
+ {
128
+ applicationDate: '2025-02-18T20:15:00.000Z',
129
+ },
205
130
  {
206
131
  licensedFor: { $in: ['hot dogs', 'amusements', 'entertainment'] },
207
132
  },
@@ -222,95 +147,7 @@ CriteriaBuilder.args = {
222
147
  };
223
148
  export const CriteriaBuilderPresetUserID = CriteriaBuilderTemplate.bind({});
224
149
  CriteriaBuilderPresetUserID.args = {
225
- properties: [
226
- {
227
- id: 'name',
228
- name: 'name',
229
- type: 'string',
230
- required: true,
231
- },
232
- {
233
- id: 'licenseNumber',
234
- name: 'license number',
235
- type: 'string',
236
- required: true,
237
- },
238
- {
239
- id: 'issueDate',
240
- name: 'issue date',
241
- type: 'date',
242
- required: false,
243
- objectId: '',
244
- },
245
- {
246
- id: 'status',
247
- name: 'status',
248
- type: 'string',
249
- enum: ['active', 'expired', 'pending approval'],
250
- required: false,
251
- objectId: '',
252
- },
253
- {
254
- id: 'licenseeName',
255
- name: 'Licensee Name',
256
- type: 'string',
257
- required: false,
258
- formula: '{{person.firstName}} {{person.middleName}} {{person.lastName}}',
259
- },
260
- {
261
- id: 'calculated',
262
- name: 'calculated',
263
- type: 'string',
264
- required: false,
265
- objectId: '',
266
- formula: '{{status}} - {{licensee.firstName}}',
267
- },
268
- {
269
- id: 'application',
270
- name: 'applicant',
271
- type: 'object',
272
- required: false,
273
- objectId: 'application',
274
- },
275
- {
276
- id: 'applicantName',
277
- name: 'Application Info',
278
- type: 'string',
279
- required: false,
280
- formula: '{{application.name}} - {{status}}',
281
- },
282
- {
283
- id: 'licensedFor',
284
- name: 'licensed for',
285
- type: 'array',
286
- enum: [
287
- 'amusements',
288
- 'food and beverage',
289
- 'entertainment',
290
- 'transportation',
291
- 'hot dogs',
292
- 'swimming pools',
293
- 'ferris wheels',
294
- 'bungee jumping',
295
- ],
296
- required: true,
297
- searchable: false,
298
- },
299
- {
300
- id: 'inState',
301
- name: 'In State',
302
- type: 'string',
303
- enum: ['Yes', 'No'],
304
- required: false,
305
- searchable: false,
306
- },
307
- {
308
- id: 'amountOfInspections',
309
- name: 'Inspection Count',
310
- type: 'integer',
311
- required: false,
312
- },
313
- ],
150
+ properties: [...defaultProperties],
314
151
  criteria: {
315
152
  $or: [
316
153
  {
@@ -325,60 +162,7 @@ CriteriaBuilderPresetUserID.args = {
325
162
  };
326
163
  export const CriteriaBuilderGroupedPresetValues = CriteriaBuilderTemplate.bind({});
327
164
  CriteriaBuilderGroupedPresetValues.args = {
328
- properties: [
329
- {
330
- id: 'name',
331
- name: 'name',
332
- type: 'string',
333
- required: true,
334
- },
335
- {
336
- id: 'issueDate',
337
- name: 'issue date',
338
- type: 'date',
339
- required: false,
340
- objectId: '',
341
- },
342
- {
343
- id: 'status',
344
- name: 'status',
345
- type: 'string',
346
- enum: ['active', 'expired', 'pending approval'],
347
- required: false,
348
- objectId: '',
349
- },
350
- {
351
- id: 'amountOfInspections',
352
- name: 'Inspection Count',
353
- type: 'integer',
354
- required: false,
355
- },
356
- {
357
- id: 'licensedFor',
358
- name: 'licensed for',
359
- type: 'array',
360
- enum: [
361
- 'amusements',
362
- 'food and beverage',
363
- 'entertainment',
364
- 'transportation',
365
- 'hot dogs',
366
- 'swimming pools',
367
- 'ferris wheels',
368
- 'bungee jumping',
369
- ],
370
- required: true,
371
- searchable: false,
372
- },
373
- {
374
- id: 'inState',
375
- name: 'In State',
376
- type: 'string',
377
- enum: ['Yes', 'No'],
378
- required: false,
379
- searchable: false,
380
- },
381
- ],
165
+ properties: [...defaultProperties],
382
166
  criteria: {
383
167
  $or: [
384
168
  {
package/dist/published/stories/FormField.stories.d.ts CHANGED
@@ -8,6 +8,7 @@ export declare const NumberField: ComponentStory<(props: FormFieldProps) => JSX.
8
8
  export declare const MaskedInput: ComponentStory<(props: FormFieldProps) => JSX.Element>;
9
9
  export declare const ChoicesSelectField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
10
10
  export declare const DatePickerField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
11
+ export declare const DateTimePickerField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
11
12
  export declare const BooleanField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
12
13
  export declare const FileUploadField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
13
14
  export declare const ArraySelectField: ComponentStory<(props: FormFieldProps) => JSX.Element>;
package/dist/published/stories/FormField.stories.js CHANGED
@@ -101,6 +101,21 @@ DatePickerField.args = {
101
101
  readOnly: false,
102
102
  size: 'small',
103
103
  };
104
+ export const DateTimePickerField = FormFieldTemplate.bind({});
105
+ DateTimePickerField.args = {
106
+ property: {
107
+ id: 'date-time',
108
+ name: 'Date Time',
109
+ type: 'date-time',
110
+ required: true,
111
+ },
112
+ onChange: (id, value) => console.log('id= ', id, 'Value= ', value),
113
+ defaultValue: '2025-02-19T18:05:00.000Z',
114
+ error: false,
115
+ required: true,
116
+ readOnly: false,
117
+ size: 'small',
118
+ };
104
119
  export const BooleanField = FormFieldTemplate.bind({});
105
120
  BooleanField.args = {
106
121
  property: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@evoke-platform/ui-components",
3
- "version": "1.0.2-testing.2",
3
+ "version": "1.1.0-testing.0",
4
4
  "description": "",
5
5
  "main": "dist/published/index.js",
6
6
  "module": "dist/published/index.js",