Skip to content

Commit

Permalink
History table (AOT-Technologies#1827)
Browse files Browse the repository at this point in the history 
* follow update uncheck fixed

* react-bootstrap table changed for application history

* file name change

---------

Co-authored-by: AbijithS-aot <[email protected]>
  • Loading branch information
@AbijithS-aot
AbijithS-aot and AbijithS-aot authored Jan 3, 2024
1 parent 6b642c2 commit 5d151fc
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 135 deletions.
64 changes: 5 additions & 59 deletions forms-flow-web/src/components/Application/ApplicationHistory.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,12 @@
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

import BootstrapTable from "react-bootstrap-table-next";
import filterFactory from "react-bootstrap-table2-filter";
import paginationFactory from "react-bootstrap-table2-paginator";
import ToolkitProvider from "react-bootstrap-table2-toolkit";
import LoadingOverlay from "react-loading-overlay-ts";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import { Translation, useTranslation } from "react-i18next";
import { Translation} from "react-i18next";
import { fetchApplicationAuditHistoryList } from "../../apiManager/services/applicationAuditServices";
import { columns_history, getoptions, defaultSortedBy } from "./historyTable";
import Loading from "../../containers/Loading";
import Nodata from "../../components/Nodata";
import { setUpdateHistoryLoader } from "../../actions/taskApplicationHistoryActions";
import { MULTITENANCY_ENABLED } from "../../constants/constants";
import HistoryTable from "./historyTable";

const HistoryList = React.memo((props) => {
const dispatch = useDispatch();
Expand All @@ -22,9 +15,6 @@ const HistoryList = React.memo((props) => {
);
const appHistory = useSelector((state) => state.taskAppHistory.appHistory);
const applicationId = props.applicationId;
const tenantKey = useSelector((state) => state.tenants?.tenantId);
const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
const { t } = useTranslation();
useEffect(() => {
dispatch(setUpdateHistoryLoader(true));
}, [dispatch]);
Expand All @@ -48,54 +38,10 @@ const HistoryList = React.memo((props) => {
if (isHistoryListLoading) {
return <Loading />;
}

const getNoDataIndicationContent = () => {
return (
<div className="div-no-task">
<label className="lbl-no-task">
{" "}
<Translation>{(t) => t("No History Found")}</Translation>{" "}
</label>
<br />
</div>
);
};

return appHistory.length > 0 ? (
<ToolkitProvider
keyField="created"
data={appHistory}
columns={columns_history(redirectUrl)}
search
>
{(props) => (
<div className="">
<div className="main-header">
<h3 className="task-head">
<i className="fa fa-list me-2" aria-hidden="true" />
&nbsp;<Translation>{(t) => t("Submission History")}</Translation>
</h3>
</div>
<br />
<div>
<LoadingOverlay
active={isHistoryListLoading}
spinner
text={t("Loading...")}
>
<BootstrapTable
loading={isHistoryListLoading}
filter={filterFactory()}
pagination={paginationFactory(getoptions(appHistory.length))}
defaultSorted={defaultSortedBy}
{...props.baseProps}
noDataIndication={() => getNoDataIndicationContent()}
/>
</LoadingOverlay>
</div>
</div>
)}
</ToolkitProvider>
<>
<HistoryTable/>
</>
) : (
<Nodata
text={
Expand Down
160 changes: 84 additions & 76 deletions forms-flow-web/src/components/Application/historyTable.js
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,93 @@
import React from "react";
import {
getFormUrl,
} from "../../apiManager/services/formatterService";
import { useSelector } from "react-redux";
import { MULTITENANCY_ENABLED } from "../../constants/constants";
import { HelperServices } from "@formsflow/service";
import { Translation } from "react-i18next";
import { HelperServices} from "@formsflow/service";
import { useTranslation } from "react-i18next";
import { getFormUrl } from "../../apiManager/services/formatterService";

const HistoryTable = () => {
const appHistory = useSelector((state) => state.taskAppHistory.appHistory);
const { t } = useTranslation();

export const defaultSortedBy = [
{
dataField: "name",
order: "asc", // or desc
},
];
const tenantKey = useSelector((state) => state.tenants?.tenantId);
const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";

const linkSubmision = (row, redirectUrl) => {
const { formId, submissionId } = row;
const url = getFormUrl(formId, submissionId, redirectUrl);
return (
<div onClick={() => window.open(url, "_blank")}>
<span className="btn btn-primary btn-sm form-btn" data-testid="submission-viewsubmission-button" >
<span>
<i className="fa fa-eye" aria-hidden="true"></i>&nbsp;
</span>
const viewSubmission = (data) => {
const { formId, submissionId } = data;
const url = getFormUrl(formId, submissionId, redirectUrl);
return (
<button
data-testid={`submission-details-button-${data.id}`}
className="btn btn-primary"
onClick={() => window.open(url, "_blank")}
>
<Translation>{(t) => t("View Submission")}</Translation>
</span>
</div>
);
};

function timeFormatter(cell) {
const localDate = HelperServices?.getLocalDateAndTime(cell);
return <label title={cell}>{localDate}</label>;
}

// History table columns
export const columns_history = (redirectUrl) => [
{
dataField: "applicationStatus",
text: <Translation>{(t) => t("Status")}</Translation>,
sort: true,
},
{
dataField: "created",
text: <Translation>{(t) => t("Created")}</Translation>,
sort: true,
formatter: timeFormatter,
},
{
dataField: "submittedBy",
text: <Translation>{(t) => t("Submitted By")}</Translation>,
sort: true,
},
{
dataField: "formId",
text: <Translation>{(t) => t("Submissions")}</Translation>,
formatter: (cell, row) => linkSubmision(row, redirectUrl),
},
];
const customTotal = (from, to, size) => (
<span className="react-bootstrap-table-pagination-total" role="main">
<Translation>{(t) => t("Showing")}</Translation> {from}{" "}
<Translation>{(t) => t("to")}</Translation> {to}{" "}
<Translation>{(t) => t("of")}</Translation> {size} <Translation>{(t) => t("results")}</Translation>
</span>
);
</button>
);
};

export const getoptions = (count) => {
return {
expandRowBgColor: "rgb(173,216,230)",
pageStartIndex: 1,
alwaysShowAllBtns: true, // Always show next and previous button
withFirstAndLast: false, // Hide the going to First and Last page button
hideSizePerPage: true, // Hide the sizePerPage dropdown always
// hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
paginationSize: 7, // the pagination bar size.
prePageText: "<<",
nextPageText: ">>",
showTotal: true,
Total: count,
paginationTotalRenderer: customTotal,
disablePageTitle: true,
sizePerPage: 5,
const getNoDataIndicationContent = () => {
return (
<div className="div-no-application bg-transparent">
<label className="lbl-no-application">
{" "}
<Translation>{(t) => t("No submissions found")}</Translation>{" "}
</label>
<br />
<label className="lbl-no-application-desc">
{" "}
<Translation>
{(t) =>
t("No History Found")
}
</Translation>
</label>
<br />
</div>
);
};

return (
<>
<div className="main-header">
<h3 className="task-head">
<i className="fa fa-list me-2" aria-hidden="true" />
&nbsp;<Translation>{(t) => t("Submission History")}</Translation>
</h3>
</div>
<table className="table">
<thead>
<tr>
<th>{t("Status")} </th>
<th>{t("Created")}</th>
<th>{t("Submitted By")}</th>
<th>{t("Submissions")}</th>
</tr>
</thead>
<tbody>
{appHistory.length ? (
appHistory?.map((e) => {
return (
<tr key={e.id}>
<td>{e.applicationStatus}</td>
<td>
{HelperServices?.getLocalDateAndTime(e.created)}
</td>
<td>{e.submittedBy}</td>
<td>{viewSubmission(e)}</td>
</tr>
);
})
) : (
<td colSpan="6" className="text-center">
{getNoDataIndicationContent()}
</td>
)}
</tbody>
</table>
</>
);
};

export default HistoryTable;

0 comments on commit 5d151fc

Please sign in to comment.