Merge pull request #18125 from grokability/form-row-again

Added form row component

app/Helpers/IconHelper.php

@@ -40,6 +40,8 @@ class IconHelper
                 return 'fa-solid fa-trash-arrow-up';
             case 'external-link':
                 return 'fa fa-external-link';
+            case 'link':
+                return 'fa fa-link';
             case 'email':
                 return 'fa-regular fa-envelope';
             case 'phone':

resources/views/blade/form-label.blade.php

@@ -0,0 +1,4 @@
+<!-- form-label blade component -->
+<label {{ $attributes->merge(['class' => 'control-label']) }}>
+    {{ $slot }}
+</label>

resources/views/blade/form-row.blade.php

@@ -0,0 +1,76 @@
+<!-- form-row blade component -->
+@props([
+    'name' => null,
+    'type' => 'text',
+    'item' => null,
+    'info_tooltip_text' => null,
+    'help_text' => null,
+    'label' => null,
+    'input_div_class' => 'col-md-8',
+    'errors_class' => $errors->has('support_url') ? ' has-error' : '',
+    'input_icon' => null,
+    'input_group_addon' => null,
+    'rows' => null,
+    'placeholder' => null,
+])
+
+<div {{ $attributes->merge(['class' => 'form-group'. $errors_class]) }}>
+
+    <!-- form label -->
+    @if (isset($label))
+        <x-form-label  :for="$name" class="{{ $label_class ?? 'col-md-3' }}">{{ $label }}</x-form-label>
+    @endif
+
+
+    @php
+        $blade_type = in_array($type, ['text', 'email', 'url', 'tel', 'number', 'password']) ? 'text' : $type;
+    @endphp
+
+        <div class="{{ $input_div_class }}">
+            <x-dynamic-component
+                    :$name
+                    :$type
+                    :aria-label="$name"
+                    :component="'input.'.$blade_type"
+                    :id="$name"
+                    :required="Helper::checkIfRequired($item, $name)"
+                    :value="old($name, $item->{$name})"
+                    :input_icon="$input_icon"
+                    :input_group_addon="$input_group_addon"
+                    :rows="$rows"
+                    :placeholder="$placeholder"
+
+            />
+        </div>
+
+    @if ($info_tooltip_text)
+        <!-- Info Tooltip -->
+        <div class="col-md-1 text-left" style="padding-left:0; margin-top: 5px;">
+            <x-form-tooltip>
+                {{ $info_tooltip_text }}
+            </x-form-tooltip>
+        </div>
+    @endif
+
+
+    @error($name)
+    <div class="col-md-8 col-md-offset-3">
+        <span class="alert-msg" aria-hidden="true">
+            <x-icon type="x" />
+            {{ $message }}
+        </span>
+    </div>
+    @enderror
+
+    @if ($help_text)
+        <!-- Help Text -->
+        <div class="col-md-8 col-md-offset-3">
+            <p class="help-block">
+                {!! $help_text !!}
+            </p>
+        </div>
+    @endif
+
+
+
+</div>

resources/views/blade/form-tooltip.blade.php

@@ -0,0 +1,4 @@
+<a href="#" data-tooltip="true" title="{{ $slot }}" style="padding-left: 0px;">
+    <x-icon type="more-info" style="font-size: 20px;" />
+    <span class="sr-only">{{ $slot }}</span>
+</a>

resources/views/blade/input/text.blade.php

@@ -0,0 +1,22 @@
+@props([
+'input_group_addon' => null,
+'input_icon' => null,
+'required' => false,
+'item' => null,
+])
+<!-- input-text blade component -->
+@if ($input_group_addon)
+        <div class="input-group">
+@endif
+    <input
+        {{ $attributes->merge(['class' => 'form-control']) }}
+        @required($required)
+    />
+
+@if ($input_group_addon)
+    <span class="input-group-addon">
+      <x-icon :type="$input_icon" />
+    </span>
+</div>
+@endif
+

resources/views/blade/input/textarea.blade.php

