samedi 5 janvier 2019

Create a labelling system like Gmail in Angular

I'm creating a labelling system in an Angular application which is to have the same functionality as Gmail.

The Stackblitz of my progress is here: https://stackblitz.com/edit/angular-3bbutx

Background

The application has a list of clients which can have n number of labels applied to them. They can then be filtered by these labels. At first look this seamed like a simple process of pushing and splicing from arrays and then applying those labels in the API etc. However, there seems to be a number of issues that I'm struggling with.

Required Behaviour

  1. User selects clients - app shows labelling options and pre-selects the labels which are already present on those clients.
  2. User selects labels and clicks apply. This compares the original filters and packages up an object of added, removed labels and a list of clients to apply those changes to.

Edge Cases / Issues

  1. Gmail uses a checkbox intermediate (a dash in a checkbox) in the case of the selected items having some of the labels applied, but not all, this can then be toggled to apply to all or remove from all. This is one of my biggest issues at the moment, how to manage this behaviour
  2. Ensuring that the initial state and final state are checked for added / removed items is proving to be beyond my skillset.

Previous Research

I note there are similar questions on design patterns for C# and Rails Implement Gmail-like labels in a Rails app however nothing which actually implements this in code. I've also searched for libraries which may be able to perform such functionality to no avail.

Any direction or guidance on how to tackle this would be greatly appreciated.

Aucun commentaire:

Enregistrer un commentaire