wip

package-lock.json

@@ -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",
+            "version": "1.6.0",
-            "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.5.0.tgz",
+            "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.6.0.tgz",
-            "integrity": "sha512-jAp6XYpqdEv32xhszaj5ejvjaX5qhu20sCbxu7lplePEfZL+4ffabivJBBTZAiPWczqAXmnZWNWG5DOyqjRa4w==",
+            "integrity": "sha512-oB3R1G8BDDcTwaLqkr9G2swJlu62IaC6900fzsFglLVKG25jKOwOrlWKwjFNOMzmSQe/vCvoWJENWfeH10D4AA==",
             "engines": {
                 "node": ">=10"
             },
@@ -10479,9 +10479,9 @@
             }
         },
         "@headlessui/vue": {
-            "version": "1.5.0",
+            "version": "1.6.0",
-            "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.5.0.tgz",
+            "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.6.0.tgz",
-            "integrity": "sha512-jAp6XYpqdEv32xhszaj5ejvjaX5qhu20sCbxu7lplePEfZL+4ffabivJBBTZAiPWczqAXmnZWNWG5DOyqjRa4w==",
+            "integrity": "sha512-oB3R1G8BDDcTwaLqkr9G2swJlu62IaC6900fzsFglLVKG25jKOwOrlWKwjFNOMzmSQe/vCvoWJENWfeH10D4AA==",
             "requires": {}
         },
         "@heroicons/vue": {

package.json

@@ -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",

resources/js/Pages/Resumes/Create.vue

@@ -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
+                        <Combobox
-                          :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"
+                          label="Technologia"
-                            class="block w-full h-10 rounded-md shadow-sm sm:text-sm"
+                          :items="technologies"
-                            :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>
                       </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">
+                          <LevelPicker
-                            <div
+                            v-model="element.level"
-                              :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`"
+                            :levels="technologyLevels"
-                            >
-                              <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>
                           <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,
+                description: null,
-                degree: null,
+                technologies: null,
-                fieldOfStudy: 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: [{
+  technologies: [],
-    index: 0,
+  languages: [],
-    name: 'Laravel',
-    level: levels[0],
-  }],
 })
 
 </script>

resources/js/Shared/Forms/Combobox.vue

@@ -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>

resources/js/Shared/Forms/LevelPicker.vue

@@ -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>