wip
This commit is contained in:
Adrian Hopek
parent
f35fd2960a
commit
911c54f9ab
14
package-lock.json
generated
14
package-lock.json
generated
@ -6,7 +6,7 @@
|
||||
"": {
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@headlessui/vue": "^1.5.0",
|
||||
"@headlessui/vue": "^1.6.0",
|
||||
"@heroicons/vue": "^1.0.6",
|
||||
"@inertiajs/inertia": "^0.11.0",
|
||||
"@inertiajs/inertia-vue3": "^0.6.0",
|
||||
@ -1683,9 +1683,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@headlessui/vue": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.5.0.tgz",
|
||||
"integrity": "sha512-jAp6XYpqdEv32xhszaj5ejvjaX5qhu20sCbxu7lplePEfZL+4ffabivJBBTZAiPWczqAXmnZWNWG5DOyqjRa4w==",
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.6.0.tgz",
|
||||
"integrity": "sha512-oB3R1G8BDDcTwaLqkr9G2swJlu62IaC6900fzsFglLVKG25jKOwOrlWKwjFNOMzmSQe/vCvoWJENWfeH10D4AA==",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
@ -10479,9 +10479,9 @@
|
||||
}
|
||||
},
|
||||
"@headlessui/vue": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.5.0.tgz",
|
||||
"integrity": "sha512-jAp6XYpqdEv32xhszaj5ejvjaX5qhu20sCbxu7lplePEfZL+4ffabivJBBTZAiPWczqAXmnZWNWG5DOyqjRa4w==",
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.6.0.tgz",
|
||||
"integrity": "sha512-oB3R1G8BDDcTwaLqkr9G2swJlu62IaC6900fzsFglLVKG25jKOwOrlWKwjFNOMzmSQe/vCvoWJENWfeH10D4AA==",
|
||||
"requires": {}
|
||||
},
|
||||
"@heroicons/vue": {
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
"postinstall": "npm run prod"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/vue": "^1.5.0",
|
||||
"@headlessui/vue": "^1.6.0",
|
||||
"@heroicons/vue": "^1.0.6",
|
||||
"@inertiajs/inertia": "^0.11.0",
|
||||
"@inertiajs/inertia-vue3": "^0.6.0",
|
||||
|
||||
@ -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>
|
||||
72
resources/js/Shared/Forms/Combobox.vue
Normal file
72
resources/js/Shared/Forms/Combobox.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<Combobox
|
||||
as="div"
|
||||
nullable
|
||||
>
|
||||
<ComboboxLabel class="block text-sm font-medium text-gray-700">
|
||||
{{ label }}
|
||||
</ComboboxLabel>
|
||||
<div class="relative mt-2">
|
||||
<ComboboxInput
|
||||
class="w-full h-12 rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 shadow-sm focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 sm:text-sm"
|
||||
:display-value="(item) => item?.name"
|
||||
@change="query = $event.target.value"
|
||||
/>
|
||||
<ComboboxButton class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
|
||||
<SelectorIcon class="h-5 w-5 text-gray-400" />
|
||||
</ComboboxButton>
|
||||
|
||||
<ComboboxOptions
|
||||
v-if="filteredItems.length"
|
||||
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<ComboboxOption
|
||||
v-for="item in filteredItems"
|
||||
:key="item.id"
|
||||
v-slot="{ active, selected }"
|
||||
:value="item"
|
||||
as="template"
|
||||
>
|
||||
<li :class="['relative cursor-default select-none py-2 pl-3 pr-9', active ? 'bg-blumilk-600 text-white' : 'text-gray-900']">
|
||||
<span :class="['block truncate', selected && 'font-semibold']">
|
||||
{{ item.name }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="selected"
|
||||
:class="['absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-white' : 'text-blumilk-600']"
|
||||
>
|
||||
<CheckIcon class="h-5 w-5" />
|
||||
</span>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
</ComboboxOptions>
|
||||
</div>
|
||||
</Combobox>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxButton,
|
||||
ComboboxInput,
|
||||
ComboboxLabel,
|
||||
ComboboxOption,
|
||||
ComboboxOptions,
|
||||
} from '@headlessui/vue'
|
||||
|
||||
const props = defineProps({
|
||||
label: null,
|
||||
items: Array,
|
||||
})
|
||||
|
||||
const query = ref('')
|
||||
|
||||
const filteredItems = computed(() =>
|
||||
query.value === ''
|
||||
? props.items
|
||||
: props.items.filter((item) => item.name.toLowerCase().includes(query.value.toLowerCase())),
|
||||
)
|
||||
</script>
|
||||
47
resources/js/Shared/Forms/LevelPicker.vue
Normal file
47
resources/js/Shared/Forms/LevelPicker.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<RadioGroup v-model="selectedValue">
|
||||
<div
|
||||
:class="`relative overflow-hidden flex h-12 rounded-l-md rounded-r-md space-x-px ${selectedValue.activeColor} transition-colors duration-200 easy-in-out`"
|
||||
>
|
||||
<RadioGroupOption
|
||||
v-for="(level, index) in levels"
|
||||
:key="index"
|
||||
v-slot="{ active, checked }"
|
||||
as="template"
|
||||
:value="level"
|
||||
>
|
||||
<div
|
||||
:class="`${selectedValue.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 * currentIndex}% - 1px))`"
|
||||
>
|
||||
<div :class="`h-12 ${selectedValue.activeColor} transition-colors duration-300 easy-in-out`" />
|
||||
</div>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { RadioGroup, RadioGroupOption } from '@headlessui/vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const props = defineProps({
|
||||
levels: Array,
|
||||
modelValue: Object,
|
||||
})
|
||||
|
||||
const selectedValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => {
|
||||
emit('update:modelValue', value)
|
||||
},
|
||||
})
|
||||
|
||||
const currentIndex = computed(() => props.levels.findIndex((level) => level.level === selectedValue.value.level))
|
||||
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user