User management fields

[brady-lamansky-gtt]

@cairocoder01 This resolves #2847 to replace user management fields w dt-web-components.
Please specifically look at the syntax and formatting of my changes to make sure it's what you're looking for!

[cairocoder01]

This is a great start. See the specific code comments, but there are also some functional issues:

• When using the new user form, the submit doesn't work because it returns an API error
• When changing fields of an existing user, they don't automatically save like they used to. We need to hook up the code to capture change events and trigger the API requests
• Those will probably require js changes. Try to find the js code that was specific to the old form fields and remove it as you implement the new code for the components.

[brady-lamansky-gtt]

I changed the tracked inputs for the change() function. Is this the correct way to do it? This allows the fields to autosave properly when editing a user.
However, it was also being run when creating a new user, which caused an error when calling update_user, so I added a check. Is this the correct way to handle this?

[cairocoder01]

So this file is loaded on both the new user and update user pages, right? Since the loading spinner never needs to show up on the new user page, we could wrap this whole change event handler in your conditional of window.current_user_lookup; the new user page doesn't need to even handle the change event.

You'll need to do the same thing for the single-select code after this since the loading spinner is showing on the new user page.

And instead of handling each component type separately, you could copy this code from the component service and handle them all together. You can just supply your own change event handler.

enableAutoSave(selector) {
    const allElements = document.querySelectorAll(
      selector || this.autoSaveComponents.join(','),
    );
    if (allElements) {
      allElements.forEach(el => {
        el.addEventListener('change', this.handleChangeEvent.bind(this));
      });
    }
  }

[cairocoder01]

Also, if we're going to show the loading icons for the update user page, we should also show the saved icon when it succeeds and catch errors to show the errors.

[brady-lamansky-gtt]

Sounds good! When wrapping my code in if (window.current_user_lookup) {...}, the loading no longer works. It looks like, when the page loads, window.current_user_lookup doesn't yet have a value. Is putting the check right inside the function alright, or do you have another suggestion?

[cairocoder01]

Ah, ok. That's right, it won't be there at load time because the individual user is loaded into a modal after the initial page load. You can put the check inside like you suggested. The other option is to look for the method that opens the edit user modal and initialize the event there. The thing you will have to watch for is registering the event multiple times if you click to open multiple users in one session. You can either check if an event listener is already attached or remove the previous event listener before you add a new one.

[brady-lamansky-gtt]

I updated the PR with the check for now! I'll look into what the other option would look like later as well. We're just about done with the project for the Japanese internship, so I'll have more capacity after it ends this coming Wednesday. Thanks for all the help

[cairocoder01]

• We've lost the spacing in between the fields and the following label. See image below. Green is good, red is bad and needs to match green.

[cairocoder01]

Looking better.

• We still need the margin adjustments on the user management page for editing existing users.
• I found a weird issue when editing users. I set the gender of a user to Female (had been blank), and then when I opened up any other user, it also showed Female even though they should have been blank. I'm having trouble reproducing it again after setting those values.
• Related to that, as I was trying to reproduce it, I also had a situation where I changed another user to Male from blank, it saved, I closed to modal and then opened the same user, but the gender was blank again. If I refreshed the page, it correctly showed Male. I think whatever js is loading the modal had the original value instead of the updated one.

[brady-lamansky-gtt]

Just fixed those bugs! Let me know any other suggestions. For the Gender bug, I realize it was because I had 'select_cannot_be_empty' => true even though the field was supposed to be optional.