Weiko
fd8b130df6
## Context ActivityTargetsInlineCell was not using the useIsFieldValueReadOnly hook but a dedicated prop instead. To align with the rest of the implementation I've updated that part of the code however we still want the table/kanban views to always be in read-only mode regardless of the hook logic so I've updated the hook to take the ContextStoreViewType into account.
105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
import styled from '@emotion/styled';
|
|
|
|
import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
|
|
import { ActivityTargetsInlineCell } from '@/activities/inline-cell/components/ActivityTargetsInlineCell';
|
|
import { Note } from '@/activities/types/Note';
|
|
import { getActivityPreview } from '@/activities/utils/getActivityPreview';
|
|
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
|
import { useFieldContext } from '@/object-record/hooks/useFieldContext';
|
|
|
|
const StyledCard = styled.div<{ isSingleNote: boolean }>`
|
|
align-items: flex-start;
|
|
background: ${({ theme }) => theme.background.secondary};
|
|
border: 1px solid ${({ theme }) => theme.border.color.medium};
|
|
border-radius: ${({ theme }) => theme.border.radius.md};
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 300px;
|
|
justify-content: space-between;
|
|
max-width: ${({ isSingleNote }) => (isSingleNote ? '300px' : 'unset')};
|
|
`;
|
|
|
|
const StyledCardDetailsContainer = styled.div`
|
|
align-items: flex-start;
|
|
align-self: stretch;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
height: calc(100% - 45px);
|
|
justify-content: start;
|
|
padding: ${({ theme }) => theme.spacing(4)};
|
|
width: calc(100% - ${({ theme }) => theme.spacing(8)});
|
|
box-sizing: border-box;
|
|
`;
|
|
|
|
const StyledNoteTitle = styled.div`
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
`;
|
|
|
|
const StyledCardContent = styled.div`
|
|
align-self: stretch;
|
|
color: ${({ theme }) => theme.font.color.secondary};
|
|
line-break: anywhere;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: pre-line;
|
|
width: 100%;
|
|
`;
|
|
|
|
const StyledFooter = styled.div`
|
|
align-items: center;
|
|
align-self: stretch;
|
|
border-top: 1px solid ${({ theme }) => theme.border.color.light};
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: ${({ theme }) => theme.spacing(1)};
|
|
justify-content: center;
|
|
padding: ${({ theme }) => theme.spacing(2)};
|
|
width: calc(100% - ${({ theme }) => theme.spacing(4)});
|
|
`;
|
|
|
|
export const NoteCard = ({
|
|
note,
|
|
isSingleNote,
|
|
}: {
|
|
note: Note;
|
|
isSingleNote: boolean;
|
|
}) => {
|
|
const openActivityRightDrawer = useOpenActivityRightDrawer({
|
|
objectNameSingular: CoreObjectNameSingular.Note,
|
|
});
|
|
|
|
const body = getActivityPreview(note?.bodyV2?.blocknote ?? null);
|
|
|
|
const { FieldContextProvider: NoteTargetsContextProvider } = useFieldContext({
|
|
objectNameSingular: CoreObjectNameSingular.Note,
|
|
objectRecordId: note.id,
|
|
fieldMetadataName: 'noteTargets',
|
|
fieldPosition: 0,
|
|
});
|
|
|
|
return (
|
|
<StyledCard isSingleNote={isSingleNote}>
|
|
<StyledCardDetailsContainer
|
|
onClick={() => openActivityRightDrawer(note.id)}
|
|
>
|
|
<StyledNoteTitle>{note.title ?? 'Task Title'}</StyledNoteTitle>
|
|
<StyledCardContent>{body}</StyledCardContent>
|
|
</StyledCardDetailsContainer>
|
|
<StyledFooter>
|
|
{NoteTargetsContextProvider && (
|
|
<NoteTargetsContextProvider>
|
|
<ActivityTargetsInlineCell
|
|
activity={note}
|
|
activityObjectNameSingular={CoreObjectNameSingular.Note}
|
|
/>
|
|
</NoteTargetsContextProvider>
|
|
)}
|
|
</StyledFooter>
|
|
</StyledCard>
|
|
);
|
|
};
|