Add date-fns dependency and enable dateStrings in database connection

Implement findAllByCvId method in CourseManager

Update CSS styles for formation-container

Add CardExperience component

Add CardFormation component

backend/database/client.js

@@ -10,6 +10,7 @@ const client = mysql.createPool({
   user: DB_USER,
   password: DB_PASSWORD,
   database: DB_NAME,
+  dateStrings: true,
 });
 
 // Try to get a connection to the database

backend/database/database.sql

@@ -5,19 +5,9 @@ USE externatic_db;
 
 DROP TABLE IF EXISTS user;
 -- Créer la table "user"
-CREATE TABLE
-    user (
-        id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
-        firstname VARCHAR(100) NOT NULL,
-        lastname VARCHAR(100) NOT NULL,
-        phone VARCHAR(100) NOT NULL,
-        email VARCHAR(100) NOT NULL,
-        address VARCHAR(155) NOT NULL,
-        competence VARCHAR(100),
-        password VARCHAR(100) NOT NULL,
-        is_admin BOOL NOT NULL,
-        UNIQUE (email)
-    );
+CREATE TABLE user (
+    id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, firstname VARCHAR(100) NOT NULL, lastname VARCHAR(100) NOT NULL, phone VARCHAR(100) NOT NULL, email VARCHAR(100) NOT NULL, address VARCHAR(155) NOT NULL, competence VARCHAR(100), password VARCHAR(100) NOT NULL, is_admin BOOL NOT NULL, UNIQUE (email)
+);
 
 -- INSERT INTO user (
 --     firstname,
@@ -27,15 +17,11 @@ CREATE TABLE
 --     address,
 --     password
 -- )
-DROP TABLE
-    IF EXISTS competence;
-
-CREATE TABLE
-    competence (
-        id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
-        name VARCHAR(100),
-        confirmed BOOL
-    );
+DROP TABLE IF EXISTS competence;
+
+CREATE TABLE competence (
+    id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, name VARCHAR(100), confirmed BOOL
+);
 
 -- CREATE
 -- TABLE
@@ -55,160 +41,67 @@ CREATE TABLE
 -- );
 DROP TABLE IF EXISTS cv;
 
-CREATE TABLE
-    cv (
-        id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
-        user_id INT,
-        FOREIGN KEY (user_id) REFERENCES user(id)
-    );
+CREATE TABLE cv (
+    id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, user_id INT, FOREIGN KEY (user_id) REFERENCES user (id)
+);
 
 DROP TABLE IF EXISTS experience;
 
-CREATE TABLE
-    experience (
-        id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
-        title VARCHAR(100) NOT NULL,
-        company VARCHAR(100) NOT NULL,
-        city VARCHAR(100) NOT NULL,
-        type VARCHAR(100) NOT NULL,
-        is_working BOOL,
-        date_begin DATE NOT NULL,
-        date_end DATE,
-        description TEXT,
-        cv_id INT NOT NULL,
-        FOREIGN KEY (cv_id) REFERENCES cv(id)
-    );
+CREATE TABLE experience (
+    id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, title VARCHAR(100) NOT NULL, company VARCHAR(100) NOT NULL, city VARCHAR(100) NOT NULL, type VARCHAR(100) NOT NULL, is_working BOOL, date_begin DATE NOT NULL, date_end DATE, description TEXT, cv_id INT NOT NULL, FOREIGN KEY (cv_id) REFERENCES cv (id)
+);
 
 DROP TABLE IF EXISTS course;
 
-CREATE TABLE
-    course (
-        id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
-        level VARCHAR(100) NOT NULL,
-        domaine VARCHAR(100) NOT NULL,
-        name VARCHAR(100) NOT NULL,
-        date_begin DATE NOT NULL,
-        date_end DATE NOT NULL,
-        description TEXT,
-        cv_id INT,
-        FOREIGN KEY (cv_id) REFERENCES cv(id)
-    );
+CREATE TABLE course (
+    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, level VARCHAR(100) NOT NULL, domaine VARCHAR(100) NOT NULL, name VARCHAR(100) NOT NULL, date_begin DATE NOT NULL, date_end DATE NOT NULL, description TEXT, cv_id INT, FOREIGN KEY (cv_id) REFERENCES cv (id)
+);
 
 DROP TABLE IF EXISTS offer;
 
