# Dynamic Dialog
This component is found under src/dialogs and not under the normal components.
The reason for this is that when you have custom dialogs, they act as view models fort servivces and not as custom elements.

In dynamic forms you may need a dialog who's contenty is also dynamic and can be build up externally.
A example of this is executing actions from rest services that require properties.
These properties vary and it is better to have a dynamic dialog so that you don't need to hand craft every instance.

## Usage
To use the dialog you will need to import:
1. Aurelia dialog service
2. Dynamic Dialogs

```js
import {bindable, inject} from "aurelia-framework";
import {EventAggregator} from 'aurelia-event-aggregator';
import {DialogService} from 'aurelia-dialog';
import {DynamicDialog} from './../../dialogs/dynamic-dialog/dynamic-dialog';
import {DynamicSchemaFieldItem, DynamicSchemaItem} from "../../lib/dynamic-schema";

@inject(EventAggregator, DialogService)
export class DynamicDialogView {
    constructor(eventAggregator, dialogService) {
        this.eventAggregator = eventAggregator;
        this.dialogService = dialogService;
    }

    showDialog() {
        const model = {
            title: "My Dialog",
            model: {
                name: "Johan Rabie"
            },
            details: [
                new DynamicSchemaItem("Name", "name", new DynamicSchemaFieldItem("string", "50"))
            ]
        };

        this.dialogService.open({viewModel: DynamicDialog, model: model}).then(openDialogResult => {
            console.log(openDialogResult);
        })
    }
}
```

The dialog service is injected to the view model you want to use it in.
When you want to show the dialog, you need to call the open function of the service providing the viewmodel and model.
The view model in this case is always the DynamicDialog class and the mode representing the context and contenty for the dynamic dialog.
The test of this documentation will focus on what the content is and how to define the model.

## Model

### Title
This property defines the title that will show at the top of the dialog.

### Model
This model is the binding context to be used. The input controls on the dialog needs to bind against a data model and this model defines the data model to bind against.

### Details
The details is a array of dynamic schema items. These items define what kind of input will be shown in the dialog.
DynamicSchemaItem has three properties that you must define.

1. What title to show in the label of the input.
2. The field name to bind against on the input.
3. The data type for this detail item.

There are three basic data types.

1. DynamicSchemaFieldItem - normal field type input
2. DynamicSchemaCollectionItem - collection input using a html select as input device
3. DynamicSchemaReadonlyItem - read only item for display purposes only

In all the data types you don't need to do anything more than construct them and add them to the DynamicSchemaItem.
There are some things to take note of though.

#### Using DynamicSchemaFieldItem
Constructing this item requires you to define

1. type
2. format

The possible types are defined as following:

1. "string"
2. "number"
3. "date"
4. "duration"

Depending on the type that you have defined, you may or may not need to define the format.

1. "string" -> format = length between 0 and N. If length is > 100 this represents a memo instead of a input.
2. "number" -> format = N/A
3. "date"   -> format = "date", "time", "datetime"
4. "duration" -> N/A  is alsways HH:MM:SS

Both of these properties are defined as string values.
e.g.
```js
new DynamicSchemaFieldItem("string", "50")
```

#### Using DynamicSchemaCollectionItem
Constructing this item requires the field name to be used as the datasource for the items to show in the dropdown.

e.g.
```js
new DynamicSchemaCollectionItem("collection");
```

The important thing to note here is that the datasource collection is define as an array of:
```js
{
    id: value,
    text: display text
}
```

e.g.
```js
const model = {
    value: "a",
    values: [
        {
            id: "a",
            text: "Alpha"
        },
        {
            id: "b",
            text: "Beta"
        }
    ]
}


new DynamicSchemaItem("My Value", "value", new DynamicSchemaCollectionItem("values")),
```



#### Using DynamicSchemaReadonlyItem
This is a easy one because it has a paramter less constructor.
