Автофокус в формах и фикс отображения

app/Http/Controllers/ConceptController.php

@@ -38,8 +38,8 @@ public function store(Request $request, string $dictionaryId)
         $dictionary = Dictionary::findOrFail($dictionaryId);
         Gate::authorize('must-be-owner', $dictionary);
         $validated = $request->validate([
-            'name' => ['required', 'max:50', Rule::notIn(Dictionary::find($dictionaryId)->concepts()->pluck('name'))],
-            'definition' => 'max:1000',
+            'name' => ['required', 'max:255', Rule::notIn(Dictionary::find($dictionaryId)->concepts()->pluck('name'))],
+            'definition' => 'max:10000',
             'fk_parent_concept_id' => ['uuid', Rule::in(Dictionary::find($dictionaryId)->concepts()->pluck('id'))],
         ]);
 
@@ -123,10 +123,9 @@ public function edit(Dictionary $dictionary, Concept $concept)
     public function update(Request $request, Dictionary $dictionary, Concept $concept)
     {
         Gate::authorize('must-be-owner', $concept->dictionary);
-
         $validated = $request->validate([
-            'name' => ['required', 'max:50', Rule::notIn($dictionary->concepts->where('id', '!=', $concept->id)->pluck('name'))],
-            'definition' => 'max:1000',
+            'name' => ['required', 'max:255', Rule::notIn($dictionary->concepts->where('id', '!=', $concept->id)->pluck('name'))],
+            'definition' => 'max:10000',
             'parent' => [Rule::excludeIf(empty($request->input('parent'))), 'uuid', Rule::in($dictionary->concepts->pluck('id'))],
         ]);
 

database/migrations/2024_05_29_135051_change_concept_columns.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('concepts', function (Blueprint $table) {
+            $table->string('definition', 10000)->nullable()->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('concepts', function (Blueprint $table) {
+            $table->string('definition', 1000)->nullable()->change();
+        });
+    }
+};

resources/views/attribute/create.blade.php

@@ -25,7 +25,7 @@
                     <div class="grid gap-4 mb-4">
                         <div class="col-span-2">
                             <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ __('attribute-page.create.name-input-label')}}</label>
-                            <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ __('attribute-page.create.name-input-placeholder') }}" value="{{old('name')}}" required="">
+                            <input autofocus type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ __('attribute-page.create.name-input-placeholder') }}" value="{{old('name')}}" required="">
                             <x-input-error :messages="$errors->get('name')" class="mt-2" />
                         </div>
                         <div class="col-span-2">

resources/views/attribute/edit.blade.php

@@ -28,7 +28,7 @@
                     <div class="grid gap-4 mb-4">
                         <div class="col-span-2">
                             <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ __('attribute-page.edit.name-input-label') }}</label>
-                            <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ __('attribute-page.edit.name-input-placeholder') }}" value="{{ $attribute->name }}" required="">
+                            <input autofocus type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ __('attribute-page.edit.name-input-placeholder') }}" value="{{ $attribute->name }}" required="">
                             <x-input-error :messages="$errors->get('name')" class="mt-2" />
                         </div>
                         <div class="col-span-2">

resources/views/components/head/text-editor.blade.php

@@ -86,7 +86,7 @@
             </div>
         </div>
         <textarea name="{{$name}}" id="textarea" class="hidden">{{$value}}</textarea>
-        <div contenteditable id="{{$id}}" class="{{$textareaClass}} w-full max-w-xl whitespace-pre-wrap overflow-y-auto leading-relaxed break-words">{!! $value !!}</div>
+        <div contenteditable id="{{$id}}" onchange="onChange" class="{{$textareaClass}} w-full max-w-xl whitespace-pre-wrap overflow-y-auto leading-relaxed break-words">{!! $value !!}</div>
 
         <script>
             const textarea = document.getElementById("textarea");

resources/views/components/tree-view/tree-item.blade.php

@@ -10,12 +10,12 @@
 @if ($children->count() > 0)
 <h2 id="header-{{$concept->id}} " class="w-full">
     <div data-dropdown-trigger="click" data-dropdown-toggle="dropdown{{$concept->id}}" data-dropdown-placement="right" data-dropdown-offset-skidding="100">
-        <button type="button" class="{{$hover}} flex items-center justify-between w-full px-2 py-1 font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#body-{{$concept->id}}" aria-expanded="false" aria-controls="body-{{$concept->id}}">
-            <div class="">
+        <button type="button" class="{{$hover}} flex items-center justify-between w-full px-2 py-1 font-medium text-gray-700 dark:text-gray-200  dark:hover:bg-gray-800" data-accordion-target="#body-{{$concept->id}}" aria-expanded="false" aria-controls="body-{{$concept->id}}">
+            <div class="inline-flex items-start text-left">
                 @if ($concept->fk_parent_concept_id)
                 <span class="text-gray-400 -ml-[10px] mr-1">-</span>
                 @endif
-                <span class="overflow-hidden select-text text-ellipsis">{{$concept->name}}</span>
+                <span class="overflow-hidden text-gray-700 select-text dark:text-gray-200">{{$concept->name}}</span>
             </div>
             <x-tree-view.icon />
         </button>
@@ -24,7 +24,7 @@
 <div id="body-{{$concept->id}}" class="hidden" aria-labelledby="header-{{$concept->id}}">
     <div class="border-l-2 border-gray-400 select-text ms-1">
         <!-- Nested accordion -->
