==============
The Admin Site
==============


This module plays (almost) nicely with the autogenerated django admin site.

Models
======

Let's imagine that you're building a new Django model, ``FavoriteColor``, that will match a person with his/her favorite color.

.. literalinclude:: ../demo/models.py
   :language: python
   :lines: 32-38

The Admin module
================

.. note::

    This takes into account that your URL configuration is admin-ready (with autodiscover *and* the URLs being loaded and pointing at ``/admin/`` for example).

Using the normal Admin process, in your app, add the following :file:`admin.py` file.

.. code-block:: python

    from django.contrib import admin
    from .models import FavoriteColor

    class FavoriteColorAdmin(admin.ModelAdmin):
        pass

    admin.site.register(FavoriteColor, FavoriteColorAdmin)

If you're reloading the devserver, and if you can access the demo site, you should be able to log in the admin and see that you have access to the default "favorite color" administration.

Although, for now, it's not using the autocomplete widgets.

Agnocomplete-ready Admin
========================

.. note::

    The following customization uses ``selectize.js``, but of course this would be almost the same with other JS front-ends. The loaded JS and CSS would be different, but the process would remain the same.

Add this form in the :file:`admin.py` file:

.. code-block:: python

    import forms

    class FavoriteColorModelForm(forms.ModelForm):
        person = fields.AgnocompleteModelField('AutocompletePerson')

        class Meta:
            fields = ('color', 'person')
            model = FavoriteColor

and make sure that the ``admin.ModelAdmin`` class is using it properly:

.. code-block:: python

    class FavoriteColorAdmin(admin.ModelAdmin):
        form = FavoriteColorModelForm

        class Media:
            css = {
                'screen': ('css/admin.css', 'css/selectize.css',)
            }
            js = (
                'js/jquery.js',
                'js/selectize.js',
                'js/demo/selectize.js',
            )

Detailed Media
--------------

css
###

The :file:`css/selectize.css` file is the standard selectize stylesheet, provided by the selectize.js module.

But in order to have a correct look'n'feel, you'll have to load this :file:`css/admin.css` file, or another file with the following CSS instructions:

.. literalinclude:: ../demo/static/css/admin.css
   :language: css

javascript
##########

Again, the :file:`js/jquery.js` and :file:`js/selectize.js` are the standard distribution, out of the shelves.

.. note::

    The autogenerated admin already loads jQuery, but for some reason, selectize.js doesn't play nice with it, so we're reloading a duplicate.
    This issue will be addressed as quick as possible.

The :file:`js/demo/selectize.js` is a script common to both demo pages and the admin page. You can browse it if you want, but it doesn very simple things:

* it selects the elements in the page with the attribute ``data-agnocomplete``,
* it applies the ``selectize()`` function to each of them, using some standard options.

Of course, you can copy-paste this script, and adapt it to your needs. At least in your edit page, you have to apply the ``selectize`` function to your target elements (usually, select boxes).