add moonv4

Change-Id: I247af788d0b0fb961fbc85416486b241eb1d807c
Signed-off-by: WuKong <rebirthmonkey@gmail.com>

12 files changed, 1235 insertions, 0 deletions

diff --git a/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules-add.tpl.html b/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules-add.tpl.html
new file mode 100644
index 00000000..a721e6d0
--- /dev/null
+++ b/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules-add.tpl.html
@@ -0,0 +1,50 @@
+<div class="row">
+
+    <form class="form-horizontal" role="form" name="add.form">
+
+        <div class="form-group" ng-class="{'has-error': add.form.name.$invalid && add.form.name.$dirty}">
+
+            <label for="name" class="col-sm-3 control-label" data-translate="moon.model.metarules.add.form.name">Name</label>
+
+            <div class="col-sm-6">
+
+                <input name="name" id="name" class="form-control" type="text" data-ng-model="add.metaRule.name" required />
+
+                <div class="help-block" ng-show="add.form.name.$dirty && add.form.name.$invalid">
+                    <small class="error" ng-show="add.form.name.$error.required" data-translate="moon.model.metarules.add.check.name.required">Name is required</small>
+                </div>
+
+            </div>
+        </div>
+
+        <div class="form-group">
+
+            <label for="description" class="col-sm-3 control-label" data-translate="moon.model.metarules.add.form.description">Description</label>
+            <div class="col-sm-6">
+                <textarea id="description" name="description" class="form-control" data-ng-model="add.metaRule.description"></textarea>
+            </div>
+
+        </div>
+
+
+        <div class="form-group">
+
+            <div class="col-sm-8">
+
+                <div class="pull-right">
+
+                    <a href="" ng-disabled="add.loading" ng-click="add.create()" class="btn btn-warning">
+                        <span class="glyphicon glyphicon-save"></span>
+                        <span data-translate="moon.model.metarules.add.action.create">Create</span>
+                    </a>
+
+                    <moon-loader ng-if="add.loading"></moon-loader>
+
+                </div>
+
+            </div>
+
+        </div>
+    </form>
+
+</div>
diff --git a/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules-map.tpl.html b/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules-map.tpl.html
new file mode 100644
index 00000000..1830204b
--- /dev/null
+++ b/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules-map.tpl.html
@@ -0,0 +1,102 @@
+<div ng-controller="moonMetaRulesMapController as map" class="modal" tabindex="-1" data-role="MapMetaRules">
+
+    <div class="modal-dialog">
+
+        <div class="modal-content">
+
+            <div class="modal-header">
+
+                <button type="button" class="close" ng-click="$hide()">&times;</button>
+                <h4 class="modal-title" data-translate="moon.model.metarules.map.title"></h4>
+
+            </div>
+
+            <div class="modal-body">
+
+                <div class="row">
+
+                    <div class="col-sm-3">
+
+                        <button class="btn btn-primary" style="white-space: normal;" ng-click="map.addMetaRuleToList = !map.addMetaRuleToList">
+
+                            <span ng-if="!map.addMetaRuleToList" data-translate="moon.model.metarules.map.action.new">Add a new Meta Rule</span>
+                            <span ng-if="map.addMetaRuleToList" data-translate="moon.model.metarules.map.action.list">List of Meta Rules</span>
+
+                        </button>
+
+                    </div>
+
+                    <div class="col-sm-9">
+
+                        <form  class="form-horizontal" role="form" name="map.form">
+
+                            <div class="form-group" ng-if="!map.addMetaRuleToList">
+
+                                <label class="col-sm-3 control-label" data-translate="moon.model.metarules.map.form.list">List of Meta Rule</label>
+
+                                <div class="col-sm-9">
+
+                                    <ui-select ng-model="map.selectedMetaRule" name="object">
+
+                                        <ui-select-match placeholder="(None)" ng-bind="$select.selected.name"></ui-select-match>
+                                        <ui-select-choices repeat="ametaRule in map.metaRules">
+                                            <div ng-value="ametaRule" ng-bind="ametaRule.name"></div>
+                                        </ui-select-choices>
+
+                                    </ui-select>
+
+                                </div>
+
+                            </div>
+
+                            <div class="form-group" ng-if="!map.addMetaRuleToList">
+
+                                <moon-loader ng-if="map.metaRulesLoading || map.mappingLoading" ></moon-loader>
+
+                                <div class="col-sm-5">
+                                    <a href="" ng-disabled="map.metaRulesLoading || map.mappingLoading || !map.selectedMetaRule" ng-click="map.deleteMetaRule()" class="btn btn-warning" style="white-space: normal;">
+                                        <span class="glyphicon glyphicon-trash"></span>
+                                        <span data-translate="moon.model.metarules.map.action.delete">Delete the selected Meta Rule</span>
+                                    </a>
+                                </div>
+
+                                <div class="col-sm-5 col-sm-offset-2">
+                                    <a href="" ng-disabled="map.metaRulesLoading || map.mappingLoading || !map.selectedMetaRule" ng-click="map.mapToModel()" class="btn btn-warning" style="white-space: normal;">
+                                        <span class="glyphicon glyphicon-link"></span>
+                                        <span data-translate="moon.model.metarules.map.action.add">Add the selected Meta Rule</span>
+                                    </a>
+                                </div>
+
+                            </div>
+
+                            <div class="form-group" ng-if="map.addMetaRuleToList">
+
+                                <moon-meta-rules-add></moon-meta-rules-add>
+
+                            </div>
+
+                        </form>
+
+                    </div>
+
+                </div>
+
+            </div>
+
+            <div class="modal-footer">
+
+                <div class="btn-toolbar" style="float: right;">
+
+                    <a href="" ng-click="$hide()" class="btn btn-default">
+                        <span data-translate="moon.model.metarules.add.action.cancel">Cancel</span>
+                    </a>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
diff --git a/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules-unmap.tpl.html b/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules-unmap.tpl.html
new file mode 100644
index 00000000..bb02aba2
--- /dev/null
+++ b/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules-unmap.tpl.html
@@ -0,0 +1,35 @@
+<div ng-controller="MetaRulesUnMapController as unmap" class="modal" tabindex="-1" data-role="modalUnMapMetaRule">
+
+    <div class="modal-dialog">
+
+        <div class="modal-content">
+
+            <div class="modal-header">
+                <button type="button" class="close" ng-click="$hide()">&times;</button>
+                <h4 class="modal-title" data-translate="moon.model.metarules.unmap.title"></h4>
+            </div>
+
+            <div class="modal-body">
+                <span data-translate="moon.model.metarules.unmap.content" data-translate-values="{ modelName: unmap.model.name, metaRuleName: unmap.metaRule.name }"></span>
+            </div>
+
+            <div class="modal-footer">
+
+                <div class="btn-toolbar" style="float: right;">
+                    <a href="" ng-click="$hide()" class="btn btn-default">
+                        <span data-translate="moon.model.metarules.unmap.action.cancel">Cancel</span>
+                    </a>
+                    <a href="" ng-disabled="unmap.unMappingLoading" ng-click="unmap.unmap()" class="btn btn-warning">
+                        <span class="glyphicon glyphicon-transfer"></span>
+                        <span data-translate="moon.model.metarules.unmap.action.unmap">Unmap</span>
+                    </a>
+                    <moon-loader ng-if="unmap.unMappingLoading" ></moon-loader>
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules.controller.add.js b/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules.controller.add.js
new file mode 100644
index 00000000..a95951fa
--- /dev/null
+++ b/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules.controller.add.js
@@ -0,0 +1,99 @@
+(function() {
+
+    'use strict';
+
+    angular
+        .module('moon')
+        .directive('moonMetaRulesAdd', moonMetaRulesAdd);
+
+    moonMetaRulesAdd.$inject = [];
+
+    function moonMetaRulesAdd() {
+
+        return {
+            templateUrl : 'html/model/edit/metarules/action/mapping/metarules-add.tpl.html',
+            bindToController : true,
+            controller : moonMetaRulesAddController,
+            controllerAs : 'add',
+            scope : {
+                metaRules : '='
+            },
+            restrict : 'E',
+            replace : true
+        };
+    }
+
+
+    angular
+        .module('moon')
+        .controller('moonMetaRulesAddController', moonMetaRulesAddController);
+
+    moonMetaRulesAddController.$inject = ['$scope', 'metaRuleService', 'alertService', '$translate', 'formService', 'utilService'];
+
+    function moonMetaRulesAddController($scope, metaRuleService, alertService, $translate, formService, utilService) {
+
+        var add = this;
+
+        /*
+         *
+         */
+
+        add.laoading = false;
+
+        add.form = {};
+
+        add.metaRule = { name: null, description: null, subject_categories : [], object_categories : [], action_categories : [] };
+
+        add.create = createMetaRule;
+
+        activate();
+
+        function activate(){
+
+        }
+
+        function createMetaRule() {
+
+            if(formService.isInvalid(add.form)) {
+
+                formService.checkFieldsValidity(add.form);
+
+            } else {
+
+                add.loading = true;
+
+                metaRuleService.data.create({}, add.metaRule, createSuccess, createError);
+
+            }
+
+            function createSuccess(data) {
+
+                var createdMetaRule = utilService.transformOne(data, 'meta_rules');
+
+                $translate('moon.model.metarules.add.success', { metaRuleName: createdMetaRule.name }).then(function (translatedValue) {
+                    alertService.alertSuccess(translatedValue);
+                });
+
+                add.loading = false;
+
+                $scope.$emit('event:metaRuleCreatedSuccess', createdMetaRule);
+
+            }
+
+            function createError(reason) {
+
+                $translate('moon.model.metarules.add.error', { metaRuleName: add.metaRule.name }).then(function (translatedValue) {
+                    alertService.alertError(translatedValue);
+                });
+
+                add.loading = false;
+
+                $scope.$emit('event:metaRuleCreatedError', add.project);
+
+            }
+
+        }
+
+    }
+
+})();
diff --git a/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules.map.controller.js b/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules.map.controller.js
new file mode 100644
index 00000000..cf9ba06c
--- /dev/null
+++ b/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules.map.controller.js
@@ -0,0 +1,213 @@
+(function() {
+
+    'use strict';
+
+    angular
+        .module('moon')
+        .controller('moonMetaRulesMapController', moonMetaRulesMapController);
+
+    moonMetaRulesMapController.$inject = ['$scope', '$rootScope', 'alertService', '$translate', 'formService', 'metaRuleService', 'modelService', 'utilService'];
+
+    function moonMetaRulesMapController($scope, $rootScope, alertService, $translate, formService, metaRuleService, modelService, utilService ) {
+
+        var map = this;
+
+        /*
+         *
+         */
+
+        map.metaRules = [];
+
+        map.model = $scope.model;
+
+        map.addMetaRuleToList = false;
+
+        map.mapToModel = mapToModel;
+
+        map.deleteMetaRule = deleteMetaRule;
+
+        activate();
+
+        function activate() {
+
+            resolveMetaRules();
+
+        }
+
+        /*
+         * ---- events
+         */
+        var rootListeners = {
+
+            'event:metaRuleCreatedSuccess': $rootScope.$on('event:metaRuleCreatedSuccess', metaRuleCreatedSuccess),
+            'event:metaRuleCreatedError': $rootScope.$on('event:metaRuleCreatedError', metaRuleCreatedError)
+
+        };
+
+        for (var unbind in rootListeners) {
+            $scope.$on('$destroy', rootListeners[unbind]);
+        }
+
+
+        /*
+         *
+         */
+
+        function resolveMetaRules() {
+
+            map.metaRulesLoading = true;
+
+           metaRuleService.findAllWithCallback(
+                function(metaRules){
+                    map.metaRules = metaRules;
+                    map.metaRulesLoading = false;
+                }
+            );
+
+        }
+
+        function mapToModel() {
+
+            if (formService.isInvalid(map.form)) {
+
+                formService.checkFieldsValidity(map.form);
+
+            } else {
+
+                map.mappingLoading = true;
+
+                var modelToSend = angular.copy(map.model);
+
+                modelToSend.meta_rules.push(map.selectedMetaRule.id);
+
+                modelService.update(modelToSend, mapSuccess, mapError);
+
+            }
+
+            function mapSuccess(data) {
+
+                var modelReceived = utilService.transformOne(data, 'models');
+
+                metaRuleService.findSomeWithMetaData(modelReceived.meta_rules).then(function(metaRules){
+
+                    modelReceived.meta_rules_values  = metaRules;
+
+                    $translate('moon.model.metarules.map.success', {
+
+                        modelName: modelReceived.name,
+                        metaRuleName: map.selectedMetaRule.name
+
+                    }).then(function (translatedValue) {
+
+                        alertService.alertSuccess(translatedValue);
+
+                    });
+
+                    map.mappingLoading = false;
+
+                    $scope.$emit('event:metaRuleMapToModelSuccess', modelReceived);
+
+                });
+
+            }
+
+            function mapError(response) {
+
+                $translate('moon.model.metarules.map.error', {
+
+                    modelName: map.model.name,
+                    metaRuleName: map.selectedMetaRule.name
+
+                }).then(function (translatedValue) {
+
+                    alertService.alertError(translatedValue);
+
+                });
+
+                map.mappingLoading = false;
+
+            }
+        }
+
+        function cleanSelectedValue(){
+
+            delete map.selectedMetaRule;
+
+        }
+
+
+        function deleteMetaRule(){
+
+            if(!map.selectedMetaRule){
+
+                return;
+
+            }
+
+            map.mappingLoading = true;
+
+            var metaRuleTodelete = angular.copy(map.selectedMetaRule);
+
+            metaRuleService.delete(metaRuleTodelete, deleteSuccess, deleteError);
+
+            function deleteSuccess(data) {
+
+                $translate('moon.model.metarules.delete.success', { metaRuleName: metaRuleTodelete.name }).then(function (translatedValue) {
+                    alertService.alertSuccess(translatedValue);
+                });
+
+                cleanSelectedValue();
+
+                map.mappingLoading = false;
+
+                resolveMetaRules();
+
+                // later this event will have to be catch, because the model can use the deleted MetaRule
+                $scope.$emit('event:deleteMetaRule', metaRuleTodelete);
+
+            }
+
+            function deleteError(reason) {
+
+                $translate('moon.model.metarules.delete.error', { metaRuleName: metaRuleTodelete.name }).then(function (translatedValue) {
+                    alertService.alertError(translatedValue);
+                });
+
+                map.mappingLoading = false;
+
+            }
+        }
+
+
+
+
+
+
+        /**
+         * This function will add a metaRule to the current list of metaRules
+         * @param event
+         * @param metaRule {...} metaRule to add
+         */
+        function metaRuleCreatedSuccess(event, metaRule) {
+
+            map.metaRules.push(metaRule);
+            showList();
+
+        }
+
+        /**
+         * This function hide the add MetaRule Modal
+         * @param event
+         */
+        function metaRuleCreatedError(event) {
+
+        }
+
+        function showList(){
+            map.addMetaRuleToList = false;
+        }
+
+    }
+
+
+})();
\ No newline at end of file
diff --git a/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules.unmap.controller.js b/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules.unmap.controller.js
new file mode 100644
index 00000000..30f32d51
--- /dev/null
+++ b/moonv4/moon_gui/static/app/model/edit/metarules/action/mapping/metarules.unmap.controller.js
@@ -0,0 +1,74 @@
+/**
+ * @author arnaud marhin<arnaud.marhin@orange.com>
+ */
+
+(function() {
+
+    'use strict';
+
+    angular
+        .module('moon')
+        .controller('MetaRulesUnMapController', MetaRulesUnMapController);
+
+    MetaRulesUnMapController.$inject = ['$scope', '$translate', 'alertService', 'modelService'];
+
+    function MetaRulesUnMapController($scope, $translate, alertService, modelService) {
+
+        var unmap = this;
+
+        /*
+         *
+         */
+
+        unmap.model = $scope.model;
+        unmap.metaRule = $scope.metaRule;
+
+        unmap.unMappingLoading = false;
+
+        unmap.unmap = unMapModelToMetaRule;
+
+        /*
+         *
+         */
+
+        function unMapModelToMetaRule() {
+
+            unmap.unMappingLoading = true;
+
+            var modelToUpdate = angular.copy(unmap.model);
+
+            modelToUpdate.meta_rules = _.without(modelToUpdate.meta_rules, unmap.metaRule.id);
+
+            modelService.update(modelToUpdate, unMapSuccess, unMapError);
+
+            function unMapSuccess(data) {
+
+                $translate('moon.model.metarules.unmap.success', { modelName: unmap.model.name, metaRuleName: unmap.metaRule.name })
+                    .then(function (translatedValue) {
+                        alertService.alertSuccess(translatedValue);
+                    });
+
+                unmap.unMappingLoading = false;
+
+                $scope.$emit('event:metaRuleUnMappedToModelSuccess', modelToUpdate);
+
+            }
+
+            function unMapError(reason) {
+
+                $translate('moon.model.metarules.unmap.error', { modelName: unmap.model.name, metaRuleName: unmap.metaRule.name })
+                    .then(function (translatedValue) {
+                        alertService.alertError(translatedValue);
+                    });
+
+                unmap.unMappingLoading = false;
+
+                $scope.$emit('event:metaRuleUnMappedToModelError');
+
+            }
+
+        }
+
+    }
+
+})();
diff --git a/moonv4/moon_gui/static/app/model/edit/metarules/action/metarules-edit-basic.tpl.html b/moonv4/moon_gui/static/app/model/edit/metarules/action/metarules-edit-basic.tpl.html
new file mode 100644
index 00000000..b6136195
--- /dev/null
+++ b/moonv4/moon_gui/static/app/model/edit/metarules/action/metarules-edit-basic.tpl.html
@@ -0,0 +1,67 @@
+<div class="row">
+
+    <form class="form-horizontal" role="form" name="edit.form">
+
+        <div class="form-group">
+
+            <label for="id" class="col-sm-3 control-label" data-translate="moon.model.metarules.edit.basic.form.id">Id</label>
+
+            <div class="col-sm-6">
+
+                <input name="id" id="id" disabled class="form-control" type="text" data-ng-model="edit.metaRuleToEdit.id" required />
+
+            </div>
+
+        </div>
+
+        <div class="form-group" ng-class="{'has-error': edit.form.name.$invalid && edit.form.name.$dirty}">
+
+            <label for="name" class="col-sm-3 control-label" data-translate="moon.model.metarules.edit.basic.form.name">Name</label>
+
+            <div class="col-sm-6">
+
+                <input name="name" id="name" class="form-control" type="text" data-ng-model="edit.metaRuleToEdit.name" required />
+
+                <div class="help-block" ng-show="edit.form.name.$dirty && edit.form.name.$invalid">
+                    <small class="error" ng-show="edit.form.name.$error.required" data-translate="moon.model.metarules.edit.basic.check.name.required">Name is required</small>
+                </div>
+
+            </div>
+
+        </div>
+
+        <div class="form-group">
+
+            <label for="description" class="col-sm-3 control-label" data-translate="moon.model.metarules.edit.basic.form.description">Description</label>
+            <div class="col-sm-6">
+                <textarea id="description" name="description" class="form-control" data-ng-model="edit.metaRuleToEdit.description"></textarea>
+            </div>
+
+        </div>
+
+        <div class="form-group">
+
+            <div class="col-sm-2 col-sm-offset-3">
+
+                <a href=""  ng-disabled="edit.loading" ng-click="edit.init()" class="btn btn-default">
+                    <span data-translate="moon.model.metarules.edit.basic.action.init">Init</span>
+                </a>
+
+            </div>
+
+            <div class="col-sm-4 col-sm-offset-2">
+
+                <a href="" ng-disabled="edit.loading" ng-click="edit.editMetaRule()" class="btn btn-warning">
+                    <span class="glyphicon glyphicon-save"></span>
+                    <span data-translate="moon.model.metarules.edit.basic.action.update">Update</span>
+                </a>
+
+                <moon-loader ng-if="edit.loading"></moon-loader>
+
+            </div>
+
+        </div>
+
+    </form>
+
+</div>
\ No newline at end of file
diff --git a/moonv4/moon_gui/static/app/model/edit/metarules/action/metarules-edit.tpl.html b/moonv4/moon_gui/static/app/model/edit/metarules/action/metarules-edit.tpl.html
new file mode 100644
index 00000000..7b074448
--- /dev/null
+++ b/moonv4/moon_gui/static/app/model/edit/metarules/action/metarules-edit.tpl.html
@@ -0,0 +1,62 @@
+<div ng-controller="MetaRulesEditController as edit" class="modal" tabindex="-1" data-role="modalViewProject">
+
+    <div class="modal-dialog">
+
+        <div class="modal-content">
+
+            <div class="modal-header">
+                <button type="button" class="close" ng-click="$hide()">&times;</button>
+                <h4 class="modal-title" data-translate="moon.model.metarules.edit.title" data-translate-values="{metaRuleName: edit.metaRule.name}"></h4>
+            </div>
+
+            <div class="modal-body">
+
+                <div class="panel panel-default">
+
+                    <div class="panel-heading">
+
+                        <h4>
+                            <span data-translate="moon.model.edit.basic.title" >Basic Information</span>
+                            <a href="" ng-click="edit.editBasic = !edit.editBasic">
+                                <span data-translate="moon.model.metarules.edit.update">Update</span>
+                                <span class="glyphicon glyphicon-cog"></span>
+                            </a>
+                        </h4>
+
+                    </div>
+
+                    <div class="panel-body">
+
+                        <div ng-if="edit.editBasic">
+                            <moon-meta-rules-edit-basic meta-rule="edit.metaRule"></moon-meta-rules-edit-basic>
+                        </div>
+
+                        <div ng-if="!edit.editBasic">
+                            <dl class="dl-horizontal">
+                                <dt>Id</dt>
+                                <dd ng-bind="edit.metaRule.id"></dd>
+                                <dt>Name</dt>
+                                <dd ng-bind="edit.metaRule.name"></dd>
+                                <dt>Description</dt>
+                                <dd ng-bind="edit.metaRule.description"></dd>
+                            </dl>
+                        </div>
+                    </div>
+
+                </div>
+
+                <moon-meta-data-list edit-mode="true" meta-rule="edit.metaRule"></moon-meta-data-list>
+
+            </div>
+
+            <div class="modal-footer top10">
+                <div class="btn-toolbar" style="float: right;">
+                    <button ng-click="$hide()" class="btn btn-default" data-translate="moon.model.view.action.close">Close</button>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
diff --git a/moonv4/moon_gui/static/app/model/edit/metarules/action/metarules.controller.edit.js b/moonv4/moon_gui/static/app/model/edit/metarules/action/metarules.controller.edit.js
new file mode 100644
index 00000000..b2ebc45d
--- /dev/null
+++ b/moonv4/moon_gui/static/app/model/edit/metarules/action/metarules.controller.edit.js
@@ -0,0 +1,49 @@
+(function() {
+
+    'use strict';
+
+    angular
+        .module('moon')
+        .controller('MetaRulesEditController', MetaRulesEditController);
+
+    MetaRulesEditController.$inject = ['$scope', '$rootScope'];
+
+    function MetaRulesEditController($scope, $rootScope) {
+
+        var edit = this;
+
+        edit.metaRule = $scope.metaRule;
+
+        activate();
+
+        function activate(){
+        }
+
+
+        /*
+         * ---- events
+         */
+        var rootListeners = {
+
+            'event:metaRuleBasicUpdatedSuccess': $rootScope.$on('event:metaRuleBasicUpdatedSuccess', metaRuleUpdatedSuccess)
+
+        };
+
+        for (var unbind in rootListeners) {
+            $scope.$on('$destroy', rootListeners[unbind]);
+        }
+
+        /**
+         * When the MetaRule is updated, this function refresh the current metaRule with the new changes
+         * @param event
+         * @param metaRule
+         */
+        function metaRuleUpdatedSuccess(event, metaRule){
+
+            edit.metaRule = metaRule;
+
+        }
+
+    }
+
+})();
diff --git a/moonv4/moon_gui/static/app/model/edit/metarules/action/metarules.edit.basic.dir.js b/moonv4/moon_gui/static/app/model/edit/metarules/action/metarules.edit.basic.dir.js
new file mode 100644
index 00000000..603e7a33
--- /dev/null
+++ b/moonv4/moon_gui/static/app/model/edit/metarules/action/metarules.edit.basic.dir.js
@@ -0,0 +1,98 @@
+(function() {
+
+    'use strict';
+
+    angular
+        .module('moon')
+        .directive('moonMetaRulesEditBasic', moonMetaRulesEditBasic);
+
+    moonMetaRulesEditBasic.$inject = [];
+
+    function moonMetaRulesEditBasic() {
+
+        return {
+            templateUrl : 'html/model/edit/metarules/action/metarules-edit-basic.tpl.html',
+            bindToController : true,
+            controller : moonMetaRulesEditBasicController,
+            controllerAs : 'edit',
+            scope : {
+                metaRule : '='
+            },
+            restrict : 'E',
+            replace : true
+        };
+
+    }
+
+    angular
+        .module('moon')
+        .controller('moonMetaRulesEditBasicController', moonMetaRulesEditBasicController);
+
+    moonMetaRulesEditBasicController.$inject = ['$scope', 'metaRuleService', 'formService', 'alertService', '$translate', 'utilService'];
+
+    function moonMetaRulesEditBasicController($scope, metaRuleService, formService, alertService, $translate, utilService){
+
+        var edit = this;
+
+        edit.editMetaRule = editMetaRule;
+        edit.init = init;
+
+        edit.form = {};
+
+        activate();
+
+        function activate(){
+
+            edit.metaRule = $scope.edit.metaRule;
+
+            edit.metaRuleToEdit = angular.copy(edit.metaRule);
+
+        }
+
+        function editMetaRule(){
+
+            if(formService.isInvalid(edit.form)) {
+
+                formService.checkFieldsValidity(edit.form);
+
+            }else{
+
+                edit.loading = true;
+
+                metaRuleService.update(edit.metaRuleToEdit, updateSuccess, updateError);
+
+            }
+
+            function updateSuccess(data) {
+
+                var updatedMetaRule = utilService.transformOne(data, 'meta_rules');
+
+                $translate('moon.model.metarules.edit.basic.success', { metaRuleName: updatedMetaRule.name }).then( function(translatedValue) {
+                    alertService.alertSuccess(translatedValue);
+                });
+
+                edit.loading = false;
+
+                $scope.$emit('event:metaRuleBasicUpdatedSuccess', updatedMetaRule);
+
+            }
+
+            function updateError(reason) {
+
+                $translate('moon.model.edit.basic.error', { metaRuleName: edit.metaRule.name }).then( function(translatedValue) {
+                    alertService.alertError(translatedValue);
+                });
+
+                edit.loading = false;
+
+            }
+        }
+
+        function init(){
+
+            edit.metaRuleToEdit = angular.copy(edit.metaRule);
+
+        }
+    }
+
+})();
diff --git a/moonv4/moon_gui/static/app/model/edit/metarules/metarules-list.tpl.html b/moonv4/moon_gui/static/app/model/edit/metarules/metarules-list.tpl.html
new file mode 100644
index 00000000..c36700ff
--- /dev/null
+++ b/moonv4/moon_gui/static/app/model/edit/metarules/metarules-list.tpl.html
@@ -0,0 +1,149 @@
+<div>
+
+    <div class="row">
+
+        <div><h4 data-translate="moon.model.metarules.title">List of Meta Rules</h4></div>
+
+    </div>
+
+    <div class="row">
+
+        <div class="table-responsive" data-role="table">
+            <table class="table table-striped table-hover" ng-table="list.table">
+
+                <colgroup>
+                    <col class="col-md-2" />
+                    <col class="col-md-2" />
+                    <col class="col-md-1" />
+                    <col class="col-md-1" />
+                    <col class="col-md-1" />
+                    <col class="col-md-2" />
+                </colgroup>
+
+                <thead>
+
+                <tr>
+
+                    <th class="customTables sortable"
+                        ng-class="{ 'sort-asc': list.table.isSortBy('name', 'asc'), 'sort-desc': list.table.isSortBy('name', 'desc') }"
+                        ng-click="list.table.sorting('name', list.table.isSortBy('name', 'asc') ? 'desc' : 'asc')">
+                        <div data-translate="moon.model.metarules.table.name">Name</div>
+                    </th>
+
+                    <th class="customTables sortable"
+                        ng-class="{ 'sort-asc': list.table.isSortBy('description', 'asc'), 'sort-desc': list.table.isSortBy('description', 'desc') }"
+                        ng-click="list.table.sorting('description', list.table.isSortBy('description', 'asc') ? 'desc' : 'asc')">
+                        <div data-translate="moon.model.metarules.table.description">Description</div>
+                    </th>
+
+                    <th class="customTables sortable">
+                        <div data-translate="moon.model.metarules.table.metadata.subject.number">Number of Subjects</div>
+                    </th>
+
+                    <th class="customTables sortable">
+                        <div data-translate="moon.model.metarules.table.metadata.object.number">Number of Subjects</div>
+                    </th>
+
+                    <th class="customTables sortable">
+                        <div data-translate="moon.model.metarules.table.metadata.action.number">Number of Actions</div>
+                    </th>
+
+                    <th class="customTables">
+                        <div data-translate="moon.model.metarules.action.title">Actions</div>
+                    </th>
+                </tr>
+
+                </thead>
+
+                <tbody ng-if="!list.hasMetaRules()">
+                <tr>
+                    <td colspan="2"><span data-translate="moon.model.metarules.table.notFound">There is no Meta Rules</span></td>
+                </tr>
+                </tbody>
+
+                <tbody ng-if="list.hasMetaRules()">
+
+                <tr ng-repeat="aMetaRules in $data | filter:list.search.find | orderBy:sort:reverse">
+                    <td ng-bind="aMetaRules.name"></td>
+                    <td ng-bind="aMetaRules.description"></td>
+                    <td ng-bind="aMetaRules.subject_categories.length"></td>
+                    <td ng-bind="aMetaRules.object_categories.length"></td>
+                    <td ng-bind="aMetaRules.action_categories.length"></td>
+                    <td>
+
+                        <div ng-if="list.editMode">
+
+                            <div ng-if="!value.loader" class="dropdown">
+
+                                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
+                                    <span data-translate="moon.model.metadata.table.action.title">Actions</span>
+                                    <span class="caret"></span>
+                                </button>
+
+                                <ul class="dropdown-menu">
+
+                                    <li>
+                                        <a href="" ng-click="list.unmap.showModal(aMetaRules)" >
+                                            <span class="glyphicon glyphicon-transfer"></span>
+                                            <span class="control-label" data-translate="moon.model.metarules.action.remove">Remove</span>
+                                        </a>
+                                    </li>
+
+                                    <li>
+                                        <a href="" ng-click="list.edit.showModal(aMetaRules)">
+                                            <span class="glyphicon glyphicon-cog"></span>
+                                            <span class="control-label" data-translate="moon.model.metarules.action.edit">Edit</span>
+                                        </a>
+                                    </li>
+
+                                </ul>
+
+                            </div>
+
+                        </div>
+
+                        <div ng-if="!list.editMode">
+
+                            <a href="" ng-click="list.showDetail(aMetaRules)">
+
+                                <span ng-if="aMetaRules.id !== list.getShowDetailValue().id">
+                                    <span class="glyphicon glyphicon-eye-open"></span>
+                                    <span class="control-label" data-translate="moon.model.metarules.action.detail.open">Consult</span>
+                                </span>
+
+                                <span ng-if="aMetaRules.id === list.getShowDetailValue().id">
+                                    <span class="glyphicon glyphicon-eye-close"></span>
+                                    <span class="control-label" data-translate="moon.model.metarules.action.detail.close">Close</span>
+                                </span>
+
+                            </a>
+
+                        </div>
+
+                    </td>
+                </tr>
+
+                </tbody>
+
+            </table>
+
+            <div ng-if="list.showDetailValue">
+                <moon-meta-data-list edit-mode="list.editMode" meta-rule="list.getShowDetailValue()"></moon-meta-data-list>
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="row" ng-if="list.editMode">
+
+        <div class="form-group">
+            <a href="" ng-click="list.map.showModal()" class="btn btn-default">
+                <span class="glyphicon glyphicon-link"></span>
+                <span data-translate="moon.model.metarules.action.settings">Settings</span>
+            </a>
+        </div>
+
+    </div>
+
+</div>
diff --git a/moonv4/moon_gui/static/app/model/edit/metarules/metarules.list.dir.js b/moonv4/moon_gui/static/app/model/edit/metarules/metarules.list.dir.js
new file mode 100644
index 00000000..8fba0266
--- /dev/null
+++ b/moonv4/moon_gui/static/app/model/edit/metarules/metarules.list.dir.js
@@ -0,0 +1,237 @@
+(function() {
+
+    'use strict';
+
+    angular
+        .module('moon')
+        .directive('moonMetaRulesList', moonMetaRulesList);
+
+    moonMetaRulesList.$inject = [];
+
+    function moonMetaRulesList() {
+
+        return {
+            templateUrl : 'html/model/edit/metarules/metarules-list.tpl.html',
+            bindToController : true,
+            controller : moonMetaRulesListController,
+            controllerAs : 'list',
+            scope : {
+                // if edit and delete possibilities are displayed
+                // Value are True or False
+                editMode : '=',
+                mappedModel : '='
+            },
+            restrict : 'E',
+            replace : true
+        };
+    }
+
+    angular
+        .module('moon')
+        .controller('moonMetaRulesListController', moonMetaRulesListController);
+
+    moonMetaRulesListController.$inject = ['$scope', '$rootScope', 'NgTableParams', '$filter', '$modal', 'metaRuleService'];
+
+    function moonMetaRulesListController($scope, $rootScope, NgTableParams, $filter, $modal, metaRuleService ){
+
+        var list = this;
+
+        list.table = {};
+
+        list.editMode = $scope.list.editMode;
+        list.model = $scope.list.mappedModel;
+        list.metaRules = list.model.meta_rules_values;
+
+        list.getMetaRules = getMetaRules;
+        list.hasMetaRules = hasMetaRules;
+        list.showDetail = showDetail;
+        list.getSubjectList = getSubjectList;
+        list.getObjectList = getObjectList;
+        list.getActionlist = getActionlist;
+        list.getShowDetailValue = getShowDetailValue;
+
+        list.showDetailValue = false;
+
+        list.subject_list = [];
+        list.object_list = [];
+        list.action_list = [];
+
+        list.edit = { modal: $modal({ template: 'html/model/edit/metarules/action/metarules-edit.tpl.html', show: false }),
+            showModal: showEditModal };
+
+        list.map = { modal: $modal({ template: 'html/model/edit/metarules/action/mapping/metarules-map.tpl.html', show: false }),
+            showModal: showMapModal };
+
+        list.unmap = { modal: $modal({ template: 'html/model/edit/metarules/action/mapping/metarules-unmap.tpl.html', show: false }),
+            showModal: showUnmapModal };
+
+        activate();
+
+        function activate(){
+
+            newMetaRulesTable();
+
+        }
+
+        /*
+         * ---- events
+         */
+        var rootListeners = {
+
+            'event:metaRuleMapToModelSuccess': $rootScope.$on('event:metaRuleMapToModelSuccess', updateModelFromMapSuccess),
+
+            'event:metaRuleUnMappedToModelSuccess': $rootScope.$on('event:metaRuleUnMappedToModelSuccess', modelUnmappedSuccess),
+            'event:metaRuleUnMappedToModelError': $rootScope.$on('event:metaRuleUnMappedToModelError', modelUnmappedError)
+
+        };
+
+        for (var unbind in rootListeners) {
+            $scope.$on('$destroy', rootListeners[unbind]);
+        }
+
+
+
+        function newMetaRulesTable() {
+
+            list.table = new NgTableParams({
+
+                page: 1,            // show first page
+                count: 10,          // count per page
+                sorting: {
+                    name: 'asc' // initial sorting
+                }
+
+            }, {
+
+                total: function () { return list.getMetaRules().length; }, // length of data
+                getData: function($defer, params) {
+
+                    var orderedData = params.sorting() ? $filter('orderBy')(list.getMetaRules(), params.orderBy()) : list.getMetaRules();
+                    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
+
+                },
+                $scope: { $data: {} }
+
+            });
+
+            return list.table;
+
+        }
+
+        /**
+         * If the directive is not in editMode and displaying MetaData Content, if the editMode change to true, MetaData Content need to be hidden
+         */
+        $scope.$watch('list.editMode',  function(newValue, oldValue){
+            list.showDetailValue = false;
+        });
+
+        function getMetaRules() {
+            return (list.metaRules) ? list.metaRules : [];
+        }
+
+        function hasMetaRules() {
+            return list.getMetaRules().length > 0;
+        }
+
+        function showDetail(aMetaRule){
+
+            if(aMetaRule.id === getShowDetailValue().id){
+
+                list.showDetailValue = false;
+                list.subject_list = [];
+                list.object_list = [];
+                list.action_list = [];
+
+            }else{
+
+                list.subject_list = aMetaRule.subject_categories_values;
+                list.object_list = aMetaRule.object_categories_values;
+                list.action_list = aMetaRule.action_categories_values;
+                list.showDetailValue = aMetaRule;
+
+            }
+
+        }
+
+        function showEditModal(aMetaRule) {
+            list.edit.modal.$scope.metaRule = aMetaRule;
+            list.edit.modal.$promise.then(list.edit.modal.show);
+        }
+
+        function getShowDetailValue(){
+            return list.showDetailValue;
+        }
+
+        function getSubjectList(){
+            return list.subject_list;
+        }
+
+        function getObjectList(){
+            return list.object_list;
+        }
+
+        function getActionlist(){
+            return list.action_list;
+        }
+
+        /*
+         * ---- add
+         */
+        function showMapModal() {
+            list.map.modal.$scope.model = list.model;
+            list.map.modal.$promise.then(list.map.modal.show);
+        }
+
+        function refreshRules(){
+
+            list.metaRules = list.model.meta_rules_values;
+            list.table.total(list.getMetaRules().length);
+            list.table.reload();
+
+        }
+
+        function updateModelFromMapSuccess(event, model){
+
+            list.model = model;
+
+            refreshRules();
+
+            list.map.modal.hide();
+
+        }
+
+        /*
+         * ---- unmap
+         */
+
+        function showUnmapModal(metaRule) {
+
+            list.unmap.modal.$scope.model = list.model;
+            list.unmap.modal.$scope.metaRule = metaRule;
+            list.unmap.modal.$promise.then(list.unmap.modal.show);
+
+        }
+
+        function modelUnmappedSuccess(event, model) {
+
+            list.model = model;
+
+            metaRuleService.findSomeWithCallback(list.model.meta_rules, function(meta_rules){
+
+                list.model.meta_rules_values = meta_rules;
+                refreshRules();
+                list.unmap.modal.hide();
+
+            });
+
+
+
+        }
+
+        function modelUnmappedError(event) {
+            list.unmap.modal.hide();
+        }
+
+    }
+
+})();