diff --git a/Frontend/components/cvTemplateSelection.tsx b/Frontend/components/cvTemplateSelection.tsx index 155dad6..3d4e1a8 100644 --- a/Frontend/components/cvTemplateSelection.tsx +++ b/Frontend/components/cvTemplateSelection.tsx @@ -15,11 +15,28 @@ import { useStore } from "@nanostores/react"; export const CVTemplateShowcase = () => { const router = useRouter(); const selectedTemplate = useStore($selectedTemplate); - const templates = [ - { id: 1, selectedColor: "purple-rose", image: bender }, - { id: 2, selectedColor: "blue-teal", image: bender }, - { id: 3, selectedColor: "orange-yellow", image: bender }, - { id: 4, selectedColor: "green-lime", image: bender }, + const templatesModern1 = [ + { id: 1, selectedColor: "grayScale", image: bender }, + { id: 2, selectedColor: "blueShades", image: bender }, + { id: 3, selectedColor: "earthTones", image: bender }, + { id: 4, selectedColor: "mintFresh", image: bender }, + { id: 5, selectedColor: "purpleHaze", image: bender }, + { id: 6, selectedColor: "sunsetOrange", image: bender }, + { id: 7, selectedColor: "oceanBreeze", image: bender }, + { id: 8, selectedColor: "roseGold", image: bender }, + ] + const templatesModern2 = [ + { id: 9, selectedColor: "purple-rose", image: bender }, + { id: 10, selectedColor: "blue-teal", image: bender }, + { id: 11, selectedColor: "orange-yellow", image: bender }, + { id: 12, selectedColor: "green-lime", image: bender }, + ]; + + const templatesModern3 = [ + { id: 13, selectedColor: "greenGold", image: bender }, + { id: 14, selectedColor: "navyBlue", image: bender }, + { id: 15, selectedColor: "burgundy", image: bender }, + { id: 16, selectedColor: "charcoal", image: bender }, ]; const handleCardClick = (template: SelectedTemplate) => { @@ -38,21 +55,80 @@ export const CVTemplateShowcase = () => { return (

- Professionnel et élégant + Modernes et minimalistes +

+
+
+ {templatesModern1.map((template) => ( +
handleCardClick(template)} + > + {`Template +
+ ))} +
+
+

+ Colorés et créatifs +

+
+
+ {templatesModern2.map((template) => ( +
handleCardClick(template)} + > + {`Template +
+ ))} +
+
+

+ Professionels et élégants

- {templates.map((template) => ( + {templatesModern3.map((template) => (
handleCardClick(template)} > @@ -67,16 +143,16 @@ export const CVTemplateShowcase = () => {
))}
-
+
); }; diff --git a/Frontend/components/personalInfoForm.tsx b/Frontend/components/personalInfoForm.tsx index c0e6503..7d8f739 100644 --- a/Frontend/components/personalInfoForm.tsx +++ b/Frontend/components/personalInfoForm.tsx @@ -20,6 +20,7 @@ export const PersonalInfoForm: React.FC = () => { const formData = useStore($formData); const selectedTemplate = useStore($selectedTemplate); + console.log(selectedTemplate); const handlePersonalInfoChange = ( e: React.ChangeEvent ) => { @@ -129,6 +130,7 @@ export const PersonalInfoForm: React.FC = () => { values={{ data: formData, selectedColor: selectedTemplate && selectedTemplate.selectedColor, + templateId: selectedTemplate?.id ?? 1 }} /> diff --git a/Frontend/components/printableTemplate.tsx b/Frontend/components/printableTemplate.tsx index 6e0a9ca..41fb93c 100644 --- a/Frontend/components/printableTemplate.tsx +++ b/Frontend/components/printableTemplate.tsx @@ -1,24 +1,37 @@ "use client"; import { forwardRef } from "react"; +import { ColorSchemeName1, ColorSchemeName2, ColorSchemeName3, ModernCV1Props } from "@/utils/templatesType"; +import ModernCV1 from "./resumesTemplates/MRT1"; import ModernCV2 from "./resumesTemplates/MRT2"; -import { mockData } from "@/utils/mock"; -import { ColorSchemeName, Props } from "@/utils/templatesType"; +import ModernCV3 from "./resumesTemplates/MRT3"; -export type DataType = Props["data"]; +export type DataType = ModernCV1Props["data"]; type PrintableTemplateProps = { data: DataType; - selectedColor: ColorSchemeName; + selectedColor: ColorSchemeName1 | ColorSchemeName2 | ColorSchemeName3; + templateId: number; }; const PrintableTemplate = forwardRef( - ({ data, selectedColor }, ref) => { - // TODO: Rendre ce btn dynamique + ({ data, selectedColor, templateId }, ref) => { +const renderTemplate = () => { + if (templateId >= 1 && templateId <= 8) { + return ; + } else if (templateId >= 9 && templateId <= 12) { + return ; + } else if (templateId >= 13 && templateId <= 16) { + return ; + } else { + return
Template non trouvé
; + } +}; + return (
- + {renderTemplate()}
); @@ -26,4 +39,4 @@ const PrintableTemplate = forwardRef( ); PrintableTemplate.displayName = "PrintableTemplate"; -export { PrintableTemplate }; +export { PrintableTemplate }; \ No newline at end of file diff --git a/Frontend/components/printbutton.tsx b/Frontend/components/printbutton.tsx index 0cbd904..4392d73 100644 --- a/Frontend/components/printbutton.tsx +++ b/Frontend/components/printbutton.tsx @@ -1,14 +1,14 @@ "use client"; -import { FileTextIcon } from "lucide-react"; import { useRef } from "react"; import { useReactToPrint } from "react-to-print"; import { DataType, PrintableTemplate } from "./printableTemplate"; import { Button } from "./ui/button"; -import { ColorSchemeName } from "@/utils/templatesType"; +import { ColorSchemeName1, ColorSchemeName2, ColorSchemeName3 } from "@/utils/templatesType"; type FormData = { selectedColor: string | null; data: DataType; + templateId: number; // Ajout de cette ligne }; interface RequestEvaluationDocumentButtonProps { @@ -33,12 +33,13 @@ const PrintButton = ({ values }: RequestEvaluationDocumentButtonProps) => { > Générer le Cv ); }; -export { PrintButton }; +export { PrintButton }; \ No newline at end of file diff --git a/Frontend/components/resumesTemplates/MRT1.tsx b/Frontend/components/resumesTemplates/MRT1.tsx new file mode 100644 index 0000000..59ea06b --- /dev/null +++ b/Frontend/components/resumesTemplates/MRT1.tsx @@ -0,0 +1,112 @@ +import React from "react"; +import Image from "next/image"; +import { ModernCV1Props } from "@/utils/templatesType"; +import { ColorScheme1 } from "@/utils/TemplatesColors"; + +export const ModernCV1 = ({ data, selectedColor }: ModernCV1Props) => { + const { personalInfo, education, experiences, skills, languages, interests } = data; + + return ( +
+
+
+ {personalInfo.photo && ( + Profile + )} +
+
+

{personalInfo.fullName}

+

{experiences[0]?.jobTitle}

+
+
+ +
+
+
+

Informations

+
    +
  • Téléphone: {personalInfo.phoneNumber}
    • +
  • Email: {personalInfo.email}
    • +
  • Adresse: {personalInfo.postalAddress}
    • +
  • Date de naissance: {personalInfo.dateOfBirth}
    • +
  • Permis: {personalInfo.drivingLicenseType}
    • +
  • LinkedIn: {personalInfo.linkedinUrl}
    • +
+
+ +
+

Compétences

+
    + {skills.map((item, index) => ( +
  • + {item.skill} +
    +
    +
    +
    • + ))} +
+
+ +
+

Langues

+
    + {languages.map((item, index) => ( +
  • {`${item.language} - ${item.proficiencyLevel}`}
    • + ))} +
+
+ +
+

Centres d'intérêt

+
    + {interests.map((item, index) => ( +
  • {item}
    • + ))} +
+
+
+ +
+
+

Expériences professionnelles

+ {experiences.map((experience, index) => ( +
+

{experience.jobTitle}

+

{experience.companyName}

+

{`${experience.startDate} - ${experience.endDate || 'Présent'}`}

+
    + {experience.technicalSkills.split('\n').map((item, i) => ( +
  • {item}
    • + ))} +
+
+ ))} +
+ +
+

Formation

+ {education.map((formation, index) => ( +
+

{formation.degree}

+

{formation.institution}

+

{formation.yearObtained}

+
+ ))} +
+
+
+
+ ); +}; + +export default ModernCV1; \ No newline at end of file diff --git a/Frontend/components/resumesTemplates/MRT2.tsx b/Frontend/components/resumesTemplates/MRT2.tsx index 74dbbf3..300b06d 100644 --- a/Frontend/components/resumesTemplates/MRT2.tsx +++ b/Frontend/components/resumesTemplates/MRT2.tsx @@ -1,18 +1,20 @@ /* eslint-disable react/no-unescaped-entities */ import React from "react"; import Image from "next/image"; -import { Props } from "@/utils/templatesType"; -import { ColorScheme } from "@/utils/TemplatesColors"; +import { ModernCV2Props } from "@/utils/templatesType"; +import { ColorScheme2 } from "@/utils/TemplatesColors"; -export const ModernCV2 = ({ data, selectedColor }: Props) => { +export const ModernCV2 = ({ data, selectedColor }: ModernCV2Props) => { const { personalInfo, education, experiences, skills, languages, interests } = data; + + console.log(selectedColor); return (
{personalInfo.photo && ( @@ -41,14 +43,14 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

Informations

  • Adresse: @@ -56,7 +58,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {
  • Date de naissance: @@ -64,7 +66,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {
  • Permis: @@ -72,13 +74,13 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {
  • LinkedIn: {personalInfo.linkedinUrl} @@ -88,7 +90,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

    Compétences

    @@ -97,10 +99,10 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {
  • {item.skill}
    @@ -111,7 +113,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

    Langues

    @@ -119,7 +121,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => { {languages.map((item, index) => (
  • {item.language} - + {item.proficiencyLevel}
    • @@ -129,7 +131,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

    Centres d'intérêt

    @@ -137,7 +139,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => { {interests.map((item, index) => (
  • {item}
    • @@ -150,7 +152,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

    Expériences professionnelles

    @@ -159,7 +161,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

    {experience.jobTitle}

    -

    +

    {experience.companyName}

    {`${ @@ -176,7 +178,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

    Formation

    @@ -185,7 +187,7 @@ export const ModernCV2 = ({ data, selectedColor }: Props) => {

    {formation.degree}

    -

    +

    {formation.institution}

    diff --git a/Frontend/components/resumesTemplates/MRT3.tsx b/Frontend/components/resumesTemplates/MRT3.tsx new file mode 100644 index 0000000..77ae113 --- /dev/null +++ b/Frontend/components/resumesTemplates/MRT3.tsx @@ -0,0 +1,117 @@ +import React from "react"; +import Image from "next/image"; +import { ModernCV3Props } from "@/utils/templatesType"; +import { ColorScheme3 } from "@/utils/TemplatesColors"; + +export const ModernCV3 = ({ data, selectedColor }: ModernCV3Props) => { + const { personalInfo, education, experiences, skills, languages, interests } = data; + + return ( +

    +
    +
    + {personalInfo.photo && ( + Profile + )} +
    +

    {personalInfo.fullName}

    +

    {experiences[0]?.jobTitle}

    +
    +
    +
    +

    {personalInfo.phoneNumber}

    +

    {personalInfo.email}

    +
    +
    + +
    +
    +
    +

    Informations

    +
      +
    • Adresse: {personalInfo.postalAddress}
      • +
    • Date de naissance: {personalInfo.dateOfBirth}
      • +
    • Permis: {personalInfo.drivingLicenseType}
      • +
    • LinkedIn: {personalInfo.linkedinUrl}
      • +
    +
    + +
    +

    Compétences

    +
      + {skills.map((item, index) => ( +
    • + {item.skill} +
      +
      +
      +
      • + ))} +
    +
    + +
    +

    Langues

    +
      + {languages.map((item, index) => ( +
    • + {item.language} + {item.proficiencyLevel} +
      • + ))} +
    +
    + +
    +

    Centres d'intérêt

    +
      + {interests.map((item, index) => ( +
    • {item}
      • + ))} +
    +
    +
    + +
    +
    +

    Expériences professionnelles

    + {experiences.map((experience, index) => ( +
    +

    {experience.jobTitle}

    +

    {experience.companyName}

    +

    {`${experience.startDate} - ${experience.endDate || 'Présent'}`}

    +
      + {experience.technicalSkills.split('\n').map((item, i) => ( +
    • {item}
      • + ))} +
    +
    + ))} +
    + +
    +

    Formation

    + {education.map((formation, index) => ( +
    +

    {formation.degree}

    +

    {formation.institution}

    +

    {formation.yearObtained}

    +
    + ))} +
    +
    +
    +
    + ); +}; + +export default ModernCV3; \ No newline at end of file diff --git a/Frontend/utils/TemplatesColors.ts b/Frontend/utils/TemplatesColors.ts index 9d7644d..516b5bd 100644 --- a/Frontend/utils/TemplatesColors.ts +++ b/Frontend/utils/TemplatesColors.ts @@ -1,4 +1,71 @@ -export const ColorScheme = { +export const ColorScheme1 = { + "grayScale": { + headerBg: "bg-gray-800", + headerText: "text-gray-100", + accentText: "text-gray-700", + accentBg: "bg-gray-200", + accentBorder: "border-gray-300", + progressFill: "bg-gray-600" + }, + "blueShades": { + headerBg: "bg-blue-800", + headerText: "text-blue-100", + accentText: "text-blue-700", + accentBg: "bg-blue-100", + accentBorder: "border-blue-200", + progressFill: "bg-blue-600" + }, + "earthTones": { + headerBg: "bg-amber-800", + headerText: "text-amber-100", + accentText: "text-amber-700", + accentBg: "bg-amber-50", + accentBorder: "border-amber-200", + progressFill: "bg-amber-600" + }, + "mintFresh": { + headerBg: "bg-emerald-700", + headerText: "text-emerald-100", + accentText: "text-emerald-700", + accentBg: "bg-emerald-50", + accentBorder: "border-emerald-200", + progressFill: "bg-emerald-600" + }, + "purpleHaze": { + headerBg: "bg-purple-700", + headerText: "text-purple-100", + accentText: "text-purple-700", + accentBg: "bg-purple-50", + accentBorder: "border-purple-200", + progressFill: "bg-purple-600" + }, + "sunsetOrange": { + headerBg: "bg-orange-600", + headerText: "text-orange-100", + accentText: "text-orange-700", + accentBg: "bg-orange-50", + accentBorder: "border-orange-200", + progressFill: "bg-orange-500" + }, + "oceanBreeze": { + headerBg: "bg-cyan-700", + headerText: "text-cyan-100", + accentText: "text-cyan-700", + accentBg: "bg-cyan-50", + accentBorder: "border-cyan-200", + progressFill: "bg-cyan-600" + }, + "roseGold": { + headerBg: "bg-rose-600", + headerText: "text-rose-100", + accentText: "text-rose-700", + accentBg: "bg-rose-50", + accentBorder: "border-rose-200", + progressFill: "bg-rose-500" + }, +}; + +export const ColorScheme2 = { "purple-rose": { bgGradient: "from-purple-100 to-pink-100", headerGradient: "from-purple-500 to-pink-500", @@ -40,3 +107,34 @@ export const ColorScheme = { tagText: "text-green-600", }, }; + +export const ColorScheme3 = { + "greenGold": { + headerBg: "from-green-700 to-green-900", + accentBorder: "border-green-700", + accentText: "text-green-800", + accentBg: "bg-green-100", + progressFill: "bg-green-600" + }, + "navyBlue": { + headerBg: "from-blue-800 to-blue-950", + accentBorder: "border-blue-800", + accentText: "text-blue-900", + accentBg: "bg-blue-100", + progressFill: "bg-blue-700" + }, + "burgundy": { + headerBg: "from-red-800 to-red-950", + accentBorder: "border-red-800", + accentText: "text-red-900", + accentBg: "bg-red-100", + progressFill: "bg-red-700" + }, + "charcoal": { + headerBg: "from-gray-700 to-gray-900", + accentBorder: "border-gray-700", + accentText: "text-gray-800", + accentBg: "bg-gray-100", + progressFill: "bg-gray-600" + } +}; diff --git a/Frontend/utils/templatesType.ts b/Frontend/utils/templatesType.ts index f6a5920..134ffdd 100644 --- a/Frontend/utils/templatesType.ts +++ b/Frontend/utils/templatesType.ts @@ -1,5 +1,5 @@ import { StaticImageData } from "next/image"; -import { ColorScheme } from "./TemplatesColors"; +import { ColorScheme1, ColorScheme2, ColorScheme3, } from "./TemplatesColors"; export type PersonalInfo = { fullName: string; @@ -35,9 +35,11 @@ export type Language = { language: string; proficiencyLevel: string; }; -export type ColorSchemeName = keyof typeof ColorScheme; +export type ColorSchemeName1 = keyof typeof ColorScheme1; +export type ColorSchemeName2 = keyof typeof ColorScheme2; +export type ColorSchemeName3 = keyof typeof ColorScheme3; -export type Props = { +export type ModernCV1Props = { data: { personalInfo: PersonalInfo; education: Education[]; @@ -47,20 +49,28 @@ export type Props = { interests: string[]; }; - selectedColor: ColorSchemeName; + selectedColor: ColorSchemeName1 ; }; -type ColorScheme = { - bgGradient: string; - headerGradient: string; - accentText: string; - accentBorder: string; - progressBg: string; - progressFill: string; - tagBg: string; - tagText: string; +export type ModernCV2Props = { + data: { + personalInfo: PersonalInfo; + education: Education[]; + experiences: Experience[]; + skills: Skill[]; + languages: Language[]; + interests: string[]; + }; + selectedColor: ColorSchemeName2; }; - -export type ColorSchemes = { - [K in ColorSchemeName]: ColorScheme; +export type ModernCV3Props = { + data: { + personalInfo: PersonalInfo; + education: Education[]; + experiences: Experience[]; + skills: Skill[]; + languages: Language[]; + interests: string[]; + }; + selectedColor: ColorSchemeName3; };