Skip to content

Commit

Permalink
fixed ban new button issue (#9670)
Browse files Browse the repository at this point in the history 
* fixed ban new button issue

* moved ban new button and ban modal to parent Comp

* formatting

* removed trailing whitespace
  • Loading branch information
@darshanvss
darshanvss authored Jul 20, 2024
1 parent 92aa14e commit 7ab4272
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 81 deletions.
106 changes: 47 additions & 59 deletions app/webpacker/components/Panel/pages/BannedCompetitorsPage/BannedCompetitors.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,62 @@
import React, { useState } from 'react';
import {
Button, Icon, Modal, Table,
} from 'semantic-ui-react';
import React from 'react';
import { Icon, Table, Segment } from 'semantic-ui-react';
import UserBadge from '../../../UserBadge';
import BanendCompetitorForm from './BannedCompetitorForm';

export default function BannedCompetitors({
bannedCompetitorRoles,
sync,
canEditBannedCompetitors,
editBannedCompetitor,
}) {
const [banModalParams, setBanModalParams] = useState(null);

return (
<>
<Table>
<Table.Header>
<Table.Row>
<Table.HeaderCell width={5}>User</Table.HeaderCell>
<Table.HeaderCell width={2}>Start date</Table.HeaderCell>
<Table.HeaderCell width={2}>End date</Table.HeaderCell>
<Table.HeaderCell width={4}>Reason</Table.HeaderCell>
<Table.HeaderCell width={3}>Scope</Table.HeaderCell>
{canEditBannedCompetitors && <Table.HeaderCell width={2}>Edit</Table.HeaderCell>}
</Table.Row>
</Table.Header>

<Table.Body>
{bannedCompetitorRoles.map((role) => (
<Table.Row key={role.id}>
<Table.Cell>
<UserBadge
user={role.user}
hideBorder
leftAlign
subtexts={role.user.wca_id ? [role.user.wca_id] : []}
/>
</Table.Cell>
<Table.Cell>{role.start_date}</Table.Cell>
<Table.Cell>{role.end_date}</Table.Cell>
<Table.Cell>{role.metadata.ban_reason}</Table.Cell>
<Table.Cell>{role.metadata.scope}</Table.Cell>
{bannedCompetitorRoles.length > 0 ? (
<Table>
<Table.Header>
<Table.Row>
<Table.HeaderCell width={5}>User</Table.HeaderCell>
<Table.HeaderCell width={2}>Start date</Table.HeaderCell>
<Table.HeaderCell width={2}>End date</Table.HeaderCell>
<Table.HeaderCell width={4}>Reason</Table.HeaderCell>
<Table.HeaderCell width={3}>Scope</Table.HeaderCell>
{canEditBannedCompetitors && (
<Table.HeaderCell width={2}>Edit</Table.HeaderCell>
)}
</Table.Row>
</Table.Header>

<Table.Body>
{bannedCompetitorRoles.map((role) => (
<Table.Row key={role.id}>
<Table.Cell>
<Icon
name="edit"
link
onClick={() => setBanModalParams({ action: 'edit', role })}
<UserBadge
user={role.user}
hideBorder
leftAlign
subtexts={role.user.wca_id ? [role.user.wca_id] : []}
/>
</Table.Cell>
)}
</Table.Row>
))}
</Table.Body>
</Table>
{canEditBannedCompetitors && <Button onClick={() => setBanModalParams({ action: 'new' })}>Ban new competitor</Button>}
<Modal
open={!!banModalParams}
onClose={() => setBanModalParams(null)}
>
<Modal.Header>Add/Edit Banned Competitor</Modal.Header>
<Modal.Content>
<BanendCompetitorForm
sync={sync}
banAction={banModalParams?.action}
banActionRole={banModalParams?.role}
closeForm={() => setBanModalParams(null)}
/>
</Modal.Content>
</Modal>
<Table.Cell>{role.start_date}</Table.Cell>
<Table.Cell>{role.end_date}</Table.Cell>
<Table.Cell>{role.metadata.ban_reason}</Table.Cell>
<Table.Cell>{role.metadata.scope}</Table.Cell>
{canEditBannedCompetitors && (
<Table.Cell>
<Icon
name="edit"
link
onClick={() => editBannedCompetitor({ action: "edit", role })}
/>
</Table.Cell>
)}
</Table.Row>
))}
</Table.Body>
</Table>
) : (
<Segment placeholder textAlign="center">
<p>No Data to Show.</p>
</Segment>
)}
</>
);
}
70 changes: 48 additions & 22 deletions app/webpacker/components/Panel/pages/BannedCompetitorsPage/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React from 'react';
import { Header } from 'semantic-ui-react';
import React, { useState } from 'react';
import { Header, Button, Modal } from 'semantic-ui-react';
import useLoadedData from '../../../../lib/hooks/useLoadedData';
import { apiV0Urls } from '../../../../lib/requests/routes.js.erb';
import { groupTypes } from '../../../../lib/wca-data.js.erb';
import Loading from '../../../Requests/Loading';
import Errored from '../../../Requests/Errored';
import BannedCompetitors from './BannedCompetitors';
import useLoggedInUserPermissions from '../../../../lib/hooks/useLoggedInUserPermissions';
import BannedCompetitorForm from './BannedCompetitorForm';

