Fix Array field inline view

Fix KeyVal field inline view Change: moved default label-width and field-width, for inline form layout, to config
tanthammar · Aug 11, 2020 · a2ef67b · a2ef67b
1 parent 8ac6d79
commit a2ef67b
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 67 deletions.
diff --git a/config/tall-forms.php b/config/tall-forms.php
@@ -11,7 +11,7 @@
     //form buttons translations
     'saved' => 'global.saved',
     'delete' => 'global.delete',
-    'save-and-stay' =>'global.save',
+    'save-and-stay' => 'global.save',
     'save-go-back' => 'global.save_go_back',
     'message-updated-success' => 'messages.updated_success',
 
@@ -49,5 +49,9 @@
     'arrow-down-icon' => 'light/arrow-down',
     'trash-icon' => 'light/trash-alt',
     'plus-icon' => 'light/plus-circle',
-    'file-icon' => 'light/' //used as @svg('light/{$mime_type}', 'classes')
+    'file-icon' => 'light/', //used as @svg('light/{$mime_type}', 'classes')
+
+    //Default label-, field-width for inline form layout
+    'field-width' => 'sm:w-3/4 md:w-4/5',
+    'label-width' => 'sm:w-1/4 md:w-1/5',
 ];
diff --git a/resources/views/components/field-wrapper.blade.php b/resources/views/components/field-wrapper.blade.php
@@ -2,11 +2,11 @@
     'colspan' => 6,
     'field' => "",
     'label' => "",
-    'labelW' => 'sm:w-1/3',
-    'fieldW' => 'sm:w-2/3',
+    'labelW' => config('tall-forms.label-width'),
+    'fieldW' => config('tall-forms.field-width'),
     'align' => 'items-baseline'
 ])
-<div class="col-span-{{ $colspan }} {{ $this->inline ? 'sm:flex' : 'w-full'}} {{$align}}">
+<div class="{{ $this->inline ? 'sm:flex' : 'w-full'}} {{$align}}">
     <label for="{{ $field }}" class="w-full form-label {{ $this->inline ? $labelW : null }} {{ $this->inline ? 'sm:text-right' : 'text-left' }} pr-4">
         {{ $label }}
     </label>

diff --git a/resources/views/fields/array.blade.php b/resources/views/fields/array.blade.php
@@ -1,46 +1,43 @@
-<div class="w-full">
-    <label for="{{ $field->name }}" class="form-label w-full">
-        {{ $field->label }}
-    </label>
+<x-tall-field-wrapper :inline="$field->inline" :field="$field->name" :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
     @include('tall-forms::fields.error-help')
     <div class="w-full mt-2">
         @if(isset($form_data[$field->name]) && $form_data[$field->name])
-        <div class="flex flex-col divide-y mb-2 {{ $field->group_class }}">
-            @foreach($form_data[$field->name] as $key => $value)
-            <div class="py-2">
-                <div class="flex px-2 space-x-3 items-center">
-                    <div class="flex-1 sm:grid sm:grid-cols-12 col-gap-2 row-gap-4">
-                        @foreach($field->array_fields as $array_field)
-                        @php $bind = "{$field->key}.{$key}.{$array_field->name}" @endphp
-                        @include('tall-forms::array-fields.' . $array_field->type)
-                        @endforeach
-                    </div>
-                    <div class="flex-shrink space-x-2 items-center justify-end">
-                        @if($field->array_sortable)
-                        <button class="border rounded border px-1"
-                            wire:click="arrayMoveUp('{{ $field->name }}', '{{ $key }}')">
-                            @svg(config('tall-forms.arrow-up-icon'), 'h-4 w-4')
-                        </button>
+            <div class="flex flex-col divide-y mb-2 {{ $field->group_class }}">
+                @foreach($form_data[$field->name] as $key => $value)
+                    <div class="py-2">
+                        <div class="flex px-2 space-x-3 items-center">
+                            <div class="flex-1 sm:grid sm:grid-cols-12 col-gap-2 row-gap-4">
+                                @foreach($field->array_fields as $array_field)
+                                    @php $bind = "{$field->key}.{$key}.{$array_field->name}" @endphp
+                                    @include('tall-forms::array-fields.' . $array_field->type)
+                                @endforeach
+                            </div>
+                            <div class="flex-shrink space-x-2 items-center justify-end">
+                                @if($field->array_sortable)
+                                    <button class="border rounded border px-1"
+                                            wire:click="arrayMoveUp('{{ $field->name }}', '{{ $key }}')">
+                                        @svg(config('tall-forms.arrow-up-icon'), 'h-4 w-4')
+                                    </button>
 
