Skip to content

Commit

Permalink
fix: behavior of item type selector (#491)
Browse files Browse the repository at this point in the history 
* fix: behavior of item type selector #490

* fix: add icon button group wrapper
  • Loading branch information
@cyp3rius
cyp3rius authored Dec 27, 2024
1 parent a3ad22f commit c7a4e43
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 56 deletions.
73 changes: 38 additions & 35 deletions admin/src/pages/HomePage/components/NavigationItemForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,11 +225,11 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
const uiRouterKey = await generateUiRouterKey(
payload.type === 'INTERNAL'
? {
slugify: slugifyMutation.mutateAsync,
title,
related: payload.related,
relatedType: payload.relatedType,
}
slugify: slugifyMutation.mutateAsync,
title,
related: payload.related,
relatedType: payload.relatedType,
}
: { slugify: slugifyMutation.mutateAsync, title }
);

Expand All @@ -248,15 +248,15 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
onSubmit(
payload.type === 'INTERNAL'
? {
...payload,
title,
uiRouterKey,
}
...payload,
title,
uiRouterKey,
}
: {
...payload,
title,
uiRouterKey,
}
...payload,
title,
uiRouterKey,
}
);
} else if (error) {
setFormError(
Expand Down Expand Up @@ -290,9 +290,9 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
formValue.type === 'INTERNAL'
? formValue
: {
related: undefined,
relatedType: undefined,
};
related: undefined,
relatedType: undefined,
};

const isExternal = currentType === 'EXTERNAL';
const isInternal = currentType === 'INTERNAL';
Expand Down Expand Up @@ -354,7 +354,10 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
[contentTypeItemsQuery.data, configQuery.data, contentTypes]
);

const navigationItemTypeOptions = (['INTERNAL', 'EXTERNAL', 'WRAPPER'] as const).map((key) => {
const availableNavigationItemTypeOptions = !configQuery.data?.contentTypes.length ?
['EXTERNAL', 'WRAPPER'] as const :
['INTERNAL', 'EXTERNAL', 'WRAPPER'] as const;
const navigationItemTypeOptions = availableNavigationItemTypeOptions.map((key) => {
return {
key,
value: key,
Expand Down Expand Up @@ -551,9 +554,9 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
values.type === 'INTERNAL'
? values
: {
related: undefined,
relatedType: undefined,
};
related: undefined,
relatedType: undefined,
};

const pathDefault = generatePreviewPath({
currentPath: values.path,
Expand Down Expand Up @@ -585,7 +588,7 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
}
value={values.type}
name="type"
disabled={!configQuery.data?.contentTypes.length || !canUpdate}
disabled={!canUpdate}
width="100%"
>
{navigationItemTypeOptions.map(({ key, label, value }) => (
Expand Down Expand Up @@ -699,8 +702,8 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
),
pathDefault
? formatMessage(getTrad('popup.item.form.type.external.description'), {
value: pathDefault,
})
value: pathDefault,
})
: '',
].join(' ')}
>
Expand Down Expand Up @@ -733,11 +736,11 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
hint={
!isLoading && isEmpty(relatedTypeSelectOptions)
? formatMessage(
getTrad(
'popup.item.form.relatedType.empty',
'There are no more content types'
)
getTrad(
'popup.item.form.relatedType.empty',
'There are no more content types'
)
)
: undefined
}
>
Expand Down Expand Up @@ -768,12 +771,12 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
hint={
!isLoading && thereAreNoMoreContentTypes
? formatMessage(
getTrad(
'popup.item.form.related.empty',
'There are no more entities'
),
{ contentTypeName: values.relatedType }
)
getTrad(
'popup.item.form.related.empty',
'There are no more entities'
),
{ contentTypeName: values.relatedType }
)
: undefined
}
>
Expand Down Expand Up @@ -846,8 +849,8 @@ export const NavigationItemForm: React.FC<NavigationItemFormProps> = ({
hint={
!isLoading && isEmpty(audienceOptions)
? formatMessage(
getTrad('popup.item.form.title.placeholder', 'e.g. Blog')
)
getTrad('popup.item.form.title.placeholder', 'e.g. Blog')
)
: undefined
}
>
Expand Down
46 changes: 25 additions & 21 deletions admin/src/pages/SettingsPage/components/CustomFieldTable/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useCallback, useMemo, useState } from 'react';
import {
Flex,
IconButton,
IconButtonGroup,
TFooter,
Table,
Tbody,
Expand Down Expand Up @@ -155,27 +156,30 @@ const CustomFieldTable: React.FC<ICustomFieldTableProps> = ({
</Tooltip>
</Td>
<Td>
<Flex direction="row" size={1}>
<IconButton
onClick={() => onOpenModal(customField)}
label={formatMessage(getTrad(`${tradPrefix}edit`))}
children={<Pencil />}
style={{ minWidth: 50 }}
/>
<IconButton
onClick={() => onToggleCustomField(customField)}
label={formatMessage(
getTrad(`${tradPrefix}${customField.enabled ? 'disable' : 'enable'}`)
)}
children={customField.enabled ? <Eye /> : <EyeStriked />}
style={{ minWidth: 50 }}
/>
<IconButton
onClick={() => handleRemove(customField)}
label={formatMessage(getTrad(`${tradPrefix}remove`))}
children={<Trash />}
style={{ minWidth: 50 }}
/>
<Flex width="100%" justifyContent="flex-end" alignItems="center">
<IconButtonGroup>
<IconButton
onClick={() => onToggleCustomField(customField)}
label={formatMessage(
getTrad(`${tradPrefix}${customField.enabled ? 'disable' : 'enable'}`)
)}
variant={customField.enabled ? 'success-light' : 'tertiary'}
children={customField.enabled ? <Eye /> : <EyeStriked />}
style={{ minWidth: 50 }}
/>
<IconButton
onClick={() => onOpenModal(customField)}
label={formatMessage(getTrad(`${tradPrefix}edit`))}
children={<Pencil />}
style={{ minWidth: 50 }}
/>
<IconButton
onClick={() => handleRemove(customField)}
label={formatMessage(getTrad(`${tradPrefix}remove`))}
children={<Trash />}
style={{ minWidth: 50 }}
/>
</IconButtonGroup>
</Flex>
</Td>
</Tr>
Expand Down

0 comments on commit c7a4e43

Please sign in to comment.