feat: in the split form. Default Dropdown to "No Change" #223

src/components/blocks/LocalMessage.js

@@ -13,7 +13,9 @@ const LocalMessage = ({ type, msg, onClose }) => {
   const ref = useRef(null);
 
   const handleOnClose = () => {
-    onClose();
+    if (onClose) {
+      onClose();
+    }
     if (ref && ref.current) {
       ref.current.remove();
     }

src/components/form/SelectOrganizations.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import styled, { withTheme, css } from 'styled-components';
 import { useSelector } from 'react-redux';
-
+import { useIntl } from 'react-intl';
 import { ArrowDownIcon, MagnifyGlassIcon, CloseIcon } from '../icons';
 import ScrollContainer from 'react-indiana-drag-scroll';
 
@@ -217,7 +217,10 @@ const SelectOrganizations = withTheme(
     placeholder = 'Select',
     width = '200px',
     onChange,
+    displayAllOrganizations = false,
+    displayNoChangeOrganization = false,
   }) => {
+    const intl = useIntl();
     const { organizations } = useSelector(store => store.climateWarehouse);
     const [menuIsVisible, setMenuIsVisible] = useState(false);
     const [selectState, setSelectState] = useState(state);
@@ -226,22 +229,40 @@ const SelectOrganizations = withTheme(
       name: organizations[orgUid].name,
       icon: organizations[orgUid].icon,
     }));
+
     const allOrganizationsItem = {
       orgUid: 'all',
-      name: 'All organizations',
+      name: intl.formatMessage({
+        id: 'all-organizations',
+      }),
       icon: '',
     };
-    organizationsList.unshift(allOrganizationsItem);
+    if (displayAllOrganizations) {
+      organizationsList.unshift(allOrganizationsItem);
+    }
+
+    const noChangeOrganization = {
+      orgUid: 'none',
+      name: intl.formatMessage({
+        id: 'no-change',
+      }),
+      icon: '',
+    };
+    if (displayNoChangeOrganization) {
+      organizationsList.unshift(noChangeOrganization);
+    }
+
     const [optionsList] = useState(organizationsList);
     const [selectedOptions, setSelectedOptions] = useState(
-      selected || [allOrganizationsItem],
+      selected ||
+        (displayAllOrganizations && [allOrganizationsItem]) ||
+        (displayNoChangeOrganization && [noChangeOrganization]) ||
+        null,
     );
     const [searchInputValue, setSearchInputValue] = useState('');
     const [menuTopPosition, setMenuTopPosition] = useState(0);
     const ref = useRef();
