Skip to main content

2 posts tagged with "Rubber Ducking"

View All Tags

· 3 min read

In this post, I'll demonstrate 2 ways to perform custom sorting. It all happened when a client asked to sort a lookup table/dropdown in a specific order. S -> U -> N

Example:

Statuses:

|id |     name      |
|---|:-------------:|
| 1 | Complete (S) |
| 2 |Dropped out (U)|
| 3 |in progress (N)|
| 4 |Lost Funds (U) |

Usually what I'd do is adding a sort_order column to the table in the database and use it when querying the records. As such,

|id |     name      | sort_order |
|---|:-------------:|:---------- |
| 1 | Complete (S) | 1 |
| 2 |Dropped out (U)| 2 |
| 3 |in progress (N)| 4 |
| 4 |Lost Funds (U) | 3 |

and the query would simply be:

    SELECT *
FROM statuses
ORDER_BY sort_order

This is obviosly the cleanest and the recommended way to approach this problem.

However, in this particular case, we weren't at liberty to make changes to the database design. So, we had to discuss performing the sort at the query time with some other custom methods, OR processing it using JS (The application in question is Node.JS/Angular Application).

Solution1: Custom Order using SQL

The first Solution involved Regular expressions to extract the last bits of the names (S), (N), (U) Which are what will be used in the sorting

SELECT *
FROM statuses
ORDER BY
CASE substring(name from '\([A-Z]\)')
WHEN '(S)' THEN 1
WHEN '(U)' THEN 2
WHEN '(N)' THEN 3
ELSE 5
END

Custom Order by processing the data in JS

Given that we already had a specific criteria for the sort (S -> U -> N), I created a variable sorter of those 3 values along with the corresponding desired order. Javascript sort function allows for custom comparing functions to be used in the sorting process. So, we will be creating this comparing function compare(). What this function basically does, is that it uses the same regular expression to extract the bit with the parantheses, For each element it finds the correspondoing order from the sorter variable and uses that as a comparer.

var compare = function(a, b) {
var sorter = [{value: "(S)", order: 1}, {value: "(U)", order: 2}, {value: "(N)", order: 3}]

var a_status = a.name.match(/\([A-Z]\)/g)
var b_status = b.name.match(/\([A-Z]\)/g)

return sorter.find(function(element) { return element.value == a_status[0]; }).order - sorter.find(function(element) { return element.value == b_status[0]; }).order
}

var sorted = release.sort(compare)
console.log(sorted)

Eventually we opted to the second solution. We use an ORM Node Module and making the custom order in sql wouldn't have been as easy to implement.

Confession:

I totally forgot about adding the sort_order Column until the time I wrote this blog. But again we weren't have been able to use it anyway. Cudos to Rubber Ducking!!!

· 2 min read

One small issue I faced while I was working on my portfolio website, was that I wanted the project modal to be able to open each other. For example. I wanted the portal modal to be able to reference all the other applications and API modals that it’s linked to. The problem was a little compound.

do I want to close the current modal before opening the other modal? Or do I want to stack the modals on top of each other?

Approach 1

What I first found as a solution was to make use of the two tags that bootstrap offers for modals data-dismiss="modal" and data-toggle=“modal”.

<a href="#" data-dismiss="modal" data-toggle="modal">This is the link to the other modal</a>

This worked fine. It closes the portal modal and opens the next modal. BUT for some reason, the second modal wouldn’t scroll. And since the modal background was a little transparent, I could see the page behind the modal scrolling 🤔

Approach 2

Another fast an easy solution was to use JQuery to toggle the modal.

<a id="modalTogglerBtn">This is the link to the other modal</a>
$("modalTogglerBtn").on("click", function(){
$('#myModal').modal('toggle');
});

This did the trick. Not really. The new modal would open and it would scroll. So what was the problem? As I close the modal on top of the stack. The same problem of not being able to scroll on the modal would happen to the first modal.(The one down the stack).

Here’s the problem then, something with the modal messes the scrolling up and transfer it from the modals back to the body.

Approach 3 (The Solution) 🎉

So here’s what I found out. Bootstrap, upon the creation, adds a modal-open class to the body tag. This class is what causes the scrolling behavior to be focused in the modals rather than the body itself. As we would close the top modal, bootstrap would remove that class from the body tag. That's why neither of the first approaches worked. So we need a why or a mechanism to check for open modals first before removing that tag.

$(document).on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});

The hidden.bs.modal is invoked when the modal is fully hidden (after CSS transitions have completed) Ref.JavaScript · Bootstrap . Modal Events