Feature #3748: Add views to group create wizard

src/sunstone/public/app/tabs/groups-tab/form-panels/create.js

@@ -9,6 +9,7 @@ define(function(require) {
   var Locale = require('utils/locale');
   var UserCreation = require('tabs/users-tab/utils/user-creation');
   var Tips = require('utils/tips');
+  var Views = require('tabs/groups-tab/utils/views');
 
   /*
     TEMPLATES
@@ -64,9 +65,64 @@ define(function(require) {
    */
 
   function _htmlWizard() {
+    var filtered_views = {
+      cloud : [],
+      advanced : [],
+      vcenter : [],
+      other : []
+    };
+
+    var view_info;
+    $.each(config['all_views'], function(index, view_id) {
+      view_info = Views.info[view_id];
+      if (view_info) {
+        switch (view_info.type) {
+          case 'advanced':
+            filtered_views.advanced.push(view_info);
+            break;
+          case 'cloud':
+            filtered_views.cloud.push(view_info);
+            break;
+          case 'vcenter':
+            filtered_views.vcenter.push(view_info);
+            break;
+          default:
+            filtered_views.other.push({
+              id: view_id,
+              name: view_id,
+              description: null,
+              type: "other"
+            });
+            break;
+        }
+      } else {
+        filtered_views.other.push({
+          id: view_id,
+          name: view_id,
+          description: null,
+          type: "other"
+        });
+      }
+    });
+
+    var viewTypes = [];
+
+    $.each(filtered_views, function(view_type, views){
+      if (views.length > 0) {
+        viewTypes.push(
+          {
+            'name': Views.types[view_type].name,
+            'description': Views.types[view_type].description,
+            'preview': Views.types[view_type].preview,
+            'views': views
+          });
+      }
+    });
+
     return TemplateWizardHTML({
       'formPanelId': this.formPanelId,
-      'userCreationHTML': this.userCreation.html()
+      'userCreationHTML': this.userCreation.html(),
+      'viewTypes': viewTypes
     });
   }
 
@@ -98,20 +154,20 @@ define(function(require) {
 
     $("#group_res_net", context).prop("checked", false);
 
-    /* TODO
-
-    generateAdminViewsSelect(context, "groupadmin");
+    _generateViewsSelect(context, "admin", "groupadmin");
     $(context).off("change", ".admin_view_input");
     $(context).on("change", ".admin_view_input", function(){
-      generateAdminViewsSelect(context);
-    })
+      _generateViewsSelect(context, "admin");
+    });
 
-    generateUserViewsSelect(context, "cloud")
-    $(context).off("change", ".user_view_input")
+    _generateViewsSelect(context, "user", "cloud");
+    $(context).off("change", ".user_view_input");
     $(context).on("change", ".user_view_input", function(){
-      generateUserViewsSelect(context)
-    })
-    */
+      _generateViewsSelect(context, "user");
+    });
+
+    $("input#group_view_cloud").attr('checked','checked').change();
+    $("input#group_admin_view_groupadmin").attr('checked','checked').change();
   }
 
   function _submitWizard(context) {
@@ -146,7 +202,7 @@ define(function(require) {
     if ( $('#shared_resources', context).prop('checked') ){
       group_json['group']['shared_resources'] = "VM+DOCUMENT";
     }
-/*
+
     group_json['group']['views'] = [];
 
     $.each($('[id^="group_view"]:checked', context), function(){
@@ -168,7 +224,7 @@ define(function(require) {
     if (default_view != undefined){
       group_json['group']['default_admin_view'] = default_view;
     }
-*/
+
     Sunstone.runAction("Group.create",group_json);
     return false;
   }
@@ -180,4 +236,24 @@ define(function(require) {
   function _fill(context, element) {
 
   }
+
+  function _generateViewsSelect(context, idPrefix, value) {
+    var views = [];
+    var old_value = value || $("#"+idPrefix+"_view_default", context).val();
+
+    var html = '<option id="" name="" value=""></option>';
+
+    $("."+idPrefix+"_view_input:checked", context).each(function(){
+      var name = (Views.info[this.value] ? Views.info[this.value].name : this.value);
+
+      html += '<option value="'+this.value+'">'+name+'</option>';
+    });
+
+    $("select#"+idPrefix+"_view_default", context).html(html);
+
+    if (old_value) {
+      $("#"+idPrefix+"_view_default", context).val(old_value).change();
+    }
+  }
+
 });

src/sunstone/public/app/tabs/groups-tab/form-panels/create/wizard.hbs

@@ -25,7 +25,65 @@
     </div>
     <div class="row">
       <div class="large-12 columns">
-        {{! TODO insert_views(dialog_name)}}
+        <div class="row">
+          <div class="large-6 columns">
+            <label for="user_view_default">{{tr "Default Users View"}}
+            </label>
+            <select id="user_view_default">
+            </select>
+          </div>
+          <div class="large-6 columns">
+            <label for="admin_view_default">{{tr "Default Admin View"}}
+            </label>
+            <select id="admin_view_default">
+            </select>
+          </div>
+        </div>
+        <br>
+        {{#each viewTypes}}
+        <div class="row">
+          <div class="large-7 columns">
+            <h4>{{name}}
+              {{#if description}}
+              <span class="tip">{{description}}</span>
+              {{/if}}
+            </h4>
+            <table class="dataTable extended_table">
+              <tr>
+                <th style='width: 60%;'></th>
+                <th>{{tr "Group Users"}}</th>
+                <th>{{tr "Group Admins"}}</th>
+              </tr>
+              {{#each views}}
+              <tr>
+                <td>
+                  {{name}} {{tr "View"}}
+                  {{#if description}}
+                  <span class="tip">{{description}}</span>
+                  {{/if}}
+                </td>
+                <td>
+                  <input class="user_view_input" type="checkbox"
+                  id="group_view_{{id}}"
+                  value="{{id}}"/>
+                </td>
+                <td>
+                  <input class="admin_view_input" type="checkbox"
+                  id="group_admin_view_{{id}}"
+                  value="{{id}}"/>
+                </td>
+              </tr>
+              {{/each}}
+            </table>
+          </div>
+          <div class="large-5 columns" style="text-align: center">
+            {{#if preview}}
+            <img src="images/{{preview}}" style="height: 200px;">
+            {{/if}}
+          </div>
+        </div>
+        <br>
+        {{/each}}
       </div>
     </div>
   </div>

src/sunstone/public/app/tabs/groups-tab/panels/info.js

@@ -5,7 +5,7 @@ define(function(require) {
   
   var TemplateInfo = require('hbs!./info/html');
   var Locale = require('utils/locale');
-  var ViewsInfo = require('../utils/viewsInfo');
+  var Views = require('../utils/views');
   var Tips = require('utils/tips');
 
   /*
@@ -113,7 +113,7 @@ define(function(require) {
       $.each(viewsStr.split(','), function(index, view){
         var viewElem;
 
-        var knownView = ViewsInfo[view];
+        var knownView = Views.info[view];
         if (knownView){
           viewElem = {
             'name': knownView.name,

src/sunstone/public/app/tabs/groups-tab/utils/views.js

@@ -1,7 +1,30 @@
 define(function(require) {
   var Locale = require('utils/locale');
 
-  return {
+  var _view_types = {
+    advanced : {
+      name: 'Advanced Layout',
+      description : Locale.tr("This layout exposes a complete view of the cloud, allowing administrators and advanced users to have full control of any physical or virtual resource of the cloud."),
+      preview: "advanced_layout.png"
+    },
+    cloud : {
+      name: 'Cloud Layout',
+      description : Locale.tr("This layout exposes a simplified version of the cloud where group administrators and cloud end-users will be able to manage any virtual resource of the cloud, without taking care of the physical resources management."),
+      preview: "cloud_layout.png"
+    },
+    vcenter : {
+      name: 'vCenter Layout',
+      description : Locale.tr("Set of views to present the valid operation against a vCenter infrastructure"),
+      preview: "vcenter_layout.png"
+    },
+    other : {
+      name: 'Other Layouts',
+      description : '',
+      preview: null
+    }
+  };
+
+  var _views_info = {
     admin : {
       id: 'admin',
       name: "Admin",
@@ -45,4 +68,10 @@ define(function(require) {
       type: "vcenter"
     }
   };
+
+  return {
+    'info': _views_info,
+    'types': _view_types
+  };
+
 });