- {settingsValue &&
- typeof settingsValue === 'object' &&
- Object.keys(settingsValue).map((key) => (
-
-
{key}
-
- {Object.keys(settingsValue[key])
- .filter((settingKey) => settingsValue[key][settingKey] === true)
- .join(', ')}
-
-
+ const settingsBlock = (
+ <>
+ {settingsValue &&
+ !groups &&
+ typeof settingsValue === 'object' &&
+ Object.keys(settingsValue).map((key) => (
+
+
{key}
+
+ {Object.keys(settingsValue[key])
+ .filter((settingKey) => settingsValue[key][settingKey] === true)
+ .join(', ')}
- ))}
- {fieldsValue &&
- typeof fieldsValue === 'object' &&
- Object.keys(fieldsValue).map((key) => (
-
-
- {fieldsValue[key].label ? fieldsValue[key].label : key.replace('_', ' ')}
-
-
{fieldsValue[key].value}
-
+
+
+ ))}
+
+ );
+
+ const statusBlock = (
+ <>
+ {!groups && (
+
+
+
Status
+
{statusMessage}
+
+
+
+ )}
+
+ );
+
+ const fieldsBlock = (
+
+ {fieldsValue &&
+ typeof fieldsValue === 'object' &&
+ Object.keys(fieldsValue).map((key) => (
+
+
+ {fieldsValue[key].label ? fieldsValue[key].label : key.replace('_', ' ')}
- ))}
-
+
{fieldsValue[key].value}
+
+
+ ))}
+
+ );
+
+ return (
+
+ {numberBlock}
+ {collectionBlock}
+ {settingsBlock}
+ {statusBlock}
+ {fieldsBlock}
);
};
diff --git a/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.module.css b/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.module.css
index f1cf10b2f..13327581a 100644
--- a/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.module.css
+++ b/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.module.css
@@ -65,3 +65,77 @@
padding: 2px 8px;
border-radius: 8px;
}
+
+.Container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ background-color: #f8faf5;
+}
+
+.RightContainer {
+ height: 100%;
+ width: 100%;
+}
+
+.Drawer {
+ width: fit-content;
+ border-right: 1px solid #efefef;
+ height: calc(100vh - 110px) !important;
+}
+
+.Tab {
+ border-radius: 10px;
+ width: 200px;
+ height: 34px;
+ display: flex;
+ align-items: center;
+ margin: 2px 0;
+ padding: 0px !important;
+ font-weight: 400;
+ font-size: 14px;
+ color: #717971;
+ padding-left: 16px !important;
+}
+
+.Tab:hover {
+ background-color: #71797123;
+ cursor: pointer !important;
+}
+
+.ActiveTab {
+ font-weight: 700 !important;
+ color: #073f24 !important;
+ background-color: #cce6d0 !important;
+}
+
+.GroupHeader {
+ display: flex;
+ box-shadow: 0px 1px 1px 0px #00000029;
+ padding: 15px;
+ align-items: center;
+ gap: 1rem;
+}
+
+.GroupHeaderTitle {
+ font-size: 16px;
+ font-weight: 500;
+ color: #717971;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.GroupHeaderElements {
+ padding: 0.5rem 1rem;
+}
+
+.Table {
+ display: flex;
+}
+
+.BackGround {
+ background-color: #f8faf5 !important;
+ width: 100%;
+ height: 100%;
+}
diff --git a/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.tsx b/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.tsx
index 4cd745d9c..e73cc46f1 100644
--- a/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.tsx
+++ b/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.tsx
@@ -1,16 +1,20 @@
+import { useMutation, useQuery } from '@apollo/client';
+import { useState } from 'react';
import { useParams } from 'react-router-dom';
-import { List } from 'containers/List/List';
import { useTranslation } from 'react-i18next';
+
import CollectionIcon from 'assets/images/icons/Collection/Dark.svg?react';
-import styles from './GroupDetails.module.css';
-import { UPDATE_GROUP_CONTACT } from 'graphql/mutations/Group';
-import { COUNT_COUNTACTS_WA_GROUPS, GET_WA_GROUP, LIST_CONTACTS_WA_GROUPS } from 'graphql/queries/WaGroups';
import DeleteIcon from 'assets/images/icons/Delete/Red.svg?react';
-import { useState } from 'react';
-import { useMutation, useQuery } from '@apollo/client';
import { setNotification } from 'common/notification';
import { DialogBox } from 'components/UI/DialogBox/DialogBox';
+import { Heading } from 'components/UI/Heading/Heading';
import { Loading } from 'components/UI/Layout/Loading/Loading';
+import { AvatarDisplay } from 'components/UI/AvatarDisplay/AvatarDisplay';
+import { List } from 'containers/List/List';
+import { ContactDescription } from 'containers/Profile/Contact/ContactDescription/ContactDescription';
+import { UPDATE_GROUP_CONTACT } from 'graphql/mutations/Group';
+import { COUNT_COUNTACTS_WA_GROUPS, GET_WA_GROUP, LIST_CONTACTS_WA_GROUPS } from 'graphql/queries/WaGroups';
+import styles from './GroupDetails.module.css';
export const GroupDetails = () => {
const params = useParams();
@@ -18,18 +22,24 @@ export const GroupDetails = () => {
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [deleteVariables, setDeleteVariables] = useState
();
-
- const { loading: groupDataLoading, data: groupData } = useQuery(GET_WA_GROUP, {
- variables: {
- waGroupId: params.id,
- },
- });
+ const [contentToShow, setContentToShow] = useState('members');
const dialogTitle = 'Are you sure you want to remove this contact from the group?';
const dialogMessage = 'The contact will no longer receive messages sent to this group';
const columnNames = [{ label: t('Contact') }, { label: 'All WhatsApp Groups' }, { label: t('Actions') }];
+ const list = [
+ {
+ name: t('Members'),
+ section: 'members',
+ },
+ {
+ name: t('Details'),
+ section: 'details',
+ },
+ ];
+
const [removeContact, { loading }] = useMutation(UPDATE_GROUP_CONTACT, {
onCompleted: () => {
setNotification('Removed Contact from Group', 'success');
@@ -37,6 +47,14 @@ export const GroupDetails = () => {
},
});
+ const { loading: groupDataLoading, data } = useQuery(GET_WA_GROUP, {
+ variables: {
+ waGroupId: params.id,
+ },
+ });
+
+ const groupData = data?.waGroup?.waGroup;
+
const queries = {
countQuery: COUNT_COUNTACTS_WA_GROUPS,
filterItemsQuery: LIST_CONTACTS_WA_GROUPS,
@@ -138,17 +156,14 @@ export const GroupDetails = () => {
);
}
- if (groupDataLoading) {
- return ;
- }
-
- return (
- <>
+ let contentBody;
+ if (contentToShow === 'members') {
+ contentBody = (
{
{...queries}
{...columnAttributes}
showSearch={false}
+ showHeader={false}
+ customStyles={styles.Table}
+ />
+ );
+ } else {
+ contentBody = (
+
+ );
+ }
+
+ const drawer = (
+
+
+
+
+
{groupData?.label}
+
+
+ {list.map((data: any, index: number) => {
+ return (
+
setContentToShow(data.section)}
+ className={`${styles.Tab} ${contentToShow === data.section ? styles.ActiveTab : ''}`}
+ >
+ {data.name}
+
+ );
+ })}
+
+
+ {drawer}
+
{contentBody}
+