106 lines
3.2 KiB
TypeScript
106 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { ActivityCreateButton } from '@/activities/components/ActivityCreateButton';
|
|
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
|
|
import { Activity } from '@/activities/types/Activity';
|
|
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
|
|
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
|
|
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
|
|
|
import { TimelineItemsContainer } from './TimelineItemsContainer';
|
|
|
|
const StyledMainContainer = styled.div`
|
|
align-items: flex-start;
|
|
align-self: stretch;
|
|
border-top: ${({ theme }) =>
|
|
useIsMobile() ? `1px solid ${theme.border.color.medium}` : 'none'};
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
justify-content: center;
|
|
`;
|
|
|
|
const StyledTimelineEmptyContainer = styled.div`
|
|
align-items: center;
|
|
align-self: stretch;
|
|
display: flex;
|
|
flex: 1 0 0;
|
|
flex-direction: column;
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
justify-content: center;
|
|
`;
|
|
|
|
const StyledEmptyTimelineTitle = styled.div`
|
|
color: ${({ theme }) => theme.font.color.secondary};
|
|
font-size: ${({ theme }) => theme.font.size.xxl};
|
|
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
|
line-height: ${({ theme }) => theme.text.lineHeight.md};
|
|
`;
|
|
|
|
const StyledEmptyTimelineSubTitle = styled.div`
|
|
color: ${({ theme }) => theme.font.color.extraLight};
|
|
font-size: ${({ theme }) => theme.font.size.xxl};
|
|
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
|
line-height: ${({ theme }) => theme.text.lineHeight.md};
|
|
margin-bottom: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
export const Timeline = ({ entity }: { entity: ActivityTargetableEntity }) => {
|
|
const { records: activityTargets, loading } = useFindManyRecords({
|
|
objectNameSingular: 'activityTarget',
|
|
filter: {
|
|
[entity.type === 'Company' ? 'companyId' : 'personId']: { eq: entity.id },
|
|
},
|
|
});
|
|
|
|
const { records: activities } = useFindManyRecords({
|
|
skip: !activityTargets?.length,
|
|
objectNameSingular: 'activity',
|
|
filter: {
|
|
id: {
|
|
in: activityTargets?.map((activityTarget) => activityTarget.activityId),
|
|
},
|
|
},
|
|
orderBy: {
|
|
createdAt: 'AscNullsFirst',
|
|
},
|
|
});
|
|
|
|
const openCreateActivity = useOpenCreateActivityDrawer();
|
|
|
|
if (loading || entity.type === 'Custom') {
|
|
return <></>;
|
|
}
|
|
|
|
if (!activities.length) {
|
|
return (
|
|
<StyledTimelineEmptyContainer>
|
|
<StyledEmptyTimelineTitle>No activity yet</StyledEmptyTimelineTitle>
|
|
<StyledEmptyTimelineSubTitle>Create one:</StyledEmptyTimelineSubTitle>
|
|
<ActivityCreateButton
|
|
onNoteClick={() =>
|
|
openCreateActivity({
|
|
type: 'Note',
|
|
targetableEntities: [entity],
|
|
})
|
|
}
|
|
onTaskClick={() =>
|
|
openCreateActivity({
|
|
type: 'Task',
|
|
targetableEntities: [entity],
|
|
})
|
|
}
|
|
/>
|
|
</StyledTimelineEmptyContainer>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<StyledMainContainer>
|
|
<TimelineItemsContainer activities={activities as Activity[]} />
|
|
</StyledMainContainer>
|
|
);
|
|
};
|