-    const selectRef = useRef(); 
-
-    console.log(state, selectState);
+    const selectRef = useRef();
 
     useEffect(() => {
       const newHeight = selectRef.current.clientHeight;

src/components/forms/SplitUnitForm.js

@@ -10,14 +10,14 @@ import {
   InputSizeEnum,
   InputStateEnum,
   StandardInput,
-  Select,
   SelectSizeEnum,
   SelectTypeEnum,
   SelectStateEnum,
   InputVariantEnum,
   Message,
   LocalMessageTypeEnum,
   LocalMessage,
+  SelectOrganizations,
 } from '..';
 import { splitUnits } from '../../store/actions/climateWarehouseActions';
 
@@ -46,7 +46,7 @@ const StyledSplitEntry = styled('div')`
   align-items: flex-end;
 `;
 
-const SplitUnitForm = ({ onClose, organizations, record }) => {
+const SplitUnitForm = ({ onClose, record }) => {
   const dispatch = useDispatch();
   const [data, setData] = useState([
     { unitCount: null, unitOwnerOrgUid: record.unitOwnerOrgUid },
@@ -56,17 +56,6 @@ const SplitUnitForm = ({ onClose, organizations, record }) => {
   const [validationErrors, setValidationErrors] = useState([]);
   const { notification } = useSelector(state => state.app);
 
-  const organizationsArray = Object.keys(organizations).map(key => ({
-    value: key,
-    label: organizations[key].name,
-  }));
-  organizationsArray.unshift({
-    value: record.unitOwnerOrgUid,
-    label: intl.formatMessage({
-      id: 'no-change',
-    }),
-  });
-
   const unitIsSplitable = record.unitCount !== 1;
 
   const validationSchema = yup
@@ -151,6 +140,14 @@ const SplitUnitForm = ({ onClose, organizations, record }) => {
           onClose={() => setValidationErrors([])}
         />
       )}
+      {unitIsSplitable === false && (
+        <LocalMessage
+          msg={intl.formatMessage({
+            id: 'unit-cannot-be-split',
+          })}
+          type={LocalMessageTypeEnum.error}
+        />
+      )}
       <Modal
         onOk={onSubmit}
         onClose={onClose}
@@ -202,23 +199,26 @@ const SplitUnitForm = ({ onClose, organizations, record }) => {
                     </Body>
                   </StyledLabelContainer>
                   <InputContainer>
-                    <Select
+                    <SelectOrganizations
                       size={SelectSizeEnum.large}
                       type={SelectTypeEnum.basic}
                       state={
                         unitIsSplitable
                           ? SelectStateEnum.default
                           : SelectStateEnum.disabled
                       }
-                      options={organizationsArray}
                       placeholder="Select"
                       onChange={value =>
                         setData(prevData => {
                           const newData = [...prevData];
-                          newData[index].unitOwnerOrgUid = value[0].value;
+                          newData[index].unitOwnerOrgUid =
+                            value[0].orgUid !== 'none'
+                              ? value[0].orgUid
+                              : record.unitOwnerOrgUid;
                           return newData;
                         })
                       }
+                      displayNoChangeOrganization
                     />
                   </InputContainer>
                 </StyledFieldContainer>

src/pages/Projects/index.js

@@ -218,6 +218,7 @@ const Projects = withRouter(() => {
                   placeholder={intl.formatMessage({ id: 'filters' })}
                   width="200px"
                   onChange={onOrganizationSelect}
+                  displayAllOrganizations
                 />
               </StyledFiltersContainer>
             )}
@@ -276,9 +277,7 @@ const Projects = withRouter(() => {
                         </StyledCreateOneNowContainer>
                       </>
                     )}
-                    {searchQuery && (
-                      <FormattedMessage id="no-search-results" />
-                    )}
+                    {searchQuery && <FormattedMessage id="no-search-results" />}
                   </H3>
                 </NoDataMessageContainer>
               )}

src/pages/Units/index.js

@@ -232,17 +232,18 @@ const Units = withRouter(() => {
               outline
             />
           </StyledSearchContainer>
-          { tabValue === 0 && 
+          {tabValue === 0 && (
             <StyledFiltersContainer>
               <SelectOrganizations
                 size={SelectSizeEnum.large}
                 type={SelectTypeEnum.basic}
                 placeholder={intl.formatMessage({ id: 'filters' })}
                 width="200px"
                 onChange={onOrganizationSelect}
+                displayAllOrganizations
               />
             </StyledFiltersContainer>
-          }
+          )}
           <StyledButtonContainer>
             {tabValue === 0 && (
               <PrimaryButton
@@ -292,8 +293,7 @@ const Units = withRouter(() => {
                       <>
                         <FormattedMessage id="no-projects-created" />
                         <StyledCreateOneNowContainer
-                          onClick={() => setCreate(true)}
-                        >
+                          onClick={() => setCreate(true)}>
                           <FormattedMessage id="create-one-now" />
                         </StyledCreateOneNowContainer>
                       </>

src/translations/tokens/en-US.json

@@ -138,5 +138,6 @@
   "unit-count-must-be-a-valid-integer": "Unit count is invalid. Add a positive number.",
   "no-change": "No Change",
   "unit-successfully-split": "The unit was successfully split.",
-  "success": "Success"
+  "success": "Success",
+  "all-organizations": "All organizations"
 }

src/translations/tokens/es.json

@@ -110,5 +110,6 @@
   "unit-count-must-be-a-valid-integer": "El recuento de unidades no es válido. Agrega un número positivo.",
   "no-change": "Ningún cambio",
   "unit-successfully-split": "La unidad se dividió con éxito.",
-  "success": "Éxito"
+  "success": "Éxito",
+  "all-organizations": "Todas las organizaciones"
 }

src/translations/tokens/ja.json

@@ -110,5 +110,6 @@
   "unit-count-must-be-a-valid-integer": "ユニット数が無効です。正の数を追加します。",
   "no-change": "変化なし",
   "unit-successfully-split": "ユニットは正常に分割されました。",
-  "success": "成功"
-}
+  "success": "成功",
+  "all-organizations": "すべての組織"
+}