netlify[bot]
commented
6 days ago Deploy Preview for authentik-docs ready!
| Name | Link |
|---|---|
| Latest commit | e89585eb6465c0921387bc092a6626a9de0c80a1 |
| Latest deploy log | https://app.netlify.com/sites/authentik-docs/deploys/6740b16a7cd7950008e55b9e |
| Deploy Preview | https://deploy-preview-12051--authentik-docs.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
codecov[bot]
github-actions[bot]
web/bugfix/dual-select-full-options
What
How
In the previous iteration, each dual select controller gets a provider and a selector; the latter keeps the keys of all the objects a specific instance may have, and marks those objects as “selected” when they appear in the dual-selects “selected” panel.
In order to distinguish between “selected on the existing instance” and “selected by the user,” the selector only runs at construction time, creating a unified “selected” list; this is standard and allows for a uniform experience of adding and deleting items. Unfortunately, this means that the “selected” items, because their displays are crafted bespoke, are only chosen from those available at construction. If there are selected items later in the paginated collection, they will not be marked as selected.
This defeats the purpose of having a paginated multi-select!
The correct way to do this is to retrieve every item for which the key is passed to the selector and use the same algorithm to craft the views in both windows.
For every instance of Dual Select with dynamic selection, the provider and selector have been put in a separate file (usually suffixed as a
*FormHelper.tsfile); the algorithm by which an item is crafted for use by DualSelect has been broken out into a small function (usually named*toSelect()). The provider works as before. The selector takes every instance key passed to it and runs aPromise.allSettled(...*Retrieve({ uuid: instanceId }))on them, mapping them onto theselectedcollection using the same*toSelect(), so they resemble the possibilities in every way.Lessons
This exercise emphasizes just how much sheer repetition the Django REST API creates on the client side. Every Helper file is a copy-pasta of a sibling, with only a few minor changes:
There are 19
*FormHelperfiles, and each one is 50 lines long. That’s 950 lines of code. Of those 950 lines of code, 874 of those lines are complete duplicates of those in the other FormHelper files. Only 76 lines are unique.This language really needs macros. That, or I need to seriously level up my Typescript and figure out how to make this whole thing a lot smarter.
make web)