- progress;

src/pages/Domande/index.js

@@ -1,11 +1,127 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { __ } from '@wordpress/i18n';
 
+// api
+import UserService from '../../service/user-service';
+
+// store
+import { storeSet } from '../../store';
+
+// tools
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+
 // components
 import AllDomandeTable from './components/AllDomandeTable';
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
+import { isEmpty, isNil } from 'ramda';
+import { Dropdown } from 'primereact/dropdown';
+import AssignedApplicationService from '../../service/assigned-application-service';
 
 const Domande = () => {
-    return(
+    const [loading, setLoading] = useState(false);
+    const [isVisibleEditDialog, setIsVisibleEditDialog] = useState(false);
+    const [roleId, setRoleId] = useState(0);
+    const [users, setUsers] = useState([]);
+    const [chosenUser, setChosenUser] = useState(0);
+    const [chosenApplication, setChosenApplication] = useState(0);
+
+    const getRolesCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const roles = data.data
+                .filter(o => ['ROLE_PRE_INSTRUCTOR'].includes(o.roleType));
+            if (roles.length) {
+                setRoleId(roles[0].id);
+            }
+        }
+        setLoading(false);
+    }
+
+    const errGetRolesCallback = (data) => {
+        set404FromErrorResponse(data);
+        setLoading(false);
+    }
+
+    const getUsersCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const users = data.data
+                .map(o => ({
+                    name: `${o.firstName} ${o.lastName} (${o.email})`,
+                    value: o.id
+                }));
+            setUsers(users);
+        }
+        setLoading(false);
+    }
+
+    const errGetUsersCallback = (data) => {
+        set404FromErrorResponse(data);
+        setLoading(false);
+    }
+
+    const headerEditDialog = () => {
+        return <span>{__('Assign application', 'gepafin')}</span>
+    }
+
+    const hideEditDialog = () => {
+        setIsVisibleEditDialog(false);
+        setChosenUser(0);
+        setChosenApplication(0);
+    }
+
+    const footerEditDialog = () => {
+        return <div>
+            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined/>
+            <Button
+                type="button"
+                disabled={loading}
+                label={__('Invia', 'gepafin')} onClick={saveEditDialog}/>
+        </div>
+    }
+
+    const openAssignDialog = (applId) => {
+        setChosenApplication(applId)
+        setIsVisibleEditDialog(true);
+    }
+
+    const saveEditDialog = () => {
+        if (chosenUser !== 0 && chosenApplication !== 0) {
+            storeSet.main.setAsyncRequest();
+            AssignedApplicationService.assignApplication(chosenApplication, assignApplCallback, errAssignApplCallback, [
+                ['userId', chosenUser]
+            ]);
+            hideEditDialog();
+        }
+    }
+
+    const assignApplCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errAssignApplCallback = (data) => {
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    useEffect(() => {
+        if (roleId !== 0) {
+            setLoading(true);
+            UserService.getUsers(getUsersCallback, errGetUsersCallback, [['roleId', roleId]])
+        }
+    }, [roleId]);
+
+    useEffect(() => {
+        if (isVisibleEditDialog) {
+            setLoading(true);
+            UserService.getRoles(getRolesCallback, errGetRolesCallback)
+        }
+    }, [isVisibleEditDialog]);
+
+    return (
         <div className="appPage">
             <div className="appPage__pageHeader">
                 <h1>{__('Gestione domande', 'gepafin')}</h1>
@@ -14,8 +130,30 @@ const Domande = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                <AllDomandeTable/>
+                <AllDomandeTable openDialogFn={openAssignDialog}/>
             </div>
+
+            <Dialog
+                visible={isVisibleEditDialog}
+                modal
+                header={headerEditDialog}
+                footer={footerEditDialog}
+                style={{ maxWidth: '600px', width: '100%' }}
+                onHide={hideEditDialog}>
+                <div className="appForm__field">
+                    <label
+                        className={classNames({ 'p-error': isEmpty(chosenUser) || chosenUser === 0 || chosenApplication === 0 })}>
+                        {__('Pre-istruttore', 'gepafin')}*
+                    </label>
+                    <Dropdown
+                        value={chosenUser}
+                        invalid={isEmpty(chosenUser) || chosenUser === 0 || chosenApplication === 0}
+                        onChange={(e) => setChosenUser(e.value)}
+                        options={users}
+                        optionLabel="name"
+                        optionValue="value"/>
+                </div>
+            </Dialog>
         </div>
     )
 }