Skip to content

Commit

Permalink
more design adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
@meetulr
meetulr committed Oct 27, 2024
1 parent c882dd6 commit ba59202
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 197 deletions.
10 changes: 5 additions & 5 deletions src/screens/ManageTag/ManageTag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ function ManageTag(): JSX.Element {
};

const redirectToManageTag = (tagId: string): void => {
navigate(`/orgtags/${orgId}/managetag/${tagId}`);
navigate(`/orgtags/${orgId}/manageTag/${tagId}`);
};

const toggleUnassignTagModal = (): void => {
Expand Down Expand Up @@ -322,20 +322,20 @@ function ManageTag(): JSX.Element {
headerClassName: `${styles.tableHeader}`,
renderCell: (params: GridCellParams) => {
return (
<div className="d-flex justify-content-center align-items-center">
<div>
<Link
to={`/member/${orgId}`}
state={{ id: params.row._id }}
className={styles.membername}
data-testid="viewProfileBtn"
>
<div className="btn btn-sm btn-primary">{t('viewProfile')}</div>
<div className="btn btn-sm btn-primary me-3">
{t('viewProfile')}
</div>
</Link>

<Button
size="sm"
variant="danger"
className={`ms-2`}
onClick={() => {
setUnassignUserId(params.row._id);
toggleUnassignTagModal();
Expand Down
106 changes: 12 additions & 94 deletions src/screens/OrganizationTags/OrganizationTags.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,7 @@ import {
import type { GridCellParams, GridColDef } from '@mui/x-data-grid';
import { Stack } from '@mui/material';
import { ORGANIZATION_USER_TAGS_LIST } from 'GraphQl/Queries/OrganizationQueries';
import {
CREATE_USER_TAG,
REMOVE_USER_TAG,
} from 'GraphQl/Mutations/TagMutations';
import { CREATE_USER_TAG } from 'GraphQl/Mutations/TagMutations';
import InfiniteScroll from 'react-infinite-scroll-component';

/**
Expand All @@ -50,9 +47,6 @@ function OrganizationTags(): JSX.Element {

const [tagName, setTagName] = useState<string>('');

const [removeUserTagId, setRemoveUserTagId] = useState(null);
const [removeTagModalIsOpen, setRemoveTagModalIsOpen] = useState(false);

const showCreateTagModal = (): void => {
setTagName('');
setCreateTagModalIsOpen(true);
Expand Down Expand Up @@ -140,26 +134,6 @@ function OrganizationTags(): JSX.Element {
}
};

const [removeUserTag] = useMutation(REMOVE_USER_TAG);
const handleRemoveUserTag = async (): Promise<void> => {
try {
await removeUserTag({
variables: {
id: removeUserTagId,
},
});

orgUserTagsRefetch();
toggleRemoveUserTagModal();
toast.success(t('tagRemovalSuccess') as string);
} catch (error: unknown) {
/* istanbul ignore next */
if (error instanceof Error) {
toast.error(error.message);
}
}
};

if (createUserTagLoading || orgUserTagsLoading) {
return <Loader />;
}
Expand All @@ -184,18 +158,13 @@ function OrganizationTags(): JSX.Element {
);

const redirectToManageTag = (tagId: string): void => {
navigate(`/orgtags/${orgId}/managetag/${tagId}`);
navigate(`/orgtags/${orgId}/manageTag/${tagId}`);
};

const redirectToSubTags = (tagId: string): void => {
navigate(`/orgtags/${orgId}/subTags/${tagId}`);
};

const toggleRemoveUserTagModal = (): void => {
if (removeTagModalIsOpen) setRemoveUserTagId(null);
setRemoveTagModalIsOpen(!removeTagModalIsOpen);
};

const columns: GridColDef[] = [
{
field: 'id',
Expand Down Expand Up @@ -243,7 +212,7 @@ function OrganizationTags(): JSX.Element {
return (
<Link
className="text-secondary"
to={`/orgtags/${orgId}/orgtagchildtags/${params.row._id}`}
to={`/orgtags/${orgId}/subTags/${params.row._id}`}
>
{params.row.childTags.totalCount}
</Link>
Expand All @@ -263,7 +232,7 @@ function OrganizationTags(): JSX.Element {
return (
<Link
className="text-secondary"
to={`/orgtags/${orgId}/orgtagdetails/${params.row._id}`}
to={`/orgtags/${orgId}/manageTag/${params.row._id}`}
>
{params.row.usersAssignedTo.totalCount}
</Link>
Expand All @@ -281,28 +250,14 @@ function OrganizationTags(): JSX.Element {
headerClassName: `${styles.tableHeader}`,
renderCell: (params: GridCellParams) => {
return (
<div className="d-flex justify-content-center align-items-center">
<Button
size="sm"
className="btn btn-primary rounded mt-3"
onClick={() => redirectToManageTag(params.row._id)}
data-testid="manageTagBtn"
>
{t('manageTag')}
</Button>

<Button
size="sm"
className="ms-2 btn btn-danger rounded mt-3"
onClick={() => {
setRemoveUserTagId(params.row._id);
toggleRemoveUserTagModal();
}}
data-testid="removeUserTagBtn"
>
{t('removeTag')}
</Button>
</div>
<Button
size="sm"
variant="outline-primary"
onClick={() => redirectToManageTag(params.row._id)}
data-testid="manageTagBtn"
>
{t('manageTag')}
</Button>
);
},
},
Expand Down Expand Up @@ -470,43 +425,6 @@ function OrganizationTags(): JSX.Element {
</Modal.Footer>
</Form>
</Modal>

{/* Remove User Tag Modal */}
<Modal
size="sm"
id={`deleteActionItemModal`}
show={removeTagModalIsOpen}
onHide={toggleRemoveUserTagModal}
backdrop="static"
keyboard={false}
centered
>
<Modal.Header closeButton className="bg-primary">
<Modal.Title className="text-white" id={`deleteActionItem`}>
{t('removeUserTag')}
</Modal.Title>
</Modal.Header>
<Modal.Body>{t('removeUserTagMessage')}</Modal.Body>
<Modal.Footer>
<Button
type="button"
className="btn btn-danger"
data-dismiss="modal"
onClick={toggleRemoveUserTagModal}
data-testid="removeUserTagModalCloseBtn"
>
{tCommon('no')}
</Button>
<Button
type="button"
className="btn btn-success"
onClick={handleRemoveUserTag}
data-testid="removeUserTagSubmitBtn"
>
{tCommon('yes')}
</Button>
</Modal.Footer>
</Modal>
</>
);
}
Expand Down
110 changes: 12 additions & 98 deletions src/screens/SubTags/SubTags.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,7 @@ import {
} from 'utils/organizationTagsUtils';
import type { GridCellParams, GridColDef } from '@mui/x-data-grid';
import { Stack } from '@mui/material';
import {
CREATE_USER_TAG,
REMOVE_USER_TAG,
} from 'GraphQl/Mutations/TagMutations';
import { CREATE_USER_TAG } from 'GraphQl/Mutations/TagMutations';
import {
USER_TAG_ANCESTORS,
USER_TAG_SUB_TAGS,
Expand Down Expand Up @@ -54,10 +51,6 @@ function SubTags(): JSX.Element {

const [tagName, setTagName] = useState<string>('');

const [removeUserTagId, setRemoveUserTagId] = useState(null);
const [removeUserTagModalIsOpen, setRemoveUserTagModalIsOpen] =
useState(false);

const showAddSubTagModal = (): void => {
setAddSubTagModalIsOpen(true);
};
Expand Down Expand Up @@ -162,26 +155,6 @@ function SubTags(): JSX.Element {
}
};

const [removeUserTag] = useMutation(REMOVE_USER_TAG);
const handleRemoveUserTag = async (): Promise<void> => {
try {
await removeUserTag({
variables: {
id: removeUserTagId,
},
});

subTagsRefetch();
toggleRemoveUserTagModal();
toast.success(t('tagRemovalSuccess') as string);
} catch (error: unknown) {
/* istanbul ignore next */
if (error instanceof Error) {
toast.error(error.message);
}
}
};

if (createUserTagLoading || subTagsLoading || orgUserTagsAncestorsLoading) {
return <Loader />;
}
Expand Down Expand Up @@ -215,14 +188,7 @@ function SubTags(): JSX.Element {
};

const redirectToSubTags = (tagId: string): void => {
navigate(`/orgtags/${orgId}/subtags/${tagId}`);
};

const toggleRemoveUserTagModal = (): void => {
if (removeUserTagModalIsOpen) {
setRemoveUserTagId(null);
}
setRemoveUserTagModalIsOpen(!removeUserTagModalIsOpen);
navigate(`/orgtags/${orgId}/subTags/${tagId}`);
};

const columns: GridColDef[] = [
Expand Down Expand Up @@ -272,7 +238,7 @@ function SubTags(): JSX.Element {
return (
<Link
className="text-secondary"
to={`/orgtags/${orgId}/subtags/${params.row._id}`}
to={`/orgtags/${orgId}/subTags/${params.row._id}`}
>
{params.row.childTags.totalCount}
</Link>
Expand All @@ -292,7 +258,7 @@ function SubTags(): JSX.Element {
return (
<Link
className="text-secondary"
to={`/orgtags/${orgId}/orgtagdetails/${params.row._id}`}
to={`/orgtags/${orgId}/manageTag/${params.row._id}`}
>
{params.row.usersAssignedTo.totalCount}
</Link>
Expand All @@ -310,28 +276,14 @@ function SubTags(): JSX.Element {
headerClassName: `${styles.tableHeader}`,
renderCell: (params: GridCellParams) => {
return (
<div className="d-flex justify-content-center align-items-center">
<Button
size="sm"
className="btn btn-primary rounded mt-3"
onClick={() => redirectToManageTag(params.row._id)}
data-testid="manageTagBtn"
>
{t('manageTag')}
</Button>

<Button
size="sm"
className="ms-2 btn btn-danger rounded mt-3"
onClick={() => {
setRemoveUserTagId(params.row._id);
toggleRemoveUserTagModal();
}}
data-testid="removeUserTagBtn"
>
{t('removeTag')}
</Button>
</div>
<Button
size="sm"
variant="outline-primary"
onClick={() => redirectToManageTag(params.row._id)}
data-testid="manageTagBtn"
>
{t('manageTag')}
</Button>
);
},
},
Expand Down Expand Up @@ -524,44 +476,6 @@ function SubTags(): JSX.Element {
</Modal.Footer>
</Form>
</Modal>

{/* Remove User Tag Modal */}
<Modal
size="sm"
id={`deleteActionItemModal`}
show={removeUserTagModalIsOpen}
onHide={toggleRemoveUserTagModal}
backdrop="static"
keyboard={false}
className={styles.actionItemModal}
centered
>
<Modal.Header closeButton className="bg-primary">
<Modal.Title className="text-white" id={`removeUserTag`}>
{t('removeUserTag')}
</Modal.Title>
</Modal.Header>
<Modal.Body>{t('removeUserTagMessage')}</Modal.Body>
<Modal.Footer>
<Button
type="button"
className="btn btn-danger"
data-dismiss="modal"
onClick={toggleRemoveUserTagModal}
data-testid="removeUserTagModalCloseBtn"
>
{tCommon('no')}
</Button>
<Button
type="button"
className="btn btn-success"
onClick={handleRemoveUserTag}
data-testid="removeUserTagSubmitBtn"
>
{tCommon('yes')}
</Button>
</Modal.Footer>
</Modal>
</>
);
}
Expand Down

0 comments on commit ba59202

Please sign in to comment.