tangoman/front-bundle

Symfony Front Twig Extension Bundle

TangoMan Front Bundle

TangoMan Front Bundle provides an easy way to add front elements to your pages. TangoMan Front Bundle makes building back-office for your app a brease., _(*1)

Features

• Navigation bar
  • Dropdown
• Menus
• Tabs
• Buttons
• Search forms
  • Inputs
  • Selects
  • Options
    • Optgroups
  • Checkboxes
  • Radio buttons
  • Reset button
  • Submit button

All elements can :, _(*2)

• Own class
• Own id

Links, buttons, menu items, tabs can :, _(*3)

• Own icons
• Own translatable labels
• Own badges
• Own parameters
• Being disabled
• Being displayed on specific pages
• Being firewalled
• Trigger callbacks
• Show tooltips
• Toggle popovers
• Toggle modals
• Toggle dropdowns
• Toggle accordion

And buttons can :, _(*4)

• Submit form on change

You can easily create your own template as well., _(*5)

Installation

Step 1: Download the Bundle

Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:, _(*6)

$ composer require tangoman/front-bundle

This command requires you to have Composer installed globally, as explained in the installation chapter of the Composer documentation., _(*7)

Step 2: Enable the Bundle

Then, enable the bundle by adding it to the list of registered bundles in the app/AppKernel.php file of your project:, _(*8)

<?php
// app/AppKernel.php

// ...
class AppKernel extends Kernel
{
    // ...

    public function registerBundles()
    {
        $bundles = array(
            // ...
            new TangoMan\FrontBundle\TangoManFrontBundle(),
            new TangoMan\CallbackBundle\TangoManCallbackBundle(),
        );

        // ...
    }
}

Since TangoMan Front Bundle requires TangoMan Callback Bundle enable it in the app/AppKernel.php as well., _(*9)

Usage

Front Assets

Assets should copy automatically, if for whatever reason you need to reinstall them manually type following command :, _(*10)

$ php bin/console assets:install TangoManFrontBundle

In order for elements to display properly include the following <link> tag in your ::base.html.twig Wich will enable TangoMan Front Bundle custom css. (You can use your own css is you want to.), _(*11)

{% block stylesheet %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('bundles/tangomanfront/css/tangoman-front-bundle.css') }}">
{% endblock %}

In order for forms to behave like expected include the following <script> tags inside your javascript block., _(*12)

{% block javascript %}
    {{ parent() }}
    <script src="{{ asset('bundles/tangomanfront/js/tangoman-front-bundle.js') }}"></script>
{% endblock %}

Navbar component

If you're using default navbar template, name your routes like the following:, _(*13)

• 'app_login'
• 'app_check'
• 'app_logout'
• 'app_user_profile'
• 'app_user_edit'
• 'app_admin_index'
• 'homepage'

Search / filter form component

Place use statement in the controller

use TangoMan\FrontBundle\Model\Button;
use TangoMan\FrontBundle\Model\ButtonGroup;
use TangoMan\FrontBundle\Model\Item;
use TangoMan\FrontBundle\Model\Menu;
use TangoMan\FrontBundle\Model\Modal;
use TangoMan\FrontBundle\Model\SearchForm;
use TangoMan\FrontBundle\Model\SearchInput;
use TangoMan\FrontBundle\Model\SearchOption;
use TangoMan\FrontBundle\Model\Th;
use TangoMan\FrontBundle\Model\Thead;

Build object in the controller

<?php
// AppBundle/Controller/DefaultController.php
namespace AppBundle\Controller;

// ...

class DefaultController extends Controller
{
    /**
     * @Route("/user/index")
     */
    public function indexAction()
    {
        // ...

        $form = new SearchForm();

        // Number
        $input = new SearchInput();
        $input->setLabel('Id')
            ->setName('e-id')
            ->setType('number');
        $form->addInput($input);

        // Text
        $input = new SearchInput();
        $input->setLabel('User')
            ->setName('user-username')
            ->setType('text');
        $form->addInput($input);

        // Select
        $input = new SearchInput();
        $input->setLabel('Role')
            ->setName('roles-type')
            ->setPlaceholder('All')
            ->setType('select');

        $option = new SearchOption();
        $option->setName('Administrator')
            ->setValue('ROLE_ADMIN');
        $input->addOption($option);

        $option = new SearchOption();
        $option->setName('User')
            ->setValue('ROLE_USER');
        $input->addOption($option);
        $form->addInput($input);

        // Submit
        $input = new SearchInput();
        $input->setLabel('Filter')
            ->setType('submit')
            ->setIcon('glyphicon glyphicon-search');
        $form->addInput($input);

        return $this->render(
            'user/index.html.twig',
            [
                'form' => $form,
                'users' => $users,
            ]
        );
    }
}

