Skip to content

Commit ae0d085

Browse files
arun-s-aotarun-s-aot
authored
Merge pull request #428 from abilpraju-aot/feature/FWF-4259
Added sort modal and translation feature
2 parents 88abe02 + 6b5941d commit ae0d085

File tree

12 files changed

+288
-28
lines changed

12 files changed

+288
-28
lines changed

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

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
import React, { useEffect, useState } from "react";
2+
import Modal from "react-bootstrap/Modal";
3+
import { CustomButton } from "./Button";
4+
import { CloseIcon } from "../SvgIcons/index";
5+
import { useTranslation } from "react-i18next";
6+
import { InputDropdown } from "./InputDropdown";
7+
8+
interface SortModalProps {
9+
showSortModal: boolean;
10+
onClose?: () => void;
11+
primaryBtnAction?: (selectedOption: string, order: string) => void;
12+
secondaryBtnAction?: () => void;
13+
modalHeader?: string;
14+
primaryBtnLabel?: string;
15+
secondaryBtnLabel?: string;
16+
optionSortBy: { value: string; label: string }[];
17+
optionSortOrder: { value: string; label: string }[];
18+
defaultSortOption?: string;
19+
defaultSortOrder?: string;
20+
firstItemLabel?: string;
21+
secondItemLabel?: string;
22+
primaryBtndataTestid?: string;
23+
secondaryBtndataTestid?: string;
24+
primaryBtnariaLabel?: string;
25+
secondaryBtnariaLabel?: string;
26+
closedataTestid?: string;
27+
}
28+
29+
export const SortModal: React.FC<SortModalProps> = React.memo(
30+
({
31+
showSortModal,
32+
onClose,
33+
primaryBtnAction,
34+
secondaryBtnAction = onClose,
35+
modalHeader = "Sort",
36+
primaryBtnLabel = "Sort Results",
37+
secondaryBtnLabel = "Cancel",
38+
optionSortBy = [],
39+
optionSortOrder = [],
40+
defaultSortOption = "",
41+
defaultSortOrder = "",
42+
firstItemLabel = "Sort By",
43+
secondItemLabel = "In a",
44+
primaryBtndataTestid = "apply-sort-button",
45+
secondaryBtndataTestid = "cancel-sort-button",
46+
primaryBtnariaLabel = "Apply sorting",
47+
secondaryBtnariaLabel = "Cancel",
48+
closedataTestid = "close-sort-modal",
49+
}) => {
50+
const { t } = useTranslation();
51+
const [selectedOption, setSelectedOption] = useState(defaultSortOption);
52+
const [selectedOrder, setSelectedOrder] = useState(defaultSortOrder);
53+
54+
const handlePrimaryAction = () => {
55+
if (primaryBtnAction) {
56+
primaryBtnAction(selectedOption, selectedOrder);
57+
}
58+
};
59+
60+
useEffect(() => {
61+
if (!showSortModal) {
62+
setSelectedOption(defaultSortOption);
63+
setSelectedOrder(defaultSortOrder);
64+
}
65+
}, [showSortModal, defaultSortOption, defaultSortOrder]);
66+
67+
return (
68+
<Modal show={showSortModal} onHide={onClose} size="sm" centered={true}>
69+
<Modal.Header>
70+
<Modal.Title>
71+
<b>{t(modalHeader)}</b>
72+
</Modal.Title>
73+
<div className="d-flex align-items-center">
74+
<CloseIcon onClick={onClose} data-testid={closedataTestid} />
75+
</div>
76+
</Modal.Header>
77+
<Modal.Body className="sort-settings p-0">
78+
<div className="sortbody-settings">
79+
<InputDropdown
80+
firstItemLabel={t(firstItemLabel)}
81+
isAllowInput={false}
82+
Options={optionSortBy.map((option) => ({
83+
label: t(option.label),
84+
onClick: () => setSelectedOption(option.value),
85+
}))}
86+
dropdownLabel={t(firstItemLabel)}
87+
selectedOption={t(
88+
optionSortBy.find((option) => option.value === selectedOption)
89+
?.label || ""
90+
)}
91+
isInvalid={false}
92+
ariaLabelforDropdown={t("Sort By Dropdown")}
93+
ariaLabelforInput={t("Sort By Input")}
94+
dataTestIdforDropdown="dropdown-sort-by"
95+
dataTestIdforInput="input-sort-by"
96+
/>
97+
<InputDropdown
98+
firstItemLabel={t(secondItemLabel)}
99+
isAllowInput={false}
100+
Options={optionSortOrder.map((option) => ({
101+
label: t(option.label),
102+
onClick: () => setSelectedOrder(option.value),
103+
}))}
104+
dropdownLabel={t(secondItemLabel)}
105+
selectedOption={t(
106+
optionSortOrder.find((option) => option.value === selectedOrder)
107+
?.label || ""
108+
)}
109+
isInvalid={false}
110+
ariaLabelforDropdown={t("Order Dropdown")}
111+
ariaLabelforInput={t("Order Input")}
112+
dataTestIdforDropdown="dropdown-sort-order"
113+
dataTestIdforInput="input-sort-order"
114+
/>
115+
</div>
116+
</Modal.Body>
117+
118+
<Modal.Footer className="d-flex justify-content-start">
119+
<CustomButton
120+
variant="primary"
121+
size="md"
122+
disabled={!selectedOption || !selectedOrder}
123+
label={t(primaryBtnLabel)}
124+
onClick={handlePrimaryAction}
125+
name="applyButton"
126+
dataTestid={primaryBtndataTestid}
127+
ariaLabel={t(primaryBtnariaLabel)}
128+
/>
129+
<CustomButton
130+
variant="secondary"
131+
size="md"
132+
name="cancelButton"
133+
label={t(secondaryBtnLabel)}
134+
onClick={secondaryBtnAction}
135+
dataTestid={secondaryBtndataTestid}
136+
ariaLabel={t(secondaryBtnariaLabel)}
137+
/>
138+
</Modal.Footer>
139+
</Modal>
140+
);
141+
}
142+
);
143+
144+
export default SortModal;

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -687,6 +687,59 @@ export const StarPremiumIcon = ({ color = baseColor,...props }) => (
687687
</svg>
688688
);
689689

