Skip to content

Commit

Permalink
fixed drop down issue in form table and process tab pagination issues (…
Browse files Browse the repository at this point in the history 
…#1715)

* button padding fix

* fixed drop down issue in form table and process tab pagination issues
  • Loading branch information
@shuhaib-aot
shuhaib-aot authored Nov 14, 2023
1 parent b38297e commit cee82e6
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 89 deletions.
19 changes: 11 additions & 8 deletions forms-flow-web/src/components/Form/Steps/PreviewStepper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -404,8 +404,9 @@ const Preview = React.memo(
</Popover>
)}
>
<Button id="addDesigner" className="btn btn-primary btn-md form-btn pull-left btn-left">
<Translation>{(t) => t("Add")}</Translation> <b>+</b>
<Button id="addDesigner" className="btn btn-primary btn-small">
<i className="fa-solid fa-plus mr-2"></i>
<Translation>{(t) => t("Add")}</Translation>
</Button>
</OverlayTrigger>
</div>
Expand All @@ -415,7 +416,7 @@ const Preview = React.memo(
</div>
<div>
<div>
<hr className="mt-1" />
<hr className="mt-3" />
<span
className="font-weight-bold"
title={t(
Expand Down Expand Up @@ -492,8 +493,9 @@ const Preview = React.memo(
</Popover>
)}
>
<Button id="addClient" className="btn btn-primary btn-md form-btn pull-left btn-left">
<Translation>{(t) => t("Add")}</Translation> <b>+</b>
<Button id="addClient" className="btn btn-primary btn-small ">
<i className="fa-solid fa-plus mr-2"></i>
<Translation>{(t) => t("Add")}</Translation>
</Button>
</OverlayTrigger>
</div>
Expand All @@ -504,7 +506,7 @@ const Preview = React.memo(

<div>
<div>
<hr className="mt-1" />
<hr className="mt-3" />
<span
className="font-weight-bold"
title={t("Permission for submission tracking.")}
Expand Down Expand Up @@ -584,8 +586,9 @@ const Preview = React.memo(
</Popover>
)}
>
<Button id="addReviewer" className="btn btn-primary btn-md form-btn pull-left btn-left">
<Translation>{(t) => t("Add")}</Translation> <b>+</b>
<Button id="addReviewer" className="btn btn-primary btn-small ">
<i className="fa-solid fa-plus mr-2"></i>
<Translation>{(t) => t("Add")}</Translation>
</Button>
</OverlayTrigger>
</div>
Expand Down
11 changes: 6 additions & 5 deletions forms-flow-web/src/components/Form/Steps/TaskvariableCreate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const TaskvariableCreate = ({ options, addTaskVariable }) => {
inputId="selectTaskVariable"
/>
</Col>
<Col xs={12} md={2}>
<Col xs={12} md={3}>
<label>{t("Label")}</label>
<input
type="text"
Expand All @@ -64,13 +64,14 @@ const TaskvariableCreate = ({ options, addTaskVariable }) => {
placeholder={t("Enter Label")}
/>
</Col>
<Col xs={12} md={2}>
<Col xs={12} md={3}>

<Form.Group controlId="showInListCheckbox" style={{ marginTop: "34px" }}>
<div className="d-flex align-items-center mt-3 mr-4">
<Form.Label className="mr-2">{t("Show in list")}</Form.Label>
<Form.Check
type="checkbox"

onChange={() => {
setShowInList(!showInList);
}}
Expand All @@ -79,15 +80,15 @@ const TaskvariableCreate = ({ options, addTaskVariable }) => {
</Form.Group>
</Col>

<Col xs={12} md={1}>
<Col xs={12} md={2}>
<Button
style={{ marginTop: "30px" }}
style={{ marginTop: "25px" }}
variant="outline-primary"
onClick={() => {
addTask();
}}
>
<i className="fa fa-check"></i> {t("Add")}
<i className="fa fa-check mr-2"></i> {t("Add")}
</Button>
</Col>
</Row>
Expand Down
107 changes: 50 additions & 57 deletions forms-flow-web/src/components/Form/constants/FormTable.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
/* eslint-disable */

import React, { useState, useEffect } from "react";
import {
InputGroup,
FormControl,
DropdownButton,
Dropdown,
} from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
Expand All @@ -14,8 +13,7 @@ import {
setBPMFormListPage,
setBPMFormListSort,
setBpmFormSearch,
setFormDeleteStatus,
// setBpmFormType,
setFormDeleteStatus,
} from "../../../actions/formActions";
import SelectFormForDownload from "../FileUpload/SelectFormForDownload";
import LoadingOverlay from "react-loading-overlay";
Expand All @@ -28,7 +26,7 @@ import {
import { useTranslation } from "react-i18next";
import { Translation } from "react-i18next";
import { getAllApplicationCount, getFormProcesses, resetFormProcessData } from "../../../apiManager/services/processServices";
import { setIsApplicationCountLoading, setResetProcess } from "../../../actions/processActions";
import { setIsApplicationCountLoading } from "../../../actions/processActions";
import { HelperServices } from "@formsflow/service";
import _ from "lodash";

Expand All @@ -52,18 +50,7 @@ function FormTable() {
const searchText = useSelector((state) => state.bpmForms.searchText);
const [search, setSearch] = useState(searchText || "");
const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";

const [openIndex, setOpenIndex] = useState(-1); // -1 means no dropdown open

const toggleDropdown = (index) => {
if (openIndex === index) {
// Clicking on the currently open row should close it
setOpenIndex(-1);
} else {
// Clicking on a different row should open it and close the previous one
setOpenIndex(index);
}
};
const isApplicationCountLoading = useSelector((state) => state.process.isApplicationCountLoading);

const pageOptions = [
{
Expand Down Expand Up @@ -92,12 +79,7 @@ function FormTable() {
dispatch(setBPMFormListSort(updatedSort));
dispatch(setBPMFormListPage(1));
};

// const handleTypeChange = (type) => {
// dispatch(setBPMFormListPage(1));
// dispatch(setBPMFormLimit(5));
// dispatch(setBpmFormType(type));
// };


useEffect(() => {
setSearch(searchText);
Expand All @@ -116,13 +98,12 @@ function FormTable() {

const viewOrEditForm = (formId) => {
dispatch(resetFormProcessData());
dispatch(setResetProcess());
dispatch(push(`${redirectUrl}formflow/${formId}/view-edit`));
};

const submitNewForm = (formId)=>{
dispatch(push(`${redirectUrl}form/${formId}`));
}
};

const handleClearSearch = () => {
setSearch("");
Expand All @@ -147,16 +128,7 @@ function FormTable() {
</button>
);

const submitNew = (formData) => {
return (
<button
className="btn btn-link mt-2"
onClick={() => submitNewForm(formData._id)}
>
<Translation>{(t) => t("Submit New")}</Translation>
</button>
);
};


const deleteForms = (formData) => {
dispatch(setIsApplicationCountLoading(true));
Expand All @@ -183,6 +155,21 @@ function FormTable() {
})
);
};

const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
<button
className="btn btn-link text-dark"
ref={ref}
onClick={(e) => {
e.preventDefault();
onClick(e);
}}
>
{children}
</button>
));



const noDataFound = () => {
return (
Expand All @@ -203,7 +190,7 @@ function FormTable() {
};
return (
<>
<LoadingOverlay active={searchFormLoading} spinner text="Loading...">
<LoadingOverlay active={searchFormLoading || isApplicationCountLoading} spinner text="Loading...">
<div style={{ minHeight: "400px" }}>
<table className="table custom-table table-responsive-sm">
<thead>
Expand Down Expand Up @@ -301,38 +288,44 @@ function FormTable() {
<td>{e.anonymous ? t("Anonymous") : t("Private")}</td>
<td>
{" "}
<button
className={`btn ${e.status === 'active' ? 'published-forms-label' : 'unpublished-forms-label'}`}
<span
className={`badge rounded-pill px-3 py-2 ${e.status === 'active' ? 'published-forms-label' : 'unpublished-forms-label'}`}
>
{e.status === 'active' ? t("Published") : t("Unpublished")}
</button>
</span>
</td>

<td>
<span> {viewOrEdit(e)}</span>
</td>

<td style={{ position: "relative" }}>
<div
className="dots mb-2 mr-5"
onClick={() => toggleDropdown(index)}
>
...
</div>
{openIndex === index && (
<Dropdown className="shadow position-absolute bg-white" style={{zIndex:99}}>
<td>

<Dropdown >
<Dropdown.Toggle
as={CustomToggle}
id="dropdown-basic"
>
<i className="fa-solid fa-ellipsis"></i>
</Dropdown.Toggle>
<Dropdown.Menu className="shadow bg-white">
{userRoles.includes(STAFF_REVIEWER) ||
userRoles.includes(CLIENT) ? (
<Dropdown.Item
onClick={() => {
submitNewForm(e?._id);
}}
>
<i className="fa fa-pencil mr-2 text-primary" />
{t("Submit New")}
</Dropdown.Item>
) : null}
<Dropdown.Item onClick={() => deleteForms(e)}>
<i className="fa fa-trash mr-2 text-danger" />
{t("Delete")}
</Dropdown.Item>
{(userRoles.includes(STAFF_REVIEWER) || userRoles.includes(CLIENT))?(
<Dropdown.Item onClick={() => {console.log(e);submitNewForm(e?._id)}}>
<i className="fa fa-pencil mr-2 text-primary" />
{t("Submit New")}
</Dropdown.Item>
) : null}
</Dropdown>
)}
</Dropdown.Menu>
</Dropdown>
</td>
</tr>
);
Expand Down Expand Up @@ -372,7 +365,7 @@ function FormTable() {
</Dropdown.Menu>
</Dropdown>
<span className="ml-2">
{t("Showing")} {limit * pageNo - (limit - 1)} {t("to")}{" "}
{t("Showing")} {(limit * pageNo) - (limit - 1)} {t("to")}{" "}
{limit * pageNo > totalForms ? totalForms : limit * pageNo}{" "}
{t("of")} {totalForms} {t("results")}
</span>
Expand Down
18 changes: 9 additions & 9 deletions forms-flow-web/src/components/Modeler/Editors/BpmnEditor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,20 +54,20 @@ export default React.memo(
const [lintErrors, setLintErrors] = useState([]);
const [deploymentLoading, setDeploymentLoading] = useState(false);
const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
const [processName,setProcessName] = useState(true);
const bpmPropertyInput = document.getElementById("bio-properties-panel-name")?.value;
// const [processName,setProcessName] = useState(true);
// const bpmPropertyInput = document.getElementById("bio-properties-panel-name")?.value;

const containerRef = useCallback((node) => {
if (node !== null) {
initializeModeler();
}
}, []);

useEffect(() => {
if (bpmPropertyInput) {
setProcessName(false);
}
}, [!bpmPropertyInput]);
// useEffect(() => {
// if (bpmPropertyInput) {
// setProcessName(false);
// }
// }, [!bpmPropertyInput]);

const cancel = () => {
dispatch(push(`${redirectUrl}processes`));
Expand Down Expand Up @@ -326,14 +326,14 @@ export default React.memo(
variant="outline-dark"
className="ml-3"
onClick={handleExport}
disabled={processName || !bpmPropertyInput}
// disabled={processName || !bpmPropertyInput}
>
{t("Export")}
</Button>
<Button
className="ml-3"
onClick={deployProcess}
disabled={processName || !bpmPropertyInput}
// disabled={processName || !bpmPropertyInput}
>
{t("Deploy")}
</Button>
Expand Down
11 changes: 6 additions & 5 deletions forms-flow-web/src/components/Modeler/constants/bpmnTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ function BpmnTable() {
)
);
setCountLoading(true);
fetchAllBpmProcessesCount(tenantKey, search)
fetchAllBpmProcessesCount(tenantKey, searchText)
.then((result) => {
setTotalProcess(result.data?.count || 0);
})
Expand Down Expand Up @@ -96,8 +96,8 @@ function BpmnTable() {
<table className="table custom-table table-responsive-sm mt-2">
<thead>
<tr>
<th scope="col">{t("Key")}</th>
<th scope="col">{t("Workflow Name")}</th>
<th scope="col">{t("Key")}</th>
<th scope="col">{t("Type")}</th>
<th colSpan="2">
<InputGroup className="input-group">
Expand Down Expand Up @@ -140,21 +140,22 @@ function BpmnTable() {
style={{ height: "300px" }}
className="text-center"
>
{t("No Process Found")}
{ isLoading ? null : t("No Process Found")}
</td>
</tr>
</tbody>
) : (
<tbody>
{process.map((processItem) => (
<tr key={processItem.id}>
<td>{processItem.key}</td>
<td>{processItem.name}</td>
<td>{processItem.key}</td>
<td>{t("BPMN")}</td>
<td>
<td className="d-flex justify-content-end w-100">
<Link
to={`${redirectUrl}processes/bpmn/${processItem.key}/edit`}
>
<i className="fas fa-edit mr-2"/>
{t("Edit Workflow")}
</Link>
</td>
Expand Down
Loading

0 comments on commit cee82e6

Please sign in to comment.