kamilniemczycki/toby
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Activity

wip

Browse Source
This commit is contained in:
Adrian Hopek
2022-05-10 10:14:48 +02:00
parent 928d3344c8
commit 5c55f1860a
5 changed files with 226 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
resources/js/Pages/Resumes/Create.vue
View File

@@ -138,10 +138,13 @@
@add-item="addEducation"
@remove-item="(index) => form.educations.splice(index, 1)"
>
<template #itemHeader="{ element }">
<template #itemHeader="{ element, index }">
<template v-if="hasAnyErrorInSection('education', index)">
<ExclamationCircleIcon class="h-6 w-6 mr-2 text-red-600 inline-block" />
</template>
{{ element.school ? element.school : '(Nieokreślony)' }}
</template>
<template #form="{ element }">
<template #form="{ element, index }">
<div class="items-center py-4 sm:grid sm:grid-cols-2">
<label class="block text-sm font-medium text-gray-700 sm:mt-px">
Szkoła
@@ -151,8 +154,14 @@
v-model="element.school"
type="text"
class="block w-full rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': false, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': true }"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.school`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.school`] }"
>
<p
v-if="form.errors[`education.${index}.school`]"
class="mt-2 text-sm text-red-600"
>
{{ form.errors[`education.${index}.school`] }}
</p>
</div>
</div>
<div class="items-center py-4 sm:grid sm:grid-cols-2">
@@ -164,8 +173,14 @@
v-model="element.degree"
type="text"
class="block w-full rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': false, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': true }"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.degree`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.degree`] }"
>
<p
v-if="form.errors[`education.${index}.degree`]"
class="mt-2 text-sm text-red-600"
>
{{ form.errors[`education.${index}.degree`] }}
</p>
</div>
</div>
<div class="items-center py-4 sm:grid sm:grid-cols-2">
@@ -177,8 +192,14 @@
v-model="element.fieldOfStudy"
type="text"
class="block w-full rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': false, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': true }"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.fieldOfStudy`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.fieldOfStudy`] }"
>
<p
v-if="form.errors[`education.${index}.fieldOfStudy`]"
class="mt-2 text-sm text-red-600"
>
{{ form.errors[`education.${index}.fieldOfStudy`] }}
</p>
</div>
</div>
<div class="items-center py-4 sm:grid sm:grid-cols-2">
@@ -190,8 +211,14 @@
v-model="element.startDate"
placeholder="Wybierz datę"
class="block w-full rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': false, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': true }"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.startDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.startDate`] }"
/>
<p
v-if="form.errors[`education.${index}.startDate`]"
class="mt-2 text-sm text-red-600"
>
{{ form.errors[`education.${index}.startDate`] }}
</p>
</div>
</div>
<div class="items-center py-4 sm:grid sm:grid-cols-2">
@@ -203,8 +230,14 @@
v-model="element.endDate"
placeholder="Wybierz datę"
class="block w-full rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': false, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': true }"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`education.${index}.endDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`education.${index}.endDate`] }"
/>
<p
v-if="form.errors[`education.${index}.endDate`]"
class="mt-2 text-sm text-red-600"
>
{{ form.errors[`education.${index}.endDate`] }}
</p>
</div>
</div>
</template>
@@ -216,7 +249,10 @@
@add-item="addLanguage"
@remove-item="(index) => form.languages.splice(index, 1)"
>
<template #itemHeader="{ element }">
<template #itemHeader="{ element, index }">
<template v-if="hasAnyErrorInSection('languages', index)">
<ExclamationCircleIcon class="h-6 w-6 mr-2 text-red-600 inline-block" />
</template>
<template v-if="element.name">
{{ element.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
</template>
@@ -263,7 +299,10 @@
@add-item="addTechnology"
@remove-item="(index) => form.technologies.splice(index, 1)"
>
<template #itemHeader="{ element }">
<template #itemHeader="{ element, index }">
<template v-if="hasAnyErrorInSection('technologies', index)">
<ExclamationCircleIcon class="h-6 w-6 mr-2 text-red-600 inline-block" />
</template>
<template v-if="element.name">
{{ element.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
</template>
@@ -310,7 +349,10 @@
@add-item="addProject"
@remove-item="(index) => form.projects.splice(index, 1)"
>
<template #itemHeader="{ element }">
<template #itemHeader="{ element, index }">
<template v-if="hasAnyErrorInSection('projects', index)">
<ExclamationCircleIcon class="h-6 w-6 mr-2 text-red-600 inline-block" />
</template>
{{ element.description ? element.description : '(Nieokreślony)' }}
</template>
<template #form="{ element, index }">
@@ -413,13 +455,12 @@
Zadania
</label>
<div class="mt-1 sm:mt-0">
<input
<textarea
:id="`project-tasks-${index}`"
v-model="element.tasks"
type="text"
class="block w-full rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`projects.${index}.tasks`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.tasks`] }"
>
/>
<p
v-if="form.errors[`projects.${index}.tasks`]"
class="mt-2 text-sm text-red-600"
@@ -469,9 +510,9 @@ const props = defineProps({
const { technologyLevels, languageLevels } = useLevels()
const languages = [
'Język polski',
'Język angielski',
'Język niemiecki',
'Polish',
'English',
'German',
]
const form = useForm({
@@ -517,6 +558,12 @@ function addLanguage() {
})
}
function hasAnyErrorInSection(section, index) {
return Object
.keys(form.errors)
.some((error) => error.startsWith(`${section}.${index}.`))
}
function submitResume() {
form
.transform((data) => ({