Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 4x 57x 57x 57x 1x 57x 57x 57x 57x 57x 31x 20x 57x 1x 56x 1x 55x 55x 96x 1x | import React, { useEffect } from 'react';
import { ComboBox, InlineNotification, SelectSkeleton, Column, TextInput } from '@carbon/react';
import { Controller, useFormContext } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { type User } from '../../../core/api/types/identity/User';
import { useDebounce } from '../../../core/hooks/debounce-hook';
import { otherUser } from '../../../core/utils/utils';
import { useUser } from '../../../stock-lookups/stock-lookups.resource';
import useSearchUser from '../hooks/useSearchUser';
const UsersSelector = () => {
const { isLoading, userList, setSearchString } = useSearchUser();
const { t } = useTranslation();
const debouncedSearch = useDebounce((query: string) => {
setSearchString(query);
}, 1000);
const form = useFormContext<{ responsiblePersonUuid: string; responsiblePersonOther: string }>();
const observableresponsiblePersonUuid = form.watch('responsiblePersonUuid');
const observableresponsiblePersonOther = form.watch('responsiblePersonOther');
const {
data,
isLoading: isLoadingUser,
error: userError,
} = useUser(observableresponsiblePersonUuid ?? null, 'custom:(uuid,display,person:(uuid,display))');
useEffect(() => {
// Whenever person uuid changes and not equal to other person, the other is reset to initial default value
if (observableresponsiblePersonUuid && observableresponsiblePersonUuid !== otherUser.uuid) {
form.resetField('responsiblePersonOther');
}
}, [observableresponsiblePersonUuid, form]);
if (isLoadingUser && observableresponsiblePersonUuid !== otherUser.uuid && observableresponsiblePersonUuid)
return <SelectSkeleton role="progressbar" />;
if (observableresponsiblePersonUuid && observableresponsiblePersonUuid !== otherUser.uuid && userError)
return (
<InlineNotification
lowContrast
title={t('responsiblePersonError', 'Error loading responsible person')}
subtitle={userError?.message}
/>
);
return (
<React.Fragment>
<Column>
<Controller
name={'responsiblePersonUuid'}
control={form.control}
render={({ field, fieldState: { error } }) => (
<ComboBox
readOnly={field.disabled}
titleText={t('responsiblePerson', 'Responsible Person')}
name={'responsiblePersonUuid'}
id={'responsiblePersonUuid'}
size="lg"
items={[...(userList || []), otherUser]}
onChange={(data: { selectedItem: User }) => {
field.onChange(data.selectedItem?.uuid);
}}
initialSelectedItem={
field.value
? field.value === otherUser.uuid
? otherUser
: data
: observableresponsiblePersonOther && !observableresponsiblePersonUuid
? otherUser
: ''
}
itemToString={(item) => (typeof item === 'string' ? item : item?.person?.display || '')}
onInputChange={debouncedSearch}
placeholder={t('filter', 'Filter...')}
invalid={!!error?.message}
invalidText={error?.message}
ref={field.ref}
/>
)}
/>
</Column>
{(observableresponsiblePersonUuid === otherUser.uuid ||
(observableresponsiblePersonOther && !observableresponsiblePersonUuid)) && (
<Column>
<Controller
control={form.control}
name="responsiblePersonOther"
render={({ field, fieldState: { error } }) => (
<TextInput
{...field}
readOnly={field.disabled}
disabled={false}
id="responsiblePersonOther"
name="responsiblePersonOther"
size="lg"
labelText={t('responsiblePerson', 'Responsible Person')}
placeholder={t('pleaseSpecify', 'Please specify')}
invalid={!!error?.message}
invalidText={error?.message}
/>
)}
/>
</Column>
)}
</React.Fragment>
// {isLoading && <InlineLoading status="active" iconDescription="Searching" description="Searching..." />}
);
};
export default UsersSelector;
|