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-04-29 15:05:19 +02:00
parent f35fd2960a
commit 911c54f9ab
5 changed files with 336 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -255,7 +255,119 @@
endDate: null,
})"
>
Dodaj element
Dodaj szkołę
</button>
</div>
</div>
<div>
<h3 class="text-lg font-medium leading-6 text-gray-900">
Języki
</h3>
<Draggable
v-model="form.languages"
class="pt-4 space-y-4"
tag="transition-group"
ghost-class="opacity-50"
handle=".handle"
:animation="200"
:component-data="{tag: 'div', type: 'transition-group' }"
item-key="index"
>
<template #item="{ element, index }">
<div class="group flex items-start space-x-3">
<button
class="py-4 text-red-500 hover:text-gray-600 opacity-100 group-hover:opacity-100 transition-opacity hover:scale-110 lg:opacity-0 handle"
type="button"
>
<ViewGridIcon class="w-5 h-5 text-gray-500" />
</button>
<Disclosure
v-slot="{ open }"
default-open
as="div"
class="flex-1 border border-gray-200"
>
<div class="flex">
<DisclosureButton
:class="['transition transition-colors rounded-md group w-full max-w-full overflow-hidden flex items-center justify-between p-4 font-semibold text-gray-500 hover:text-blumilk-500 transition transition-colors rounded-md focus:outline-none']"
>
<div class="break-all line-clamp-1 text-md">
<template v-if="element.name">
{{ element.name.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
</template>
<template v-else>
(Nieokreślony)
</template>
</div>
<div class="ml-2">
<svg
:class="[open ? '-rotate-90' : 'rotate-90', 'h-6 w-6 transform transition-transform ease-in-out duration-150']"
viewBox="0 0 20 20"
>
<path
d="M6 6L14 10L6 14V6Z"
fill="currentColor"
/>
</svg>
</div>
</DisclosureButton>
</div>
<DisclosurePanel
as="div"
class="py-2 px-4 border-t border-gray-200"
>
<div class="gap-4 md:grid md:grid-cols-2 ">
<div class="py-4">
<Combobox
v-model="element.name"
label="Język"
:items="languages"
/>
</div>
<div class="py-4">
<label
:for="`language-level-${index}`"
class="block text-sm font-medium text-gray-700"
>
Poziom - <span :class="element.level.textColor">{{ element.level.name }}</span>
</label>
<div class="mt-2">
<LevelPicker
v-model="element.level"
:levels="languageLevels"
/>
<p
v-if="form.errors[`languages.${index}.level`]"
class="mt-2 text-sm text-red-600"
>
{{ form.errors[`languages.${index}.level`] }}
</p>
</div>
</div>
</div>
</DisclosurePanel>
</Disclosure>
<button
class="py-4 text-red-500 hover:text-red-600 opacity-100 group-hover:opacity-100 transition-opacity hover:scale-110 lg:opacity-0"
type="button"
@click="form.languages.splice(index, 1)"
>
<TrashIcon class="w-5 h-5 text-red-500" />
</button>
</div>
</template>
</Draggable>
<div class="px-8">
<button
type="button"
class="p-4 mx-auto mt-4 w-full font-semibold text-center text-blumilk-600 hover:bg-blumilk-25 focus:outline-none transition-colors"
@click="form.languages.push({
index: form.languages.length,
name: null,
level: languageLevels[0]
})"
>
Dodaj język
</button>
</div>
</div>
@@ -292,7 +404,12 @@
:class="['transition transition-colors rounded-md group w-full max-w-full overflow-hidden flex items-center justify-between p-4 font-semibold text-gray-500 hover:text-blumilk-500 transition transition-colors rounded-md focus:outline-none']"
>
<div class="break-all line-clamp-1 text-md">
{{ element.name ? element.name : '(Nieokreślony)' }}
<template v-if="element.name">
{{ element.name.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
</template>
<template v-else>
(Nieokreślony)
</template>
</div>
<div class="ml-2">
<svg
@@ -313,27 +430,11 @@
>
<div class="gap-4 md:grid md:grid-cols-2 ">
<div class="py-4">
<label
:for="`technology-name-${index}`"
class="block text-sm font-medium text-gray-700"
>
Technologia
</label>
<div class="mt-3">
<input
:id="`technology-name-${index}`"
v-model="element.name"
type="text"
class="block w-full h-10 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[`technologies.${index}.name`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`technologies.${index}.name`] }"
>
<p
v-if="form.errors[`technologies.${index}.name`]"
class="mt-2 text-sm text-red-600"
>
{{ form.errors[`technologies.${index}.name`] }}
</p>
</div>
<Combobox
v-model="element.name"
label="Technologia"
:items="technologies"
/>
</div>
<div class="py-4">
<label
@@ -343,29 +444,10 @@
Poziom - <span :class="element.level.textColor">{{ element.level.name }}</span>
</label>
<div class="mt-2">
<RadioGroup v-model="element.level">
<div
:class="`relative overflow-hidden flex h-12 rounded-l-md rounded-r-md space-x-px ${element.level.activeColor} transition-colors duration-200 easy-in-out`"
>
<RadioGroupOption
v-for="level in levels"
:key="level.index"
v-slot="{ active, checked }"
as="template"
:value="level"
>
<div
:class="`${element.level.backgroundColor} hover:opacity-80 cursor-pointer transition-colors duration-200 easy-in-out focus:outline-none flex-1`"
/>
</RadioGroupOption>
<div
:class="`absolute transform transition-transform duration-200 easy-in-out`"
:style="`width: ${100/levels.length}%; transform: translateX(calc(${100 * element.level.index}% - 1px))`"
>
<div :class="`h-12 ${element.level.activeColor} transition-colors duration-300 easy-in-out`" />
</div>
</div>
</RadioGroup>
<LevelPicker
v-model="element.level"
:levels="technologyLevels"
/>
<p
v-if="form.errors[`technologies.${index}.level`]"
class="mt-2 text-sm text-red-600"
@@ -394,10 +476,10 @@
@click="form.technologies.push({
index: form.technologies.length,
name: null,
level: levels[0]
level: technologyLevels[0]
})"
>
Dodaj element
Dodaj technologię
</button>
</div>
</div>
@@ -587,20 +669,21 @@
class="p-4 mx-auto mt-4 w-full font-semibold text-center text-blumilk-600 hover:bg-blumilk-25 focus:outline-none transition-colors"
@click="form.projects.push({
index: form.projects.length,
school: null,
degree: null,
fieldOfStudy: null,
description: null,
technologies: null,
tags: null,
startDate: null,
endDate: null,
})"
>
Dodaj element
Dodaj projekt
</button>
</div>
</div>
</div>
<div class="pt-5">
<Multiple />
<div class="flex justify-end">
<button
type="button"
@@ -622,43 +705,44 @@
<script setup>
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
import { RadioGroup, RadioGroupOption } from '@headlessui/vue'
import { TrashIcon, ViewGridIcon } from '@heroicons/vue/outline'
import { useForm } from '@inertiajs/inertia-vue3'
import FlatPickr from 'vue-flatpickr-component'
import Draggable from 'vuedraggable'
import Combobox from '@/Shared/Forms/Combobox'
import LevelPicker from '@/Shared/Forms/LevelPicker'
const levels = [
const technologyLevels = [
{
index: 0,
level: 0,
name: 'Poczatkujący',
activeColor: 'bg-rose-400',
backgroundColor: 'bg-rose-100',
textColor: 'text-rose-400',
},
{
index: 1,
level: 1,
name: 'Zaawansowany',
activeColor: 'bg-orange-400',
backgroundColor: 'bg-orange-100',
textColor: 'text-orange-400',
},
{
index: 2,
level: 2,
name: 'Doświadczony',
activeColor: 'bg-amber-400',
backgroundColor: 'bg-amber-100',
textColor: 'text-yellow-500',
},
{
index: 3,
level: 3,
name: 'Ekspert',
activeColor: 'bg-emerald-400',
backgroundColor: 'bg-emerald-100',
textColor: 'text-emerald-400',
},
{
index: 4,
level: 4,
name: 'Chad',
activeColor: 'bg-blumilk-400',
backgroundColor: 'bg-blumilk-100',
@@ -666,14 +750,75 @@ const levels = [
},
]
const languageLevels = [
{
level: 0,
name: 'A1',
activeColor: 'bg-rose-400',
backgroundColor: 'bg-rose-100',
textColor: 'text-rose-400',
},
{
level: 1,
name: 'A2',
activeColor: 'bg-orange-400',
backgroundColor: 'bg-orange-100',
textColor: 'text-orange-400',
},
{
level: 2,
name: 'B1',
activeColor: 'bg-amber-400',
backgroundColor: 'bg-amber-100',
textColor: 'text-yellow-500',
},
{
level: 3,
name: 'B2',
activeColor: 'bg-emerald-400',
backgroundColor: 'bg-emerald-100',
textColor: 'text-emerald-400',
},
{
level: 4,
name: 'C1',
activeColor: 'bg-blumilk-400',
backgroundColor: 'bg-blumilk-100',
textColor: 'text-blumilk-400',
},
{
level: 5,
name: 'C2',
activeColor: 'bg-blumilk-600',
backgroundColor: 'bg-blumilk-200',
textColor: 'text-blumilk-600',
},
]
const technologies = [
{ id: 1, name: 'Laravel' },
{ id: 2, name: 'PHP' },
{ id: 3, name: 'Javascript' },
{ id: 4, name: 'Vue' },
{ id: 5, name: 'Symfony' },
{ id: 6, name: 'AWS' },
{ id: 7, name: 'Docker' },
{ id: 8, name: 'React' },
{ id: 9, name: 'Livewire' },
{ id: 10, name: 'Inertia.js' },
]
const languages = [
{ id: 1, name: 'Język polski' },
{ id: 2, name: 'Język angielski' },
{ id: 3, name: 'Język niemiecki' },
]
const form = useForm({
educations: [],
projects: [],
technologies: [{
index: 0,
name: 'Laravel',
level: levels[0],
}],
technologies: [],
languages: [],
})
</script>