Skip to content

Commit

Permalink
Merge pull request #260 from TogetherCrew/feat/announcement-v2
Browse files Browse the repository at this point in the history 
Feat/announcement v2
  • Loading branch information
@mehdi-torabiv
mehdi-torabiv authored Feb 23, 2024
2 parents 534fcfc + 26e3d34 commit 5beec8a
Show file tree
Hide file tree
Showing 13 changed files with 1,017 additions and 318 deletions.
220 changes: 133 additions & 87 deletions src/components/announcements/TcAnnouncementsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import TcButton from '../shared/TcButton';
import TcDialog from '../shared/TcDialog';
import TcText from '../shared/TcText';
import { useSnackbar } from '../../context/SnackbarContext';
import { truncateCenter } from '../../helpers/helper';
import { capitalizeFirstChar, truncateCenter } from '../../helpers/helper';
import useAppStore from '../../store/useStore';

interface Channel {
Expand Down Expand Up @@ -239,52 +239,80 @@ function TcAnnouncementsTable({
/>
</div>
);
// case 'users':
// return (
// <div className="flex flex-row overflow-hidden whitespace-nowrap">
// <TcText
// text={announcement.data
// .map((item: { options: { users: any } }) => {
// const users = item.options.users;
// if (users && users.length > 0) {
// const displayedUsers = users
// .slice(0, 2)
// .map((user: { ngu: any }) => `@${user.ngu}`)
// .join(', ');
// const moreUsersIndicator = users.length > 2 ? '...' : '';
// return `${displayedUsers}${moreUsersIndicator}`;
// }
// return '';
// })
// .filter((text: string) => text !== '')
// .join(', ')}
// variant="subtitle2"
// />
// </div>
// );
// case 'roles':
// return (
// <div className="flex flex-row overflow-hidden whitespace-nowrap">
// <TcText
// text={announcement.data
// .map((item: { options: { roles: any } }) => {
// const roles = item.options.roles;
// if (roles && roles.length > 0) {
// const displayedRoles = roles
// .slice(0, 2)
// .map((role: { name: any }) => role.name)
// .join(', ');
// const moreRolesIndicator = roles.length > 2 ? '...' : '';
// return `${displayedRoles}${moreRolesIndicator}`;
// }
// return '';
// })
// .filter((text: string) => text !== '')
// .join(', ')}
// variant="subtitle2"
// />
// </div>
// );
case 'users':
return (
<div className='flex flex-row overflow-hidden whitespace-nowrap'>
<TcText
text={announcement.data
.map((item: { options: { users: any } }) => {
const users = item.options.users;
if (users && users.length > 0) {
const displayedUsers = users
.slice(0, 2)
.map((user: { ngu: any }) => `@${user.ngu}`)
.join(', ');
const moreUsersIndicator = users.length > 2 ? '...' : '';
return `${displayedUsers}${moreUsersIndicator}`;
}
return '';
})
.filter((text: string) => text !== '')
.join(', ')}
variant='subtitle2'
/>
</div>
);
case 'roles':
return (
<div className='flex flex-row overflow-hidden whitespace-nowrap'>
<TcText
text={announcement.data
.map((item: { options: { roles: any } }) => {
const roles = item.options.roles;
if (roles && roles.length > 0) {
const displayedRoles = roles
.slice(0, 2)
.map((role: { name: any }) => role.name)
.join(', ');
const moreRolesIndicator = roles.length > 2 ? '...' : '';
return `${displayedRoles}${moreRolesIndicator}`;
}
return '';
})
.filter((text: string) => text !== '')
.join(', ')}
variant='subtitle2'
/>
</div>
);
case 'engagementCategories':
return (
<div className='flex flex-row overflow-hidden whitespace-nowrap'>
<TcText
text={announcement.data
.map((item: { options: { engagementCategories: any } }) => {
const engagementCategories =
item.options.engagementCategories;
if (engagementCategories && engagementCategories.length > 0) {
const displayedRoles = engagementCategories
.slice(0, 2)
.map(
(role: string) =>
'#' + capitalizeFirstChar(role.replaceAll('_', ' '))
)
.join(', ');
const moreRolesIndicator =
engagementCategories.length > 2 ? '...' : '';
return `${displayedRoles}${moreRolesIndicator}`;
}
return '';
})
.filter((text: string) => text !== '')
.join(', ')}
variant='subtitle2'
/>
</div>
);
case 'scheduledAt':
return (
<div className='flex flex-row overflow-hidden whitespace-nowrap'>
Expand Down Expand Up @@ -360,35 +388,40 @@ function TcAnnouncementsTable({
key={announcement.id}
className={`my-5 ${index % 2 === 0 ? 'bg-gray-100' : ''}`}
>
{['title', 'channels', 'scheduledAt', 'actions'].map(
(cellType, cellIndex, array) => (
<TableCell
key={cellType}
sx={{
padding: '14px 16px',
borderBottom:
index % 2 !== 0 ? '1px solid #f3f4f6' : 'none',
borderTop: index % 2 !== 0 ? '1px solid #f3f4f6' : 'none',
borderLeft:
cellIndex === 0 && index % 2 !== 0
? '1px solid #f3f4f6'
: 'none',
borderRight:
cellIndex === array.length - 1 && index % 2 !== 0
? '1px solid #f3f4f6'
: 'none',
borderTopLeftRadius: cellIndex === 0 ? '5px' : '0',
borderBottomLeftRadius: cellIndex === 0 ? '5px' : '0',
borderTopRightRadius:
cellIndex === array.length - 1 ? '5px' : '0',
borderBottomRightRadius:
cellIndex === array.length - 1 ? '5px' : '0',
}}
>
{renderTableCell(announcement, cellType)}
</TableCell>
)
)}
{[
'title',
'channels',
'users',
'roles',
'engagementCategories',
'scheduledAt',
'actions',
].map((cellType, cellIndex, array) => (
<TableCell
key={cellType}
sx={{
padding: '14px 16px',
borderBottom: index % 2 !== 0 ? '1px solid #f3f4f6' : 'none',
borderTop: index % 2 !== 0 ? '1px solid #f3f4f6' : 'none',
borderLeft:
cellIndex === 0 && index % 2 !== 0
? '1px solid #f3f4f6'
: 'none',
borderRight:
cellIndex === array.length - 1 && index % 2 !== 0
? '1px solid #f3f4f6'
: 'none',
borderTopLeftRadius: cellIndex === 0 ? '5px' : '0',
borderBottomLeftRadius: cellIndex === 0 ? '5px' : '0',
borderTopRightRadius:
cellIndex === array.length - 1 ? '5px' : '0',
borderBottomRightRadius:
cellIndex === array.length - 1 ? '5px' : '0',
}}
>
{renderTableCell(announcement, cellType)}
</TableCell>
))}
</TableRow>
))}
</TableBody>
Expand All @@ -404,7 +437,7 @@ function TcAnnouncementsTable({
sx={{ borderBottom: 'none' }}
className='uppercase text-gray-400'
style={{
width: '60%',
width: '20%',
borderBottom: 'none',
whiteSpace: 'nowrap',
padding: '0 1rem',
Expand All @@ -426,32 +459,45 @@ function TcAnnouncementsTable({
>
<TcText text='Channels' variant='body2' />
</TableCell>
{/* <TableCell
<TableCell
sx={{ borderBottom: 'none' }}
className="uppercase text-gray-400"
className='uppercase text-gray-400'
style={{
width: '20%',
borderBottom: 'none',
whiteSpace: 'nowrap',
padding: '0 1rem',
}}
align="left"
align='left'
>
<TcText text="Handle" variant="body2" />
</TableCell> */}
{/* <TableCell
<TcText text='Handle' variant='body2' />
</TableCell>
<TableCell
sx={{ borderBottom: 'none' }}
className="uppercase text-gray-400"
className='uppercase text-gray-400'
style={{
width: '20%',
borderBottom: 'none',
whiteSpace: 'nowrap',
padding: '0 1rem',
}}
align="left"
align='left'
>
<TcText text="Role" variant="body2" />
</TableCell> */}
<TcText text='Role' variant='body2' />
</TableCell>
<TableCell
sx={{ borderBottom: 'none' }}
className='uppercase text-gray-400'
style={{
width: '20%',
borderBottom: 'none',
whiteSpace: 'nowrap',
padding: '0 1rem',
}}
align='left'
>
<TcText text='Engagement Categories' variant='body2' />
</TableCell>
<TableCell
sx={{ borderBottom: 'none' }}
className='uppercase text-gray-400'
Expand Down
72 changes: 52 additions & 20 deletions src/components/announcements/TcConfirmSchaduledAnnouncementsDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ interface ITcConfirmSchaduledAnnouncementsDialogProps {
selectedChannels: { id: string; label: string }[];
selectedRoles?: IRoles[];
selectedUsernames?: IUser[];
selectedEngagementCategories?: string[];
schaduledDate: string;
isDisabled: boolean;
handleCreateAnnouncements: (isDrafted: boolean) => void;
Expand All @@ -35,6 +36,7 @@ function TcConfirmSchaduledAnnouncementsDialog({
buttonLabel,
schaduledDate,
selectedRoles,
selectedEngagementCategories,
selectedUsernames,
selectedChannels,
isDisabled = true,
Expand Down Expand Up @@ -86,27 +88,31 @@ function TcConfirmSchaduledAnnouncementsDialog({
className='text-left'
/>
</div>
<div className='flex flex-col'>
<div className='flex items-center justify-between'>
<TcText
text='Public Message to:'
fontWeight={500}
variant='subtitle2'
className='text-left text-gray-400'
/>
<TcText
text={
schaduledDate
? formatDateToLocalTimezone(schaduledDate)
: ''
}
variant='subtitle2'
/>
{selectedChannels && selectedChannels.length > 0 ? (
<div className='flex flex-col'>
<div className='flex items-center justify-between'>
<TcText
text='Public Message to:'
fontWeight={500}
variant='subtitle2'
className='text-left text-gray-400'
/>
<TcText
text={
schaduledDate
? formatDateToLocalTimezone(schaduledDate)
: ''
}
variant='subtitle2'
/>
</div>
{selectedChannels
.map((channel) => `#${channel.label}`)
.join(', ')}
</div>
{selectedChannels
.map((channel) => `#${channel.label}`)
.join(', ')}
</div>
) : (
''
)}
{selectedUsernames && selectedUsernames.length > 0 ? (
<div className='flex flex-col'>
<div className='flex items-center justify-between'>
Expand Down Expand Up @@ -155,6 +161,32 @@ function TcConfirmSchaduledAnnouncementsDialog({
) : (
''
)}
{selectedEngagementCategories &&
selectedEngagementCategories.length > 0 ? (
<div className='flex flex-col'>
<div className='flex items-center justify-between'>
<TcText
text='Engagement Categories:'
fontWeight={500}
variant='subtitle2'
className='text-left text-gray-400'
/>
<TcText
text={
schaduledDate
? formatDateToLocalTimezone(schaduledDate)
: ''
}
variant='subtitle2'
/>
</div>
{`#${selectedEngagementCategories
.join(', ')
.replaceAll('_', ' ')}`}
</div>
) : (
''
)}
</div>
<div className='w-full py-6'>
<TcButton
Expand Down
Loading

0 comments on commit 5beec8a

Please sign in to comment.