View Components

Laraloop has several view components and below are explained how to use them. There are view components only used in admin, some used in frontend and some shared. You can recognize them by prefix of component name. Admin component start with <x-admin-*, frontend component start with <x-front-* and shared <x-loop-*. All view components are defined in config, so you can override them in case you wish to customize the default behaviour.

Admin View Components

Roles Picker

The roles picker display list of roles in different tag. It's used in forms as checkbox or select, or in filters as links.

  • Checkbox (default)
<x-admin-roles-picker tag="checkbox"
                      :selected="old('roles', empty($user->roles) ? [] : $user->roles->pluck('name', 'id')->toArray())"
                      :roles="$roles ?? null" />
  • Select
<x-admin-roles-picker tag="select"
                      :selected="old('roles', empty($user->roles) ? [] : $user->roles->pluck('name', 'id')->toArray())"
                      :roles="$roles ?? null"
                      multiple />
  • Bootstrap Select
<x-admin-roles-picker tag="select"
                      :selected="old('roles', empty($user->roles) ? [] : $user->roles->pluck('name', 'id')->toArray())"
                      :roles="$roles ?? null"
                      title="Select additional roles"
                      data-toggle="selectpicker"
                      data-width="100%"
                      data-live-search="true"
                      data-size="5"
                      data-container="body"
                      style="display: none"
                      multiple />
  • Links (used in filters)
   <x-admin-roles-picker tag="links" 
                         :selected="$filters['role'] ?? null"
                         :route="$route"
                         class="dropdown-item" 
                         :filters="$filters" />
  • Dropdown
   <x-admin-roles-picker tag="dropdown" 
                         :selected="$filters['role'] ?? null" 
                         :route="$route"
                         :filters="$filters" />

NOTE: With dropdown and links, the $filters and $routes is optional, default $routes is admin.users.index, and default $filters is empty array. Also as you can notice $roles which contain all roles is optional. If omitted then will be retrieved by component. Per default $roles is retrieved via view composer that share it with create and edit user.

Actions user

The actions user component display the actions that can be applied to users, for example View, Edit, Ban, Unban, Verify, Trash, etc. It's used inside table for manage users, in user show page and in dashboard on bottom of page. This is useful because if you add custom actions you can just replace one single component and this will be shared across all pages where it's used.

The usage is simple and has a few optional setup.

  • Default
  <x-admin-actions-user :user="$user" 
                        class="d-inline-block" 
                        placement="right" 
                        toggler-class="btn btn-secondary" />

The most important thing is the $user variable, which it's used to build the links, the others is optional. The placement can be left or right, and it's applied to class .dropdown-menu-*.

If you have custom actions links, you can pass them as main slot. Below example show a custom action "approve".

  <x-admin-actions-user :user="$user">
        <a href="{{ route('users.approve', $user) }}" class="dropdown-item">
               data-toggle="alert"
               data-method="PATCH"
               data-title="Approve User"
               data-body="Are you sure you want approve user {{ $user->name }}?"
            <i class="dropdown-icon fa fa-eye"></i> Approve
        </a>
    </x-admin-actions-user>

The actions links are shown inside a dropdown menu with toggler button with three dots icon. If you want to override the default toggler link you can use slot name toggler like below:

  <x-admin-actions-user :user="$user">
        <x-slot name="toggler">
          <a href="#" class="btn btn-primary" data-toggle="dropdown" id="actionId-{{ $user->id }}">Actions</a>
        </x-aslot>
    </x-admin-actions-user>

Dashboard chart

One of the most powerful component which allow many customization of main chart in dashboard page. The chart has many different customization and you can change them without touching JS. In case something is not covered, you can play directly with JS class dedicated for chart. You can check Chartisan documentation to know more about JS chart library used by Laraloop. You can also create new chart, see below doc of Laravel package used by Laraloop.

      <x-admin-chartisan
              :chart-url="route('charts.dashboard_chart', ['period' => request()->period, 'resource' => request()->get('resource')])"
              id="dashboardChart"
              minimalist="true"/>

The only mandatory props are the chart-url and the id. The minimalist prop is default set to true and will hide the grid borders and label of chart. Below show example with all options:

      <x-admin-chartisan
              :chart-url="route('charts.dashboard_chart', ['period' => request()->period, 'resource' => request()->get('resource')])"
              id="dashboardChart"
              minimalist="true"
              enable-autoupdate="true"
              autoupdate-time="20000"
              type="bar"
              color="#db1a69"
              color-soft="#f3dfe4"
              height="330px"/>

NOTE: The type can be bar or line. If you want to disable autoupdate when first time page open, then just leave empty or remove attribute. Default autoupdate is disabled, but user can enable/disable it.

As you have notice the chart-urhas two params which it's used to set period and resource, which is table name from where get data. Default resource is users and default period is last 30 days. So if you set manually the resource, this will load charts only for that resource, example:

      <x-admin-chartisan
              :chart-url="route('charts.dashboard_chart', ['period' => request()->period, 'resource' => 'posts'])"
              id="postsChart">

Autocomplete

This component it's used in admin and frontend, and most probably you don't need to customize it. It's used by searchable model, and any model you make searchable, it will be also in autocomplete when enabled via config.

However, you can also define in controller that autocomplete search in one model or more models, and also define custom remote URL. Below is explained how to do this.

The html markup for component in admin are like below:

<x-loop-autocomplete :dataset="$autocomplete['dataset'] ?? '*'"
                     :remote="$autocomplete['remote'] ?? route('admin.search.autocomplete')"
                     :action="$autocomplete['action'] ?? route('admin.search.index')"
                     :is-admin="true">
    <div
        class="list-group list-group-flush list-group-reflow mb-2 js-typeahead-menu tt-dd-menu">
        <h6 class="list-group-header d-flex justify-content-between">
            <span>Shortcut</span>
        </h6>
        <div class="list-group-item py-2">
            <a href="{{ route('admin.users.create') }}" class="stretched-link"></a>
            <div class="tile tile-sm bg-muted">
                <i class="fas fa-user-plus"></i>
            </div>
            <div class="ml-2">Create User</div>
        </div><!-- /.list-group-item -->
    </div>
</x-loop-autocomplete>

As you can see there is a variable array $autocomplete which you can pass from your controller, and define the dataset which is an array of models defined in config, a remote URL used to define search action and the action URL which is the page which show all search result. Then you can define some default shourtcut links that are display initially. Last you can define if search is in admin or in frontend, by using prop is-admin.