Refactor certain filters into its own service

[Arif-Khalid]

Summary:

Fixes part of #249

Type of change:

• 🎨 Code Refactoring

Changes Made:

• Refactored a few filters into their own service
• Does not break any behaviour for other filters
• Other filters will be refactored in another PR to reduce the size of this one
• Refactored following filters
  • Selected labels
  • Hidden labels
  • Status
  • Type

Proposed Commit Message:

Filters are observed, subscribed and emitted in many different 
components.

This makes the code base hard to understand
and adapt for filtering in future components.

Let's refactor the filters into its own centralised service

Checklist:

• I have tested my changes thoroughly.
• I have created tests for any new code files created in this PR or provided a link to a issue/PR that addresses this.
• I have added or modified code comments to improve code readability where necessary.
• I have updated the project's documentation as necessary.

[NereusWB922]

LGTM! Tested the updated status, type, and label filters, and they are working.

[NereusWB922]

LGTM!

[vigneshsankariyer1234567890]

Seems like there's duplication of the logic when updating dropdownFilter itself. For instance, updateSelectedLabels is in essence doing the same thing as updateHiddenLabels and even the other methods: to update the right property. Instead, maybe we could follow a pattern of composition using the Partial<T> API in TypeScript?

This could look something like this:

updateFilters(newFilters: Partial<DropdownFilter>): void {
  this.dropdownFilter$.next(
    ...this.dropdownFilter$.value,
    ...newFilters,
  ),
}

Then after we update, we can check our rules for updating the status and type.

Consumers would then simply pass some filters that they want to change in the components themselves.

[Arif-Khalid]

Agreed. This is a type I was not aware of, it is perfect in this situation.
I have made the appropriate changes.

[vigneshsankariyer1234567890]

As per my earlier comment, the change here would be something like

<mat-select [value]="this.dropdownFilter.type" (selectionChange)="this.filtersService.updateFilters({type:$event.value})">

[vigneshsankariyer1234567890]

So far functionality seems ok! Just a small change requested to the Filters Service :)

[gycgabriel]

Looks neat, thanks for the refactor. Let's wait for vignesh approval

[vigneshsankariyer1234567890]

LGTM 🔥 🚀 changes look great with the addition of the pipe!