- unblocked saving call form partially;

src/pages/Users/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { __ } from '@wordpress/i18n';
 import { isEmpty } from 'ramda';
 
@@ -6,13 +6,23 @@ import { isEmpty } from 'ramda';
 import AllUsersTable from './components/AllUsersTable';
 import { Button } from 'primereact/button';
 import { InputText } from 'primereact/inputtext';
-import { InputTextarea } from 'primereact/inputtextarea';
-import { InputSwitch } from 'primereact/inputswitch';
+import { Dropdown } from 'primereact/dropdown';
 import { Dialog } from 'primereact/dialog';
+import UserService from '../../service/user-service';
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+import { storeSet } from '../../store';
+import { klona } from 'klona';
 
 const Users = () => {
     const [isVisibleEditDialog, setIsVisibleEditDialog] = useState(false);
-    const [newUserData, setNewUserData] = useState({});
+    const [newUserData, setNewUserData] = useState({
+        firstName: '',
+        lastName: '',
+        email: '',
+        phoneNumber: '',
+        role: ''
+    });
+    const [roles, setRoles] = useState([]);
 
     const onCreateNewUser = () => {
         setIsVisibleEditDialog(true);
@@ -24,7 +34,13 @@ const Users = () => {
 
     const hideEditDialog = () => {
         setIsVisibleEditDialog(false);
-        setNewUserData({});
+        setNewUserData({
+            firstName: '',
+            lastName: '',
+            email: '',
+            phoneNumber: '',
+            role: ''
+        });
     }
 
     const saveEditDialog = () => {
@@ -32,7 +48,9 @@ const Users = () => {
     }
 
     const onChangeEditItem = (value, key) => {
-
+        const userData = klona(newUserData);
+        userData[key] = value;
+        setNewUserData(userData);
     }
 
     const footerEditDialog = () => {
@@ -45,6 +63,28 @@ const Users = () => {
         </div>
     }
 
+    const getRolesCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const roles = data.data.map(o => ({
+                name: o.roleName,
+                value: o.id
+            }));
+            setRoles(roles)
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetRolesCallback = (data) => {
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    useEffect(() => {
+        if (isVisibleEditDialog) {
+            UserService.getRoles(getRolesCallback, errGetRolesCallback)
+        }
+    }, [isVisibleEditDialog]);
+
     return(
         <div className="appPage">
             <div className="appPage__pageHeader">
@@ -64,24 +104,44 @@ const Users = () => {
 
                 <Dialog
                     visible={isVisibleEditDialog}
-                    modal header={headerEditDialog}
+                    modal
+                    header={headerEditDialog}
                     footer={footerEditDialog}
                     style={{ maxWidth: '600px', width: '100%' }}
                     onHide={hideEditDialog}>
                     <div className="appPage__spacer"></div>
-                    <div className="appForm__field">
-                        <label>{__('Nome', 'gepafin')}</label>
-                        <InputText value={''} onChange={(e) => onChangeEditItem(e.target.value, 'firstName')}/>
+                    <div className="appForm__cols">
+                        <div className="appForm__field">
+                            <label>{__('Nome', 'gepafin')}*</label>
+                            <InputText value={newUserData.firstName}
+                                       onChange={(e) => onChangeEditItem(e.target.value, 'firstName')}/>
+                        </div>
+                        <div className="appForm__field">
+                            <label>{__('Cognome', 'gepafin')}*</label>
+                            <InputText value={newUserData.lastName}
+                                       onChange={(e) => onChangeEditItem(e.target.value, 'lastName')}/>
+                        </div>
+                    </div>
+                    <div className="appForm__cols">
+                        <div className="appForm__field">
+                            <label>{__('Email', 'gepafin')}*</label>
+                            <InputText value={newUserData.email}
+                                       onChange={(e) => onChangeEditItem(e.target.value, 'email')}/>
+                        </div>
+                        <div className="appForm__field">
+                            <label>{__('Telefono', 'gepafin')}</label>
+                            <InputText value={newUserData.phoneNumber}
+                                       onChange={(e) => onChangeEditItem(e.target.value, 'phoneNumber')}/>
+                        </div>
                     </div>
                     <div className="appForm__field">
-                        <label>{__('Cognome', 'gepafin')}</label>
-                        <InputText value={''} onChange={(e) => onChangeEditItem(e.target.value, 'lastName')}/>
-                    </div>
-                    <div className="appForm__field">
-                        <label>{__('Risposta', 'gepafin')}</label>
-                        <InputTextarea value={''} onChange={(e) => onChangeEditItem(e.target.value, 'response')}
-                                       rows={5}
-                                       cols={30}/>
+                        <label>{__('Ruolo', 'gepafin')}</label>
+                        <Dropdown
+                            value={newUserData.role}
+                            onChange={(e) => onChangeEditItem(e.value, 'role')}
+                            options={roles}
+                            optionLabel="name"
+                            optionValue="value"/>
                     </div>
                     <div className="appPage__spacer"></div>
                 </Dialog>