GSoC 2011 GUI Overhaul Project: Start Coding

Hi everyone, sorry for my late post :). In this post I'll talk about what things have been done by me to accomplish my project. A week ago I had conference with Carol and Daniel. We were talked about what admin, Carol, needs to improve the usability of administration dashboard. Actually before the meeting, I've been working to add breadcrumb and refactor melange.map.js. So, I'll talk about the breadcrumb and melange.map.js first. If you don't have an idea what breadcrumb looked alike, take a look at the following picture.

The breadcrumb is something like path navigation that shows site hierarchy. Jacob Nielsen has a nice written summary of why breadcrumb navigation increasingly useful. I thought that the way breadcrumb rendered would be the same as Header, Footer or MainMenu in base_templates.py. My first thought was not so good. I defined a global map of named URL patterns with theirs hierarchies, something like this one :

...
BREADCRUMB = {
'gsoc_homepage': {
'name': 'Home',
'parents': [],
'url': 'homepage'
},
'search_gsoc': {
'name': 'Search',
'parents': ['gsoc_homepage'],
'url': 'searchpage'
},
'gsoc_accepted_orgs': {
'name': 'Accepted Organizations',
'parents': ['gsoc_homepage'],
'url': 'allProjects'
},
'edit_gsoc_profile': {
'name': 'My Profile',
'parents': ['gsoc_homepage']
},
'create_gsoc_profile': {
'name': 'My Profile',
'parents': ['gsoc_homepage']
},
'gsoc_dashboard': {
'name': 'My Dashboard',
'parents': ['gsoc_homepage']
},
'gsoc_tax_form': {
'name': 'Tax Form',
'parents': ['gsoc_homepage', 'gsoc_dashboard']
},
'gsoc_enrollment_form': {
'name': 'Enrollment form',
'parents': ['gsoc_homepage', 'gsoc_dashboard']
},
'gsoc_admin_dashboard': {
'name': 'Admin Dashboard',
'parents': ['gsoc_homepage']
},
'lookup_gsoc_profile': {
'name': 'Lookup profile',
'parents': ['gsoc_homepage', 'gsoc_admin_dashboard']
}
}

...

class Breadcrumb(Template):
"""Breadcrumb template
"""

def __init__(self, data, current_view):
self.data = data
self.current_view = current_view

def context(self):
"""breadcrumb_path context will hold breadcrumb path of current view
which consists list of tuples containg page_name and url
"""

from django.core.urlresolvers import reverse
context = {'breadcrumb_path': []}
for view in self.current_view:
if BREADCRUMB.get(view, None):
for parent in BREADCRUMB[view]['parents']:
 if BREADCRUMB.get(parent, None):
   href = None
   if BREADCRUMB.get(parent).get('url'):
     func =
self.data.redirect.__getattribute__(BREADCRUMB[parent]['url'])
     href = func().url()
   elif self.data.profile:
     href = self.data.redirect.urlOf(parent)

   context['breadcrumb_path'].append((BREADCRUMB[parent]['name'], href,))
context['breadcrumb_path'].append((BREADCRUMB[view]['name'], None,))
break

return context

def templatePath(self):
return "v2/modules/gsoc/breadcrumb.html"

...

Sverre suggested me avoid the global map, and define a method that returns the breadcrumb navigation, more or less like this one :

class ProfilePage(RequestHandler):
"""View for the participant profile.
"""

parentView(self):
return (self.redirect.urlOf('homepage'), "Home")

I agree with Sverre's suggestion, I'll refactor my code :).

After the breadcrumb, I also plan to refactor melange.map.js and combine the map in profile.js into one. All map functionalities should be placed into melange.map.js. I've worked on the profile_readonly.js before. Basically profile.js and profile_readonly.js have the same code, except the event handler to update the marker was removed in profile_readonly.js. As you may see, every time I need a map on page, I create a mypage_with_map.js and copy the code from profile.js or melange.map.js, hack a little bit to suit the need and tadda I betray the DRY principle. That's why we need to refactor the melange.map.js. The MAP API also need to be updated to v3, same as the map we see in organization homepage.

Back again to our discussion with Carol. Here's what I noted after the meeting :

• If we're login as a host and view the dashboard (My Dashboard), we will see the page overloaded by Jqgrid list. Carol wants the list is grouped. Akeda has suggestion to group the list by tabs.
• When students with project announced, there might be a student consider himself ineligible to participate. If Carol rejects that student, there will be available slot to accept another student that already rejected. Carol needs this feature to withdraw / accept student in her dashboard.
• Carol needs the Admin dashboard to be enhanced.

My first thought was Carol wants the Dashboard ("My Dashboard" I think) need to be cleaned up, since it contains a lot of list components. So far I am working with the data from seed_db and didn't realize that in the live instance might contains hundred of entities. I posted my mockup with the tabs in milist :