claudiabdm · claudiabdm · Feb 28, 2024 · Feb 28, 2024 · Feb 28, 2024 · Feb 28, 2024
diff --git a/components/CvDynamicSection.vue b/components/CvDynamicSection.vue
@@ -28,8 +28,8 @@ function focusEditor(id: string) {
     </button>
     <ul class="col-span-full">
       <li
-        v-for="(entry, index) in entries"
-        :key="index"
+        v-for="entry in entries"
+        :key="entry.id"
       >
         <expansion-panel
           :panel-name="`${entry.title}`"
@@ -59,15 +59,15 @@ function focusEditor(id: string) {
               <div class="form__group col-span-full">
                 <label
                   class="form__label"
-                  :for="`entryTitle--${entry.title}`"
+                  :for="`entryTitle--${entry.id}`"
                 >
                   <template v-if="sectionName === 'education'">🎓</template>
                   <template v-else-if="sectionName === 'projects'">✨</template>
                   <template v-else>💼</template>
                   {{ $t("title") }}
                 </label>
                 <input
-                  :id="`entryTitle--${entry.title}`"
+                  :id="`entryTitle--${entry.id}`"
                   v-model="entry.title"
                   class="form__control"
                   type="text"
@@ -76,10 +76,10 @@ function focusEditor(id: string) {
               <div class="form__group col-span-full">
                 <label
                   class="form__label"
-                  :for="`entryLocation-${entry.title}`"
+                  :for="`entryLocation-${entry.id}`"
                 >📍 {{ $t("location") }}</label>
                 <input
-                  :id="`entryLocation-${entry.title}`"
+                  :id="`entryLocation-${entry.id}`"
                   v-model="entry.location"
                   class="form__control"
                   type="text"
@@ -88,10 +88,10 @@ function focusEditor(id: string) {
               <div class="form__group col-span-full">
                 <label
                   class="form__label"
-                  :for="`entryFrom-${entry.title}`"
+                  :for="`entryFrom-${entry.id}`"
                 >📆 {{ $t("from") }}</label>
                 <input
-                  :id="`entryFrom-${entry.title}`"
+                  :id="`entryFrom-${entry.id}`"
                   v-model="entry.from"
                   class="form__control"
                   type="date"
@@ -100,7 +100,7 @@ function focusEditor(id: string) {
               <div class="form__group col-span-full">
                 <label
                   class="form__label flex justify-between"
-                  :for="`entryTo-${entry.title}`"
+                  :for="`entryTo-${entry.id}`"
                 >
                   📆 {{ $t("to") }}
                   <label class="form__label flex items-center">
@@ -114,7 +114,7 @@ function focusEditor(id: string) {
                 </label>
                 <input
                   v-if="!entry.current"
-                  :id="`entryTo-${entry.title}`"
+                  :id="`entryTo-${entry.id}`"
                   v-model="entry.to"
                   class="form__control"
                   type="date"
@@ -123,13 +123,14 @@ function focusEditor(id: string) {
               <div class="form__group col-span-full">
                 <label
                   class="form__label"
-                  :for="`entrySummary-${entry.title}`"
-                  @click="focusEditor(`entrySummary-${entry.title}`)"
+                  :for="`entrySummary-${entry.id}`"
+                  @click="focusEditor(`entrySummary-${entry.id}`)"
                 >📝 {{ $t("summary") }}</label>
                 <CvTextEditor
-                  :id="`entrySummary-${entry.title}`"
+                  :id="`entrySummary-${entry.id}`"
                   v-model="entry.summary"
                   class="form__control"
+                  :read-only="false"
                 />
               </div>
             </div>

diff --git a/components/CvPreview.vue b/components/CvPreview.vue
@@ -26,7 +26,7 @@ export default defineComponent({
     })
 
     function orderEvents(arr: CvEvent[]): CvEvent[] {
-      return arr.sort(
+      return [...arr].sort(
         (a, b) => new Date(b.from).getTime() - new Date(a.from).getTime(),
       )
     }
@@ -324,7 +324,7 @@ export default defineComponent({
           <ul class="cv__event mt-3">
             <li
               v-for="job in work"
-              :key="job.title"
+              :key="job.id"
               class="cv__event-elem"
             >
               <h5 class="cv__section-title cv__section-title--sm">
@@ -364,7 +364,7 @@ export default defineComponent({
           <ul class="cv__event mt-3">
             <li
               v-for="edu in education"
-              :key="edu.title"
+              :key="edu.id"
               class="cv__event-elem"
             >
               <h5 class="cv__section-title cv__section-title--sm">
@@ -404,7 +404,7 @@ export default defineComponent({
           <ul class="cv__event mt-3">
             <li
               v-for="project in projects"
-              :key="project.title"
+              :key="project.id"
               class="cv__event-elem"
             >
               <h5 class="cv__section-title cv__section-title--sm">

diff --git a/components/CvSettings.vue b/components/CvSettings.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import CvSettingsHistorySection from './CvSettingsHistorySection.vue'
+import { SectionNameList } from '~/types/cvfy'
 import { useCvState } from '~/data/useCvState'
 
 const {
@@ -152,7 +154,8 @@ function getCurrentColor(colorValue: string): {
             v-for="color in config.colors"
             :key="color.color"
             tabindex="0"
-            class="form__btn form__btn--color-theme capitalize" :class="[
+            class="form__btn form__btn--color-theme capitalize"
+            :class="[
               `form__btn--${color.name}`,
               {
                 'form__btn--color-selected':
@@ -410,73 +413,15 @@ function getCurrentColor(colorValue: string): {
       </fieldset>
       <!-- SOCIAL -->
 
-      <!-- WORK EXPERIENCE -->
-      <fieldset class="form__section grid gap-3">
-        <expansion-panel :panel-name="$t('experience')">
-          <template #title>
-            <legend class="form__legend">
-              {{ $t("experience") }}
-            </legend>
-          </template>
-          <template #content>
-            <cv-dynamic-section
-              section-name="work"
-              :entries="formSettings.work"
-            />
-          </template>
-        </expansion-panel>
-      </fieldset>
-      <!-- WORK EXPERIENCE -->
-
-      <!-- EDUCATION -->
-      <fieldset class="form__section grid gap-3">
-        <expansion-panel :panel-name="$t('education')">
-          <template #title>
-            <legend class="form__legend">
-              {{ $t("education") }}
-            </legend>
-          </template>
-          <template #content>
-            <div>
-              <cv-display-checkbox
-                class="form__display-checkbox"
-                :display-section="formSettings.displayEducation"
-                section-name="education"
-              />
-              <cv-dynamic-section
-                section-name="education"
-                :entries="formSettings.education"
-              />
-            </div>
-          </template>
-        </expansion-panel>
-      </fieldset>
-      <!-- EDUCATION -->
-
-      <!-- PROJECTS -->
-      <fieldset class="form__section grid gap-3">
-        <expansion-panel :panel-name="$t('projects')">
-          <template #title>
-            <legend class="form__legend">
-              {{ $t("projects") }}
-            </legend>
-          </template>
-          <template #content>
-            <div>
-              <cv-display-checkbox
-                class="form__display-checkbox"
-                :display-section="formSettings.displayProjects"
-                section-name="projects"
-              />
-              <cv-dynamic-section
-                section-name="projects"
-                :entries="formSettings.projects"
-              />
-            </div>
-          </template>
-        </expansion-panel>
-      </fieldset>
-      <!-- PROJECTS -->
+      <!-- HISTORY SECTIONS -->
+      <CvSettingsHistorySection
+        v-for="(value, key) in SectionNameList"
+        :key="key"
+        :form-settings="formSettings"
+        :section="key"
+        :name="value"
+      />
+      <!-- HISTORY SECTIONS -->
 
       <!-- CTA -->
       <div class="form__section flex flex-col p-6 gap-3">
@@ -605,7 +550,7 @@ function getCurrentColor(colorValue: string): {
       background-color 0.1s linear,
       color 0.1s linear;
 
-    & + & {
+    &+& {
       margin-top: 0.5rem;
     }
 

diff --git a/components/CvSettingsHistorySection.vue b/components/CvSettingsHistorySection.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { Cv, OptionalSection, SectionName, SectionNameList } from '~/types/cvfy'
+
+const props = defineProps<
+  {
+    formSettings: Cv
+    section: SectionName
+    name: typeof SectionNameList[SectionName]
+  }
+>()
+
+const displaySection = computed(() => `display${props.section[0].toLocaleUpperCase}${props.section.slice(1)}` as OptionalSection)
+</script>
+
+<template>
+  <fieldset class="form__section grid gap-3">
+    <expansion-panel :panel-name="$t(name)">
+      <template #title>
+        <legend class="form__legend">
+          {{ $t(name) }}
+        </legend>
+      </template>
+      <template #content>
+        <div>
+          <CvDisplayCheckbox
+            v-if="section !== 'work'"
+            class="form__display-checkbox"
+            :display-section="formSettings[displaySection]"
+            :section-name="name"
+          />
+          <CvDynamicSection
+            :section-name="section"
+            :entries="formSettings[section]"
+          />
+        </div>
+      </template>
+    </expansion-panel>
+  </fieldset>
+</template>
diff --git a/data/useCvState.ts b/data/useCvState.ts
@@ -79,7 +79,8 @@ export function useCvState() {
   }
 
   function addEntry(e: { sectionName: SectionName }) {
-    state.formSettings[e.sectionName].push({
+    state.formSettings[e.sectionName].unshift({
+      id: crypto.randomUUID(),
       title: '',
       location: '',
       from: new Date(),
@@ -92,7 +93,7 @@ export function useCvState() {
   function removeEntry(e: { sectionName: SectionName, entry: CvEvent }) {
     state.formSettings[e.sectionName] = state.formSettings[
       e.sectionName
-    ].filter(entry => entry.title !== e.entry.title)
+    ].filter(entry => entry.id !== e.entry.id)
   }
 
   function uploadCV(e: any): void {

diff --git a/types/cvfy.ts b/types/cvfy.ts
@@ -32,6 +32,7 @@ export interface Cv {
   activeColor: string
 }
 export interface CvEvent {
+  id: string
   title: string
   location: string
   from: Date | any
@@ -40,6 +41,8 @@ export interface CvEvent {
   summary: string
 }
 
+export type OptionalSection = 'displaySocial' | 'displayEducation' | 'displayProjects'
+
 export type SkillType = 'jobSkills' | 'softSkills' | 'languages'
 
 export interface LanguagesSkill {
@@ -51,4 +54,9 @@ export interface DefaultSkill {
   skillType: 'jobSkills' | 'softSkills'
 }
 
-export type SectionName = 'education' | 'work' | 'projects'
+export const SectionNameList = {
+  work: 'experience',
+  education: 'education',
+  projects: 'projects',
+} as const
+export type SectionName = keyof typeof SectionNameList