Test for Feature/s06 client user profile

client/src/components/_atoms/Button/Button.tsx

@@ -66,3 +66,5 @@ export default function Button({
 		</button>
 	);
 }
+
+// TODO: repenser les boutons pour que le formulaires se soumette

client/src/components/_atoms/SearchBar/SearchBar.scss

@@ -0,0 +1,44 @@
+@import "@style";
+
+.searchbar {
+    background-color: $primary-dark;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    border-radius: $atoms-radius;
+    font-size: $s;
+
+    & * {
+        color: $font-light;
+        background-color: inherit;
+    }
+
+    &__label {
+        display: none;
+    }
+
+    &__button {
+        border: none;
+        cursor: pointer;
+        line-height: 0;
+
+        &--icon {
+            height: 1rem;
+            width: 1rem;
+            margin-inline-start: 1rem;
+        }
+    }
+
+    &__input {
+        border: none;
+        width: 100%;
+        border-radius: $atoms-radius;
+
+        &:focus {
+            outline: $primary-dark solid 1px;
+            outline-offset: 1px;
+        }
+    }
+}

client/src/components/_atoms/SearchBar/SearchBar.tsx

@@ -0,0 +1,42 @@
+import { Search } from "@/assets/icons/search";
+import "./SearchBar.scss";
+
+const handleSearch = (event: React.FormEvent<HTMLFormElement>) => {
+	event.preventDefault();
+	const query = event.currentTarget.q.value;
+	// biome-ignore lint/suspicious/noConsoleLog: console.log
+	console.log("Recherche pour :", query);
+};
+
+function SearchBar() {
+	return (
+		<form
+			role="search"
+			aria-label="Rechercher sur le site"
+			className="searchbar"
+			onSubmit={handleSearch}
+		>
+			<label htmlFor="search-input" className="searchbar__label">
+				Rechercher
+			</label>
+			<button
+				type="submit"
+				aria-label="Valider la recherche"
+				className="searchbar__button"
+			>
+				<Search aria-hidden="true" className="searchbar__button--icon" />
+			</button>
+			<input
+				type="search"
+				id="search-input"
+				name="q"
+				placeholder="Rechercher..."
+				aria-label="Rechercher un contenu"
+				required
+				className="searchbar__input"
+			/>
+		</form>
+	);
+}
+
+export default SearchBar;

client/src/graphQL/queries/user.ts

