diff options
| author | Francesco Borzì <borzifrancesco@gmail.com> | 2021-05-18 21:01:05 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-05-18 21:01:05 +0200 |
| commit | 938514f0de5a97986faaf5a672956d2b1f41e12e (patch) | |
| tree | 54a634092162e6011265557e88a9de86297e4203 /docs | |
| parent | f470d2c070bb57dfffab32614503bb78d4f6a03e (diff) | |
| download | wiki-938514f0de5a97986faaf5a672956d2b1f41e12e.tar.gz wiki-938514f0de5a97986faaf5a672956d2b1f41e12e.tar.bz2 wiki-938514f0de5a97986faaf5a672956d2b1f41e12e.zip | |
docs(Keira3): add selectors documentation (#487)
* docs(Keira3): add selectors documentation
* Update keira3-internals.md
* Update keira3-internals.md
* Update keira3-internals.md
* Update keira3-internals.md
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/keira3-internals.md | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/docs/keira3-internals.md b/docs/keira3-internals.md index 9070024..d080bde 100644 --- a/docs/keira3-internals.md +++ b/docs/keira3-internals.md @@ -154,3 +154,100 @@ Handlers are services responsible for holding statuses such as: Group of editors that refer to the same main entity should share **one Handler**. For example, all Creature Editors refer to the `CreatureHandlerService`, all Quest Editors refer to the `QuestHandlerService`, and so on... All Handlers classes extend the `HandlerService` abstract class. + +## Selectors + +There are several kinds of selectors which allow the user to easily select a value for a given field. + +Selectors are typically available to the user by clicking on the button with three dots: + + + +There are three main types of selectors, listed below. + +### SingleValueSelectorBtnComponent + +The `SingleValueSelectorBtnComponent` is a reusable component which can be used to allow the user to select a **single value** from a list of values, for a given field. + +Let's check for example the `exp` field of `creature_template`, allowing to specify ONE value: + +``` +0 - Classic +1 - TBC +2 - WOTLK +``` + +All you have to do to implement such selector is first definying the list values by creating an array of `Option`: + + + +All the options are located in `src/app/shared/constants/options` so you just need to create a new file like the above. + +You then need to import the array of options, in this case `EXPANSIONS`, in the `.ts` file of your component and declare it as `PUBLIC READONLY` in order to make it available for the component's template: + + + +Now you can use it in the `.html` template of the component by adding the `keira-single-value-selector-btn` html element and passing the following properties: + +- `[control]` the form control, example `editorService.form.controls.exp` (note: `exp` is the name of the field) +- `[config]` an object specifying the `options` and `name` property +- `[modalClass]` the class of the modal, so you can change the modal size, e.g. `modal-md` or `modal-lg` (optional) + + + +This is the result: + +<img src="https://user-images.githubusercontent.com/75517/118694803-c1794280-b80c-11eb-9099-00758983ca2e.png" width=300> + +<img src="https://user-images.githubusercontent.com/75517/118694841-cf2ec800-b80c-11eb-8719-b770a7fd0c98.png" width=500> + +### FlagsSelectorBtnComponent + +The `FlagsSelectorBtnComponent` is another very useful reusable component which allows the user to compose a value from a set of **flags** (bitmask), for a given field. If terms like bits, bitmask, flags, etc.. sounds weird to you, we recommend to read [this page](https://www.azerothcore.org/wiki/Bit-and_bytes-tutorial) to fully understand how flag values work. + +Let's see, for example, how the field `dynamicflags` of `creature_template` is implemented. + +First you need to define the the list of (bit) values by creating an array of `Flag`: + + + +All the flag values are located in `src/app/shared/constants/flags` so you can create a new file there, for example `dynamic-flags.ts` in our case. + +Basically you need to define what's the meaning of every single bit. Don't forge that bits typically start from zero. + +Then you need to import the `DYNAMIC_FLAGS` array in the component's `.ts` file and make it available for its `.html` template by declaring it `PUBLIC READONLY`: + + + +Now you just need to use it in the html by adding the `keira-flags-selector-btn` component there: + + + +The attributes for this component are: + +- `[control]` the form control, example `editorService.form.controls.dynamicflags` (note: `dynamicflags` is the name of the field) +- `[config]` an object specifying the `options` and `name` property +- `[modalClass]` the class of the modal, so you can change the modal size, e.g. `modal-md` or `modal-lg` (optional) + +This is the result: + +<img src="https://user-images.githubusercontent.com/75517/118697264-685ede00-b80f-11eb-9609-6b4af903bcdc.png" width=300> + + + + +### Other selectors + +There are other selectors that allow the user to select values by doing a search either in the DB or in the DBC contained in the sqlite integrated in Keira3. + +You can find their implementations in `src/app/shared/modules/selectors` as well as examples of usage around the app. + + + +Example: the **item-selector**. + + + +You can use it whenever an Item ID is needed: + + |