Re-style settings page

resources/frontend_client/app/admin/settings/partials/settings.html

@@ -4,34 +4,24 @@
     </section>
 
     <section>
-        <table class="ContentTable">
-            <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Description</th>
-                    <th>Value</th>
-                    <th></th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr ng-show="!settings">
-                    <td colspan=4>
-                        <mb-loading-icon></mb-loading-icon>
-                        <h3>Loading ...</h3>
-                    </td>
-                </tr>
-                <tr ng-repeat="setting in settings">
-                    <td>{{setting.key}}</td>
-                    <td>{{setting.description}}</td>
-                    <td>
-                        <input class="input block full" type="text" placeholder="{{setting.default}}" ng-model="setting.value"></input>
-                    </td>
-                    <td class="Table-actions">
-                        <button class="Button Button--primary" ng-click="saveSetting(setting)" ng-disabled="!setting.value || setting.value === setting.originalValue">Save</button>
-                        <button class="mx2 Button" ng-class="{'Button--danger': setting.originalValue !== null}" ng-click="deleteSetting(setting)" ng-disabled="!setting.originalValue">Clear</button>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+        <form class="Form-new bordered rounded shadowed" name="form" novalidate>
+            <!-- Form -->
+            <div class="FormInputGroup">
+                <div class="Form-field" ng-repeat="setting in settings" mb-form-field="{{setting.key}}">
+                    <mb-form-label display-name="{{settingName(setting)}}" field-name="{{setting.key}}"></mb-form-label>
+
+                    <input class="Form-input Form-offset full" name="{{setting.key}}" placeholder="{{settingPlaceholder(setting)}}" ng-model="setting.value" />
+                    <span class="Form-charm"></span>
+                </div>
+            </div>
+
+            <!-- Bottom Actions -->
+            <div class="Form-actions">
+                <button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(database, details)" ng-disabled="!form.$valid">
+                    Save
+                </button>
+                <mb-form-message></mb-form-message>
+            </div>
+        </form>
     </section>
 </div>

resources/frontend_client/app/admin/settings/settings.controllers.js

@@ -3,8 +3,8 @@
 
 var SettingsAdminControllers = angular.module('corvusadmin.settings.controllers', ['corvusadmin.settings.services']);
 
-SettingsAdminControllers.controller('SettingsAdminController', ['$scope', 'SettingsAdminServices',
-    function($scope, SettingsAdminServices) {
+SettingsAdminControllers.controller('SettingsAdminController', ['$scope', '$q', 'SettingsAdminServices',
+    function($scope, $q, SettingsAdminServices) {
         $scope.settings = [];
 
         SettingsAdminServices.list(function(results) {
@@ -16,24 +16,34 @@ SettingsAdminControllers.controller('SettingsAdminController', ['$scope', 'Setti
             console.log("Error fetching settings list: ", error);
         });
 
-        $scope.saveSetting = function(setting) {
-            SettingsAdminServices.put({
-                key: setting.key
-            }, setting, function() {
-                setting.originalValue = setting.value;
-            }, function(error) {
-                console.log("Error saving setting: ", error);
-            });
-        };
+        $scope.settingName = function(setting) {
+            // return setting.description.replace(/\.$/, '');
+            return setting.key
+                .replace(/-/g, ' ')
+                .replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); })
+                .replace(/smtp/i, function(a) { return a.toUpperCase(); });
+        }
+
+        $scope.settingPlaceholder = function(setting) {
+            // return setting.default;
+            return setting.description.replace(/\.$/, '');
+        }
 
-        $scope.deleteSetting = function(setting) {
-            SettingsAdminServices.delete({
-                key: setting.key
-            }, function() {
-                setting.value = null;
-                setting.originalValue = null;
+        $scope.save = function() {
+            $scope.$broadcast("form:reset");
+            return $q.all($scope.settings.map(function(setting) {
+                if (setting.value !== setting.originalValue) {
+                    return SettingsAdminServices.put({
+                        key: setting.key
+                    }, setting).$promise.then(function() {
+                        setting.originalValue = setting.value;
+                    });
+                }
+            })).then(function(results) {
+                $scope.$broadcast("form:api-success", "Successfully saved!");
             }, function(error) {
-                console.log("Error deleting setting: ", error);
+                $scope.$broadcast("form:api-error", error);
+                throw error;
             });
         };
     }