Skip to content

Commit

Permalink
Merge pull request #86 from AkshataKatwal16/admin
Browse files Browse the repository at this point in the history 
Issue feat:UI fixes
  • Loading branch information
@itsvick
itsvick authored Aug 2, 2024
2 parents 7e221e3 + d228e40 commit 67ed154
Show file tree
Hide file tree
Showing 7 changed files with 177 additions and 97 deletions.
14 changes: 13 additions & 1 deletion public/locales/en/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,19 @@
"MY_MAIN_SUBJECTS": "Main subjects",
"NUMBER_OF_CLUSTERS_I_TEACH": "Number of cluster",
"DESIGNATION": "Designation",
"NOTE_THIS_WILL_BE_CENTER_NAME": "Note : This Will Be Center Name"
"NOTE_THIS_WILL_BE_CENTER_NAME": "Note : This Will Be Center Name",
"STATE":"State",
"DISTRICT":"District",
"BLOCK":"Block",
"ACTION":"Actions",
"STATUS":"Status",
"NAME":"Name",
"MOBILE_NUMBER":"Mobile Number",
"CENTER":"Center"




},
"FORM_ERROR_MESSAGES": {
"INVALID_INPUT": "Invalid Input.",
Expand Down
14 changes: 7 additions & 7 deletions src/components/KaTableComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,13 +81,13 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
<div className="ka-table-wrapper">
<Table
{...tableProps}
paging={{
enabled: paginationEnable,
pageIndex: offset,
pageSize: limit,
pageSizes: pageSizes,
position: PagingPosition.Bottom,
}}
// paging={{
// enabled: paginationEnable,
// pageIndex: offset,
// pageSize: limit,
// pageSizes: pageSizes,
// position: PagingPosition.Bottom,
// }}
childComponents={{
pagingSizes: {
content: (props) => <PageSizeSelector {...props} />,
Expand Down
98 changes: 12 additions & 86 deletions src/components/UserTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ import { Role } from "@/utils/app.constant";
import { getFormRead } from "@/services/CreateUserService";
import { showToastMessage } from "./Toastify";
import { capitalizeFirstLetterOfEachWordInArray } from "../utils/Helper";
import { getUserTableColumns,getTLTableColumns } from "@/data/tableColumns";
import { useMediaQuery } from '@mui/material';
import { Theme } from '@mui/system';

type UserDetails = {
userId: any;
Expand Down Expand Up @@ -60,98 +63,17 @@ interface UserTableProps {
userType: string;
searchPlaceholder: string;
handleAddUserClick: any;
parentState?:boolean
}

const columns = [
// {
// key: "userId",
// title: "ID",
// dataType: DataType.String,
// },
// {
// key: "selection-cell",
// width: 50,
// },
{
key: "name",
title: "Name",
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
// width: isMobile?160:10
},
{
key: "status",
title: "Status",
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
//width: isMobile?160:null,
},

// {
// key: "programs",
// title: "Programs",
// dataType: DataType.String,
// },
{
key: "age",
title: "Age",
dataType: DataType.String,
// width: 160,
},
{
key: "gender",
title: "Gender",
dataType: DataType.String,
// width: 160,
},
{
key: "mobile",
title: "Mobile Number",
dataType: DataType.String,
// width: 160,
},
{
key: "state",
title: "State",
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
// width: 160,
},
{
key: "district",
title: "District",
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
// width: 160,
},

{
key: "blocks",
title: "Blocks",
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
// width: 160,
},
{
key: "centers",
title: "Centers",
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
// width: 160,
},
{
key: "actions",
title: "Actions",
dataType: DataType.String,
// width: 160,
},
];


const UserTable: React.FC<UserTableProps> = ({
role,
userType,
searchPlaceholder,
handleAddUserClick,
parentState
}) => {
const [selectedState, setSelectedState] = React.useState<string[]>([]);
const [selectedStateCode, setSelectedStateCode] = useState("");
Expand All @@ -173,6 +95,10 @@ const UserTable: React.FC<UserTableProps> = ({
const [selectedUserId, setSelectedUserId] = useState("");
const [selectedReason, setSelectedReason] = useState("");
const [otherReason, setOtherReason] = useState("");
// const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));


const [confirmButtonDisable, setConfirmButtonDisable] = useState(false);
const [pagination, setPagination] = useState(true);
const [selectedFilter, setSelectedFilter] = useState("All");
Expand Down Expand Up @@ -578,7 +504,7 @@ const handleCloseAddTeamLeaderModal = () => {
}
};
fetchUserList();
}, [pageOffset, pageLimit, sortBy, filters, openAddFacilitatorModal, openAddLearnerModal, openAddTeamLeaderModal]);
}, [pageOffset, pageLimit, sortBy, filters, openAddFacilitatorModal, openAddLearnerModal, openAddTeamLeaderModal, parentState]);

useEffect(() => {
const fetchData = async () => {
Expand Down Expand Up @@ -669,7 +595,7 @@ const handleCloseAddTeamLeaderModal = () => {
<Loader showBackdrop={true} loadingText={t("COMMON.LOADING")} />
) : data.length !== 0 && loading === false ? (
<KaTableComponent
columns={columns}
columns= {role==="Team Leader" ? getTLTableColumns(t): getUserTableColumns(t, isMobile)}
data={data}
limit={pageLimit}
offset={pageOffset}
Expand Down
142 changes: 142 additions & 0 deletions src/data/tableColumns.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
import { DataType, SortDirection } from "ka-table";

export const getUserTableColumns = (t: any, isMobile: any) => {

return [
{
key: "name",
title: t("FORM.NAME"),
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
width: isMobile?160:null,

},
{
key: "status",
title: t("FORM.STATUS"),
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
width: isMobile?160:null,
},


{
key: "age",
title: t("FORM.AGE"),
dataType: DataType.String,
width: isMobile?160:null,
},
{
key: "gender",
title: t("FORM.GENDER"),
dataType: DataType.String,
width: isMobile?160:null,
},
{
key: "mobile",
title: t("FORM.MOBILE_NUMBER"),
dataType: DataType.String,
width: isMobile?160:null,
},
{
key: "state",
title: t("FORM.STATE"),
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
width: isMobile?160:null,
},
{
key: "district",
title:t("FORM.DISTRICT"),
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
width: isMobile?160:null,
},

{
key: "blocks",
title: t("FORM.BLOCK"),
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
width: isMobile?160:null,
},
{
key: "centers",
title: t("FORM.CENTER"),
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
width: isMobile?160:null,
},
{
key: "actions",
title: t("FORM.ACTION"),
dataType: DataType.String,
width: isMobile?160:null,
},
];
}


export const getTLTableColumns = (t: any) => {
return[

{
key: "name",
title: t("FORM.NAME"),
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
},
{
key: "status",
title: t("FORM.STATUS"),
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
//width: isMobile?160:null,
},


{
key: "age",
title: t("FORM.AGE"),
dataType: DataType.String,
// width: 160,
},
{
key: "gender",
title: t("FORM.GENDER"),
dataType: DataType.String,
// width: 160,
},

{
key: "state",
title: t("FORM.STATE"),
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
// width: 160,
},
{
key: "district",
title:t("FORM.DISTRICT"),
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
// width: 160,
},

{
key: "blocks",
title: t("FORM.BLOCK"),
dataType: DataType.String,
sortDirection: SortDirection.Ascend,
// width: 160,
},

{
key: "actions",
title: t("FORM.ACTION"),
dataType: DataType.String,
// width: 160,
},
];
}

2 changes: 1 addition & 1 deletion src/pages/faciliator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const handleCloseAddFacilitatorModal = () => {
};
return (
<>
<UserTable role={Role.TEACHER} userType= {t("SIDEBAR.FACILITATORS")} searchPlaceholder={ t("FACILITATORS.SEARCHBAR_PLACEHOLDER")}handleAddUserClick={handleAddFaciliatorClick}/>
<UserTable role={Role.TEACHER} userType= {t("SIDEBAR.FACILITATORS")} searchPlaceholder={ t("FACILITATORS.SEARCHBAR_PLACEHOLDER")}handleAddUserClick={handleAddFaciliatorClick} parentState={openAddFacilitatorModal}/>
<AddFacilitatorModal
open={openAddFacilitatorModal}
onClose={handleCloseAddFacilitatorModal}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/learners.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const handleCloseAddLearnerModal = () => {
};
return (
<>
<UserTable role={Role.STUDENT} userType={t("SIDEBAR.LEARNERS")} searchPlaceholder={t("LEARNERS.SEARCHBAR_PLACEHOLDER")} handleAddUserClick={handleAddLearnerClick}/>
<UserTable role={Role.STUDENT} userType={t("SIDEBAR.LEARNERS")} searchPlaceholder={t("LEARNERS.SEARCHBAR_PLACEHOLDER")} handleAddUserClick={handleAddLearnerClick} parentState={openAddLearnerModal}/>
<AddLearnerModal
open={openAddLearnerModal}
onClose={handleCloseAddLearnerModal}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/teamLeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const handleCloseAddLearnerModal = () => {

return (
<>
<UserTable role={Role.TEAM_LEADER} searchPlaceholder={ t("TEAM_LEADERS.SEARCHBAR_PLACEHOLDER")} userType={t("SIDEBAR.TEAM_LEADERS")} handleAddUserClick={handleAddTeamLeaderClick}/>
<UserTable role={Role.TEAM_LEADER} searchPlaceholder={ t("TEAM_LEADERS.SEARCHBAR_PLACEHOLDER")} userType={t("SIDEBAR.TEAM_LEADERS")} handleAddUserClick={handleAddTeamLeaderClick} parentState={openAddLearnerModal}/>
<AddTeamLeaderModal
open={openAddLearnerModal}
onClose={handleCloseAddLearnerModal}
Expand Down

0 comments on commit 67ed154

Please sign in to comment.