Feature/#271 cv monochrome force create languages section

export-samples/html/cv-monochrome-force.html

@@ -365,30 +365,30 @@
         padding-left: var(--space-24);
       }
 
-      /* icono lenguajes */
-      .lenguage__container {
+      /* section languages */
+      .language__container {
         display: grid;
         padding-inline: var(--space-8);
         grid-template-columns: minmax(100px, auto) minmax(114px, 1fr);
         align-items: center;
         justify-items: start;
       }
-      .lenguage__container + .lenguage__container {
+      .language__container + .language__container {
         padding-top: var(--space-12);
       }
-      .lenguage__title {
+      .language__title {
         color: var(--primary-500);
         font-weight: var(--fw-medium);
       }
-      .lenguage__image {
+      .language__image {
         min-width: 7rem;
         display: flex;
         flex-direction: column;
         align-items: flex-end;
         gap: var(--space-2);
         margin: 0px;
       }
-      .lenguage__icon {
+      .language__icon {
         width: 114px;
         height: 24px;
         clip-path: polygon(0px 100%, 100% 0px, 100% 100%);
@@ -483,7 +483,7 @@
         );
       }
 
-      /* experiencies */
+      /* section experiencies */
       .experiencies__container {
         display: flex;
         flex-direction: column;
@@ -565,7 +565,7 @@
         }
       }
 
-      /* educations */
+      /* section educations */
       .educations {
         padding-bottom: var(--space-8);
       }
@@ -846,31 +846,31 @@ <h2 class="title">Competencias</h2>
       </section>
       <section class="section languages">
         <h2 class="title">Idiomas</h2>
-        <div class="lenguage__container">
-          <p class="lenguage__title">Español</p>
-          <figure type="language" class="lenguage__image">
-            <div class="lenguage__icon level-4"></div>
+        <div class="language__container">
+          <p class="language__title">Español</p>
+          <figure type="language" class="language__image">
+            <div class="language__icon level-4"></div>
             <figcaption class="language__caption">Nativo/Bilingüe</figcaption>
           </figure>
         </div>
-        <div class="lenguage__container">
-          <p class="lenguage__title">Inglés</p>
-          <figure type="language" class="lenguage__image">
-            <div class="lenguage__icon level-3"></div>
+        <div class="language__container">
+          <p class="language__title">Inglés</p>
+          <figure type="language" class="language__image">
+            <div class="language__icon level-3"></div>
             <figcaption class="language__caption">Fluido</figcaption>
           </figure>
         </div>
-        <div class="lenguage__container">
-          <p class="lenguage__title">Alemán</p>
-          <figure type="language" class="lenguage__image">
-            <div class="lenguage__icon level-2"></div>
+        <div class="language__container">
+          <p class="language__title">Alemán</p>
+          <figure type="language" class="language__image">
+            <div class="language__icon level-2"></div>
             <figcaption class="language__caption">Intermedio</figcaption>
           </figure>
         </div>
-        <div class="lenguage__container">
-          <p class="lenguage__title">Gallego</p>
-          <figure type="language" class="lenguage__image">
-            <div class="lenguage__icon level-1"></div>
+        <div class="language__container">
+          <p class="language__title">Gallego</p>
+          <figure type="language" class="language__image">
+            <div class="language__icon level-1"></div>
             <figcaption class="language__caption">Básico</figcaption>
           </figure>
         </div>
@@ -1060,9 +1060,9 @@ <h2 class="title">Educación</h2>
           // Mueve los elementos al contenedor
           myLinks && main.appendChild(myLinks);
           aboutMe && main.appendChild(aboutMe);
-          languages && main.appendChild(languages);
           hardSkills && main.appendChild(hardSkills);
           softSkills && main.appendChild(softSkills);
+          languages && main.appendChild(languages);
           experience && main.appendChild(experience);
           education && main.appendChild(education);
         }

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/html-document-end/html-document-end.ejs

@@ -56,9 +56,9 @@
       // Mueve los elementos al contenedor
       myLinks && main.appendChild(myLinks);
       aboutMe && main.appendChild(aboutMe);
-      languages && main.appendChild(languages);
       hardSkills && main.appendChild(hardSkills);
       softSkills && main.appendChild(softSkills);
+      languages && main.appendChild(languages);
       experience && main.appendChild(experience);
       education && main.appendChild(education);
     }

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/html-document-start/html-document-start.ejs

@@ -365,30 +365,30 @@
         padding-left: var(--space-24);
       }
 
