Skip to content

Commit

Permalink
update table
Browse files Browse the repository at this point in the history
  • Loading branch information
zuies committed Jun 30, 2023
1 parent 9d407c3 commit 342ea16
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 39 deletions.
10 changes: 5 additions & 5 deletions src/components/pages/statistics/memberBreakdowns/CustomDialogDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const CustomDialogDetail: React.FC<CustomDialogDetailProps> = ({
</div>
<div>
<p className="text-xs pb-2 font-semibold">Roles:</p>
<div className="flex flex-row space-x-2 flex-wrap">
<div className="flex flex-row flex-wrap items-center first:ml-0 ml-1">
{rowDetail?.roles.map((role: any) => (
<div
key={role.id}
Expand Down Expand Up @@ -85,11 +85,11 @@ const CustomDialogDetail: React.FC<CustomDialogDetailProps> = ({
</div>
<div>
<p className="text-xs pb-2 font-semibold">Activity composition:</p>
<div className="flex flex-row space-x-2 flex-wrap">
<div className="flex flex-row flex-wrap">
{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
Expand All @@ -98,10 +98,10 @@ const CustomDialogDetail: React.FC<CustomDialogDetailProps> = ({
return (
<div
key={composition}
className="flex flex-row flex-wrap items-center"
className="flex flex-row flex-wrap items-center first:ml-0 ml-1"
>
<span
className="bg-white p-1 px-2 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center"
className="bg-white p-1 px-2 mb-2 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center"
style={{
backgroundColor: backgroundColor,
display: 'flex',
Expand Down
34 changes: 19 additions & 15 deletions src/components/pages/statistics/memberBreakdowns/CustomTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
useState<HTMLButtonElement | null>(null);
const [selectedRoles, setSelectedRoles] = useState<string[]>([]);
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<
Expand Down Expand Up @@ -107,7 +107,7 @@ const CustomTable: React.FC<CustomTableProps> = ({

const handleSelectAllRoles = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.checked) {
const allRoleNames = roles.map((role: IRoles) => role.id);
const allRoleNames = roles.map((role: IRoles) => role.roleId);
setSelectedRoles(allRoleNames);
} else {
setSelectedRoles([]);
Expand Down Expand Up @@ -268,9 +268,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
control={
<Checkbox
color="secondary"
checked={selectedRoles.includes(role.id)}
checked={selectedRoles.includes(role.roleId)}
onChange={handleSelectRole}
value={role.id}
value={role.roleId}
/>
}
label={
Expand Down Expand Up @@ -434,7 +434,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
InputProps={{
disableUnderline: true,
startAdornment: <MdSearch color="disabled" size={25} />,
sx: { backgroundColor: '#F5F5F5', padding: '0 0.4rem' },
sx: {
backgroundColor: '#F5F5F5',
padding: '0 0.4rem',
borderRadius: '4px',
},
}}
value={searchText}
onChange={handleSearchChange}
Expand Down Expand Up @@ -482,7 +486,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
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
Expand All @@ -502,9 +506,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
<div className="flex flex-row flex-wrap space-x-1">
{row.roles.length > 0 ? (
<>
{row.roles.slice(0, 4).map((role: IRoles) => (
{row.roles.slice(0, 2).map((role: IRoles) => (
<div
key={role.id}
key={role.roleId}
className="flex flex-row flex-wrap"
style={{ whiteSpace: 'nowrap' }}
>
Expand Down Expand Up @@ -550,7 +554,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
backgroundColor: '#AAAAAA',
}}
>
+{row.roles.length - 4}
+{row.roles.length - 2}
</span>
</div>
)}
Expand All @@ -572,15 +576,15 @@ const CustomTable: React.FC<CustomTableProps> = ({
)}
</div>
) : column.id === 'activityComposition' ? (
<div className="flex flex-row flex-wrap space-x-1">
<div className="flex flex-row flex-wrap">
{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
Expand All @@ -589,7 +593,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
return (
<div
key={composition}
className="flex flex-row flex-wrap items-center"
className="flex flex-row flex-wrap items-center mr-1"
>
<span
className="bg-white p-1 px-2 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center"
Expand Down Expand Up @@ -617,14 +621,14 @@ const CustomTable: React.FC<CustomTableProps> = ({
onClick={() => handleShowDetails(row)}
>
<span
className="bg-white p-1 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center cursor-pointer"
className="bg-white px-1 rounded-[4px] border border-[#D1D1D1] text-xs flex items-center cursor-pointer"
style={{
backgroundColor: '#96A5A6',
display: 'flex',
alignItems: 'center',
}}
>
+{row.activityComposition.length - 4}
+{row.activityComposition.length - 2}
</span>
</div>
)}
Expand Down
27 changes: 14 additions & 13 deletions src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,22 +115,21 @@ export default function ActiveMemberBreakdown() {
handleUsernameChange={handleUsernameChange}
isLoading={isActiveMembersBreakdownLoading}
/>
{fetchedData?.totalResults > 0 && (
<div className="flex justify-end">
<CustomPagination
totalItems={fetchedData.totalResults}
itemsPerPage={Math.ceil(
fetchedData.totalResults / fetchedData.totalPages
)}
currentPage={page}
onChangePage={handlePageChange}
/>
</div>
)}

<div className="flex justify-end">
<CustomPagination
totalItems={fetchedData.totalResults}
itemsPerPage={Math.ceil(
fetchedData.totalResults / fetchedData.totalPages
)}
currentPage={page}
onChangePage={handlePageChange}
/>
</div>
</div>
</div>
</div>
{fetchedData?.results.length > 0 ?? (
{fetchedData && fetchedData?.totalResults > 10 ? (
<div className="flex justify-center mt-2 mb-12">
<CustomButton
label={isExpanded ? 'Show less' : 'Show member breakdown'}
Expand All @@ -140,6 +139,8 @@ export default function ActiveMemberBreakdown() {
onClick={() => toggleExpanded(!isExpanded)}
/>
</div>
) : (
''
)}
</>
);
Expand Down
7 changes: 2 additions & 5 deletions src/store/slices/breakdownsSlice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const createBreakdownsSlice: StateCreator<IBreakdown> = (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;
Expand All @@ -58,15 +58,12 @@ const createBreakdownsSlice: StateCreator<IBreakdown> = (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
}
},
});
Expand Down
2 changes: 1 addition & 1 deletion src/utils/interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export interface Row {
}

export interface IRoles {
id: string;
roleId: string;
color: number | string;
name: string;
}

0 comments on commit 342ea16

Please sign in to comment.