Onlineweb Apps Dashboard

Kjapp kom-i-gang innføring til Onlineweb Dashboard

Filstruktur

• .less filer legges i /files/static/less/dashboard
• .js filer legges i /files/static/js/dashboard
• .html filer legges i /templates/<app>/dashboard/
• Views og urls for dashboard-delen av appen legges i /apps/<app>/dashboard/

View

Apper som skal ha et eget view i dashboardet trenger å få med et permissions sett og basisdata for å populere sidebaren. I tillegg må de gjøre en enkel sjekk for å verifisere at brukeren har tilgang til å vise /dashboard/.

Eksempel:

from django.contrib.auth.decorators import login_required
from django.shortcuts import render
from guardian.decorators import permission_required
from apps.dashboard.tools import get_base_context

@login_required
@permission_required('app.view_somemodel', return_403=True)
def index(request):

    context = get_base_context(request)

    context['some_other_context_data'] = MyModel.objects.all()

    return render(request, '<app>/dashboard/index.html', context)

Template

Templates extender dashboard_base.html som ligger i template root folderen. Følgende blocks må overrides:

• {% block title %}
• {% block page-header %}
• {% block breadcrumbs %}
• {% block content %}

{% breadcrumbs %} blocken trenger kun å inneholde følgende elementer:

<li><a href="/dashboard/app/">App</a></li>
<li>Appmodule</li>

{% page-header %} skal bare inneholde tekst.

Følgende blocks kan utvides:

• {% block styles %}
• {% block scripts %}

Skal du legge til custom css og js, gjør følgende:

{% block styles %}
    {{ block.super }}
    {% compress css %}
    <link rel="stylesheet" type="text/less" href="{{ STATIC_URL }}less/dashboard/app.less" />
    {% endcompress   %}
{% endblock %}

{% block scripts %}
    {{ block.super }}
    <script src="{{ STATIC_URL }}js/dashboard/app.js"></script>
{% block %}

Sidebar

For å legge til appen i sidebaren, gå inn i dashboard_base.html templaten, finn riktig plass i den alfabetiske sorteringen av menyen, kopier et tidligere menyelement som passer med din appstruktur, og erstatt med de lenkene du trenger. Bytt deretter ut den omfavnende permissionssjekken med view_.... permission for din hovedmodell.

Dersom du ønsker å ha med indikatorer i sidebaren, som badges med New eller et antall eller liknende, må du legge til dataen du ønsker i get_base_context -metoden. Denne ligger i apps.dashboard.tools.

Deretter er det bare å legge til en if-statement i templaten som viser en badge dersom det er noe data i contexten.

Tilganger

Det er ønskelig at alle modeller i tillegg til de vanlige standard django permissions-feltene har et custom view_model felt. Dette gjøres ved å legge til en tuppel i Meta-classen i modellen din:

class MyModel(models.Model):
    blabla

    class Meta:
        permissions = (
            ('view_mymodel', 'Can view MyModel'),
        )

NB: Husk å legg til komma etter den indre tuppelen, ellers tolker python unpackinga som at den skal pakke ut den ytre tuppelen, som kun yielder en verdi, og vil brekke syncdb, ettersom den forventer to verdier.

Dersom for eksempel ønsker å ikke la brukere uten app.add_mymodel tilgangen utføre post requests til et view, bruk den innebygde has_perm metoden på brukerobjektet:

from django.core.exceptions import PermissionDenied
from django.contrib.auth.decorators import login_required
from guardian.decorators import permission_required

@login_required
@permission_required('app.view_mymodel', return_403=True)
def new_entry(post):
    if request.method == 'POST':
        if not request.user.has_perm('app.add_mymodel'):
            raise PermissionDenied
        else:
            # TODO

Alternativt kan man bytte ut tilgangen @permission_required benytter til app.add_mymodel. Dette vil dog gjøre at folk med view_mymodel ikke engang kan få opp formet for å opprette et objekt. Men det er litt up to you.

Dashboard.js

dashboard.js inneholder flere hjelpemetoder som kan brukes over alt i dashboardet. Som default sjekker den om man har jQuery og jQuery.cookie pluginen, binder opp sidebar og toggle sidebar knappene, setter opp CSRF-settings for AJAX osv.

Nyttige metoder som man kan bruke fra Dashboard.js:

# AJAX CSRF-PRESET HELPER:
var success = function (data) { // do some stuff with returned ajax data }
var error = function (xhr, statusText, returnedError) { // do some stuff with ajax error }
var data = { // some JSON data } or null if no data needed
var type = null or 'json'
var method = 'GET' or 'POST'
var url = 'someurl'

Dashboard.tools.ajax(method, url, data, success, error, type)

# DATETIMEPICKER
<div class="input-group dtp">
    <input type="text" id="somedatefield" />
    <span class="input-group-addon datepickerbutton">
        <i class="fa fa-calendar fa-lg"></i>
    </span>
</div>

# Legg til klassen dtp på input-group diven, og klassen datepickerbutton på input-group-addonen man ønsker
# skal være knappen. Så vil dashboard.js automatisk binde knappen til riktig felt.