-      /* icono lenguajes */
-      .lenguage__container {
+      /* section languages */
+      .language__container {
         display: grid;
         padding-inline: var(--space-8);
         grid-template-columns: minmax(100px, auto) minmax(114px, 1fr);
         align-items: center;
         justify-items: start;
       }
-      .lenguage__container + .lenguage__container {
+      .language__container + .language__container {
         padding-top: var(--space-12);
       }
-      .lenguage__title {
+      .language__title {
         color: var(--primary-500);
         font-weight: var(--fw-medium);
       }
-      .lenguage__image {
+      .language__image {
         min-width: 7rem;
         display: flex;
         flex-direction: column;
         align-items: flex-end;
         gap: var(--space-2);
         margin: 0px;
       }
-      .lenguage__icon {
+      .language__icon {
         width: 114px;
         height: 24px;
         clip-path: polygon(0px 100%, 100% 0px, 100% 100%);
@@ -483,7 +483,7 @@
         );
       }
 
-      /* experiencies */
+      /* section experiencies */
       .experiencies__container {
         display: flex;
         flex-direction: column;
@@ -565,7 +565,7 @@
         }
       }
 
-      /* educations */
+      /* section educations */
       .educations {
         padding-bottom: var(--space-8);
       }

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/index.ts

@@ -10,4 +10,5 @@ export * from './about-me-section';
 export * from './experience-section';
 export * from './soft-skills-section';
 export * from './relevants-links-section';
-export * from './hard-skills-section';
+export * from './hard-skills-section';
+export * from './language-section';

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/language-section/index.ts

@@ -0,0 +1 @@
+export * from './language-section.part';

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/language-section/labels/index.ts

@@ -0,0 +1,15 @@
+import { Language } from '@/model';
+import { LanguageLabels } from './language-label.model';
+import { spanishLanguageLabels } from './language-spanish-labels.const';
+import { englishLanguageLabels } from './language-english-labels.const';
+
+export const getLabels = (language: Language): LanguageLabels => {
+  switch (language) {
+    case 'es':
+      return spanishLanguageLabels;
+    case 'en':
+      return englishLanguageLabels;
+    default:
+      throw new Error(`Language not supported: ${language}`);
+  }
+};

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/language-section/labels/language-english-labels.const.ts

@@ -0,0 +1,9 @@
+import { LanguageLabels } from './language-label.model';
+
+export const englishLanguageLabels: LanguageLabels = {
+  LANGUAGE_HEADING: 'Languages',
+  LEVEL_ONE: 'Basic',
+  LEVEL_TWO: 'Intermediate',
+  LEVEL_THREE: 'Fluent',
+  LEVEL_FOUR: 'Native/bilingual',
+};

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/language-section/labels/language-label.model.ts

@@ -0,0 +1,7 @@
+export interface LanguageLabels {
+  LANGUAGE_HEADING: string;
+  LEVEL_ONE: string;
+  LEVEL_TWO: string;
+  LEVEL_THREE: string;
+  LEVEL_FOUR: string;
+}

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/language-section/labels/language-spanish-labels.const.ts

@@ -0,0 +1,9 @@
+import { LanguageLabels } from './language-label.model';
+
+export const spanishLanguageLabels: LanguageLabels = {
+  LANGUAGE_HEADING: 'Idiomas',
+  LEVEL_ONE: 'Básico',
+  LEVEL_TWO: 'Intermedio',
+  LEVEL_THREE: 'Fluido',
+  LEVEL_FOUR: 'Nativo/Bilingüe',
+};

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/language-section/language-section.ejs

@@ -0,0 +1,44 @@
+<%_ if (languageCollection && languageCollection.length !== 0) { -%>
+<section class="section languages">
+    <h2 class="title"><%- labels.LANGUAGE_HEADING %></h2>
+
+    <%_ for (const language of languageCollection) { -%>
+      <%_ if (language.level ==='Habilidad básica' || language.level ==='Habilidad limitada en el trabajo') { -%>
+        <div class="language__container">
+          <p class="language__title"><%- language.name %></p>
+          <figure type="language" class="language__image">
+            <div class="language__icon level-1"></div>
+            <figcaption class="language__caption"><%- labels.LEVEL_ONE %></figcaption>
+          </figure>
+        </div>
+      <%_ } -%>
+      <%_ if (language.level ==='Habilidad profesional en el trabajo') { -%>
+        <div class="language__container">
+          <p class="language__title"><%- language.name %></p>
+          <figure type="language" class="language__image">
+            <div class="language__icon level-2"></div>
+            <figcaption class="language__caption"><%- labels.LEVEL_TWO %></figcaption>
+          </figure>
+        </div>
+      <%_ } -%>
+      <%_ if (language.level ==='Habilidad profesional completo') { -%>
+        <div class="language__container">
+          <p class="language__title"><%- language.name %></p>
+          <figure type="language" class="language__image">
+            <div class="language__icon level-3"></div>
+            <figcaption class="language__caption"><%- labels.LEVEL_THREE %></figcaption>
+          </figure>
+        </div>
+      <%_ } -%>
+      <%_ if (language.level ==='Habilidad nativo o bilingüe') { -%>
+        <div class="language__container">
+          <p class="language__title"><%- language.name %></p>
+          <figure type="language" class="language__image">
+            <div class="language__icon level-4"></div>
+            <figcaption class="language__caption"><%- labels.LEVEL_FOUR %></figcaption>
+          </figure>
+        </div>
+      <%_ } -%>
+    <%_ } -%>
+</section>
+<%_ } -%>

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/language-section/language-section.part.ts

@@ -0,0 +1,22 @@
+import ejs from 'ejs';
+import { LanguageVm, mapFromCvToLanguageVm } from '@lemoncode/manfred-common/language-section';
+import { ISO_SPANISH_LANGUAGE } from '@/engine/engine.const';
+import { ManfredAwesomicCV, Settings, Language } from '@/model';
+import { getLabels } from './labels';
+import languageSection from './language-section.ejs?raw';
+
+export const generateLanguageSection = (cv: ManfredAwesomicCV, settings: Settings): string => {
+  const languageSectionVm = mapFromCvToLanguageVm(cv);
+  return generateLanguageSectionInner(languageSectionVm, settings.language);
+};
+
+const generateLanguageSectionInner = (
+  languageSectionVm: LanguageVm[],
+  language: Language = ISO_SPANISH_LANGUAGE
+): string => {
+  const rootObject = {
+    languageCollection: languageSectionVm,
+    labels: getLabels(language),
+  };
+  return ejs.render(languageSection, rootObject);
+};

packages/manfred2html/src/engine/cv-monochrome-force/index.ts

@@ -9,10 +9,11 @@ import {
   generateMainElementStart,
   generateMainElementEnd,
   generateAboutMeSection,
+  generateRelevantsLinksSection,
   generateExperiencesSection,
   generateSoftSkillsSection,
-  generateRelevantsLinksSection,
   generateHardSkillsSection,
+  generateLanguageSection,
 } from './html-parts';
 
 export const exportManfredJSonToCVMonochromeForceHTML = (
@@ -32,19 +33,20 @@ export const exportManfredJSonToCVMonochromeForceHTML = (
   const experienceSection = generateExperiencesSection(manfredJsonContent, settings);
   const softSkillsSection = generateSoftSkillsSection(manfredJsonContent, settings);
   const hardSkillsSection = generateHardSkillsSection(manfredJsonContent, settings);
+  const languageSection = generateLanguageSection(manfredJsonContent, settings);
 
   return `
     ${htmlDocumentStart}
       ${headerElementStart}
         ${profileSection}
       ${headerElementEnd}
       ${mainElementStart}
-        ${aboutMeSection}
-        ${experienceSection}
-        ${softSkillsSection}
         ${relevantsLinksSection}
         ${aboutMeSection}
+        ${softSkillsSection}
         ${hardSkillsSection}
+        ${languageSection}
+        ${experienceSection}
       ${mainElementEnd}
       ${footerSection}
     ${htmlDocumentEnd}