Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WhatsApp group fields UI #3153

Merged
merged 3 commits into from
Dec 12, 2024
Merged

WhatsApp group fields UI #3153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d703c9
added fields for groups
akanshaaa19 Dec 5, 2024
00ce5cc
fixed position of fields
akanshaaa19 Dec 5, 2024
08e3667
Merge branch 'master' of github.com:glific/glific-frontend into feat/…
akanshaaa19 Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/containers/List/List.module.css
View file
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,9 +227,7 @@

// 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 @@
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 @@
});

// 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 @@
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 @@

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 @@
<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 @@
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));

Check warning on line 608 in src/containers/List/List.tsx

View check run for this annotation

Codecov / codecov/patch

src/containers/List/List.tsx#L608 

Added line #L608 was not covered by tests
}
}}
/>
Expand Down Expand Up @@ -696,8 +680,7 @@
<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 @@
{
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 @@
);
} 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 @@
) : 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" />

Check warning on line 800 in src/containers/List/List.tsx

View check run for this annotation

Codecov / codecov/patch

src/containers/List/List.tsx#L800 

Added line #L800 was not covered by tests
)}
<div className={styles.TitleText}> {title}</div>
{helpData && <HelpIcon helpData={helpData} />}
Expand Down
161 changes: 99 additions & 62 deletions src/containers/Profile/Contact/ContactDescription/ContactDescription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@ 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;
customStyles?: string;
}

export const ContactDescription = ({
Expand All @@ -25,17 +27,15 @@ 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,16 +49,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 +113,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 +149,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} ${customStyles}`} data-testid="contactDescription">
{numberBlock}
{collectionBlock}
{settingsBlock}
{statusBlock}
{fieldsBlock}
</div>
);
};
Loading
Loading