admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

First working version of new dropdown UI (#360)

Browse Source 
* First working version of new dropdown UI

* Removed consolelog

* Fixed test storybook

* Cleaned optional args
This commit is contained in:
Lucas Bordeau
2023-06-23 12:39:16 +02:00
committed by GitHub
parent 703f31632d
commit ceaf482f62
8 changed files with 111 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx
View File

@ -57,6 +57,7 @@ export function DropdownMenuSelectableItem({
onClick={onClick}
selected={selected}
hovered={hovered}
data-testid="dropdown-menu-item"
>
<StyledLeftContainer>{children}</StyledLeftContainer>
<StyledRightIcon>

76
front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx
View File

@ -11,6 +11,9 @@ import { SearchResultsType, useSearch } from '@/search/services/search';
import { humanReadableDate } from '@/utils/utils';
import DatePicker from '../../form/DatePicker';
import { DropdownMenuItemContainer } from '../../menu/DropdownMenuItemContainer';
import { DropdownMenuSelectableItem } from '../../menu/DropdownMenuSelectableItem';
import { DropdownMenuSeparator } from '../../menu/DropdownMenuSeparator';
import DropdownButton from './DropdownButton';
@ -29,6 +32,8 @@ export const FilterDropdownButton = <TData extends FilterableFieldsType>({
}: OwnProps<TData>) => {
const [isUnfolded, setIsUnfolded] = useState(false);
const [selectedEntityId, setSelectedEntityId] = useState<string | null>(null);
const [isOperandSelectionUnfolded, setIsOperandSelectionUnfolded] =
useState(false);
@ -41,7 +46,7 @@ export const FilterDropdownButton = <TData extends FilterableFieldsType>({
>(undefined);
const [filterSearchResults, setSearchInput, setFilterSearch] =
useSearch<TData>();
useSearch<TData>({ currentSelectedId: selectedEntityId });
const resetState = useCallback(() => {
setIsOperandSelectionUnfolded(false);
@ -92,29 +97,50 @@ export const FilterDropdownButton = <TData extends FilterableFieldsType>({
);
}
return filterSearchResults.results.map((result, index) => {
return (
<DropdownButton.StyledDropdownItem
key={`fields-value-${index}`}
onClick={() => {
onFilterSelect({
key: selectedFilter.key,
label: selectedFilter.label,
value: result.value,
displayValue: result.render(result.value),
icon: selectedFilter.icon,
operand: selectedFilterOperand,
});
setIsUnfolded(false);
setSelectedFilter(undefined);
}}
>
<DropdownButton.StyledDropdownItemClipped>
{result.render(result.value)}
</DropdownButton.StyledDropdownItemClipped>
</DropdownButton.StyledDropdownItem>
);
});
function resultIsEntity(result: any): result is { id: string } {
return Object.keys(result ?? {}).includes('id');
}
return (
<>
<DropdownMenuSeparator />
<DropdownMenuItemContainer>
{filterSearchResults.results.map((result, index) => {
return (
<DropdownMenuSelectableItem
key={`fields-value-${index}`}
selected={
resultIsEntity(result.value) &&
result.value.id === selectedEntityId
}
onClick={() => {
console.log({ result });
if (resultIsEntity(result.value)) {
setSelectedEntityId(result.value.id);
}
onFilterSelect({
key: selectedFilter.key,
label: selectedFilter.label,
value: result.value,
displayValue: result.render(result.value),
icon: selectedFilter.icon,
operand: selectedFilterOperand,
});
setIsUnfolded(false);
setSelectedFilter(undefined);
}}
>
<DropdownButton.StyledDropdownItemClipped>
{result.render(result.value)}
</DropdownButton.StyledDropdownItemClipped>
</DropdownMenuSelectableItem>
);
})}
</DropdownMenuItemContainer>
</>
);
};
function renderValueSelection(
@ -131,7 +157,7 @@ export const FilterDropdownButton = <TData extends FilterableFieldsType>({
<DropdownButton.StyledDropdownTopOptionAngleDown />
</DropdownButton.StyledDropdownTopOption>
<DropdownButton.StyledSearchField key={'search-filter'}>
<DropdownButton.StyledSearchField autoFocus key={'search-filter'}>
{['text', 'relation'].includes(selectedFilter.type) && (
<input
type="text"