Dev Log: July 08 Wrap-up

Overview

Today was all about improving the user experience on our dashboard modules. I spent most of my time working on the active filter overlays for both the sales and helpdesk views, specifically making them draggable so they don't get in the way of the actual data.

What I Worked On

Making UI components more flexible

One of the small but frequent complaints I’ve noticed is that our floating 'Active Filters' dialogs can sometimes block the very charts people are trying to analyze. To fix this, I implemented some custom drag-and-drop logic. I wanted to give it that 'Data Studio' feel where the overlay stays visible but can be tucked away into a corner of the screen if needed.

I ended up using mousedown events on the header to initiate the drag and a HostListener to track the mouse movement across the document. It took a bit of fiddling with the offsets to make sure the dialog didn't 'jump' the moment you clicked it, but getting the movement to feel smooth and responsive was worth the extra effort.

Here’s a simplified version of the logic I used to track the position:

// Calculating the offset so the drag feels natural
public onDragStart(event: MouseEvent): void {
    this.isDragging = true;
    this.startX = event.clientX - this.initialLeft;
    this.startY = event.clientY - this.initialTop;
}

@HostListener('document:mousemove', ['$event'])
public onDragMove(event: MouseEvent): void {
    if (this.isDragging) {
        this.currentLeft = event.clientX - this.startX;
        this.currentTop = event.clientY - this.startY;
        
        this.overlayStyle = {
            left: `${this.currentLeft}px`,
            top: `${this.currentTop}px`
        };
    }
}

Refining the Sales Dashboard filters

While I was in there, I also cleaned up how the region selection works in the sales module. Previously, the filter chips were just showing a generic count of selected items. I updated the logic to be a bit more descriptive. It’s a minor change, but it makes the 'Active Filters' list much more readable at a glance instead of forcing the user to reopen the dropdown to see what they actually selected.

Wrapping Up

It’s satisfying to work on these kinds of quality-of-life updates. They aren't major architectural shifts, but they make the application feel much more polished and professional. Tomorrow, I’ll probably do a final pass to make sure the drag boundaries are contained within the viewport so users don't accidentally drag the dialog off-screen. Catch you then.