First Commit

frontend/src/components/NewProduct/NewGroup/LineGroup.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const LineGroup = ({ nameSelect, languageOptions, onChange }) => {
+    const [group, setGroup] = useState('')
+    const [language, setLanguage] = useState('')
+    const { t } = useTranslation(["NewProduct"]);
+
+    useEffect(() => {  
+      onChange({
+        group,
+        language,
+        nameSelect
+      });
+    }, [onChange, group, language]);
+    
+    return (
+      <>
+        <div className="form-group">
+            <label htmlFor="command">{t("group")}</label>
+            <input type="language" name="group" id="group" className='form-control width-100' value={group} placeholder={t("group")} onChange={(e) => setGroup(e.target.value)} />
+            <label htmlFor="language">{t("language")}</label>
+            <select name="language" id="language" value={language} className="form-control width-100" onChange={(e) => setLanguage(e.target.value)}>
+                {languageOptions}
+            </select>
+        </div>
+      </>
+    );
+  };

frontend/src/components/NewProduct/NewGroup/NewGroup.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+import {useSelector, useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom';
+import {reset, create} from '../../../features/groups/groupSlice'
+import {FaShoppingCart} from 'react-icons/fa'
+import { LineGroup } from './LineGroup'
+import { toast } from 'react-toastify'
+import Spinner from '../../../components/Spinner'
+import { useTranslation } from 'react-i18next';
+
+export const NewGroup = ({ languagesOption }) => {
+    const {isLoading, isError, isSuccess, message } = useSelector((state) => state.group)
+    const [groups, setGroups] = useState([{key: 0, name: "group0" }])
+    const { t } = useTranslation(["NewProduct"]);
+    const [lineGroupsData, setLineGroupsData] = useState([])
+
+    const dispatch = useDispatch()
+    const navigate = useNavigate()
+
+    useEffect(() => {
+        if (isError)
+            toast.error(message)
+        if (isSuccess) {
+            dispatch(reset())
+            setGroups([{key: 0, name: "group0" }])
+            setLineGroupsData([])
+            toast.success(t("groupSuccess"))
+        }
+    }, [isError, isSuccess, message, navigate, dispatch])
+
+    const onSubmit = (e) => {
+        e.preventDefault()
+
+        const newGroup = {
+            names: lineGroupsData.map((groupLine) => (
+                {
+                    name: groupLine.group,
+                    language: groupLine.language
+                }
+            ))
+        }
+
+        dispatch(create(newGroup))
+    }
+
+    const addOrModifyLineLanguage = (lineLanguage) => {
+        if (languagesOption[0] !== undefined && lineLanguage.language === '')
+            lineLanguage.language = languagesOption[0].key;
+        let existingLine = lineGroupsData.findIndex(lpd => lpd.nameSelect === lineLanguage.nameSelect);
+        if (existingLine === -1)
+            setLineGroupsData(lineGroupsData.concat(lineLanguage))
+        else {
+            lineGroupsData[existingLine] = lineLanguage
+            setLineGroupsData(lineGroupsData)
+        }
+    }
+
+    const addNewGroup = () => {
+        setGroups(groups.concat([
+            {key: groups.length, name: "group" + groups.length }
+        ]));
+    }
+
+    if (isLoading)
+        return <Spinner />
+
+    return (
+        <fieldset>
+            <legend>{t("newGroup")}</legend>
+            <form onSubmit={onSubmit} className="form-group">
+                {
+                    groups.map((item) => (
+                        <LineGroup key={item.key} languageOptions={languagesOption} nameSelect={item.key} onChange={(e) => addOrModifyLineLanguage(e)}/>
+                    ))
+                }
+                <div>
+                    <a onClick={() => addNewGroup()} href="#/" className='btn btn-reverse btn-block'>
+                        <FaShoppingCart /> {t("addNewTranslation")}
+                    </a>
+                </div>
+                <div className="form-group">
+                    <button className="btn btn-block">
+                        {t("submit")}
+                    </button>
+                </div>
+            </form>
+        </fieldset>
+    );
+}
+
+export default NewGroup

frontend/src/components/NewProduct/NewProductItem/LineProductItem.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const LineProductItem = ({ nameSelected, languageOptions, onChange }) => {
+    const [productName, setProductName] = useState('')
+    const [language, setLanguage] = useState('')
+    const { t } = useTranslation(["NewProduct"]);
+
+    useEffect(() => {  
+      onChange({
+        nameSelected,
+        productName,
+        language
+      });
+    }, [onChange, productName, language]);
+    
+    return (
+      <>
+        <div className="form-group">
+            <label htmlFor="product">{t("product")}</label>
+            <input type="text" name="productName" id="productName" className='form-control width-100' value={productName} placeholder={t("product")} onChange={(e) => setProductName(e.target.value)} />
+            <label htmlFor="language">{t("language")}</label>
+            <select name="language" id="language" value={language} className="form-control width-100" onChange={(e) => setLanguage(e.target.value)}>
+                {languageOptions}
+            </select>
+        </div>
+      </>
+    );
+  };

frontend/src/components/NewProduct/NewProductItem/NewProductItem.jsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+import {useSelector, useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom';
+import {reset, create} from '../../../features/products/productSlice'
+import {FaShoppingCart} from 'react-icons/fa'
+import { LineProductItem } from './LineProductItem'
+import { toast } from 'react-toastify'
+import Spinner from '../../../components/Spinner'
+import { useTranslation } from 'react-i18next';
+import {SubGroupSearchBox} from '../../SearchBox/SubGroupSearchBox'
+
+export const NewProductItem = ({ languagesOption }) => {
+    const {isLoading, isError, isSuccess, message } = useSelector((state) => state.product)
+    const [selectedValue, setSelectedValue] = useState([]);
+    const [lineProductsData, setLineProductsData] = useState([{ nameSelected: "product0",productName: "", language: "" }])
+    const [CO2Emissions, setCO2Emission] = useState('0')
+    const [waterEmissions, setWaterEmission] = useState('0')
+    const [amortization, setAmortization] = useState('0')
+    const { t } = useTranslation(["NewProduct"]);
+
+    const dispatch = useDispatch()
+    const navigate = useNavigate()
+
+    useEffect(() => {
+        if (isError)
+            toast.error(message)
+        if (isSuccess) {
+            dispatch(reset())
+            setLineProductsData([{nameSelected: "product0", productName: "", language: "" }])
+            toast.success(t("productSuccess"))
+        }
+    }, [isError, isSuccess, message, navigate, dispatch])
+
+    const onSubmit = (e) => {
+        e.preventDefault()
+
+        const newProduct = {
+            group : selectedValue,
+            CO2: CO2Emissions,
+            water: waterEmissions,
+            amortization: amortization,
+            names: lineProductsData.map((productLine) => (
+                {
+                    name: productLine.productName,
+                    language: productLine.language
+                }
+            ))
+        }
+
+        dispatch(create(newProduct))
+    }
+
+    const addOrModifyLineProduct = (lineProduct) => {
+        if (languagesOption[0] !== undefined && lineProduct.language === '')
+            lineProduct.language = languagesOption[0].key;
+        let existingLine = lineProductsData.findIndex(lpd => lpd.nameSelected === lineProduct.nameSelected);
+        if (existingLine === -1) {
+            setLineProductsData(lineProductsData.concat(lineProduct))
+        }
+        else {
+            lineProductsData[existingLine] = lineProduct
+            setLineProductsData(lineProductsData)
+        }
+    }
+
+    const addNewProduct = () => {
+        addOrModifyLineProduct(
+            { nameSelected: "product" + lineProductsData.length, productName: "", language: "" }
+        );
+    }
+
+    if (isLoading)
+        return <Spinner />
+
+    return (
+        <fieldset>
+            <legend>{t("newProduct")}</legend>
+            <form onSubmit={onSubmit} className="form-group">
+                <label htmlFor="product">{t("product")}</label>
+                <SubGroupSearchBox key="subGroupSelected" className='mbottom-10 width-100' nameSelect="subGroupSelected" onChange={(e) => setSelectedValue(e)} />
+                <label htmlFor="CO2Emissions">{t("CO2Emissions")}</label>
+                <input type="text" key="CO2Emissions" className='mbottom-10 width-100' onChange={(e) => setCO2Emission(e.target.value)} />
+                <label htmlFor="WaterEmissions">{t("waterEmissions")}</label>
+                <input type="text" key="waterEmissions" className='mbottom-10 width-100'onChange={(e) => setWaterEmission(e.target.value)} />
+                <label htmlFor="amortization">{t("amortization")}</label>
+                <input type="text" key="amortization" className='mbottom-10 width-100'onChange={(e) => setAmortization(e.target.value)} />
+                {
+                    lineProductsData.map((item) => (
+                        <LineProductItem key={item.nameSelected} languageOptions={languagesOption} nameSelected={item.nameSelected} onChange={(e) => addOrModifyLineProduct(e)}/>
+                    ))
+                }
+                <div>
+                    <a onClick={() => addNewProduct()} href="#/" className='btn btn-reverse btn-block'>
+                        <FaShoppingCart /> {t("addNewTranslation")}
+                    </a>
+                </div>
+                <div className="form-group">
+                    <button className="btn btn-block">
+                        {t("submit")}
+                    </button>
+                </div>
+            </form>
+        </fieldset>
+    );
+}
+
+export default NewProductItem

frontend/src/components/NewProduct/NewSubGroup/LineSubGroup.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const LineSubGroup = ({ nameSelect, languageOptions, onChange }) => {
+    const [subGroup, setSubGroup] = useState('')
+    const [language, setLanguage] = useState('')
+    const { t } = useTranslation(["NewProduct"]);
+
+    useEffect(() => {  
+      onChange({
+        subGroup,
+        language,
+        nameSelect
+      });
+    }, [onChange, subGroup, language]);
+    
+    return (
+      <>
+        <div className="form-group">
+            <label htmlFor="command">{t("subGroup")}</label>
+            <input type="text" name="subgroup" id="subgroup" className='form-control width-100' value={subGroup} placeholder={t("subGroup")} onChange={(e) => setSubGroup(e.target.value)} />
+            <label htmlFor="language">{t("language")}</label>
+            <select name="language" id="language" value={language} className="form-control width-100" onChange={(e) => setLanguage(e.target.value)}>
+                {languageOptions}
+            </select>
+        </div>
+      </>
+    );
+  };

frontend/src/components/NewProduct/NewSubGroup/NewSubGroup.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+import {useSelector, useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom';
+import {reset, create} from '../../../features/subgroups/subGroupSlice'
+import {FaShoppingCart} from 'react-icons/fa'
+import { LineSubGroup } from './LineSubGroup'
+import { toast } from 'react-toastify'
+import Spinner from '../../../components/Spinner'
+import { useTranslation } from 'react-i18next';
+import {GroupSearchBox} from '../../SearchBox/GroupSearchBox'
+
+export const NewSubGroup = ({ languagesOption }) => {
+    const {isLoading, isError, isSuccess, message } = useSelector((state) => state.group)
+    const [subgroups, setSubGroups] = useState([{key: 0, name: "subgroup0" }])
+    const [selectedValue, setSelectedValue] = useState([]);
+    const { t } = useTranslation(["NewProduct"]);
+    const [lineSubGroupsData, setLineSubGroupsData] = useState([])
+
+    const dispatch = useDispatch()
+    const navigate = useNavigate()
+
+    useEffect(() => {
+        if (isError)
+            toast.error(message)
+        if (isSuccess) {
+            dispatch(reset())
+            setSubGroups([{key: 0, name: "subgroup0" }])
+            setLineSubGroupsData([])
+            toast.success(t("subGroupSuccess"))
+        }
+    }, [isError, isSuccess, message, navigate, dispatch])
+
+    const onSubmit = (e) => {
+        e.preventDefault()
+
+        const newSubGroup = {
+            group : selectedValue,
+            names: lineSubGroupsData.map((subGroupLine) => (
+                {
+                    name: subGroupLine.subGroup,
+                    language: subGroupLine.language
+                }
+            ))
+        }
+
+        dispatch(create(newSubGroup))
+    }
+
+    const addOrModifyLineLanguage = (lineLanguage) => {
+        if (languagesOption[0] !== undefined && lineLanguage.language === '')
+            lineLanguage.language = languagesOption[0].key;
+        let existingLine = lineSubGroupsData.findIndex(lpd => lpd.nameSelect === lineLanguage.nameSelect);
+        if (existingLine === -1)
+            setLineSubGroupsData(lineSubGroupsData.concat(lineLanguage))
+        else {
+            lineSubGroupsData[existingLine] = lineLanguage
+            setLineSubGroupsData(lineSubGroupsData)
+        }
+    }
+
+    const addNewGroup = () => {
+        setSubGroups(subgroups.concat([
+            {key: subgroups.length, name: "subgroup" + subgroups.length }
+        ]));
+    }
+
+    if (isLoading)
+        return <Spinner />
+
+    return (
+        <fieldset>
+            <legend>{t("newSubGroup")}</legend>
+            <form onSubmit={onSubmit} className="form-group">
+                <label htmlFor="group">{t("group")}</label>
+                <GroupSearchBox key="groupSelected" className='mbottom-10' nameSelect="groupSelected" onChange={(e) => setSelectedValue(e)} />
+                {
+                    subgroups.map((item) => (
+                        <LineSubGroup key={item.key} languageOptions={languagesOption} nameSelect={item.key} onChange={(e) => addOrModifyLineLanguage(e)}/>
+                    ))
+                }
+                <div>
+                    <a onClick={() => addNewGroup()} href="#/" className='btn btn-reverse btn-block'>
+                        <FaShoppingCart /> {t("addNewTranslation")}
+                    </a>
+                </div>
+                <div className="form-group">
+                    <button className="btn btn-block">
+                        {t("submit")}
+                    </button>
+                </div>
+            </form>
+        </fieldset>
+    );
+}
+
+export default NewSubGroup