Skip to content

Commit

Permalink
Add missing date and datetime picker for filters of date and datetime…
Browse files Browse the repository at this point in the history 
… type (#773)
  • Loading branch information
@AbbyB97
AbbyB97 authored Aug 22, 2024
1 parent a736900 commit ca9bacf
Show file tree
Hide file tree
Showing 7 changed files with 165 additions and 110 deletions.
16 changes: 10 additions & 6 deletions src/components/Attributes/AttributeEditor/Attribute/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ export function Attribute({ name, descriptor, options, busy = false }: Props): J

if (!descriptor) return <></>;

const getFormType = (type: AttributeContentType): InputType => {
const getFormTypeFromAttributeContentType = (type: AttributeContentType): InputType => {
switch (type) {
case AttributeContentType.Boolean:
return 'checkbox';
Expand Down Expand Up @@ -190,7 +190,7 @@ export function Attribute({ name, descriptor, options, busy = false }: Props): J

const createSelect = (descriptor: DataAttributeModel | CustomAttributeModel): JSX.Element => {
return (
<Field name={name} validate={buildValidators()} type={getFormType(descriptor.contentType)}>
<Field name={name} validate={buildValidators()} type={getFormTypeFromAttributeContentType(descriptor.contentType)}>
{({ input, meta }) => (
<>
{descriptor.properties.visible ? (
Expand Down Expand Up @@ -297,7 +297,11 @@ export function Attribute({ name, descriptor, options, busy = false }: Props): J
<div style={{ flexGrow: 1 }}>
<Label for={`${name}-content`}>File content</Label>

<Field name={`${name}.content`} validate={buildValidators()} type={getFormType(descriptor.contentType)}>
<Field
name={`${name}.content`}
validate={buildValidators()}
type={getFormTypeFromAttributeContentType(descriptor.contentType)}
>
{({ input, meta }) => (
<>
<Input
Expand Down Expand Up @@ -385,7 +389,7 @@ export function Attribute({ name, descriptor, options, busy = false }: Props): J
<span style={{ fontStyle: 'italic' }}> ({language})</span>
</Label>
&nbsp;
<Field name={`${name}.code`} type={getFormType(descriptor.contentType)}>
<Field name={`${name}.code`} type={getFormTypeFromAttributeContentType(descriptor.contentType)}>
{({ input }) => {
return (
<Editor
Expand Down Expand Up @@ -413,7 +417,7 @@ export function Attribute({ name, descriptor, options, busy = false }: Props): J
}

return (
<Field name={name} validate={buildValidators()} type={getFormType(descriptor.contentType)}>
<Field name={name} validate={buildValidators()} type={getFormTypeFromAttributeContentType(descriptor.contentType)}>
{({ input, meta }) => (
<>
{descriptor.properties.visible && descriptor.contentType !== AttributeContentType.Boolean ? (
Expand All @@ -430,7 +434,7 @@ export function Attribute({ name, descriptor, options, busy = false }: Props): J
id={name}
valid={!meta.error && meta.touched}
invalid={!!meta.error && meta.touched}
type={descriptor.properties.visible ? getFormType(descriptor.contentType) : 'hidden'}
type={descriptor.properties.visible ? getFormTypeFromAttributeContentType(descriptor.contentType) : 'hidden'}
placeholder={`Enter ${descriptor.properties.label}`}
disabled={descriptor.properties.readOnly || busy}
step={getStepValue(descriptor.contentType)}
Expand Down
15 changes: 2 additions & 13 deletions src/components/ExecutionConditionItemsList/ConditionsItemsList/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import cx from 'classnames';
import { selectors as enumSelectors, getEnumLabel } from 'ducks/enums';
import { EntityType, selectors } from 'ducks/filters';
import { selectors as rulesSelectors } from 'ducks/rules';
import { useCallback, useMemo } from 'react';
import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { Badge, Spinner } from 'reactstrap';
import { AttributeContentType, ConditionItemDto, FilterFieldType, PlatformEnum, SearchFieldDataDto } from 'types/openapi';
import { AttributeContentType, ConditionItemDto, FilterFieldType, PlatformEnum } from 'types/openapi';
import { getFormattedDate, getFormattedDateTime } from 'utils/dateUtil';
import styles from './conditionsItemsList.module.scss';

Expand Down Expand Up @@ -37,17 +37,6 @@ const ConditionsItemsList = ({ conditionItems = [], conditionName, conditionUuid
],
[],
);
const checkIfFieldIsDate = useCallback((field: SearchFieldDataDto) => {
if (
field.attributeContentType === AttributeContentType.Date ||
field.attributeContentType === AttributeContentType.Time ||
field.attributeContentType === AttributeContentType.Datetime
) {
return true;
} else {
return false;
}
}, []);

const renderConditionsBadges = useMemo(() => {
return conditionItems.map((condition, i) => {
Expand Down
15 changes: 2 additions & 13 deletions src/components/ExecutionConditionItemsList/ExecutionsItemsList/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import cx from 'classnames';
import { selectors as enumSelectors, getEnumLabel } from 'ducks/enums';
import { EntityType, selectors } from 'ducks/filters';
import { selectors as rulesSelectors } from 'ducks/rules';
import { useCallback, useMemo } from 'react';
import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { Badge, Spinner } from 'reactstrap';
import { AttributeContentType, FilterFieldType, PlatformEnum, SearchFieldDataDto } from 'types/openapi';
import { AttributeContentType, FilterFieldType, PlatformEnum } from 'types/openapi';
import { ExecutionItemModel } from 'types/rules';
import { getFormattedDate, getFormattedDateTime } from 'utils/dateUtil';
import styles from './executionsItemsList.module.scss';
Expand Down Expand Up @@ -38,17 +38,6 @@ const ExecutionsItemsList = ({ executionItems = [], executionName, executionUuid
[],
);

const checkIfFieldIsDate = useCallback((field: SearchFieldDataDto) => {
if (
field.attributeContentType === AttributeContentType.Date ||
field.attributeContentType === AttributeContentType.Time ||
field.attributeContentType === AttributeContentType.Datetime
) {
return true;
} else {
return false;
}
}, []);
const renderActionBadges = useMemo(() => {
if (!executionItems) return null;
return executionItems.map((f, i) => {
Expand Down
116 changes: 82 additions & 34 deletions src/components/FilterWidget/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,10 @@ import {
FilterFieldSource,
FilterFieldType,
PlatformEnum,
SearchFieldDataDto,
SearchFilterRequestDto,
} from 'types/openapi';
import { getFormType, getStepValue } from 'utils/common-utils';
import { getFormattedDate, getFormattedDateTime } from 'utils/dateUtil';
import { getFormTypeFromAttributeContentType, getFormTypeFromFilterFieldType, getStepValue } from 'utils/common-utils';
import { checkIfFieldAttributeTypeIsDate, getFormattedDate, getFormattedDateTime, getFormattedUtc } from 'utils/dateUtil';
import styles from './FilterWidget.module.scss';

const noValue: { [condition in FilterConditionOperator]: boolean } = {
Expand Down Expand Up @@ -89,15 +88,9 @@ export default function FilterWidget({ onFilterUpdate, title, entity, getAvailab
[],
);

const checkIfFieldIsDate = useCallback((field: SearchFieldDataDto) => {
if (
field.attributeContentType === AttributeContentType.Date ||
field.attributeContentType === AttributeContentType.Time ||
field.attributeContentType === AttributeContentType.Datetime
) {
const checkIfFieldTypeIsDate = useCallback((type: FilterFieldType) => {
if (type === FilterFieldType.Date || type === FilterFieldType.Datetime) {
return true;
} else {
return false;
}
}, []);

Expand Down Expand Up @@ -134,8 +127,37 @@ export default function FilterWidget({ onFilterUpdate, title, entity, getAvailab
value: currentFilters[selectedFilter].condition,
});

if (field.type === FilterFieldType.String || field.type === FilterFieldType.Number || field.type === FilterFieldType.Date) {
if (checkIfFieldAttributeTypeIsDate(field)) {
if (field.attributeContentType === AttributeContentType.Date) {
const dateVal = getFormattedDate(currentFilters[selectedFilter].value as unknown as string);
setFilterValue(JSON.parse(JSON.stringify(dateVal)));
return;
}
if (field.attributeContentType === AttributeContentType.Datetime) {
const dateTimeVal = getFormattedDateTime(currentFilters[selectedFilter].value as unknown as string);
setFilterValue(JSON.parse(JSON.stringify(dateTimeVal)));
return;
}
}

if (
field.type === FilterFieldType.String ||
field.type === FilterFieldType.Number ||
field.type === FilterFieldType.Date ||
field.type === FilterFieldType.Datetime
) {
if (field.type === FilterFieldType.Datetime) {
const dateTimeVal = getFormattedDateTime(currentFilters[selectedFilter].value as unknown as string);
setFilterValue(JSON.parse(JSON.stringify(dateTimeVal)));
return;
}
if (field.type === FilterFieldType.Date) {
const dateVal = getFormattedDate(currentFilters[selectedFilter].value as unknown as string);
setFilterValue(JSON.parse(JSON.stringify(dateVal)));
return;
}
setFilterValue(currentFilters[selectedFilter].value);

return;
}

Expand All @@ -148,7 +170,7 @@ export default function FilterWidget({ onFilterUpdate, title, entity, getAvailab
const value = currentFilters[selectedFilter].value;
const label = field.platformEnum
? platformEnums[field.platformEnum][(value ?? '') as string].label
: checkIfFieldIsDate(field)
: checkIfFieldAttributeTypeIsDate(field)
? getFormattedDateTime(value as unknown as string)
: value;
setFilterValue({ label, value });
Expand All @@ -161,7 +183,7 @@ export default function FilterWidget({ onFilterUpdate, title, entity, getAvailab
let label = '';
let value = '';
if (typeof v === 'string') {
if (checkIfFieldIsDate(field)) {
if (checkIfFieldAttributeTypeIsDate(field)) {
label = getFormattedDateTime(v);
} else {
label = v;
Expand All @@ -177,16 +199,7 @@ export default function FilterWidget({ onFilterUpdate, title, entity, getAvailab

setFilterValue(newFilterValue);
}
}, [
availableFilters,
currentFilters,
selectedFilter,
booleanOptions,
platformEnums,
FilterConditionOperatorEnum,
searchGroupEnum,
checkIfFieldIsDate,
]);
}, [availableFilters, currentFilters, selectedFilter, booleanOptions, platformEnums, FilterConditionOperatorEnum, searchGroupEnum]);

const onUnselectFiltersClick = useCallback(
(e: React.MouseEvent<HTMLDivElement>) => {
Expand All @@ -207,13 +220,21 @@ export default function FilterWidget({ onFilterUpdate, title, entity, getAvailab
return;
}

const field = availableFilters
.find((f) => f?.filterFieldSource === filterGroup.value)
?.searchFieldData?.find((f) => f?.fieldIdentifier === filterField.value);

const updatedFilterItem: SearchFilterModel = {
fieldSource: filterGroup.value,
fieldIdentifier: filterField.value,
condition: filterCondition.value,
value: filterValue
? typeof filterValue === 'string'
? filterValue
? field?.attributeContentType && checkIfFieldAttributeTypeIsDate(field)
? getFormattedUtc(field.attributeContentType, filterValue)
: field?.type && checkIfFieldTypeIsDate(field.type)
? getFormattedUtc(field.type, filterValue)
: filterValue
: Array.isArray(filterValue)
? filterValue.map((v) => (v as any).value)
: (filterValue as any).value
Expand Down Expand Up @@ -245,7 +266,19 @@ export default function FilterWidget({ onFilterUpdate, title, entity, getAvailab
onFilterUpdate(filtersWithItemNames);
setSelectedFilter(-1);
}
}, [filterGroup, filterField, filterCondition, selectedFilter, currentFilters, filterValue, dispatch, entity, onFilterUpdate]);
}, [
availableFilters,
filterGroup,
filterField,
filterCondition,
selectedFilter,
currentFilters,
filterValue,
dispatch,
entity,
onFilterUpdate,
checkIfFieldTypeIsDate,
]);

const onRemoveFilterClick = useCallback(
(index: number) => {
Expand Down Expand Up @@ -296,7 +329,7 @@ export default function FilterWidget({ onFilterUpdate, title, entity, getAvailab
let label = '';
let value = '';
if (typeof v === 'string') {
if (checkIfFieldIsDate(currentField)) {
if (checkIfFieldAttributeTypeIsDate(currentField)) {
label = getFormattedDateTime(v);
} else {
label = v;
Expand Down Expand Up @@ -324,7 +357,7 @@ export default function FilterWidget({ onFilterUpdate, title, entity, getAvailab
}

return [];
}, [currentField, currentFilters, selectedFilter, checkIfFieldIsDate]);
}, [currentField, currentFilters, selectedFilter]);

const getBadgeContent = useCallback(
(itemNumber: number, fieldSource: string, fieldCondition: string, label: string, value: string) => {
Expand Down Expand Up @@ -423,21 +456,34 @@ export default function FilterWidget({ onFilterUpdate, title, entity, getAvailab
{currentField?.type === undefined ||
currentField?.type === FilterFieldType.String ||
currentField?.type === FilterFieldType.Date ||
currentField?.type === FilterFieldType.Datetime ||
currentField?.type === FilterFieldType.Number ? (
<Input
id="value"
type={
currentField?.attributeContentType && checkIfFieldIsDate(currentField)
? getFormType(currentField?.attributeContentType)
: 'text'
currentField?.attributeContentType && checkIfFieldAttributeTypeIsDate(currentField)
? getFormTypeFromAttributeContentType(currentField?.attributeContentType)
: currentField?.type
? getFormTypeFromFilterFieldType(currentField?.type)
: 'text'
}
step={
currentField?.attributeContentType
? getStepValue(currentField?.attributeContentType)
: undefined
: currentField?.type
? getStepValue(currentField?.type)
: undefined
}
value={filterValue?.toString() || ''}
onChange={(e) => {
if (
(currentField?.attributeContentType && checkIfFieldAttributeTypeIsDate(currentField)) ||
(currentField?.type && getFormTypeFromFilterFieldType(currentField?.type))
) {
const dateTimeVal = getFormattedDateTime(e.target.value);
setFilterValue(JSON.parse(JSON.stringify(dateTimeVal)));
return;
}
setFilterValue(JSON.parse(JSON.stringify(e.target.value)));
}}
placeholder="Enter filter value"
Expand Down Expand Up @@ -510,9 +556,11 @@ export default function FilterWidget({ onFilterUpdate, title, entity, getAvailab
? `'${
field?.platformEnum
? platformEnums[field.platformEnum][f.value as unknown as string]?.label
: field && field?.attributeContentType === AttributeContentType.Date
: (field && field?.attributeContentType === AttributeContentType.Date) ||
field?.type === FilterFieldType.Date
? getFormattedDate(f.value as unknown as string)
: field && field?.attributeContentType === AttributeContentType.Datetime
: (field && field?.attributeContentType === AttributeContentType.Datetime) ||
field?.type === FilterFieldType.Datetime
? getFormattedDateTime(f.value as unknown as string)
: f.value
}'`
Expand Down
Loading

0 comments on commit ca9bacf

Please sign in to comment.