Tabs

You can add tabs to the resource detail page. For example, you might want to have a tab that shows the logs for the resource.

Creating a tab

Back-end

Tabs are very straight forward, they consist of a title and a Vue component:

class ResourceLogs extends Tab
{
    public function title(): string
    {
        return __('Logs');
    }

    public function component(): string
    {
        return 'ResourceLogs';
    }
}

Front-end

Your component will have model and resource available as props:

<template>
    <div>
        {{model.id}}
    </div>
</template>

<script>
    export default {
        name: 'ResourceLogs',
        props: ['model', 'resource']
    }
</script>

You can register your component anywhere, let's register this tab in boot/app.js:

import ResourceLogs from 'components/tabs/logs/ResourceLogs'

Vue.component('ResourceLogs', ResourceLogs)

Registering a tab

You can register your tab in your resource:

public function tabs(): TabCollection
{
    return new TabCollection(
        (new ResourceLogs())
    );
}

Visibility

You can hide tabs based on a condition:

public function tabs(): TabCollection
{
    return new TabCollection(
        (new SessionManagement())
            ->hideOnShow(fn(UserModel $model) => !auth()->user()->can('sessionManagement', $model))
    );
}

Counter

You can add a numeric indicator of how many records exists within the tab. For example, for the qore/notes module:

->withTabCountUsing(function(Model $model) {
    $query = Note::query();
    
    if ($this->getQueryClosure()) {
        $query = $this->getQueryClosure()->call($this, $query, $this->model);
    } else {
        $query = $query->whereIn('entity_type', [$this->model->getMorphClass()])
            ->whereIn('entity_id', [$this->model->id]);
    }
    
    return $query->count();
});

This method can also be called on Cards, because a Card can also be displayed as Tab.