Dev

backend/database/database.sql

@@ -419,23 +419,16 @@ CREATE TABLE `user` (
 --
 
 LOCK TABLES `user` WRITE;
-/*!40000 ALTER TABLE `user` DISABLE KEYS */
-;
-
-INSERT INTO
-    `user`
-VALUES (
-        1, 'johny', 'demo', '06 87 27 48 94', '[email protected]', '45 rue des cocotiers, Perpignan, 66100', '$2b$05$qmUzhYqnfbiQyfY0NZXaueKkDbInhO4pzZGuLnTT5JAUq5BJgdbeK', 0, 'loremipsul-mdolor'
-    ),
-    (
-        28, 'erftgyhuj', 'rfghj', 'rftgyhuj', '[email protected]', 'dcfvgbh', '$2b$05$8K8lbcHYqN5jZqO8mFzLW.YC8n4yVcIjk8fyz18Ud/vgkMVmfhR/i', 0, ''
-    ),
-    (
-        29, 'cass', 'cassiergegr', '098320498', '[email protected]', 'ç!\"\'(è rye àéç\"!àçé', '$2b$05$AnyuQBLohvbHr79KdBOj9OWmJfpu8ulSY2G2LQgqz/whDlSy1qKbq', 0, 'uploads/05d0d336a101ed3b078b4153b7378bf8.avif'
+/*!40000 ALTER TABLE `user` DISABLE KEYS */;
+INSERT INTO `user` VALUES (1,'johny','demo','0687274894','[email protected]','45 rue des cocotiers, Perpignan, 66100','$2b$05$qmUzhYqnfbiQyfY0NZXaueKkDbInhO4pzZGuLnTT5JAUq5BJgdbeK',0,'loremipsul-mdolor'
+),(
+  28,'erftgyhuj','rfghj','rftgyhuj','[email protected]','dcfvgbh','$2b$05$8K8lbcHYqN5jZqO8mFzLW.YC8n4yVcIjk8fyz18Ud/vgkMVmfhR/i',0,''
+  ),(
+    29,'cass','cassiergegr','098320498','[email protected]','ç!\"\'(è rye àéç\"!àçé','$2b$05$AnyuQBLohvbHr79KdBOj9OWmJfpu8ulSY2G2LQgqz/whDlSy1qKbq',0,'uploads/05d0d336a101ed3b078b4153b7378bf8.avif'
+    ),(
+      44, "John", "Doe", "0606060606", "[email protected]", "06 Ure", "$2b$05$P3w2mRO1X1DPbrVsQocyfupP20xBlgEZGrNfimpoAFCzf4f.mTqTS", 1, 'uploads/05d0d336a101ed3b078b4153b7378bf8.avif'
     );
-/*!40000 ALTER TABLE `user` ENABLE KEYS */
-;
-
+/*!40000 ALTER TABLE `user` ENABLE KEYS */;
 UNLOCK TABLES;
 
 --

frontend/src/App.css

@@ -47,6 +47,10 @@ body {
   height: auto;
 }
 
+.btn {
+  background-color: var(--second-color) !important;
+}
+
 /* Style des boutons */
 .submit-btn {
   background-color: var(--second-color);

frontend/src/components/CardModel/CardOffer.jsx

@@ -1,10 +1,19 @@
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import ButtonMini from "../Boutons/ButtonMini";
 import "./card-model.css";
 import { useGlobalContext } from "../../contexts/GlobalContext";
 
 function CardOffer() {
+  const navigate = useNavigate();
+  const handleClickPostuler = () => navigate("/login");
+  const trimText = (chaine, limite) => {
+    if (chaine.length <= limite) {
+      return chaine;
+    }
+    return `${chaine.slice(0, limite)}...`;
+  };
   const globalContext = useGlobalContext();
   const [offers, setOffers] = useState([]);
   useEffect(() => {
@@ -22,50 +31,22 @@ function CardOffer() {
   }, []);
 
   return (
-    <div>
+    <>
       {offers.map((offer) => (
         <div className="card-container" key={offer.id}>
           <h3 className="label-offre">{offer.title}</h3>
           <h5 className="poste-champs">
             {offer.type} - {offer.city}
           </h5>
           <h4 className="entreprise-champs">{offer.company}</h4>
-          <p className="p-description ">{offer.mission}</p>
-          <ButtonMini textBtn="Postuler" />
+          <p className="p-description ">{trimText(offer.mission, 250)}</p>
+          <ButtonMini onClick={handleClickPostuler} textBtn="Postuler" />
         </div>
       ))}
-    </div>
+    </>
   );
 }
 
-//   return (
-//     <div>
-//       {offers.map((offer) => (
-//         <div className="card-container" key={offer.id}>
-//           {" "}
-//           {/* Ajoutez une clé unique pour chaque élément de la liste */}
-//           <h3 className="label-offre">{offer.title}</h3>{" "}
-//           {/* Utilisez la propriété 'title' pour afficher le titre de l'offre */}
-//           <div className="competence">
-//             {/* Affichez les compétences de l'offre si nécessaire */}
-//             {offer.competences.map((competence) => (
-//               <h3 key={competence.id}>{competence.name}</h3>
-//             ))}
-//           </div>
-//           <h5 className="poste-champs">
-//             {offer.type} - {offer.city}
-//           </h5>
-//           <h4 className="entreprise-champs">{offer.company}</h4>{" "}
-//           {/* Utilisez la propriété 'company' pour afficher le nom de l'entreprise */}
-//           <p className="p-description">{offer.description}</p>{" "}
-//           {/* Utilisez la propriété 'description' pour afficher la description de l'offre */}
-//           <ButtonMini textBtn="Postuler" />
-//         </div>
-//       ))}
-//     </div>
-//   );
-// }
-
 CardOffer.propTypes = {
   offer: PropTypes.shape({
     id: PropTypes.number.isRequired,

frontend/src/components/Dashboards/RowDash.css

@@ -1,25 +1,40 @@
 .offerDash-item {
-  display: flex;
-  justify-content: space-between;
-  box-shadow: 5px 5px 15px 8px rgba(217, 217, 217, 0.53);
-  padding: 10px 35px;
-  margin-bottom: 20px;
-}
-.array-box,
-.bigArray-box {
-  margin-inline: 5px;
-  margin: 25px 0;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  margin-block: 10px;
+  padding: 5px 10px;
+  align-items: center;
+  background-color: var(--background-input);
+  border-radius: 10px;
 }
-.array-box {
-  width: 12%;
-}
-.bigArray-box {
-  width: 32%;
+
+.offerDash-item > p {
+  font-size: 14px;
+  width: 25%;
 }
+
 .icon-dash {
   display: flex;
-  justify-content: space-between;
-  margin: 25px 0;
-  width: 100px;
-  color: var(--second-color);
+  flex-direction: column;
+}
+
+@media screen and (min-width: 1200px) {
+  .offerDash-item > p {
+    font-size: 20px;
+    margin-block: 10px;
+  }
+
+  .offerDash-item > p:nth-child(2) {
+    white-space: initial;
+    max-width: 100px;
+  }
+
+  .icon-dash {
+    flex-direction: row;
+  }
+
+  .icon-dash > button > i {
+    font-size: 20px;
+    margin-right: 20px;
+  }
 }

frontend/src/components/Dashboards/RowDash.jsx

@@ -55,7 +55,6 @@ function RowDash() {
           <p className="array-box">{offer.id}</p>
           <p className="array-box">{offer.company}</p>
           <p className="array-box">{offer.NbrCandidats}</p>
-          <p className="array-box">En ligne</p>
           <p className="bigArray-box">{offer.email}</p>
           <div className="icon-dash">
             <button

frontend/src/components/Dashboards/RowDash2.css

@@ -0,0 +1,55 @@
+.userDash-item {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-block: 10px;
+  padding: 5px 10px;
+  align-items: center;
+  background-color: var(--background-input);
+  border-radius: 10px;
+}
+
+.userDash-item > p {
+  font-size: 14px;
+  width: 14.2%;
+}
+
+.icon-dash {
+  display: flex;
+  flex-direction: column;
+}
+
+@media screen and (min-width: 1200px) {
+  .userDash-item > p {
+    font-size: 20px;
+    margin-block: 10px;
+    width: 14.2%;
+  }
+
+  .field-nbr {
+    max-width: 25px;
+  }
+
+  .field-string {
+    max-width: 155px;
+  }
+
+  .field-long-string {
+    min-width: 210px;
+  }
+
+  .field-bool {
+    max-width: 25px;
+    margin-left: 75px;
+  }
+
+  .icon-dash {
+    flex-direction: row;
+    max-width: 65px;
+    margin-left: 50px;
+  }
+
+  .icon-dash > button > i {
+    font-size: 20px;
+    margin-right: 20px;
+  }
+}

frontend/src/components/Dashboards/RowDash2.jsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from "react";
-import "./RowDash.css";
 import { useGlobalContext } from "../../contexts/GlobalContext";
-// import { useAdminContext } from "../../contexts/AdminContext";
+import { useAdminContext } from "../../contexts/AdminContext";
+import "./RowDash2.css";
 
 function RowDash2() {
   const { apiService } = useGlobalContext();
-  // const { goToEditUser } = useAdminContext();
+  const { goToEditUser } = useAdminContext();
   const [users, setUsers] = useState([]);
 
   const fetchUsers = async () => {
@@ -40,22 +40,22 @@ function RowDash2() {
   return (
     <div className="rowDash-container">
       {users.map((user) => (
-        <div key={user.id} className="offerDash-item">
-          <p className="array-box">{user.id}</p>
-          <p className="array-box">{user.lastname}</p>
-          <p className="array-box">{user.firstname}</p>
-          <p className="array-box">{user.phone}</p>
-          <p className="bigArray-box">{user.email}</p>
-          <p>{user.is_admin}</p>
+        <div key={user.id} className="userDash-item">
+          <p className="field-nbr">{user.id}</p>
+          <p className="field-string">{user.lastname}</p>
+          <p className="field-string">{user.firstname}</p>
+          <p className="field-string">{user.phone}</p>
+          <p className="field-long-string">{user.email}</p>
+          <p className="field-bool">{user.is_admin}</p>
           <div className="icon-dash">
-            {/* <button
+            <button
               type="button"
               aria-label="editeuser"
               onClick={() => goToEditUser(user.id)}
               className="invisible-button"
             >
               <i className="fa-solid fa-pen" />
-            </button> */}
+            </button>
             <button
               type="button"
               aria-label="deleteuser"

frontend/src/components/Dashboards/TitleDashboard.jsx

@@ -1,5 +1,5 @@
-import "./title-dashboard.css";
 import PropTypes from "prop-types";
+import "./title-dashboard.css";
 
 function TitleDashboard({
   labelDash,
@@ -8,6 +8,7 @@ function TitleDashboard({
   labelDash4,
   labelDash5,
   labelDash6,
+  labelDash7,
 }) {
   return (
     <div className="title-container">
@@ -16,7 +17,8 @@ function TitleDashboard({
       <h4 className="title-dash">{labelDash3}</h4>
       <h4 className="title-dash">{labelDash4}</h4>
       <h4 className="title-dash">{labelDash5}</h4>
-      <h4 className="title-dash-action">{labelDash6}</h4>
+      <h4 className="title-dash">{labelDash6}</h4>
+      <h4 className="title-dash">{labelDash7}</h4>
     </div>
   );
 }
@@ -27,6 +29,7 @@ TitleDashboard.propTypes = {
   labelDash4: PropTypes.string.isRequired,
   labelDash5: PropTypes.string.isRequired,
   labelDash6: PropTypes.string.isRequired,
+  labelDash7: PropTypes.string.isRequired,
 };
 
 export default TitleDashboard;