-        <div id="{{$unique}}" data-accordion="open" data-inactive-classes="text-inherit" data-active-classes="{{$active}}">
+        <div id="{{$unique}}" data-accordion="open" data-inactive-classes="text-gray-700 dark:text-gray-200" data-active-classes="{{$active}} {{$hover}}">
             @each('components.tree-view.tree-item', $children, 'concept')
         </div>
         <!-- End: Nested accordion -->

resources/views/concept-attribute/create.blade.php

@@ -29,7 +29,7 @@
                     <div class="grid gap-4 mb-4">
                         <div class="col-span-2">
                             <label for="attribute" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ __('concept-attribute.form.attribute.label') }}</label>
-                            <select name="attribute" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
+                            <select autofocus name="attribute" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                                 @foreach($attributes as $attribute)
                                 <option value="{{ $attribute->id }}">{{ $attribute->name . ' - ' . $attribute->type->value }}</option>
                                 @endforeach

resources/views/concept-relation/create.blade.php

@@ -24,7 +24,7 @@
                     <div class="grid gap-4 mb-4">
                         <div class="col-span-2">
                             <label for="fk_relation_type_id" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ __('dashboard.relation.create.form.type')}}</label>
-                            <select required name="fk_relation_type_id" class="bg-gray-50 cursor-pointer border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
+                            <select autofocus required name="fk_relation_type_id" class="bg-gray-50 cursor-pointer border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                                 @foreach($relationTypes as $type)
                                 <option value="{{ $type->id }}" @selected(old('fk_relation_type_id') === $type->id)>{{ $type->name }}</option>
                                 @endforeach

resources/views/concept-relation/edit.blade.php

@@ -25,7 +25,7 @@
                     <div class="grid gap-4 mb-4">
                         <div class="col-span-2">
                             <label for="fk_relation_type_id" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ __('dashboard.relation.edit.form.type')}}</label>
-                            <select required name="fk_relation_type_id" class="bg-gray-50 cursor-pointer border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
+                            <select autofocus required name="fk_relation_type_id" class="bg-gray-50 cursor-pointer border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                                 @foreach($relationTypes as $type)
                                 <option value="{{ $type->id }}" @selected((old('fk_relation_type_id') ?? $conceptRelation->fk_relation_type_id )=== $type->id)>{{ $type->name }}</option>
                                 @endforeach

resources/views/concept/create.blade.php

@@ -27,7 +27,7 @@
                     <div class="grid gap-4 mb-4">
                         <div class="col-span-2">
                             <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ __('Наименование')}}</label>
-                            <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Наименование" value="{{old('name')}}" required maxlength="50">
+                            <input autofocus type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Наименование" value="{{old('name')}}" required maxlength="255">
                             <x-input-error :messages="$errors->get('name')" class="mt-2" />
                         </div>
                         <div class="col-span-2">

resources/views/concept/edit.blade.php

@@ -35,7 +35,7 @@
                         </div>
                         <div class="col-span-2">
                             <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ __('Наименование')}}</label>
-                            <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Наименование" value="{{old('name') ?? $concept->name}}" required maxlength="50">
+                            <input autofocus type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Наименование" value="{{old('name') ?? $concept->name}}" required maxlength="255">
                             <x-input-error :messages="$errors->get('name')" class="mt-2" />
                         </div>
                         <div class="col-span-2">

resources/views/dictionary/create.blade.php

@@ -21,7 +21,7 @@
                     <div class="grid gap-4 mb-4">
                         <div class="col-span-2">
                             <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ __('dictionary-page.create.name.label')}}</label>
-                            <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{__('dictionary-page.create.name.placeholder')}}" value="{{old('name')}}" required="">
+                            <input autofocus type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{__('dictionary-page.create.name.placeholder')}}" value="{{old('name')}}" required="">
                             <x-input-error :messages="$errors->get('name')" class="mt-2" />
                         </div>
                         <div class="col-span-2">

resources/views/dictionary/edit.blade.php

@@ -21,7 +21,7 @@
                     <div class="grid gap-4 mb-4">
                         <div class="col-span-2">
                             <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ __('dictionary-page.create.name.label')}}</label>
-                            <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ __('dictionary-page.create.name.placeholder') }}" value="{{$dictionary->name}}" required="">
+                            <input autofocus type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ __('dictionary-page.create.name.placeholder') }}" value="{{$dictionary->name}}" required="">
                             <x-input-error :messages="$errors->get('name')" class="mt-2" />
                         </div>
                         <div class="col-span-2">

resources/views/relation-type/create.blade.php

@@ -21,7 +21,7 @@
                     <div class="grid gap-4 mb-4">
                         <div class="col-span-2">
                             <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ __('relation-type-page.create.name.label')}}</label>
-                            <input maxlength="255" type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ __('relation-type-page.create.name.placeholder') }}" value="{{old('name')}}" required="">
+                            <input autofocus maxlength="255" type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ __('relation-type-page.create.name.placeholder') }}" value="{{old('name')}}" required="">
                             <x-input-error :messages="$errors->get('name')" class="mt-2" />
                         </div>
                         <div class="col-span-2">

resources/views/relation-type/edit.blade.php

@@ -24,7 +24,7 @@
                     <div class="grid gap-4 mb-4">
                         <div class="col-span-2">
                             <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ __('relation-type-page.edit.name.label') }}</label>
-                            <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ __('relation-type-page.edit.name.placeholder') }}" value="{{ old('name') ?? $relationType->name }}" required="">
+                            <input autofocus type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ __('relation-type-page.edit.name.placeholder') }}" value="{{ old('name') ?? $relationType->name }}" required="">
                             <x-input-error :messages="$errors->get('name')" class="mt-2" />
                         </div>
                         <div class="col-span-2">