wip

app/Architecture/ExceptionHandler.php

@@ -16,7 +16,6 @@ class ExceptionHandler extends Handler
         "password",
         "password_confirmation",
     ];
-
     protected array $handleByInertia = [
         Response::HTTP_INTERNAL_SERVER_ERROR,
         Response::HTTP_SERVICE_UNAVAILABLE,

app/Domain/Notifications/VacationRequestWaitsForApprovalNotification.php

@@ -99,4 +99,3 @@ class VacationRequestWaitsForApprovalNotification extends Notification
         ]);
     }
 }
-

app/Domain/Validation/Rules/VacationRequestRule.php

@@ -9,5 +9,6 @@ use Toby\Eloquent\Models\VacationRequest;
 interface VacationRequestRule
 {
     public function check(VacationRequest $vacationRequest): bool;
+
     public function errorMessage(): string;
 }

app/Eloquent/Models/Holiday.php

@@ -21,7 +21,6 @@ class Holiday extends Model
     use HasFactory;
 
     protected $guarded = [];
-
     protected $casts = [
         "date" => "date",
     ];

app/Eloquent/Models/Profile.php

@@ -26,9 +26,7 @@ class Profile extends Model
     use HasAvatar;
 
     protected $primaryKey = "user_id";
-
     protected $guarded = [];
-
     protected $casts = [
         "employment_form" => EmploymentForm::class,
         "employment_date" => "date",

app/Eloquent/Models/Resume.php

@@ -0,0 +1,44 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Eloquent\Models;
+
+use Database\Factories\ResumeFactory;
+use Illuminate\Database\Eloquent\Casts\AsCollection;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Support\Collection;
+
+/**
+ * @property int $id
+ * @property ?User $user
+ * @property string $name
+ * @property Collection $education
+ * @property Collection $languages
+ * @property Collection $technologies
+ * @property Collection $projects
+ */
+class Resume extends Model
+{
+    use HasFactory;
+
+    protected $guarded = [];
+    protected $casts = [
+        "education" => AsCollection::class,
+        "languages" => AsCollection::class,
+        "technologies" => AsCollection::class,
+        "projects" => AsCollection::class,
+    ];
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class);
+    }
+
+    protected static function newFactory(): ResumeFactory
+    {
+        return ResumeFactory::new();
+    }
+}

app/Eloquent/Models/Technology.php

@@ -0,0 +1,23 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Eloquent\Models;
+
+use Database\Factories\TechnologyFactory;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+/**
+ * @property int $id
+ * @property string $name
+ */
+class Technology extends Model
+{
+    use HasFactory;
+
+    protected static function newFactory(): TechnologyFactory
+    {
+        return TechnologyFactory::new();
+    }
+}

app/Eloquent/Models/User.php

@@ -33,18 +33,15 @@ class User extends Authenticatable
     use SoftDeletes;
 
     protected $guarded = [];
-
     protected $casts = [
         "role" => Role::class,
         "last_active_at" => "datetime",
         "employment_form" => EmploymentForm::class,
         "employment_date" => "date",
     ];
-
     protected $hidden = [
         "remember_token",
     ];
-
     protected $with = [
         "profile",
     ];

app/Eloquent/Models/VacationRequest.php

@@ -41,7 +41,6 @@ class VacationRequest extends Model
     use HasStates;
 
     protected $guarded = [];
