Skip to content

Commit

Permalink
fix: use field label and remove fieldset for internal fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeffreiffers
jeffreiffers committed Dec 19, 2024
1 parent 6216905 commit 3097f21
Showing 1 changed file with 78 additions and 101 deletions.
179 changes: 78 additions & 101 deletions apps/concept-catalog/components/concept-form/components/internal-section/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import {
Box,
Checkbox,
Combobox,
Fieldset,
HelpText,
Label,
Paragraph,
Textarea,
Textfield,
Expand Down Expand Up @@ -37,11 +37,11 @@ const renderInternalField = ({
userList: AssignedUser[];
codeLists: CodeList[];
}) => {
const Legend = () => (
const FieldLabel = () => (
<TitleWithTag
title={
<>
{capitalizeFirstLetter(getTranslateText(internalField.label) as string)}
<Label size='sm'>{capitalizeFirstLetter(getTranslateText(internalField.label) as string)}</Label>
{getTranslateText(internalField.description) && (
<HelpText
title={getTranslateText(internalField.label) as string}
Expand All @@ -61,102 +61,88 @@ const renderInternalField = ({

if (internalField.type === 'text_short') {
return (
<Fieldset
legend={<Legend />}
<FastField
name={name}
size='sm'
>
<FastField
name={name}
as={Textfield}
/>
</Fieldset>
label={<FieldLabel />}
as={Textfield}
/>
);
}

if (internalField.type === 'text_long') {
return (
<Fieldset
legend={<Legend />}
<FastField
name={name}
size='sm'
>
<FastField
name={name}
as={Textarea}
rows={3}
/>
</Fieldset>
as={Textarea}
label={<FieldLabel />}
rows={3}
/>
);
}

if (internalField.type === 'boolean') {
return (
<Fieldset
legend={<Legend />}
<Checkbox.Group
legend={<FieldLabel />}
size='sm'
>
<Checkbox
value={internalField.id}
checked={fieldValue === 'true'}
onChange={(e) => setFieldValue(name, e.target.checked ? 'true' : 'false')}
/>
</Fieldset>
</Checkbox.Group>
);
}

if (internalField.type === 'user_list') {
return (
<Fieldset
legend={<Legend />}
<Combobox
label={<FieldLabel />}
size='sm'
placeholder={'select user'}
value={fieldValue && userList?.find((u) => u.id === fieldValue) ? [fieldValue] : []}
onValueChange={(value) => setFieldValue(name, value[0])}
>
<Combobox
size='sm'
placeholder={'select user'}
value={fieldValue && userList?.find((u) => u.id === fieldValue) ? [fieldValue] : []}
onValueChange={(value) => setFieldValue(name, value[0])}
>
<Combobox.Empty>Fant ingen treff</Combobox.Empty>
{userList.map(({ id, name: userName }) => (
<Combobox.Option
key={id ?? ''}
value={id ?? ''}
>
{userName}
</Combobox.Option>
))}
</Combobox>
</Fieldset>
<Combobox.Empty>Fant ingen treff</Combobox.Empty>
{userList.map(({ id, name: userName }) => (
<Combobox.Option
key={id ?? ''}
value={id ?? ''}
>
{userName}
</Combobox.Option>
))}
</Combobox>
);
}

if (internalField.type === 'code_list') {
const codes = codeLists.find((list) => list.id === internalField.codeListId)?.codes;

return (
<Fieldset
legend={<Legend />}
<Combobox
label={<FieldLabel />}
size='sm'
value={fieldValue && codes?.find((code) => code.id === fieldValue) ? [fieldValue] : []}
onValueChange={(value) => setFieldValue(name, value[0])}
>
<Combobox
size='sm'
value={fieldValue && codes?.find((code) => code.id === fieldValue) ? [fieldValue] : []}
onValueChange={(value) => setFieldValue(name, value[0])}
>
<Combobox.Empty>Fant ingen treff</Combobox.Empty>
{codes?.map((code) => {
const parentPath = getParentPath(code, codes);
return (
<Combobox.Option
key={code.id}
value={code.id}
description={parentPath.length > 0 ? `Overordnet: ${parentPath.join(' - ')}` : ''}
>
{getTranslateText(code.name)}
</Combobox.Option>
);
})}
</Combobox>
</Fieldset>
<Combobox.Empty>Fant ingen treff</Combobox.Empty>
{codes?.map((code) => {
const parentPath = getParentPath(code, codes);
return (
<Combobox.Option
key={code.id}
value={code.id}
description={parentPath.length > 0 ? `Overordnet: ${parentPath.join(' - ')}` : ''}
>
{getTranslateText(code.name)}
</Combobox.Option>
);
})}
</Combobox>
);
}

Expand All @@ -168,13 +154,12 @@ export const InternalSection = ({ internalFields, userList, codeLists }: Interna

return (
<Box className={styles.internalSection}>
<Fieldset
size='sm'
legend={
<Combobox
label={
<TitleWithTag
title={
<>
Hvem skal begrepet tildeles?
<Label size='sm'>Hvem skal begrepet tildeles?</Label>
<HelpText
title={''}
type='button'
Expand All @@ -186,36 +171,32 @@ export const InternalSection = ({ internalFields, userList, codeLists }: Interna
}
/>
}
>
<Combobox
size='sm'
value={
values.assignedUser && userList?.find((user) => user.id === values.assignedUser)
? [values.assignedUser]
: []
}
onValueChange={(val) => setFieldValue('assignedUser', val[0])}
>
<Combobox.Empty>Fant ingen treff</Combobox.Empty>
{userList?.map((user) => {
return (
<Combobox.Option
key={user.id}
value={user.id ?? ''}
>
{user.name}
</Combobox.Option>
);
})}
</Combobox>
</Fieldset>
<Fieldset
size='sm'
legend={
value={
values.assignedUser && userList?.find((user) => user.id === values.assignedUser) ? [values.assignedUser] : []
}
onValueChange={(val) => setFieldValue('assignedUser', val[0])}
>
<Combobox.Empty>Fant ingen treff</Combobox.Empty>
{userList?.map((user) => {
return (
<Combobox.Option
key={user.id}
value={user.id ?? ''}
>
{user.name}
</Combobox.Option>
);
})}
</Combobox>

<FastField
as={Textfield}
label={
<TitleWithTag
title={
<>
Forkortelse
<Label size='sm'>Forkortelse</Label>
<HelpText
title={'Hjelpetekst forkortelse'}
type='button'
Expand All @@ -231,13 +212,9 @@ export const InternalSection = ({ internalFields, userList, codeLists }: Interna
}
/>
}
>
<FastField
as={Textfield}
name='abbreviatedLabel'
error={errors?.['abbreviatedLabel']}
/>
</Fieldset>
name='abbreviatedLabel'
error={errors?.['abbreviatedLabel']}
/>
{internalFields?.map((internalField) => (
<div key={internalField.id}>
{renderInternalField({ internalField, values, setFieldValue, userList, codeLists })}
Expand Down

0 comments on commit 3097f21

Please sign in to comment.