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

Enable opportunity card deletion (#490)

Browse Source 
* Add checkbox

* Add state management for selected opportunities

* Use recoil for selected items state, show action bar

* Deduplicate code

* Add delete action

* Enable delete

* Add color for selected cards

* update board state on delete

* Add stories

* Enable empty board

* Fix story

* Handle dark mdoe

* Nits

* Rename module

* Better naming

* Fix naming confusion process<>progress
This commit is contained in:
Emilien Chauvet
2023-07-03 14:11:39 -07:00
committed by GitHub
parent c871d1cc10
commit db5dfb3bdf
22 changed files with 275 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
front/src/modules/ui/components/action-bar/ActionBar.tsx Normal file
View File

@ -0,0 +1,65 @@
import React, { useEffect } from 'react';
import styled from '@emotion/styled';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { contextMenuPositionState } from '@/ui/tables/states/contextMenuPositionState';
import { PositionType } from '@/ui/types/PositionType';
type OwnProps = {
children: React.ReactNode | React.ReactNode[];
selectedIds: string[];
};
type StyledContainerProps = {
position: PositionType;
};
const StyledContainer = styled.div<StyledContainerProps>`
align-items: center;
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px;
bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex;
height: 48px;
left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};
transform: translateX(-50%);
z-index: 1;
`;
export function ActionBar({ children, selectedIds }: OwnProps) {
const position = useRecoilValue(contextMenuPositionState);
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (!(event.target as HTMLElement).closest('.action-bar')) {
setContextMenuPosition({ x: null, y: null });
}
}
document.addEventListener('mousedown', handleClickOutside);
// Cleanup the event listener when the component unmounts
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [setContextMenuPosition]);
if (selectedIds.length === 0) {
return null;
}
return (
<StyledContainer className="action-bar" position={position}>
{children}
</StyledContainer>
);
}

59
front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx
View File

@ -1,66 +1,15 @@
import React, { useEffect } from 'react';
import styled from '@emotion/styled';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import React from 'react';
import { useRecoilValue } from 'recoil';
import { contextMenuPositionState } from '@/ui/tables/states/contextMenuPositionState';
import { ActionBar } from '@/ui/components/action-bar/ActionBar';
import { selectedRowIdsState } from '@/ui/tables/states/selectedRowIdsState';
import { PositionType } from '@/ui/types/PositionType';
type OwnProps = {
children: React.ReactNode | React.ReactNode[];
};
type StyledContainerProps = {
position: PositionType;
};
const StyledContainer = styled.div<StyledContainerProps>`
align-items: center;
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px;
bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex;
height: 48px;
left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};
transform: translateX(-50%);
z-index: 1;
`;
export function EntityTableActionBar({ children }: OwnProps) {
const selectedRowIds = useRecoilValue(selectedRowIdsState);
const position = useRecoilValue(contextMenuPositionState);
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (!(event.target as HTMLElement).closest('.action-bar')) {
setContextMenuPosition({ x: null, y: null });
}
}
document.addEventListener('mousedown', handleClickOutside);
// Cleanup the event listener when the component unmounts
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [setContextMenuPosition]);
if (selectedRowIds.length === 0) {
return null;
}
return (
<StyledContainer className="action-bar" position={position}>
{children}
</StyledContainer>
);
return <ActionBar selectedIds={selectedRowIds}>{children}</ActionBar>;
}