25
4
I have a correctly working FilamentPHP v2 repeater. I am trying to add a 'confirm delete' modal that the user must accept before the delete action proceeds, a pretty normal use case.
我有一个工作正常的FilamentPHPv2中继器。我正在尝试添加一个用户在继续删除操作之前必须接受的‘确认删除’模式，这是一个非常正常的用例。
There doesn't seem to be anything built in to handle this, and the views are generated - so firing my own events from the delete click in the component seems like it will be tricky.
似乎没有任何内置的东西来处理这一点，而且视图是生成的-所以在组件中单击删除来激发我自己的事件似乎是很棘手的。
I have also tried using the built-in events, such as repeater:deleteItem - but this fires AFTER the delete has taken place, which is too late as it has already been removed from the interface.
我还尝试使用内置事件，如Repeater：DeleteItem--但这在删除发生后触发，但为时已晚，因为它已经从接口中删除。
Is there a standard way to deal with this that I've missed?
有没有一个标准的方法来处理我错过的这件事？
You can add the confimation dialog as document said.
您可以添加文档中所说的确认对话框。
Here's an example:
下面是一个例子：
个人中心
文章发布
退出Forms\Components\Repeater::make('test')
->schema([
Forms\Components\TextInput::make('namee')->required()
])
->deleteAction(fn(Forms\Components\Actions\Action $action) => $action->requiresConfirmation())
Updated (V2):
Since the previous solution doesn't work in version 2, Below two options are available:
更新(V2)：由于以前的解决方案在版本2中不起作用，因此提供以下两个选项：
First Option:
You can override the repeater component to add a confirmation.
To do this, you need to publish filament form views using php artisan vendor:publish --provider="Filament\Forms\FormsServiceProvider" and then customize the repeater component located in resources/views/vendors/forms/components/repeater.blade.php and add onclick event to the trash icon.
第一个选项：您可以覆盖中继器组件以添加确认。要做到这一点，您需要使用php artisan vendor：publish --provider=“Filament\Forms\FormsServiceProvider”发布细丝表单视图，然后自定义位于resources/views/vendors/forms/components/repeater.blade.php中的repeater组件，并将onclick事件添加到垃圾桶图标。
Here's an example of final code:
下面是最终代码的一个例子：
<x-dynamic-component
:component="$getFieldWrapperView()"
:id="$getId()"
:label="$getLabel()"
:label-sr-only="$isLabelHidden()"
:helper-text="$getHelperText()"
:hint="$getHint()"
:hint-action="$getHintAction()"
:hint-color="$getHintColor()"
:hint-icon="$getHintIcon()"
:required="$isRequired()"
:state-path="$getStatePath()"
>
@php
$containers = $getChildComponentContainers();
$isCollapsible = $isCollapsible();
$isCloneable = $isCloneable();
$isReorderableWithButtons = $isReorderableWithButtons();
$isItemCreationDisabled = $isItemCreationDisabled();
$isItemDeletionDisabled = $isItemDeletionDisabled();
$isItemMovementDisabled = $isItemMovementDisabled();
$hasItemLabels = $hasItemLabels();
@endphp
<div>
@if ((count($containers) > 1) && $isCollapsible)
<div class="space-x-2 rtl:space-x-reverse" x-data="{}">
<x-forms::link
x-on:click="$dispatch('repeater-collapse', '{{ $getStatePath() }}')"
tag="button"
size="sm"
>
{{ __('forms::components.repeater.buttons.collapse_all.label') }}
</x-forms::link>
<x-forms::link
x-on:click="$dispatch('repeater-expand', '{{ $getStatePath() }}')"
tag="button"
size="sm"
>
{{ __('forms::components.repeater.buttons.expand_all.label') }}
</x-forms::link>
</div>
@endif
</div>
<div
{{
$attributes
->merge($getExtraAttributes())
->class([
'filament-forms-repeater-component space-y-6 rounded-xl',
'bg-gray-50 p-6' => $isInset(),
'dark:bg-gray-500/10' => $isInset() && config('forms.dark_mode'),
])
}}
>
@if (count($containers))
<ul>
<x-filament-support::grid
:default="$getGridColumns('default')"
:sm="$getGridColumns('sm')"
:md="$getGridColumns('md')"
:lg="$getGridColumns('lg')"
:xl="$getGridColumns('xl')"
:two-xl="$getGridColumns('2xl')"
wire:sortable
wire:end.stop="dispatchFormEvent('repeater::moveItems', '{{ $getStatePath() }}', $event.target.sortable.toArray())"
class="gap-6"
>
@foreach ($containers as $uuid => $item)
<li
x-data="{
isCollapsed: @js($isCollapsed($item)),
}"
x-on:repeater-collapse.window="$event.detail === '{{ $getStatePath() }}' && (isCollapsed = true)"
x-on:repeater-expand.window="$event.detail === '{{ $getStatePath() }}' && (isCollapsed = false)"
wire:key="{{ $this->id }}.{{ $item->getStatePath() }}.{{ $field::class }}.item"
wire:sortable.item="{{ $uuid }}"
x-on:expand-concealing-component.window="
error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
isCollapsed = false
if (document.body.querySelector('[data-validation-error]') !== error) {
return
}
setTimeout(
() =>
$el.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
"
@class([
'filament-forms-repeater-component-item relative rounded-xl border border-gray-300 bg-white shadow-sm',
'dark:border-gray-600 dark:bg-gray-800' => config('forms.dark_mode'),
])
>
@if ((! $isItemMovementDisabled) || (! $isItemDeletionDisabled) || $isCloneable || $isCollapsible || $hasItemLabels)
<header
@if ($isCollapsible) x-on:click.stop="isCollapsed = ! isCollapsed" @endif
@class([
'flex h-10 items-center overflow-hidden rounded-t-xl border-b bg-gray-50',
'dark:border-gray-700 dark:bg-gray-800' => config('forms.dark_mode'),
'cursor-pointer' => $isCollapsible,
])
>
@unless ($isItemMovementDisabled)
<button
title="{{ __('forms::components.repeater.buttons.move_item.label') }}"
x-on:click.stop
wire:sortable.handle
wire:keydown.prevent.arrow-up="dispatchFormEvent('repeater::moveItemUp', '{{ $getStatePath() }}', '{{ $uuid }}')"
wire:keydown.prevent.arrow-down="dispatchFormEvent('repeater::moveItemDown', '{{ $getStatePath() }}', '{{ $uuid }}')"
type="button"
@class([
'flex h-10 w-10 flex-none items-center justify-center border-r text-gray-400 outline-none transition hover:text-gray-500 focus:bg-gray-500/5',
'dark:border-gray-700 dark:focus:bg-gray-600/20' => config('forms.dark_mode'),
])
>
<span class="sr-only">
{{ __('forms::components.repeater.buttons.move_item.label') }}
</span>
<x-heroicon-s-switch-vertical
class="h-4 w-4"
/>
</button>
@endunless
<p
@class([
'flex-none truncate px-4 text-xs font-medium text-gray-600',
'dark:text-gray-400' => config('forms.dark_mode'),
])
>
{{ $getItemLabel($uuid) }}
</p>
<div class="flex-1"></div>
<ul
@class([
'flex divide-x rtl:divide-x-reverse',
'dark:divide-gray-700' => config('forms.dark_mode'),
])
>
@if ($isReorderableWithButtons)
@unless ($loop->first)
<li>
<button
title="{{ __('forms::components.repeater.buttons.move_item_up.label') }}"
type="button"
wire:click.stop="dispatchFormEvent('repeater::moveItemUp', '{{ $getStatePath() }}', '{{ $uuid }}')"
wire:target="dispatchFormEvent('repeater::moveItemUp', '{{ $getStatePath() }}', '{{ $uuid }}')"
wire:loading.attr="disabled"
@class([
'flex h-10 w-10 flex-none items-center justify-center text-gray-400 outline-none transition hover:text-gray-500 focus:bg-gray-500/5',
'dark:border-gray-700 dark:focus:bg-gray-600/20' => config('forms.dark_mode'),
])
>
<span class="sr-only">
{{ __('forms::components.repeater.buttons.move_item_up.label') }}
</span>
<x-heroicon-s-chevron-up
class="h-4 w-4"
wire:loading.remove.delay
wire:target="dispatchFormEvent('repeater::moveItemUp', '{{ $getStatePath() }}', '{{ $uuid }}')"
/>
<x-filament-support::loading-indicator
class="h-4 w-4 text-primary-500"
wire:loading.delay
wire:target="dispatchFormEvent('repeater::moveItemUp', '{{ $getStatePath() }}', '{{ $uuid }}')"
x-cloak
/>
</button>
</li>
@endunless
@unless ($loop->last)
<li>
<button
title="{{ __('forms::components.repeater.buttons.move_item_down.label') }}"
type="button"
wire:click.stop="dispatchFormEvent('repeater::moveItemDown', '{{ $getStatePath() }}', '{{ $uuid }}')"
wire:target="dispatchFormEvent('repeater::moveItemDown', '{{ $getStatePath() }}', '{{ $uuid }}')"
wire:loading.attr="disabled"
@class([
'flex h-10 w-10 flex-none items-center justify-center text-gray-400 outline-none transition hover:text-gray-500 focus:bg-gray-500/5',
'dark:border-gray-700 dark:focus:bg-gray-600/20' => config('forms.dark_mode'),
])
>
<span class="sr-only">
{{ __('forms::components.repeater.buttons.move_item_down.label') }}
</span>
<x-heroicon-s-chevron-down
class="h-4 w-4"
wire:loading.remove.delay
wire:target="dispatchFormEvent('repeater::moveItemDown', '{{ $getStatePath() }}', '{{ $uuid }}')"
/>
<x-filament-support::loading-indicator
class="h-4 w-4 text-primary-500"
wire:loading.delay
wire:target="dispatchFormEvent('repeater::moveItemDown', '{{ $getStatePath() }}', '{{ $uuid }}')"
x-cloak
/>
</button>
</li>
@endunless
@endif
@if ($isCloneable)
<li>
<button
title="{{ __('forms::components.repeater.buttons.clone_item.label') }}"
wire:click.stop="dispatchFormEvent('repeater::cloneItem', '{{ $getStatePath() }}', '{{ $uuid }}')"
wire:target="dispatchFormEvent('repeater::cloneItem', '{{ $getStatePath() }}', '{{ $uuid }}')"
wire:loading.attr="disabled"
type="button"
@class([
'flex h-10 w-10 flex-none items-center justify-center text-gray-400 outline-none transition hover:text-gray-500 focus:bg-gray-500/5',
'dark:border-gray-700 dark:focus:bg-gray-600/20' => config('forms.dark_mode'),
])
>
<span class="sr-only">
{{ __('forms::components.repeater.buttons.clone_item.label') }}
</span>
<x-heroicon-s-duplicate
class="h-4 w-4"
wire:loading.remove.delay
wire:target="dispatchFormEvent('repeater::cloneItem', '{{ $getStatePath() }}', '{{ $uuid }}')"
/>
<x-filament-support::loading-indicator
class="h-4 w-4 text-primary-500"
wire:loading.delay
wire:target="dispatchFormEvent('repeater::cloneItem', '{{ $getStatePath() }}', '{{ $uuid }}')"
x-cloak
/>
</button>
</li>
@endunless
@unless ($isItemDeletionDisabled)
<li>
<button
title="{{ __('forms::components.repeater.buttons.delete_item.label') }}"
wire:click.stop="dispatchFormEvent('repeater::deleteItem', '{{ $getStatePath() }}', '{{ $uuid }}')"
wire:target="dispatchFormEvent('repeater::deleteItem', '{{ $getStatePath() }}', '{{ $uuid }}')"
wire:loading.attr="disabled"
type="button"
@class([
'flex h-10 w-10 flex-none items-center justify-center text-danger-600 outline-none transition hover:text-danger-500 focus:bg-gray-500/5',
'dark:text-danger-500 dark:hover:text-danger-400 dark:focus:bg-gray-600/20' => config('forms.dark_mode'),
])
>
<span class="sr-only">
{{ __('forms::components.repeater.buttons.delete_item.label') }}
</span>
<x-heroicon-s-trash
class="h-4 w-4"
{{-- Here we add our onclick event --}}
onclick="confirm('Are you sure you want to remove this?') || event.stopImmediatePropagation()"
wire:loading.remove.delay
wire:target="dispatchFormEvent('repeater::deleteItem', '{{ $getStatePath() }}', '{{ $uuid }}')"
/>
<x-filament-support::loading-indicator
class="h-4 w-4 text-primary-500"
wire:loading.delay
wire:target="dispatchFormEvent('repeater::deleteItem', '{{ $getStatePath() }}', '{{ $uuid }}')"
x-cloak
/>
</button>
</li>
@endunless
@if ($isCollapsible)
<li>
<button
x-bind:title="
! isCollapsed
? '{{ __('forms::components.repeater.buttons.collapse_item.label') }}'
: '{{ __('forms::components.repeater.buttons.expand_item.label') }}'
"
x-on:click.stop="isCollapsed = ! isCollapsed"
type="button"
@class([
'flex h-10 w-10 flex-none items-center justify-center text-gray-400 outline-none transition hover:text-gray-500 focus:bg-gray-500/5',
'dark:focus:bg-gray-600/20' => config('forms.dark_mode'),
])
>
<x-heroicon-s-minus-sm
class="h-4 w-4"
x-show="! isCollapsed"
/>
<span
class="sr-only"
x-show="! isCollapsed"
>
{{ __('forms::components.repeater.buttons.collapse_item.label') }}
</span>
<x-heroicon-s-plus-sm
class="h-4 w-4"
x-show="isCollapsed"
x-cloak
/>
<span
class="sr-only"
x-show="isCollapsed"
x-cloak
>
{{ __('forms::components.repeater.buttons.expand_item.label') }}
</span>
</button>
</li>
@endif
</ul>
</header>
@endif
<div
x-bind:class="{
'invisible h-0 !m-0 overflow-y-hidden': isCollapsed,
'p-6': ! isCollapsed,
}"
>
{{ $item }}
</div>
<div
class="p-2 text-center text-xs text-gray-400"
x-show="isCollapsed"
x-cloak
>
{{ __('forms::components.repeater.collapsed') }}
</div>
</li>
@endforeach
</x-filament-support::grid>
</ul>
@endif
@if (! $isItemCreationDisabled)
<div class="relative flex justify-center">
<x-forms::button
:wire:click="'dispatchFormEvent(\'repeater::createItem\', \'' . $getStatePath() . '\')'"
size="sm"
outlined
>
{{ $getCreateItemButtonLabel() }}
</x-forms::button>
</div>
@endif
</div>
</x-dynamic-component>
You can search for Here we add our onclick event to easily find customization.
您可以在此处搜索，我们添加了onClick事件以轻松查找定制。
Second Option:
It seems you tried repeater::deleteItem, but there's a point.
When you define a listener with the same name, it will not override for some reason, and because of that, you still have the default behavior.
第二种选择：似乎您尝试过Repeater：：DeleteItem，但这是有道理的。当您使用相同的名称定义侦听器时，由于某些原因，它将不会被覆盖，因此，您仍然具有默认行为。
To override that listener, it tried something like this:
为了覆盖该监听程序，它尝试了如下内容：
First, create a new repeater component class.
首先，创建一个新的中继器组件类。
For example, let's create Repeater.php in app/Filament/Forms/Compontent. This class extends Filament's Repeater component class.
例如，让我们在app/Filame/Forms/Compontent中创建Repeater.php。这个类扩展了FIREMENT的中继器组件类。
<?php
namespace App\Filament\Forms\Component;
class Repeater extends \Filament\Forms\Components\Repeater
{
protected function setUp(): void
{
parent::setUp();
$this->listeners['repeater::deleteItem'] = [
function (\Filament\Forms\Components\Repeater $component, string $statePath, string $uuidToDelete): void {
// !! below lines are default behaviour of this action and you can customize them !!
if ($statePath !== $component->getStatePath()) {
return;
}
$items = $component->getState();
unset($items[$uuidToDelete]);
$livewire = $component->getLivewire();
data_set($livewire, $statePath, $items);
},
];
}
}
Then, you need to bind Filament's Repeater to your new Repeater.
然后，您需要将Filament的Repeater绑定到新的Repeater。
In AppServiceProvider:
在AppServiceProvider中：
use App\Filament\Forms\Component\Repeater;
// ...
public function register(): void
{
// ...
$this->app->bind(\Filament\Forms\Components\Repeater::class, Repeater::class);
}
Now repeater::deleteItem does whatever you say.
现在Repeater：：DeleteItem按您说的做。
You're right, for version 3, thank-you. I was running version 2 at the time of posting this, I have since updated the question.
你说得对，对于第三版，谢谢你。在我发布这篇文章时，我正在运行版本2，此后我更新了问题。
@charliefortune I updated the answer for version 2. There's no built-in way, and you must override some core functionality.
@CharlieFortune我更新了版本2的答案。没有内置的方法，你必须覆盖一些核心功能。
25
4
0
我的代码 "> 我想做的是 如果外层 ng-repeat 中的 n 为 0，则 div.book_container 将如下所示: 否则，di
嗨，我有一个用于 ng-repeat-start 和 end 的简单用例，并且工作正常，当我想添加内部 ng-repeat 时出现问题。 这是我的代码 {{e}} {{obj.descr
我正在查看一长串 DNA 核苷酸，并正在寻找以起始代码“AAA”开头并以终止代码“CCC”结尾的序列。由于核苷酸以三联体形式出现，因此我找到的每个序列开始和结束之间的核苷酸数必须是三的倍数。 例如，'
我有这个: .... #{item.product.codigoProduto} #{m.description} ... listRequ
我从服务请求中返回了以下 json 数据: { "entries": [{ "id": 2081, "name": "BM", "niceNam
在 Aurelia 中嵌套 repeat.for 时，内部 repeat.for 无权访问其父 repeat.for 中使用的变量>. 示例 ${x} - ${y} 在上面的示
我有一个带有类别的对象，在这个对象内部有一个名为 items 的对象，其中包含带有 items 的对象。 现在我想重复显示这样的项目: {{cat
我有... html, body { background-size: contain; background-repeat: no-repeat; } 作为我的 CS
我的问题如下:旋转时，由重复图案组成的背景发生变化，因此图案被拉伸(stretch)而不是重复。可能有什么问题？ 我有这个由重复图案组成的背景: 最佳答案 您必须手动设置重复模式: parent =
关于下面的元素 如何编辑 element.style？我想要 background-repeat : no-repeat; 不确定从哪里设置它。 element { display: blo
我有一个 Observable，我想定期重复，但仅限于以下条件: apiInterface.getData() // returns Observable ... // processing is h
我无法停止 td 元素中的图像重复。它看起来很难看。我该如何解决这个问题？我也添加了 background-repeat: no-repeat 代码，但它仍然无法正常工作。请不要建议从我的 td 宽度
我想知道以下哪个示例的效果更好。如果性能相同，哪个读起来更好？ 示例 1(重复选择器) .helpfulCommenter, .questionTroll { 颜色:#f00； } .question
我正在尝试创建 tooltip对于通过 ng-repeat. 创建的表的第一行 但是工具提示没有呈现。 HTML $(document).ready(function () {
我正在开发一个页面，我需要在其中显示一些框(使用 ng-repeat )，其中包含 channel 信息以及显示位置(城市)。 我面临的问题是当我重复第二个 ng-repeat : 这应该获得第一个
我在另一个 ng-repeat 中有 ng-repeat，并且两者都有分页数据。 主要的工作正常，但 ng-repeat 内的分页数据并不总是工作。它会抛出控制台错误。 错误:[$interpolat
所以我有这个小问题。我对所有项目使用 ng-repeat，我们称它们为国家，每个项目本身都有一个 ng-repeat 作为城市等子类别。我用国家/地区填充下拉菜单。 所以我有这样的国家列表: 美国 德
我有一条从 Angular $resource promise 返回的记录，如下所示。 记录是一个数组，每个记录数组中都有另一个变量数组。我尝试在我的 View 中显示如下。 div(ng-repe
我需要使用 ng-repeat 来生成多个元素，但这些元素不能分别包装在 div 内(这是用于框布局的目的，其中框布局仅适用于直接子元素)。例如，我需要这个结果: Head 1 Body 1
我已经看到(很多)许多教程和装饰器的片段 w/和 w/o 参数，包括我认为是规范答案的两个:Decorators with arguments , python decorator arguments
我是一名优秀的程序员,十分优秀！