@@ -1,6 +1,6 @@
 @props([
     'value' => '',
-    'rows' => 10,
+    'rows' => 5,
 ])
 
 <textarea

resources/views/categories/edit.blade.php

@@ -9,7 +9,13 @@
 
 @section('inputFields')
 
-@include ('partials.forms.edit.name', ['translated_name' => trans('admin/categories/general.name')])
+    <!-- Name -->
+    <x-form-row
+            :label="trans('general.name')"
+            :$item
+            name="name"
+    />
+
 
 <!-- Type -->
 <div class="form-group {{ $errors->has('category_type') ? ' has-error' : '' }}">

resources/views/layouts/default.blade.php

@@ -1163,21 +1163,42 @@ dir="{{ Helper::determineLanguageDirection() }}">
             var validator = $('#create-form').validate({
                 ignore: 'input[type=hidden]',
                 errorClass: 'alert-msg',
-                errorElement: 'span',
+                errorElement: 'div',
                 errorPlacement: function(error, element) {
-                    $(element).hasClass('select2') || $(element).hasClass('js-data-ajax')
+
+                    if ($(element).hasClass('select2') || $(element).hasClass('js-data-ajax')) {
                         // If the element is a select2 then append the error to the parent div
-                        ? element.parent('div').append(error)
-                        // Otherwise place it after
-                        : error.insertAfter(element);
+                        element.parent('div').append(error);
+
+                     } else if ($(element).parent().hasClass('input-group')) {
+                        var end_input_group = $(element).next('.input-group-addon').parent();
+                        error.insertAfter(end_input_group);
+                    } else {
+                        error.insertAfter(element);
+                    }
+
                 },
                 highlight: function(inputElement) {
-                    $(inputElement).parent().addClass('has-error');
-                    $(inputElement).closest('.help-block').remove();
+
+                    // We have to go two levels up if it's an input group
+                    if ($(inputElement).parent().hasClass('input-group')) {
+                        $(inputElement).parent().parent().parent().addClass('has-error');
+                    } else {
+                        $(inputElement).parent().addClass('has-error');
+                        $(inputElement).closest('.help-block').remove();
+                    }
+
                 },
                 onfocusout: function(element) {
-                    $(element).parent().removeClass('has-error');
-                    return $(element).valid();
+                    // We have to go two levels up if it's an input group
+                    if ($(element).parent().hasClass('input-group')) {
+                        $(element).parent().parent().parent().removeClass('has-error');
+                        return $(element).valid();
+                    } else {
+                        $(element).parent().removeClass('has-error');
+                        return $(element).valid();
+                    }
+
                 },
 
             });

resources/views/manufacturers/edit.blade.php

@@ -9,75 +9,89 @@
 
 {{-- Page content --}}
 @section('inputFields')
-@include ('partials.forms.edit.name', ['translated_name' => trans('admin/manufacturers/table.name')])
+
+    <!-- Name -->
+    <x-form-row
+            :label="trans('admin/manufacturers/table.name')"
+            :$item
+            name="name"
+    />
+
     <!-- URL -->
