-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat/(CUST-CPC-1068): Show all customers (#634)
JIRA: https://champlainsaintlambert.atlassian.net/browse/CPC-1068 ## Context: This ticket is about being able, as an Admin, to view every customers (owners) and their personal informations in a page ## Changes * Created a new endpoint to get all owners in the OwnerController * Created the api call method to the new endpoint (getAllOwners.ts) * Created a page where you are able to see all the customers * Adding the routing for getting all the customers in "router.tsx" * Made a test for the get all to verify the users are Admin ## Before and After UI (Required for UI-impacting PRs) 
- Loading branch information
1 parent
9e4c59f
commit 306a47e
Showing
9 changed files
with
268 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
petclinic-frontend/src/features/customers/api/getAllOwners.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| /*import { AxiosResponse } from 'axios'; | ||
| import axiosInstance from '@/shared/api/axiosInstance'; | ||
| import { OwnerResponseModel } from '../models/OwnerResponseModel'; | ||
| export const getAllOwners = async (): Promise< | ||
| AxiosResponse<OwnerResponseModel[]> | ||
| > => { | ||
| return await axiosInstance.get<OwnerResponseModel[]>( | ||
| `http://localhost:8080/api/v2/gateway/owners`, | ||
| ); | ||
| }; | ||
| */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| /* General layout for the table */ | ||
| .owners-container { | ||
| max-width: 900px; | ||
| margin: 50px auto; | ||
| padding: 20px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 10px; | ||
| background-color: #ffffff; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| .owners-container h1 { | ||
| text-align: center; | ||
| margin-bottom: 20px; | ||
| color: #333; | ||
| font-family: 'Arial', sans-serif; | ||
| } | ||
|
|
||
| /* Table styling */ | ||
| .owners-container table { | ||
| width: 100%; | ||
| border-collapse: collapse; | ||
| margin-bottom: 20px; | ||
| font-family: 'Arial', sans-serif; | ||
| } | ||
|
|
||
| .owners-container th, | ||
| .owners-container td { | ||
| padding: 12px 15px; | ||
| text-align: left; | ||
| border-bottom: 1px solid #ddd; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| .owners-container th { | ||
| background-color: #f4f4f4; | ||
| color: #555; | ||
| } | ||
|
|
||
| .owners-container tr:hover { | ||
| background-color: #f9f9f9; | ||
| } | ||
|
|
||
| /* Alternate row background for better readability */ | ||
| .owners-container tbody tr:nth-child(even) { | ||
| background-color: #f2f2f2; | ||
| } | ||
|
|
||
| /* Responsive table on smaller screens */ | ||
| @media screen and (max-width: 768px) { | ||
| .owners-container table { | ||
| width: 100%; | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| .owners-container th, | ||
| .owners-container td { | ||
| padding: 10px; | ||
| } | ||
| } | ||
|
|
||
| /* Buttons and hover effects */ | ||
| .owners-container button { | ||
| padding: 10px 20px; | ||
| background-color: #28a745; | ||
| color: white; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| font-family: 'Arial', sans-serif; | ||
| font-size: 14px; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
|
|
||
| .owners-container button:hover { | ||
| background-color: #218838; | ||
| } | ||
|
|
||
| /* Error styling */ | ||
| .error { | ||
| color: red; | ||
| font-size: 0.8em; | ||
| margin-top: 5px; | ||
| font-family: 'Arial', sans-serif; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import * as React from 'react'; | ||
| import { useEffect, useState } from 'react'; | ||
| import { OwnerResponseModel } from '@/features/customers/models/OwnerResponseModel'; | ||
| import './AllOwners.css'; | ||
|
|
||
| const AllOwners: React.FC = (): JSX.Element => { | ||
| const [owners, setOwners] = useState<OwnerResponseModel[]>([]); | ||
|
|
||
| useEffect(() => { | ||
| // Now handle real-time updates with EventSource | ||
| // Listen for updates in the event stream | ||
|
|
||
| const eventSource = new EventSource( | ||
| 'http://localhost:8080/api/v2/gateway/owners', | ||
|
|
||
| { | ||
| withCredentials: true, | ||
| } | ||
| ); | ||
| eventSource.onmessage = event => { | ||
| try { | ||
| const parsedData: OwnerResponseModel = JSON.parse(event.data); | ||
| setOwners(prevOwners => [...prevOwners, parsedData]); // Add new owner to state | ||
| } catch (error) { | ||
| console.error('Error parsing event data:', error); | ||
| } | ||
| }; | ||
|
|
||
| eventSource.onerror = error => { | ||
| console.error('EventSource error:', error); | ||
| eventSource.close(); // Close the connection on error | ||
| }; | ||
|
|
||
| // Clean up when the component unmounts | ||
| return () => { | ||
| eventSource.close(); | ||
| }; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className="owners-container"> | ||
| <h1>Owners</h1> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>First Name</th> | ||
| <th>Last Name</th> | ||
| <th>Address</th> | ||
| <th>City</th> | ||
| <th>Province</th> | ||
| <th>Telephone</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {owners.map(owner => ( | ||
| <tr key={owner.ownerId}> | ||
| <td>{owner.firstName}</td> | ||
| <td>{owner.lastName}</td> | ||
| <td>{owner.address}</td> | ||
| <td>{owner.city}</td> | ||
| <td>{owner.province}</td> | ||
| <td>{owner.telephone}</td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AllOwners; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters