Kanban

This module adds a kanbanboard view to your resource index page.

Installation

To install this module

composer require qore/kanban

php artisan vendor:publish --tag=qore.kanban.db
php artisan vendor:publish --tag=qore.kanban.frontend

warning

For the time being, for using this module frontend, you have to manually register it's vuex module

You can do this by adding the following changes your frontend index.js file inside src/store

import kanban from '../vendor/kanban/store'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    auth,
    globals,
    table,
    quickActions,
    kanban
  },

This should only be done after the package frontend files are published.

warning

You need to mark the persistedStore for Kanban Module, by adding the following keys to the store booting file in your frontend folder src/store/index.js.

plugins: [createPersistedState({
  paths: [
    'auth.status',
    'auth.twoFactorAuthStatus',
    'auth.user',
    ...
    'kanban.toggles',
    'kanban.columnToggles'
  ]
})]

Usage

Make sure to migrate.

To use this module

Implement the following class on the resource like the following:

class OrderResource extends QoreResource implements KanbanResource

Then add the following function to your resource:

public function kanbanBoard(): KanbanBoard
{

}

Inside the function you can add the kanbanboard that is based on a field from your resource. The first parameter is the field you want to use. The second parameter is the name of the field you want to use as a title.

The third parameter is the array of kanban columns that are based on the values that your field has. In this example the resource is showing every model with the values 'to-do', 'doing', 'review', 'done', 'another_column' in their respective columns. If you have models that do not have one of these values, they are not shown in the kanbanboard.

    /**
     * @return KanbanBoard
     */
    public function kanbanBoard(): KanbanBoard
    {
        return KanbanBoard::make('type', 'name', [
            KanbanBoardColumn::make('to-do', 'to-do'),
            KanbanBoardColumn::make('doing', 'doing'),
            KanbanBoardColumn::make('review', 'review'),
            KanbanBoardColumn::make('done', 'done'),
            KanbanBoardColumn::make('another_column', 'another_column'),
        ])
    }

There are several functions on the kanbanboard that help define and style your card inside the columns. The following functions can be used on the board:

            ->canHideColumns()
            ->showCreatedTimeStamp()
            ->showColumnTotalsFromField('price')
            ->showColumnAverageFromField('price')
            ->descriptionField('subtitle')
            ->priceField('price')
            ->pillDescriptions([
                [
                    'field' => 'price',
                    'icon' => 'paid',
                    'colors' => [
                        200 => 'green',
                        500 => 'yellow',
                        900 => 'orange',
                        1300 => 'red',
                        'default' => 'blue'
                    ]],
                [
                    'field' => 'difficulty',
                    'icon' => 'leaderboard',
                    'colors' => [
                        'easy' => 'green',
                        'medium' => 'yellow',
                        'hard' => 'purple',
                        'default' => 'brown'
                    ]],
            ]);

Most functions are self-explanatory.

For the last function pillDescriptions() an array is needed with arrays of your preferences per pill. You can add multiple pills based on the fields that the resource uses. Inside the 'field' the field is given, inside the 'icon' an icon is given and inside 'colors' you can select colors that are shown on the pill based on certain values.

When using a number of price field you can base the colors on certain upper threshold values. In this case every card in a column with a value equal or less than 200 will get a green color. This counts for strings as well. In this case with a select field 'difficulty', the pills are colored based on the difficulty.

Functionalities

• The kanbanboard uses a switch button to switch between the normal index view and the kanban view.
• The refresh button refreshes the board.
• The search actions button shows the search actions for the user and can add new search actions.
• The filter button opens a menu that allows for filtering options. Only fields that are filterable are shown.
• The settings button opens a small menu that allows for changes the settings of kanbanboard.

When clicking on a card a menu shows with the data from that model. It can be used to navigate to the detail page.

Relations

A Kanban Board can be shown instead of a relational table on a resource page.

This behaviour needs to be manually enabled by calling enableKanban on that field definition.

It is only available on HasMany fieldsor any fields that is extending the HasMany Field.

return HasMany::make(__('ap::ap.issues.plural'), 'issues', issues_resource())
    ->hideOnForms()
    ->withAttachButton()
    ->enableKanban()

note

The other resource needs to use the Kanban Interface for this to work.

Upgrade Guide

To upgrade this module

composer update qore/kanban

If you need to upgrade migrations or Vue components:

php artisan vendor:publish --tag=qore.kanban.db --force
php artisan vendor:publish --tag=qore.kanban.frontend --force

Make sure to migrate after.