690+
export const RefreshIcon = ({ color = baseColor, onClick, ...props }) => (
691+
<svg
692+
className="icon-wrapper-change"
693+
width="43"
694+
height="43"
695+
viewBox="0 0 43 43"
696+
fill="none"
697+
onClick={onClick}
698+
xmlns="http://www.w3.org/2000/svg"
699+
>
700+
<circle cx="21.5" cy="21.5" r="21.5" fill="#E2E1FC" />
701+
<path
702+
d="M14.5901 18.4524C15.724 15.5458 18.431 13.5 21.5901 13.5C24.7492 13.5 27.4562 15.5458 28.5901 18.4524M28.5901 24.5476C27.4562 27.4542 24.7492 29.5 21.5901 29.5C18.431 29.5 15.724 27.4542 14.5901 24.5476M25.1829 24.4777L29.2603 23.2539L30.4841 27.3312M18.0872 18.2866L14.0945 19.8652L12.5159 15.8725"
703+
stroke={color}
704+
strokeWidth="2"
705+
strokeLinecap="round"
706+
strokeLinejoin="round"
707+
/>
708+
</svg>
709+
);
710+
711+
export const FilterIcon = ({ color = baseColor, onClick, ...props }) => (
712+
<svg
713+
className="icon-wrapper-change"
714+
width="43"
715+
height="43"
716+
viewBox="0 0 43 43"
717+
fill="none"
718+
onClick={onClick}
719+
xmlns="http://www.w3.org/2000/svg"
720+
>
721+
<circle cx="21.5" cy="21.5" r="21.5" fill="#E2E1FC" />
722+
<path
723+
d="M13.5312 17.5H29.4688"
724+
stroke={color}
725+
strokeWidth="2"
726+
strokeLinecap="round"
727+
/>
728+
<path
729+
d="M13.5312 25.5H19.0312"
730+
stroke={color}
731+
strokeWidth="2"
732+
strokeLinecap="round"
733+
/>
734+
<path
735+
d="M13.5312 21.5H23.5312"
736+
stroke={color}
737+
strokeWidth="2"
738+
strokeLinecap="round"
739+
/>
740+
</svg>
741+
);
742+
690743
export const SortIcon = ({ color = grayColor, ...props }) => (
691744
<svg
692745
width="12"

‎forms-flow-components/src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export * from "./CustomComponents/FormTextArea";
1010
export * from "./CustomComponents/Search";
1111
export * from "./CustomComponents/ProgressBar";
1212
export * from "./CustomComponents/FormBuilderModal";
13+
export * from "./CustomComponents/SortModal";
1314
export * from "./CustomComponents/HistoryModal";
1415
export * from "./CustomComponents/InputDropdown";
1516
export * from './CustomComponents/ReusableProcessTableRow';

‎forms-flow-service/src/resourceBundles/bg/resourceBundles.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1251,7 +1251,7 @@ export const RESOURCE_BUNDLES_BG = {
12511251
"Are you sure you want to discard all the changes to the layout of the form?": "Сигурни ли сте, че искате да изхвърлите всички промени в оформлението на формуляра?",
12521252
"This action cannot be undone.": "Това действие не може да бъде отменено.",
12531253
"Yes, Discard Changes": "Да, изхвърлете промените",
1254-
"No, Keep My Changes": "Не, запазете моите промени",
1254+
"No, Keep My Changes": "Не, запазете моите промени",
12551255
"Save Flow": "Запазете потока",
12561256
"Revert To This": "Върнете към това",
12571257
"Last Edit On": "Последна редакция на",
@@ -1280,11 +1280,8 @@ export const RESOURCE_BUNDLES_BG = {
12801280
"New Form": "Нова форма",
12811281
"Add Form": "Добави форма",
12821282
"Build": "Изграждане",
1283-
"Import": "Импортиране",
12841283
"Create the form from scratch": "Създайте формуляр от нулата",
12851284
"Upload form from a file": "Качете формуляр от файл",
1286-
"Live": "На живо",
1287-
"Draft": "Чернова",
12881285
"Last Edited": "Последно редактирано",
12891286
"ID": "ИД",
12901287
"New BPMN": "Нов BPMN",
@@ -1307,4 +1304,13 @@ export const RESOURCE_BUNDLES_BG = {
13071304
"next": "Следваща",
13081305
"Month": "Месец",
13091306
"Year": "Година",
1307+
"Sort": "Сортирай",
1308+
"Sort Results": "Резултати от сортирането",
1309+
"Sort By": "Сортиране по",
1310+
"In a": "В",
1311+
"Sort By Dropdown": "Раздел Сортиране по",
1312+
"Sort By Input": "Вход Сортиране по",
1313+
"Order Dropdown": "Раздел Ред",
1314+
"Order Input": "Вход Ред",
1315+
"Apply sorting": "Приложи сортиране",
13101316
}

‎forms-flow-service/src/resourceBundles/de/resourceBundles.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1285,12 +1285,8 @@ export const RESOURCE_BUNDLES_DE = {
12851285
"New Form": "Neues Formular",
12861286
"Add Form": "Formular hinzufügen",
12871287
"Build": "bauen",
1288-
"Import": "Importieren",
12891288
"Create the form from scratch": "Erstellen Sie das Formular von Grund auf",
12901289
"Upload form from a file": "Formular aus einer Datei hochladen",
1291-
"Live": "Live",
1292-
"Draft": "Entwurf",
1293-
"Last Edited": "Zuletzt bearbeitet",
12941290
"ID": "ID",
12951291
"New BPMN": "Neues BPMN",
12961292
"Create the BPMN from scratch": "Erstellen Sie das BPMN von Grund auf",
@@ -1312,4 +1308,14 @@ export const RESOURCE_BUNDLES_DE = {
13121308
"next": "nächste",
13131309
"Month": "Monat",
13141310
"Year": "Jahr",
1311+
"Sort": "Sortieren",
1312+
"Sort Results": "Sortierergebnisse",
1313+
"Sort By": "Sortieren nach",
1314+
"In a": "In einer",
1315+
"Sort By Dropdown": "Dropdown Sortieren nach",
1316+
"Sort By Input": "Eingabe Sortieren nach",
1317+
"Order Dropdown": "Dropdown Reihenfolge",
1318+
"Order Input": "Eingabe Reihenfolge",
1319+
"Apply sorting": "Sortierung anwenden",
1320+
"Last Edited": "Zuletzt bearbeitet",
13151321
}

‎forms-flow-service/src/resourceBundles/en/resourceBundles.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -775,4 +775,14 @@ export const RESOURCE_BUNDLES_EN ={
775775
"Month": "Month",
776776
"Day": "Day",
777777
"Year": "Year",
778+
"Sort": "Sort",
779+
"Sort Results": "Sort Results",
780+
"Sort By": "Sort By",
781+
"In a": "In a",
782+
"Sort By Dropdown": "Sort By Dropdown",
783+
"Sort By Input": "Sort By Input",
784+
"Order Dropdown": "Order Dropdown",
785+
"Order Input": "Order Input",
786+
"Apply sorting": "Apply sorting",
787+
"Last Edited": "Last Edited",
778788
}

‎forms-flow-service/src/resourceBundles/es/resourceBundles.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -769,11 +769,8 @@ export const RESOURCE_BUNDLES_ES = {
769769
"New Form": "Nuevo formulario",
770770
"Add Form": "Añadir formulario",
771771
"Build": "Construir",
772-
"Import": "Importar",
773772
"Create the form from scratch": "Crear el formulario desde cero",
774773
"Upload form from a file": "Subir formulario desde un archivo",
775-
"Live": "En vivo",
776-
"Draft": "Borrador",
777774
"Last Edited": "Última edición",
778775
"ID": "ID",
779776
"New BPMN": "Nuevo BPMN",
@@ -798,4 +795,13 @@ export const RESOURCE_BUNDLES_ES = {
798795
"Month": "Mes",
799796
"Day": "Día",
800797
"Year": "Año",
798+
"Sort": "Ordenar",
799+
"Sort Results": "Resultados del Ordenamiento",
800+
"Sort By": "Ordenar Por",
801+
"In a": "En una",
802+
"Sort By Dropdown": "Menú desplegable Ordenar Por",
803+
"Sort By Input": "Entrada Ordenar Por",
804+
"Order Dropdown": "Menú desplegable de Orden",
805+
"Order Input": "Entrada de Orden",
806+
"Apply sorting": "Aplicar orden",
801807
}

‎forms-flow-service/src/resourceBundles/fr/resourceBundles.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1282,11 +1282,8 @@ export const RESOURCE_BUNDLES_FR ={
12821282
"New Form": "Nouveau formulaire",
12831283
"Add Form": "Ajouter un formulaire",
12841284
"Build": "Construire",
1285-
"Import": "Importer",
12861285
"Create the form from scratch": "Créer le formulaire à partir de zéro",
12871286
"Upload form from a file": "Télécharger le formulaire depuis un fichier",
1288-
"Live": "En direct",
1289-
"Draft": "Brouillon",
12901287
"Last Edited": "Dernière édition",
12911288
"ID": "ID",
12921289
"New BPMN": "Nouveau BPMN",
@@ -1309,6 +1306,15 @@ export const RESOURCE_BUNDLES_FR ={
13091306
"next": "suivant",
13101307
"Month": "Mois",
13111308
"Year": "Année",
1309+
"Sort": "Trier",
1310+
"Sort Results": "Résultats du tri",
1311+
"Sort By": "Trier par",
1312+
"In a": "Dans un",
1313+
"Sort By Dropdown": "Menu déroulant Trier par",
1314+
"Sort By Input": "Entrée Trier par",
1315+
"Order Dropdown": "Menu déroulant de l'ordre",
1316+
"Order Input": "Entrée de l'ordre",
1317+
"Apply sorting": "Appliquer le tri",
13121318
}
13131319

13141320

‎forms-flow-service/src/resourceBundles/pt/resourceBundles.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1282,11 +1282,8 @@ export const RESOURCE_BUNDLES_PT ={
12821282
"New Form": "Novo Formulário",
12831283
"Add Form": "Adicionar Formulário",
12841284
"Build": "Construir",
1285-
"Import": "Importar",
12861285
"Create the form from scratch": "Criar o formulário do zero",
12871286
"Upload form from a file": "Carregar formulário de um arquivo",
1288-
"Live": "Ao vivo",
1289-
"Draft": "Rascunho",
12901287
"Last Edited": "Última Edição",
12911288
"ID": "ID",
12921289
"New BPMN": "Novo BPMN",
@@ -1309,4 +1306,13 @@ export const RESOURCE_BUNDLES_PT ={
13091306
"next": "próximo",
13101307
"Month": "Mês",
13111308
"Year": "Ano",
1309+
"Sort": "Ordenar",
1310+
"Sort Results": "Resultados da Ordenação",
1311+
"Sort By": "Ordenar Por",
1312+
"In a": "Em uma",
1313+
"Sort By Dropdown": "Menu suspenso de Ordenar Por",
1314+
"Sort By Input": "Entrada de Ordenar Por",
1315+
"Order Dropdown": "Menu suspenso de Ordem",
1316+
"Order Input": "Entrada de Ordem",
1317+
"Apply sorting": "Aplicar ordenação",
13121318
};

‎forms-flow-service/src/resourceBundles/zh/resourceBundles.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1269,11 +1269,8 @@ export const RESOURCE_BUNDLES_ZH = {
12691269
"New Form": "新表单",
12701270
"Add Form": "添加表单",
12711271
"Build": "构建",
1272-
"Import": "导入",
12731272
"Create the form from scratch": "从头创建表单",
12741273
"Upload form from a file": "从文件上传表单",
1275-
"Live": "直播",
1276-
"Draft": "草稿",
12771274
"Last Edited": "最后编辑",
12781275
"ID": "标识",
12791276
"New BPMN": "新的 BPMN",
@@ -1296,4 +1293,13 @@ export const RESOURCE_BUNDLES_ZH = {
12961293
"next": "下一页",
12971294
"Month": "月",
12981295
"Year": "年",
1296+
"Sort": "排序",
1297+
"Sort Results": "排序结果",
1298+
"Sort By": "排序依据",
1299+
"In a": "以",
1300+
"Sort By Dropdown": "排序依据下拉菜单",
1301+
"Sort By Input": "排序依据输入框",
1302+
"Order Dropdown": "排序顺序下拉菜单",
1303+
"Order Input": "排序顺序输入框",
1304+
"Apply sorting": "应用排序",
12991305
}

0 commit comments

Comments
 (0)