-CREATE TABLE
-    offer (
-        id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
-        title VARCHAR(100) NOT NULL,
-        company VARCHAR(100) NOT NULL,
-        type VARCHAR(100) NOT NULL,
-        city VARCHAR(100) NOT NULL,
-        mission TEXT NOT NULL,
-        search_profile VARCHAR(100) NOT NULL,
-        work_place VARCHAR(100) NOT NULL,
-        salary VARCHAR(100) NOT NULL,
-        info TEXT NOT NULL,
-        email VARCHAR(100) NOT NULL
-    );
+CREATE TABLE offer (
+    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, title VARCHAR(100) NOT NULL, company VARCHAR(100) NOT NULL, type VARCHAR(100) NOT NULL, city VARCHAR(100) NOT NULL, mission TEXT NOT NULL, search_profile VARCHAR(100) NOT NULL, work_place VARCHAR(100) NOT NULL, salary VARCHAR(100) NOT NULL, info TEXT NOT NULL, email VARCHAR(100) NOT NULL
+);
 
 -- Insérer des données dans la table "user"
 
 -- Insertion manquante pour la table "offer"
 INSERT INTO
     offer (
-        title,
-        company,
-        type,
-        city,
-        mission,
-        search_profile,
-        work_place,
-        salary,
-        info,
-        email
+        title, company, type, city, mission, search_profile, work_place, salary, info, email
     )
 VALUES (
-        "Developpeur Web Front End",
-        "Inov'Tech",
-        "CDD",
-        "Bordeaux",
-        "Tous les 2 ou 3 mois, de nouveaux projets en mode Agile sur les dernières stacks technologiques, toujours effectuées depuis notre plateau Factory pour progresser et développer vos compétences. 15% du temps consacré à des journées de partage technique, exploration, hack time rythmées par nos tribus Web, Mobile, Cloud... Journée de la Factory tous les mois : se retrouver physiquement en sortant des missions pour profiter et explorer ensemble ! Conférences privées organisées par Apple France, Microsoft Des participations à des conférences locales, nationales, internationales (WWDC, AWS Summit) Notre équipe de Chiefs Happiness Officiers bienveillants et surmotivés (animations, défis d'équipe) : Jeux de sociétés tous les midis, dans les locaux, events d'équipe mensuels, vrai bon café gratuit et illimité, baby-foot, mario-kart sur switch Construire un avenir positif en mettant le digital au service de l'humain La possibilité de développer votre expertise Web ou bien de monter en compétences aussi sur Android, sur iOS ou sur la xR (Unity / Unreal Engine) avec les experts de l'équipe Évoluer dans une entreprise qui encourage l'audace, la curiosité et l'envie d'entreprendre",
-        "Junior",
-        "Présent",
-        "35k €/an",
-        "Ce que nous vous proposons : Un accord télétravail pour télétravailler jusqu'à 2 jours par semaine selon vos missions. Un package avantages intéressant : une mutuelle, un CSE, des titres restaurants, un accord d'intéressement, des primes vacances et cooptation. Un accompagnement individualisé avec un mentor.",
-        "[email protected]"
-    ), (
-        "Développeur Front-End",
-        "Diffusez",
-        "CDD",
-        "Lille",
-        "S'approprier le besoin métier Développement front-end Connaissance du W3C Intégrer fidèlement sur base d'une maquette Les missions seront réalisées sous la supervision du Responsable de Projet puis en autonomie selon les opportunités et l'évolution des compétences.",
-        "Junior",
-        "Présent",
-        "25k €/an",
-        "Ce que nous vous proposons : En étude d'informatique Autonome et organisé(e), tu es doté(e) d'un bon esprit d'analyse et d'innovation Esprit de synthèse, Réactivité, autonomie, rigueur et organisation Curieux, Esprit d'équipe, Respect des délais imposés.",
-        "[email protected]"
-    ), (
-        "Développeur Web Junior",
-        "SASU MADE IN SURVEYS",
-        "CDD",
-        "Lille",
-        "Nous recherchons une personne motivée et dynamique avec :
+        "Developpeur Web Front End", "Inov'Tech", "CDD", "Bordeaux", "Tous les 2 ou 3 mois, de nouveaux projets en mode Agile sur les dernières stacks technologiques, toujours effectuées depuis notre plateau Factory pour progresser et développer vos compétences. 15% du temps consacré à des journées de partage technique, exploration, hack time rythmées par nos tribus Web, Mobile, Cloud... Journée de la Factory tous les mois : se retrouver physiquement en sortant des missions pour profiter et explorer ensemble ! Conférences privées organisées par Apple France, Microsoft Des participations à des conférences locales, nationales, internationales (WWDC, AWS Summit) Notre équipe de Chiefs Happiness Officiers bienveillants et surmotivés (animations, défis d'équipe) : Jeux de sociétés tous les midis, dans les locaux, events d'équipe mensuels, vrai bon café gratuit et illimité, baby-foot, mario-kart sur switch Construire un avenir positif en mettant le digital au service de l'humain La possibilité de développer votre expertise Web ou bien de monter en compétences aussi sur Android, sur iOS ou sur la xR (Unity / Unreal Engine) avec les experts de l'équipe Évoluer dans une entreprise qui encourage l'audace, la curiosité et l'envie d'entreprendre", "Junior", "Présent", "35k €/an", "Ce que nous vous proposons : Un accord télétravail pour télétravailler jusqu'à 2 jours par semaine selon vos missions. Un package avantages intéressant : une mutuelle, un CSE, des titres restaurants, un accord d'intéressement, des primes vacances et cooptation. Un accompagnement individualisé avec un mentor.", "[email protected]"
+    ),
+    (
+        "Développeur Front-End", "Diffusez", "CDD", "Lille", "S'approprier le besoin métier Développement front-end Connaissance du W3C Intégrer fidèlement sur base d'une maquette Les missions seront réalisées sous la supervision du Responsable de Projet puis en autonomie selon les opportunités et l'évolution des compétences.", "Junior", "Présent", "25k €/an", "Ce que nous vous proposons : En étude d'informatique Autonome et organisé(e), tu es doté(e) d'un bon esprit d'analyse et d'innovation Esprit de synthèse, Réactivité, autonomie, rigueur et organisation Curieux, Esprit d'équipe, Respect des délais imposés.", "[email protected]"
+    ),
+    (
+        "Développeur Web Junior", "SASU MADE IN SURVEYS", "CDD", "Lille", "Nous recherchons une personne motivée et dynamique avec :
     Un an d'expérience,
     De solides compétences en PHP,
     La maitrise de MySQL, l'intégration HTML - CSS,
     La maitrise de JQuery,
     Un bon niveau d'anglais technique
-.........Tu te retrouves dans le profil de poste ? Alors envoie nous ta candidature :-).",
-        "Junior",
-        "Présent",
-        "25k €/an",
-        "Mis Group, c'est une équipe à taille humaine, jeune et dynamique, située en plein centre de Lille. Nous apportons notre expertise à des cabinets d'études marketing à travers des solutions d'études : études quantitatives en ligne, recrutements de consommateurs, locations de salles pour des réunions de consommateurs, réalisation de visites mystères, réalisation de tests de produits…",
-        "[email protected]"
-    ), (
-        "STAGE DEVELOPPEUR WEB Web",
-        "Massy Production",
-        "CDD",
-        "Bordeaux",
-        "- Connaissance des langages de programmation web tels que HTML5, CSS, JavaScript
+.........Tu te retrouves dans le profil de poste ? Alors envoie nous ta candidature :-).", "Junior", "Présent", "25k €/an", "Mis Group, c'est une équipe à taille humaine, jeune et dynamique, située en plein centre de Lille. Nous apportons notre expertise à des cabinets d'études marketing à travers des solutions d'études : études quantitatives en ligne, recrutements de consommateurs, locations de salles pour des réunions de consommateurs, réalisation de visites mystères, réalisation de tests de produits…", "[email protected]"
+    ),
+    (
+        "STAGE DEVELOPPEUR WEB Web", "Massy Production", "CDD", "Bordeaux", "- Connaissance des langages de programmation web tels que HTML5, CSS, JavaScript
     - Connaissance des principaux Framework et bibliothèque web
-    - Forte motivation à apprendre et à se développer professionnellement.",
-        "Junior",
-        "Présent",
-        "25k €/an",
-        "Nous recherchons un Stagiaire Développeur Web (H/F) pour rejoindre notre équipe dynamique. En tant que stagiaire, chez l'association Nouvelle Voix, vous aurez l'opportunité de mettre en pratique votre créativité et être force de proposition en terme de design ux/ui.",
-        "[email protected]"
-    ), (
-        "Développeur informatique",
-        "Armée de Terre",
-        "CDI",
-        "Bordeaux",
-        "Vos qualités : très méthodique, goût prononcé pour la technologie, réactif
+    - Forte motivation à apprendre et à se développer professionnellement.", "Junior", "Présent", "25k €/an", "Nous recherchons un Stagiaire Développeur Web (H/F) pour rejoindre notre équipe dynamique. En tant que stagiaire, chez l'association Nouvelle Voix, vous aurez l'opportunité de mettre en pratique votre créativité et être force de proposition en terme de design ux/ui.", "[email protected]"
+    ),
+    (
+        "Développeur informatique", "Armée de Terre", "CDI", "Bordeaux", "Vos qualités : très méthodique, goût prononcé pour la technologie, réactif
     À partir du bac
     Homme ou femme, de 18 à 29 ans
-    Nationalité française, en règle avec les obligations du service national JDC et jouissant de ses droits civiques.",
-        "Junior",
-        "Présent",
-        "25k €/an",
-        "Votre spécialité consiste à développer des logiciels au profit du ministère des Armées au sein d'un centre de développement. Sous la conduite d'un chef de projet, vous assurez la maintenance d'applications existantes et vous concevez de nouveaux logiciels liés aux besoins des armées. Vous soutenez les forces déployées depuis le territoire national et vous pouvez éventuellement être projetés sur des postes en dehors de votre compétence principale de développeur. Au bout de 4 à 6 ans, vous pouvez évoluer vers les métiers de la cybersécurité.",
-        "[email protected]"
+    Nationalité française, en règle avec les obligations du service national JDC et jouissant de ses droits civiques.", "Junior", "Présent", "25k €/an", "Votre spécialité consiste à développer des logiciels au profit du ministère des Armées au sein d'un centre de développement. Sous la conduite d'un chef de projet, vous assurez la maintenance d'applications existantes et vous concevez de nouveaux logiciels liés aux besoins des armées. Vous soutenez les forces déployées depuis le territoire national et vous pouvez éventuellement être projetés sur des postes en dehors de votre compétence principale de développeur. Au bout de 4 à 6 ans, vous pouvez évoluer vers les métiers de la cybersécurité.", "[email protected]"
     );
 
 -- Créer la table "user_competence"
