Scraping My Old PR Implementation For a Better Design

So in a previous post, I was talking about my experience working on a new modal on the pagermon project. Although the participants liked the implementation, they all seemed eager to have an accordion view instead of a popup modal. Hence, in response to that I just posted and took on a new issue on the project to do just that.

Honestly, I thought this would be a task; the ui.bootstrap library already includes an accordion directive which I noticed while working on the modal. So I looked over their example code and tried to plug it in directly into the message table. Unfortunately, it was not that easy; I should honestly assume things will never be that easy, if they were that easy then someone else would have already done them already. Anyways, the directives required me to wrap the accordion cell and its corresponding drop down in the same div. However, I was trying to have the accordion view appear for a table which wasn’t possible with the directive. So I had to build the accordion from scratch.

First, I added a controller to manage the index of the table row clicked and the accordion state.

    .controller('AccordionCtrl', function ($scope) {
       $scope.toggleHiddenRow = function(id, message){
         if (id != $scope.activeRow){
           $scope.activeRow = id;
           $scope.targetMsg = message;
         } 
         else {
           $scope.activeRow = null;
         }
       };
     })

Next I added added click functionality to the table cell.

 <td class="expand"><div highlight="message.message" replacement="init.replaceText" class="pagerMessage" ng-click="toggleHiddenRow($index, message)"></td>

And finally, I included an extra table row that will only appear when $index has a value, which will display all the clicked cell’s details right underneath its row.

          <tr ng-repeat-end ng-show="activeRow==$index">
               <td colspan="7">
                   <div>Date: {{ targetMsg.date }}</div>
                   <div>Time: {{ targetMsg.timestamp }}</div>
                   <% if (!hidesource || login) { %>
                   <div>Source: {{ targetMsg.source }}</div>
                   <% } %>
                   <% if (!hidecapcode || login) { %>
                   <div>Address: {{ targetMsg.address }}</div>
                   <% } %>
                   <div>Agency: {{ targetMsg.agency }}</div>
                   <div>Alias: {{ targetMsg.alias }}</div>
                   <div>Message: {{ targetMsg.message }}</div>
               </td>
           </tr>

With these additions, I got a functioning accordion view without destroying the existing table structure. The implementation would have been much faster if I was not so stubborn about using the angular directives. It’s best to know when to give up, especially if there are alternatives.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website at WordPress.com
Get started
%d bloggers like this: