diff --git a/forms-flow-web/src/_tests_/test-components/test-application/test-details/nodata.test.js b/forms-flow-web/src/_tests_/test-components/test-application/test-details/nodata.test.js deleted file mode 100644 index c7f7518453..0000000000 --- a/forms-flow-web/src/_tests_/test-components/test-application/test-details/nodata.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from "react"; -import { render, screen } from "@testing-library/react"; -import Nodata from "../../../../components/Application/nodata"; - -test("render Nodata", () => { - render(); - expect(screen.getByText("No submissions found")); -}); diff --git a/forms-flow-web/src/components/Application/List.js b/forms-flow-web/src/components/Application/List.js index a84af5e61b..7a6569f635 100644 --- a/forms-flow-web/src/components/Application/List.js +++ b/forms-flow-web/src/components/Application/List.js @@ -1,53 +1,25 @@ -/* eslint-disable */ -import React, { useEffect, useRef } from "react"; +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 "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css"; import { - setApplicationListActivePage, - setCountPerpage, - setApplicationListLoader, + setApplicationLoading, } from "../../actions/applicationActions"; import { getAllApplications, - FilterApplications, getAllApplicationStatus, } from "../../apiManager/services/applicationServices"; -import Loading from "../../containers/Loading"; -import Nodata from "./nodata"; -import { useTranslation } from "react-i18next"; -import { columns, getoptions, defaultSortedBy } from "./table"; -import { getUserRolePermission } from "../../helper/user"; -import { - CLIENT, +import Loading from "../../containers/Loading"; +import { DRAFT_ENABLED, - MULTITENANCY_ENABLED, - STAFF_REVIEWER, -} from "../../constants/constants"; -import { CLIENT_EDIT_STATUS } from "../../constants/applicationConstants"; -import Alert from "react-bootstrap/Alert"; -import { Translation } from "react-i18next"; - -import overlayFactory from "react-bootstrap-table2-overlay"; -import { SpinnerSVG } from "../../containers/SpinnerSVG"; + MULTITENANCY_ENABLED, +} from "../../constants/constants"; + import Head from "../../containers/Head"; import { push } from "connected-react-router"; -import isValiResourceId from "../../helper/regExp/validResourceId"; -import ApplicationTable from "./ApplicationTable"; + import ApplicationTable from "./ApplicationTable"; export const ApplicationList = React.memo(() => { - const { t } = useTranslation(); - const applications = useSelector( - (state) => state.applications.applicationsList - ); - const countPerPage = useSelector((state) => state.applications.countPerPage); - const applicationStatus = useSelector( - (state) => state.applications.applicationStatus - ); + const isApplicationListLoading = useSelector( (state) => state.applications.isApplicationListLoading ); @@ -59,20 +31,10 @@ export const ApplicationList = React.memo(() => { const searchParams = useSelector((state) => state.applications?.searchParams); const draftCount = useSelector((state) => state.draft.draftCount); const dispatch = useDispatch(); - const userRoles = useSelector((state) => state.user.roles); - const page = useSelector((state) => state.applications.activePage); - const iserror = useSelector((state) => state.applications.iserror); - const error = useSelector((state) => state.applications.error); - const [filtermode, setfiltermode] = React.useState(false); - const tenantKey = useSelector((state) => state.tenants?.tenantId); - const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/"; - const [lastModified, setLastModified] = React.useState(null); - const [isLoading, setIsLoading] = React.useState(false); - const [invalidFilters, setInvalidFilters] = React.useState({}); - - useEffect(() => { - setIsLoading(false); - }, [applications]); + const page = useSelector((state) => state.applications.activePage); + const tenantKey = useSelector((state) => state.tenants?.tenantId); + const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/"; + useEffect(() => { dispatch(getAllApplicationStatus()); @@ -91,75 +53,12 @@ export const ApplicationList = React.memo(() => { })); }, [page,limit,sortBy,sortOrder,searchParams]); - const isClientEdit = (applicationStatus) => { - if ( - getUserRolePermission(userRoles, CLIENT) || - getUserRolePermission(userRoles, STAFF_REVIEWER) - ) { - return CLIENT_EDIT_STATUS.includes(applicationStatus); - } else { - return false; - } - }; + if (isApplicationListLoading) { return ; - } - const getNoDataIndicationContent = () => { - return ( -
- -
- -
-
- ); - }; - - const validateFilters = (newState) => { - if ( - newState.filters?.id?.filterVal && - !isValiResourceId(newState.filters?.id?.filterVal) - ) { - return setInvalidFilters({ ...invalidFilters, APPLICATION_ID: true }); - } else { - return setInvalidFilters({ ...invalidFilters, APPLICATION_ID: false }); - } - }; - - const handlePageChange = (type, newState) => { - validateFilters(newState); - if (type === "filter") { - setfiltermode(true); - } else if (type === "pagination") { - if (countPerPage > 5) { - dispatch(setApplicationListLoader(true)); - } else { - setIsLoading(true); - } - } - dispatch(setCountPerpage(newState.sizePerPage)); - // dispatch(FilterApplications(newState)); - dispatch(setApplicationListActivePage(newState.page)); - }; - - const listApplications = (applications) => { - let totalApplications = applications.map((application) => { - application.isClientEdit = isClientEdit(application.applicationStatus); - return application; - }); - return totalApplications; - }; + } + const headerList = () => { return [ diff --git a/forms-flow-web/src/components/Application/nodata.js b/forms-flow-web/src/components/Application/nodata.js deleted file mode 100644 index ced34e764d..0000000000 --- a/forms-flow-web/src/components/Application/nodata.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; -import { Translation } from "react-i18next"; - -const Nodata = React.memo((props) => ( -
- -
-
- -
-
-)); - -export default Nodata; diff --git a/forms-flow-web/src/components/Application/table.js b/forms-flow-web/src/components/Application/table.js deleted file mode 100644 index a6e1f000ef..0000000000 --- a/forms-flow-web/src/components/Application/table.js +++ /dev/null @@ -1,313 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import startCase from "lodash/startCase"; -import { - textFilter, - selectFilter, - customFilter, - FILTER_TYPES, -} from "react-bootstrap-table2-filter"; -import { AWAITING_ACKNOWLEDGEMENT } from "../../constants/applicationConstants"; -import { Translation } from "react-i18next"; -import DateRangePicker from "@wojtekmaj/react-daterange-picker"; -import DropdownButton from "react-bootstrap/DropdownButton"; -import Dropdown from "react-bootstrap/Dropdown"; -import { toast } from "react-toastify"; -import { HelperServices} from "@formsflow/service"; - -let statusFilter, idFilter, nameFilter, modifiedDateFilter; - -export const defaultSortedBy = [ - { - dataField: "id", - order: "desc", // or desc - }, -]; - -const getApplicationStatusOptions = (rows) => { - const selectOptions = rows.map((option) => { - return { value: option, label: option }; - }); - return selectOptions; -}; - -const linkApplication = (cell, row, redirectUrl) => { - return ( - - {cell} - - ); -}; - -const linkSubmission = (cell, row, redirectUrl) => { - // here isResubmit key is also checked for "url" and "buttonText" - const url = row.isClientEdit || row.isResubmit - ? `${redirectUrl}form/${row.formId}/submission/${row.submissionId}/edit` - : `${redirectUrl}form/${row.formId}/submission/${row.submissionId}`; - const buttonText = row.isClientEdit || row.isResubmit ? ( - row.applicationStatus === AWAITING_ACKNOWLEDGEMENT ? ( - "Acknowledge" - ) : ( - {(t) => t("Edit")} - ) - ) : ( - {(t) => t("View")} - ); - const icon = row.isClientEdit || row.isResubmit ? "fa fa-edit" : "fa fa-eye"; - return ( -
window.open(url, "_blank")}> - - - -   - - {buttonText} - -
- ); -}; - -function timeFormatter(cell) { - const localdate = HelperServices?.getLocalDateAndTime(cell); - return ; -} - -const nameFormatter = (cell) => { - const name = startCase(cell); - return ( - - ); -}; - -const customStyle = { border: "1px solid #ced4da", fontStyle: "normal" }; - -const styleForValidationFail = { border: "1px solid red" }; - -export const columns_history = [ - { - dataField: "applicationname", - text: {(t) => t("Form Name")}, - sort: true, - }, - { - dataField: "applicationstatus", - text: {(t) => t("Submission Status")}, - sort: true, - }, -]; - -let applicationNotified = false; -const notifyValidationError = () => { - if (!applicationNotified) { - toast.error("Invalid submission id"); - applicationNotified = true; - } -}; - -export const columns = ( - applicationStatus, - lastModified, - callback, - t, - redirectUrl, - invalidFilters -) => { - if (invalidFilters.APPLICATION_ID) { - notifyValidationError(); - } else { - applicationNotified = false; - } - return [ - { - dataField: "id", - text: {(t) => t("Submission ID")}, - formatter: (cell, row) => linkApplication(cell, row, redirectUrl), - headerClasses: "classApplicationId", - sort: true, - filter: textFilter({ - delay: 800, - placeholder: `\uf002 ${t("Submission ID")}`, // custom the input placeholder - caseSensitive: false, // default is false, and true will only work when comparator is LIKE - className: "icon-search", - style: invalidFilters.APPLICATION_ID - ? styleForValidationFail - : customStyle, - getFilter: (filter) => { - idFilter = filter; - }, - }), - headerAttrs: { id: "th-application-id" } - }, - { - dataField: "applicationName", - text: {(t) => t("Form Name")}, - sort: true, - headerClasses: "classApplicationName", - formatter: nameFormatter, - filter: textFilter({ - delay: 800, - placeholder: `\uf002 ${t("Form Name")}`, // custom the input placeholder - caseSensitive: false, // default is false, and true will only work when comparator is LIKE - className: "icon-search", - style: customStyle, - getFilter: (filter) => { - nameFilter = filter; - }, - }), - headerAttrs: { id: "th-application-name" } - }, - { - dataField: "applicationStatus", - text: {(t) => t("Submission Status")}, - sort: true, - filter: - applicationStatus?.length > 0 && - selectFilter({ - options: getApplicationStatusOptions(applicationStatus), - style: customStyle, - placeholder: `${t("All")}`, - defaultValue: `${t("All")}`, - caseSensitive: false, // default is false, and true will only work when comparator is LIKE - getFilter: (filter) => { - statusFilter = filter; - }, - }), - headerAttrs: { id: "th-application-status" } - }, - { - dataField: "formUrl", - text: {(t) => t("Link To Form Submission")}, - formatter: (cell, row) => linkSubmission(cell, row, redirectUrl), - headerClasses: "classLinkToApplication", - headerAttrs: { id: "th-Link-to-application" } - }, - - { - dataField: "modified", - text: {(t) => t("Last Modified")}, - formatter: timeFormatter, - sort: true, - headerAttrs: { id: "th-modified" }, - filter: customFilter({ - type: FILTER_TYPES.DATE, - }), - // eslint-disable-next-line no-unused-vars - filterRenderer: (onFilter, column) => { - return ( - { - callback(selectedRange); - onFilter(selectedRange); - }} - value={lastModified} - maxDate={new Date()} - minDate={new Date("January 1, 0999 01:01:00")} - dayPlaceholder="dd" - monthPlaceholder="mm" - yearPlaceholder="yyyy" - calendarAriaLabel={t("Select the date")} - dayAriaLabel="Select the day" - clearAriaLabel="Click to clear" - name="selectDateRange" - monthAriaLabel="Select the month" - yearAriaLabel="Select the year" - nativeInputAriaLabel="Date" - /> - ); - }, - }, - ]; -}; - -const customTotal = (from, to, size) => ( - - {(t) => t("Showing")} {from}{" "} - {(t) => t("to")} {to}{" "} - {(t) => t("of")} {size}{" "} - {(t) => t("results")} - -); -export const customDropUp = ({ - options, - currSizePerPage, - onSizePerPageChange, -}) => { - return ( - - {options.map((option) => ( - onSizePerPageChange(option.page)} - > - {option.text} - - ))} - - ); -}; -const getpageList = (count) => { - const list = [ - { - text: "5", - value: 5, - }, - { - text: "25", - value: 25, - }, - { - text: "50", - value: 50, - }, - { - text: "100", - value: 100, - }, - { - text: "All", - value: count, - }, - ]; - return list; -}; - -export const getoptions = (count, page, countPerPage) => { - return { - expandRowBgColor: "rgb(173,216,230)", - pageStartIndex: 1, - alwaysShowAllBtns: true, // Always show next and previous button - withFirstAndLast: true, // Hide the going to First and Last page button - hideSizePerPage: false, // 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: countPerPage, - page: page, - totalSize: count, - sizePerPageList: getpageList(count), - sizePerPageRenderer: customDropUp, - }; -}; -export const clearFilter = () => { - statusFilter(""); - idFilter(""); - nameFilter(""); - modifiedDateFilter(""); -}; diff --git a/forms-flow-web/src/components/Draft/List.js b/forms-flow-web/src/components/Draft/List.js index 6ea6ea3716..609fef67db 100644 --- a/forms-flow-web/src/components/Draft/List.js +++ b/forms-flow-web/src/components/Draft/List.js @@ -1,8 +1,6 @@ import React, { useEffect } from "react"; -import { useDispatch, useSelector } from "react-redux"; - -import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css"; +import { useDispatch, useSelector } from "react-redux"; import Loading from "../../containers/Loading"; import { useTranslation } from "react-i18next"; import { MULTITENANCY_ENABLED } from "../../constants/constants"; diff --git a/forms-flow-web/src/components/Draft/table.js b/forms-flow-web/src/components/Draft/table.js deleted file mode 100644 index b49b5c14ea..0000000000 --- a/forms-flow-web/src/components/Draft/table.js +++ /dev/null @@ -1,237 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import startCase from "lodash/startCase"; -import { - textFilter, - customFilter, - FILTER_TYPES, -} from "react-bootstrap-table2-filter"; -import { Translation } from "react-i18next"; -import DateRangePicker from "@wojtekmaj/react-daterange-picker"; -import DropdownButton from "react-bootstrap/DropdownButton"; -import Dropdown from "react-bootstrap/Dropdown"; -import { toast } from "react-toastify"; -import DraftOperations from "./DraftOperations"; -import { HelperServices} from "@formsflow/service"; - - -let statusFilter, idFilter, nameFilter, modifiedDateFilter; - -export const defaultSortedBy = [ - { - dataField: "id", - order: "desc", // or desc - }, -]; - -const linkDraftDetail = (cell, row, redirectUrl) => { - return ( - - {cell} - - ); -}; - -function timeFormatter(cell) { - const localdate = HelperServices?.getLocalDateAndTime(cell); - return ; -} - -const nameFormatter = (cell) => { - const name = startCase(cell); - return ( - - ); -}; -const customStyle = { border: "1px solid #ced4da", fontStyle: "normal" }; -const styleForValidationFail = { border: "1px solid red" }; - -let draftNotified = false; -const notifyValidationError = () => { - if (!draftNotified) { - toast.error("Invalid draft id"); - draftNotified = true; - } -}; -export const columns = ( - lastModified, - callback, - t, - redirectUrl, - invalidFilters -) => { - if (invalidFilters.DRAFT_ID) { - notifyValidationError(); - } else { - draftNotified = false; - } - return [ - { - dataField: "id", - text: {(t) => t("Draft Id")}, - formatter: (cell, row) => linkDraftDetail(cell, row, redirectUrl), - headerClasses: "classApplicationId", - sort: true, - filter: textFilter({ - delay: 800, - placeholder: `\uf002 ${t("Draft Id")}`, // custom the input placeholder - caseSensitive: false, // default is false, and true will only work when comparator is LIKE - className: "icon-search", - style: invalidFilters.DRAFT_ID ? styleForValidationFail : customStyle, - getFilter: (filter) => { - idFilter = filter; - }, - }), - }, - { - dataField: "DraftName", - text: {(t) => t("Draft Name")}, - sort: true, - headerClasses: "classApplicationName", - formatter: nameFormatter, - filter: textFilter({ - delay: 800, - placeholder: `\uf002 ${t("Draft Name")}`, // custom the input placeholder - caseSensitive: false, // default is false, and true will only work when comparator is LIKE - className: "icon-search", - style: customStyle, - getFilter: (filter) => { - nameFilter = filter; - }, - }), - headerStyle: () => { - return { width: "40%" }; - }, - }, - { - dataField: "formUrl", - text: {(t) => t("Action")}, - formatter: (cell,row) => , - headerStyle: () => { - return { width: "20%" }; - }, - }, - - { - dataField: "modified", - text: {(t) => t("Last Modified")}, - formatter: timeFormatter, - sort: true, - filter: customFilter({ - type: FILTER_TYPES.DATE, - }), - // eslint-disable-next-line no-unused-vars - filterRenderer: (onFilter, column) => { - return ( - { - callback(selectedRange); - onFilter(selectedRange); - }} - value={lastModified} - maxDate={new Date()} - dayPlaceholder="dd" - monthPlaceholder="mm" - yearPlaceholder="yyyy" - calendarAriaLabel={t("Select the date")} - dayAriaLabel="Select the day" - clearAriaLabel="Click to clear" - name="selectDateRange" - monthAriaLabel="Select the month" - yearAriaLabel="Select the year" - nativeInputAriaLabel="Date" - /> - ); - }, - }, - ]; -}; - -const customTotal = (from, to, size) => ( - - {(t) => t("Showing")} {from}{" "} - {(t) => t("to")} {to}{" "} - {(t) => t("of")} {size}{" "} - {(t) => t("results")} - -); -const customDropUp = ({ options, currSizePerPage, onSizePerPageChange }) => { - return ( - - {options.map((option) => ( - onSizePerPageChange(option.page)} - > - {option.text} - - ))} - - ); -}; -const getpageList = (count) => { - const list = [ - { - text: "5", - value: 5, - }, - { - text: "25", - value: 25, - }, - { - text: "50", - value: 50, - }, - { - text: "100", - value: 100, - }, - { - text: "All", - value: count, - }, - ]; - return list; -}; - -export const getoptions = (count, page, countPerPage) => { - return { - expandRowBgColor: "rgb(173,216,230)", - pageStartIndex: 1, - alwaysShowAllBtns: true, // Always show next and previous button - withFirstAndLast: true, // Hide the going to First and Last page button - hideSizePerPage: false, // 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: countPerPage, - page: page, - totalSize: count, - sizePerPageList: getpageList(count), - sizePerPageRenderer: customDropUp, - }; -}; -export const clearFilter = () => { - statusFilter(""); - idFilter(""); - nameFilter(""); - modifiedDateFilter(""); -}; diff --git a/forms-flow-web/src/single-spa-index.js b/forms-flow-web/src/single-spa-index.js index 75c13571eb..3c128a996e 100644 --- a/forms-flow-web/src/single-spa-index.js +++ b/forms-flow-web/src/single-spa-index.js @@ -7,8 +7,7 @@ import { featureFlags } from "./featureToogle"; import { FlagsProvider } from 'flagged'; import { Formio, Components } from "react-formio"; import { AppConfig } from "./config"; -import "react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css"; -import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css"; +import "react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css"; import "./resourceBundles/i18n.js"; if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") {