Skip to content

Commit

Permalink
Merge pull request #519 from AI4Bharat/CL-584
Browse files Browse the repository at this point in the history 
CL-584 -- Sort by created_at, updated_at, description in ascending and descending order
  • Loading branch information
@AlpanaMajhi
AlpanaMajhi authored Dec 12, 2023
2 parents 2c59143 + 3eb9ff0 commit 632d5e4
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 77 deletions.
42 changes: 0 additions & 42 deletions src/config/tableColumns.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -375,48 +375,6 @@ export const orgTaskListColumns = [
customBodyRender: renderTaskListColumnCell,
},
},
{
name: "created_at",
label: "Created At",
options: {
display: false,
customBodyRender: (value, tableMeta) => {
const { tableData: data, rowIndex } = tableMeta;
const selectedTask = data[rowIndex];

return (
<Box
style={{
color: selectedTask.is_active ? "" : "grey",
}}
>
{moment(value).format("DD/MM/YYYY HH:mm:ss")}
</Box>
);
},
},
},
{
name: "updated_at",
label: "Updated At",
options: {
display: false,
customBodyRender: (value, tableMeta) => {
const { tableData: data, rowIndex } = tableMeta;
const selectedTask = data[rowIndex];

return (
<Box
style={{
color: selectedTask.is_active ? "" : "grey",
}}
>
{moment(value).format("DD/MM/YYYY HH:mm:ss")}
</Box>
);
},
},
},
{
name: "src_language_label",
label: "Source Language",
Expand Down
152 changes: 126 additions & 26 deletions src/containers/Organization/OrgLevelTaskList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@ import {
//Icons
import FilterListIcon from "@mui/icons-material/FilterList";
import SearchIcon from "@mui/icons-material/Search";
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
import ImportExportIcon from "@mui/icons-material/ImportExport";

// Utils
import getLocalStorageData from "utils/getLocalStorageData";
Expand Down Expand Up @@ -84,6 +87,7 @@ import {
setComparisonTable,
setSnackBar,
} from "redux/actions";
import moment from "moment";

const OrgLevelTaskList = () => {
const user_org_id = getLocalStorageData("userData").organization.id;
Expand All @@ -107,6 +111,10 @@ const OrgLevelTaskList = () => {
srcLanguage: [],
tgtLanguage: [],
});
const [sortOptions, setSortOptions] = useState({
sortBy: "",
order: "",
});

const [loading, setLoading] = useState(false);
const [uploadLoading, setUploadLoading] = useState([]);
Expand Down Expand Up @@ -149,7 +157,11 @@ const OrgLevelTaskList = () => {
const [searchAnchor, setSearchAnchor] = useState(null);
const [searchedCol, setSearchedCol] = useState({});
const [searchedColumn, setSearchedColumn] = useState({});
const [columnDisplay, setColumnDisplay] = useState(false);
const [columnDisplay, setColumnDisplay] = useState({
description: false,
created_at: false,
updated_at: false,
});

const [exportTypes, setExportTypes] = useState({
transcription: "srt",
Expand All @@ -165,9 +177,7 @@ const OrgLevelTaskList = () => {
const orgId = userData?.organization?.id;

const apiStatus = useSelector((state) => state.apiStatus);
const previewData = useSelector(
(state) => state.getPreviewData?.data
);
const previewData = useSelector((state) => state.getPreviewData?.data);

useEffect(() => {
const { progress, success, apiType, data } = apiStatus;
Expand Down Expand Up @@ -281,7 +291,8 @@ const OrgLevelTaskList = () => {
offset + 1,
limit,
searchRequest,
filterRequest
filterRequest,
sortOptions
);
dispatch(APITransport(apiObj));
};
Expand Down Expand Up @@ -318,7 +329,7 @@ const OrgLevelTaskList = () => {
}

// eslint-disable-next-line
}, [orgId, offset, limit, searchedColumn, selectedFilters]);
}, [orgId, offset, limit, searchedColumn, selectedFilters, sortOptions]);

useEffect(() => {
if (taskList) {
Expand Down Expand Up @@ -466,21 +477,45 @@ const OrgLevelTaskList = () => {
});

if (col.name === "description") {
setColumnDisplay(true);
setColumnDisplay((prev) => ({ ...prev, description: true }));
}
};

const renderSortIndicator = (column) => {
if (sortOptions.sortBy === column) {
return sortOptions.order ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />;
}
return <ImportExportIcon />;
};

const CustomTableHeader = (col) => {
return (
<>
<Box className={tableClasses.customTableHeader}>
{col.label}
<IconButton
sx={{ borderRadius: "100%" }}
onClick={(e) => handleShowSearch(col, e)}
>
<SearchIcon id={col.name + "_btn"} />
</IconButton>
{col.canBeSearch && (
<IconButton
sx={{ borderRadius: "100%" }}
onClick={(e) => handleShowSearch(col, e)}
>
<SearchIcon id={col.name + "_btn"} />
</IconButton>
)}

{col.canBeSorted && (
<IconButton
sx={{ borderRadius: "100%" }}
onClick={() => {
setColumnDisplay((prev) => ({ ...prev, [col.name]: true }));
setSortOptions((prev) => ({
sortBy: col.name,
order: prev.sortBy === col.name ? !prev.order : false,
}));
}}
>
{renderSortIndicator(col.name)}
</IconButton>
)}
</Box>
</>
);
Expand Down Expand Up @@ -588,6 +623,7 @@ const OrgLevelTaskList = () => {
options: {
filter: false,
sort: false,
canBeSearch: true,
align: "center",
customHeadLabelRender: CustomTableHeader,
setCellHeaderProps: () => ({
Expand All @@ -603,6 +639,7 @@ const OrgLevelTaskList = () => {
options: {
filter: false,
sort: false,
canBeSearch: true,
align: "center",
customHeadLabelRender: CustomTableHeader,
setCellHeaderProps: () => ({
Expand All @@ -618,6 +655,7 @@ const OrgLevelTaskList = () => {
options: {
filter: false,
sort: false,
canBeSearch: true,
align: "center",
customHeadLabelRender: CustomTableHeader,
customBodyRender: (value, tableMeta) => {
Expand All @@ -643,30 +681,90 @@ const OrgLevelTaskList = () => {
options: {
filter: false,
sort: false,
display: org_ids.includes(user_org_id) ? true : columnDisplay,
display: org_ids.includes(user_org_id)
? true
: columnDisplay.description,
align: "center",
canBeSearch: true,
canBeSorted: true,
customHeadLabelRender: CustomTableHeader,
customBodyRender: !org_ids.includes(user_org_id)
? renderTaskListColumnCell
: (value, tableMeta) => {
const { tableData: data, rowIndex } = tableMeta;
const selectedTask = data[rowIndex];
const slicedDesc = String(value).slice(0, 10);

const handleMouseOver = () => {
const rowData = tableMeta.rowData;
setShowDesc(true);
setId(rowData[0]);
};

return (
<Box
id={selectedTask.id}
onMouseOver={handleMouseOver}
onMouseOut={() => setShowDesc(false)}
style={{
color: selectedTask.is_active ? "" : "grey",
}}
>
{!desc
? slicedDesc
: org_id === tableMeta.rowData[0]
? value
: slicedDesc}
</Box>
);
},
},
};

const createdAtColumn = {
name: "created_at",
label: "Created At",
options: {
sort: false,
canBeSorted: true,
display: columnDisplay.createdAt,
customHeadLabelRender: CustomTableHeader,
customBodyRender: !org_ids.includes(user_org_id) ? renderTaskListColumnCell : (value, tableMeta) => {
customBodyRender: (value, tableMeta) => {
const { tableData: data, rowIndex } = tableMeta;
const selectedTask = data[rowIndex];
const slicedDesc = String(value).slice(0, 10);

const handleMouseOver = () => {
const rowData = tableMeta.rowData;
setShowDesc(true);
setId(rowData[0]);
}
return (
<Box
style={{
color: selectedTask.is_active ? "" : "grey",
}}
>
{moment(value).format("DD/MM/YYYY HH:mm:ss")}
</Box>
);
},
},
};

const updatedAtColumn = {
name: "updated_at",
label: "Updated At",
options: {
display: columnDisplay.createdAt,
sort: false,
canBeSorted: true,
customHeadLabelRender: CustomTableHeader,
customBodyRender: (value, tableMeta) => {
const { tableData: data, rowIndex } = tableMeta;
const selectedTask = data[rowIndex];

return (
<Box
id={selectedTask.id}
onMouseOver = {handleMouseOver}
onMouseOut={() => setShowDesc(false)}
style={{
color: selectedTask.is_active ? "" : "grey",
}}
>
{!desc ? slicedDesc : (org_id === tableMeta.rowData[0] ? value : slicedDesc)}
{moment(value).format("DD/MM/YYYY HH:mm:ss")}
</Box>
);
},
Expand Down Expand Up @@ -724,6 +822,8 @@ const OrgLevelTaskList = () => {
const columns = [...getColumns(orgTaskListColumns), actionColumn];
columns.splice(0, 1, id);
columns.splice(2, 0, videoName);
columns.splice(3, 0, createdAtColumn);
columns.splice(4, 0, updatedAtColumn);
columns.splice(7, 0, assigneeColumn);
columns.splice(10, 0, descriptionColumn);

Expand Down Expand Up @@ -907,7 +1007,7 @@ const OrgLevelTaskList = () => {
if (res.ok) {
const resp = await res.blob();
exportZip(resp);
} else {
} else {
const resp = await res.json();

dispatch(
Expand Down
29 changes: 20 additions & 9 deletions src/redux/actions/api/Organization/FetchPaginatedOrgTaskList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import ENDPOINTS from "../../../../config/apiendpoint";
import C from "../../../constants";

export default class FetchPaginatedOrgTaskListAPI extends API {
constructor(id, offset, limit, search, filter, timeout = 2000) {
constructor(id, offset, limit, search, filter, sortOptions, timeout = 2000) {
super("GET", timeout, false);

this.type = C.GET_ORG_TASK_LIST;
Expand All @@ -12,16 +12,27 @@ export default class FetchPaginatedOrgTaskListAPI extends API {
this.limit = limit;
this.search = search;
this.filter = filter;
this.sortOptions = sortOptions;

this.getTargetEndpoint = `${
ENDPOINTS.organization
}${id}/list_org_tasks/?limit=${this.limit}&offset=${
this.offset
}&filter=${JSON.stringify(this.filter)}&search=${JSON.stringify(
this.search
)}`;
const params = new URLSearchParams();
params.append("limit", this.limit);
params.append("offset", this.offset);

this.endpoint = `${super.apiEndPointAuto()}${this.getTargetEndpoint}`;
if (this.sortOptions.sortBy !== "") {
params.append("sort_by", this.sortOptions.sortBy);
}

if (this.sortOptions.order !== "") {
params.append("reverse", this.sortOptions.order);
}

params.append("filter", JSON.stringify(this.filter));
params.append("search", JSON.stringify(this.search));

const baseUrl = `${ENDPOINTS.organization}${id}/list_org_tasks/`;
const finalUrl = `${baseUrl}?${params.toString()}`;

this.endpoint = `${super.apiEndPointAuto()}${finalUrl}`;
}

processResponse(res) {
Expand Down

0 comments on commit 632d5e4

Please sign in to comment.