-
     protected $casts = [
         "type" => VacationType::class,
         "state" => VacationRequestState::class,

app/Eloquent/Models/VacationRequestActivity.php

@@ -22,7 +22,6 @@ class VacationRequestActivity extends Model
     use HasFactory;
 
     protected $guarded = [];
-
     protected $casts = [
         "from" => VacationRequestState::class,
         "to" => VacationRequestState::class,

app/Infrastructure/Http/Controllers/ResumeController.php

@@ -4,26 +4,108 @@ declare(strict_types=1);
 
 namespace Toby\Infrastructure\Http\Controllers;
 
-use Illuminate\Auth\Access\AuthorizationException;
 use Illuminate\Http\RedirectResponse;
-use Illuminate\Http\Request;
 use Inertia\Response;
-use Toby\Eloquent\Helpers\YearPeriodRetriever;
+use Toby\Eloquent\Models\Resume;
-use Toby\Eloquent\Models\Holiday;
+use Toby\Eloquent\Models\Technology;
-use Toby\Infrastructure\Http\Requests\HolidayRequest;
+use Toby\Eloquent\Models\User;
-use Toby\Infrastructure\Http\Resources\HolidayFormDataResource;
+use Toby\Infrastructure\Http\Requests\ResumeRequest;
-use Toby\Infrastructure\Http\Resources\HolidayResource;
+use Toby\Infrastructure\Http\Resources\ResumeFormResource;
+use Toby\Infrastructure\Http\Resources\ResumeResource;
+use Toby\Infrastructure\Http\Resources\SimpleUserResource;
 
 class ResumeController extends Controller
 {
-    public function index(Request $request): Response
+    public function index(): Response
     {
-        return inertia("Resumes/Index");
+        $resumes = Resume::query()
+            ->paginate();
+
+        return inertia("Resumes/Index", [
+            "resumes" => ResumeResource::collection($resumes),
+        ]);
     }
 
     public function create(): Response
     {
+        $users = User::query()
+            ->orderByProfileField("last_name")
+            ->orderByProfileField("first_name")
+            ->get();
+
         return inertia("Resumes/Create", [
+            "users" => SimpleUserResource::collection($users),
+            "technologies" => Technology::all()->pluck("name"),
         ]);
     }
+
+    public function store(ResumeRequest $request): RedirectResponse
+    {
+        $resume = new Resume();
+
+        if ($request->hasEmployee()) {
+            $resume->user()->associate($request->getEmployee());
+        } else {
+            $resume->name = $request->getName();
+        }
+
+        $resume->fill([
+            "education" => $request->getEducation(),
+            "languages" => $request->getLanguageLevels(),
+            "technologies" => $request->getTechnologyLevels(),
+            "projects" => $request->getProjects(),
+        ]);
+
+        $resume->save();
+
+        return redirect()
+            ->route("resumes.index")
+            ->with("success", __("Resume has been created."));
+    }
+
+    public function edit(Resume $resume): Response
+    {
+        $users = User::query()
+            ->orderByProfileField("last_name")
+            ->orderByProfileField("first_name")
+            ->get();
+
+        return inertia("Resumes/Edit", [
+            "resume" => new ResumeFormResource($resume),
+            "users" => SimpleUserResource::collection($users),
+            "technologies" => Technology::all()->pluck("name"),
+        ]);
+    }
+
+    public function update(Resume $resume, ResumeRequest $request): RedirectResponse
+    {
+        if ($request->hasEmployee()) {
+            $resume->user()->associate($request->getEmployee());
+        } else {
+            $resume->user()->dissociate();
+            $resume->name = $request->getName();
+        }
+
+        $resume->fill([
+            "education" => $request->getEducation(),
+            "languages" => $request->getLanguageLevels(),
+            "technologies" => $request->getTechnologyLevels(),
+            "projects" => $request->getProjects(),
+        ]);
+
+        $resume->save();
+
+        return redirect()
+            ->route("resumes.index")
+            ->with("success", __("Resume has been updated."));
+    }
+
+    public function destroy(Resume $resume): RedirectResponse
+    {
+        $resume->delete();
+
+        return redirect()
+            ->route("resumes.index")
+            ->with("success", __("Resume has been deleted."));
+    }
 }

app/Infrastructure/Http/Kernel.php

@@ -40,7 +40,6 @@ class Kernel extends HttpKernel
         TrimStrings::class,
         ConvertEmptyStringsToNull::class,
     ];
-
     protected $middlewareGroups = [
         "web" => [
             EncryptCookies::class,
@@ -58,7 +57,6 @@ class Kernel extends HttpKernel
             SubstituteBindings::class,
         ],
     ];
-
     protected $routeMiddleware = [
         "auth" => Authenticate::class,
         "auth.basic" => AuthenticateWithBasicAuth::class,

app/Infrastructure/Http/Requests/ResumeRequest.php

@@ -0,0 +1,77 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Infrastructure\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Collection;
+use Illuminate\Validation\Rule;
+use Toby\Eloquent\Models\User;
+
+class ResumeRequest extends FormRequest
+{
+    public function rules(): array
+    {
+        return [
+            "user" => ["nullable", "exists:users,id"],
+            "name" => ["required_without:user"],
+
+            "education.*.school" => ["required"],
+            "education.*.degree" => ["required"],
+            "education.*.fieldOfStudy" => ["required"],
+            "education.*.startDate" => ["required", "date_format:Y-m-d"],
+            "education.*.endDate" => ["required", "date_format:Y-m-d", "after:startDate"],
+
+            "languages.*.name" => ["required", "distinct"],
+            "languages.*.level" => ["required", Rule::in(1, 2, 3, 4, 5, 6)],
+
+            "technologies.*.name" => ["required", "exists:technologies,name", "distinct"],
+            "technologies.*.level" => ["required", Rule::in(1, 2, 3, 4, 5)],
+
+            "projects.*.description" => ["required"],
+            "projects.*.technologies" => ["required"],
+            "projects.*.startDate" => ["required", "date_format:Y-m-d"],
+            "projects.*.endDate" => ["required", "date_format:Y-m-d", "after:startDate"],
+            "projects.*.tasks" => ["required"],
+        ];
+    }
+
+    public function hasEmployee(): bool
+    {
+       return $this->has("user");
+    }
+
+    public function getEmployee(): User
+    {
+        /** @var User $user */
+        $user = User::query()->find($this->get("user"));
+
+        return $user;
+    }
+
+    public function getName(): string
+    {
+        return $this->get("name");
+    }
+
+    public function getLanguageLevels(): Collection
+    {
+        return $this->collect("languages");
+    }
+
+    public function getTechnologyLevels(): Collection
+    {
+        return $this->collect("technologies");
+    }
+
+    public function getEducation(): Collection
+    {
+        return $this->collect("education");
+    }
+
+    public function getProjects(): Collection
+    {
+        return $this->collect("projects");
+    }
+}

app/Infrastructure/Http/Resources/ResumeFormResource.php

@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Infrastructure\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class ResumeFormResource extends JsonResource
+{
+    public static $wrap = null;
+
+    public function toArray($request): array
+    {
+        return [
+            "id" => $this->id,
+            "user" => $this->user_id,
+            "name" => $this->name,
+            "description" => $this->description,
+            "education" => $this->education,
+            "languages" => $this->languages,
+            "technologies" => $this->technologies,
+            "projects" => $this->projects,
+        ];
+    }
+}

app/Infrastructure/Http/Resources/ResumeResource.php

@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Infrastructure\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class ResumeResource extends JsonResource
+{
+    public static $wrap = null;
+
+    public function toArray($request): array
+    {
+        return [
+            "id" => $this->id,
+            "user" => new SimpleUserResource($this->user),
+            "name" => $this->name,
+            "description" => $this->description,
+            "createdAt" => $this->created_at->toDisplayString(),
+            "updatedAt" => $this->updated_at->toDisplayString(),
+        ];
+    }
+}

database/factories/ResumeFactory.php

@@ -0,0 +1,90 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Illuminate\Support\Collection;
+use Toby\Eloquent\Models\Resume;
+use Toby\Eloquent\Models\Technology;
+
+class ResumeFactory extends Factory
+{
+    protected $model = Resume::class;
+
+    public function definition(): array
+    {
+        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(),
+            "projects" => $this->generateProjects(),
+        ];
+    }
+
+    protected function generateEducation(): array
+    {
+        $items = [];
+
+        for ($i = 0; $i < $this->faker->numberBetween(1, 2); $i++) {
+            $items[] = [
+                "school" => $this->faker->sentence,
+                "degree" => $this->faker->sentence,
+                "fieldOfStudy" => $this->faker->sentence,
+                "startDate" => $this->faker->date,
+                "endDate" => $this->faker->date,
+            ];
+        }
+
+        return $items;
+    }
+
+    protected function generateLanguages(): array
+    {
+        $languages = new Collection(["english", "polish", "germany"]);
+        $number = $this->faker->numberBetween(1, $languages->count());
+
+        return $languages->random($number)
+            ->map(fn(string $language): array => [
+                "language" => $language,
+                "level" => $this->faker->numberBetween(1, 6),
+            ])
+            ->all();
+    }
+
+    protected function generateTechnologies(): array
+    {
+        $technologies = Technology::all();
+        $number = $this->faker->numberBetween(2, $technologies->count());
+
+        return $technologies->random($number)
+            ->map(fn(string $technology): array => [
+                "technology" => $technology,
+                "level" => $this->faker->numberBetween(1, 5),
+            ])
+            ->all();
+    }
+
+    protected function generateProjects(): array
+    {
+        $items = [];
+        $technologies = Technology::all();
+
+        for ($i = 0; $i < $this->faker->numberBetween(1, 3); $i++) {
+            $number = $this->faker->numberBetween(2, $technologies->count());
+
+            $items[] = [
+                "description" => $this->faker->text,
+                "technologies" => $technologies->random($number)->all(),
+                "startDate" => $this->faker->date,
+                "endDate" => $this->faker->date,
+                "tasks" => $this->faker->text,
+            ];
+        }
+
+        return $items;
+    }
+}

database/factories/TechnologyFactory.php

@@ -0,0 +1,20 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Toby\Eloquent\Models\Technology;
+
+class TechnologyFactory extends Factory
+{
+    protected $model = Technology::class;
+
+    public function definition(): array
+    {
+        return [
+            "name" => $this->faker->unique()->word,
+        ];
+    }
+}

database/migrations/2022_05_09_103339_create_resumes_table.php

@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use Toby\Eloquent\Models\User;
+
+return new class() extends Migration {
+    public function up(): void
+    {
+        Schema::create("resumes", function (Blueprint $table): void {
+            $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");
+            $table->json("projects");
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists("resumes");
+    }
+};

database/migrations/2022_05_09_105940_create_technologies_table.php

@@ -0,0 +1,23 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class() extends Migration {
+    public function up(): void
+    {
+        Schema::create("technologies", function (Blueprint $table): void {
+            $table->id();
+            $table->string("name")->unique();
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists("technologies");
+    }
+};

database/seeders/DemoSeeder.php

@@ -20,6 +20,8 @@ use Toby\Domain\States\VacationRequest\WaitingForAdministrative;
 use Toby\Domain\States\VacationRequest\WaitingForTechnical;
 use Toby\Domain\VacationDaysCalculator;
 use Toby\Eloquent\Models\Key;
+use Toby\Eloquent\Models\Resume;
+use Toby\Eloquent\Models\Technology;
 use Toby\Eloquent\Models\User;
 use Toby\Eloquent\Models\VacationLimit;
 use Toby\Eloquent\Models\VacationRequest;
@@ -335,5 +337,35 @@ class DemoSeeder extends Seeder
                 ->for($user)
                 ->create();
         }
+
+        Technology::factory()->createMany([
+            ["name" => "Laravel"],
+            ["name" => "Symfony"],
+            ["name" => "CakePHP"],
+            ["name" => "PHP"],
+            ["name" => "Livewire"],
+            ["name" => "Inertia"],
+            ["name" => "Vue"],
+            ["name" => "Javascript"],
+            ["name" => "Redis"],
+            ["name" => "AWS"],
+            ["name" => "Tailwind"],
+            ["name" => "CSS"],
+            ["name" => "PHPUnit"],
+            ["name" => "Cypress"],
+            ["name" => "Behat"],
+            ["name" => "Pest"],
+            ["name" => "Golang"],
+        ]);
+
+        foreach ($users as $user) {
+            Resume::factory()
+                ->for($user)
+                ->create();
+        }
+
+        Resume::factory()
+            ->count(3)
+            ->create();
     }
 }

resources/js/Pages/Resumes/Create.vue

@@ -6,316 +6,225 @@
         Dodaj CV
       </h2>
     </div>
-    <form class="flex flex-col justify-center py-8 px-6 space-y-8 border-t border-gray-200">
+    <form
+      class="flex flex-col justify-center py-8 px-6 space-y-8 border-t border-gray-200"
+      @submit.prevent="submitResume"
+    >
       <div class="space-y-8 sm:space-y-5">
         <div>
           <h3 class="text-lg font-medium leading-6 text-gray-900">
             Dane podstawowe
           </h3>
-          <div class="px-8">
+          <div class="grid grid-cols-2 gap-8 py-4">
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
+            <Listbox
+              v-model="form.user"
+              as="div"
+            >
+              <ListboxLabel class="block text-sm font-medium text-gray-700">
+                Użytkownik
+              </ListboxLabel>
+              <div class="relative mt-2">
+                <ListboxButton
+                  class="relative py-2 pr-10 pl-3 w-full max-w-md h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
+                >
+                  <span v-if="form.user === null">
+                    Nie istnieje w bazie
+                  </span>
+                  <span
+                    v-else
+                    class="flex items-center"
+                  >
+                    <img
+                      :src="form.user.avatar"
+                      class="shrink-0 w-6 h-6 rounded-full"
+                    >
+                    <span class="block ml-3 truncate">{{ form.user.name }}</span>
+                  </span>
+                  <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                    <SelectorIcon class="w-5 h-5 text-gray-400" />
+                  </span>
+                </ListboxButton>
+
+                <transition
+                  leave-active-class="transition ease-in duration-100"
+                  leave-from-class="opacity-100"
+                  leave-to-class="opacity-0"
+                >
+                  <ListboxOptions
+                    class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                  >
+                    <ListboxOption
+                      v-slot="{ active }"
+                      as="template"
+                      :value="null"
+                    >
+                      <li
+                        :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                      >
+                        <div class="flex items-center">
+                          Nie istnieje w bazie
+                        </div>
+
+                        <span
+                          v-if="form.user === null"
+                          :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                        >
+                          <CheckIcon class="w-5 h-5" />
+                        </span>
+                      </li>
+                    </ListboxOption>
+                    <ListboxOption
+                      v-for="user in users.data"
+                      :key="user.id"
+                      v-slot="{ active }"
+                      as="template"
+                      :value="user"
+                    >
+                      <li
+                        :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                      >
+                        <div class="flex items-center">
+                          <img
+                            :src="user.avatar"
+                            class="shrink-0 w-6 h-6 rounded-full"
+                          >
+                          <span
+                            :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
+                          >
+                            {{ user.name }}
+                          </span>
+                        </div>
+                        <span
+                          v-if="form.user?.id === user.id"
+                          :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                        >
+                          <CheckIcon class="w-5 h-5" />
+                        </span>
+                      </li>
+                    </ListboxOption>
+                  </ListboxOptions>
+                </transition>
+              </div>
+            </Listbox>
+            <div v-if="form.user === null">
               <label
-                for="firstName"
+                for="name"
                 class="block text-sm font-medium text-gray-700 sm:mt-px"
               >
-                Imię
+                Imię i nazwisko
               </label>
-              <div class="mt-1 sm:mt-0">
+              <div class="mt-2">
                 <input
-                  id="firstName"
+                  id="name"
-                  v-model="form.firstName"
+                  v-model="form.name"
                   type="text"
-                  class="block w-full rounded-md shadow-sm sm:text-sm"
+                  class="block w-full max-w-md 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.firstName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.firstName }"
+                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
                 >
                 <p
-                  v-if="form.errors.firstName"
+                  v-if="form.errors.name"
                   class="mt-2 text-sm text-red-600"
                 >
-                  {{ form.errors.firstName }}
+                  {{ form.errors.name }}
-                </p>
-              </div>
-            </div>
-            <div class="items-center py-4 sm:grid sm:grid-cols-2">
-              <label
-                for="lastName"
-                class="block text-sm font-medium text-gray-700 sm:mt-px"
-              >
-                Nazwisko
-              </label>
-              <div class="mt-1 sm:mt-0">
-                <input
-                  id="lastName"
-                  v-model="form.lastName"
-                  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.lastName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.lastName }"
-                >
-                <p
-                  v-if="form.errors.lastName"
-                  class="mt-2 text-sm text-red-600"
-                >
-                  {{ form.errors.lastName }}
                 </p>
               </div>
             </div>
           </div>
         </div>
-        <div>
+        <DynamicSection
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Edukacja
-          </h3>
-          <Draggable
           v-model="form.educations"
-            class="pt-4 space-y-4"
+          header="Edukacja"
-            tag="transition-group"
+          add-label="Dodaj szkołę"
-            ghost-class="opacity-50"
+          @add-item="addEducation"
-            handle=".handle"
+          @remove-item="(index) => form.educations.splice(index, 1)"
-            :animation="200"
-            :component-data="{tag: 'div', type: 'transition-group'}"
-            item-key="index"
         >
-            <template #item="{ element, index }">
+          <template #itemHeader="{ element }">
-              <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">
             {{ element.school ? element.school : '(Nieokreślony)' }}
-                      </div>
+          </template>
-                      <div class="ml-2">
+          <template #form="{ element }">
-                        <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>
             <div class="items-center py-4 sm:grid sm:grid-cols-2">
-                        <label
+              <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                          :for="`education-school-${index}`"
-                          class="block text-sm font-medium text-gray-700 sm:mt-px"
-                        >
                 Szkoła
               </label>
               <div class="mt-1 sm:mt-0">
                 <input
-                            :id="`education-school-${index}`"
                   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': form.errors[`educations.${index}.school`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`educations.${index}.school`] }"
+                  :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 }"
                 >
