twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-24 06:48:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added empty card for show relations (#3612)

Browse Source 
#3610 Add empty states for show relations

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Jeet Desai 2024-01-31 16:27:48 +05:30 committed by GitHub
parent f6e9456ef6
commit ba77d7430a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx
View File

@ -1,6 +1,6 @@
import { useCallback, useContext } from 'react';
import { Link } from 'react-router-dom';
import { css } from '@emotion/react';
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import qs from 'qs';
import { useRecoilValue } from 'recoil';
@ -20,6 +20,7 @@ import { RelationPickerScope } from '@/object-record/relation-picker/scopes/Rela
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { IconForbid, IconPlus } from '@/ui/display/icon';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Card } from '@/ui/layout/card/components/Card';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@ -79,7 +80,22 @@ const StyledLink = styled(Link)`
}
`;
const StyledCardNoContent = styled.div`
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.light};
align-items: center;
justify-content: center;
gap: ${({ theme }) => theme.spacing(2)};
display: flex;
height: ${({ theme }) => theme.spacing(10)};
padding: ${({ theme }) => theme.spacing(0, 2)};
`;
export const RecordRelationFieldCardSection = () => {
const theme = useTheme();
const { entityId, fieldDefinition } = useContext(FieldContext);
const {
fieldName,
@ -160,17 +176,21 @@ export const RecordRelationFieldCardSection = () => {
relationObjectMetadataItem.namePlural
}?${qs.stringify(filterQueryParams)}`;
const { getIcon } = useIcons();
const Icon = getIcon(relationObjectMetadataItem.icon);
return (
<Section>
<StyledHeader isDropdownOpen={isDropdownOpen}>
<StyledTitle>
<StyledTitleLabel>{fieldDefinition.label}</StyledTitleLabel>
{parseFieldRelationType(relationFieldMetadataItem) ===
'TO_ONE_OBJECT' && (
<StyledLink to={filterLinkHref}>
All ({relationRecords.length})
</StyledLink>
)}
'TO_ONE_OBJECT' &&
relationRecords.length > 0 && (
<StyledLink to={filterLinkHref}>
All ({relationRecords.length})
</StyledLink>
)}
</StyledTitle>
<DropdownScope dropdownScopeId={dropdownId}>
<StyledAddDropdown
@ -203,6 +223,12 @@ export const RecordRelationFieldCardSection = () => {
/>
</DropdownScope>
</StyledHeader>
{relationRecords.length === 0 && (
<StyledCardNoContent>
<Icon size={theme.icon.size.sm} />
<div>No {relationObjectMetadataItem.labelSingular}</div>
</StyledCardNoContent>
)}
{!!relationRecords.length && (
<Card>
{relationRecords.slice(0, 5).map((relationRecord, index) => (