chrone: sperate client and server to different repos.

src/components/AdvancedFilter/AdvancedFilter.schema.js

@@ -0,0 +1,13 @@
+import * as Yup from 'yup';
+
+export const getFilterDropdownSchema = () =>
+  Yup.object().shape({
+    conditions: Yup.array().of(
+      Yup.object().shape({
+        fieldKey: Yup.string(),
+        value: Yup.string().nullable(),
+        condition: Yup.string().nullable(),
+        comparator: Yup.string().nullable(),
+      }),
+    ),
+  });

src/components/AdvancedFilter/AdvancedFilterCompatatorField.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Classes } from '@blueprintjs/core';
+import ListSelect from '../ListSelect';
+import { getConditionTypeCompatators } from './utils';
+
+export default function DynamicFilterCompatatorField({
+  dataType,
+  ...restProps
+}) {
+  const options = getConditionTypeCompatators(dataType);
+
+  return (
+    <ListSelect
+      textProp={'label'}
+      selectedItemProp={'value'}
+      items={options}
+      className={Classes.FILL}
+      filterable={false}
+      popoverProps={{
+        inline: true,
+        minimal: true,
+        captureDismiss: true,
+      }}
+      {...restProps}
+    />
+  );
+}

src/components/AdvancedFilter/AdvancedFilterDropdown.js