-                          <p
-                            v-if="form.errors[`educations.${index}.school`]"
-                            class="mt-2 text-sm text-red-600"
-                          >
-                            {{ form.errors[`educations.${index}.school`] }}
-                          </p>
               </div>
             </div>
             <div class="items-center py-4 sm:grid sm:grid-cols-2">
-                        <label
+              <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                          :for="`education-degree-${index}`"
-                          class="block text-sm font-medium text-gray-700 sm:mt-px"
-                        >
                 Stopień
               </label>
               <div class="mt-1 sm:mt-0">
                 <input
-                            :id="`education-degree-${index}`"
                   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': form.errors[`educations.${index}.degree`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`educations.${index}.degree`] }"
+                  :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 }"
                 >
-                          <p
-                            v-if="form.errors[`educations.${index}.degree`]"
-                            class="mt-2 text-sm text-red-600"
-                          >
-                            {{ form.errors[`educations.${index}.degree`] }}
-                          </p>
               </div>
             </div>
             <div class="items-center py-4 sm:grid sm:grid-cols-2">
-                        <label
+              <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                          :for="`education-fieldOfStudy-${index}`"
-                          class="block text-sm font-medium text-gray-700 sm:mt-px"
-                        >
                 Kierunek/Specjalizacja
               </label>
               <div class="mt-1 sm:mt-0">
                 <input
