Give the ability to a user logged in with the admin role to add, edit and delete providers
🏗️ Implementation
[x] organise types in their own types.ts file
[x] Use env var to obtain backend service roles from keycloak
First of all the application needs to know the keycloak service name of the backend api service. This is given as an environment variable named VITE_PIDMR_API_KEYCLOAK_SERVICE_NAME and defaults to backend-service which is used in the local keycloak environment in pidmr api
[x] when user logs in check if has the admin role
Update ProtectedRoute component during keycloak loggin handling to check if user has admin role in the resource access list for the pidmr api backend service (uses env variable mentioned before)
[x] organise Supported Provider list code into a new component
Move code that is used to display the Supported PIDs list into a new component named: SupportedPids
Update routing in App component accordingly. The list now examines if the user is logged in as an administrator and if so displays additional buttons such as
Add new provider button 👉 if pressed redirects to a new component AddEditProvider under the /supported-pids/add route (more on that component in the next paragraph...)
Edit button (on existing providers) 👉 if pressed redirects to a new component AddEditProvider under the /supported-pids/edit/:id route
Delete button (on existing providers)
[x] add AddEditProvider component
A new component has been added which implements the view with the form where the user enters or updates information about a provider. This component accepts a prop (editMode=true/false) and runs in two modes: Add new provider and Update new provider.
Mode: Add Provider
The backend requests and notification message configured according to the mode. When in add provider mode (editMode=false) the component renders an empty form waiting for the user to add information about the new provider. If the user hits submit a POST request is issued in the backend service and a new provider is created.
Mode: Edit Provider
The backend requests and notification message configured according to the mode. When in edit mode ((editMode=true) the component looks for an id parameter in the url path and loads information about that particular provider. The information populates the form and allows the user to edit it. If the user hits submit a PATCH request is issued in the backend service and the provider with the given id is updated.
The AddEditProvider component is used in routes with <AddEditProvider editMode={true|false} />
[x] implement Delete Provider functionality
This is done by introducing a DeleteModal component in order to render a nice pop up confirmation message when a user selects to delete a provider. The delete functionality and the call to the backend service is implemented in the SupportedPids list view page.
[x] use react-hot-toast library to provide nice notification messages
Add a toast placeholder section in the App component so that the notifications have some place to render.
Use toast.success() and toast.error() calls during all add/edit/delete actions and provide meaning full messages (as well as detailed errors by displaying short messages from Backend error responses
🎯 Goal
Give the ability to a user logged in with the admin role to add, edit and delete providers
🏗️ Implementation
[x] organise types in their own types.ts file
[x] Use env var to obtain backend service roles from keycloak First of all the application needs to know the keycloak service name of the backend api service. This is given as an environment variable named
VITE_PIDMR_API_KEYCLOAK_SERVICE_NAMEand defaults tobackend-servicewhich is used in the local keycloak environment in pidmr api[x] when user logs in check if has the admin role Update
ProtectedRoutecomponent during keycloak loggin handling to check if user has admin role in the resource access list for the pidmr api backend service (uses env variable mentioned before)[x] organise Supported Provider list code into a new component Move code that is used to display the Supported PIDs list into a new component named:
SupportedPidsUpdate routing inAppcomponent accordingly. The list now examines if the user is logged in as an administrator and if so displays additional buttons such as/supported-pids/addroute (more on that component in the next paragraph...)/supported-pids/edit/:idroute[x] add
AddEditProvidercomponent A new component has been added which implements the view with the form where the user enters or updates information about a provider. This component accepts a prop (editMode=true/false) and runs in two modes: Add new provider and Update new provider.editMode=false) the component renders an empty form waiting for the user to add information about the new provider. If the user hits submit a POST request is issued in the backend service and a new provider is created.editMode=true) the component looks for an id parameter in the url path and loads information about that particular provider. The information populates the form and allows the user to edit it. If the user hits submit a PATCH request is issued in the backend service and the provider with the given id is updated. The AddEditProvider component is used in routes with<AddEditProvider editMode={true|false} />[x] implement Delete Provider functionality This is done by introducing a DeleteModal component in order to render a nice pop up confirmation message when a user selects to delete a provider. The delete functionality and the call to the backend service is implemented in the SupportedPids list view page.
[x] use react-hot-toast library to provide nice notification messages Add a toast placeholder section in the
Appcomponent so that the notifications have some place to render. Use toast.success() and toast.error() calls during all add/edit/delete actions and provide meaning full messages (as well as detailed errors by displaying short messages from Backend error responses