Skip to content

Commit 6d9d8d8

Browse files
AishDaniAishDani
committed
feat:created language-mapper component in UI
1 parent dc56425 commit 6d9d8d8

File tree

7 files changed

+503
-3
lines changed

7 files changed

+503
-3
lines changed

‎ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
import { Button, CircularLoader, Field, FieldLabel, Help, Icon, Info, MiniScrollableTable, Paragraph, Select, Tooltip } from "@contentstack/venus-components";
2+
import { useEffect, useState } from "react";
3+
import TableHeader from "./tableHeader";
4+
import SingleRowComp from "./singleRowComp";
5+
import { useSelector } from "react-redux";
6+
import { RootState } from "../../../store";
7+
import { getLocales } from "../../../services/api/upload.service";
8+
import { getStackLocales } from "../../../services/api/stacks.service";
9+
import { all } from "axios";
10+
11+
const Mapper = ({ cmsLocaleOptions, handleLangugeDelete, options, masterLocale }: { cmsLocaleOptions: Array<any>, handleLangugeDelete: any, options:any, masterLocale:string }) => {
12+
13+
14+
const handleSelectedLocale = (data: any, index: number)=>{
15+
return;
16+
17+
}
18+
19+
const csValue = null;
20+
return (
21+
<>
22+
{ cmsLocaleOptions?.length > 0 ?
23+
cmsLocaleOptions?.map((locale:any, index:any)=>(
24+
<div key={index} className="lang-container">
25+
<Select
26+
value={locale?.value === 'master_locale' ? locale : ''}
27+
onChange={(key: any) => handleSelectedLocale(key, 1)}
28+
options={options}
29+
placeholder={
30+
'select language'
31+
}
32+
isSearchable
33+
//menuShouldScrollIntoView
34+
maxMenuHeight={150}
35+
multiDisplayLimit={5}
36+
menuPortalTarget={document.querySelector(".language-mapper")}
37+
width="270px"
38+
version="v2"
39+
hideSelectedOptions={true}
40+
isDisabled={locale?.value === 'master_locale' ? true : false}
41+
className="select-container"
42+
noOptionsMessage={() => ''}
43+
/>
44+
<span className="span" >-</span>
45+
<Select
46+
value={csValue}
47+
onChange={(data: any) => handleSelectedLocale(data, 1)}
48+
options={[]}
49+
placeholder={
50+
'select language'
51+
}
52+
//isSearchable
53+
//menuShouldScrollIntoView
54+
multiDisplayLimit={5}
55+
//menuPortalTarget={document.querySelector(".config-wrapper")}
56+
width="270px"
57+
version="v2"
58+
hideSelectedOptions={true}
59+
noOptionsMessage={() => ''}
60+
/>
61+
<div className={''} >
62+
{locale?.value !== 'master_locale' &&
63+
<Tooltip
64+
content={
65+
'Delete'
66+
}
67+
position="top"
68+
showArrow={false}
69+
>
70+
<Icon
71+
icon="Trash"
72+
size="mini"
73+
className="contentTypeRows__icon"
74+
onClick={() => {
75+
handleLangugeDelete(index, locale)}
76+
}
77+
hover
78+
hoverType="secondary"
79+
shadow="medium"
80+
/>
81+
</Tooltip>}
82+
</div>
83+
84+
</div>
85+
86+
)) :
87+
<Info
88+
className="info-tag"
89+
icon={<Icon icon='Information' version='v2' size='small'></Icon>}
90+
//version="v2"
91+
content="No langauges configured"
92+
type="light"/>
93+
}
94+
</>
95+
96+
97+
);
98+
99+
}
100+
101+
const LanguageMapper = () => {
102+
const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
103+
const [newEntry, setnewEntry] = useState<boolean>(false);
104+
const [options, setoptions] = useState([{
105+
label: '1',
106+
value: 'hello'
107+
}]);
108+
const [cmsLocaleOptions, setcmsLocaleOptions] = useState<{ label: string; value: string }[]>([]);
109+
110+
111+
const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation);
112+
const [isLoading, setisLoading] = useState<boolean>(false);
113+
114+
useEffect(() => {
115+
const fetchData = async () => {
116+
try {
117+
setisLoading(true);
118+
const res = await fetchLocales();
119+
console.log("res ---> ", res?.data?.locales);
120+
const allLocales:any = Object.keys(res?.data?.locales || {}).map((key) => ({
121+
label: key,
122+
value: key
123+
}));
124+
125+
setoptions(allLocales);
126+
setcmsLocaleOptions((prevList: any) => {
127+
128+
const newLabel = newMigrationData?.destination_stack?.selectedStack?.master_locale;
129+
130+
const isPresent = prevList.some((item: any) => item.value === 'master_locale');
131+
132+
if (!isPresent) {
133+
return [
134+
...prevList,
135+
{
136+
label: newLabel,
137+
value: 'master_locale',
138+
},
139+
];
140+
}
141+
142+
return prevList;
143+
});
144+
145+
setisLoading(false);
146+
} catch (error) {
147+
console.error("Error fetching locales:", error);
148+
}
149+
};
150+
151+
fetchData();
152+
}, []);
153+
154+
const fetchLocales = async () => {
155+
return await getStackLocales(
156+
newMigrationData?.destination_stack?.selectedOrg?.value,
157+
newMigrationData?.destination_stack?.selectedStack?.value
158+
);
159+
};
160+
const addRowComp = () =>{
161+
setnewEntry(true);
162+
setcmsLocaleOptions((prevList: any) => [
163+
...prevList, // Keep existing elements
164+
{
165+
label: `${prevList.length + 1}`, // Generate new label
166+
value: 'name'
167+
}
168+
]);
169+
170+
171+
}
172+
173+
const handleDeleteLocale= (id:number, locale: any) => {
174+
setcmsLocaleOptions((prevList) => {
175+
return prevList.filter((item:any) => item.label !== locale.label)});
176+
177+
}
178+
179+
return(
180+
<div className="mini-table">
181+
{isLoading ?
182+
<CircularLoader></CircularLoader>
183+
:
184+
<>
185+
<MiniScrollableTable
186+
width={"600px"}
187+
headerComponent={<TableHeader
188+
cms={newMigrationData?.legacy_cms?.selectedCms?.parent}/>}
189+
rowComponent={
190+
<Mapper
191+
masterLocale={newMigrationData?.destination_stack?.selectedStack?.master_locale}
192+
options={options}
193+
cmsLocaleOptions={cmsLocaleOptions}
194+
handleLangugeDelete={handleDeleteLocale}
195+
/> }
196+
// footerComponent={
197+
// <Button className="ml-10 mt-10 mb-10"
198+
// buttonType="secondary"
199+
// version={'v2'}
200+
// icon="AddPlus"
201+
// onClick={addRowComp}
202+
// size='small'>
203+
// Add Language
204+
// </Button>
205+
206+
// }
207+
type="Secondary"
208+
/>
209+
<Button className="ml-10 mt-10 mb-10"
210+
buttonType="secondary"
211+
aria-label="add language"
212+
version={'v2'}
213+
icon="AddPlus"
214+
onClick={addRowComp}
215+
size='small'>
216+
Add Language
217+
</Button>
218+
</>
219+
220+
}
221+
222+
</div>
223+
)
224+
225+
}
226+
227+
export default LanguageMapper;