-                            :id="`education-fieldOfStudy-${index}`"
                   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': form.errors[`educations.${index}.fieldOfStudy`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`educations.${index}.fieldOfStudy`] }"
+                  :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 }"
                 >
-                          <p
-                            v-if="form.errors[`educations.${index}.fieldOfStudy`]"
-                            class="mt-2 text-sm text-red-600"
-                          >
-                            {{ form.errors[`educations.${index}.fieldOfStudy`] }}
-                          </p>
               </div>
             </div>
             <div class="items-center py-4 sm:grid sm:grid-cols-2">
-                        <label
+              <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                          :for="`education-startDate-${index}`"
-                          class="block text-sm font-medium text-gray-700 sm:mt-px"
-                        >
                 Data rozpoczęcia
               </label>
               <div class="mt-1 sm:mt-0">
                 <FlatPickr
-                            :id="`education-startDate-${index}`"
                   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': form.errors[`educations.${index}.startDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`educations.${index}.startDate`] }"
+                  :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 }"
                 />
-                          <p
-                            v-if="form.errors[`educations.${index}.startDate`]"
-                            class="mt-2 text-sm text-red-600"
-                          >
-                            {{ form.errors[`educations.${index}.startDate`] }}
-                          </p>
               </div>
             </div>
             <div class="items-center py-4 sm:grid sm:grid-cols-2">
-                        <label
+              <label class="block text-sm font-medium text-gray-700 sm:mt-px">
-                          :for="`education-endDate-${index}`"
-                          class="block text-sm font-medium text-gray-700 sm:mt-px"
-                        >
                 Data zakończenia
               </label>
               <div class="mt-1 sm:mt-0">
                 <FlatPickr
-                            :id="`education-endDate-${index}`"
                   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': form.errors[`educations.${index}.endDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`educations.${index}.endDate`] }"
+                  :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 }"
                 />
-                          <p
-                            v-if="form.errors[`educations.${index}.endDate`]"
-                            class="mt-2 text-sm text-red-600"
-                          >
-                            {{ form.errors[`educations.${index}.endDate`] }}
-                          </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.educations.splice(index, 1)"
-                >
-                  <TrashIcon class="w-5 h-5 text-red-500" />
-                </button>
-              </div>
           </template>
-          </Draggable>
+        </DynamicSection>
-          <div class="px-8">
+        <DynamicSection
-            <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.educations.push({
-                index: form.educations.length,
-                school: null,
-                degree: null,
-                fieldOfStudy: null,
-                startDate: null,
-                endDate: null,
-              })"
-            >
-              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"
+          header="Języki"
-            tag="transition-group"
+          add-label="Dodaj język"
-            ghost-class="opacity-50"
+          @add-item="addLanguage"
-            handle=".handle"
+          @remove-item="(index) => form.languages.splice(index, 1)"
-            :animation="200"
-            :component-data="{tag: 'div', type: 'transition-group' }"
-            item-key="index"
         >