Integrate in Twig

<div id="search-form" class="jumbotron">
    {{ searchForm(form) }}
</div>

Ordered list component

<table class="table table-striped">
    {{ thead(thead) }}
    <tbody>
    {% for user in users %}
        <tr>
            <td>
            ...

Inputs

Selects

Buttons

Links

Options

Examples

Inputs

"inputs": [
    {
        "type": "text",
        "icon": "glyphicon glyphicon-user",
        "name": "user-username",
        "label": "User"
    },
    {
        "type": "email",
        "icon": "glyphicon glyphicon-envelope",
        "name": "user-email",
        "label": "Email"
    }
]

Selects

"inputs": [
    {
        "type": "select",
        "name": "roles-type",
        "label": "Role",
        "icon": "glyphicon glyphicon-king",
        "placeholder": "All roles",
        "options": [
            {
                "name": "Super Admin",
                "value": "ROLE_SUPER_ADMIN"
            },
            {
                "name": "Admin",
                "value": "ROLE_ADMIN"
            },
            {
                "name": "Super User",
                "value": "ROLE_SUPER_USER"
            },
            {
                "name": "User",
                "value": "ROLE_USER"
            }
        ]
    }
]

Optgroups

"inputs": [
    {
        "type": "select",
        "name": "foo",
        "label": "Test",
        "icon": "fa fa-facebook",
        "placeholder": "Test",
        "optgroups": [
            {
                "label": "FooGroup",
                "options": [
                    {
                        "name": "Foo 1",
                        "value": "foo1"
                    },
                    {
                        "name": "Foo 2",
                        "value": "foo2"
                    }
                ]
            },
            {
                "label": "BarGroup",
                "disabled": true,
                "options": [
                    {
                        "name": "Bar 1",
                        "value": "bar1"
                    },
                    {
                        "name": "Bar 2",
                        "value": "bar2"
                    }
                ]
            }
        ]
    }
]

Buttons

"buttons": [
   {
       "icon": "glyphicon glyphicon-edit",
       "label": "Edit",
       "class": "btn btn-warning btn-sm",
       "route": "app_admin_user_edit",
       "tooltip": "Edit '~user~' profile",
       "parameters": {
           "id": '~user.id~'
       },
       "roles": ["ROLE_ADMIN","ROLE_SUPER_ADMIN"]
   },
   {
       "icon": "glyphicon glyphicon-trash",
       "label": "Delete",
       "class": "btn btn-danger btn-sm",
       "route": "app_admin_user_delete",
       "parameters": {
           "id": '~user.id~'
       },
       "tooltip": "Delete '~user~' profile",
       "modal": ".my-modal",
       "roles": ["ROLE_ADMIN","ROLE_SUPER_ADMIN"]
   }
]

Button Groups

"inputs": [
    {
        "type": "buttonGroup",
        "class": "pull-right",
        "buttons": [
            {
                "type": "submit",
                "label": "Filter",
                "badge": '~users|length~',
                "icon": "glyphicon glyphicon-search"
            },
            {
                "type": "reset",
                "label": "Reset",
                "icon": "glyphicon glyphicon-remove",
                "class": "btn btn-warning"
            }
        ]
    }]

TangoMan Front Bundle classes

• .tango-actions
• .tango-btn-group
• .tango-button-badge
• .tango-button-icon
• .tango-form
• .tango-form-btn
• .tango-form-checkbox
• .tango-form-group
• .tango-link-badge
• .tango-link-icon
• .tango-thead
• .tango-tooltip-wrapper

Error

When you get to see Twig_Error_Runtime Symfony Exception, _(*14)

Impossible to access an attribute ("foobar") on a null variable., _(*15)

It means your json is invalid. Don't worry you probrably just missed a comma somewhere., _(*16)

Bootstrap 3 toggles

Note

If you find any bug please report here : Issues, _(*17)

License

Copyright (c) 2018 Matthias Morin, _(*18)

Distributed under the MIT license., _(*19)

If you like TangoMan Front Bundle please star! And follow me on GitHub: TangoMan75 ... And check my other cool projects., _(*20)

Matthias Morin | LinkedIn, _(*21)