# SmartIT Customization

## Modules

- [gtw](./src/modules/gtw)
- [parent acitivities](./src/modules/parentActivities)
- [Admin Designer](./src/modules/adminDesigner)

## How to write a custom module

**1 Create file**
Create a ``.js`` class and extend ``ntt.smartit.api.ICustomModule``.

    export class gtwModul extends ntt.smartit.api.ICustomModule { ... }
    
**2 Needed functions**

**`name()`**

The return value needs to be the name of the module.

**`injectTemplates()`**

The function `injectTemplates()` in specifies the attributes/options for the template injection in a JSON-like format and returns them.

At first, the url of the template you want to modify needs to be set. After that, a set aof attributes of that template can and shall be passed.

    injectTemplates() {
        return  {
		    "views/ticket/task-details-v2.html":  [{
                <attributes>
            }]
        }
    }



Following Attributes can be used:
* ``method``
* ``mode``
* ``type``
* ``attributes``
* ``selector``
* ``snippet``
* ``template``


``method`` 

The method specifies the method the template is modified. Currently supported methods are:
* ``add`` - _adding non-existing components to the template_
* ``replace`` - _replacing already existing components in the template_


``mode``

The mode lets you chose which parts of the template you want to modify. Currently supported modes are:
* ``full`` (automatically triggers ``replace``) - _this allows you to replace the whole template_
* ``partial`` - _allows you to manipulate just a part of the template_
* ``attribute`` - _allows you to manipulate just the attributes of the HTML element_


``selector``

In the selector you specify which element should be manipulated.

**No selector needed when:** ``replace full``

The selector can be a keyword such as the id/name of the HTML element.

The selector can also be a function. The language of the function then needs to specified in the ``type`` attribute.

Example **JQuery function selector**:

        selector: function($jqueryTemplate) {
            return $jqueryTemplate.find('element-name/id');
        },


``type``

As stated above, if the selector is a function, the corresponding language needs to be specified.

    type: "jquery",


``snippet``

If the ``mode`` is set to ``partial`` you have to provide the code, which will be inserted.

    snippet: '<a item-id="ticket"></a>',
        

``attributes``

This lets you manipulate the attributes of the HTML element. This only works if the ``method`` is set to ``attribute``.
This attribute lets you replace and add at the same time. Following format is needed to ensure that no errors occur (multiple attributes are supported):

    attributes: {
        "replace": {
            "<attrribute-name>": "<attribute-value>"
        },
        "add": {
            "<attrribute-name>": "<attribute-value>"
        }
    },


``template``

If ``mode`` is ``full`` a template needs to be provided which will then replace the whole template. The template is a path to a HTML file.

**`templates()`**

todo

**`i18nLocales()`**

todo

**3 Pushing Module into Module List**

In order for the Module to be implemented it needs to be pushed intop the Module List.

    ntt.smartit.api.nttSmartitModules.push(new <Module>());

**4. Create a controller _(optional)_**

If extra functionality is needed, create a ``controller.js`` and ``require`` the controller in the ``module.js``. (Don't forget to add the controller to the wanted HTML element in order for the controller to work).

**5. Insert into index.html**

The created module has to be added to the SmartIT ``index.html``. connect to Server and add your Module in form of ``<script..``>. Prerequisite is, that ``NTTDATA/modules/`` exists on the server (the built script(s)).

    <script src="NTTDATA/modules/customModule/ntt.smartit.customModule.js"></script>

## Examples
**1. full replace**

    require('./controllers/fullReplaceController');

    export class fullReplaceModule extends ntt.smartit.api.ICustomModule {

    name() {
        return "fullReplace";
    }

    injectTemplates() {
        return  { 
        "views/replaceable.html":  
        [{ 
            method: "replace",
            mode: "full",
            template: this.getModulePath()+"replaceViews/customTemplate.html" 
        }]}
    }
    templates() { return [] } //This function can be empty for the initial stage
    i18nLocales() { return [] } //This function can be empty for the initial stage
    }

    ntt.smartit.api.nttSmartitModules.push(new fullReplaceModule());

**2. partial replace**

    export class partialReplaceModule extends ntt.smartit.api.ICustomModule {

    name() {
        return "partialReplace";
    }

    injectTemplates() {
        return  {
            "views/replaceable.html":  
            [{
                mode: "partial",
                method: "replace",
                type: "jquery",
                snippet: '<a item-id="ticket"></a>',
                selector: function($jqueryTemplate) { return $jqueryTemplate.find('element-name'); }
            }]
        }
    }
    templates() { return [] } //This function can be empty for the initial stage
    i18nLocales() { return [] } //This function can be empty for the initial stage
    }

    ntt.smartit.api.nttSmartitModules.push(new attributeModule());

**3. partial add**

Adding a tab to a tabset

    export class partialAddModule extends ntt.smartit.api.ICustomModule {

    name() {
        return "partialAdd";
    }


    injectTemplates() {
        return  {
            "views/partialAdd.html":  
            [{
            method: "add",
                mode: "partial",
                type: "jquery",
                selector: function($jqueryTemplate) { return $jqueryTemplate.find('tabset'); },
                snippet: '<tab  id="tab3"></tab>',
            }]
        }
    }
    templates() { return [] } //This function can be empty for the initial stage
    i18nLocales() { return [] } //This function can be empty for the initial stage
    }

    ntt.smartit.api.nttSmartitModules.push(new partialAddModule());

**4. attribute add&repalce (JQuery Selector)**

    export class attributeModule extends ntt.smartit.api.ICustomModule {

    name() { return "AttributeModule"; }

    injectTemplates() {
        return  {
            "views/replaceable.html":  
            [{
                mode: "attribute",
                attributes: {
                    "replace": { "name": "value" },
                    "add": { "name": "value" }
                },
                type: "jquery",
                selector: function($jqueryTemplate) { return $jqueryTemplate.find('activity-feed'); },
            }]
        }
    }
    templates() { return [] } //This function can be empty for the initial stage
    i18nLocales() { return [] } //This function can be empty for the initial stage
    }

    ntt.smartit.api.nttSmartitModules.push(new attributeModule());