-            <template #item="{ element, index }">
+          <template #itemHeader="{ element }">
-              <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>
+              {{ element.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
             </template>
             <template v-else>
               (Nieokreślony)
             </template>
-                      </div>
+          </template>
-                      <div class="ml-2">
+          <template #form="{ element, index }">
-                        <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
@@ -333,7 +242,7 @@
                 </label>
                 <div class="mt-2">
                   <LevelPicker
-                            v-model="element.level"
+                    v-model.number="element.level"
                     :levels="languageLevels"
                   />
                   <p
@@ -345,89 +254,24 @@
                 </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>
+        </DynamicSection>
-          <div class="px-8">
+        <DynamicSection
-            <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>
-        <div>
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Technologie
-          </h3>
-          <Draggable
           v-model="form.technologies"
-            class="pt-4 space-y-4"
+          header="Technologie"
-            tag="transition-group"
+          add-label="Dodaj technologie"
-            ghost-class="opacity-50"
+          @add-item="addTechnology"
-            handle=".handle"
+          @remove-item="(index) => form.technologies.splice(index, 1)"
-            :animation="200"
-            :component-data="{tag: 'div', type: 'transition-group' }"
-            item-key="index"
         >
-            <template #item="{ element, index }">
+          <template #itemHeader="{ element }">
-              <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>
+              {{ element.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
             </template>
             <template v-else>
               (Nieokreślony)
             </template>
-                      </div>
+          </template>
-                      <div class="ml-2">
+          <template #form="{ element, index }">
-                        <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
@@ -445,7 +289,7 @@
                 </label>
                 <div class="mt-2">
                   <LevelPicker
-                            v-model="element.level"
+                    v-model.number="element.level"
                     :levels="technologyLevels"
                   />
                   <p
@@ -457,85 +301,19 @@
                 </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.technologies.splice(index, 1)"
-                >
-                  <TrashIcon class="w-5 h-5 text-red-500" />
-                </button>
-              </div>
           </template>
-          </Draggable>
+        </DynamicSection>
-          <div class="px-8">
+        <DynamicSection
-            <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.technologies.push({
-                index: form.technologies.length,
-                name: null,
-                level: technologyLevels[0]
-              })"
-            >
-              Dodaj technologię
-            </button>
-          </div>
-        </div>
-        <div>
-          <h3 class="text-lg font-medium leading-6 text-gray-900">
-            Projekty
-          </h3>
-          <Draggable
           v-model="form.projects"
-            class="pt-4 space-y-4"
+          header="Projekty"
-            tag="transition-group"
+          add-label="Dodaj projekt"
-            ghost-class="opacity-50"
+          @add-item="addProject"
-            handle=".handle"
+          @remove-item="(index) => form.projects.splice(index, 1)"
-            :animation="200"
-            :component-data="{tag: 'div', type: 'transition-group' }"
-            item-key="index"
         >
-            <template #item="{ element, index }">
+          <template #itemHeader="{ element }">
-              <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">
             {{ element.description ? element.description : '(Nieokreślony)' }}
-                      </div>
+          </template>
-                      <div class="ml-2">
+          <template #form="{ element, index }">
-                        <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>
             <div class="items-center py-4 sm:grid sm:grid-cols-2">
               <label
                 :for="`project-description-${index}`"
@@ -629,67 +407,37 @@
             </div>
             <div class="items-center py-4 sm:grid sm:grid-cols-2">
               <label
-                          :for="`project-tags-${index}`"
+                :for="`project-tasks-${index}`"
                 class="block text-sm font-medium text-gray-700 sm:mt-px"
               >
-                          Dodatkowe informacje
+                Zadania
               </label>
               <div class="mt-1 sm:mt-0">
                 <input
-                            :id="`project-tags-${index}`"
+                  :id="`project-tasks-${index}`"
-                            v-model="element.tags"
+                  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}.tags`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`projects.${index}.tags`] }"
+                  :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}.tags`]"
+                  v-if="form.errors[`projects.${index}.tasks`]"
                   class="mt-2 text-sm text-red-600"
                 >
-                            {{ form.errors[`projects.${index}.tags`] }}
+                  {{ form.errors[`projects.${index}.tasks`] }}
                 </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.projects.splice(index, 1)"
-                >
-                  <TrashIcon class="w-5 h-5 text-red-500" />
-                </button>
-              </div>
           </template>
-          </Draggable>
+        </DynamicSection>
-          <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.projects.push({
-                index: form.projects.length,
-                description: null,
-                technologies: null,
-                tags: null,
-                startDate: null,
-                endDate: null,
-              })"
-            >
-              Dodaj projekt
-            </button>
-          </div>
-        </div>
-      </div>
-
         <div class="pt-5">
           <div class="flex justify-end">
-          <button
+            <InertiaLink
-            type="button"
+              href="/resumes"
               class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
             >
               Anuluj
-          </button>
+            </InertiaLink>
             <button
               type="submit"
               class="inline-flex justify-center py-2 px-4 ml-3 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
@@ -698,95 +446,100 @@
             </button>
           </div>
         </div>
+      </div>
     </form>
   </div>
 </template>
 
 <script setup>
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
+import { Listbox, ListboxOption, ListboxOptions, ListboxLabel, ListboxButton } from '@headlessui/vue'
-import { TrashIcon, ViewGridIcon } from '@heroicons/vue/outline'
+import { SelectorIcon, CheckIcon } from '@heroicons/vue/outline'
 import { useForm } from '@inertiajs/inertia-vue3'
 import FlatPickr from 'vue-flatpickr-component'
-import Draggable from 'vuedraggable'
+import DynamicSection from '@/Shared/Forms/DynamicSection'
 import Combobox from '@/Shared/Forms/Combobox'
 import LevelPicker from '@/Shared/Forms/LevelPicker'
 
+const props = defineProps({
+  users: Object,
+  technologies: Array,
+})
+
 const technologyLevels = [
   {
-    level: 0,
+    level: 1,
     name: 'Poczatkujący',
     activeColor: 'bg-rose-400',
     backgroundColor: 'bg-rose-100',
     textColor: 'text-rose-400',
   },
   {
-    level: 1,
+    level: 2,
     name: 'Zaawansowany',
     activeColor: 'bg-orange-400',
     backgroundColor: 'bg-orange-100',
     textColor: 'text-orange-400',
   },
   {
-    level: 2,
+    level: 3,
     name: 'Doświadczony',
     activeColor: 'bg-amber-400',
     backgroundColor: 'bg-amber-100',
     textColor: 'text-yellow-500',
   },
   {
-    level: 3,
+    level: 4,
     name: 'Ekspert',
     activeColor: 'bg-emerald-400',
     backgroundColor: 'bg-emerald-100',
     textColor: 'text-emerald-400',
   },
   {
-    level: 4,
+    level: 5,
     name: 'Chad',
     activeColor: 'bg-blumilk-400',
     backgroundColor: 'bg-blumilk-100',
     textColor: 'text-blumilk-400',
   },
 ]
-
 const languageLevels = [
   {
-    level: 0,
+    level: 1,
     name: 'A1',
     activeColor: 'bg-rose-400',
     backgroundColor: 'bg-rose-100',
     textColor: 'text-rose-400',
   },
   {
-    level: 1,
+    level: 2,
     name: 'A2',
     activeColor: 'bg-orange-400',
     backgroundColor: 'bg-orange-100',
     textColor: 'text-orange-400',
   },
   {
-    level: 2,
+    level: 3,
     name: 'B1',
     activeColor: 'bg-amber-400',
     backgroundColor: 'bg-amber-100',
     textColor: 'text-yellow-500',
   },
   {
-    level: 3,
+    level: 4,
     name: 'B2',
     activeColor: 'bg-emerald-400',
     backgroundColor: 'bg-emerald-100',
     textColor: 'text-emerald-400',
   },
   {
-    level: 4,
+    level: 5,
     name: 'C1',
     activeColor: 'bg-blumilk-400',
     backgroundColor: 'bg-blumilk-100',
     textColor: 'text-blumilk-400',
   },
   {
-    level: 5,
+    level: 6,
     name: 'C2',
     activeColor: 'bg-blumilk-600',
     backgroundColor: 'bg-blumilk-200',
@@ -794,30 +547,71 @@ const languageLevels = [
   },
 ]
 
-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' },
+  'Język polski',
-  { id: 2, name: 'Język angielski' },
+  'Język angielski',
-  { id: 3, name: 'Język niemiecki' },
+  'Język niemiecki',
 ]
 
 const form = useForm({
+  user: props.users.data[0],
+  name: null,
   educations: [],
   projects: [],
   technologies: [],
   languages: [],
 })
 
+function addProject() {
+  form.projects.push({
+    description: null,
+    technologies: null,
+    tasks: null,
+    startDate: null,
+    endDate: null,
+  })
+}
+
+function addTechnology() {
+  form.technologies.push({
+    name: null,
+    level: technologyLevels[0],
+  })
+}
+
+function addEducation() {
+  form.educations.push({
+    school: null,
+    degree: null,
+    fieldOfStudy: null,
+    startDate: null,
+    endDate: null,
+  })
+}
+
+function addLanguage() {
+  form.languages.push({
+    name: null,
+    level: languageLevels[0],
+  })
+}
+
+function submitResume() {
+  form
+    .transform((data) => ({
+      user: data.user.id,
+      name: data.name,
+      education: data.educations,
+      languages: data.languages.map(language => ({
+        name: language.name,
+        level: language.level.level,
+      })),
+      technologies: data.technologies.map(technology => ({
+        name: technology.name,
+        level: technology.level.level,
+      })),
+      projects: data.projects,
+    }))
+    .post('/resumes')
+}
 </script>

resources/js/Pages/Resumes/Edit.vue

@@ -0,0 +1,637 @@
+<template>
+  <InertiaHead title="Dodawanie CV" />
+  <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
+    <div class="p-4 sm:px-6">
+      <h2 class="text-lg font-medium leading-6 text-gray-900">
+        Edytuj CV
+      </h2>
+    </div>
+    <form
+      class="flex flex-col justify-center py-8 px-6 space-y-8 border-t border-gray-200"
+      @submit.prevent="submitResume"
+    >
+      <div class="space-y-8 sm:space-y-5">
+        <div>
+          <h3 class="text-lg font-medium leading-6 text-gray-900">
+            Dane podstawowe
+          </h3>
+          <div class="grid grid-cols-2 gap-8 py-4">
+            <Listbox
+              v-model="form.user"
+              as="div"
+            >
+              <ListboxLabel class="block text-sm font-medium text-gray-700">
+                Użytkownik
+              </ListboxLabel>
+              <div class="relative mt-2">
+                <ListboxButton
+                  class="relative py-2 pr-10 pl-3 w-full max-w-md h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
+                >
+                  <span v-if="form.user === null">
+                    Nie istnieje w bazie
+                  </span>
+                  <span
+                    v-else
+                    class="flex items-center"
+                  >
+                    <img
+                      :src="form.user.avatar"
+                      class="shrink-0 w-6 h-6 rounded-full"
+                    >
+                    <span class="block ml-3 truncate">{{ form.user.name }}</span>
+                  </span>
+                  <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                    <SelectorIcon class="w-5 h-5 text-gray-400" />
+                  </span>
+                </ListboxButton>
+
+                <transition
+                  leave-active-class="transition ease-in duration-100"
+                  leave-from-class="opacity-100"
+                  leave-to-class="opacity-0"
+                >
+                  <ListboxOptions
+                    class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                  >
+                    <ListboxOption
+                      v-slot="{ active }"
+                      as="template"
+                      :value="null"
+                    >
+                      <li
+                        :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                      >
+                        <div class="flex items-center">
+                          Nie istnieje w bazie
+                        </div>
+
+                        <span
+                          v-if="form.user === null"
+                          :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                        >
+                          <CheckIcon class="w-5 h-5" />
+                        </span>
+                      </li>
+                    </ListboxOption>
+                    <ListboxOption
+                      v-for="user in users.data"
+                      :key="user.id"
+                      v-slot="{ active }"
+                      as="template"
+                      :value="user"
+                    >
+                      <li
+                        :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                      >
+                        <div class="flex items-center">
+                          <img
+                            :src="user.avatar"
+                            class="shrink-0 w-6 h-6 rounded-full"
+                          >
+                          <span
+                            :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
+                          >
+                            {{ user.name }}
+                          </span>
+                        </div>
+                        <span
+                          v-if="form.user?.id === user.id"
+                          :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                        >
+                          <CheckIcon class="w-5 h-5" />
+                        </span>
+                      </li>
+                    </ListboxOption>
+                  </ListboxOptions>
+                </transition>
+              </div>
+            </Listbox>
+            <div v-if="form.user === null">
+              <label
+                for="name"
+                class="block text-sm font-medium text-gray-700 sm:mt-px"
+              >
+                Imię i nazwisko
+              </label>
+              <div class="mt-2">
+                <input
+                  id="name"
+                  v-model="form.name"
+                  type="text"
+                  class="block w-full max-w-md 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.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
+                >
+                <p
+                  v-if="form.errors.name"
+                  class="mt-2 text-sm text-red-600"
+                >
+                  {{ form.errors.name }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <DynamicSection
+          v-model="form.educations"
+          header="Edukacja"
+          add-label="Dodaj szkołę"
+          @add-item="addEducation"
+          @remove-item="(index) => form.educations.splice(index, 1)"
+        >
+          <template #itemHeader="{ element }">
+            {{ element.school ? element.school : '(Nieokreślony)' }}
+          </template>
+          <template #form="{ element }">
+            <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
+              </label>
+              <div class="mt-1 sm:mt-0">
+                <input
+                  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 }"
+                >
+              </div>
+            </div>
+            <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">
+                Stopień
+              </label>
+              <div class="mt-1 sm:mt-0">
+                <input
+                  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 }"
+                >
+              </div>
+            </div>
+            <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">
+                Kierunek/Specjalizacja
+              </label>
+              <div class="mt-1 sm:mt-0">
+                <input
+                  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 }"
+                >
+              </div>
+            </div>
+            <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">
+                Data rozpoczęcia
+              </label>
+              <div class="mt-1 sm:mt-0">
+                <FlatPickr
+                  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 }"
+                />
+              </div>
+            </div>
+            <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">
+                Data zakończenia
+              </label>
+              <div class="mt-1 sm:mt-0">
+                <FlatPickr
+                  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 }"
+                />
+              </div>
+            </div>
+          </template>
+        </DynamicSection>
+        <DynamicSection
+          v-model="form.languages"
+          header="Języki"
+          add-label="Dodaj język"
+          @add-item="addLanguage"
+          @remove-item="(index) => form.languages.splice(index, 1)"
+        >
+          <template #itemHeader="{ element }">
+            <template v-if="element.name">
+              {{ element.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
+            </template>
+            <template v-else>
+              (Nieokreślony)
+            </template>
+          </template>
+          <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"
+                >
+                  {{ form.errors[`languages.${index}.name`] }}
+                </p>
+              </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.number="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>
+          </template>
+        </DynamicSection>
+        <DynamicSection
+          v-model="form.technologies"
+          header="Technologie"
+          add-label="Dodaj technologie"
+          @add-item="addTechnology"
+          @remove-item="(index) => form.technologies.splice(index, 1)"
+        >
+          <template #itemHeader="{ element }">
+            <template v-if="element.name">
+              {{ element.name }} - <span :class="element.level.textColor">{{ element.level.name }}</span>
+            </template>
+            <template v-else>
+              (Nieokreślony)
+            </template>
+          </template>
+          <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"
+                >
+                  {{ form.errors[`technologies.${index}.name`] }}
+                </p>
+              </div>
+              <div class="py-4">
+                <label
+                  :for="`technology-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.number="element.level"
+                    :levels="technologyLevels"
+                  />
+                  <p
+                    v-if="form.errors[`technologies.${index}.level`]"
+                    class="mt-2 text-sm text-red-600"
+                  >
+                    {{ form.errors[`technologies.${index}.level`] }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </template>
+        </DynamicSection>
+        <DynamicSection
+          v-model="form.projects"
+          header="Projekty"
+          add-label="Dodaj projekt"
+          @add-item="addProject"
+          @remove-item="(index) => form.projects.splice(index, 1)"
+        >
+          <template #itemHeader="{ element }">
+            {{ element.description ? element.description : '(Nieokreślony)' }}
+          </template>
+          <template #form="{ element, index }">
+            <div class="items-center py-4 sm:grid sm:grid-cols-2">
+              <label
+                :for="`project-description-${index}`"
+                class="block text-sm font-medium text-gray-700 sm:mt-px"
+              >
+                Opis projektu
+              </label>
+              <div class="mt-1 sm:mt-0">
+                <textarea
+                  :id="`project-description-${index}`"
+                  v-model="element.description"
+                  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`] }"
+                />
+                <p
+                  v-if="form.errors[`projects.${index}.description`]"
+                  class="mt-2 text-sm text-red-600"
+                >
+                  {{ form.errors[`projects.${index}.description`] }}
+                </p>
+              </div>
+            </div>
+            <div class="items-center py-4 sm:grid sm:grid-cols-2">
+              <label
+                :for="`project-technologies-${index}`"
+                class="block text-sm font-medium text-gray-700 sm:mt-px"
+              >
+                Technologie
+              </label>
+              <div class="mt-1 sm:mt-0">
+                <input
+                  :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`] }"
+                >
+                <p
+                  v-if="form.errors[`projects.${index}.technologies`]"
+                  class="mt-2 text-sm text-red-600"
+                >
+                  {{ form.errors[`projects.${index}.technologies`] }}
+                </p>
+              </div>
+            </div>
+            <div class="items-center py-4 sm:grid sm:grid-cols-2">
+              <label
+                :for="`project-startDate-${index}`"
+                class="block text-sm font-medium text-gray-700 sm:mt-px"
+              >
+                Data rozpoczęcia
+              </label>
+              <div class="mt-1 sm:mt-0">
+                <FlatPickr
+                  :id="`project-startDate-${index}`"
+                  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': form.errors[`educations.${index}.startDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`educations.${index}.startDate`] }"
+                />
+                <p
+                  v-if="form.errors[`educations.${index}.startDate`]"
+                  class="mt-2 text-sm text-red-600"
+                >
+                  {{ form.errors[`educations.${index}.startDate`] }}
+                </p>
+              </div>
+            </div>
+            <div class="items-center py-4 sm:grid sm:grid-cols-2">
+              <label
+                :for="`project-endDate-${index}`"
+                class="block text-sm font-medium text-gray-700 sm:mt-px"
+              >
+                Data zakończenia
+              </label>
+              <div class="mt-1 sm:mt-0">
+                <FlatPickr
+                  :id="`project-endDate-${index}`"
+                  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': form.errors[`educations.${index}.endDate`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`educations.${index}.endDate`] }"
+                />
+                <p
+                  v-if="form.errors[`educations.${index}.endDate`]"
+                  class="mt-2 text-sm text-red-600"
+                >
+                  {{ form.errors[`educations.${index}.endDate`] }}
+                </p>
+              </div>
+            </div>
+            <div class="items-center py-4 sm:grid sm:grid-cols-2">
+              <label
+                :for="`project-tasks-${index}`"
+                class="block text-sm font-medium text-gray-700 sm:mt-px"
+              >
+                Zadania
+              </label>
+              <div class="mt-1 sm:mt-0">
+                <input
+                  :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"
+                >
+                  {{ form.errors[`projects.${index}.tasks`] }}
+                </p>
+              </div>
+            </div>
+          </template>
+        </DynamicSection>
+        <div class="pt-5">
+          <div class="flex justify-end">
+            <InertiaLink
+              href="/resumes"
+              class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            >
+              Anuluj
+            </InertiaLink>
+            <button
+              type="submit"
+              class="inline-flex justify-center py-2 px-4 ml-3 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            >
+              Zapisz
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { Listbox, ListboxOption, ListboxOptions, ListboxLabel, ListboxButton } from '@headlessui/vue'
+import { SelectorIcon, CheckIcon } from '@heroicons/vue/outline'
+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 LevelPicker from '@/Shared/Forms/LevelPicker'
+
+const props = defineProps({
+  users: Object,
+  technologies: Array,
+  resume: Object,
+})
+
+const technologyLevels = [
+  {
+    level: 1,
+    name: 'Poczatkujący',
+    activeColor: 'bg-rose-400',
+    backgroundColor: 'bg-rose-100',
+    textColor: 'text-rose-400',
+  },
+  {
+    level: 2,
+    name: 'Zaawansowany',
+    activeColor: 'bg-orange-400',
+    backgroundColor: 'bg-orange-100',
+    textColor: 'text-orange-400',
+  },
+  {
+    level: 3,
+    name: 'Doświadczony',
+    activeColor: 'bg-amber-400',
+    backgroundColor: 'bg-amber-100',
+    textColor: 'text-yellow-500',
+  },
+  {
+    level: 4,
+    name: 'Ekspert',
+    activeColor: 'bg-emerald-400',
+    backgroundColor: 'bg-emerald-100',
+    textColor: 'text-emerald-400',
+  },
+  {
+    level: 5,
+    name: 'Chad',
+    activeColor: 'bg-blumilk-400',
+    backgroundColor: 'bg-blumilk-100',
+    textColor: 'text-blumilk-400',
+  },
+]
+
+const languageLevels = [
+  {
+    level: 1,
+    name: 'A1',
+    activeColor: 'bg-rose-400',
+    backgroundColor: 'bg-rose-100',
+    textColor: 'text-rose-400',
+  },
+  {
+    level: 2,
+    name: 'A2',
+    activeColor: 'bg-orange-400',
+    backgroundColor: 'bg-orange-100',
+    textColor: 'text-orange-400',
+  },
+  {
+    level: 3,
+    name: 'B1',
+    activeColor: 'bg-amber-400',
+    backgroundColor: 'bg-amber-100',
+    textColor: 'text-yellow-500',
+  },
+  {
+    level: 4,
+    name: 'B2',
+    activeColor: 'bg-emerald-400',
+    backgroundColor: 'bg-emerald-100',
+    textColor: 'text-emerald-400',
+  },
+  {
+    level: 5,
+    name: 'C1',
+    activeColor: 'bg-blumilk-400',
+    backgroundColor: 'bg-blumilk-100',
+    textColor: 'text-blumilk-400',
+  },
+  {
+    level: 6,
+    name: 'C2',
+    activeColor: 'bg-blumilk-600',
+    backgroundColor: 'bg-blumilk-200',
+    textColor: 'text-blumilk-600',
+  },
+]
+
+const languages = [
+  'Język polski',
+  'Język angielski',
+  'Język niemiecki',
+]
+
+const form = useForm({
+  user: props.users.data.find((user) => user.id === props.resume.user),
+  name: props.resume.name,
+  educations: props.resume.educations ?? [],
+  projects: props.resume.projects ?? [],
+  technologies: props.resume.technologies.map((technology) => ({
+    name: props.technologies.find((tech) => tech === technology.name),
+    level: technologyLevels.find((level) => level.level === technology.level),
+  })) ?? [],
+  languages: props.resume.languages.map((language) => ({
+    name: languages.find((lang) => lang.name === language.name),
+    level: languageLevels.find((level) => level.level === language.level),
+  })) ?? [],
+})
+
+function addProject() {
+  form.projects.push({
+    description: null,
+    technologies: null,
+    tasks: null,
+    startDate: null,
+    endDate: null,
+  })
+}
+
+function addTechnology() {
+  form.technologies.push({
+    name: null,
+    level: technologyLevels[0],
+  })
+}
+
+function addEducation() {
+  form.educations.push({
+    school: null,
+    degree: null,
+    fieldOfStudy: null,
+    startDate: null,
+    endDate: null,
+  })
+}
+
+function addLanguage() {
+  form.languages.push({
+    name: null,
+    level: languageLevels[0],
+  })
+}
+
+function submitResume() {
+  form
+    .transform((data) => ({
+      user: data.user.id,
+      name: data.name,
+      education: data.educations,
+      languages: data.languages.map(language => ({
+        name: language.name,
+        level: language.level.level,
+      })),
+      technologies: data.technologies.map(technology => ({
+        name: technology.name,
+        level: technology.level.level,
+      })),
+      projects: data.projects,
+    }))
+    .put(`/resumes/${props.resume.id}`)
+}
+</script>

resources/js/Pages/Resumes/Index.vue

@@ -2,12 +2,10 @@
   <InertiaHead title="CV" />
   <div class="bg-white shadow-md">
     <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
       <h2 class="text-lg font-medium leading-6 text-gray-900">
-          CV
+        Lista CV
       </h2>
-      </div>
+      <div>
-      <div v-if="true">
         <InertiaLink
           href="resumes/create"
           class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
@@ -25,19 +23,25 @@
                 scope="col"
                 class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
-                Pracownik
+                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"
               >
-                Data
+                Opis
               </th>
               <th
                 scope="col"
                 class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
               >
-                Dzień tygodnia
+                Data utworzenia
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Data aktualizacji
               </th>
               <th
                 scope="col"
@@ -46,74 +50,100 @@
             </tr>
           </thead>
           <tbody class="bg-white divide-y divide-gray-100">
-            <tr>
+            <tr
-              <!--              v-for="holiday in holidays.data"-->
+              v-for="resume in resumes.data"
-              <!--              :key="holiday.id"-->
+              :key="resume.id"
-              <!--              :class="[holiday.isPast ? 'bg-gray-100' : 'hover:bg-blumilk-25']"-->
+              class="hover:bg-blumilk-25"
-              <td class="p-4 text-sm font-semibold text-gray-700 capitalize whitespace-nowrap">
+            >
-                Jan Kowalski
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <div
+                  v-if="resume.user"
+                  class="flex"
+                >
+                  <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
+                    <img
+                      class="w-10 h-10 rounded-full"
+                      :src="resume.user.avatar"
+                    >
+                  </span>
+                  <div class="ml-3">
+                    <p class="text-sm font-medium text-gray-900 break-all">
+                      {{ resume.user.name }}
+                    </p>
+                    <p class="text-sm text-gray-500 break-all">
+                      {{ resume.user.email }}
+                    </p>
+                  </div>
+                </div>
+                <template v-else>
+                  {{ resume.name }}
+                </template>
               </td>
               <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                xd
+                {{ resume.description ?? '-' }}
               </td>
               <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                xd
+                {{ resume.createdAt }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ resume.updatedAt }}
               </td>
               <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