-                        <button class="border rounded border px-1"
-                            wire:click="arrayMoveDown('{{ $field->name }}', '{{ $key }}')">
-                            @svg(config('tall-forms.arrow-down-icon'), 'h-4 w-4')
-                        </button>
-                        @endif
+                                    <button class="border rounded border px-1"
+                                            wire:click="arrayMoveDown('{{ $field->name }}', '{{ $key }}')">
+                                        @svg(config('tall-forms.arrow-down-icon'), 'h-4 w-4')
+                                    </button>
+                                @endif
 
-                        <button class="{{config('tall-forms.negative')}} rounded shadow px-1 text-white"
-                            onclick="confirm('{{ __('Are you sure?') }}') || event.stopImmediatePropagation();"
-                            wire:click="arrayRemove('{{ $field->name }}', '{{ $key }}')">
-                            @svg(config('tall-forms.trash-icon'), 'h-4 w-4')
-                        </button>
+                                <button class="{{config('tall-forms.negative')}} rounded shadow px-1 text-white"
+                                        onclick="confirm('{{ __('Are you sure?') }}') || event.stopImmediatePropagation();"
+                                        wire:click="arrayRemove('{{ $field->name }}', '{{ $key }}')">
+                                    @svg(config('tall-forms.trash-icon'), 'h-4 w-4')
+                                </button>
+                            </div>
+                        </div>
                     </div>
-                </div>
+                @endforeach
             </div>
-            @endforeach
-        </div>
         @endif
         <button class="rounded-md shadow-sm text-white {{config('tall-forms.positive')}}" wire:click="arrayAdd('{{ $field->name }}')" style="width:fit-content">
             @svg(config('tall-forms.plus-icon'), 'h-5 w-5 m-2')
         </button>
     </div>
-</div>
+</x-tall-field-wrapper>
diff --git a/resources/views/fields/checkbox.blade.php b/resources/views/fields/checkbox.blade.php
@@ -1,5 +1,4 @@
-<x-tall-field-wrapper :inline="$field->inline" :colspan="$field->colspan" :field="$field->name" :label="$field->label"
-    :labelW="$field->labelW" :fieldW="$field->fieldW">
+<x-tall-field-wrapper :inline="$field->inline" :field="$field->name" :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
     <x-tall-checkbox :field="$field->key" :id="$field->name"
         :label="$field->placeholder ?? $field->label" :help="$field->help" :errorMsg="$field->errorMsg" />
 </x-tall-field-wrapper>
diff --git a/resources/views/fields/checkboxes.blade.php b/resources/views/fields/checkboxes.blade.php
@@ -1,5 +1,4 @@
-<x-tall-field-wrapper :inline="$field->inline" :colspan="$field->colspan" :field="$field->name"
-    :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
+<x-tall-field-wrapper :inline="$field->inline" :field="$field->name" :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
     @foreach($field->options as $value => $label)
         <x-tall-checkbox field="{{$field->key}}" id="{{$field->name}}.{{$loop->index}}" :label="$label" :help="$field->help" :errorMsg="$field->errorMsg" :value="$value" />
     @endforeach

diff --git a/resources/views/fields/file.blade.php b/resources/views/fields/file.blade.php
@@ -1,6 +1,5 @@
 {{-- not tested --}}
-<x-tall-field-wrapper :inline="$field->inline" :colspan="$field->colspan" :field="$field->name" :label="$field->label"
-    :labelW="$field->labelW" :fieldW="$field->fieldW">
+<x-tall-field-wrapper :inline="$field->inline" :field="$field->name" :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
     <div class="my-1 flex rounded-md shadow-sm w-full relative {{$fieldClass}}">
         <span
             class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">

diff --git a/resources/views/fields/input.blade.php b/resources/views/fields/input.blade.php
@@ -1,7 +1,7 @@
 @if($field->input_type === 'hidden')
     <input x-ref="{{ $field->key }}" wire:model="{{ $field->key }}" name="{{ $field->key }}" type="hidden" autocomplete="{{ $field->autocomplete }}" class="nosy" />
 @else
