Skip to content

Commit

Permalink
Merge pull request #152 from AkshataKatwal16/admin
Browse files Browse the repository at this point in the history 
Issue #PS-1782 feat: Modify active inactive filter
  • Loading branch information
@itsvick
itsvick authored Aug 22, 2024
2 parents 5abea0a + 9fd377f commit 46fc19e
Show file tree
Hide file tree
Showing 6 changed files with 102 additions and 62 deletions.
82 changes: 51 additions & 31 deletions src/components/HeaderComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,21 @@ import {
MenuItem,
Typography,
useMediaQuery,
Divider,


} from "@mui/material";
import Select from "@mui/material/Select";
import { useTheme } from "@mui/material/styles";
import { useTranslation } from "next-i18next";
import { useEffect, useState } from "react";
import { Role} from "@/utils/app.constant";

import { Role, Status} from "@/utils/app.constant";
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
import { getCenterList, getStateBlockDistrictList } from "../services/MasterDataService";
import AreaSelection from "./AreaSelection";
import { transformArray } from "../utils/Helper";
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';

interface State {
value: string;
Expand Down Expand Up @@ -63,7 +68,10 @@ const HeaderComponent = ({
handleSearch,
handleAddUserClick,
selectedCenter,
handleCenterChange
handleCenterChange,
statusValue,

setStatusValue
}: any) => {
const { t } = useTranslation();
const theme = useTheme<any>();
Expand Down Expand Up @@ -222,7 +230,10 @@ const HeaderComponent = ({

fetchData();
}, []);
console.log(userType)
const handleChange = (event: React.SyntheticEvent, newValue: any) => {
console.log(newValue)
setStatusValue(newValue);
};

return (
<Box
Expand Down Expand Up @@ -269,13 +280,48 @@ const HeaderComponent = ({
backgroundColor: "white",
paddingTop:"20px"
}}>

{showFilter && (
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs
value={statusValue}
onChange={handleFilterChange}
aria-label="Tabs where selection follows focus"
selectionFollowsFocus
>
<Tab
label={
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Box
sx={{
width: 8,
height: 8,
bgcolor: 'green',
borderRadius: '50%',
mr: 1 // margin-right: 1 unit
}}
/>
{Status.ACTIVE_LABEL}
</Box>
}
value={Status.ACTIVE}
/>
<Tab label={Status.INACTIVE} value={Status.ARCHIVED} />
</Tabs>
</Box>



)}
<Box
sx={{
display: "flex",
flexDirection: isMobile || isMediumScreen ? "column" : "row",
gap: isMobile || isMediumScreen ? "8px" : "5%",
marginTop:"20px"
}}
>

<Box sx={{ flex: 1 , paddingLeft:"16px",
paddingRight:"16px"
}}>
Expand Down Expand Up @@ -327,33 +373,7 @@ const HeaderComponent = ({
}}
>

{showFilter && (
<>
<Typography variant="h3" mt="10px">
{t("COMMON.FILTER_BY_STATUS")}
</Typography>
<FormControl sx={{ minWidth: "120px" }}>
<Select
value={selectedFilter}
onChange={handleFilterChange}
displayEmpty
style={{
borderRadius: "8px",
height: "40px",
fontSize: "14px",
backgroundColor: theme.palette.secondary["100"],
}}
>
<MenuItem value="All">{t("COMMON.ALL")}</MenuItem>
{Filter?.map((filter, index) => (
<MenuItem value={filter} key={index}>
{filter}
</MenuItem>
))}
</Select>
</FormControl>
</>
)}

{showSort && (
<FormControl sx={{ minWidth: "120px" }}>
<Select
Expand Down
38 changes: 25 additions & 13 deletions src/components/UserTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ const UserTable: React.FC<UserTableProps> = ({
const [pageSize, setPageSize] = React.useState<string | number>("10");
const [sortBy, setSortBy] = useState(["createdAt", "asc"]);
const [sortByForCohortMemberList, setsortByForCohortMemberList] = useState(["name", SORT.ASCENDING]);

const [statusValue, setStatusValue] = useState(Status.ACTIVE);
const [pageCount, setPageCount] = useState(1);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedUserId, setSelectedUserId] = useState("");
Expand Down Expand Up @@ -166,6 +166,8 @@ const UserTable: React.FC<UserTableProps> = ({

const [filters, setFilters] = useState<FilterDetails>({
role: role,
status: [statusValue],

});

const handleChange = (event: SelectChangeEvent<typeof pageSize>) => {
Expand Down Expand Up @@ -219,25 +221,27 @@ const UserTable: React.FC<UserTableProps> = ({
setSelectedStateCode(stateCodes);
if (filters.status)
setFilters({
status: [filters.status],
states: stateCodes,
role: role,
status: filters.status,

});
else setFilters({ states: stateCodes, role: role });
}

console.log("Selected categories:", typeof code[0]);
};
const handleFilterChange = async (event: SelectChangeEvent) => {
console.log(event.target.value as string);
setSelectedFilter(event.target.value as string);
if (event.target.value === Status.ACTIVE_LABEL) {
const handleFilterChange = async (event: React.SyntheticEvent, newValue: any) => {
setStatusValue(newValue)
console.log(newValue);
setSelectedFilter(newValue);
if (newValue === Status.ACTIVE) {
console.log(true);
setFilters((prevFilters) => ({
...prevFilters,
status: [Status.ACTIVE],
}));
} else if (event.target.value === Status.INACTIVE) {
} else if (newValue === Status.ARCHIVED) {
setFilters((prevFilters) => ({
...prevFilters,
status: [Status.ARCHIVED],
Expand All @@ -263,9 +267,10 @@ const UserTable: React.FC<UserTableProps> = ({
if (selected[0] === "" || selected[0] === t("COMMON.ALL_DISTRICTS")) {
if (filters.status) {
setFilters({
status: [filters.status],
states: selectedStateCode,
role: role,
status: filters.status,

});
} else {
setFilters({
Expand All @@ -278,10 +283,11 @@ const UserTable: React.FC<UserTableProps> = ({
setSelectedDistrictCode(districts);
if (filters.status) {
setFilters({
status: [filters.status],
states: selectedStateCode,
districts: districts,
role: role,
status: filters.status,

});
} else {
setFilters({
Expand All @@ -300,10 +306,11 @@ const UserTable: React.FC<UserTableProps> = ({
if (selected[0] === "" || selected[0] === t("COMMON.ALL_BLOCKS")) {
if (filters.status) {
setFilters({
status: [filters.status],
states: selectedStateCode,
districts: selectedDistrictCode,
role: role,
status: filters.status,

});
} else {
setFilters({
Expand All @@ -317,11 +324,12 @@ const UserTable: React.FC<UserTableProps> = ({
setSelectedBlockCode(blocks);
if (filters.status) {
setFilters({
status: [filters.status],
states: selectedStateCode,
districts: selectedDistrictCode,
blocks: blocks,
role: role,
status: filters.status,

});
} else {
setFilters({
Expand All @@ -344,6 +352,7 @@ const UserTable: React.FC<UserTableProps> = ({
// blocks: blocks,
cohortId:code[0],
role: role,
status:[statusValue]
});

};
Expand Down Expand Up @@ -754,8 +763,9 @@ const UserTable: React.FC<UserTableProps> = ({
setSelectedStateCode(stateField.code)
setFilters({
states: stateField.code,

role: role,}
role: role,
status:[statusValue],
}

)
}
Expand Down Expand Up @@ -832,6 +842,8 @@ const UserTable: React.FC<UserTableProps> = ({
selectedDistrict: selectedDistrict,
selectedBlock: selectedBlock,
selectedSort: selectedSort,
statusValue:statusValue,
setStatusValue:setStatusValue,
handleStateChange: handleStateChange,
handleDistrictChange: handleDistrictChange,
handleBlockChange: handleBlockChange,
Expand Down
4 changes: 2 additions & 2 deletions src/components/layouts/FullLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,8 +136,8 @@ const FullLayout = ({ children }: any) => {
<Header
sx={{
paddingLeft: isSidebarOpen && lgUp ? "265px" : "",
backgroundColor: "#FFFFFF",
boxshow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
backgroundColor: "#4d4639",
boxshow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
}}
toggleMobileSidebar={() => setMobileSidebarOpen(true)}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/components/layouts/header/Profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ const Profile = () => {
onClick={handleClick4}
sx={{ border: "none" }}
>
<Box display="flex" alignItems="center" color="#1F1B13">
<Box display="flex" alignItems="center" color="white">
<AccountCircleIcon />
<Box
sx={{
Expand Down
3 changes: 0 additions & 3 deletions src/data/tableColumns.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ const generateColumns = (
export const getUserTableColumns = (t: any, isMobile: boolean) => {
const configs: ColumnConfig[] = [
{ key: "name", titleKey: "FORM.NAME", width: 180 },
{ key: "status", titleKey: "FORM.STATUS", width: 130 },
{ key: "age", titleKey: "FORM.AGE", width: 100 },
{ key: "gender", titleKey: "FORM.GENDER", width: 130 },
{ key: "mobile", titleKey: "COMMON.MOBILE", width: 130 },
Expand All @@ -47,7 +46,6 @@ export const getUserTableColumns = (t: any, isMobile: boolean) => {
export const getTLTableColumns = (t: any, isMobile: boolean) => {
const configs: ColumnConfig[] = [
{ key: "name", titleKey: "FORM.NAME", width: 130 },
{ key: "status", titleKey: "TABLE_TITLE.STATUS", width: 130},
{ key: "age", titleKey: "FORM.AGE", width: 100 },
{ key: "gender", titleKey: "FORM.GENDER", width: 130 },
{ key: "state", titleKey: "FORM.STATE", width: 130,},
Expand All @@ -67,7 +65,6 @@ export const getCenterTableData = (t: any, isMobile: boolean) => {
const configs: ColumnConfig[] = [
{ key: "name", titleKey: "TABLE_TITLE.NAME", width: 130 },
{ key: "customFieldValues", titleKey: "TABLE_TITLE.TYPE", width: 130 },
{ key: "status", titleKey: "TABLE_TITLE.STATUS", width: 130 },
{ key: "updatedBy", titleKey: "TABLE_TITLE.UPDATED_BY", width: 130 },
{ key: "createdBy", titleKey: "TABLE_TITLE.CREATED_BY", width: 130 },
{ key: "createdAt", titleKey: "TABLE_TITLE.CREATED_DATE", width: 130 },
Expand Down
Loading

0 comments on commit 46fc19e

Please sign in to comment.