Skip to content

Commit

Permalink
feat: Added support for multi selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheSlimvReal
TheSlimvReal authored Mar 25, 2022
1 parent 6259604 commit b43ab66
Show file tree
Hide file tree
Showing 9 changed files with 193 additions and 109 deletions.
218 changes: 119 additions & 99 deletions doc/compodoc_sources/concepts/configuration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ Config is currently stored in the normal app database with the fixed _id `"_id":
This document in the database has to contain a single property `data` that holds the config object whose parts are described here.

Example:
```
```json
{
"_id": "Config:CONFIG_ENTITY",
"data": {
Expand Down Expand Up @@ -75,25 +75,25 @@ The top level entry `navigationMenu` builds the visible and clickable items for
Each navigation menu item object has to have the three properties `name`, `icon` and `link`. `name` hold the inscription of the item in the navigation menu in the app, `icon` indicates the little icon picture that is shown before the textual inscription of the item in the navigation menu and `link` contains the URL or view that the user is directed to when clicking on the navigation menu item. For every link given, there necessarily has to be a corresponding view-entry on the top level of the config file.

Example:
```
```json
"navigationMenu": {
"items": [
{
"name": "Dashboard",
"icon": "home",
"link": "/"
},
{
"name": "Children",
"icon": "child",
"link": "/child"
},
...
{
"name": "Help",
"icon": "question-circle",
"link": "/help"
}
{
"name": "Dashboard",
"icon": "home",
"link": "/"
},
{
"name": "Children",
"icon": "child",
"link": "/child"
},
...
{
"name": "Help",
"icon": "question-circle",
"link": "/help"
}
]
},
```
Expand All @@ -118,25 +118,25 @@ The Dashboard-Component for example takes as `"widgets:"` an array of subcompone

Example:

```
```json
"view:": {
"component": "Dashboard",
"config": {
"widgets": [
{
"component": "ChildrenCountDashboard"
},
{
"component": "RecentNotesDashboard"
},
{
"component": "NoRecentNotesDashboard",
"config": {
"sinceDays": 28,
"fromBeginningOfWeek": false
}
},
...
"component": "Dashboard",
"config": {
"widgets": [
{
"component": "ChildrenCountDashboard"
},
{
"component": "RecentNotesDashboard"
},
{
"component": "NoRecentNotesDashboard",
"config": {
"sinceDays": 28,
"fromBeginningOfWeek": false
}
},
...
```

#### List components
Expand All @@ -150,19 +150,19 @@ The configuration for the columns happens with the [FormFieldConfiguration](../.
If all the information is available on the schema or through the datatype of a property, it is sufficient to put a string with the name of the property into the columns array.

Example:
```
```json
"view:child": {
"component": "ChildrenList",
"config": {
"title": "Children List",
"columns": [
"projectNumber",
{
"view": "ChildBlock",
"label": "Name",
"id": "name"
},
...
"component": "ChildrenList",
"config": {
"title": "Children List",
"columns": [
"projectNumber",
{
"view": "ChildBlock",
"label": "Name",
"id": "name"
},
...
```

The `"columnGroup"` object holds the three properties `"default"`, `"mobile"` and `"groups"`.
Expand All @@ -173,28 +173,28 @@ If `"default"` or `"mobile"` is not defined, the first entry of `"groups"` will
Properties that are listed in any of the `groups` arrays and don't require further configurations, can be omitted from the `columns` array, the `EntityListComponent` will automatically add them.

Example:
```
"columnGroup": {
"default": "School Info",
"mobile": "Mobile",
"groups": [
{
"name": "Basic Info",
"columns": [
"projectNumber",
"name",
...
"status"
]
},
{
"name": "School Info",
"columns": [
"projectNumber",
"name",
...
]
},
```json
"columnGroup": {
"default": "School Info",
"mobile": "Mobile",
"groups": [
{
"name": "Basic Info",
"columns": [
"projectNumber",
"name",
...
"status"
]
},
{
"name": "School Info",
"columns": [
"projectNumber",
"name",
...
]
},

```

Expand All @@ -207,23 +207,23 @@ The prebuilt option is used to enable or disable filters that contain more logic
This option requires the fields `"type"` and `"id"`, where `"id"` matched the `id` of a prebuilt filter inside a component.

Example:
```
"filters": [
{
"id": "language"
},
{
"id": "privateSchool",
"default": "all",
"true": "Private School",
"false": "Government School",
"all": "All"
},
{
"id": "date",
"type": "prebuilt"
},
]
```json
"filters": [
{
"id": "language"
},
{
"id": "privateSchool",
"default": "all",
"true": "Private School",
"false": "Government School",
"all": "All"
},
{
"id": "date",
"type": "prebuilt"
},
]
```

#### Detail components
Expand All @@ -240,7 +240,7 @@ The entity will then be loaded using the entity name and the id which is read fr
The `"panels"` field expects an array of panel definitions.
Each panel has a `"title"` and an array of `"components"`.
The component configuration requires another `"title"`, the `"component"` that should be rendered (the component has to be defined here [OnInitDynamicComponent](../../interfaces/OnInitDynamicComponent.html)) and a configuration (`"config"`) which is passed to this component.
```
```json
"config": {
"icon": "child",
"entity": "Child",
Expand Down Expand Up @@ -282,7 +282,7 @@ The definitions for the columns is defined by the [FormFieldConfiguration](../..
However, the schema definitions of the entity should be sufficient so that only the names of the properties which should be editable in the form have to be provided.
This means instead of placing an object in the `cols` array, simple strings do the same job.

```
```json
"config": {
"cols": [
[
Expand All @@ -309,7 +309,7 @@ This should only be set to `true`, when the use-case only allows one active sch
The configuration is according to the [EntitySubrecordComponent](../how-to-guides/entity-subrecord-component.md);

Example:
```
```json
"config": {
"single": true,
"columns": [
Expand All @@ -331,7 +331,7 @@ The attribute field allows to add attributes to an entity:
Each attribute requires a `"name"` and a `"schema"` which refers to the entity [schemas](entity-schema-system.md).

Example:
```
```json
"entity:Child": {
"attributes": [
{"name": "address", "schema": { "dataType": "string", "label": "Address" } },
Expand All @@ -348,7 +348,7 @@ Permissions for interaction on entities can be given or denied using the config.
This will disable buttons in the app to create, delete or edit entities if the user is not permitted.

The following example will only allow `admin` users to create, edit and delete `School` objects:
```
```json
"entity:School": {
"permissions": {
"create": ["admin"],
Expand All @@ -358,7 +358,7 @@ The following example will only allow `admin` users to create, edit and delete `
}
```
Buttons can be marked as part of an interaction using the `appDisableEntityInteraction` directive:
```
```html
<button
(click)="switchEdit()"
*appDisableEntityOperation="{entity: entity?.getConstructor(), operation: operationType.UPDATE}"
Expand All @@ -379,7 +379,7 @@ The `"id"` should always stay the same as it is written to the database and iden
This text may be changed without any negative effect to data consistency and the change will instantly be visible in all saved entries of this type.

Example:
```
```json
"enum:project-status": [
{
"id": "ACTIVE",
Expand All @@ -393,15 +393,15 @@ Example:
"id": "DROPPED",
"label": "dropped out of the programme"
}
}
]
```

#### Defining configurable enum properties

In order to use such an "enum" in entity fields, you need to set the schema datatype and the form type in the according config objects:

In the entity, set the dataType to "configurable-enum" and the "innerDataType" to the id of the enum config:
```
```json
"entity:Child": {
{"name": "status", "schema": { "dataType": "configurable-enum", "innerDataType": "project-status" } }
...
Expand All @@ -410,7 +410,7 @@ In the entity, set the dataType to "configurable-enum" and the "innerDataType" t
#### Display a configurable enum property in the list view

In the List View columns config, use the "DisplayConfigurableEnum" component for the field:
```
```json
"columns": [
{
"component": "DisplayConfigurableEnum",
Expand All @@ -425,7 +425,7 @@ In the List View columns config, use the "DisplayConfigurableEnum" component for

In the Details View config for a "Form" component, use the "configurable-enum-select" input type
and additionally define the "enumId" of the enum config it refers to:
```
```json
"component": "Form",
"config": {
"cols": [
Expand All @@ -435,9 +435,29 @@ and additionally define the "enumId" of the enum config it refers to:
"input": "configurable-enum-select",
"enumId": "project-status",
"placeholder": "Status"
},
}
]
]
}
```

#### Allowing multi select

A property can also be defined in a way that multiple values can be selected.
To allow multiple selection, the `dataType` needs to be `array`, the `innerDataType` `configurable-enum` and the name of the configurable enum has to be in the `additional` field.
The following example creates a property `materials` where multiple values from the `materials` configurable enum can be selected.

```json
{
"name": "materials",
"schema": {
"dataType": "array",
"innerDataType": "configurable-enum",
"additional": "materials",
"label": "Materials"
}
}
```

#### Defining Note interaction types
There are a few specially built-in types of enums.
Expand Down
18 changes: 18 additions & 0 deletions src/app/core/configurable-enum/configurable-enum-datatype/configurable-enum-datatype.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@ describe("ConfigurableEnumDatatype", () => {
innerDataType: "test-enum",
})
option: ConfigurableEnumValue;
@DatabaseField({
dataType: "configurable-enum",
additional: "test-enum",
})
optionInAdditional: ConfigurableEnumValue;
}

let entitySchemaService: EntitySchemaService;
Expand Down Expand Up @@ -95,4 +100,17 @@ describe("ConfigurableEnumDatatype", () => {

expect(rawData.option).toEqual(testOptionKey);
});

it("should also support the name of the enum in the 'additional' field", () => {
const data = {
_id: "Test",
optionInAdditional: "TEST_3",
};
const entity = new TestEntity();

entitySchemaService.loadDataIntoEntity(entity, data);

expect(entity.optionInAdditional).toEqual(TEST_CONFIG[2]);
expect(entity.getId()).toBe("Test");
});
});
2 changes: 1 addition & 1 deletion src/app/core/configurable-enum/configurable-enum-datatype/configurable-enum-datatype.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export class ConfigurableEnumDatatype
value: string,
schemaField: EntitySchemaField
): ConfigurableEnumValue {
let enumId = schemaField.innerDataType;
let enumId = schemaField.additional || schemaField.innerDataType;
if (!enumId.startsWith(CONFIGURABLE_ENUM_CONFIG_PREFIX)) {
enumId = CONFIGURABLE_ENUM_CONFIG_PREFIX + enumId;
}
Expand Down
2 changes: 1 addition & 1 deletion src/app/core/configurable-enum/edit-configurable-enum/edit-configurable-enum.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<mat-label>
{{ label }}
</mat-label>
<mat-select [formControlName]="formControlName">
<mat-select [formControlName]="formControlName" [multiple]="multi">
<mat-option *appConfigurableEnum="let o of enumId" [value]="o">
{{ o.label }}
</mat-option>
Expand Down
Loading

0 comments on commit b43ab66

Please sign in to comment.