City and Region

src/app/components/CitySelect/index.tsx → src/app/components/City/CitySelect/index.tsx

@@ -7,8 +7,8 @@ import React, {
   import { ActionMeta, OnChangeValue } from 'react-select';
 
   import { Container } from './style';
-  import i18n from '../../i18n';
-  import CreatableSelectInput, { SelectHandles } from '../CreatableSelectInput';
+  import i18n from '../../../i18n';
+  import CreatableSelectInput, { SelectHandles } from '../../CreatableSelectInput';
 
   interface Option {
     readonly label: string;

src/app/components/City/index.tsx

@@ -0,0 +1,112 @@
+import React, { useState, useCallback, useRef, ReactNode } from 'react';
+
+import Button from '../Button';
+import { FiPlus, FiSave, FiTrash2 } from 'react-icons/fi';
+import i18n from '../../i18n';
+import Input from '../Input';
+import { SelectHandles } from '../CreatableSelectInput';
+import ReactModal from 'react-modal';
+import RegionSelect from '../Region/RegionSelect';
+import CreateRegion from '../Region';
+import { useToast } from '../../hooks/toast';
+interface ModalProps {
+  isOpen: boolean;
+  setOpen: () => void;
+}
+
+interface SelectType {
+  id: string;
+  name: string;
+}
+
+const CreateCity: React.FC<ModalProps> = ({ isOpen, setOpen }) => {
+  const { addToast } = useToast();
+
+  const [name, setName] = useState('');
+  const [addingRegion, setAddingRegion] = useState(false);
+  const refRegion = useRef<SelectHandles>(null);
+
+  const handleSave = useCallback(() => {
+    const errors: string[] = [];
+    const region = refRegion.current.getValue<SelectType>();
+
+    if (!name) {
+      errors.push(i18n.t('city.name'));
+    }
+
+    if (!region) {
+      errors.push(i18n.t('city.region'));
+    }
+
+    if (errors.length > 0) {
+      addToast({
+        title: i18n.t('notifications.warning'),
+        type: 'error',
+        description: i18n
+          .t('city.informError')
+          .replace('#errors#', errors.join(', ')),
+      });
+      return;
+    }
+
+    const result = window.api.sendSync('create', {
+      entity: 'City',
+      value: {
+        name,
+        regionId: region.id,
+      },
+    }) as { id: string };
+    setOpen();
+    setName('');
+    return;
+  }, [addToast, name, setOpen]);
+
+  return addingRegion ? (
+    <CreateRegion
+      isOpen={addingRegion}
+      setOpen={() => setAddingRegion(false)}
+    ></CreateRegion>
+  ) : (
+    <ReactModal
+      shouldCloseOnOverlayClick={true}
+      onRequestClose={setOpen}
+      isOpen={isOpen}
+      ariaHideApp={false}
+      className={'city-modal'}
+      overlayClassName="modal-overlay"
+    >
+      <div>
+        <RegionSelect ref={refRegion} containerStyle={{ flexGrow: 2 }} />
+        &nbsp;
+        <Button
+          style={{}}
+          color="primary"
+          onClick={() => setAddingRegion(true)}
+        >
+          <FiPlus size={20} />
+        </Button>
+        &nbsp;
+        <Input
+          containerStyle={{ flexGrow: 1, marginRight: '18px' }}
+          type="text"
+          name="name"
+          label={i18n.t('city.label')}
+          autoFocus
+          onChange={(e) => setName(e.target.value)}
+          value={name}
+          placeholder={i18n.t('city.label')}
+        />
+        &nbsp;
+        <Button
+          color="primary"
+          title={i18n.t('button.save')}
+          onClick={handleSave}
+        >
+          <FiSave size={20} />
+        </Button>
+      </div>
+    </ReactModal>
+  );
+};
+
+export default CreateCity;

src/app/components/City/styles.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import Modal from '../Modal';
+export const Container = styled.div`
+  display: flex;
+  flex-grow: 1;
+`;
+

src/app/components/Country/CountrySelect/index.tsx

@@ -0,0 +1,86 @@
+import React, {
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useState,
+  } from 'react';
+  import { ActionMeta, OnChangeValue } from 'react-select';
+
+  import { Container } from './style';
+  import i18n from '../../../i18n';
+  import CreatableSelectInput, { SelectHandles } from '../../CreatableSelectInput';
+
+  interface Option {
+    readonly label: string;
+    readonly value: string;
+  }
+
+  interface StateProps {
+    containerStyle?: unknown;
+  }
+
+  interface Country {
+    id: string;
+    name: string;
+  }
+
+  const CountrySelect: React.ForwardRefRenderFunction<
+    SelectHandles,
+    StateProps
+  > = ({ containerStyle }, selectRef) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [options, setOptions] = useState<Option[]>([]);
+    const [value, setValue] = useState(undefined);
+
+    useEffect(() => {
+      const result = window.api.sendSync('list', {
+        entity: 'Country',
+      }) as Country[];
+
+      const mappedOptions = result.map((item) => ({
+        label: i18n.t(`countries.${item.name}`),
+        value: item.id.toString(),
+      }));
+
+      setOptions(mappedOptions);
+    }, []);
+
+    const handleChange = (
+      newValue: OnChangeValue<Option, false>,
+      _actionMeta: ActionMeta<Option>
+    ) => {
+      setValue(newValue);
+    };
+
+    useImperativeHandle<unknown, SelectHandles>(selectRef, () => ({
+      getValue<T>() {
+        if (!value) {
+          return undefined;
+        }
+
+        return { id: value.value, name: value.label } as unknown as T;
+      },
+      clear() {
+        handleChange(null, null);
+      },
+    }));
+
+    return (
+      <Container style={containerStyle}>
+        <CreatableSelectInput
+          isClearable
+          label={i18n.t('country.label')}
+          placeholder={i18n.t('country.select')}
+          noOptionsMessage={() => i18n.t('country.selectEmpty')}
+          isDisabled={isLoading}
+          isLoading={isLoading}
+          onChange={handleChange}
+          options={options}
+          value={value}
+        />
+      </Container>
+    );
+  };
+
+  export default forwardRef(CountrySelect);
+

src/app/components/Person/Create/index.tsx

@@ -1,9 +1,4 @@
-import React, {
-  useState,
-  useMemo,
-  useCallback,
-  useRef,
-} from 'react';
+import React, { useState, useMemo, useCallback, useRef } from 'react';
 import Button from '../../Button';
 import { FiPlus, FiSave, FiTrash2 } from 'react-icons/fi';
 import i18n from '../../../i18n';
@@ -16,7 +11,9 @@ import ContactTypeSelect from '../../ContactTypeSelect';
 
 import { ButtonContainer, Container, List, ListItem, Row } from './styles';
 import ProfileSelect from '../../ProfileSelect';
-import CitySelect from '../../CitySelect';
+import CitySelect from '../../City/CitySelect';
+import UserTypeSelect from '../../UserTypeSelect';
+import CreateCity from '../../City';
 
 interface SelectType {
   id: string;
@@ -38,6 +35,7 @@ const CreatePerson: React.FC = () => {
   const [zipcode, setZipcode] = useState('');
   const [neighborhood, setNeighborhood] = useState('');
   const [publicPlace, setPublicPlace] = useState('');
+  const [addingCity, setAddingCity] = useState(false);
 
   const [selectedSection, setSelectedSection] = useState('contacts');
 
@@ -55,6 +53,8 @@ const CreatePerson: React.FC = () => {
   const [profiles, setProfiles] = useState<SelectType[]>([]);
   const refProfile = useRef<SelectHandles>(null);
 
+  const refUserType = useRef<SelectHandles>(null);
+
   const handleAddContact = useCallback(() => {
     const contactType = refTypeContact.current.getValue<SelectType>();
     const errors: string[] = [];
@@ -121,21 +121,57 @@ const CreatePerson: React.FC = () => {
       });
       return;
     }
-  }, [complement, zipcode, neighborhood, publicPlace]);
+  }, [complement, zipcode, neighborhood, publicPlace, addToast]);
 
   const handleSave = useCallback(() => {
+    const errors: string[] = [];
+    const userType = refUserType.current.getValue<SelectType>();
+
+    if (!userType) {
+      errors.push(i18n.t('person.userType'));
+    }
+
+    if (!name) {
+      errors.push(i18n.t('person.name'));
+    }
+
+    if (!login) {
+      errors.push(i18n.t('person.login'));
+    }
+
+    if (!document) {
+      errors.push(i18n.t('person.document'));
+    }
+
+    if (errors.length > 0) {
+      addToast({
+        title: i18n.t('notifications.warning'),
+        type: 'error',
+        description: i18n
+          .t('person.informError')
+          .replace('#errors#', errors.join(', ')),
+      });
+      return;
+    }
+
     const result = window.api.sendSync('create', {
       entity: 'User',
       value: {
         name,
         login,
         password,
-        document,
         language,
         notes,
+        document,
+        userTypeId: userType.id
       },
     }) as { id: string };
+  }, [addToast, document, language, login, name, notes, password]);
+
+  const handleCLoseCity = useCallback(() => {
+    setAddingCity((oldState) => !oldState);
   }, []);
+
   return (
     <Container>
       <>
@@ -157,6 +193,7 @@ const CreatePerson: React.FC = () => {
             value={name}
             placeholder={i18n.t('person.name')}
           />
+          <UserTypeSelect ref={refUserType} containerStyle={{ flexGrow: 2 }} />
           <Input
             containerStyle={{ flexGrow: 1, marginRight: '18px' }}
             type="text"
@@ -254,7 +291,15 @@ const CreatePerson: React.FC = () => {
                 containerStyle={{ flexGrow: 2 }}
               />
               &nbsp;
-              <Button style={{}} color="primary" onClick={handleAddContact}>
+              <CreateCity
+                isOpen={addingCity}
+                setOpen={handleCLoseCity}
+              ></CreateCity>
+              <Button
+                style={{}}
+                color="primary"
+                onClick={() => setAddingCity(true)}
+              >
                 <FiPlus size={20} />
               </Button>
               &nbsp;