From 22c5f7bb54a46a0032ebebcd789cf6b037726837 Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Tue, 10 May 2022 12:19:58 +0200
Subject: [PATCH] wip

---
 .../Http/Requests/ResumeRequest.php           |  2 +-
 .../Http/Resources/ResumeResource.php         |  4 ++
 database/factories/ResumeFactory.php          |  1 -
 ...2022_05_09_103339_create_resumes_table.php |  1 -
 resources/js/Pages/Resumes/Create.vue         | 62 +++++++++++-----
 resources/js/Pages/Resumes/Edit.vue           | 70 ++++++++++++-------
 resources/js/Pages/Resumes/Index.vue          | 47 ++++++++++---
 resources/js/Shared/Forms/Combobox.vue        |  9 +--
 resources/js/Shared/Forms/DynamicSection.vue  |  1 -
 .../js/Shared/Forms/MultipleCombobox.vue      | 42 +++++++----
 10 files changed, 163 insertions(+), 76 deletions(-)

diff --git a/app/Infrastructure/Http/Requests/ResumeRequest.php b/app/Infrastructure/Http/Requests/ResumeRequest.php
index 4ae5920..72f3b6b 100644
--- a/app/Infrastructure/Http/Requests/ResumeRequest.php
+++ b/app/Infrastructure/Http/Requests/ResumeRequest.php
@@ -30,7 +30,7 @@ class ResumeRequest extends FormRequest
             "technologies.*.level" => ["required", Rule::in(1, 2, 3, 4, 5)],
 
             "projects.*.description" => ["required"],
-            "projects.*.technologies" => ["required"],
+            "projects.*.technologies" => ["exists:technologies,name", "distinct"],
             "projects.*.startDate" => ["required", "date_format:Y-m-d"],
             "projects.*.endDate" => ["required", "date_format:Y-m-d", "after:startDate"],
             "projects.*.tasks" => ["required"],
diff --git a/app/Infrastructure/Http/Resources/ResumeResource.php b/app/Infrastructure/Http/Resources/ResumeResource.php
index b126124..e9fcb15 100644
--- a/app/Infrastructure/Http/Resources/ResumeResource.php
+++ b/app/Infrastructure/Http/Resources/ResumeResource.php
@@ -17,6 +17,10 @@ class ResumeResource extends JsonResource
             "user" => new SimpleUserResource($this->user),
             "name" => $this->name,
             "description" => $this->description,
+            "educationCount" => $this->education->count(),
+            "languageCount" => $this->languages->count(),
+            "technologyCount" => $this->technologies->count(),
+            "projectCount" => $this->projects->count(),
             "createdAt" => $this->created_at->toDisplayString(),
             "updatedAt" => $this->updated_at->toDisplayString(),
         ];
