- more api

src/components/Body.vue

@@ -10,7 +10,15 @@ const props = defineProps({
     token: {
         default: null,
         type: [String, null],
-    }
+    },
+    rodo: {
+        default: null,
+        type: [String, null],
+    },
+    loading: {
+        required: true,
+        type: Boolean,
+    },
 });
 
 const qrCodeLink = computed(() => {
@@ -27,6 +35,11 @@ const qrCodeLink = computed(() => {
             <MajorAchivments />
             <Education />
             <div class="print:absolute bottom-5 left-0 w-full pt-3 print:pt-0 px-2 print:px-6 text-[.5rem] leading-3 l text-justify text-[#E57D4C]">
+                <template v-if="!loading">
+                    <template v-if="rodo">
+                        {{ rodo }}
+                    </template>
+                    <template v-else>
                         Wyrażam zgodę na przetwarzanie moich danych osobowych dla potrzeb
                         niezbędnych do realizacji procesu rekrutacji (zgodnie z ustawą z
                         dnia 10 maja 2018 roku o ochronie danych osobowych (Dz. Ustaw z 2018,
@@ -34,7 +47,9 @@ const qrCodeLink = computed(() => {
                         Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie
                         ochrony osób fizycznych w związku z przetwarzaniem danych
                         osobowych i w sprawie swobodnego przepływu takich danych oraz
-                uchylenia dyrektywy 95/46/WE (RODO)
+                        uchylenia dyrektywy 95/46/WE (RODO).
+                    </template>
+                </template>
             </div>
         </div>
         <div class="relative print:w-1/3 print:flex-shrink-1 md:w-1/3 md:flex-shrink-1 bg-[#fff0e9]">

src/components/ContactList.vue

@@ -27,30 +27,6 @@ const location = computed(() => {
 });
 </script>
 
-<style lang="css">
-.animated-bg {
-  animation-duration: 10s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-name: placeHolderShimmer;
-  animation-timing-function: linear;
-  background-color: #f6f7f8;
-  background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
-  position: relative;
-  width: 150px;
-  height: 20px;
-}
-
-@keyframes placeHolderShimmer {
-  0% {
-    background-position: -800px 0
-  }
-  100% {
-    background-position: 800px 0
-  }
-}
-</style>
-
 <template>
     <ul v-if="loading">
         <li class="animated-bg"></li>

src/components/Header.vue

@@ -17,9 +17,39 @@ defineProps({
     locations: {
         type: Array,
     },
+    position: {
+        type: [String, null],
+    },
+    mission: {
+        type: Array,
+    },
 });
 </script>
 
+<style lang="css">
+.animated-bg {
+  animation-duration: 10s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeHolderShimmer;
+  animation-timing-function: linear;
+  background-color: #f6f7f8;
+  background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
+  position: relative;
+  width: 150px;
+  height: 20px;
+}
+
+@keyframes placeHolderShimmer {
+  0% {
+    background-position: -800px 0
+  }
+  100% {
+    background-position: 800px 0
+  }
+}
+</style>
+
 <template>
     <div class="flex justify-between mx-1 mt-1 print:border-b-2 md:border-b-2">
         <div class="flex-shrink-0 w-32 h-32">
@@ -28,7 +58,7 @@ defineProps({
         <div class="flex flex-col flex-shrink-1 justify-center gap-3 w-full px-4 py-3">
             <div>
                 <h1 class="text-2xl pb-0.5">Kamil Niemczycki</h1>
-                <p>Inżynier oprogramowania</p>
+                <p>{{ position ?? 'Inżynier oprogramowania' }}</p>
             </div>
             <ContactList
                 :loading="loading"
@@ -44,5 +74,5 @@ defineProps({
         :tel="tel"
         :locations="locations"
         class="md:hidden print:hidden flex flex-col gap-2 px-5 py-3 border-b text-sm" />
-    <Mission />
+    <Mission :mission="mission" :loading="loading" />
 </template>

src/components/Mission.vue

@@ -1,6 +1,25 @@
+<script setup>
+import { defineProps } from 'vue';
+
+defineProps({
+    loading: {
+        type: Boolean,
+    },
+    mission: {
+        type: Array,
+    },
+});
+</script>
+
 <template>
-    <div class="px-5 py-3 border-b text-justify text-slate-600">
+    <div v-if="loading" class="px-5 py-3 border-b">
+        <p v-for="key in [1, 2, 3]" :key="key" style="width:100%" class="mb-3 last-of-type:mb-0 animated-bg"></p>
+    </div>
+    <div v-else-if="mission.length === 0" class="px-5 py-3 border-b text-justify text-slate-600">
         <p>Ambitny i nastawiony na cel, gotowy do podjęcia wyzwań absolwent informatyki, który szuka pierwszej pracy jako inżynier oprogramowania.</p>
         <p>Wyróżnia mnie pracowitość i umiejętność pracy w zespole. Szybko zdobywam potrzebną mi wiedzę i potrafię ją dobrze wykorzystać. Przyjemność sprawia mi tworzenie web aplikacji. Jestem gotowy by rozwijać swoją wiedzę jak i karierę zawodową w tym kierunku.</p>
     </div>
+    <div v-else class="px-5 py-3 border-b text-justify text-slate-600">
+        <p v-for="(line, key) in mission" :key="key">{{ line }}</p>
+    </div>
 </template>

src/views/Home.vue

@@ -19,6 +19,10 @@ const locations = reactive([
     'Remote',
 ]);
 
+const position = ref(null);
+const mission = reactive([]);
+const rodo = ref(null);
+
 onMounted(() => {
     const router = useRoute();
     token.value = router.params['token'] ?? null;
@@ -48,14 +52,23 @@ function showData(response) {
         const data = response.data;
         email.value = data.email;
         tel.hasPhoneNumber = true;
-        tel.phoneNumber = data.phoneNumber;
+        tel.phoneNumber = data.phone.number;
-        tel.formattedPhoneNumber = data.formattedPhoneNumber;
+        tel.formattedPhoneNumber = data.phone.formattedNumber;
         while(locations.length > 0) {
             locations.pop();
         }
+        if (data.position) {
+            position.value = data.position;
+        }
         data.locations?.forEach(value => {
             locations.push(value);
         });
+        data.mission?.forEach(value => {
+            mission.push(value);
+        });
+        if (data.rodo) {
+            rodo.value = data.rodo;
+        }
         loading.value = false;
     }
 }
@@ -66,7 +79,9 @@ function showData(response) {
         <Header :loading="loading"
                 :email="email"
                 :tel="tel"
-                :locations="locations" />
+                :locations="locations"
-        <Body :token="token" />
+                :position="position"
+                :mission="mission" />
+        <Body :token="token" :rodo="rodo" :loading="loading" />
     </div>
 </template>