-CREATE TABLE
-    user_competence (
-        user_id INT,
-        competence_id INT,
-        PRIMARY KEY (user_id, competence_id),
-        FOREIGN KEY (user_id) REFERENCES user(id),
-        FOREIGN KEY (competence_id) REFERENCES competence(id)
-    );
+CREATE TABLE user_competence (
+    user_id INT, competence_id INT, PRIMARY KEY (user_id, competence_id), FOREIGN KEY (user_id) REFERENCES user (id), FOREIGN KEY (competence_id) REFERENCES competence (id)
+);
 
-CREATE TABLE
-    upload (
-        id int(11) PRIMARY KEY NOT NULL AUTO_INCREMENT,
-        url varchar(255) NOT NULL,
-        unique(url),
-        created_at timestamp default CURRENT_TIMESTAMP
-    );
+CREATE TABLE upload (
+    id int(11) PRIMARY KEY NOT NULL AUTO_INCREMENT, url varchar(255) NOT NULL, unique (url), created_at timestamp default CURRENT_TIMESTAMP
+);

backend/src/controllers/courseControllers.js

@@ -13,7 +13,7 @@ const getCourse = (_, res) => {
 };
 
 const getCoursesByCvId = (req, res) => {
-  models.experience
+  models.course
     .findAllByCvId(req.params.id)
     .then((rows) => {
       res.send(rows);

backend/src/models/CourseManager.js

@@ -42,6 +42,19 @@ class CourseManager extends AbstractManager {
       return null;
     }
   }
+
+  async findAllByCvId(cvId) {
+    try {
+      const [results] = await this.database.query(
+        `SELECT * FROM ${this.table} WHERE cv_id = ?`,
+        [cvId]
+      );
+      return results;
+    } catch (err) {
+      console.error(err);
+      return null;
+    }
+  }
 }
 
 module.exports = CourseManager;

frontend/package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.1",
     "axios": "^1.6.4",
+    "date-fns": "^3.3.1",
     "jwt-decode": "^4.0.0",
     "mdb-react-ui-kit": "^7.0.0",
     "prop-types": "^15.8.1",

frontend/src/components/CardModel/CardExperience.jsx

@@ -0,0 +1,72 @@
+import PropTypes from "prop-types";
+import { format } from "date-fns";
+
+import "./card-model.css";
+
+function CardExperience({
+  id,
+  title,
+  company,
+  type,
+  city,
+  dateBegin,
+  dateEnd,
+  description,
+  handleExperienceDelete,
+}) {
+  const trimText = (chaine, limite) => {
+    if (chaine.length <= limite) {
+      return chaine;
+    }
+    return `${chaine.slice(0, limite)}...`;
+  };
+
+  const dateBeginObject = new Date(dateBegin);
+  const dateEndObject = new Date(dateEnd);
+
+  // Formater les dates selon le modèle souhaité
+  const formattedDateBegin = format(dateBeginObject, "dd/MM/yyyy");
+  const formattedDateEnd = format(dateEndObject, "dd/MM/yyyy");
+  return (
+    <div className="card-container">
+      <div className="card-icons">
+        <div className="icon-view">
+          <button
+            className="invisible-button"
+            aria-label="toggleFavorite"
+            type="button"
+            onClick={() => {
+              handleExperienceDelete(id);
+            }}
+          >
+            <i className="fa-solid fa-trash-can" />
+          </button>
+        </div>
+      </div>
+      <h4 className="date-poste">
+        {formattedDateBegin} au {formattedDateEnd}
+      </h4>
+      <h3 className="label-offre">{title}</h3>
+      <h4 className="entreprise-champs experience">
+        {company} {city}
+      </h4>
+      <h5 className="poste-champs experience">
+        {type} - {city}
+      </h5>
+      <p className="p-description ">{trimText(description, 250)}</p>
+    </div>
+  );
+}
+CardExperience.propTypes = {
+  id: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  company: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  city: PropTypes.string.isRequired,
+  dateBegin: PropTypes.string.isRequired,
+  dateEnd: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  handleExperienceDelete: PropTypes.func.isRequired,
+};
+
+export default CardExperience;