diff --git a/database/factories/ResumeFactory.php b/database/factories/ResumeFactory.php
index b3c6952..d633f02 100644
--- a/database/factories/ResumeFactory.php
+++ b/database/factories/ResumeFactory.php
@@ -17,7 +17,6 @@ class ResumeFactory extends Factory
     {
         return [
             "name" => fn(array $attr) => empty($attr["user_id"]) ? $this->faker->name : null,
-            "description" => $this->faker->boolean(30) ? $this->faker->sentence : null,
             "education" => $this->generateEducation(),
             "languages" => $this->generateLanguages(),
             "technologies" => $this->generateTechnologies(),
diff --git a/database/migrations/2022_05_09_103339_create_resumes_table.php b/database/migrations/2022_05_09_103339_create_resumes_table.php
index 88f3869..c328c29 100644
--- a/database/migrations/2022_05_09_103339_create_resumes_table.php
+++ b/database/migrations/2022_05_09_103339_create_resumes_table.php
@@ -14,7 +14,6 @@ return new class() extends Migration {
             $table->id();
             $table->foreignIdFor(User::class)->nullable()->constrained()->cascadeOnDelete();
             $table->string("name")->nullable();
-            $table->string("description")->nullable();
             $table->json("education");
             $table->json("languages");
             $table->json("technologies");
diff --git a/resources/js/Pages/Resumes/Create.vue b/resources/js/Pages/Resumes/Create.vue
index 577c131..a5898a6 100644
--- a/resources/js/Pages/Resumes/Create.vue
+++ b/resources/js/Pages/Resumes/Create.vue
@@ -263,11 +263,25 @@
           <template #form="{ element, index }">
             <div class="gap-4 md:grid md:grid-cols-2 ">
               <div class="py-4">
-                <Combobox
-                  v-model="element.name"
-                  label="Język"
-                  :items="languages"
-                />
+                <label
+                  :for="`language-${index}-level`"
+                  class="block text-sm font-medium text-gray-700"
+                >
+                  Język
+                </label>
+                <div class="mt-2">
+                  <Combobox
+                    :id="`language-${index}-level`"
+                    v-model="element.name"
+                    :items="languages"
+                  />
+                  <p
+                    v-if="form.errors[`languages.${index}.name`]"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors[`languages.${index}.name`] }}
+                  </p>
+                </div>
               </div>
               <div class="py-4">
                 <label
@@ -313,11 +327,25 @@
           <template #form="{ element, index }">
             <div class="gap-4 md:grid md:grid-cols-2 ">
               <div class="py-4">
-                <Combobox
-                  v-model="element.name"
-                  label="Technologia"
-                  :items="technologies"
-                />
+                <label
+                  :for="`technology-${index}-level`"
+                  class="block text-sm font-medium text-gray-700"
+                >
+                  Technologia
+                </label>
+                <div class="mt-2">
+                  <Combobox
+                    :id="`technology-${index}-level`"
+                    v-model="element.name"
+                    :items="technologies"
+                  />
+                  <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
@@ -367,6 +395,7 @@
                 <textarea
                   :id="`project-description-${index}`"
                   v-model="element.description"
+                  rows="5"
                   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}.description`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.description`] }"
                 />
@@ -386,13 +415,11 @@
                 Technologie
               </label>
               <div class="mt-1 sm:mt-0">
-                <input
+                <MultipleCombobox
                   :id="`project-technologies-${index}`"
                   v-model="element.technologies"
-                  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}.technologies`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.technologies`] }"
-                >
+                  :items="technologies"
+                />
                 <p
                   v-if="form.errors[`projects.${index}.technologies`]"
                   class="mt-2 text-sm text-red-600"
@@ -458,6 +485,7 @@
                 <textarea
                   :id="`project-tasks-${index}`"
                   v-model="element.tasks"
