Implemented tenant creation for MPA.

Author: hikalkan

src/AbpCompanyName.AbpProjectName.WebMpa/Views/Tenants/Index.cshtml

@@ -34,7 +34,7 @@
     </div>
 </div>
 
-<div class="modal fade" id="TenantCreateModal" tabindex="-1" role="dialog" aria-labelledby="TenantCreateModalLabel">
+<div class="modal fade" id="TenantCreateModal" tabindex="-1" role="dialog" aria-labelledby="TenantCreateModalLabel" data-backdrop="static">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <form name="tenantCreateForm" role="form" novalidate class="form-validation">
@@ -45,30 +45,27 @@
                 </div>
                 <div class="modal-body">
 
-                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
+                    <div class="form-group">
                         <label>@L("TenancyName")</label>
-                        <input auto-focus class="form-control" type="text" name="TenancyName" ng-model="vm.tenant.tenancyName" required maxlength="@Tenant.MaxTenancyNameLength" ng-pattern="/@Tenant.TenancyNameRegex/">
-                    </div>
-                    <div>
-                        <span class="help-block text-danger" ng-show="!tenantCreateForm.TenancyName.$valid && tenantCreateForm.TenancyName.$dirty">@L("TenantName_Regex_Description")</span>
+                        <input class="form-control" type="text" name="TenancyName" required maxlength="@Tenant.MaxTenancyNameLength" minlength="2">
                     </div>
 
-                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
+                    <div class="form-group">
                         <label>@L("Name")</label>
-                        <input type="text" name="Name" class="form-control" ng-model="vm.tenant.name" required maxlength="@Tenant.MaxNameLength">
+                        <input type="text" name="Name" class="form-control" required maxlength="@Tenant.MaxNameLength">
                     </div>
 
-                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
+                    <div class="form-group">
                         <label>@L("AdminEmailAddress")</label>
-                        <input type="email" name="AdminEmailAddress" class="form-control" ng-model="vm.tenant.adminEmailAddress" required maxlength="@AbpCompanyName.AbpProjectName.Users.User.MaxEmailAddressLength">
+                        <input type="email" name="AdminEmailAddress" class="form-control" required maxlength="@AbpCompanyName.AbpProjectName.Users.User.MaxEmailAddressLength">
                     </div>
 
                     <p>@L("DefaultPasswordIs", AbpCompanyName.AbpProjectName.Users.User.DefaultPassword)</p>
 
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">@L("Cancel")</button>
-                    <button id="TenantCreateModalSaveButton" type="submit" class="btn btn-primary blue" ng-disabled="tenantCreateForm.$invalid"><i class="fa fa-save"></i> <span>@L("Save")</span></button>
+                    <button type="submit" class="btn btn-primary blue" ng-disabled="tenantCreateForm.$invalid"><i class="fa fa-save"></i> <span>@L("Save")</span></button>
                 </div>
             </form>
         </div>

src/AbpCompanyName.AbpProjectName.WebMpa/Views/Tenants/Index.js

@@ -1,10 +1,29 @@
 (function() {
     $(function() {
 
-        $('#TenantCreateModalSaveButton').click(function(e) {
+        var _tenantService = abp.services.app.tenant;
+        var _$modal = $('#TenantCreateModal');
+        var _$form = _$modal.find('form');
+
+        _$form.validate();
+
+        _$form.find('button[type="submit"]').click(function (e) {
             e.preventDefault();
-            alert('saving...');
-        });
 
+            if (!_$form.valid()) {
+                return;
+            }
+
+            var tenant = _$form.serializeFormToObject(); //serializeFormToObject is defined in main.js
+            
+            _tenantService.createTenant(tenant).done(function () {
+                _$modal.modal('hide');
+                location.reload(true); //reload page to see new tenant!
+            });
+        });
+        
+        _$modal.on('shown.bs.modal', function () {
+            _$modal.find('input:not([type=hidden]):first').focus();
+        });
     });
 })();

src/AbpCompanyName.AbpProjectName.WebMpa/js/main.js

@@ -1,3 +1,23 @@
-(function() {
-    //...
-})();
+(function($) {
+    
+    if (!$) {
+        return;
+    }
+
+    $.fn.serializeFormToObject = function () {
+        //serialize to array
+        var data = $(this).serializeArray();
+
+        //add also disabled items
+        $(':disabled[name]', this).each(function () {
+            data.push({ name: this.name, value: $(this).val() });
+        });
+
+        //map to object
+        var obj = {};
+        data.map(function (x) { obj[x.name] = x.value; });
+
+        return obj;
+    }
+
+})(jQuery);