Skip to content

Commit

Permalink
Fixed draft and submission tab issues (AOT-Technologies#1766)
Browse files Browse the repository at this point in the history 
1. filter's ui change with button style on draft and submssions
2. loader added for pagination also in draft and application
3. loading fixed for api errors
4. close filter when action triggered
5. pagination error fixed for no data
  • Loading branch information
@shuhaib-aot
shuhaib-aot authored Nov 22, 2023
1 parent 4837b57 commit 978e865
Show file tree
Hide file tree
Showing 8 changed files with 221 additions and 234 deletions.
2 changes: 2 additions & 0 deletions forms-flow-web/src/apiManager/services/applicationServices.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,8 @@ export const getAllApplications = (params, ...rest) => {
done(null, res.data);
})
.catch((error) => {
dispatch(setApplicationListCount(0));
dispatch(setApplicationList([]));
dispatch(serviceActionError(error));
done(error);
});
Expand Down
9 changes: 5 additions & 4 deletions forms-flow-web/src/apiManager/services/draftService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,13 +229,14 @@ export const fetchDrafts = (params, ...rest) => {
dispatch(setDraftlist(drafts));
dispatch(setApplicationListCount(res.data?.applicationCount || 0));
done(null, drafts);
} else {
// dispatch(serviceActionError(res));
}else{
done(null, res.data);
}
done(null, res.data);

})
.catch((error) => {
// dispatch(serviceActionError(error));
dispatch(setDraftCount(0));
dispatch(setDraftlist([]));
done(error);
});
};
Expand Down
36 changes: 15 additions & 21 deletions forms-flow-web/src/components/Application/ApplicationFilter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ const ApplicationFilter = ({
setDisplayFilter(false);
};

const closeFilterModal = () => setDisplayFilter(false);

useEffect(() => {
// add when mounted
document.addEventListener("mousedown", handleClick);
Expand Down Expand Up @@ -70,13 +72,15 @@ const ApplicationFilter = ({
applicationName: "",
applicationStatus: "",
modified: null,});
closeFilterModal();
};

const applyFilters = () => {
dispatch(setApplicationLoading(true));
dispatch(setApplicationListActivePage(1));
setFilterParams(searchParams);
dispatch(setApplicationListSearchParams(searchParams));
closeFilterModal();
};

const getApplicationStatusOptions = (applicationStatusOptions) => {
Expand All @@ -86,24 +90,14 @@ const ApplicationFilter = ({
return selectOptions;
};


return (
<div
className="Filter-listview "
style={{ minWidth: "500px" }}
ref={createSearchNode}
>
<div className="bg-light ">
<Row
className="px-4 py-2"
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
margin: "auto",
}}
></Row>
</div>
<hr className="m-0 w-100" />

<div className="m-4 px-2">
<Row className="mt-2">
<Col>
Expand Down Expand Up @@ -166,23 +160,23 @@ const ApplicationFilter = ({
</Row>
</div>
<hr className="mx-4" />
<Row className="m-3 filter-cancel-btn-container ">
<Col className="text-left">
<span
className="text-danger small "
onClick={() => clearAllFilters()}
<Row className="m-3 filter-cancel-btn-container ">
<Col className="px-0 text-left">
<button
className="btn btn-link text-danger"
onClick={clearAllFilters}
>
{t("Clear All Filters")}
</span>
</button>
</Col>
<Col className="text-right">
<button
className="btn btn-light mr-1 "
onClick={() => setDisplayFilter(false)}
className="btn btn-link text-dark mr-1 "
onClick={closeFilterModal}
>
{t("Cancel")}
</button>
<button className="btn btn-dark" onClick={() => applyFilters()}>
<button className="btn btn-dark" onClick={applyFilters}>
{t("Show results")}
</button>
</Col>
Expand Down
224 changes: 152 additions & 72 deletions forms-flow-web/src/components/Application/ApplicationTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@ const ApplicationTable = () => {
const limit = useSelector((state) => state.applications?.countPerPage);
const sortOrder = useSelector((state) => state.applications?.sortOrder);
const sortBy = useSelector((state) => state.applications?.sortBy);
const isApplicationLoading = useSelector((state) => state.applications.isApplicationLoading);
const isApplicationLoading = useSelector(
(state) => state.applications.isApplicationLoading
);
const isAscending = sortOrder === "asc" ? true : false;
const totalForms = useSelector(
(state) => state.applications?.applicationCount
Expand Down Expand Up @@ -91,9 +93,11 @@ const ApplicationTable = () => {
dispatch(push(`${redirectUrl}application/${data.id}`));
};


const viewSubmissionDetails = (data) => (
<button className="btn btn-link mt-2" onClick={() => submissionDetails(data)}>
<button
className="btn btn-link mt-2"
onClick={() => submissionDetails(data)}
>
<Translation>{(t) => t("View Details")}</Translation>{" "}
</button>
);
Expand All @@ -106,16 +110,19 @@ const ApplicationTable = () => {
<Translation>{(t) => t("No submissions found")}</Translation>{" "}
</label>
<br />
{(filterParams.id || filterParams.applicationName ||
filterParams.applicationStatus || filterParams.modified) && (
<label className="lbl-no-application-desc">
{" "}
<Translation>
{(t) =>
t("Please change the selected filters to view submissions")
}
</Translation>
</label>)}
{(filterParams.id ||
filterParams.applicationName ||
filterParams.applicationStatus ||
filterParams.modified) && (
<label className="lbl-no-application-desc">
{" "}
<Translation>
{(t) =>
t("Please change the selected filters to view submissions")
}
</Translation>
</label>
)}
<br />
</div>
);
Expand All @@ -131,7 +138,17 @@ const ApplicationTable = () => {
className="btn btn-link mt-2"
onClick={() => window.open(url, "_blank")}
>
<Translation>{(t) => t(`${formData.isClientEdit || formData.isResubmit ? "Edit Form" : "View Submitted Form"}`)}</Translation>{" "}
<Translation>
{(t) =>
t(
`${
formData.isClientEdit || formData.isResubmit
? "Edit Form"
: "View Submitted Form"
}`
)
}
</Translation>{" "}
</button>
);
};
Expand All @@ -157,14 +174,70 @@ const ApplicationTable = () => {

return (
<>
<LoadingOverlay active={isApplicationLoading} spinner text={t("Loading...")}>
<LoadingOverlay
active={isApplicationLoading}
spinner
text={t("Loading...")}
>
<table className="table custom-table table-responsive-sm">
<thead>
<tr>
<th>{t("Id")} {isAscending && sortBy === 'id' ? <i onClick={() => updateSort('desc', 'id')} className="fa-sharp fa-solid fa-arrow-down-9-1" /> : <i onClick={() => updateSort('asc', 'id')} className="fa-sharp fa-solid fa-arrow-up-1-9" />} </th>
<th>{t("Form Title")} {isAscending && sortBy === 'applicationName' ? <i onClick={() => updateSort('desc', 'applicationName')} className="fa-sharp fa-solid fa-arrow-down-a-z" /> : <i onClick={() => updateSort('asc', 'applicationName')} className="fa-sharp fa-solid fa-arrow-up-z-a" />}</th>
<th>{t("Status")}{isAscending && sortBy === 'applicationStatus' ? <i onClick={() => updateSort('desc', 'applicationStatus')} className="fa-sharp fa-solid fa-arrow-down-a-z ml-2" /> : <i onClick={() => updateSort('asc', 'applicationStatus')} className="fa-sharp fa-solid fa-arrow-up-z-a ml-2" />}</th>
<th>{t("Last Modified")}{isAscending && sortBy === 'modified' ? <i onClick={() => updateSort('desc', 'modified')} className="fa-sharp fa-solid fa-arrow-down-9-1 ml-2" /> : <i onClick={() => updateSort('asc', 'modified')} className="fa-sharp fa-solid fa-arrow-up-1-9 ml-2" />}</th>
<th>
{t("Id")}{" "}
{isAscending && sortBy === "id" ? (
<i
onClick={() => updateSort("desc", "id")}
className="fa-sharp fa-solid fa-arrow-down-9-1 cursor-pointer"
/>
) : (
<i
onClick={() => updateSort("asc", "id")}
className="fa-sharp fa-solid fa-arrow-up-1-9 cursor-pointer"
/>
)}{" "}
</th>
<th>
{t("Form Title")}{" "}
{isAscending && sortBy === "applicationName" ? (
<i
onClick={() => updateSort("desc", "applicationName")}
className="fa-sharp fa-solid fa-arrow-down-a-z cursor-pointer"
/>
) : (
<i
onClick={() => updateSort("asc", "applicationName")}
className="fa-sharp fa-solid fa-arrow-up-z-a cursor-pointer"
/>
)}
</th>
<th>
{t("Status")}
{isAscending && sortBy === "applicationStatus" ? (
<i
onClick={() => updateSort("desc", "applicationStatus")}
className="fa-sharp fa-solid fa-arrow-down-a-z ml-2 cursor-pointer"
/>
) : (
<i
onClick={() => updateSort("asc", "applicationStatus")}
className="fa-sharp fa-solid fa-arrow-up-z-a ml-2 cursor-pointer"
/>
)}
</th>
<th>
{t("Last Modified")}
{isAscending && sortBy === "modified" ? (
<i
onClick={() => updateSort("desc", "modified")}
className="fa-sharp fa-solid fa-arrow-down-9-1 ml-2 cursor-pointer"
/>
) : (
<i
onClick={() => updateSort("asc", "modified")}
className="fa-sharp fa-solid fa-arrow-up-1-9 ml-2 cursor-pointer"
/>
)}
</th>
<th colSpan="4">
<div className="d-flex justify-content-end filter-sort-bar mt-1">
<div className="filter-container-list application-filter-list-view">
Expand Down Expand Up @@ -203,62 +276,69 @@ const ApplicationTable = () => {
</tr>
</thead>
<tbody>
{applications.length ? listApplications(applications)?.map((e) => {
return (
<tr key={e.id}>
<td>{e.id}</td>
<td>{e.applicationName}</td>
<td>{e.applicationStatus}</td>
<td>{HelperServices?.getLocalDateAndTime(e.modified)}</td>
<td>{viewSubmittedForm(e)}</td>
<td>{viewSubmissionDetails(e)}</td>
</tr>
);
}) : <td colSpan="6" className="text-center">
{getNoDataIndicationContent()}
</td>}
{applications.length ? (
listApplications(applications)?.map((e) => {
return (
<tr key={e.id}>
<td>{e.id}</td>
<td>{e.applicationName}</td>
<td>{e.applicationStatus}</td>
<td>{HelperServices?.getLocalDateAndTime(e.modified)}</td>
<td>{viewSubmittedForm(e)}</td>
<td>{viewSubmissionDetails(e)}</td>
</tr>
);
})
) : (
<td colSpan="6" className="text-center">
{getNoDataIndicationContent()}
</td>
)}
</tbody>
</table>

{applications.length ? (
<div className="d-flex justify-content-between align-items-center flex-column flex-md-row">
<div className="d-flex align-items-center">
<span className="mr-2"> {t("Rows per page")}</span>
<Dropdown size="sm">
<Dropdown.Toggle variant="light" id="dropdown-basic">
{pageLimit}
</Dropdown.Toggle>
<Dropdown.Menu>
{pageOptions.map((option) => (
<Dropdown.Item
key={option.value}
type="button"
onClick={() => {
onSizePerPageChange(option.value);
}}
>
{option.text}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
<span className="ml-2">
{t("Showing")} {(limit * pageNo) - (limit - 1)} {t("to")}{" "}
{limit * pageNo > totalForms ? totalForms : limit * pageNo}{" "}
{t("of")} {totalForms} {t("results")}
</span>
</div>
<div className="d-flex align-items-center">
<Pagination
activePage={pageNo}
itemsCountPerPage={limit}
totalItemsCount={totalForms}
pageRangeDisplayed={5}
itemClass="page-item"
linkClass="page-link"
onChange={handlePageChange}
/>
</div>
</div>
) : null}
</LoadingOverlay>
<div className="d-flex justify-content-between align-items-center flex-column flex-md-row">
<div className="d-flex align-items-center">
<span className="mr-2"> {t("Rows per page")}</span>
<Dropdown size="sm">
<Dropdown.Toggle variant="light" id="dropdown-basic">
{pageLimit}
</Dropdown.Toggle>
<Dropdown.Menu>
{pageOptions.map((option) => (
<Dropdown.Item
key={option.value}
type="button"
onClick={() => {
onSizePerPageChange(option.value);
}}
>
{option.text}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
<span className="ml-2">
{t("Showing")} {(limit * pageNo) - (limit - 1)} {t("to")}{" "}
{limit * pageNo > totalForms ? totalForms : limit * pageNo} {t("of")}{" "}
{totalForms} {t("results")}
</span>
</div>
<div className="d-flex align-items-center">
<Pagination
activePage={pageNo}
itemsCountPerPage={limit}
totalItemsCount={totalForms}
pageRangeDisplayed={5}
itemClass="page-item"
linkClass="page-link"
onChange={handlePageChange}
/>
</div>
</div>
</>
);
};
Expand Down
4 changes: 1 addition & 3 deletions forms-flow-web/src/components/Application/List.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,8 @@ export const ApplicationList = React.memo(() => {
sortOrder,
sortBy
};
dispatch(getAllApplications(filterParams,(err,data) => {
if(data){
dispatch(getAllApplications(filterParams,() => {
dispatch(setApplicationLoading(false));
}
}));
}, [page,limit,sortBy,sortOrder,searchParams]);

Expand Down
Loading

0 comments on commit 978e865

Please sign in to comment.