+                  rows="5"
                   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`] }"
                 />
@@ -495,10 +523,12 @@
 <script setup>
 import { Listbox, ListboxOption, ListboxOptions, ListboxLabel, ListboxButton } from '@headlessui/vue'
 import { SelectorIcon, CheckIcon } from '@heroicons/vue/outline'
+import { ExclamationCircleIcon } from '@heroicons/vue/solid'
 import { useForm } from '@inertiajs/inertia-vue3'
 import FlatPickr from 'vue-flatpickr-component'
 import DynamicSection from '@/Shared/Forms/DynamicSection'
 import Combobox from '@/Shared/Forms/Combobox'
+import MultipleCombobox from '@/Shared/Forms/MultipleCombobox'
 import LevelPicker from '@/Shared/Forms/LevelPicker'
 import useLevels from '@/Composables/useLevels'
 
@@ -527,7 +557,7 @@ const form = useForm({
 function addProject() {
   form.projects.push({
     description: null,
-    technologies: null,
+    technologies: [],
     tasks: null,
     startDate: null,
     endDate: null,
diff --git a/resources/js/Pages/Resumes/Edit.vue b/resources/js/Pages/Resumes/Edit.vue
index 0ff94a4..2c3debe 100644
--- a/resources/js/Pages/Resumes/Edit.vue
+++ b/resources/js/Pages/Resumes/Edit.vue
@@ -263,17 +263,25 @@
           <template #form="{ element, index }">
             <div class="gap-4 md:grid md:grid-cols-2 ">
               <div class="py-4">
-                <Combobox
-                  v-model="element.name"
-                  label="Język"
-                  :items="languages"
-                />
-                <p
-                  v-if="form.errors[`languages.${index}.name`]"
-                  class="mt-2 text-sm text-red-600"
+                <label
+                  :for="`language-${index}-level`"
+                  class="block text-sm font-medium text-gray-700"
                 >
-                  {{ form.errors[`languages.${index}.name`] }}
-                </p>
+                  Język
+                </label>
+                <div class="mt-2">
+                  <Combobox
+                    :id="`language-${index}-level`"
+                    v-model="element.name"
+                    :items="languages"
+                  />
+                  <p
+                    v-if="form.errors[`languages.${index}.name`]"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors[`languages.${index}.name`] }}
+                  </p>
+                </div>
               </div>
               <div class="py-4">
                 <label
@@ -319,17 +327,25 @@
           <template #form="{ element, index }">
             <div class="gap-4 md:grid md:grid-cols-2 ">
               <div class="py-4">
-                <Combobox
-                  v-model="element.name"
-                  label="Technologia"
-                  :items="technologies"
-                />
-                <p
-                  v-if="form.errors[`technologies.${index}.name`]"
-                  class="mt-2 text-sm text-red-600"
+                <label
+                  :for="`technology-${index}-level`"
+                  class="block text-sm font-medium text-gray-700"
                 >
-                  {{ form.errors[`technologies.${index}.name`] }}
-                </p>
+                  Technologia
+                </label>
+                <div class="mt-2">
+                  <Combobox
+                    :id="`technology-${index}-level`"
+                    v-model="element.name"
+                    :items="technologies"
+                  />
+                  <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
@@ -379,6 +395,7 @@
                 <textarea
                   :id="`project-description-${index}`"
                   v-model="element.description"
+                  rows="5"
                   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}.description`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.description`] }"
                 />
@@ -398,13 +415,11 @@
                 Technologie
               </label>
               <div class="mt-1 sm:mt-0">
-                <input
+                <MultipleCombobox
                   :id="`project-technologies-${index}`"
                   v-model="element.technologies"
-                  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}.technologies`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.technologies`] }"
-                >
+                  :items="technologies"
+                />
                 <p
                   v-if="form.errors[`projects.${index}.technologies`]"
                   class="mt-2 text-sm text-red-600"
@@ -470,7 +485,7 @@
                 <textarea
                   :id="`project-tasks-${index}`"
                   v-model="element.tasks"
-                  rows="3"
+                  rows="5"
                   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`] }"
                 />
@@ -513,6 +528,7 @@ import { useForm } from '@inertiajs/inertia-vue3'
 import FlatPickr from 'vue-flatpickr-component'
 import DynamicSection from '@/Shared/Forms/DynamicSection'
 import Combobox from '@/Shared/Forms/Combobox'
+import MultipleCombobox from '@/Shared/Forms/MultipleCombobox'
 import LevelPicker from '@/Shared/Forms/LevelPicker'
 import useLevels from '@/Composables/useLevels'
 
@@ -548,7 +564,7 @@ const form = useForm({
 function addProject() {
   form.projects.push({
     description: null,
-    technologies: null,
+    technologies: [],
     tasks: null,
     startDate: null,
     endDate: null,
diff --git a/resources/js/Pages/Resumes/Index.vue b/resources/js/Pages/Resumes/Index.vue
index ddfb09a..c5fd574 100644
--- a/resources/js/Pages/Resumes/Index.vue
+++ b/resources/js/Pages/Resumes/Index.vue
@@ -25,12 +25,6 @@
               >
                 Użytkownik
               </th>
-              <th
-                scope="col"
-                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-              >
-                Opis
-              </th>
               <th
                 scope="col"
                 class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
@@ -43,6 +37,30 @@
               >
                 Data aktualizacji
               </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Szkoły
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Języki
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Technologie
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Projekty
+              </th>
               <th
                 scope="col"
                 class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
@@ -76,18 +94,27 @@
                   </div>
                 </div>
                 <template v-else>
-                  {{ resume.name }}
+                  <span class="text-sm font-medium text-gray-900 break-all">{{ resume.name }}</span>
                 </template>
               </td>
-              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                {{ resume.description ?? '-' }}
-              </td>
               <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
                 {{ resume.createdAt }}
               </td>
               <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
                 {{ resume.updatedAt }}
               </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ resume.educationCount }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ resume.languageCount }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ resume.technologyCount }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ resume.projectCount }}
