I’ve spent a bit of time over the last few days re-working the Trello Dashboard, and getting used to some of the features of AngularJS. I’m happy to admit that I have a lot to learn about AngularJS, but I feel like I’m making progress!
For starters, I’ve moved all of the Trello Client interactions out of my Controller, and into a trelloLibrary module. This contains the trelloService, which can now be injected into, and used by, the Dashboard Controller, or indeed by any other AngularJS Controller. This should make the library much more portable, and has cleaned up the Controller code significantly.
Routing & Deep Linking
I’ve used the ngRoute module to enable deep-linking within the Dashboard. Selecting an Organisation and/or a Filter from the drop-down menus in the navigation bar will update the current route, allowing you to bookmark or navigate directly to a particular Organisation and Filter within the Dashboard.
Some other minor changes have also been incorporated into this version:
- Changed from the default Bootstrap theme to Flatly.
- Added the Name & Avatar for the Trello user to the Navigation Bar.
Demo & Source Code
Both the Demo and Source Code have been updated on my GitHub profile.
I was introduced to Trello a while ago, and have recently started using it much more regularly for managing tasks for my team and I – it’s replaced my Whiteboard of Doom™ quite effectively.
I’ve found it to be an extremely useful tool, but there was one thing missing – I felt that I was spending too much time trying to catch up on each of the boards in my organisations – at the moment, I have 13 boards open across my team, and having to check each one individually takes a while.
This led me to build a small Trello Dashboard (demo | source code). This gives me an overview of each of the boards I’ve subscribed to, without having to check each board individually.
Currently, the Dashboard allows you to:
- Login with a Trello account.
- Choose between a display of “My Boards”, “Starred Boards”, or from a list of your Organisations.
- Filter between Open and Closed boards.
- Display each of the lists in a board, with a count of cards for each list.
- Display a donut graph showing the relative size of each list in a board.
I’m planning to add more features as I come up with them, but for now I’m finding this a useful addition to my use of Trello.
The Dashboard makes use of the following technologies: