Skip to content

Commit

Permalink
added modal for lead data preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@sanjana0190
sanjana0190 committed Mar 13, 2024
1 parent 248d581 commit ef826c8
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 125 deletions.
1 change: 1 addition & 0 deletions packages/twenty-front/src/modules/spreadsheet-import/components/ModalWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { ModalCloseButton } from './ModalCloseButton';

const StyledModal = styled(Modal)`
height: 61%;
overflow: scroll;
min-height: 600px;
min-width: 800px;
position: relative;
Expand Down
121 changes: 44 additions & 77 deletions packages/twenty-front/src/pages/campaigns/Lead.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,84 +22,10 @@ import {
} from '@tabler/icons-react';
import { useCampaign } from '~/pages/campaigns/CampaignUseContext';
import { FILTER_LEADS } from '@/users/graphql/queries/filterLeads';
import { useLazyQuery, useQuery } from '@apollo/client';
import { RGBA } from '@/ui/theme/constants/Rgba';
import { RecordTableHeader } from '@/object-record/record-table/components/RecordTableHeader';
import { Table } from '@/spreadsheet-import/components/Table';
import { TableBody } from '@/ui/layout/table/components/TableBody';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { useLazyQuery } from '@apollo/client';
import { PreviewLeadsData } from '~/pages/campaigns/PreviewLeadsData';
import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';

const data: any = {
leads: {
__typename: 'LeadConnection',
totalCount: 6,
pageInfo: {
__typename: 'PageInfo',
hasNextPage: false,
startCursor:
'W251bGwsICIwNDVhOGIzMC1mNGNjLTQ2ZmQtOTkyMC1hZTBiN2RkZTg3ZDciXQ==',
endCursor:
'W251bGwsICI5MjNjODEyYy0yM2FlLTRlNTUtYjhkZS04MDI2NDgyODUyM2UiXQ==',
},
edges: [
{
node: {
id: '06e4e001-f41e-44c6-baac-1311d4da4c3b',
email: 'neha.reddy@example.com',
age: '28',
name: 'Neha Reddy',
phoneNumber: '6666666666',
updatedAt: '2024-03-11T07:58:03.983Z',
advertisementName: 'Mental Health Webinar',
campaignName: 'Mental Health 2024',
position: null,
comments: 'Break the stigma',
advertisementSource: 'Website Banner',
createdAt: '2024-03-11T07:58:03.983Z',
location: 'Bengaluru',
},
},
{
node: {
id: '141ec6ad-326c-48fa-811a-c929df26792b',
email: 'dr.anjali.singh@example.com',
age: '47',
name: 'Dr. Anjali Singh',
phoneNumber: '6666666666',
updatedAt: '2024-03-11T07:58:03.983Z',
advertisementName: 'Arthritis Awareness Drive',
campaignName: 'Arthritis 2024',
position: null,
comments: 'Managing joint health',
advertisementSource: 'Twitter',
createdAt: '2024-03-11T07:58:03.983Z',
location: 'Bengaluru',
},
},

{
node: {
id: '6abbae59-20dc-4e2d-8446-78adc85ab6c2',
email: 'neha.reddy@example.com',
age: '28',
name: 'Neha Reddy',
phoneNumber: '6666666666',
updatedAt: '2024-03-11T07:56:27.414Z',
advertisementName: 'Mental Health Webinar',
campaignName: 'Mental Health 2024',
position: null,
comments: 'Break the stigma',
advertisementSource: 'Website Banner',
createdAt: '2024-03-11T07:56:27.414Z',
location: 'Bengaluru',
},
},
],
},
};
const StyledCard = styled.div`
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
Expand All @@ -116,6 +42,36 @@ const StyledCard = styled.div`
overflow: scroll;
`;

const StyledTable = styled.table`
width: 100%;
border-collapse: collapse;
height: 10px;
&:nth-of-type(odd) {
background-color: ${({ theme }) => theme.background.primary};
}
`;

const StyledTableRow = styled.tr`
&:nth-of-type(odd) {
background-color: ${({ theme }) => theme.background.primary};
}
`;

const StyledTableCell = styled.td`
padding: 5px;
// border: 1px solid ${({ theme }) => theme.border.color.medium};
font-size: ${({ theme }) => theme.font.size.sm};
`;

const StyledBoardContainer = styled.div`
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
justify-self: center;
`;

