All files / libs/payout-definition/plans/components/src/lib/order-by-form-component OrderByFormComponent.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '@emotion/react';
import { IconPlus, IconTrash } from '@tabler/icons-react';
import { memo, useCallback, useMemo, type ReactNode } from 'react';
import { FormattedMessage } from 'react-intl';

import {
  Button,
  FormFieldLabel,
  Group,
  IconButton,
  InlineInputs,
  Select,
  Stack,
  type SelectOption,
} from '@allshares/studio-design-system';
import { buildPropertiesOptions } from '@amalia/data-capture/fields/components';
import { getProperties, type CustomObjectDefinition } from '@amalia/data-capture/record-models/types';
import { type FilterOrderBy } from '@amalia/payout-definition/plans/types';

import { useSortOptionsByFormat } from './useSortOptionsByFormat';

interface OrderByFormComponentProps {
  readonly customObjectDefinition?: CustomObjectDefinition;
  readonly value: FilterOrderBy[] | null;
  readonly onChange: (value: FilterOrderBy[]) => void;
  readonly helpLabel?: ReactNode;
}

export const OrderByFormComponent = memo(function OrderByFormComponent({
  customObjectDefinition,
  value,
  onChange,
  helpLabel,
}: OrderByFormComponentProps) {
  const propertyOptions = useMemo(
    () => buildPropertiesOptions(getProperties(customObjectDefinition), customObjectDefinition?.externalIds[0] ?? null),
    [customObjectDefinition],
  );

  const onChangeFieldMachineName = useCallback(
    (index: number, fieldMachineName: string) => {
      onChange(value!.map((v, i) => (i === index ? { ...v, fieldMachineName } : v)));
    },
    [value, onChange],
  );

  const onChangeDirection = useCallback(
    (index: number, direction: 'ASC' | 'DESC') => {
      onChange(value!.map((v, i) => (i === index ? { ...v, direction } : v)));
    },
    [value, onChange],
  );

  const handleAddElement = useCallback(() => {
    const propertyToAdd = customObjectDefinition && getProperties(customObjectDefinition).at(0)?.machineName;
    if (propertyToAdd) {
      onChange((value ?? []).concat({ fieldMachineName: propertyToAdd, direction: 'ASC' as const }));
    }
  }, [value, onChange, customObjectDefinition]);

  const handleDelete = useCallback(
    (index: number) => {
      onChange((value ?? []).filter((_, i) => index !== i));
    },
    [value, onChange],
  );

  const sortOptionsByFormat = useSortOptionsByFormat();

  return (
    <Stack gap={value?.length ? 12 : 6}>
      <FormFieldLabel
        size="small"
        tooltip={helpLabel}
      >
        <FormattedMessage defaultMessage="Sort matched records" />
      </FormFieldLabel>
      <Stack gap={12}>
        {(value ?? []).map(({ fieldMachineName, direction }, index) => {
          const format = fieldMachineName ? customObjectDefinition?.properties[fieldMachineName]?.format : null;
          const sortOptions = format ? sortOptionsByFormat[format] : [];

          return (
            <Group
              // eslint-disable-next-line react/no-array-index-key -- no id to order on here.
              key={index}
              align="center"
              gap={12}
            >
              <InlineInputs
                css={css`
                  flex: 1;
                  max-width: 600px;
                `}
              >
                <Select<SelectOption<string>, false, false, false>
                  isClearable={false}
                  options={propertyOptions}
                  size="small"
                  value={fieldMachineName}
                  onChange={(newValue) => onChangeFieldMachineName(index, newValue)}
                />
                <Select<SelectOption<'ASC' | 'DESC'>, false, false, false>
                  isClearable={false}
                  options={sortOptions}
                  size="small"
                  value={direction}
                  onChange={(newValue) => onChangeDirection(index, newValue)}
                />
              </InlineInputs>
              <IconButton
                icon={<IconTrash />}
                label={<FormattedMessage defaultMessage="Delete sort" />}
                size="small"
                variant="danger"
                onClick={() => handleDelete(index)}
              />
            </Group>
          );
        })}
      </Stack>
      <div>
        <Button
          icon={<IconPlus />}
          size="small"
          variant="primary-light"
          onClick={handleAddElement}
        >
          <FormattedMessage defaultMessage="Add sort" />
        </Button>
      </div>
    </Stack>
  );
});