16 Further improving the UI

We want to be able to display all the user's notes to them on each page (creating or editing a note).

A second mixin

To do this we'll make a mixin that edits the context sent to the template to include all the user's notes.

from .models import Note

...

class NoteMixin(object):
   def get_context_data(self, **kwargs):
       context = super(NoteMixin, self).get_context_data(**kwargs)

       context.update({
          'notes': Note.objects.filter(owner=self.request.user).order_by('-pub_date'),
       })
       
       return context

Update new views and URLs

Here is a URL to automatically redirect http://localhost:8000/notes/ to the new note page.

url(r'^$', lambda r: HttpResponseRedirect('new/'), name='index'),

Update your views. Make sure the NoteCreate inherits from the new NoteMixin:

class NoteCreate(LoginRequiredMixin, NoteMixin, CreateView):

And in NoteUpdate inherit from NoteMixin and also override get and post to make sure a user only views or edits their own notes.

class NoteUpdate(LoginRequiredMixin, NoteMixin, UpdateView):

    ...

        def get(self, request, *args, **kwargs):
            self.object = self.get_object()

            if self.object.owner != self.request.user:
                raise PermissionDenied

            return super(NoteUpdate, self).get(request, *args, **kwargs)

        def post(self, request, *args, **kwargs):
            self.object = self.get_object()

            if self.object.owner != self.request.user:
                raise PermissionDenied

            return super(NoteUpdate, self).post(request, *args, **kwargs)

Get new templates

Download the new templates:

cd note
wget https://github.com/sixfeetup/ElevenNote/raw/master/templates-ch16.zip
unzip templates-ch16.zip   # If prompted to replace, say (Y)es
cd ..

CSS and Javascript

cd static
wget https://github.com/sixfeetup/ElevenNote/raw/master/static-elevennote-ch16.zip
unzip static-elevennote-ch16.zip
cd ..

One CSS tweak

In static/bootstrap/css/bootstrap.css in the .navbar-right definition remove this line:

margin-right: -15px;

Delete old views

We no longer need the NoteList or NoteDetail views, so delete those in views.py and urls.py.