diff --git a/front/src/components/chips/PersonChip.tsx b/front/src/components/chips/PersonChip.tsx index b037315dc..48f5bb2c6 100644 --- a/front/src/components/chips/PersonChip.tsx +++ b/front/src/components/chips/PersonChip.tsx @@ -16,6 +16,9 @@ const StyledContainer = styled.span` padding: ${(props) => props.theme.spacing(1)}; gap: ${(props) => props.theme.spacing(1)}; + overflow: hidden; + white-space: nowrap; + :hover { filter: brightness(95%); } diff --git a/front/src/components/comments/CellCommentChip.tsx b/front/src/components/comments/CellCommentChip.tsx index 7b85f675c..5fe5bf077 100644 --- a/front/src/components/comments/CellCommentChip.tsx +++ b/front/src/components/comments/CellCommentChip.tsx @@ -4,7 +4,7 @@ import { CommentChip, CommentChipProps } from './CommentChip'; const StyledCellWrapper = styled.div` position: relative; right: 38px; - top: -14px; + top: -13px; width: 0; height: 0; `; diff --git a/front/src/components/comments/CommentChip.tsx b/front/src/components/comments/CommentChip.tsx index 31f835e1e..f4d67d875 100644 --- a/front/src/components/comments/CommentChip.tsx +++ b/front/src/components/comments/CommentChip.tsx @@ -3,7 +3,7 @@ import { IconComment } from '../icons'; export type CommentChipProps = { count: number; - onClick?: () => void; + onClick?: (event: React.MouseEvent) => void; }; const StyledChip = styled.div` diff --git a/front/src/components/comments/RightDrawerComments.tsx b/front/src/components/comments/RightDrawerComments.tsx index 1788a06a9..2ad002d88 100644 --- a/front/src/components/comments/RightDrawerComments.tsx +++ b/front/src/components/comments/RightDrawerComments.tsx @@ -1,9 +1,13 @@ +import { useRecoilState } from 'recoil'; import { RightDrawerBody } from '../../layout/right-drawer/RightDrawerBody'; import { RightDrawerPage } from '../../layout/right-drawer/RightDrawerPage'; import { RightDrawerTopBar } from '../../layout/right-drawer/RightDrawerTopBar'; import { CommentTextInput } from './CommentTextInput'; +import { commentableEntityArrayState } from '../../modules/comments/states/commentableEntityArrayState'; export function RightDrawerComments() { + const [commentableEntityArray] = useRecoilState(commentableEntityArrayState); + function handleSendComment(text: string) { console.log(text); } @@ -12,6 +16,11 @@ export function RightDrawerComments() { + {commentableEntityArray.map((commentableEntity) => ( +
+ {commentableEntity.type} - {commentableEntity.id} +
+ ))}
diff --git a/front/src/components/companies/CompanyEditableNameCell.tsx b/front/src/components/companies/CompanyEditableNameCell.tsx new file mode 100644 index 000000000..0e24124d9 --- /dev/null +++ b/front/src/components/companies/CompanyEditableNameCell.tsx @@ -0,0 +1,40 @@ +import { Company } from '../../interfaces/entities/company.interface'; +import { useOpenCommentRightDrawer } from '../../modules/comments/hooks/useOpenCommentRightDrawer'; +import { updateCompany } from '../../services/api/companies'; +import { getLogoUrlFromDomainName } from '../../services/utils'; +import CompanyChip from '../chips/CompanyChip'; +import EditableChip from '../editable-cell/EditableChip'; + +type OwnProps = { + company: Company; +}; + +export function CompanyEditableNameChipCell({ company }: OwnProps) { + const openCommentRightDrawer = useOpenCommentRightDrawer(); + + function handleCommentClick() { + openCommentRightDrawer([ + { + type: 'Company', + id: company.id, + }, + ]); + } + + return ( + { + updateCompany({ + ...company, + name: value, + }); + }} + ChipComponent={CompanyChip} + commentCount={12} + onCommentClick={handleCommentClick} + /> + ); +} diff --git a/front/src/components/editable-cell/CellNormalModeContainer.tsx b/front/src/components/editable-cell/CellNormalModeContainer.tsx index c3fdfe188..a854f47bd 100644 --- a/front/src/components/editable-cell/CellNormalModeContainer.tsx +++ b/front/src/components/editable-cell/CellNormalModeContainer.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; export const CellNormalModeContainer = styled.div` display: flex; align-items: center; - width: calc(100% - ${(props) => props.theme.spacing(5)}); + width: 100%; height: 100%; overflow: hidden; diff --git a/front/src/components/editable-cell/EditableCell.tsx b/front/src/components/editable-cell/EditableCell.tsx index 1f9e6dc79..01d28841e 100644 --- a/front/src/components/editable-cell/EditableCell.tsx +++ b/front/src/components/editable-cell/EditableCell.tsx @@ -47,7 +47,9 @@ export function EditableCell({ onOutsideClick={onOutsideClick} /> ) : ( - {nonEditModeContent} + + <>{nonEditModeContent} + )} ); diff --git a/front/src/components/editable-cell/EditableChip.tsx b/front/src/components/editable-cell/EditableChip.tsx index 5cbd0b8a2..8ff6ad79f 100644 --- a/front/src/components/editable-cell/EditableChip.tsx +++ b/front/src/components/editable-cell/EditableChip.tsx @@ -2,6 +2,7 @@ import styled from '@emotion/styled'; import { ChangeEvent, ComponentType, useRef, useState } from 'react'; import { EditableCell } from './EditableCell'; import { textInputStyle } from '../../layout/styles/themes'; +import { CellCommentChip } from '../comments/CellCommentChip'; export type EditableChipProps = { placeholder?: string; @@ -10,6 +11,8 @@ export type EditableChipProps = { changeHandler: (updated: string) => void; editModeHorizontalAlign?: 'left' | 'right'; ChipComponent: ComponentType<{ name: string; picture: string }>; + commentCount?: number; + onCommentClick?: (event: React.MouseEvent) => void; }; // TODO: refactor @@ -23,8 +26,7 @@ const StyledInplaceInput = styled.input` const StyledInplaceShow = styled.div` display: flex; - padding-left: ${(props) => props.theme.spacing(1)}; - padding-right: ${(props) => props.theme.spacing(1)}; + width: 100%; &::placeholder { font-weight: 'bold'; @@ -39,11 +41,22 @@ function EditableChip({ picture, editModeHorizontalAlign, ChipComponent, + commentCount, + onCommentClick, }: EditableChipProps) { const inputRef = useRef(null); const [inputValue, setInputValue] = useState(value); const [isEditMode, setIsEditMode] = useState(false); + const showComment = commentCount ? commentCount > 0 : false; + + function handleCommentClick(event: React.MouseEvent) { + event.preventDefault(); + event.stopPropagation(); + + onCommentClick?.(event); + } + return ( setIsEditMode(false)} @@ -63,9 +76,17 @@ function EditableChip({ /> } nonEditModeContent={ - - - + <> + + + + {showComment && ( + + )} + } > ); diff --git a/front/src/components/people/EditablePeopleFullName.tsx b/front/src/components/people/EditablePeopleFullName.tsx index cffd6df37..61d9a5be9 100644 --- a/front/src/components/people/EditablePeopleFullName.tsx +++ b/front/src/components/people/EditablePeopleFullName.tsx @@ -1,6 +1,8 @@ import { useState } from 'react'; import PersonChip from '../chips/PersonChip'; import { EditableDoubleText } from '../editable-cell/EditableDoubleText'; +import { CellCommentChip } from '../comments/CellCommentChip'; +import styled from '@emotion/styled'; type OwnProps = { firstname: string; @@ -8,6 +10,13 @@ type OwnProps = { onChange: (firstname: string, lastname: string) => void; }; +const StyledDiv = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; +`; + export function EditablePeopleFullName({ firstname, lastname, @@ -26,6 +35,12 @@ export function EditablePeopleFullName({ onChange(firstValue, secondValue); } + function handleCommentClick(event: React.MouseEvent) { + event.preventDefault(); + event.stopPropagation(); + console.log('comment clicked'); + } + return ( } + nonEditModeContent={ + <> + + + + + + } /> ); } diff --git a/front/src/components/table/action-bar/TableActionBarButtonOpenComments.tsx b/front/src/components/table/action-bar/TableActionBarButtonOpenComments.tsx index 50d100775..d72bc1171 100644 --- a/front/src/components/table/action-bar/TableActionBarButtonOpenComments.tsx +++ b/front/src/components/table/action-bar/TableActionBarButtonOpenComments.tsx @@ -3,6 +3,8 @@ import { EntityTableActionBarButton } from './EntityTableActionBarButton'; import { useOpenRightDrawer } from '../../../modules/ui/layout/right-drawer/hooks/useOpenRightDrawer'; export function TableActionBarButtonToggleComments() { + // TODO: here it would be nice to access the table context + // But let's see when we have custom entities and properties const openRightDrawer = useOpenRightDrawer(); async function handleButtonClick() { diff --git a/front/src/modules/comments/hooks/useOpenCommentRightDrawer.ts b/front/src/modules/comments/hooks/useOpenCommentRightDrawer.ts new file mode 100644 index 000000000..2ab7e5a10 --- /dev/null +++ b/front/src/modules/comments/hooks/useOpenCommentRightDrawer.ts @@ -0,0 +1,18 @@ +import { useRecoilState } from 'recoil'; +import { useOpenRightDrawer } from '../../ui/layout/right-drawer/hooks/useOpenRightDrawer'; +import { CommentableEntity } from '../types/CommentableEntity'; +import { commentableEntityArrayState } from '../states/commentableEntityArrayState'; + +export function useOpenCommentRightDrawer() { + const openRightDrawer = useOpenRightDrawer(); + const [, setCommentableEntityArray] = useRecoilState( + commentableEntityArrayState, + ); + + return function openCommentRightDrawer( + commentableEntityArray: CommentableEntity[], + ) { + setCommentableEntityArray(commentableEntityArray); + openRightDrawer('comments'); + }; +} diff --git a/front/src/modules/comments/states/commentableEntityArrayState.ts b/front/src/modules/comments/states/commentableEntityArrayState.ts new file mode 100644 index 000000000..648fe7ba3 --- /dev/null +++ b/front/src/modules/comments/states/commentableEntityArrayState.ts @@ -0,0 +1,7 @@ +import { atom } from 'recoil'; +import { CommentableEntity } from '../types/CommentableEntity'; + +export const commentableEntityArrayState = atom({ + key: 'comments/commentable-entity-array', + default: [], +}); diff --git a/front/src/modules/comments/types/CommentableEntity.ts b/front/src/modules/comments/types/CommentableEntity.ts new file mode 100644 index 000000000..1e4ed3f9b --- /dev/null +++ b/front/src/modules/comments/types/CommentableEntity.ts @@ -0,0 +1,6 @@ +import { CommentableType } from '../../../generated/graphql'; + +export type CommentableEntity = { + type: keyof typeof CommentableType; + id: string; +}; diff --git a/front/src/pages/companies/companies-columns.tsx b/front/src/pages/companies/companies-columns.tsx index 6a886b14f..89a2ef5fe 100644 --- a/front/src/pages/companies/companies-columns.tsx +++ b/front/src/pages/companies/companies-columns.tsx @@ -12,12 +12,10 @@ import ColumnHead from '../../components/table/ColumnHead'; import { SelectAllCheckbox } from '../../components/table/SelectAllCheckbox'; import EditableDate from '../../components/editable-cell/EditableDate'; import EditableRelation from '../../components/editable-cell/EditableRelation'; -import EditableChip from '../../components/editable-cell/EditableChip'; import EditableText from '../../components/editable-cell/EditableText'; import PersonChip, { PersonChipPropsType, } from '../../components/chips/PersonChip'; -import CompanyChip from '../../components/chips/CompanyChip'; import { TbBuilding, TbCalendar, @@ -27,8 +25,8 @@ import { TbUser, } from 'react-icons/tb'; import { QueryMode } from '../../generated/graphql'; -import { getLogoUrlFromDomainName } from '../../services/utils'; import { CheckboxCell } from '../../components/table/CheckboxCell'; +import { CompanyEditableNameChipCell } from '../../components/companies/CompanyEditableNameCell'; const columnHelper = createColumnHelper(); @@ -59,17 +57,7 @@ export const useCompaniesColumns = () => { } /> ), cell: (props) => ( - { - const company = props.row.original; - company.name = value; - updateCompany(company); - }} - ChipComponent={CompanyChip} - /> + ), size: 120, }), diff --git a/front/src/pages/people/people-columns.tsx b/front/src/pages/people/people-columns.tsx index 03ed3ee54..1d913a595 100644 --- a/front/src/pages/people/people-columns.tsx +++ b/front/src/pages/people/people-columns.tsx @@ -49,16 +49,18 @@ export const usePeopleColumns = () => { } /> ), cell: (props) => ( - { - const person = props.row.original; - person.firstname = firstName; - person.lastname = lastName; - await updatePerson(person); - }} - /> + <> + { + const person = props.row.original; + person.firstname = firstName; + person.lastname = lastName; + await updatePerson(person); + }} + /> + ), size: 210, }),