Skip to content

Commit 4d92e47

Browse files
Ajay-aotAjay-aot
authored
Merge branch 'develop' into FWF-5402/extra-buttons-in-designer-listing-page
2 parents 9454d97 + 1e946a0 commit 4d92e47

File tree

5 files changed

+82
-218
lines changed

5 files changed

+82
-218
lines changed

‎forms-flow-web/src/components/Form/constants/ClientTable.js‎

Lines changed: 17 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
import React, { useState, useCallback } from "react";
1+
import React, { useState } from "react";
22
import { useDispatch, useSelector } from "react-redux";
3-
import { DataGrid } from "@mui/x-data-grid";
4-
import Paper from "@mui/material/Paper";
53
import {
64
setClientFormLimit,
75
setClientFormListPage,
@@ -11,13 +9,14 @@ import { HelperServices, StyleServices } from "@formsflow/service";
119
import { useTranslation } from "react-i18next";
1210
import {
1311
V8CustomButton,
14-
NewSortDownIcon,
15-
RefreshIcon
12+
RefreshIcon,
13+
ReusableTable
1614
} from "@formsflow/components";
1715
import { navigateToFormEntries } from "../../../helper/routerHelper";
1816
import SubmissionDrafts from "../../../routes/Submit/Forms/DraftAndSubmissions";
1917
import { fetchBPMFormList } from "../../../apiManager/services/bpmFormServices";
20-
import { setFormSearchLoading } from "../../../actions/checkListActions";
18+
import { setFormSearchLoading } from "../../../actions/checkListActions";
19+
2120

2221
function ClientTable() {
2322
const dispatch = useDispatch();
@@ -175,54 +174,20 @@ function ClientTable() {
175174
const activeField = sortKeyToGridField[activeKey] || activeKey;
176175
const activeOrder = formsort?.[activeKey]?.sortOrder || "asc";
177176

178-
const renderDescIcon = useCallback(() => (
179-
<div>
180-
<NewSortDownIcon color={iconColor} />
181-
</div>
182-
), [iconColor]);
183-
184-
const renderAscIcon = useCallback(() => (
185-
<div style={{ transform: "rotate(180deg)" }}>
186-
<NewSortDownIcon color={iconColor} />
187-
</div>
188-
), [iconColor]);
189-
190-
191177
return (
192178
<>
193-
<Paper sx={{ height: { sm: 400, md: 510, lg: 665 }, width: "100%" }}>
194-
<DataGrid
195-
columns={columns}
196-
rows={rows}
197-
rowCount={totalForms}
198-
loading={searchFormLoading}
199-
paginationMode="server"
200-
sortingMode="server"
201-
disableColumnMenu
202-
sortModel={[{ field: activeField, sort: activeOrder }]}
203-
onSortModelChange={handleSortChange}
204-
paginationModel={paginationModel}
205-
onPaginationModelChange={onPaginationModelChange}
206-
pageSizeOptions={[10, 25, 50, 100]}
207-
rowHeight={55}
208-
disableRowSelectionOnClick
209-
getRowId={(row) => row.id}
210-
slots={{
211-
columnSortedDescendingIcon: renderDescIcon,
212-
columnSortedAscendingIcon: renderAscIcon,
213-
}}
214-
slotProps={{
215-
loadingOverlay: {
216-
217-
variant: "skeleton",
218-
noRowsVariant: "skeleton",
219-
},
220-
}}
221-
localeText={{
222-
noRowsLabel: t("No Forms have been found."),
223-
}}
224-
/>
225-
</Paper>
179+
<ReusableTable
180+
columns={columns}
181+
rows={rows}
182+
rowCount={totalForms}
183+
loading={searchFormLoading}
184+
sortModel={[{ field: activeField, sort: activeOrder }]}
185+
onSortModelChange={handleSortChange}
186+
paginationModel={paginationModel}
187+
onPaginationModelChange={onPaginationModelChange}
188+
getRowId={(row) => row.id}
189+
noRowsLabel={t("No Forms have been found.")}
190+
/>
226191
{showSubmissions && <SubmissionDrafts />}
227192
</>
228193
);

‎forms-flow-web/src/components/Form/constants/FormTable.js‎

Lines changed: 17 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import * as React from "react";
22
import { useSelector, useDispatch } from "react-redux";
3-
import { DataGrid } from "@mui/x-data-grid";
4-
import Paper from "@mui/material/Paper";
53
import { useTranslation } from "react-i18next";
64
import { push } from "connected-react-router";
75
import { setBPMFormLimit, setBPMFormListPage, setBpmFormSort, setFormDeleteStatus } from "../../../actions/formActions";
@@ -11,7 +9,7 @@ import { setFormSearchLoading } from "../../../actions/checkListActions";
119
import userRoles from "../../../constants/permissions";
1210
import { HelperServices, StyleServices } from "@formsflow/service";
1311
import { MULTITENANCY_ENABLED } from "../../../constants/constants";
14-
import { V8CustomButton, RefreshIcon, NewSortDownIcon, V8CustomDropdownButton, PromptModal } from "@formsflow/components";
12+
import { V8CustomButton, RefreshIcon, V8CustomDropdownButton, PromptModal, ReusableTable } from "@formsflow/components";
1513
import { deleteForm } from "@aot-technologies/formio-react";
1614
import { formCreate } from "../../../apiManager/services/FormServices";
1715
import { manipulatingFormData } from "../../../apiManager/services/formFormatterService";
@@ -343,53 +341,26 @@ const viewOrEditForm = (formId, path) => {
343341
id: f._id || f.path || f.name,
344342
})).filter(r => r.id);
345343
}, [formData]);
344+
346345
const paginationModel = React.useMemo(
347346
() => ({ page: pageNo - 1, pageSize: limit }),
348347
[pageNo, limit]
349348
);
350349

