Improve UI for assigning customers to drivers

[thmsdnnr]

1. Login as an Admin. (admin@example.com / password)
2. Delivery > Route Assignment.
3. Once there, select a driver from the card list at the top.

• Note how it updates the SELECT dropdown element:
  E.g., Click “Kevin Stanton” card, and the Customers Assigned To: dropdown changes to “Kevin Stanton”.
• But it doesn’t work the other way.

4. Select “Pink Boyle” from the dropdown. The customers list updates but the card does not.

Not a huge deal, but it's probably a fairly simple fix & valuable from a usability perspective. As is, I could see a user getting confused, since you don't know which driver you're viewing.

[kenjiO]

I think this is intentional. The functionality would be for if you have a driver and you want to move the customers from another driver to this driver. @jspaine, is this what you intended when you made this?

[thmsdnnr]

Ah, that makes sense: since there's no 'un-assign' button, if we made the card match the dropdown, you couldn't ever switch assignments. Probably can close as not an issue unless @jspaine disagrees!

[jspaine]

Yeah, you can unassign by unchecking customers and clicking 'Assign selected' but it would be really awkward to switch assignments like that.

I think it might be better to just unlink the filter from the driver selection. The selected customers change when you select a driver anyway so it's easy enough to see where that drivers customers are. It would make assigning customers much easier, you could just set the filter to unassigned, choose a driver, assign some, choose another driver etc.

We can just turn this into an issue for that maybe, if it sounds good?

[thmsdnnr]

That would make sense.

One thing I thought (this is probably a separate thing totally) — it's a little bit unexpected to me when you click "Assign Selected" and it unassigns all drivers that you haven't checked.

What if we did something where:

• If the filter name doesn't match the driver card name, then the button is "Assign Selected" and works as it does currently.
• If the dropdown filter name matches the driver card, and you check one or more customers, we have that button text conditionally change to "Unassign Selected". So rather than checking the ones you want to keep and clicking "Assign Selected" (it removing the un-checked customers), it will remove the ones you check, and update the button action to be clearer about whether we're adding or removing people.

Either this, or make a "Remove Button" in each row next to the assigned customers, if that makes sense? I just get a little confused as to whether it's going to add or remove based on the button text.

Please let me know if you think might be a good idea, and whether I should close this + create a new issue or just edit this one. I could update this to be "unlink filter from driver cards", & then if you like my idea for Assign/Unassign, I could break that out into a separate issue to add if it's easier.

[jspaine]

I'm not sure, what if you select some customers assigned to the driver and some unassigned customers, what would the button do?

How about calling the button Update Assigned Customers (ugh it's too long!) and have it go to a dialog that asks you to confirm and gives more info, eg
"Are you sure you want to update [driver name's] assigned customer list?
3 customers to be added, 2 to be removed"

[kenjiO]

I tried adding more customers and drivers to better approximate real usage of the application and the form was harder to use with the long lists of drivers and customers. It also would be quite slow and became unresponsive at times. So we should address these issues when making changes. I pushed a branch named "more-seed-data" to the repository that you can use to try it with more data. It will use a different database name (fb-dev2) and seed it with new data including 50 drivers and 800 customers.

[thmsdnnr]

Hey @jspaine — good points! My idea was to make it so that the case you mention couldn't happen: where you select some customers assigned to the driver at the same time as you select some unassigned customers.

The idea would be that the button only changes if the Dropdown Filter name matches the name on the Driver Card, and you select one or more customers. If the filter doesn't match the driver card, we don't change the button text. This way you can only select drivers that are currently assigned.

There'd be two ways to remove a customer from a driver, then:

1. Checking the customer when you are on the driver card and clicking this new "Remove Customer" button

2. Going to a different driver card (say driver B), changing to customers that driver A has, checking one of them, and clicking "Assign Customer". This would remove that customer from driver A and assign the customer to driver B.

[thmsdnnr]

@kenjiO — thanks so much! I've been very busy with work lately but will take a look as soon as I have time. Would you like me to write up a separate issue to track the list performance?

[jspaine]

Ok, it does sound like it might be good!

@kenjiO hehe it's... not quite as bad as I expected! Seems the map causes most of the slowness.

[kenjiO]

I think it would be good to keep it in this issue to keep this discussion. I'll just edit the issue title.

[ehoops-zz]

@jspaine I would like to work on this. My plan is to write out which workflows make sense before making code changes. I'll post something here and see what you think.

I also see that this was referenced in #131. The changes I am imaging should be confined to how customers are added to routes and not interfere with the route state, which I think would be used for printing. Let me know if there are concerns about this.

[jspaine]

Sounds good, let us know if you need anything.

131 is another way for drivers to use their assigned route (by downloading in satnav format instead of loading in google maps) so it has nothing to do with this issue.

[ehoops-zz]

Sorry, some stuff came up and I don't have time to work on this right now. Just commenting in case someone else is interested in taking this on.