-              <!--                <Menu-->
+                <Menu
-              <!--                  v-if="true"-->
+                  as="div"
-              <!--                  as="div"-->
+                  class="inline-block relative text-left"
-              <!--                  class="inline-block relative text-left"-->
+                >
-              <!--                >-->
+                  <MenuButton class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100">
-              <!--                  <MenuButton class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100">-->
+                    <DotsVerticalIcon class="w-5 h-5" />
-              <!--                    <DotsVerticalIcon-->
+                  </MenuButton>
-              <!--                      class="w-5 h-5"-->
-              <!--                      aria-hidden="true"-->
-              <!--                    />-->
-              <!--                  </MenuButton>-->
 
-              <!--                  <transition-->
+                  <transition
-              <!--                    enter-active-class="transition ease-out duration-100"-->
+                    enter-active-class="transition ease-out duration-100"
-              <!--                    enter-from-class="transform opacity-0 scale-95"-->
+                    enter-from-class="transform opacity-0 scale-95"
-              <!--                    enter-to-class="transform opacity-100 scale-100"-->
+                    enter-to-class="transform opacity-100 scale-100"
-              <!--                    leave-active-class="transition ease-in duration-75"-->
+                    leave-active-class="transition ease-in duration-75"
-              <!--                    leave-from-class="transform opacity-100 scale-100"-->
+                    leave-from-class="transform opacity-100 scale-100"
-              <!--                    leave-to-class="transform opacity-0 scale-95"-->
+                    leave-to-class="transform opacity-0 scale-95"
-              <!--                  >-->
+                  >
-              <!--                    <MenuItems class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right">-->
+                    <MenuItems class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right">
-              <!--                      <div class="py-1">-->
+                      <div class="py-1">
-              <!--                        <MenuItem-->
+                        <MenuItem v-slot="{ active }">
-              <!--                          v-slot="{ active }"-->
+                          <InertiaLink
-              <!--                          class="flex"-->
+                            :href="`/resumes/${resume.id}/edit`"
-              <!--                        >-->
+                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 flex text-sm']"
-              <!--                          <InertiaLink-->
+                          >
-              <!--                            :href="`/resumes/${holiday.id}/edit`"-->
+                            <PencilIcon class="mr-2 w-5 h-5 text-blue-500" /> Edytuj
-              <!--                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"-->
+                          </InertiaLink>
-              <!--                          >-->
+                        </MenuItem>
-              <!--                            <PencilIcon class="mr-2 w-5 h-5 text-blue-500" /> Edytuj-->
+                        <MenuItem v-slot="{ active }">
-              <!--                          </InertiaLink>-->
+                          <a
-              <!--                        </MenuItem>-->
+                            :href="`/resumes/${resume.id}`"
-              <!--                        <MenuItem-->
+                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 flex text-sm']"
-              <!--                          v-slot="{ active }"-->
+                          >
-              <!--                          class="flex"-->
+                            <DownloadIcon class="mr-2 w-5 h-5 text-blumilk-500" /> Pobierz
-              <!--                        >-->
+                          </a>
-              <!--                          <InertiaLink-->
+                        </MenuItem>
-              <!--                            as="button"-->
+                        <MenuItem
-              <!--                            method="delete"-->
+                          v-slot="{ active }"
-              <!--                            :preserve-scroll="true"-->
+                          class="flex"
-              <!--                            :href="`/holidays/${holiday.id}`"-->
+                        >
-              <!--                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"-->
+                          <InertiaLink
-              <!--                          >-->
+                            as="button"
-              <!--                            <TrashIcon class="mr-2 w-5 h-5 text-red-500" /> Usuń-->
+                            method="delete"
-              <!--                          </InertiaLink>-->
+                            :preserve-scroll="true"
-              <!--                        </MenuItem>-->
+                            :href="`/resumes/${resume.id}`"
-              <!--                      </div>-->
+                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
-              <!--                    </MenuItems>-->
+                          >
-              <!--                  </transition>-->
+                            <TrashIcon class="mr-2 w-5 h-5 text-red-500" /> Usuń
-              <!--                </Menu>-->
+                          </InertiaLink>
+                        </MenuItem>
+                      </div>
+                    </MenuItems>
+                  </transition>
+                </Menu>
               </td>
             </tr>
