Revize ed410564

Administation page finished
re #9818

backend/docker-compose.yml

@@ -19 +19 @@
   app: # Spring boot application
     build: .
     container_name: app-backend  # name of the container
-    image: schwobik/backend-app:1.7
+    image: schwobik/backend-app:1.8
     ports:
       - "8080:8080"                 # expose port 8080 out of the docker container do the local machine
     depends_on:
@@ -31 +31 @@
 #     Since our Dockerfile for web-server is located in react-app folder, our build context is ./react-app
     build: ../frontend
     container_name: frontend
-    image: schwobik/frontend-app:1.7
+    image: schwobik/frontend-app:1.8
     ports:
       - "80:80"
 

backend/src/main/java/cz/zcu/kiv/backendapi/config/CorsConfig.java

@@ -14 +14 @@
     public void addCorsMappings(CorsRegistry registry) {
         registry.addMapping("/**")
                 .allowedOrigins("*")
-                .allowedMethods("GET", "POST", "DELETE", "PUT", "OPTIONS");
+                .allowedMethods("GET", "POST", "DELETE", "PUT", "OPTIONS", "PATCH");
     }
 }

backend/src/main/java/cz/zcu/kiv/backendapi/security/SecurityConfig.java

@@ -21 +21 @@
 import org.springframework.web.cors.CorsConfigurationSource;
 import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
 
+import java.util.Arrays;
+import java.util.Collections;
 import java.util.HashMap;
 import java.util.Map;
 
@@ -124 +126 @@
     @Bean
     CorsConfigurationSource corsConfigurationSource() {
         final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
-        source.registerCorsConfiguration("/**", new CorsConfiguration().applyPermitDefaultValues());
+        CorsConfiguration corsConfiguration = new CorsConfiguration().applyPermitDefaultValues();
+        corsConfiguration.setAllowedMethods(java.util.List.of(HttpMethod.GET.name(), HttpMethod.HEAD.name(), HttpMethod.POST.name(), HttpMethod.DELETE.name(), HttpMethod.PATCH.name(), HttpMethod.PUT.name()));
+        source.registerCorsConfiguration("/**", corsConfiguration);
         return source;
     }
 }

frontend/src/features/Administration/Administration.tsx

@@ -19 +19 @@
 import {
     clear,
     consumeError,
+    resetIsRequestCompleted,
     setLoading,
     setSelectedUser
 } from "./userDetailSlice"
@@ -34 +35 @@
     const loading = useSelector((state: RootState) => state.usersDetail.loading)
     const apiError = useSelector((state: RootState) => state.usersDetail.error)
     const selectedUser = useSelector((state: RootState) => state.usersDetail.selectedUser)
+    const isRequestCompleted = useSelector((state: RootState) => state.usersDetail.isRequestCompleted)
     const [selectedUserId, setSelectedUserId] = useState<number | undefined>(undefined)
 
     // Local state to display any error relevant error
@@ -59 +61 @@
     // Use effect to read the error and consume it
     useEffect(() => {
         if (users.length > 0) {
-            setSelectedUserId(0)
-            dispatch(setSelectedUser(users.at(0)))
-            console.log("selected id: " + selectedUser)
+            // if there is user selected, leave that state - handled by useEffect on isRequestCompleted
+            if (selectedUser !== undefined) {
+                const selUser = users.find(u => u.email === selectedUser.email)
+                if (selUser !== undefined) {
+                    console.log("Selected from before")
+                    console.log(selUser)
+                    setSelectedUserId(users.findIndex(u => u.email === selectedUser.email))
+                    dispatch(setSelectedUser(selUser))
+                    return
+                }
+            } else {
+                setSelectedUserId(0)
+                dispatch(setSelectedUser(users.at(0)))
+            }
         }
-    }, [users])
+    }, [users, dispatch])
+
+    useEffect(() => {
+        if (isRequestCompleted) {
+            dispatch(resetIsRequestCompleted())
+            // dispatch(clear())
+            dispatch(fetchUsers())
+            // setSelectedUserId(0)
+            // dispatch(setSelectedUser(users.at(0)))
+            //
+            // if (users.length > 0) {
+            //     setSelectedUserId(0)
+            //     dispatch(setSelectedUser(users.at(0)))
+            //     console.log("selected id: " + selectedUser)
+            // }
+        }
+    }, [isRequestCompleted, dispatch])
 
 
     // Use effect to read the error and consume it
@@ -87 +116 @@
         }
     }, [dispatch])
 
-    const childClosed = () => {
-        dispatch(clear())
-        dispatch(fetchUsers())
-        setSelectedUserId(0)
-        dispatch(setSelectedUser(users.at(0)))
-    }
-
     return (
         <Fragment>
             <ShowErrorIfPresent err={displayError} />
@@ -129 +151 @@
                     </Grid>
                     <Grid item md={9} xs={6}>
                         {selectedUserId !== undefined  ?
-                            <UserDetail user={selectedUser as UserDto} onClose={childClosed} />
+                            <UserDetail user={selectedUser as UserDto}/>
                         : null }
                     </Grid>
                 </Grid>

frontend/src/features/Administration/UserDetail.tsx

@@ -5 +5 @@
     Paper,
     Typography,
     FormGroup,
-    FormControlLabel, Container
+    FormControlLabel
 } from '@mui/material'
 import React, {Fragment, useEffect, useState} from 'react'
 import axiosInstance from "../../api/api"