+              </td>
               <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
                 <Menu
                   as="div"
diff --git a/resources/js/Shared/Forms/Combobox.vue b/resources/js/Shared/Forms/Combobox.vue
index f3612ad..868d98a 100644
--- a/resources/js/Shared/Forms/Combobox.vue
+++ b/resources/js/Shared/Forms/Combobox.vue
@@ -3,11 +3,9 @@
     as="div"
     nullable
   >
-    <ComboboxLabel class="block text-sm font-medium text-gray-700">
-      {{ label }}
-    </ComboboxLabel>
-    <div class="relative mt-2">
+    <div class="relative">
       <ComboboxInput
+        :id="id"
         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"
         @change="query = $event.target.value"
       />
@@ -51,14 +49,13 @@ import {
   Combobox,
   ComboboxButton,
   ComboboxInput,
-  ComboboxLabel,
   ComboboxOption,
   ComboboxOptions,
 } from '@headlessui/vue'
 
 const props = defineProps({
-  label: null,
   items: Array,
+  id: String,
 })
 
 const query = ref('')
diff --git a/resources/js/Shared/Forms/DynamicSection.vue b/resources/js/Shared/Forms/DynamicSection.vue
index 124191c..71511a8 100644
--- a/resources/js/Shared/Forms/DynamicSection.vue
+++ b/resources/js/Shared/Forms/DynamicSection.vue
@@ -23,7 +23,6 @@
           </button>
           <Disclosure
             v-slot="{ open }"
-            :default-open="false"
             as="div"
             class="flex-1 border border-gray-200"
           >
diff --git a/resources/js/Shared/Forms/MultipleCombobox.vue b/resources/js/Shared/Forms/MultipleCombobox.vue
index e5d6cc8..b371d05 100644
--- a/resources/js/Shared/Forms/MultipleCombobox.vue
+++ b/resources/js/Shared/Forms/MultipleCombobox.vue
@@ -1,21 +1,27 @@
 <template>
   <Combobox
+    v-model="selectedItems"
     as="div"
     nullable
     multiple
   >
-    <ComboboxLabel class="block text-sm font-medium text-gray-700">
-      {{ label }}
-    </ComboboxLabel>
+    <div class="flex flex-wrap gap-3">
+      <button
+        v-for="(item, index) in selectedItems"
+        :key="index"
+        type="button"
+        class="py-1 px-2 bg-gray-200 rounded-md"
+        @click="selectedItems.splice(index, 1)"
+      >
+        {{ item }}
+      </button>
+    </div>
     <div class="relative mt-2">
       <ComboboxInput
-        as="template"
-        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"
+        :id="id"
+        class="w-full 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"
         @change="query = $event.target.value"
-      >
-        <span>aee</span>
-      </ComboboxInput>
+      />
       <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>
@@ -33,7 +39,7 @@
         >
           <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 }}
+              {{ item }}
             </span>
 
             <span
@@ -56,21 +62,31 @@ import {
   Combobox,
   ComboboxButton,
   ComboboxInput,
-  ComboboxLabel,
   ComboboxOption,
   ComboboxOptions,
 } from '@headlessui/vue'
 
 const props = defineProps({
-  label: null,
   items: Array,
+  modelValue: Array,
+  id: String,
 })
 
+const emit = defineEmits(['update:modelValue'])
+
 const query = ref('')
 
+const selectedItems = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    query.value = ''
+    emit('update:modelValue', value)
+  },
+})
+
 const filteredItems = computed(() =>
   query.value === ''
     ? props.items
-    : props.items.filter((item) => item.name.toLowerCase().includes(query.value.toLowerCase())),
+    : props.items.filter((item) => item.toLowerCase().includes(query.value.toLowerCase())),
 )
 </script>
\ No newline at end of file