-    <div class="form-group {{ $errors->has('url') ? ' has-error' : '' }}">
-        <label for="url" class="col-md-3 control-label">{{ trans('general.url') }}
-        </label>
-        <div class="col-md-6">
-            <input class="form-control" type="text" name="url" id="url" value="{{ old('url', $item->url) }}" />
-            {!! $errors->first('url', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
-        </div>
-    </div>
+    <x-form-row
+            :label="trans('general.url')"
+            :$item
+            name="url"
+            type="url"
+            input_icon="link"
+            input_group_addon="left"
+            placeholder="https://example.com"
+    />
+
+
 
     <!-- Support URL -->
-    <div class="form-group {{ $errors->has('support_url') ? ' has-error' : '' }}">
-        <label for="support_url" class="col-md-3 control-label">{{ trans('admin/manufacturers/table.support_url') }}
-        </label>
-        <div class="col-md-6">
-            <input class="form-control" type="url" name="support_url" id="support_url" value="{{ old('support_url', $item->support_url) }}" />
-            {!! $errors->first('support_url', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
-        </div>
-    </div>
+    <x-form-row
+            :label="trans('admin/manufacturers/table.support_url')"
+            :$item
+            name="support_url"
+            type="url"
+            input_icon="link"
+            input_group_addon="left"
+            placeholder="https://example.com"
+    />
+
+
 
     <!-- Warranty Lookup URL -->
-    <div class="form-group {{ $errors->has('warranty_lookup_url') ? ' has-error' : '' }}">
-        <label for="support_url" class="col-md-3 control-label">{{ trans('admin/manufacturers/table.warranty_lookup_url') }}
-        </label>
-        <div class="col-md-6">
-            <input class="form-control" type="url" name="warranty_lookup_url" id="warranty_lookup_url" value="{{ old('warranty_lookup_url', $item->warranty_lookup_url) }}" />
-            <p class="help-block">{!! trans('admin/manufacturers/message.support_url_help') !!}</p>
-            {!! $errors->first('warranty_lookup_url', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
-        </div>
-    </div>
+    <x-form-row
+            :label="trans('admin/manufacturers/table.warranty_lookup_url')"
+            :$item
+            name="warranty_lookup_url"
+            type="url"
+            help_text="{!! trans('admin/manufacturers/message.support_url_help') !!}"
+            input_icon="link"
+            input_group_addon="left"
+            placeholder="https://example.com"
+    />
 
     <!-- Support Phone -->
-    <div class="form-group {{ $errors->has('support_phone') ? ' has-error' : '' }}">
-        <label for="support_phone" class="col-md-3 control-label">{{ trans('admin/manufacturers/table.support_phone') }}
-        </label>
-        <div class="col-md-6">
-            <input class="form-control" type="text" name="support_phone" id="support_phone" value="{{ old('support_phone', $item->support_phone) }}" />
-            {!! $errors->first('support_phone', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
-        </div>
-    </div>
+    <x-form-row
+            :label="trans('admin/manufacturers/table.support_phone')"
+            :$item
+            name="support_phone"
+            input_div_class="col-md-6"
+            type="tel"
+            input_icon="phone"
+            input_group_addon="left"
+            placeholder="1-800-555-5555"
+    />
+
 
     <!-- Support Email -->
-    <div class="form-group {{ $errors->has('support_email') ? ' has-error' : '' }}">
-        <label for="support_email" class="col-md-3 control-label">{{ trans('admin/manufacturers/table.support_email') }}
-        </label>
-        <div class="col-md-6">
-            <input class="form-control" type="email" name="support_email" id="support_email" value="{{ old('support_email', $item->support_email) }}" />
-            {!! $errors->first('support_email', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
-        </div>
-    </div>
+    <x-form-row
+            :label="trans('admin/manufacturers/table.support_email')"
+            :$item
+            name="support_email"
+            input_div_class="col-md-6"
+            type="email"
+            input_icon="email"
+            input_group_addon="left"
+            placeholder="support@example.com"
+    />
+
 
 @include ('partials.forms.edit.image-upload', ['image_path' => app('manufacturers_upload_path')])
 
-<div class="form-group{!! $errors->has('notes') ? ' has-error' : '' !!}">
-    <label for="notes" class="col-md-3 control-label">{{ trans('general.notes') }}</label>
-    <div class="col-md-8">
-        <x-input.textarea
-                name="notes"
-                id="notes"
-                :value="old('notes', $item->notes)"
-                placeholder="{{ trans('general.placeholders.notes') }}"
-                aria-label="notes"
-                rows="5"
-        />
-        {!! $errors->first('notes', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
-    </div>
-</div>
 
+    <!-- Notes -->
+    <x-form-row
+            :label="trans('general.notes')"
+            :$item
+            name="notes"
+            type="textarea"
+            placeholder="{{ trans('general.placeholders.notes') }}"
+    />
 
 
 @stop