351-
352350
return (
353-
<>
354-
<Paper sx={{ height: {sm: 400, md: 510, lg: 665}, width: "100%" }}>
355-
<DataGrid
356-
disableColumnResize // disabed resizing
357-
columns={columns}
358-
rows={rows}
359-
rowCount={totalForms}
360-
loading={searchFormLoading || isApplicationCountLoading}
361-
paginationMode="server"
362-
sortingMode="server"
363-
disableColumnMenu
364-
sortModel={[{ field: activeField, sort: activeOrder }]}
365-
onSortModelChange={handleSortChange}
366-
paginationModel={paginationModel}
367-
getRowId={(row) => row.id}
368-
onPaginationModelChange={onPaginationModelChange}
369-
pageSizeOptions={[10, 25, 50, 100]}
370-
rowHeight={55}
371-
disableRowSelectionOnClick
372-
slots={{
373-
columnSortedDescendingIcon: () => (
374-
<div>
375-
<NewSortDownIcon color={iconColor} />
376-
</div>
377-
),
378-
columnSortedAscendingIcon: () => (
379-
<div style={{ transform: "rotate(180deg)" }}>
380-
<NewSortDownIcon color={iconColor} />
381-
</div>
382-
),
383-
// columnUnsortedIcon: RefreshIcon,
384-
}}
385-
slotProps={{
386-
loadingOverlay: {
387-
variant: 'skeleton',
388-
noRowsVariant: 'skeleton',
389-
},
390-
}}
391-
/>
392-
</Paper>
351+
<>
352+
<ReusableTable
353+
354+
columns={columns}
355+
rows={rows}
356+
rowCount={totalForms}
357+
loading={searchFormLoading || isApplicationCountLoading}
358+
sortModel={[{ field: activeField, sort: activeOrder }]}
359+
onSortModelChange={handleSortChange}
360+
paginationModel={paginationModel}
361+
onPaginationModelChange={onPaginationModelChange}
362+
getRowId={(row) => row.id}
363+
/>
393364
<PromptModal
394365
show={showDeleteModal}
395366
onClose={handleCloseDelete}
@@ -401,8 +372,8 @@ const viewOrEditForm = (formId, path) => {
401372
primaryBtnDisable={disableDelete}
402373
secondaryBtnText={t("Cancel")}
403374
secondaryBtnAction={handleCloseDelete}
404-
/>
405-
</>
375+
/>
376+
</>
406377
);
407378
}
408379

‎forms-flow-web/src/components/Form/constants/SubmissionsAndDraftTable.js‎

