Skip to content

Commit e6adf62

Browse files
arun-s-aotarun-s-aot
authored
Merge pull request #519 from Bonymol-aot/FWF-4367/task-filter-modal
FWF-4369: [Feature] Added task filter modal design, api integration, internationalization
2 parents 65b907e + ecfde01 commit e6adf62

File tree

26 files changed

+1441
-88
lines changed

26 files changed

+1441
-88
lines changed

‎forms-flow-components/src/components/CustomComponents/DragandDropSort.tsx‎

Lines changed: 45 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect } from "react";
2-
import { FormVariableIcon,DraggableIcon } from "../SvgIcons/index";
2+
import { FormVariableIcon, DraggableIcon } from "../SvgIcons/index";
33
import { StyleServices } from "@formsflow/service";
44

55
interface FilterItem {
@@ -26,7 +26,7 @@ export const DragandDropSort: React.FC<DragAndDropFilterProps> = ({ items, onUpd
2626
onUpdate(filterItems);
2727
}, [filterItems, onUpdate]);
2828

29-
const onDragStart = (e: React.DragEvent<HTMLLIElement>, index: number) => {
29+
const onDragStart = (e: React.DragEvent<HTMLSpanElement>, index: number) => {
3030
e.stopPropagation();
3131
e.dataTransfer.setData("drag-index", index.toString());
3232
setDraggingIndex(index);
@@ -45,7 +45,7 @@ export const DragandDropSort: React.FC<DragAndDropFilterProps> = ({ items, onUpd
4545
const updatedItems = [...prevItems];
4646
const [draggedItem] = updatedItems.splice(draggingIndex, 1);
4747
updatedItems.splice(targetIndex, 0, draggedItem);
48-
return updatedItems.map((item, index) => ({ ...item, sortOrder: index + 1, isMoving: true, }));
48+
return updatedItems.map((item, index) => ({ ...item, sortOrder: index + 1}));
4949
});
5050
setDraggingIndex(targetIndex);
5151
};
@@ -66,43 +66,52 @@ export const DragandDropSort: React.FC<DragAndDropFilterProps> = ({ items, onUpd
6666
)
6767
);
6868
};
69+
70+
const onLabelClick = (index: number) => {
71+
onCheckboxChange(index);
72+
};
73+
6974
return (
7075
<div className="drag-drop-container">
71-
<ul>
76+
<ul>
7277
{filterItems.map((item, index) => (
73-
<li
74-
key={item.name}
75-
draggable
76-
className={`draggable-item ${draggingIndex === index ? "dragging" : ""} `}
77-
onDragOver={onDragOver}
78-
onDrop={onDrop}
79-
onDragEnter={(e) => onDragEnter(e, index)}
80-
onDragEnd={onDragEnd}
81-
onDragStart={(e) => onDragStart(e, index)}
82-
>
83-
<span
84-
className="draggable-icon"
78+
<li
79+
key={item.name}
80+
className={`draggable-item ${draggingIndex === index ? "dragging" : ""}`}
81+
onDragOver={onDragOver}
82+
onDrop={onDrop}
83+
onDragEnter={(e) => onDragEnter(e, index)}
84+
onDragEnd={onDragEnd}
8585
>
86-
<DraggableIcon />
87-
</span>
88-
<div className="checkbox-container">
89-
<input
90-
data-testid={`${item.name}-checkbox`}
91-
type="checkbox"
92-
className="form-check-input"
93-
checked={item.isChecked}
94-
onChange={() => onCheckboxChange(index)}
95-
/>
96-
</div>
97-
{item.label}
98-
<div className="dotted-line"></div>
99-
{item.isTaskVariable && (
100-
<FormVariableIcon color={darkColor} />
101-
) }
102-
</li>
103-
))}
104-
</ul>
86+
<button
87+
className="draggable-icon drag-as-div"
88+
draggable
89+
onDragStart={(e) => onDragStart(e, index)}
90+
>
91+
<DraggableIcon />
92+
</button>
93+
94+
95+
<div className="checkbox-container">
96+
<input
97+
data-testid={`${item.name}-checkbox`}
98+
type="checkbox"
99+
className="form-check-input"
100+
checked={item.isChecked}
101+
onChange={() => onCheckboxChange(index)}
102+
/>
103+
</div>
104+
105+
<button className="label cursor-pointer drag-as-div" onClick={() => onLabelClick(index)}>
106+
{item.label}
107+
</button>
108+
109+
<div className="dotted-line"></div>
110+
111+
{item.isTaskVariable && <FormVariableIcon color={darkColor} />}
112+
</li>
113+
))}
114+
</ul>
105115
</div>
106116
);
107117
};
108-