-            <tr v-if="!true">
+            <tr v-if="!resumes.data.length">
               <td
                 colspan="100%"
                 class="py-4 text-xl leading-5 text-center text-gray-700"
@@ -124,16 +154,19 @@
           </tbody>
         </table>
       </div>
+      <Pagination :pagination="resumes.meta" />
     </div>
   </div>
 </template>
 
 <script setup>
-import { DotsVerticalIcon, PencilIcon, TrashIcon } from '@heroicons/vue/solid'
+import { DotsVerticalIcon } from '@heroicons/vue/outline'
+import { DownloadIcon, PencilIcon, TrashIcon } from '@heroicons/vue/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import Pagination from '@/Shared/Pagination'
 
 defineProps({
-  holidays: Object,
+  resumes: Object,
   can: Object,
 })
 </script>

resources/js/Shared/Forms/Combobox.vue

@@ -9,7 +9,6 @@
     <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">
@@ -29,7 +28,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
@@ -67,6 +66,6 @@ const query = ref('')
 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>

resources/js/Shared/Forms/DynamicSection.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <h3 class="text-lg font-medium leading-6 text-gray-900">
+      {{ header }}
+    </h3>
+    <Draggable
+      v-model="items"
+      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="((item) => items.indexOf(item))"
+    >
+      <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="false"
+            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">
+                  <slot
+                    name="itemHeader"
+                    :element="element"
+                    :index="index"
+                  />
+                </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"
+            >
+              <slot
+                name="form"
+                :element="element"
+                :index="index"
+              />
+            </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="removeItem(index)"
+          >
+            <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="addItem()"
+      >
+        {{ addLabel }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
+import { TrashIcon, ViewGridIcon } from '@heroicons/vue/outline'
+import Draggable from 'vuedraggable'
+import { computed } from 'vue'
+
+const props = defineProps({
+  header: String,
+  addLabel: String,
+  modelValue: Object,
+  itemHeader: [Function, String],
+})
+
+const emit = defineEmits(['update:modelValue', 'addItem', 'removeItem'])
+
+const items = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+})
+
+function addItem() {
+  emit('addItem')
+}
+
+function removeItem(index) {
+  emit('removeItem', index)
+}
+</script>