Lines changed: 19 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {useState, useEffect, useCallback} from "react";
1+
import React, {useState, useEffect} from "react";
22
import { useDispatch, useSelector } from "react-redux";
33
import { selectRoot } from "@aot-technologies/formio-react";
44
import { CLIENT_EDIT_STATUS } from "../../../constants/applicationConstants";
@@ -8,17 +8,16 @@ import {
88
setFormSubmissionSort,
99
} from "../../../actions/applicationActions";
1010
import { useTranslation } from "react-i18next";
11-
import { PromptModal, V8CustomButton, NewSortDownIcon, RefreshIcon } from "@formsflow/components";
11+
import { PromptModal, V8CustomButton, RefreshIcon, ReusableTable } from "@formsflow/components";
1212
import { toast } from "react-toastify";
1313
import { deleteDraftbyId } from "../../../apiManager/services/draftService";
1414
import { navigateToDraftEdit, navigateToViewSubmission, navigateToResubmit } from "../../../helper/routerHelper";
1515
import PropTypes from "prop-types";
1616
import { HelperServices, StyleServices } from "@formsflow/service";
17-
import { DataGrid } from "@mui/x-data-grid";
18-
import Paper from "@mui/material/Paper";
1917

2018
const SubmissionsAndDraftTable = ({ fetchSubmissionsAndDrafts }) => {
2119
const tenantKey = useSelector((state) => state.tenants?.tenantId);
20+
const iconColor = StyleServices.getCSSVariable("--ff-gray-medium-dark");
2221
const dispatch = useDispatch();
2322
const { t } = useTranslation();
2423
const {
@@ -38,7 +37,6 @@ const SubmissionsAndDraftTable = ({ fetchSubmissionsAndDrafts }) => {
3837
const [showDeleteModal, setShowDeleteModal] = useState(false);
3938
const [deleteDraftId, setDeleteDraftId] = useState('');
4039
const [isDeletionLoading, setIsDeletionLoading] = useState(false);
41-
const iconColor = StyleServices.getCSSVariable("--ff-gray-medium-dark");
4240

4341
const gridFieldToSortKey = {
4442
id: "id",
@@ -244,38 +242,21 @@ const SubmissionsAndDraftTable = ({ fetchSubmissionsAndDrafts }) => {
244242
const activeField = sortKeyToGridField[activeKey] || activeKey;
245243
const activeOrder = applicationSort?.[activeKey]?.sortOrder || "asc";
246244

247-
const renderDescIcon = useCallback(() => (
248-
<div>
249-
<NewSortDownIcon color={iconColor} />
250-
</div>
251-
), [iconColor]);
252-
253-
const renderAscIcon = useCallback(() => (
254-
<div style={{ transform: "rotate(180deg)" }}>
255-
<NewSortDownIcon color={iconColor} />
256-
</div>
257-
), [iconColor]);
258-
259245
return (
260246
<>
261-
<Paper sx={{ height: { sm: 400, md: 510, lg: 665 }, width: "100%" }}>
262-
<DataGrid
263-
columns={columns}
264-
rows={rows}
265-
rowCount={totalForms}
266-
loading={isApplicationLoading || searchFormLoading}
267-
paginationMode="server"
268-
sortingMode="server"
269-
disableColumnMenu
270-
sortModel={[{ field: activeField, sort: activeOrder }]}
271-
onSortModelChange={handleSortChange}
272-
paginationModel={paginationModel}
273-
onPaginationModelChange={onPaginationModelChange}
274-
pageSizeOptions={[10, 25, 50, 100]}
275-
rowHeight={55}
276-
disableRowSelectionOnClick
277-
getRowId={(row) => row.id}
278-
sx={{
247+
<ReusableTable
248+
columns={columns}
249+
rows={rows}
250+
rowCount={totalForms}
251+
loading={isApplicationLoading || searchFormLoading}
252+
sortModel={[{ field: activeField, sort: activeOrder }]}
253+
onSortModelChange={handleSortChange}
254+
paginationModel={paginationModel}
255+
onPaginationModelChange={onPaginationModelChange}
256+
getRowId={(row) => row.id}
257+
noRowsLabel={t("No Entries have been found.")}
258+
dataGridProps={{
259+
sx: {
279260
"& .MuiDataGrid-columnHeader--sortable": {
280261
"& .MuiDataGrid-iconButtonContainer": {
281262
visibility: "visible",
@@ -284,22 +265,9 @@ const SubmissionsAndDraftTable = ({ fetchSubmissionsAndDrafts }) => {
284265
opacity: 0.3,
285266
},
286267
},
287-
}}
288-
slots={{
289-
columnSortedDescendingIcon: renderDescIcon,
290-
columnSortedAscendingIcon: renderAscIcon,
291-
}}
292-
slotProps={{
293-
loadingOverlay: {
294-
variant: "skeleton",
295-
noRowsVariant: "skeleton",
296-
},
297-
}}
298-
localeText={{
299-
noRowsLabel: t("No Entries have been found."),
300-
}}
301-
/>
302-
</Paper>
268+
},
269+
}}
270+
/>
303271
<PromptModal
304272
show={showDeleteModal}
305273
onClose={handleCloseActionModal}

‎forms-flow-web/src/routes/Design/Process/ProcessTable.js‎

Lines changed: 19 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,9 @@ import {
66
V8CustomDropdownButton,
77
BuildModal,
88
RefreshIcon,
9-
NewSortDownIcon,
10-
9+
ReusableTable
1110
} from "@formsflow/components";
1211
import { useTranslation } from "react-i18next";
13-
import { DataGrid } from '@mui/x-data-grid';
14-
import Paper from "@mui/material/Paper";
1512
import { useParams } from "react-router-dom";
1613
import { fetchAllProcesses } from "../../../apiManager/services/processServices";
1714
import { MULTITENANCY_ENABLED } from "../../../constants/constants";
@@ -25,7 +22,7 @@ import {
2522
setDmnSort
2623
} from "../../../actions/processActions";
2724
import userRoles from "../../../constants/permissions";
28-
import { HelperServices,StyleServices } from "@formsflow/service";
25+
import { HelperServices, StyleServices } from "@formsflow/service";
2926
import {
3027
navigateToSubflowBuild,
3128
navigateToDecisionTableBuild,
@@ -359,50 +356,23 @@ const ProcessTable = React.memo(() => {
359356
/>
360357
</div>
361358
</div>
362-
<Paper sx={{ height: { sm: 400, md: 510, lg: 510 }, width: "100%" }}>
363-
<DataGrid
364-
disableColumnResize // disabed resizing
365-
columns={columns}
366-
rows={processList}
367-
rowCount={totalCount}
368-
loading={searchLoading || isLoading}
369-
paginationMode="server"
370-
sortingMode="server"
371-
disableColumnMenu
372-
sortModel={[
373-
{
374-
field: sortConfig.activeKey,
375-
sort: sortConfig[sortConfig.activeKey].sortOrder,
376-
},
377-
]}
378-
onSortModelChange={handleSort}
379-
paginationModel={paginationModel}
380-
getRowId={(row) => row.id}
381-
onPaginationModelChange={onPaginationModelChange}
382-
pageSizeOptions={[10, 25, 50, 100]}
383-
rowHeight={55}
384-
disableRowSelectionOnClick
385-
slots={{
386-
columnSortedDescendingIcon: () => (
387-
<div>
388-
<NewSortDownIcon color={iconColor} />
389-
</div>
390-
),
391-
columnSortedAscendingIcon: () => (
392-
<div style={{ transform: "rotate(180deg)" }}>
393-
<NewSortDownIcon color={iconColor} />
394-
</div>
395-
),
396-
// columnUnsortedIcon: RefreshIcon,
397-
}}
398-
slotProps={{
399-
loadingOverlay: {
400-
variant: "skeleton",
401-
noRowsVariant: "skeleton",
402-
},
403-
}}
404-
/>
405-
</Paper>
359+
<ReusableTable
360+
columns={columns}
361+
rows={processList}
362+
rowCount={totalCount}
363+
loading={searchLoading || isLoading}
364+
sortModel={[
365+
{
366+
field: sortConfig.activeKey,
367+
sort: sortConfig[sortConfig.activeKey].sortOrder,
368+
},
369+
]}
370+
onSortModelChange={handleSort}
371+
paginationModel={paginationModel}
372+
onPaginationModelChange={onPaginationModelChange}
373+
getRowId={(row) => row.id}
374+
sx={{ height: { sm: 400, md: 510, lg: 510 }, width: "100%" }}
375+
/>
406376

407377
<BuildModal
408378
show={showBuildModal}

0 commit comments

Comments
 (0)