Skip to content

Commit

Permalink
added fields for groups
Browse files Browse the repository at this point in the history
  • Loading branch information
@akanshaaa19
akanshaaa19 committed Dec 5, 2024
1 parent 945f5a2 commit 3d703c9
Show file tree
Hide file tree
Showing 7 changed files with 272 additions and 142 deletions.
5 changes: 4 additions & 1 deletion src/containers/List/List.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,10 +270,13 @@
}

.ListContainer {
height: 100vh;
background-color: #f8faf5;
}

.FullHeight {
height: 100vh;
}

.Checkbox {
min-width: 50px;
padding: 1rem;
Expand Down
57 changes: 14 additions & 43 deletions src/containers/List/List.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,9 +227,7 @@ export const List = ({

// check if the user has access to manage collections
const userRolePermissions = getUserRolePermissions();
const capitalListItemName = listItemName
? listItemName[0].toUpperCase() + listItemName.slice(1)
: '';
const capitalListItemName = listItemName ? listItemName[0].toUpperCase() + listItemName.slice(1) : '';

// function to get the default sorting set for columns
const getDefaultSortColumn = (columnsFields: any) => {
Expand Down Expand Up @@ -333,12 +331,9 @@ export const List = ({
let l;

if (countQuery) {
[, { data: countData, error: e, loading: l, refetch: refetchCount }] = useLazyQuery(
countQuery,
{
variables: { filter },
}
);
[, { data: countData, error: e, loading: l, refetch: refetchCount }] = useLazyQuery(countQuery, {
variables: { filter },
});
}

// Get item data here
Expand All @@ -348,8 +343,7 @@ export const List = ({
});

// Get item data here
const [fetchUserCollections, { loading: loadingCollections, data: userCollections }] =
useLazyQuery(GET_CURRENT_USER);
const [fetchUserCollections, { loading: loadingCollections, data: userCollections }] = useLazyQuery(GET_CURRENT_USER);

const checkUserRole = () => {
userRole = getUserRole();
Expand Down Expand Up @@ -460,9 +454,7 @@ export const List = ({
const { component, props } = useDelete(dialogMessage);
dialogBox = (
<DialogBox
title={
dialogTitle || `Are you sure you want to delete the ${listItemName} "${deleteItemName}"?`
}
title={dialogTitle || `Are you sure you want to delete the ${listItemName} "${deleteItemName}"?`}
handleCancel={closeDialogBox}
colorOk="warning"
alignButtons="center"
Expand Down Expand Up @@ -528,11 +520,7 @@ export const List = ({

const deleteButton = (Id: any, text: string) =>
allowedAction.delete ? (
<div
aria-label={t('Delete')}
data-testid="DeleteIcon"
onClick={() => showDialogHandler(Id, text)}
>
<div aria-label={t('Delete')} data-testid="DeleteIcon" onClick={() => showDialogHandler(Id, text)}>
<div className={styles.IconWithText}>
<DeleteIcon className={styles.IconSize} />
<div className={styles.TextButton}>Delete</div>
Expand Down Expand Up @@ -592,9 +580,7 @@ export const List = ({
<div>
{actionListMap(item, actionsInsideMore, true)}
<Divider className={styles.Divider}></Divider>
<MenuItem className={styles.MenuItem}>
{deleteButton(id, labelValue)}
</MenuItem>
<MenuItem className={styles.MenuItem}>{deleteButton(id, labelValue)}</MenuItem>
</div>
</Menu>
</Backdrop>
Expand All @@ -619,9 +605,7 @@ export const List = ({
if (event.target.checked) {
checkbox?.setSelectedItems([...checkbox?.selectedItems, listItem]);
} else {
checkbox?.setSelectedItems(
checkbox?.selectedItems.filter((item: any) => item.id !== listItem.id)
);
checkbox?.setSelectedItems(checkbox?.selectedItems.filter((item: any) => item.id !== listItem.id));
}
}}
/>
Expand Down Expand Up @@ -696,8 +680,7 @@ export const List = ({
<div>{t('Sorry, no results found! Please try a different search.')}</div>
) : (
<div>
There are no {noItemText || listItemName}s right now.{' '}
{button.show && t('Please create one.')}
There are no {noItemText || listItemName}s right now. {button.show && t('Please create one.')}
</div>
)}
</div>
Expand All @@ -709,10 +692,7 @@ export const List = ({
{
label: (
<Checkbox
checked={
checkbox?.selectedItems.length !== 0 &&
checkbox?.selectedItems.length === itemList.length
}
checked={checkbox?.selectedItems.length !== 0 && checkbox?.selectedItems.length === itemList.length}
onChange={(event) => {
if (event.target.checked) {
checkbox?.setSelectedItems(data[listItem]);
Expand Down Expand Up @@ -774,12 +754,7 @@ export const List = ({
);
} else if (!button.link) {
buttonContent = (
<Button
color="primary"
variant="contained"
onClick={() => setNewItem(true)}
data-testid="newItemButton"
>
<Button color="primary" variant="contained" onClick={() => setNewItem(true)} data-testid="newItemButton">
{button.symbol} {button.label}
</Button>
);
Expand Down Expand Up @@ -815,18 +790,14 @@ export const List = ({
) : null;

return (
<div className={styles.ListContainer}>
<div className={`${showHeader ? styles.FullHeight : ''} ${styles.ListContainer}`}>
{showHeader && (
<>
<div className={styles.Header} data-testid="listHeader">
<div>
<div className={styles.Title}>
{backLink && (
<BackIcon
onClick={() => navigate(backLink)}
className={styles.BackLink}
data-testid="back-button"
/>
<BackIcon onClick={() => navigate(backLink)} className={styles.BackLink} data-testid="back-button" />
)}
<div className={styles.TitleText}> {title}</div>
{helpData && <HelpIcon helpData={helpData} />}
Expand Down
159 changes: 97 additions & 62 deletions src/containers/Profile/Contact/ContactDescription/ContactDescription.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@ import styles from './ContactDescription.module.css';

export interface ContactDescriptionProps {
fields: any;
settings: any;
phone: string;
maskedPhone: string;
settings?: any;
phone?: string;
maskedPhone?: string;
collections: any;
lastMessage: string;
statusMessage: string;
lastMessage?: string;
statusMessage?: string;
groups?: boolean;
}

export const ContactDescription = ({
Expand All @@ -25,17 +26,14 @@ export const ContactDescription = ({
statusMessage,
fields,
settings,
groups = false,
}: ContactDescriptionProps) => {
const [showPlainPhone, setShowPlainPhone] = useState(false);
const { t } = useTranslation();

// list of collections that the contact is assigned
let assignedToCollection: any = Array.from(
new Set(
[].concat(
...collections.map((collection: any) => collection.users.map((user: any) => user.name))
)
)
new Set([].concat(...collections.map((collection: any) => collection.users.map((user: any) => user.name))))
);

if (assignedToCollection.length > 2) {
Expand All @@ -49,16 +47,19 @@ export const ContactDescription = ({
// list of collections that the contact belongs
const collectionList = collections.map((collection: any) => collection.label).join(', ');

const collectionDetails = [
{ label: t('Collections'), value: collectionList || t('None') },
{
label: t('Assigned to'),
value: assignedToCollection || t('None'),
},
];
let collectionDetails = [{ label: t('Collections'), value: collectionList || t('None') }];
if (!groups) {
collectionDetails = [
...collectionDetails,
{
label: t('Assigned to'),
value: assignedToCollection || t('None'),
},
];
}

let settingsValue: any = '';
if (typeof settings === 'string') {
if (settings && typeof settings === 'string') {
settingsValue = JSON.parse(settings);
}

Expand Down Expand Up @@ -110,23 +111,30 @@ export const ContactDescription = ({
);
}

return (
<div className={styles.DescriptionContainer} data-testid="contactDescription">
<div className={styles.DetailBlock}>
<Typography data-testid="formLabel" variant="h5" className={styles.FieldLabel}>
Number
</Typography>
<div className={styles.Description}>
{phoneDisplay}
<div className={styles.SessionTimer}>
<span>{t('Session Timer')}</span>
<Timer time={lastMessage} variant="secondary" />
const numberBlock = (
<>
{!groups && (
<>
<div className={styles.DetailBlock}>
<Typography data-testid="formLabel" variant="h5" className={styles.FieldLabel}>
Number
</Typography>
<div className={styles.Description}>
{phoneDisplay}
<div className={styles.SessionTimer}>
<span>{t('Session Timer')}</span>
<Timer time={lastMessage} variant="secondary" />
</div>
</div>
</div>
</div>
</div>

<div className={styles.Divider} />
<div className={styles.Divider} />
</>
)}
</>
);

const collectionBlock = (
<>
<div className={styles.DetailBlock}>
{collectionDetails.map((collectionItem: any) => (
<div key={collectionItem.label}>
Expand All @@ -139,38 +147,65 @@ export const ContactDescription = ({
</div>

<div className={styles.Divider} />
</>
);

<div className={styles.DetailBlock}>
<div>
<div className={styles.FieldLabel}>Status</div>
<div className={styles.DescriptionItemValue}>{statusMessage}</div>
</div>
<div className={styles.Divider} />
{settingsValue &&
typeof settingsValue === 'object' &&
Object.keys(settingsValue).map((key) => (
<div key={key}>
<div className={styles.FieldLabel}>{key}</div>
<div className={styles.DescriptionItemValue}>
{Object.keys(settingsValue[key])
.filter((settingKey) => settingsValue[key][settingKey] === true)
.join(', ')}
</div>
<div className={styles.Divider} />
const settingsBlock = (
<>
{settingsValue &&
!groups &&
typeof settingsValue === 'object' &&
Object.keys(settingsValue).map((key) => (
<div key={key}>
<div className={styles.FieldLabel}>{key}</div>
<div className={styles.DescriptionItemValue}>
{Object.keys(settingsValue[key])
.filter((settingKey) => settingsValue[key][settingKey] === true)
.join(', ')}
</div>
))}
{fieldsValue &&
typeof fieldsValue === 'object' &&
Object.keys(fieldsValue).map((key) => (
<div key={key}>
<div className={styles.FieldLabel}>
{fieldsValue[key].label ? fieldsValue[key].label : key.replace('_', ' ')}
</div>
<div className={styles.DescriptionItemValue}>{fieldsValue[key].value}</div>
<div className={styles.Divider} />
<div className={styles.Divider} />
</div>
))}
</>
);

const statusBlock = (
<>
{!groups && (
<div className={styles.DetailBlock}>
<div>
<div className={styles.FieldLabel}>Status</div>
<div className={styles.DescriptionItemValue}>{statusMessage}</div>
</div>
<div className={styles.Divider} />
</div>
)}
</>
);

const fieldsBlock = (
<div className={styles.DetailBlock}>
{fieldsValue &&
typeof fieldsValue === 'object' &&
Object.keys(fieldsValue).map((key) => (
<div key={key}>
<div className={styles.FieldLabel}>
{fieldsValue[key].label ? fieldsValue[key].label : key.replace('_', ' ')}
</div>
))}
</div>
<div className={styles.DescriptionItemValue}>{fieldsValue[key].value}</div>
<div className={styles.Divider} />
</div>
))}
</div>
);

return (
<div className={styles.DescriptionContainer} data-testid="contactDescription">
{numberBlock}
{collectionBlock}
{settingsBlock}
{statusBlock}
{fieldsBlock}
</div>
);
};
Loading

0 comments on commit 3d703c9

Please sign in to comment.