0

我有一系列看起来像这样的小部件：

在此处输入图像描述

每个小部件在右上角都有一个按钮，可以根据您在应用程序中的位置添加或删除小部件，这是代码部分：

div class="col-xs-2">
    @if(Route::current()->uri() == 'welcome')

        <form action="{{ action('WidgetController@destroy', $widgetNo ) }}" method="post">
            @csrf @method('delete')
            <button type="submit" class="widget">
                <i class="fa fa-bars "></i>
            </button>
        </form>

    @elseif(Route::current()->uri() == 'widget-library') 

        @foreach($user->widgets as $widget) 
            @if($widget->widget_id == $widgetNo)

                <i class="fa fa-bars "></i>

                @else

                <form action="{{action('WidgetController@store')}}" method="POST">
                    @csrf
                    <input type="hidden" name="user_id" value="{{ $user->id }}">
                    <input type="hidden" name="widget_id" value="{{ $widgetNo }}">

                    <button type="submit" class="widget">
                        <i class="fa fa-plus "></i>
                    </button>
                </form>

            @endif 
        @endforeach 
    @endif
</div>

当在“小部件库”中时，代码会检查用户拥有哪些小部件并放置一个加号或一个栏（因为我想阻止用户重新添加他们已经拥有的小部件）。

当您只有一个 Widget 时，它看起来像这样：

在此处输入图像描述

如您所见，这似乎可行。

然而，有两个问题。

  • 当用户拥有多个 Widget 时，foreach 循环会循环多次创建多个按钮。
  • 此外，当用户没有小部件时，不会显示图标，因为它们是在 foreach 循环中生成的。

小部件本身只是 HTML，因此为了添加唯一 ID，我在小部件库视图中完成了以下操作。

@include('widgets.quick-search-full-width', ['widgetNo' => 1]) 
@include('widgets.calendar', ['widgetNo' => 2])
@include('widgets.suggestion', ['widgetNo' => 3])
@include('widgets.task', ['widgetNo' => 4])
@include('widgets.quick-search', ['widgetNo' => 5])
@include('widgets.message', ['widgetNo' => 6])
@include('widgets.find-expert', ['widgetNo' => 7])
@include('widgets.holiday', ['widgetNo' => 8])
@include('widgets.expenses', ['widgetNo' => 9])
@include('widgets.snap-pole', ['widgetNo' => 10])
@include('widgets.teams-cms', ['widgetNo' => 11])
@include('widgets.events-cms', ['widgetNo' => 12])
@include('widgets.team-cms', ['widgetNo' => 13]) 
@include('widgets.article-todo', ['widgetNo' => 14]) 
@include('widgets.article-cms', ['widgetNo' => 15]) 
@include('widgets.vacancies', ['widgetNo' => 16])
@include('widgets.yammer', ['widgetNo' => 17]) 
@include('widgets.poll-results', ['widgetNo' => 18])

如您所见，我正在为每个小部件传递一个 ID。

然后在主页上，我有一个很大的 switch 语句来决定要渲染哪个部分。

@foreach ($user->widgets as $widget) 

    @switch($widget->widget_id) 

        @case (1) 
            @include('widgets.quick-search-full-width', ['widgetNo' => 1]) 
            @break; 
        @case(2) 
            @include('widgets.calendar', ['widgetNo' => 2]) 
            @break; 
        @case (3) 
            @include('widgets.suggestion', ['widgetNo' => 3]) 
            @break; 
        @case (4) 
            @include('widgets.task', ['widgetNo' => 4])
            @break; 
        @case (5) 
            @include('widgets.quick-search', ['widgetNo' => 5]) 
            @break; 
        @case (6) 
            @include('widgets.message', ['widgetNo' => 6])
            @break; 
        @case(7) 
            @include('widgets.find-expert', ['widgetNo' => 7]) 
            @break; 
        @case (8) 
            @include('widgets.holiday', ['widgetNo' => 8]) 
            @break; 
        @case (9) 
            @include('widgets.expenses', ['widgetNo' => 9])
            @break; 
        @case (10) 
            @include('widgets.snap-pole', ['widgetNo' => 10]) 
            @break; 
        @case (11) 
            @include('widgets.teams-cms', ['widgetNo' => 11]) 
            @break; 
        @case (12)
            @include('widgets.events-cms', ['widgetNo' => 12]) 
            @break; 
        @case (13) 
            @include('widgets.team-cms', ['widgetNo' => 13]) 
            @break;  
        @case (14) 
            @include('widgets.article-todo', ['widgetNo' => 14]) 
            @break; 
        @case (15) 
            @include('widgets.article-cms', ['widgetNo' => 15]) 
            @break; 
        @case (16) 
            @include('widgets.vacancies', ['widgetNo' => 16]) 
            @break;
        @case(17) 
            @include('widgets.yammer', ['widgetNo' => 17]) 
            @break; 
        @case(18)
            @include('widgets.poll-results', ['widgetNo' => 18])
            @break
        @default
        <h3>You currently have no widgets</h3>
    @endswitch

@endforeach

我以为我可以通过在 foreach 循环中的简单中断来解决这个问题，但这不起作用。

4

1 回答 1

2

我想添加另一个版本的答案，以考虑您目前的操作方式。希望我能理解你是怎么做的。

在显示所有小部件的主刀片内部：

@php
$activeWidgets = $user->widgets->pluck('widget_id')->toArray();
@endphp

@include('widgets.quick-search-full-width', ['active' => in_array(1, $activeWidgets)]) 
@include('widgets.calendar', ['active' => in_array(2, $activeWidgets)])
@include('widgets.suggestion', ['active' => in_array(3, $activeWidgets)])
@include('widgets.task', ['active' => in_array(4, $activeWidgets)])
....
@include('widgets.poll-results', ['active' => in_array(18, $activeWidgets)])

在显示按钮的每个特定小部件内：

<!-- Displaying the buttons -->
@if ($active)
<i class="fa fa-bars "></i>
@else
<form action="{{action('WidgetController@store')}}" method="POST">
    @csrf
    <input type="hidden" name="user_id" value="{{ $user->id }}">
    <input type="hidden" name="widget_id" value="{{ $widgetNo }}">

    <button type="submit" class="widget">
        <i class="fa fa-plus "></i>
    </button>
</form>
于 2018-06-08T15:17:07.010 回答