export default function BannedCompetitorsPage() {
const {
Expand Down Expand Up @@ -34,44 +35,69 @@ export default function BannedCompetitorsPage() {
} = useLoadedData(apiV0Urls.userGroups.list(groupTypes.banned_competitors));
const { loggedInUserPermissions, permissionsLoading } = useLoggedInUserPermissions();

if (bannedCompetitorRolesLoading || pastBannedCompetitorRolesLoading
|| bannedGroupLoading || permissionsLoading) {
const [banModalParams, setBanModalParams] = useState(null);

if (
bannedCompetitorRolesLoading ||
pastBannedCompetitorRolesLoading ||
bannedGroupLoading ||
permissionsLoading
) {
return <Loading />;
}
if (bannedCompetitorRolesError || pastBannedCompetitorRolesError || bannedGroupError) {
if (
bannedCompetitorRolesError ||
pastBannedCompetitorRolesError ||
bannedGroupError
) {
return <Errored />;
}

const canEditBannedCompetitors = bannedGroups.some(
(bannedGroup) => loggedInUserPermissions.canEditGroup(bannedGroup.id),
const canEditBannedCompetitors = bannedGroups.some((bannedGroup) =>
loggedInUserPermissions.canEditGroup(bannedGroup.id)
);

if (bannedCompetitorRoles.length === 0 && pastBannedCompetitorRoles.length === 0) {
return 'No data to show.';
}

return (
<>
{bannedCompetitorRoles.length > 0 && (
{
<>
<Header>Banned Competitors</Header>
{canEditBannedCompetitors && (
<Button onClick={() => setBanModalParams({ action: "new" })}>
Ban new competitor
</Button>
)}
<BannedCompetitors
bannedCompetitorRoles={bannedCompetitorRoles}
sync={syncBannedCompetitorRoles}
canEditBannedCompetitors={canEditBannedCompetitors}
editBannedCompetitor={setBanModalParams}
/>
</>
)}
{pastBannedCompetitorRoles.length > 0 && (
}
{
<>
<Header>Past Banned Competitors</Header>
<BannedCompetitors
bannedCompetitorRoles={pastBannedCompetitorRoles}
sync={syncPastBannedCompetitorRoles}
canEditBannedCompetitors={canEditBannedCompetitors}
<Header>Past Banned Competitors</Header>
<BannedCompetitors
bannedCompetitorRoles={pastBannedCompetitorRoles}
canEditBannedCompetitors={canEditBannedCompetitors}
editBannedCompetitor={setBanModalParams}
/>
</>
}
<Modal open={!!banModalParams} onClose={() => setBanModalParams(null)}>
<Modal.Header>Add/Edit Banned Competitor</Modal.Header>
<Modal.Content>
<BannedCompetitorForm
sync={() => {
syncBannedCompetitorRoles();
syncPastBannedCompetitorRoles();
}}
banAction={banModalParams?.action}
banActionRole={banModalParams?.role}
closeForm={() => setBanModalParams(null)}
/>
</>
)}
</Modal.Content>
</Modal>
</>
);
}

0 comments on commit 7ab4272

Please sign in to comment.