mirror of
https://github.com/filamentphp/filament.git
synced 2026-09-24 15:42:09 +08:00
Refactor and remove repetitive livewire views. Made dymanic tabbed form view in place of them
This commit is contained in:
@@ -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>
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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'));
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user