@@ -4,8 +4,7 @@ export const GET_ALL_OWNERS = gql`
     query GetAllOwners {
         getAllOwners {
             id
-            lastname
-            firstname
+            name
             email
             phone_number
             city
@@ -19,8 +18,7 @@ export const GET_USER_BY_EMAIL = gql`
     query GetUserByEmail($email: String!) {
         getUserByEmail(email: $email) {
             id
-            lastname
-            firstname
+            name
             email
             phone_number
             city

client/src/layouts/WelcomePage/Footer.tsx

@@ -25,6 +25,7 @@ function Footer() {
 				</div>
 				<div className="welcomepage__footer--contact">
 					<Button
+						style="button"
 						type="button"
 						style="button"
 						className="welcomepage__footer--button"

client/src/main.tsx

@@ -24,13 +24,15 @@ import Contact from "@/pages/WelcomePage/Contact.tsx";
 import DesignSystem from "@/pages/DesignSystem/DesignSystem.tsx";
 import ErrorPage from "./pages/ErrorPage/ErrorPage.tsx";
 import Homepage from "@/pages/Homepage/Homepage.tsx";
+import Id from "@/pages/Trainer/Customers/id/Id.tsx";
+import List from "@/pages/Trainer/Customers/List/List.tsx";
 import Login from "@/pages/Login/Login.tsx";
-import NewPassword from "./pages/Login/NewPassword.tsx";
-import Planning from "./pages/Planning/Planning.tsx";
+import NewPassword from "@/pages/Login/NewPassword.tsx";
 import Profile from "@/pages/Profile/Profile.tsx";
-import Registration from "./pages/Registration/Registration.tsx";
-import ResetLink from "./pages/Login/ResetLink.tsx";
-import ResetPassword from "./pages/Login/ResetPassword.tsx";
+import Registration from "@/pages/Registration/Registration.tsx";
+import ResetPassword from "@/pages/Login/ResetPassword.tsx";
+import ResetLink from "@/pages/Login/ResetLink.tsx";
+import Planning from "./pages/Planning/Planning.tsx";
 import Services from "@/pages/WelcomePage/Services.tsx";
 import TestFileUpload from "./components/TestFileUpload.tsx";
 
@@ -170,11 +172,11 @@ const router = createBrowserRouter([
 						children: [
 							{
 								index: true,
-								element: <p>customers List</p>,
+								element: <List />,
 							},
 							{
 								path: ":id",
-								element: <p>customers/:id</p>,
+								element: <Id />,
 							},
 						],
 					},

client/src/pages/Profile/Profile.scss

@@ -1,120 +1,120 @@
-@import "@style";
-
-.profile {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: 10px;
-    grid-row-gap: 0px;
-
-    &__form {
-        grid-area: 1 / 1 / 2 / 3;
-        background-color: $beige-200;
-        border-radius: $windows-radius;
-        display: flex;
-        flex-direction: column;
-        padding: 1rem;
-        margin: 1rem;
-
-        & label {
-            font-weight: $bold;
-        }
-
-        & input,
-        textarea {
-            padding-inline: 1rem;
-        }
-
-        & textarea {
-            resize: none;
-            height: 10rem;
-            overflow: auto;
-            overflow-wrap: break-word;
-            width: 100%;
-        }
-
-        &--title,
-        &--names {
-            display: flex;
-        }
-
-        &--title {
-            align-items: center;
-            gap: 1rem;
-
-            & h2 {
-                font-size: $xxl;
-            }
-
-            & img {
-                max-height: 11vh;
-            }
-        }
-
-        &--names {
-            display: flex;
-            width: 100%;
-            justify-content: space-between;
-            gap: 1rem;
-
-            & .textInput {
-                width: 50%;
-            }
-        }
-
-        &--button {
-            margin-block: 3rem;
-            width: fit-content;
-            align-self: flex-end;
-        }
-    }
-
-    &__nav {
-        grid-area: 1 / 3 / 2 / 4;
-        display: flex;
-        flex-direction: column;
-        margin-inline-end: 1rem;
-
-        &--button {
-            align-items: stretch;
-        }
-    }
-}
-
-@media screen and (max-width: $mobile) {
-    .profile {
-        display: block;
-
-        &__form {
-
-            &--title {
-                justify-content: space-between;
-
-                & h2 {
-                    width: 70%;
-                    font-size: $xl;
-                }
-            }
-
-            &--names {
-                flex-direction: column;
-
-                & .textInput {
-                    width: 100%;
-                }
-            }
-
-            &--button {
-                width: 100%;
-            }
-        }
-
-        &__nav {
-            margin: 1rem;
-
-            & h3 {
-                display: none;
-            }
-        }
-    }
-}
+@import "@style";
+
+.profile {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 10px;
+    grid-row-gap: 0px;
+
+    &__form {
+        grid-area: 1 / 1 / 2 / 3;
+        background-color: $beige-200;
+        border-radius: $windows-radius;
+        display: flex;
+        flex-direction: column;
+        padding: 1rem;
+        margin: 1rem;
+
+        & label {
+            font-weight: $bold;
+        }
+
+        & input,
+        textarea {
+            padding-inline: 1rem;
+        }
+
+        & textarea {
+            resize: none;
+            height: 10rem;
+            overflow: auto;
+            overflow-wrap: break-word;
+            width: 100%;
+        }
+
+        &--title,
+        &--names {
+            display: flex;
+        }
+
+        &--title {
+            align-items: center;
+            gap: 1rem;
+
+            & h2 {
+                font-size: $xxl;
+            }
+
+            & img {
+                max-height: 11vh;
+            }
+        }
+
+        &--names {
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+            gap: 1rem;
+
+            & .textInput {
+                width: 50%;
+            }
+        }
+
+        &--button {
+            margin-block: 3rem;
+            width: fit-content;
+            align-self: flex-end;
+        }
+    }
+
+    &__nav {
+        grid-area: 1 / 3 / 2 / 4;
+        display: flex;
+        flex-direction: column;
+        margin-inline-end: 1rem;
+
+        &--button {
+            align-items: stretch;
+        }
+    }
+}
+
+@media screen and (max-width: $mobile) {
+    .profile {
+        display: block;
+
+        &__form {
+
+            &--title {
+                justify-content: space-between;
+
+                & h2 {
+                    width: 70%;
+                    font-size: $xl;
+                }
+            }
+
+            &--names {
+                flex-direction: column;
+
+                & .textInput {
+                    width: 100%;
+                }
+            }
+
+            &--button {
+                width: 100%;
+            }
+        }
+
+        &__nav {
+            margin: 1rem;
+
+            & h3 {
+                display: none;
+            }
+        }
+    }
+}