@@ -0,0 +1,397 @@
+import React from 'react';
+import { Formik, FastField, FieldArray, useFormikContext } from 'formik';
+import {
+  Button,
+  FormGroup,
+  Classes,
+  InputGroup,
+  MenuItem,
+} from '@blueprintjs/core';
+import { get, first, defaultTo, isEqual, isEmpty } from 'lodash';
+import intl from 'react-intl-universal';
+import { Choose, Icon, FormattedMessage as T, ListSelect } from 'components';
+import { useUpdateEffect } from 'hooks';
+import {
+  AdvancedFilterDropdownProvider,
+  FilterConditionProvider,
+  useFilterCondition,
+  useAdvancedFilterContext,
+} from './AdvancedFilterDropdownContext';
+import AdvancedFilterCompatatorField from './AdvancedFilterCompatatorField';
+import AdvancedFilterValueField from './AdvancedFilterValueField';
+import {
+  filterConditionRoles,
+  getConditionalsOptions,
+  transformFieldsToOptions,
+  shouldFilterValueFieldUpdate,
+  getConditionTypeCompatators,
+} from './utils';
+import { getFilterDropdownSchema } from './AdvancedFilter.schema';
+import { useAdvancedFilterAutoSubmit } from './components';
+
+/**
+ * Condition item list renderer.
+ */
+function ConditionItemRenderer(condition, { handleClick, modifiers, query }) {
+  return (
+    <MenuItem
+      text={
+        <>
+          <div>{condition.label}</div>
+          <span className="text-hint">{condition.text}</span>
+        </>
+      }
+      key={condition.value}
+      onClick={handleClick}
+    />
+  );
+}
+
+/**
+ * Filter condition field.
+ */
+function FilterConditionField() {
+  const conditionalsOptions = getConditionalsOptions();
+  const { conditionIndex, getConditionFieldPath } = useFilterCondition();
+
+  const conditionFieldPath = getConditionFieldPath('condition');
+
+  return (
+    <FastField name={conditionFieldPath}>
+      {({ form, field }) => (
+        <FormGroup className={'form-group--condition'}>
+          <Choose>
+            <Choose.When condition={conditionIndex === 0}>
+              <InputGroup disabled value={intl.get('filter.when')} />
+            </Choose.When>
+
+            <Choose.Otherwise>
+              <ListSelect
+                selectedItem={field.value}
+                textProp={'label'}
+                selectedItemProp={'value'}
+                labelProp={'text'}
+                items={conditionalsOptions}
+                className={Classes.FILL}
+                filterable={false}
+                onItemSelect={(option) => {
+                  form.setFieldValue(conditionFieldPath, option.value);
+                }}
+                popoverProps={{
+                  inline: true,
+                  minimal: true,
+                  captureDismiss: true,
+                }}
+                itemRenderer={ConditionItemRenderer}
+              />
+            </Choose.Otherwise>
+          </Choose>
+        </FormGroup>
+      )}
+    </FastField>
+  );
+}
+
+/**
+ * Compatator field.
+ */
+function FilterCompatatorFilter() {
+  const { getConditionFieldPath, fieldMeta } = useFilterCondition();
+
+  const comparatorFieldPath = getConditionFieldPath('comparator');
+  const fieldType = get(fieldMeta, 'fieldType');
+
+  return (
+    <FastField name={comparatorFieldPath}>
+      {({ form, field }) => (
+        <FormGroup className={'form-group--comparator'}>
+          <AdvancedFilterCompatatorField
+            dataType={fieldType}
+            className={Classes.FILL}
+            selectedItem={field.value}
+            onItemSelect={(option) => {
+              form.setFieldValue(comparatorFieldPath, option.value);
+            }}
+          />
+        </FormGroup>
+      )}
+    </FastField>
+  );
+}
+
+/**
+ * Changes default value of comparator field in the condition row once the
+ * field option changing.
+ */
+function useDefaultComparatorFieldValue({
+  getConditionValue,
+  setConditionValue,
+  fieldMeta,
+}) {
+  const fieldKeyValue = getConditionValue('fieldKey');
+
+  const comparatorsOptions = React.useMemo(
+    () => getConditionTypeCompatators(fieldMeta.fieldType),
+    [fieldMeta.fieldType],
+  );
+
+  useUpdateEffect(() => {
+    if (fieldKeyValue) {
+      const defaultValue = get(first(comparatorsOptions), 'value');
+      setConditionValue('comparator', defaultValue);
+    }
+  }, [fieldKeyValue, setConditionValue, comparatorsOptions]);
+}
+
+/**
+ * Resource fields field.
+ */
+function FilterFieldsField() {
+  const {
+    getConditionFieldPath,
+    getConditionValue,
+    setConditionValue,
+    fieldMeta,
+  } = useFilterCondition();
+
+  const { fields } = useAdvancedFilterContext();
+
+  const fieldPath = getConditionFieldPath('fieldKey');
+  const valueFieldPath = getConditionFieldPath('value');
+
+  useDefaultComparatorFieldValue({
+    getConditionValue,
+    setConditionValue,
+    fieldMeta,
+  });
+
+  return (
+    <FastField name={fieldPath}>
+      {({ field, form }) => (
+        <FormGroup className={'form-group--fieldKey'}>
+          <ListSelect
+            selectedItem={field.value}
+            textProp={'label'}
+            selectedItemProp={'value'}
+            items={transformFieldsToOptions(fields)}
+            className={Classes.FILL}
+            onItemSelect={(option) => {
+              form.setFieldValue(fieldPath, option.value);
+
+              // Resets the value field to empty once the field option changing.
+              form.setFieldValue(valueFieldPath, '');
+            }}
+            popoverProps={{
+              inline: true,
+              minimal: true,
+              captureDismiss: true,
+            }}
+          />
+        </FormGroup>
+      )}
+    </FastField>
+  );
+}
+
+/**
+ * Advanced filter value field.
+ */
+function FilterValueField() {
+  const { conditionIndex, fieldMeta, getConditionFieldPath } =
+    useFilterCondition();
+
+  // Can't continue if the given field key is not selected yet.
+  if (!fieldMeta) {
+    return null;
+  }
+  // Field meta type, name and options.
+  const fieldType = get(fieldMeta, 'fieldType');
+  const fieldName = get(fieldMeta, 'name');
+  const options = get(fieldMeta, 'options');
+
+  const valueFieldPath = getConditionFieldPath('value');
+
+  return (
+    <FastField
+      name={valueFieldPath}
+      fieldKey={fieldType} // Pass to shouldUpdate function.
+      shouldUpdate={shouldFilterValueFieldUpdate}
+    >
+      {({ form: { setFieldValue }, field }) => (
+        <FormGroup className={'form-group--value'}>
+          <AdvancedFilterValueField
+            isFocus={conditionIndex === 0}
+            value={field.value}
+            key={'name'}
+            label={fieldName}
+            fieldType={fieldType}
+            options={options}
+            onChange={(value) => {
+              setFieldValue(valueFieldPath, value);
+            }}
+          />
+        </FormGroup>
+      )}
+    </FastField>
+  );
+}
+
+/**
+ * Advanced filter condition line.
+ */
+function AdvancedFilterDropdownCondition({ conditionIndex, onRemoveClick }) {
+  // Handle click remove condition.
+  const handleClickRemoveCondition = () => {
+    onRemoveClick && onRemoveClick(conditionIndex);
+  };
+
+  return (
+    <div className="filter-dropdown__condition">
+      <FilterConditionProvider conditionIndex={conditionIndex}>
+        <FilterConditionField />
+        <FilterFieldsField />
+        <FilterCompatatorFilter />
+        <FilterValueField />
+
+        <Button
+          icon={<Icon icon="times" iconSize={14} />}
+          minimal={true}
+          onClick={handleClickRemoveCondition}
+          className={'button--remove'}
+        />
+      </FilterConditionProvider>
+    </div>
+  );
+}
+
+/**
+ * Advanced filter dropdown condition.
+ */
+function AdvancedFilterDropdownConditions({ push, remove, replace, form }) {
+  const { initialCondition } = useAdvancedFilterContext();
+
+  // Handle remove condition.
+  const handleClickRemoveCondition = (conditionIndex) => {
+    if (form.values.conditions.length > 1) {
+      remove(conditionIndex);
+    } else {
+      replace(0, { ...initialCondition });
+    }
+  };
+  // Handle new condition button click.
+  const handleNewConditionBtnClick = (index) => {
+    push({ ...initialCondition });
+  };
+
+  return (
+    <div className="filter-dropdonw__conditions-wrap">
+      <div className={'filter-dropdown__conditions'}>
+        {form.values.conditions.map((condition, index) => (
+          <AdvancedFilterDropdownCondition
+            conditionIndex={index}
+            onRemoveClick={handleClickRemoveCondition}
+          />
+        ))}
+      </div>
+      <AdvancedFilterDropdownFooter onClick={handleNewConditionBtnClick} />
+    </div>
+  );
+}
+
+/**
+ * Advanced filter dropdown form.
+ */
+function AdvancedFilterDropdownForm() {
+  // Advanced filter auto-save.
+  useAdvancedFilterAutoSubmit();
+
+  return (
+    <div className="filter-dropdown__form">
+      <FieldArray
+        name={'conditions'}
+        render={({ ...fieldArrayProps }) => (
+          <AdvancedFilterDropdownConditions {...fieldArrayProps} />
+        )}
+      />
+    </div>
+  );
+}
+
+/**
+ * Advanced filter dropdown footer.
+ */
+function AdvancedFilterDropdownFooter({ onClick }) {
+  // Handle new filter condition button click.
+  const onClickNewFilter = (event) => {
+    onClick && onClick(event);
+  };
+  return (
+    <div className="filter-dropdown__footer">
+      <Button minimal={true} onClick={onClickNewFilter}>
+        <T id={'new_conditional'} />
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * Advanced filter dropdown.
+ */
+export function AdvancedFilterDropdown({
+  fields,
+  conditions,
+  defaultFieldKey,
+  defaultComparator,
+  defaultValue,
+  defaultCondition,
+  onFilterChange,
+}) {
+  // Initial condition.
+  const initialCondition = {
+    fieldKey: defaultFieldKey,
+    comparator: defaultTo(defaultComparator, 'contain'),
+    condition: defaultTo(defaultCondition, 'or'),
+    value: defaultTo(defaultValue, ''),
+  };
+  // Initial conditions.
+  const initialConditions = !isEmpty(conditions)
+    ? conditions
+    : [initialCondition, initialCondition];
+
+  const [prevConditions, setPrevConditions] = React.useState(initialConditions);
+
+  // Handle the filter dropdown form submit.
+  const handleFitlerDropdownSubmit = (values) => {
+    const conditions = filterConditionRoles(values.conditions);
+
+    // Campare the current conditions with previous conditions, if they were equal
+    // there is no need to execute `onFilterChange` function.
+    if (!isEqual(prevConditions, conditions)) {
+      onFilterChange && onFilterChange(conditions);
+      setPrevConditions(conditions);
+    }
+  };
+  // Filter dropdown validation schema.
+  const validationSchema = getFilterDropdownSchema();
+
+  // Initial values.
+  const initialValues = {
+    conditions: initialConditions,
+  };
+
+  return (
+    <div className="filter-dropdown">
+      <AdvancedFilterDropdownProvider
+        initialCondition={initialCondition}
+        fields={fields}
+      >
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          component={AdvancedFilterDropdownForm}
+          onSubmit={handleFitlerDropdownSubmit}
+        />
+      </AdvancedFilterDropdownProvider>
+    </div>
+  );
+}

src/components/AdvancedFilter/AdvancedFilterDropdownContext.js

@@ -0,0 +1,84 @@
+import React, { createContext, useContext } from 'react';
+import { get, keyBy } from 'lodash';
+import { useFormikContext } from 'formik';
+
+const AdvancedFilterContext = createContext({});
+const FilterConditionContext = createContext({});
+
+/**
+ * Advanced filter dropdown context provider.
+ */
+function AdvancedFilterDropdownProvider({
+  initialCondition,
+  fields,
+  ...props
+}) {
+  const fieldsByKey = keyBy(fields, 'key');
+
+  // Retrieve field meta by the given field key.
+  const getFieldMetaByKey = React.useCallback(
+    (key) => get(fieldsByKey, key),
+    [fieldsByKey],
+  );
+  // Provider payload.
+  const provider = { initialCondition, fields, fieldsByKey, getFieldMetaByKey };
+
+  return <AdvancedFilterContext.Provider value={provider} {...props} />;
+}
+
+/**
+ * Filter condition row context provider.
+ */
+function FilterConditionProvider({ conditionIndex, ...props }) {
+  const { setFieldValue, values } = useFormikContext();
+  const { getFieldMetaByKey } = useAdvancedFilterContext();
+
+  // Condition value path.
+  const conditionPath = `conditions[${conditionIndex}]`;
+
+  // Sets conditions value.
+  const setConditionValue = React.useCallback(
+    (field, value) => {
+      return setFieldValue(`${conditionPath}.${field}`, value);
+    },
+    [conditionPath, setFieldValue],
+  );
+
+  // Retrieve condition field value.
+  const getConditionValue = React.useCallback(
+    (field) => get(values, `${conditionPath}.${field}`),
+    [conditionPath, values],
+  );
+
+  // The current condition field meta.
+  const fieldMeta = React.useMemo(
+    () => getFieldMetaByKey(getConditionValue('fieldKey')),
+    [getFieldMetaByKey, getConditionValue],
+  );
+
+  // Retrieve the condition field path.
+  const getConditionFieldPath = React.useCallback(
+    (field) => `${conditionPath}.${field}`,
+    [conditionPath],
+  );
+
+  // Provider payload.
+  const provider = {
+    fieldMeta,
+    conditionIndex,
+    getConditionValue,
+    getConditionFieldPath,
+    setConditionValue,
+  };
+  return <FilterConditionContext.Provider value={provider} {...props} />;
+}
+
+const useFilterCondition = () => useContext(FilterConditionContext);
+const useAdvancedFilterContext = () => useContext(AdvancedFilterContext);
+
+export {
+  AdvancedFilterDropdownProvider,
+  FilterConditionProvider,
+  useAdvancedFilterContext,
+  useFilterCondition,
+};

src/components/AdvancedFilter/AdvancedFilterPopover.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Popover, PopoverInteractionKind, Position } from '@blueprintjs/core';
+import { AdvancedFilterDropdown } from './AdvancedFilterDropdown';
+
+/**
+ * Advanced filter popover.
+ */
+export function AdvancedFilterPopover({
+  popoverProps,
+  advancedFilterProps,
+  children,
+}) {
+  return (
+    <Popover
+      minimal={true}
+      content={
+        <AdvancedFilterDropdown
+          {...advancedFilterProps}
+        />
+      }
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      canOutsideClickClose={true}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      {...popoverProps}
+    >
+      {children}
+    </Popover>
+  );
+}

src/components/AdvancedFilter/AdvancedFilterValueField.js

@@ -0,0 +1,131 @@
+import React from 'react';
+import { Position, Checkbox, InputGroup } from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import { isUndefined } from 'lodash';
+import { useAutofocus } from 'hooks';
+import { Choose, ListSelect } from 'components';
+import { momentFormatter } from 'utils';
+
+function AdvancedFilterEnumerationField({ options, value, ...rest }) {
+  return (
+    <ListSelect
+      items={options}
+      selectedItem={value}
+      popoverProps={{
+        fill: true,
+        inline: true,
+        minimal: true,
+        captureDismiss: true,
+      }}
+      defaultText={`Select an option`}
+      textProp={'label'}
+      selectedItemProp={'key'}
+      {...rest}
+    />
+  );
+}
+
+const IFieldType = {
+  ENUMERATION: 'enumeration',
+  BOOLEAN: 'boolean',
+  NUMBER: 'number',
+  DATE: 'date',
+}
+
+
+function tansformDateValue(date, defaultValue = null) {
+  return date ? moment(date).toDate() : defaultValue;
+}
+/**
+ * Advanced filter value field detarminer.
+ */
+export default function AdvancedFilterValueField2({
+  value,
+  fieldType,
+  options,
+  onChange,
+  isFocus
+}) {
+  const [localValue, setLocalValue] = React.useState(value);
+
+  React.useEffect(() => {
+    if (localValue !== value && !isUndefined(value)) {
+      setLocalValue(value)
+    }
+  }, [localValue, value]);
+
+  // Input field reference.
+  const valueRef = useAutofocus(isFocus);
+
+  const triggerOnChange = (value) => onChange && onChange(value);
+
+  // Handle input change.
+  const handleInputChange = (e) => {
+    if (e.currentTarget.type === 'checkbox') {
+      setLocalValue(e.currentTarget.checked);
+      triggerOnChange(e.currentTarget.checked);
+    } else {
+      setLocalValue(e.currentTarget.value);
+      triggerOnChange(e.currentTarget.value);
+    }
+  };
+
+  // Handle enumeration field type change.
+  const handleEnumerationChange = (option) => {
+    setLocalValue(option.key);
+    triggerOnChange(option.key);
+  };
+
+  // Handle date field change.
+  const handleDateChange = (date) => {
+    const formattedDate = moment(date).format('YYYY/MM/DD');
+
+    setLocalValue(formattedDate);
+    triggerOnChange(formattedDate);
+  };
+
+  return (
+    <Choose>
+      <Choose.When condition={fieldType === IFieldType.ENUMERATION}>
+        <AdvancedFilterEnumerationField
+          options={options}
+          value={localValue}
+          onItemSelect={handleEnumerationChange}
+        />
+      </Choose.When>
+
+      <Choose.When condition={fieldType === IFieldType.DATE}>
+        <DateInput
+          {...momentFormatter('YYYY/MM/DD')}
+          value={tansformDateValue(localValue)}
+          onChange={handleDateChange}
+          popoverProps={{
+            minimal: true,
+            position: Position.BOTTOM,
+          }}
+          shortcuts={true}
+          placeholder={'Enter date'}
+          fill={true}
+          inputProps={{
+            fill: true
+          }}
+        />
+      </Choose.When>
+
+      <Choose.When condition={fieldType === IFieldType.BOOLEAN}>
+        <Checkbox value={localValue} onChange={handleInputChange} />
+      </Choose.When>
+
+      <Choose.Otherwise>
+        <InputGroup
+          placeholder={intl.get('value')}
+          onChange={handleInputChange}
+          value={localValue}
+          inputRef={valueRef}
+        />
+      </Choose.Otherwise>
+    </Choose>
+  );
+}

src/components/AdvancedFilter/components.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { debounce } from 'lodash';
+
+const DEBOUNCE_MS = 100;
+
+/**
+ * Advanced filter auto-save.
+ */
+export function useAdvancedFilterAutoSubmit() {
+  const { submitForm, values } = useFormikContext();
+  const [isSubmit, setIsSubmit] = React.useState(false);
+
+  const debouncedSubmit = React.useCallback(
+    debounce(() => {
+      return submitForm().then(() => setIsSubmit(true));
+    }, DEBOUNCE_MS),
+    [submitForm],
+  );
+
+  React.useEffect(() => debouncedSubmit, [debouncedSubmit, values]);
+}

src/components/AdvancedFilter/interfaces.ts

@@ -0,0 +1,111 @@
+import { ArrayHelpers } from 'formik';
+import { IPopoverProps } from '@blueprintjs/core';
+
+export type IResourceFieldType = 'text' | 'number' | 'enumeration' | 'boolean';
+
+export interface IResourceField {
+  name: string;
+  key: string;
+  fieldType: IResourceFieldType;
+}
+
+export interface IAdvancedFilterDropdown {
+  fields: IResourceField[];
+  conditions?: IFilterRole[];
+  defaultFieldKey: string;
+  defaultComparator?: string;
+  defaultValue?: string;
+  defaultCondition?: string;
+  onFilterChange?: (filterRoles: IFilterRole[]) => void;
+}
+
+export interface IAdvancedFilterDropdownFooter {
+  onClick?: Function;
+}
+
+export interface IFilterFieldsField {
+  fields: IResourceField[];
+}
+
+export interface IFilterRole {
+  fieldKey: string;
+  comparator: string;
+  condition: string;
+  value: string;
+}
+
+export interface IAdvancedFilterContextProps {
+  initialCondition: IFilterRole;
+  fields: IResourceField[];
+  fieldsByKey: { [fieldKey: string]: IResourceField };
+}
+
+export interface IFilterConditionContextProps {
+  conditionIndex: number;
+}
+
+export interface IAdvancedFilterProviderProps {
+  initialCondition: IFilterRole;
+  fields: IResourceField[];
+  children: JSX.Element | JSX.Element[];
+}
+
+export interface IFilterConditionProviderProps {
+  conditionIndex: number;
+  children: JSX.Element | JSX.Element[];
+}
+
+export interface IFilterDropdownFormikValues {
+  conditions: IFilterRole[];
+}
+
+export type IAdvancedFilterDropdownConditionsProps = ArrayHelpers;
+
+export interface IAdvancedFilterDropdownCondition {
+  conditionIndex: number;
+  onRemoveClick: Function;
+}
+
+export interface IFilterOption {
+  key: string;
+  label: string;
+}
+
+export interface IAdvancedFilterValueField {
+  fieldType: string;
+  value?: string;
+  key: string;
+  label: string;
+  options?: IFilterOption[];
+  onChange: Function;
+}
+
+export enum IFieldType {
+  TEXT = 'text',
+  NUMBER = 'number',
+  DATE = 'date',
+  ENUMERATION = 'enumeration',
+  BOOLEAN = 'boolean',
+}
+
+export interface IConditionTypeOption {
+  value: string;
+  label: string;
+}
+
+export interface IConditionOption {
+  label: string;
+  value: string;
+  text?: string;
+}
+
+export interface IAdvancedFilterPopover {
+  popoverProps?: IPopoverProps;
+  advancedFilterProps: IAdvancedFilterDropdown;
+  children: JSX.Element | JSX.Element[];
+}
+
+
+export interface IDynamicFilterCompatatorFieldProps {
+  dataType: string;
+}

src/components/AdvancedFilter/utils.js

@@ -0,0 +1,112 @@
+import intl from 'react-intl-universal';
+import {
+  defaultFastFieldShouldUpdate,
+  uniqueMultiProps,
+  checkRequiredProperties,
+} from 'utils';
+
+// Conditions options.
+export const getConditionalsOptions = () => [
+  {
+    value: 'and',
+    label: intl.get('and'),
+    text: intl.get('filter.all_filters_must_match'),
+  },
+  {
+    value: 'or',
+    label: intl.get('or'),
+    text: intl.get('filter.atleast_one_filter_must_match'),
+  },
+];
+
+export const getBooleanCompatators = () => [
+  { value: 'is', label: intl.get('is') },
+  { value: 'is_not', label: intl.get('is_not') },
+];
+
+export const getTextCompatators = () => [
+  { value: 'contain', label: intl.get('contain') },
+  { value: 'not_contain', label: intl.get('not_contain') },
+  { value: 'equal', label: intl.get('equals') },
+  { value: 'not_equal', label: intl.get('not_equals') },
+  { value: 'starts_with', label: intl.get('starts_with') },
+  { value: 'ends_with', label: intl.get('ends_with') },
+];
+
+export const getDateCompatators = () => [
+  { value: 'in', label: intl.get('in') },
+  { value: 'after', label: intl.get('after') },
+  { value: 'before', label: intl.get('before') },
+];
+
+export const getOptionsCompatators = () => [
+  { value: 'is', label: intl.get('is') },
+  { value: 'is_not', label: intl.get('is_not') },
+];
+
+export const getNumberCampatators = () => [
+  { value: 'equal', label: intl.get('equals') },
+  { value: 'not_equal', label: intl.get('not_equal') },
+  { value: 'bigger_than', label: intl.get('bigger_than') },
+  { value: 'bigger_or_equal', label: intl.get('bigger_or_equals') },
+  { value: 'smaller_than', label: intl.get('smaller_than') },
+  { value: 'smaller_or_equal', label: intl.get('smaller_or_equals') },
+];
+
+export const getConditionTypeCompatators = (
+  dataType,
+) => {
+  return [
+    ...(dataType === 'enumeration'
+      ? [...getOptionsCompatators()]
+      : dataType === 'date'
+      ? [...getDateCompatators()]
+      : dataType === 'boolean'
+      ? [...getBooleanCompatators()]
+      : dataType === 'number'
+      ? [...getNumberCampatators()]
+      : [...getTextCompatators()]),
+  ];
+};
+
+export const getConditionDefaultCompatator = (
+  dataType,
+) => {
+  const compatators = getConditionTypeCompatators(dataType);
+  return compatators[0];
+};
+
+export const transformFieldsToOptions = (fields) =>
+  fields.map((field) => ({
+    value: field.key,
+    label: field.name,
+  }));
+
+/**
+ * Filtered conditions that don't contain atleast on required fields or
+ * fileds keys that not exists.
+ * @param {IFilterRole[]} conditions
+ * @returns
+ */
+export const filterConditionRoles = (
+  conditions,
+) => {
+  const requiredProps = ['fieldKey', 'condition', 'comparator', 'value'];
+
+  const filteredConditions = conditions.filter(
+    (condition) =>
+      !checkRequiredProperties(condition, requiredProps),
+  );
+  return uniqueMultiProps(filteredConditions, requiredProps);
+};
+
+/**
+ * Detarmines the value field when should update.
+ * @returns {boolean}
+ */
+export const shouldFilterValueFieldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.fieldKey !== oldProps.fieldKey ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};