From 342ea164ec446ff97e644d7c2ea92fb6f0d94b3d Mon Sep 17 00:00:00 2001 From: zuies Date: Fri, 30 Jun 2023 13:24:19 +0400 Subject: [PATCH] update table --- .../memberBreakdowns/CustomDialogDetail.tsx | 10 +++--- .../memberBreakdowns/CustomTable.tsx | 34 +++++++++++-------- .../activeMembers/ActiveMemberBreakdown.tsx | 27 ++++++++------- src/store/slices/breakdownsSlice.ts | 7 ++-- src/utils/interfaces.ts | 2 +- 5 files changed, 41 insertions(+), 39 deletions(-) diff --git a/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx b/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx index 0d71aa7f..c1ac95bd 100644 --- a/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx +++ b/src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx @@ -49,7 +49,7 @@ const CustomDialogDetail: React.FC = ({

Roles:

-
+
{rowDetail?.roles.map((role: any) => (
= ({

Activity composition:

-
+
{rowDetail && rowDetail?.activityComposition.length > 0 ? ( rowDetail?.activityComposition.map((composition: any) => { const matchedOption = options.find( - (option) => option.value === composition + (option) => option.name === composition ); const backgroundColor = matchedOption ? matchedOption.color @@ -98,10 +98,10 @@ const CustomDialogDetail: React.FC = ({ return (
= ({ useState(null); const [selectedRoles, setSelectedRoles] = useState([]); useEffect(() => { - setSelectedRoles(roles.map((role: IRoles) => role.id)); + setSelectedRoles(roles.map((role: IRoles) => role.roleId)); }, [roles]); const [selectAllRoles, setSelectAllRoles] = useState(true); const [selectedActivityOptions, setSelectedActivityOptions] = useState< @@ -107,7 +107,7 @@ const CustomTable: React.FC = ({ const handleSelectAllRoles = (event: React.ChangeEvent) => { if (event.target.checked) { - const allRoleNames = roles.map((role: IRoles) => role.id); + const allRoleNames = roles.map((role: IRoles) => role.roleId); setSelectedRoles(allRoleNames); } else { setSelectedRoles([]); @@ -268,9 +268,9 @@ const CustomTable: React.FC = ({ control={ } label={ @@ -434,7 +434,11 @@ const CustomTable: React.FC = ({ InputProps={{ disableUnderline: true, startAdornment: , - sx: { backgroundColor: '#F5F5F5', padding: '0 0.4rem' }, + sx: { + backgroundColor: '#F5F5F5', + padding: '0 0.4rem', + borderRadius: '4px', + }, }} value={searchText} onChange={handleSearchChange} @@ -482,7 +486,7 @@ const CustomTable: React.FC = ({ border: index % 2 === 0 ? 'none' : '1px solid #F5F5F5', // Apply border style conditionally for even rows }} - className={`px-4 py-4 first:rounded-l-md first:border-r-0 last:rounded-r-md last:border-l-0 ${ + className={`px-1 first:px-3 py-4 first:rounded-l-md first:border-r-0 last:rounded-r-md last:border-l-0 ${ columnIndex === 1 || columnIndex === 2 ? 'border-l-0 border-r-0' : '' // Add top and bottom border to even rows @@ -502,9 +506,9 @@ const CustomTable: React.FC = ({
{row.roles.length > 0 ? ( <> - {row.roles.slice(0, 4).map((role: IRoles) => ( + {row.roles.slice(0, 2).map((role: IRoles) => (
@@ -550,7 +554,7 @@ const CustomTable: React.FC = ({ backgroundColor: '#AAAAAA', }} > - +{row.roles.length - 4} + +{row.roles.length - 2}
)} @@ -572,15 +576,15 @@ const CustomTable: React.FC = ({ )}
) : column.id === 'activityComposition' ? ( -
+
{row.activityComposition && row.activityComposition.length > 0 ? ( <> {row.activityComposition - .slice(0, 4) + .slice(0, 2) .map((composition: string) => { const matchedOption = options.find( - (option) => option.value === composition + (option) => option.name === composition ); const backgroundColor = matchedOption ? matchedOption.color @@ -589,7 +593,7 @@ const CustomTable: React.FC = ({ return (
= ({ onClick={() => handleShowDetails(row)} > - +{row.activityComposition.length - 4} + +{row.activityComposition.length - 2}
)} diff --git a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx index 435c9087..14f883b4 100644 --- a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx +++ b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx @@ -115,22 +115,21 @@ export default function ActiveMemberBreakdown() { handleUsernameChange={handleUsernameChange} isLoading={isActiveMembersBreakdownLoading} /> - {fetchedData?.totalResults > 0 && ( -
- -
- )} + +
+ +
- {fetchedData?.results.length > 0 ?? ( + {fetchedData && fetchedData?.totalResults > 10 ? (
toggleExpanded(!isExpanded)} />
+ ) : ( + '' )} ); diff --git a/src/store/slices/breakdownsSlice.ts b/src/store/slices/breakdownsSlice.ts index 51f6b1b4..51a3a988 100644 --- a/src/store/slices/breakdownsSlice.ts +++ b/src/store/slices/breakdownsSlice.ts @@ -45,7 +45,7 @@ const createBreakdownsSlice: StateCreator = (set, get) => ({ const url = `/member-activity/${guild_id}/active-members-composition-table?${params.toString()}`; - const { data } = await axiosInstance.post(url); + const { data } = await axiosInstance.get(url); set(() => ({ isActiveMembersBreakdownLoading: false })); return data; @@ -58,15 +58,12 @@ const createBreakdownsSlice: StateCreator = (set, get) => ({ try { set(() => ({ isRolesLoading: true })); - const { data } = await axiosInstance.get( - `/guilds/discord-api/${guild_id}/roles` - ); + const { data } = await axiosInstance.get(`/guilds/${guild_id}/roles`); set(() => ({ roles: data, isRolesLoading: false })); return data; } catch (error) { set(() => ({ isRolesLoading: false })); - // Handle the error } }, }); diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts index 4fd6d965..053cf99d 100644 --- a/src/utils/interfaces.ts +++ b/src/utils/interfaces.ts @@ -24,7 +24,7 @@ export interface Row { } export interface IRoles { - id: string; + roleId: string; color: number | string; name: string; }