@@ -14 +14 @@
 import ClearIcon from "@mui/icons-material/Clear"
 import CheckIcon from '@mui/icons-material/Check';
 import {useDispatch, useSelector} from "react-redux"
-import {fetchUsers, savePermissions} from "./userDetailThunks"
+import {deleteUser, savePermissions} from "./userDetailThunks"
 import {RootState} from "../redux/store"
 import {setSelectedUserPermissions} from "./userDetailSlice"
 
 export interface UserDetailProps {
-    user: UserDto,
-    onClose: () => void
+    user: UserDto
 }
 
 const UserDetail = (props: UserDetailProps) => {
-    const selectedUser = useSelector((state: RootState) => state.usersDetail.selectedUser)
+    const selectedUser: UserDto | undefined = useSelector((state: RootState) => state.usersDetail.selectedUser)
     const [canRead, setCanRead] = useState(selectedUser?.permissions?.canRead)
     const [canWrite, setCanWrite] = useState(selectedUser?.permissions?.canWrite)
     const [canDelete, setCanDelete] = useState(selectedUser?.permissions?.canDelete)
@@ -69 +68 @@
     }
 
 
-    const deleteUser = async () => {
-        const { data, status } = await axiosInstance.delete(
-            `/users/${selectedUser?.email}`
-        )
-        if (status !== 200) {
-            // TODO dodělat zpracování erroru
-            return
-        }
-        props.onClose();
+    const prepareDeleteUser = async () => {
+        dispatch(deleteUser())
     }
 
     const prepareSavePermissions = () => {
         dispatch(setSelectedUserPermissions({canRead: canRead, canWrite: canWrite, canDelete: canDelete}))
         dispatch(savePermissions())
-        dispatch(fetchUsers())
     }
 
     return (
@@ -139 +130 @@
                 <Button startIcon={<ClearIcon />}
                         variant="contained"
                         color="primary"
-                        onClick={deleteUser}
+                        onClick={prepareDeleteUser}
                         sx={{ m: 2 }} >
                     Delete
                 </Button>

frontend/src/features/Administration/userDetailSlice.tsx

@@ -1 +1 @@
 import { createSlice } from '@reduxjs/toolkit'
 import {PermissionDto, UserDto} from '../../swagger/data-contracts'
-import {fetchUsers} from './userDetailThunks'
+import {deleteUser, fetchUsers, savePermissions} from './userDetailThunks'
 import {number} from "yup"
 
 export interface UsersDetailState {
     users: UserDto[] // list of all fetched items
     loading: boolean // whether the users are loading
-    error?: string,
-    selectedUser?: UserDto,
+    error?: string
+    selectedUser?: UserDto
     permissions?: PermissionDto
+    isRequestCompleted: boolean
 }
 
 const initialState: UsersDetailState = {
@@ -16 +17 @@
     loading: true,
     error: undefined,
     selectedUser: undefined,
-    permissions: undefined
+    permissions: undefined,
+    isRequestCompleted: false
 }
 
 const usersDetailSlice = createSlice({
@@ -34 +36 @@
             ...state,
             permissions: action.payload
         }),
+        resetIsRequestCompleted: (state) => ({
+            ...state,
+            isRequestCompleted: false
+        }),
     },
     extraReducers: (builder) => {
         builder.addCase(fetchUsers.pending, (state) => ({
@@ -50 +56 @@
             loading: false,
             error: action.error.message as string,
         }))
+        builder.addCase(savePermissions.fulfilled, (state, action) => ({
+            ...state,
+            isRequestCompleted: true,
+        }))
+        builder.addCase(deleteUser.fulfilled, (state, action) => ({
+            ...state,
+            isRequestCompleted: true,
+        }))
     },
 })
 
@@ -59 +73 @@
     consumeError,
     setSelectedUser,
     setSelectedUserPermissions,
+    resetIsRequestCompleted
 } = usersDetailSlice.actions
 const usersDetailReducer = usersDetailSlice.reducer
 export default usersDetailReducer

frontend/src/features/Administration/userDetailThunks.tsx

@@ -59 +59 @@
         }
     }
 )
+
+export const deleteUser = createAsyncThunk(
+    'usersDetail/deleteUser',
+    async (dispatch, { getState }) => {
+        const { usersDetail } = getState() as { usersDetail: UsersDetailState }
+        console.log("savePermissions called")
+
+        const selectedUser = usersDetail.selectedUser
+
+        if (selectedUser === undefined) {
+            return Promise.reject("User is undefined")
+        }
+        const { data, status } = await axiosInstance.delete(
+            `/users/${selectedUser?.email}`
+        )
+        if (status !== 200) {
+            // TODO dodělat zpracování erroru
+            return Promise.reject("Deleting user failed")
+        }
+        return status
+    }
+)