-    <x-tall-field-wrapper :inline="$field->inline" :colspan="$field->colspan" :field="$field->name" :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
+    <x-tall-field-wrapper :inline="$field->inline" :field="$field->name" :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
         <x-tall-input :field="$field->key" :id="$field->name" :type="$field->input_type" :prefix="$field->prefix" :icon="$field->icon" :fieldClass="$field->class" :autocomplete="$field->autocomplete" :placeholder="$field->placeholder" :help="$field->help" :errorMsg="$field->errorMsg" :step="$field->step" :min="$field->min" :max="$field->max"/>
     </x-tall-field-wrapper>
 @endif
diff --git a/resources/views/fields/keyval.blade.php b/resources/views/fields/keyval.blade.php
@@ -1,8 +1,5 @@
-<div class="w-full">
-    <label for="{{ $field->name }}" class="form-label w-full">
-        {{ $field->label }}
-    </label>
-    @include('tall-forms::fields.error-help')
+<x-tall-field-wrapper :inline="$field->inline" :field="$field->name" :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
+@include('tall-forms::fields.error-help')
     <div class="w-full mt-2">
     <div class="flex flex-col divide-y mb-2 {{ $field->group_class }}">
             <div class="py-2">
@@ -17,4 +14,4 @@
             </div>
         </div>
     </div>
-</div>
+</x-tall-field-wrapper>
diff --git a/resources/views/fields/radio.blade.php b/resources/views/fields/radio.blade.php
@@ -1,7 +1,6 @@
-<x-tall-field-wrapper :inline="$field->inline" :colspan="$field->colspan" :field="$field->name" :label="$field->label"
-    :labelW="$field->labelW" :fieldW="$field->fieldW">
+<x-tall-field-wrapper :inline="$field->inline" :field="$field->name" :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
     @foreach($field->options as $value => $label)
     <x-tall-radio :field="$field->key" :label="$label" id="{{$field->name}}.{{$loop->index}}" :value="$value" />
     @endforeach
     @include('tall-forms::fields.error-help')
-</x-tall-field-wrapper>
+</x-tall-field-wrapper>
diff --git a/resources/views/fields/range.blade.php b/resources/views/fields/range.blade.php
@@ -1,3 +1,3 @@
-<x-tall-field-wrapper :inline="$field->inline" :colspan="$field->colspan" :field="$field->name" :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
+<x-tall-field-wrapper :inline="$field->inline" :field="$field->name" :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
     <x-tall-range :field="$field->key" :id="$field->name" :fieldClass="$field->class" :help="$field->help" :errorMsg="$field->errorMsg" :step="$field->step" :min="$field->min" :max="$field->max"/>
 </x-tall-field-wrapper>
diff --git a/resources/views/fields/select.blade.php b/resources/views/fields/select.blade.php
@@ -1,5 +1,4 @@
-<x-tall-field-wrapper :inline="$field->inline" :colspan="$field->colspan" :field="$field->name" :label="$field->label"
-    :labelW="$field->labelW" :fieldW="$field->fieldW">
+<x-tall-field-wrapper :inline="$field->inline" :field="$field->name" :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
     <x-tall-select :field="$field->key" :id="$field->name" :placeholder="$field->placeholder" :help="$field->help"
         :options="$field->options" :errorMsg="$field->errorMsg" :fieldClass="$field->class" />
-</x-tall-field-wrapper>
+</x-tall-field-wrapper>
diff --git a/resources/views/fields/textarea.blade.php b/resources/views/fields/textarea.blade.php
@@ -1,11 +1,10 @@
-<x-tall-field-wrapper :inline="$field->inline" :colspan="$field->colspan" :field="$field->name" :label="$field->label"
-    :labelW="$field->labelW" :fieldW="$field->fieldW">
-    <x-tall-textarea 
-    :field="$field->key" 
-    :id="$field->name" 
+<x-tall-field-wrapper :inline="$field->inline" :field="$field->name" :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
+    <x-tall-textarea
+    :field="$field->key"
+    :id="$field->name"
     :rows="$field->textarea_rows"
-    :fieldClass="$field->class" 
+    :fieldClass="$field->class"
     :placeholder="$field->placeholder"
-    :help="$field->help" 
+    :help="$field->help"
     :errorMsg="$field->errorMsg" />
-</x-tall-field-wrapper>
+</x-tall-field-wrapper>