‎forms-flow-components/src/components/CustomComponents/InputDropdown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ interface DropdownItem {
1414
interface InputDropdownProps {
1515
Options: DropdownItem[];
1616
firstItemLabel?: string;
17-
dropdownLabel: string;
17+
dropdownLabel?: string;
1818
placeholder?: string;
1919
isAllowInput?: boolean;
2020
required?: boolean;

‎forms-flow-components/src/components/SvgIcons/index.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const computedStyle = getComputedStyle(document.documentElement);
22
const baseColor = computedStyle.getPropertyValue("--ff-primary");
33
const grayColor = computedStyle.getPropertyValue("--ff-gray-dark");
4+
const whiteColor = computedStyle.getPropertyValue("--ff-white")
45
export const ChevronIcon = ({
56
color = baseColor,
67
width = "10",
@@ -897,3 +898,15 @@ export const ConnectIcon = ({ color = baseColor, ...props }) => (
897898
/>
898899
</svg>
899900
);
901+
902+
903+
export const SaveIcon = ({ color = whiteColor}) => (
904+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
905+
<path d="M3 15.5H13C14.1046 15.5 15 14.6046 15 13.5V6.74948C15 6.21905 14.7893 5.71034 14.4142 5.33527L11.1647 2.08579C10.7897 1.71071 10.281 1.5 9.75052 1.5H3C1.89543 1.5 1 2.39543 1 3.5V13.5C1 14.6046 1.89543 15.5 3 15.5Z"
906+
stroke={color}
907+
strokeWidth="2"/>
908+
<path d="M11.3157 15.4997V12.3418C11.3157 11.2372 10.4202 10.3418 9.31566 10.3418H6.68408C5.57951 10.3418 4.68408 11.2372 4.68408 12.3418V15.4997"
909+
stroke={color}
910+
strokeWidth="2"/>
911+
</svg>
912+
);

‎forms-flow-nav/src/constants/taskConstants.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import { Translation } from "react-i18next";
22

33
export const TASK_FILTER_LIST_DEFAULT_PARAM = {
4-
sortBy: "created",
4+
sortBy: "dueDate",
55
sortOrder: "desc",
6-
label: <Translation>{(t) => t("Created")}</Translation>,
6+
label: <Translation>{(t) => t("Due Date")}</Translation>,
77
};
88

99
const DEFAULT_WORKFLOW_PROCESS_KEY = "Defaultflow";
1010
export const DEFAULT_WORKFLOW = {
1111
label: "Default Flow",
1212
value: DEFAULT_WORKFLOW_PROCESS_KEY,
1313
};
14+
15+
export const MAX_RESULTS = 15;

‎forms-flow-review/src/Routes/TaskListing.tsx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import { useEffect, useCallback } from "react";
1+
import { useEffect, useCallback, useState } from "react";
22
import SocketIOService from "../services/SocketIOService";
3+
import { CustomButton } from '@formsflow/components';
4+
import TaskFilterModal from "../components/TaskFilterModal";
35

46
interface SocketUpdateParams {
57
refreshedTaskId: string | number;
@@ -8,6 +10,12 @@ interface SocketUpdateParams {
810
}
911

1012
const TaskList = () => {
13+
const [showTaskFilterModal, setShowTaskFilterModal] = useState(false);
14+
15+
const handleToggleFilterModal = () => {
16+
setShowTaskFilterModal(prevState => !prevState);
17+
};
18+
1119
const SocketIOCallback = useCallback(
1220
({ refreshedTaskId, forceReload, isUpdateEvent }: SocketUpdateParams) => {
1321
console.log("SocketIOCallback called");
@@ -41,6 +49,22 @@ const TaskList = () => {
4149
};
4250
}, [SocketIOCallback]);
4351

44-
return <h1> Hello world</h1>;
52+
return (
53+
<div>
54+
<h1>Hello World</h1>
55+
<CustomButton
56+
variant="secondary"
57+
size="md"
58+
label="Create Filter"
59+
onClick={handleToggleFilterModal}
60+
dataTestId="open-create-filter-modal"
61+
ariaLabel="Toggle Create Filter Modal"
62+
/>
63+
<TaskFilterModal
64+
show={showTaskFilterModal}
65+
onClose={handleToggleFilterModal}
66+
/>
67+
</div>
68+
);
4569
};
4670
export default TaskList;

‎forms-flow-review/src/actions/actionConstants.ts‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
11
export default {
2-
"SET_TASKS":"SET_TASKS"
2+
SET_TASKS:"SET_TASKS",
3+
BPM_USER_LIST:"BPM_USER_LIST",
4+
SET_USER_GROUPS:"SET_USER_GROUPS",
5+
SET_USER_DETAILS: "SET_USER_DETAILS",
6+
ERROR: "ERROR",
7+
IS_PROCESS_STATUS_LOADING:"IS_PROCESS_STATUS_LOADING",
8+
SET_USER_ROLES: "SET_USER_ROLES",
9+
BPM_LIST_TASKS: "BPM_LIST_TASKS",
10+
BPM_TASKS_COUNT: "BPM_TASKS_COUNT",
11+
IS_BPM_TASK_LOADING: "IS_BPM_TASK_LOADING",
12+
BPM_VISSIBLE_ATTRIBUTES: "BPM_VISSIBLE_ATTRIBUTES",
13+
UPDATE_LIST_PARAMS: "UPDATE_LIST_PARAMS",
14+
BPM_TASK_LIST_ACTIVE_PAGE: "BPM_TASK_LIST_ACTIVE_PAGE",
15+
DEFAULT_FILTER: "DEFAULT_FILTER",
16+
BPM_FILTER_LIST: "BPM_FILTER_LIST",
17+
IS_BPM_FILTERS_LOADING: "IS_BPM_FILTERS_LOADING",
18+
BPM_SELECTED_FILTER: "BPM_SELECTED_FILTER",
19+
20+
321
}

‎forms-flow-review/src/actions/taskActions.ts‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,97 @@ export const setTasks = (data: any) => ({
55
payload: data,
66
})
77

8+
export const setBPMUserList = (data: any) => ({
9+
10+
type: ACTION_CONSTANTS.BPM_USER_LIST,
11+
payload: data,
12+
});
813

14+
export const setUserGroups = (data) => (dispatch) => {
15+
dispatch({
16+
type: ACTION_CONSTANTS.SET_USER_GROUPS,
17+
payload: data,
18+
});
19+
};
20+
21+
export const setUserDetails = (data) => (dispatch) => {
22+
localStorage.setItem("UserDetails", JSON.stringify(data));
23+
dispatch({
24+
type: ACTION_CONSTANTS.SET_USER_DETAILS,
25+
payload: data,
26+
});
27+
};
28+
29+
export const serviceActionError = (data) => (dispatch) => {
30+
dispatch({
31+
type: ACTION_CONSTANTS.ERROR,
32+
payload: "Error Handling API",
33+
});
34+
};
35+
36+
export const setProcessStatusLoading = (data) => (dispatch) => {
37+
dispatch({
38+
type: ACTION_CONSTANTS.IS_PROCESS_STATUS_LOADING,
39+
payload: data,
40+
});
41+
};
42+
43+
export const setUserRole = (data) => (dispatch) => {
44+
dispatch({
45+
type: ACTION_CONSTANTS.SET_USER_ROLES,
46+
payload: data,
47+
});
48+
};
49+
50+
export const setBPMTaskList = (data) => (dispatch) => {
51+
dispatch({
52+
type: ACTION_CONSTANTS.BPM_LIST_TASKS,
53+
payload: data,
54+
});
55+
};
56+
57+
export const setBPMTaskCount = (data) => (dispatch) => {
58+
dispatch({
59+
type: ACTION_CONSTANTS.BPM_TASKS_COUNT,
60+
payload: data,
61+
});
62+
};
63+
64+
export const setBPMTaskLoader = (data) => (dispatch) => {
65+
dispatch({
66+
type: ACTION_CONSTANTS.IS_BPM_TASK_LOADING,
67+
payload: data,
68+
});
69+
};
70+
71+
72+
export const setVisibleAttributes = (data) => (dispatch) => {
73+
dispatch({
74+
type: ACTION_CONSTANTS.BPM_VISSIBLE_ATTRIBUTES,
75+
payload: data,
76+
});
77+
};
78+
79+
export const setDefaultFilter = (data) => (dispatch) => {
80+
dispatch({
81+
type: ACTION_CONSTANTS.DEFAULT_FILTER,
82+
payload: data,
83+
});
84+
};
85+
export const setBPMFilterList = (data) => (dispatch) => {
86+
dispatch({
87+
type: ACTION_CONSTANTS.BPM_FILTER_LIST,
88+
payload: data,
89+
});
90+
};
91+
92+
export const setBPMFilterLoader = (data) => (dispatch) => {
93+
dispatch({
94+
type: ACTION_CONSTANTS.IS_BPM_FILTERS_LOADING,
95+
payload: data,
96+
});
97+
};
98+
99+
100+
101+

‎forms-flow-review/src/api/config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,5 @@ export const KEYCLOAK_URL = window._env_?.REACT_APP_KEYCLOAK_URL
88
export const KEYCLOAK_URL_AUTH = `${KEYCLOAK_URL}/auth`
99
export const KEYCLOAK_URL_REALM = window._env_?.REACT_APP_KEYCLOAK_URL_REALM
1010
export const KEYCLOAK_CLIENT = window._env_?.REACT_APP_KEYCLOAK_CLIENT
11-
export const BPM_URL = window._env_?.REACT_APP_BPM_URL
11+
export const BPM_URL = window._env_?.REACT_APP_BPM_URL
12+
export const BPM_BASE_URL_EXT = `${window._env_?.REACT_APP_BPM_URL}/engine-rest-ext`;

‎forms-flow-review/src/api/endpoints.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
1-
import { WEB_BASE_URL, BPM_URL } from "./config";
1+
import { WEB_BASE_URL, BPM_URL, BPM_BASE_URL_EXT } from "./config";
2+
3+
24

35
const API = {
4-
SAMPLE:`${WEB_BASE_URL}/sample`,
5-
BPM_BASE_URL_SOCKET_IO :`${BPM_URL}/forms-flow-bpm-socket`
6+
BPM_BASE_URL_SOCKET_IO: `${BPM_URL}/forms-flow-bpm-socket`,
7+
GET_API_USER_LIST: `${WEB_BASE_URL}/user`,
8+
GET_BPM_PROCESS_LIST: `${BPM_BASE_URL_EXT}/v1/process-definition`,
9+
USER_ROLES: `${WEB_BASE_URL}/roles`,
10+
GET_BPM_TASK_FILTERS: `${BPM_BASE_URL_EXT}/v1/task-filters`,
11+
GET_FILTERS: `${WEB_BASE_URL}/filter`,
12+
UPDATE_DEFAULT_FILTER: `${WEB_BASE_URL}/user/default-filter`,
13+
FORM_PROCESSES: `${WEB_BASE_URL}/form/formid`
614
}
715

816
export default API;

‎forms-flow-review/src/api/services/filter.ts‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

0 commit comments

Comments
 (0)