const StyledInputCard = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.secondary};
Expand Down Expand Up @@ -218,6 +174,7 @@ export const Lead = () => {
const [campaignNameValue, setCampaignNameValue] = useState('');
const [locationValue, setLocationValue] = useState('');
const [ageValue, setAgeValue] = useState('');
const [modalOpen, setModalOpen] = useState(false);

const handleLeadSourceChange = (event: any) => {
setLeadSourceValue(event.target.value);
Expand Down Expand Up @@ -264,6 +221,7 @@ export const Lead = () => {
try {
console.log(filter, '----------');
filterleads({ variables: { filter: filter } });
setModalOpen(true);

if (data) {
console.log(data);
Expand All @@ -274,6 +232,10 @@ export const Lead = () => {
}
};

const handleCloseModal = () => {
setModalOpen(false);
};

const removeFilterOption = (id: string) => {
setSelectedFilterOptions((previous) => ({
...previous,
Expand Down Expand Up @@ -536,7 +498,12 @@ export const Lead = () => {
</StyledButton>
</StyledInputCard>
</StyledCard>
{!loading && data && <PreviewLeadsData data={data} />}

<ModalWrapper isOpen={modalOpen} onClose={handleCloseModal}>
<StyledBoardContainer>
{!loading && data && <PreviewLeadsData data={data} />}
</StyledBoardContainer>
</ModalWrapper>
</>
);
};
66 changes: 18 additions & 48 deletions packages/twenty-front/src/pages/campaigns/PreviewLeadsData.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,41 @@
import { useNavigate } from 'react-router-dom';

import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { IconSettings } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Table } from '@/ui/layout/table/components/Table';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import styled from '@emotion/styled';

const StyledTable = styled.table`
width: 50%;
border-collapse: collapse;
height: 10px ;
height: 10px;
`;

const StyledTableRow = styled.tr`
&:nth-of-type(odd) {
background-color: ${({ theme }) => theme.background.primary};
}
&:nth-of-type(even) {
background-color: ${({ theme }) => theme.background.transparent};
}
background-color: ${({ theme }) => theme.background.danger};
`;

const StyledTableCell = styled.td`
padding: 5px;
// border: 1px solid ${({ theme }) => theme.border.color.medium};
font-size: ${({ theme }) => theme.font.size.sm}
font-size: ${({ theme }) => theme.font.size.sm};
`;

const StyledTableHeader = styled.thead`
padding: 5px;
border: 1px solid ${({ theme }) => theme.border.color.light};
font-size: 14px;
font-weight: ${({ theme }) => theme.font.weight.semiBold};
background-color: ${({ theme }) => theme.background.quaternary};
`
export const PreviewLeadsData = ({data}) => {
export const PreviewLeadsData = ({ data }) => {
const navigate = useNavigate();

const handleRowClick = (templateName: string) => {
navigate(`/${templateName.toLowerCase()}`);
};

return (

<StyledTable>
<tbody>
<tbody>
<StyledTableRow>
<StyledTableCell>Name</StyledTableCell>
<StyledTableCell>Email</StyledTableCell>
<StyledTableCell>Age</StyledTableCell>
<StyledTableCell>Location</StyledTableCell>
<StyledTableCell>Campaign Name</StyledTableCell>
<StyledTableCell>Advertisement Source</StyledTableCell>
<StyledTableCell>Phone Number</StyledTableCell>
<StyledTableCell>Comments</StyledTableCell>
<StyledTableCell>Advertisement Name</StyledTableCell>
<StyledTableCell>Name</StyledTableCell>
<StyledTableCell>Email</StyledTableCell>
<StyledTableCell>Age</StyledTableCell>
<StyledTableCell>Location</StyledTableCell>
<StyledTableCell>Campaign Name</StyledTableCell>
<StyledTableCell>Advertisement Source</StyledTableCell>
<StyledTableCell>Phone Number</StyledTableCell>
<StyledTableCell>Comments</StyledTableCell>
<StyledTableCell>Advertisement Name</StyledTableCell>
</StyledTableRow>
{data?.leads?.edges.map((leads: any) => (
<StyledTableRow key={leads.node.id}>
<StyledTableRow key={leads.node.id}>
<StyledTableCell>{leads.node?.name}</StyledTableCell>
<StyledTableCell>{leads.node?.email}</StyledTableCell>
<StyledTableCell>{leads.node.age}</StyledTableCell>
Expand All @@ -77,11 +49,9 @@ export const PreviewLeadsData = ({data}) => {

<StyledTableCell>{leads.node.comments}</StyledTableCell>
<StyledTableCell>{leads.node.advertisementName}</StyledTableCell>
</StyledTableRow>
</StyledTableRow>
))}

</tbody>
</tbody>
</StyledTable>

);
};
};

0 comments on commit ef826c8

Please sign in to comment.