Refactor and remove repetitive livewire views. Made dymanic tabbed form view in place of them

This commit is contained in:
Ryan Scherler
2020-04-30 18:44:24 -07:00
parent fd2aa12acf
commit d7a643b1fc
18 changed files with 55 additions and 108 deletions
+8 -8
View File
@@ -1,16 +1,16 @@
<div x-data="{ tab: '{{ $tab }}' }" {{ $attributes }}>
<div x-data="{ tab: '{{ $tabs[0] }}' }" {{ $attributes }}>
<div role="tablist" class="rounded-t shadow overflow-hidden bg-gray-100 dark:bg-gray-700 flex">
@foreach ($tabs as $value => $label)
@foreach ($tabs as $tab)
<button
role="tab"
aria-controls="{{ $value }}-tab"
:tabindex="tab === '{{ $value }}' ? 0 : -1"
:aria-selected="tab === '{{ $value }}' ? 'true' : 'false'"
aria-controls="{{ $tab }}-tab"
:tabindex="tab === '{{ $tab }}' ? 0 : -1"
:aria-selected="tab === '{{ $tab }}' ? 'true' : 'false'"
class="px-5 py-3 text-current text-sm leading-tight -mb-px opacity-50 hover:opacity-100 transition duration-200 ease-in-out"
:class="{ 'bg-white dark:bg-gray-800 opacity-100': tab === '{{ $value }}' }"
@click.prevent="tab = '{{ $value }}'"
:class="{ 'bg-white dark:bg-gray-800 opacity-100': tab === '{{ $tab }}' }"
@click.prevent="tab = '{{ $tab }}'"
>
{{ $label }}
{{ Filament::formatLabel($tab) }}
</button>
@endforeach
</div>
@@ -1,21 +0,0 @@
<form wire:submit.prevent="save">
<x-filament-tabs tab="info" :tabs="['info' => 'Info', 'roles' => 'Roles']">
<x-filament-tab id="info">
<x-filament-fields :fields="$fields->get('info')" />
</x-filament-tab>
<x-filament-tab id="roles">
<x-filament-fields :fields="$fields->get('roles')" />
</x-filament-tab>
<button type="submit" class="btn">{{ __('Save') }}</button>
</x-filament-tabs>
</form>
@@ -1,21 +0,0 @@
<form wire:submit.prevent="save">
<x-filament-tabs tab="info" :tabs="['info' => 'Info', 'permissions' => 'Permissions']">
<x-filament-tab id="info">
<x-filament-fields :fields="$fields->get('info')" />
</x-filament-tab>
<x-filament-tab id="permissions">
<x-filament-fields :fields="$fields->get('permissions')" />
</x-filament-tab>
<button type="submit" class="btn">{{ __('Save') }}</button>
</x-filament-tabs>
</form>
@@ -0,0 +1,10 @@
<form wire:submit.prevent="save">
<x-filament-tabs :tabs="$groupedFields->keys()->all()">
@foreach($groupedFields as $key => $fields)
<x-filament-tab :id="$key">
<x-filament-fields :fields="$fields" />
</x-filament-tab>
@endforeach
<button type="submit" class="btn">{{ __('Save') }}</button>
</x-filament-tabs>
</form>
@@ -1,21 +0,0 @@
<form wire:submit.prevent="save">
<x-filament-tabs tab="account" :tabs="['account' => 'Account', 'permissions' => 'Permissions']">
<x-filament-tab id="account">
<x-filament-fields :fields="$fields->get('account')" />
</x-filament-tab>
<x-filament-tab id="permissions">
<x-filament-fields :fields="$fields->get('permissions')" />
</x-filament-tab>
<button type="submit" class="btn">{{ __('Save') }}</button>
</x-filament-tabs>
</form>
+15
View File
@@ -5,6 +5,7 @@ namespace Filament;
use Illuminate\Support\Facades\Request;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\HtmlString;
use Illuminate\Support\Str;
use League\Glide\Urls\UrlBuilderFactory;
class Filament {
@@ -176,4 +177,18 @@ class Filament {
$urlBuilder = UrlBuilderFactory::create(null, config('app.key'));
return route('filament.image', ['path' => ltrim($urlBuilder->getUrl($path, $manipulations), '/')]);
}
/**
* Format a label from a given value
*
* @param string $value
* @return string
*/
public function formatLabel(string $value)
{
return Str::of($value)
->replaceMatches('/[\-_]/', ' ')
->title()
->__toString();
}
}
+1 -9
View File
@@ -6,13 +6,6 @@ use Illuminate\View\Component;
class Tabs extends Component
{
/**
* The initally selected tab.
*
* @var string
*/
public $tab;
/**
* The tabs.
*
@@ -27,9 +20,8 @@ class Tabs extends Component
* @param array $tabs
* @return void
*/
public function __construct(string $tab, array $tabs)
public function __construct(array $tabs)
{
$this->tab = $tab;
$this->tabs = $tabs;
}
+2 -9
View File
@@ -4,6 +4,7 @@ namespace Filament\Http\Fields;
use Illuminate\Support\Arr;
use Illuminate\Support\Str;
use Filament;
class Field
{
@@ -32,7 +33,7 @@ class Field
$this->key = 'form_data.'.$this->name;
$this->id = Str::slug($this->key);
$this->field_type = $this->getFieldType();
$this->label = $this->formatLabel($name);
$this->label = Filament::formatLabel($name);
}
public static function make($name)
@@ -147,12 +148,4 @@ class Field
$baseName = class_basename(get_called_class());
return Str::of($baseName)->kebab();
}
protected function formatLabel($value)
{
return Str::of($value)
->replaceMatches('/[\-_]/', ' ')
->title()
->__toString();
}
}
+3 -3
View File
@@ -36,13 +36,13 @@ class PermissionCreate extends Component
public function render()
{
$fields = $this->fields()->groupBy(function ($field, $key) {
$groupedFields = $this->fields()->groupBy(function ($field, $key) {
return $field->group;
});
return view('filament::livewire.permissions.create-edit', [
return view('filament::livewire.tabbed-form', [
'title' => __('filament::permissions.create'),
'fields' => $fields,
'groupedFields' => $groupedFields,
]);
}
}
+3 -3
View File
@@ -43,13 +43,13 @@ class PermissionEdit extends Component
public function render()
{
$fields = $this->fields()->groupBy(function ($field, $key) {
$groupedFields = $this->fields()->groupBy(function ($field, $key) {
return $field->group;
});
return view('filament::livewire.permissions.create-edit', [
return view('filament::livewire.tabbed-form', [
'title' => __('filament::permissions.edit'),
'fields' => $fields,
'groupedFields' => $groupedFields,
]);
}
}
+1 -1
View File
@@ -21,7 +21,7 @@ class Permissions extends Component
$customPermissions = Permission::where('is_system', false)->get();
return view('filament::livewire.permissions.index', [
return view('filament::livewire.permissions', [
'title' => __('filament::permissions.index'),
'permissions' => $permissions,
'customPermissions' => $customPermissions,
+3 -3
View File
@@ -36,13 +36,13 @@ class RoleCreate extends Component
public function render()
{
$fields = $this->fields()->groupBy(function ($field, $key) {
$groupedFields = $this->fields()->groupBy(function ($field, $key) {
return $field->group;
});
return view('filament::livewire.roles.create-edit', [
return view('filament::livewire.tabbed-form', [
'title' => __('filament::roles.create'),
'fields' => $fields,
'groupedFields' => $groupedFields,
]);
}
}
+3 -3
View File
@@ -43,13 +43,13 @@ class RoleEdit extends Component
public function render()
{
$fields = $this->fields()->groupBy(function ($field, $key) {
$groupedFields = $this->fields()->groupBy(function ($field, $key) {
return $field->group;
});
return view('filament::livewire.roles.create-edit', [
return view('filament::livewire.tabbed-form', [
'title' => __('filament::roles.edit'),
'fields' => $fields,
'groupedFields' => $groupedFields,
]);
}
}
+1 -1
View File
@@ -20,7 +20,7 @@ class Roles extends Component
$allRoles = Role::all();
return view('filament::livewire.roles.index', [
return view('filament::livewire.roles', [
'title' => __('filament::roles.index'),
'roles' => $roles,
'allRoles' => $allRoles,
+3 -3
View File
@@ -32,13 +32,13 @@ class UserCreate extends Component
public function render()
{
$fields = $this->fields()->groupBy(function ($field, $key) {
$groupedFields = $this->fields()->groupBy(function ($field, $key) {
return $field->group;
});
return view('filament::livewire.users.create-edit', [
return view('filament::livewire.tabbed-form', [
'title' => __('filament::users.create'),
'fields' => $fields,
'groupedFields' => $groupedFields,
]);
}
}
+2 -2
View File
@@ -49,10 +49,10 @@ class UserEdit extends Component
public function render()
{
$fields = $this->fields()->groupBy(function ($field, $key) {
$groupedFields = $this->fields()->groupBy(function ($field, $key) {
return $field->group;
});
return view('filament::livewire.users.create-edit', compact('fields'));
return view('filament::livewire.tabbed-form', compact('groupedFields'));
}
}