Skip to content

Commit

Permalink
Merge pull request #3167 from glific/revert-3153-feat/group_fields_ui
Browse files Browse the repository at this point in the history 
Revert "WhatsApp group fields UI"
  • Loading branch information
@akanshaaa19
akanshaaa19 authored Dec 12, 2024
2 parents af56b53 + 7e50e11 commit 28d7132
Show file tree
Hide file tree
Showing 7 changed files with 142 additions and 287 deletions.
5 changes: 1 addition & 4 deletions src/containers/List/List.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,11 +270,8 @@
}

.ListContainer {
background-color: #f8faf5;
}

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

.Checkbox {
Expand Down
57 changes: 43 additions & 14 deletions src/containers/List/List.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,9 @@ 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 @@ -331,9 +333,12 @@ 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 @@ -343,7 +348,8 @@ 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 @@ -454,7 +460,9 @@ 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 @@ -520,7 +528,11 @@ 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 @@ -580,7 +592,9 @@ 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 @@ -605,7 +619,9 @@ 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 @@ -680,7 +696,8 @@ 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 @@ -692,7 +709,10 @@ 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 @@ -754,7 +774,12 @@ 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 @@ -790,14 +815,18 @@ export const List = ({
) : null;

return (
<div className={`${showHeader ? styles.FullHeight : ''} ${styles.ListContainer}`}>
<div className={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
161 changes: 62 additions & 99 deletions src/containers/Profile/Contact/ContactDescription/ContactDescription.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,12 @@ 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;
groups?: boolean;
customStyles?: string;
lastMessage: string;
statusMessage: string;
}

export const ContactDescription = ({
Expand All @@ -27,15 +25,17 @@ export const ContactDescription = ({
statusMessage,
fields,
settings,
groups = false,
customStyles,
}: 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,19 +49,16 @@ export const ContactDescription = ({
// list of collections that the contact belongs
const collectionList = collections.map((collection: any) => collection.label).join(', ');

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

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

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

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>
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" />
</div>
<div className={styles.Divider} />
</>
)}
</>
);
</div>
</div>

<div className={styles.Divider} />

const collectionBlock = (
<>
<div className={styles.DetailBlock}>
{collectionDetails.map((collectionItem: any) => (
<div key={collectionItem.label}>
Expand All @@ -149,65 +139,38 @@ export const ContactDescription = ({
</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>
<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 className={styles.DetailBlock}>
<div>
<div className={styles.FieldLabel}>Status</div>
<div className={styles.DescriptionItemValue}>{statusMessage}</div>
</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 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} />
</div>
<div className={styles.DescriptionItemValue}>{fieldsValue[key].value}</div>
<div className={styles.Divider} />
</div>
))}
</div>
);

return (
<div className={`${styles.DescriptionContainer} ${customStyles}`} data-testid="contactDescription">
{numberBlock}
{collectionBlock}
{settingsBlock}
{statusBlock}
{fieldsBlock}
))}
{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>
))}
</div>
</div>
);
};
Loading

0 comments on commit 28d7132

Please sign in to comment.