Fix period calculation in experience

maciekiwaniuk · Jan 23, 2025 · c92cdc0 · c92cdc0
1 parent ca2fd31
commit c92cdc0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 12 deletions.
diff --git a/components/Experience/Experience.vue b/components/Experience/Experience.vue
@@ -91,39 +91,54 @@ function getTranslatedPeriod(startDate: Date, endDate: Date | null): string {
     if (!endDate) {
         endDate = new Date();
     }
-    const yearsDifference = endDate.getFullYear() - startDate.getFullYear();
-    const monthsDifference = (endDate.getMonth() - startDate.getMonth()) + 1;
+
+    let yearsDifference = endDate.getFullYear() - startDate.getFullYear();
+    let monthsDifference = endDate.getMonth() - startDate.getMonth();
+
+    if (monthsDifference < 0) {
+        yearsDifference -= 1;
+        monthsDifference += 12;
+    }
+
+    if (endDate.getDate() >= startDate.getDate()) {
+        monthsDifference += 1;
+    }
+
+    if (monthsDifference === 12) {
+        yearsDifference += 1;
+        monthsDifference = 0;
+    }
 
     let yearsString = '';
     if (yearsDifference === 1) {
         yearsString = t('experience.year');
-    }
-    else if (yearsDifference > 1 && ![12, 13, 14].includes(yearsDifference % 100) && [2, 3, 4].includes(yearsDifference % 10)) {
+    } else if (
+        yearsDifference > 1 &&
+        ![12, 13, 14].includes(yearsDifference % 100) &&
+        [2, 3, 4].includes(yearsDifference % 10)
+    ) {
         yearsString = t('experience.yearsFirstForm');
-    }
-    else if (yearsDifference > 1) {
+    } else if (yearsDifference > 1) {
         yearsString = t('experience.yearsSecondForm');
     }
 
     let monthsString = '';
     if (monthsDifference === 1) {
         monthsString = t('experience.month');
-    }
-    else if (monthsDifference > 1) {
+    } else if (monthsDifference > 1) {
         monthsString = t('experience.months');
     }
 
     if (yearsString && monthsString) {
         return `(${yearsDifference} ${yearsString} ${monthsDifference} ${monthsString})`;
-    }
-    else if (yearsString) {
+    } else if (yearsString) {
         return `(${yearsDifference} ${yearsString})`;
-    }
-    else if (monthsString) {
+    } else if (monthsString) {
         return `(${monthsDifference} ${monthsString})`;
     }
     return '';
 }
+
 </script>
 
 <template>

diff --git a/components/Experience/ExperienceItem.vue b/components/Experience/ExperienceItem.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import TechnologyElement from '~/components/TechnologyElement.vue';
+import ExperienceTimeline from '~/components/Experience/ExperienceTimeline.vue';
 import { useCursorHover } from '~/directives/useCursorHover';
 import { useThemeStore } from '~/stores/theme';
 import type { TechnologyType } from '~/types/TechnologyType';