Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create new filter bug fixed #1946

Merged
merged 2 commits into from
Mar 18, 2024
Merged

Create new filter bug fixed #1946

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3d3d6cf
Create new filter bug fixed
shuhaib-aot Mar 14, 2024
dad9c44
changed description
shuhaib-aot Mar 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion forms-flow-web/src/components/Dashboard/StatusChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const ChartForm = React.memo((props) => {
spinner
text={t("Loading...")}
>
<div className="white-box status-container flex-row d-md-flex align-items-center">
<div className="white-box status-container flex-row d-md-flex flex-wrap align-items-center">
<div className="chart text-center">
<PieChart width={400} height={400}>
<Pie
Expand Down
238 changes: 124 additions & 114 deletions forms-flow-web/src/components/ServiceFlow/list/sort/CreateNewFilter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,22 @@ import {
MULTITENANCY_ENABLED,
} from "../../../../constants/constants";
import { fetchAllForms } from "../../../../apiManager/services/bpmFormServices";
import { getFormProcesses, resetFormProcessData } from "../../../../apiManager/services/processServices";
import {
getFormProcesses,
resetFormProcessData,
} from "../../../../apiManager/services/processServices";

const initialValueOfTaskAttribute = {
applicationId: true,
assignee: true,
taskTitle: true,
createdDate: true,
dueDate: true,
followUp: true,
priority: true,
groups: true,
};

export default function CreateNewFilterDrawer({
selectedFilterData,
openFilterDrawer,
Expand Down Expand Up @@ -87,9 +102,10 @@ export default function CreateNewFilterDrawer({
const filterList = useSelector((state) => state.bpmTasks.filterList);

const [variables, setVariables] = useState([]);
const [forms, setForms] = useState({ data: [], isLoading: true });
const [forms, setForms] = useState({ data: [], isLoading: true });
const [selectedForm, setSelectedForm] = useState(null);
const [taskVariablesKeys, setTaskVariablesKeys] = useState({});
const [processLoading, setProcessLoading] = useState(false);

const [overlayGroupShow, setOverlayGroupShow] = useState(false);
const [overlayUserShow, setOverlayUserShow] = useState(false);
Expand All @@ -98,19 +114,7 @@ export default function CreateNewFilterDrawer({

const { t } = useTranslation();
const [modalShow, setModalShow] = useState(false);
const [checkboxes, setCheckboxes] = useState({
applicationId: true,
assignee: true,
taskTitle: true,
createdDate: true,
dueDate: true,
followUp: true,
priority: true,
groups: true,
});
const taskAttributesCount = Object.values(checkboxes).filter(
(value) => value === true
).length;
const [checkboxes, setCheckboxes] = useState(initialValueOfTaskAttribute);

const fetchTasks = (resData) => {
const reqParamData = {
Expand Down Expand Up @@ -143,6 +147,17 @@ export default function CreateNewFilterDrawer({
return inputString;
};

const setTaskVariablesAndItsKeys = (variables = []) => {
setVariables(variables);
// taking variable names to check it is already exist or not
setTaskVariablesKeys(
variables.reduce((i, variable) => {
i[variable.name] = variable.name;
return i;
}, {})
);
};

useEffect(() => {
if (selectedFilterData) {
setFilterName(selectedFilterData?.name);
Expand All @@ -165,17 +180,17 @@ export default function CreateNewFilterDrawer({
setShowUndefinedVariable(
selectedFilterData?.properties?.showUndefinedVariable
);

setSelectedForm(selectedFilterData?.properties?.formId || null);
setVariables(selectedFilterData.variables || []);
if(selectedFilterData.variables){
// taking variable names to check it is already exist or not
setTaskVariablesKeys(selectedFilterData.variables.reduce((i,variable)=>{
i[variable.name] = variable.name;
return i;
},{}));

if (selectedFilterData?.properties?.formId) {
setSelectedForm(selectedFilterData?.properties?.formId || null);
setProcessLoading(true);
dispatch(getFormProcesses(selectedFilterData?.properties?.formId,()=>{
setProcessLoading(false);
}));
}

setTaskVariablesAndItsKeys(selectedFilterData.variables);

if (
!selectedFilterData?.users?.length &&
!selectedFilterData?.roles?.length
Expand Down Expand Up @@ -204,9 +219,10 @@ export default function CreateNewFilterDrawer({
}

// if the user has this role then we will check the condition else it will always true
if(userRoles.includes(FORMSFLOW_ADMIN)){
setIsTasksForCurrentUserGroupsEnabled(selectedFilterData?.criteria?.
candidateGroupsExpression ? true : false);
if (userRoles.includes(FORMSFLOW_ADMIN)) {
setIsTasksForCurrentUserGroupsEnabled(
selectedFilterData?.criteria?.candidateGroupsExpression ? true : false
);
}

setCheckboxes({
Expand Down Expand Up @@ -249,43 +265,32 @@ export default function CreateNewFilterDrawer({
}
}, [openFilterDrawer]);

//if a form selected then need fetch it's task variable
useEffect(() => {
if (selectedForm) {
dispatch(getFormProcesses(selectedForm));
}else{
dispatch(resetFormProcessData());
}
}, [selectedForm]);



/**
* Handles changing the selected task variables.
*
* When a variable is checked, adds it to the variables array.
* When a variable is unchecked, removes it from the variables array.
* Also updates the taskVariablesKeys object with the checked state.
*/
const handleChangeTaskVariables = (e, variable) => {
const { checked } = e.target;
if (checked) {
setVariables((prev) => [
...prev,
{ name: variable.key, label: variable.label },
]);
const resetVariables = () => {
setVariables([]);
setTaskVariablesKeys({
applicationId: "applicationId",
formName: "formName",
});
};

const onChangeSelectForm = (e) => {
if (e?.value) {
setProcessLoading(true);
dispatch(getFormProcesses(e.value,()=>{
setProcessLoading(false);
}));
if (e?.value === selectedFilterData?.properties?.formId) {
setTaskVariablesAndItsKeys(selectedFilterData?.variables);
} else {
resetVariables();
}
} else {
setVariables((prev) => prev.filter((i) => i.name !== variable.key));
resetVariables();
dispatch(resetFormProcessData());
}
setTaskVariablesKeys((prev) => ({
...prev,
[variable.key]: checked ? variable.key : null,
}));
setSelectedForm(e?.value);
};




const successCallBack = (resData) => {
dispatch(
fetchFilterList((err, data) => {
Expand Down Expand Up @@ -339,7 +344,8 @@ export default function CreateNewFilterDrawer({
setIsMyTasksEnabled(false);
setSelectedForm(null);
dispatch(resetFormProcessData());
setForms({data:[], isLoading:true});
setCheckboxes(initialValueOfTaskAttribute);
setForms({ data: [], isLoading: true });
};

const handleSubmit = () => {
Expand Down Expand Up @@ -374,7 +380,7 @@ export default function CreateNewFilterDrawer({

const data = {
name: filterName,
criteria: {
criteria: {
processDefinitionNameLike: definitionKeyId && `%${definitionKeyId}%`,
candidateGroup:
MULTITENANCY_ENABLED && candidateGroup
Expand Down Expand Up @@ -523,39 +529,45 @@ export default function CreateNewFilterDrawer({
setCandidateGroup(data);
};


const onSaveTaskAttribute = (
taskVariablesKeys,
variables,
checkboxes,
showUndefinedVariable
) => {
setVariables(variables);
setTaskVariablesKeys(taskVariablesKeys);
setCheckboxes(checkboxes);
setShowUndefinedVariable(showUndefinedVariable);
};

const list = () => (
<div className="filter-list" role="presentation">
<div role="presentation">
<List>
<div className="p-0 d-flex align-items-center justify-content-between ">
<h5 className="fw-bold fs-16">
<Translation>{(t) => t("Create new filter")}</Translation>
</h5>
<span
className="cursor-pointer truncate-size"
onClick={() => {
toggleDrawer();
}}
>
<button className="btn btn-link text-dark" onClick={toggleDrawer}>
<Translation>{(t) => t("Close")}</Translation>
</span>
</button>
</div>
</List>
<List>
<h5 className="fw-bold fs-18">
<Translation>{(t) => t("Filter Name")}</Translation>
</h5>
<input
type="text"
placeholder={t("Enter your text here")}
className="filter-name-textfeild"
value={filterName}
onChange={(e) => setFilterName(e.target.value)}
title={t("Add fliter name")}
/>
<div className="form-group">
<label htmlFor="filterName">{t("Filter Name")}</label>
<input
type="text"
className="form-control"
id="filterName"
placeholder={t("Enter your text here")}
value={filterName}
onChange={(e) => setFilterName(e.target.value)}
title={t("Add fliter name")}
/>
</div>
</List>
<Divider />

<List>
<h5 className="fw-bold fs-18">
<Translation>{(t) => t("Criteria")}</Translation>{" "}
Expand Down Expand Up @@ -609,8 +621,6 @@ export default function CreateNewFilterDrawer({
</>
)}



<h5 className="mt-2 fs-18">
<Translation>{(t) => t("Definition Key")}</Translation>
</h5>
Expand Down Expand Up @@ -725,8 +735,22 @@ export default function CreateNewFilterDrawer({
</h5>
</div>
) : null}
<Divider />

<div className="my-3">
<Divider />
<div className="my-3">
<h5 className="fw-bold ">
<Translation>{(t) => t("Select Form")}</Translation>
</h5>
<Select
onChange={onChangeSelectForm}
value={forms?.data.find((form) => form.value === selectedForm)}
isClearable
placeholder={t("select...")}
options={forms?.data}
isLoading={forms.isLoading}
/>
</div>
<h5 className="fw-bold ">
<Translation>{(t) => t("Task Attributes")}</Translation>
<i
Expand All @@ -736,26 +760,13 @@ export default function CreateNewFilterDrawer({
className="fa fa-info-circle ms-2 filter-tooltip-icon"
></i>
</h5>
<div className="my-2">
<Select
onChange={(e)=>{setSelectedForm(e?.value);}}
value={
forms?.data.find(
(form) => form.value === selectedForm
)
}
isClearable
placeholder={t("select a form")}
options={forms?.data}
isLoading={forms.isLoading}
/>
</div>
<button className="btn btn-outline-primary w-100" onClick={toggleModal}>{
taskAttributesCount === 0
? t("Select Elements")
: taskAttributesCount + t(" Task Attributes Selected")
}</button>


<button
className="btn btn-outline-primary w-100"
onClick={toggleModal}
>
{t("Click here to select attributes")}
</button>
</div>
<Divider />
<div className="child-container-two pt-2">
Expand Down Expand Up @@ -913,8 +924,7 @@ export default function CreateNewFilterDrawer({
</div>
) : null}
</div>



<Divider />
</List>

Expand Down Expand Up @@ -976,14 +986,14 @@ export default function CreateNewFilterDrawer({
<div>
<TaskAttributeComponent
show={modalShow}
processLoading={processLoading}
selectedForm={selectedForm}
onHide={toggleModal}
checkboxes={checkboxes}
selectedTaskVariables={taskVariablesKeys}
handleChangeTaskVariables={handleChangeTaskVariables}
setCheckboxes={setCheckboxes}
selectedTaskAttrbutes={checkboxes}
selectedTaskVariablesKeys={taskVariablesKeys}
selectedTaskVariables={variables}
onSaveTaskAttribute={onSaveTaskAttribute}
showUndefinedVariable={showUndefinedVariable}
setShowUndefinedVariable={setShowUndefinedVariable}
/>
</div>
)}
Expand All @@ -1007,7 +1017,7 @@ export default function CreateNewFilterDrawer({
width: 100,
}}
>
{list("le ft")}
{list()}
</Drawer>
</React.Fragment>
</div>
Expand Down
Loading
Loading