mice-tm/yii2-timeline-widget

A widget to render simple timeline

Installs: 7 487

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 1

Forks: 3

Open Issues: 0

Type:yii2-extension

1.1.4 2021-12-09 07:47 UTC

This package is not auto-updated.

Last update: 2024-05-09 20:54:57 UTC


README

Latest Version License: MIT Dependency Status Scrutinizer Code Quality Build Status Total Downloads

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist mice-tm/yii2-timeline-widget "*"

or add

"mice-tm/yii2-timeline-widget": "*"

to the require section of your composer.json file.

Usage

Timeline widget expects array of LogModel-like models (micetm\timeline\LogModel) in items-param. Where title and body can contain macros strings in yii macros-format {here-is-macros}. With eventIcons-param you can extend or reassign icons for actions.

class LogModel extends Model
{

    public $action;
    public $title,
    public $body;
    public $log_date;
    public $macros;
    public $_id;
    
    public function rules()
    {
        return [
            [['action', 'title'], 'required'],
            [['action', 'title', 'body'], 'string'],
            ['log_date', 'integer'],
            ['macros', 'safe']
        ];
    }

    public function attributes()
    {
        return [
            '_id',
            'action',
            'title',
            'body',
            'macros',
            'log_date',
        ];
    }
    
    public function attributeLabels()
    {
        return [
            '_id' => '#',
            'action' => 'Action',
            'macros' => 'Macros',
            'title' => 'Title',
            'body' => 'Body',
            'log_date' => 'Date',
        ];
    }
}

Once the extension is installed, simply use it in your code by :

<?php
use micetm\timeline\Timeline;

/**
 * @var $dataProvider \yii\data\ActiveDataProvider
 */

echo Timeline::widget([
    'items' => $dataProvider->getModels(),
    'eventIcons' => [
        'update' => 'fa fa-pencil bg-orange',
        'add' => 'fa fa-pencil bg-orange',
        'create' => 'glyphicon glyphicon-star bg-green',
    ]
]); ?>