‎ui/src/components/DestinationStack/Actions/singleRowComp.tsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/* Import React modules */
2+
import React, { useState } from "react";
3+
/* Import other node modules */
4+
import { Select, Tooltip, Icon } from "@contentstack/venus-components";
5+
/* Import our modules */
6+
//import { TypeMultiSelectObj, TypeSingleRowComp } from "../../common/types";
7+
//import localeTexts from "../locale/en-us";
8+
/* Import node module CSS */
9+
/* Import our CSS */
10+
11+
const SingleRowComp: React.FC<any> = function () {
12+
const [contentTypes, setContentTypes] = useState<any[]>();
13+
const [metaFields, setMetaFields] = useState<any[]>();
14+
15+
const saveData = () => {
16+
if (contentTypes?.length && metaFields?.length) {
17+
const contentTypesData = contentTypes.map(
18+
(item: any) => item?.label
19+
);
20+
const metaFieldsData = metaFields.map(
21+
(item: any) => item?.label
22+
);
23+
// setList([
24+
// ...list,
25+
// { content_types: contentTypesData, meta_fields: metaFieldsData },
26+
// ]);
27+
// setContentTypes([]);
28+
// setMetaFields([]);
29+
// removeRowComp();
30+
}
31+
};
32+
33+
return (
34+
<div
35+
className="flex-v-center mb-20"
36+
data-testid="mapper-select-container"
37+
>
38+
<Select
39+
value={contentTypes}
40+
options={[]}
41+
placeholder={'select language'}
42+
isSearchable
43+
isClearable
44+
testId="schemaValue-select"
45+
onChange={setContentTypes}
46+
onBlur={saveData}
47+
multiDisplayLimit={2}
48+
isSelectAll
49+
/>
50+
<span> - </span>
51+
<Select
52+
value={metaFields}
53+
options={[]}
54+
placeholder={'select language'}
55+
isSearchable
56+
isClearable
57+
testId="mapperValue-select"
58+
onChange={setMetaFields}
59+
onBlur={saveData}
60+
multiDisplayLimit={2}
61+
isSelectAll
62+
/>
63+
<Tooltip content="Delete" position="top" showArrow={false}>
64+
<Icon
65+
icon="Trash"
66+
size="mini"
67+
//onClick={removeRowComp}
68+
hover
69+
hoverType="secondary"
70+
shadow="medium"
71+
/>
72+
</Tooltip>
73+
</div>
74+
);
75+
};
76+
77+
export default SingleRowComp;

‎ui/src/components/DestinationStack/Actions/tableHeader.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { FieldLabel } from "@contentstack/venus-components";
2+
3+
const TableHeader = ({cms}:{cms:string}) => {
4+
return (
5+
<div className="flex-v-center">
6+
<FieldLabel
7+
htmlFor="Content Types"
8+
className="contentTypeRows__label field-color field-label"
9+
version="v2"
10+
requiredText="(destination language)"
11+
>
12+
Contentstack
13+
</FieldLabel>
14+
15+
<div style={{ marginLeft: "15px" }}>
16+
<FieldLabel
17+
htmlFor="Fields"
18+
className="contentTypeRows__label field-color field-label"
19+
requiredText="(source language)"
20+
version="v2"
21+
>
22+
{cms}
23+
</FieldLabel>
24+
</div>
25+
</div>
26+
);
27+
}
28+
export default TableHeader;

0 commit comments

Comments
 (0)