Skip to content
Snippets Groups Projects
Commit 5014993d authored by Allen Gilliland's avatar Allen Gilliland
Browse files

updating admin Organization settings page with new forms approach.

parent 7eb3e64e
No related branches found
No related tags found
No related merge requests found
......@@ -2,12 +2,25 @@
/*global btoa*/
/*global $*/
var OrganizationAdminControllers = angular.module('corvusadmin.organization.controllers', ['corvus.services']);
var OrganizationAdminControllers = angular.module('corvusadmin.organization.controllers', [
'corvus.services',
'metabase.forms.services'
]);
OrganizationAdminControllers.controller('OrganizationSettings', ['$scope', 'Organization',
function($scope, Organization) {
OrganizationAdminControllers.controller('OrganizationSettings', ['$scope', 'Organization', 'MetabaseForm',
function($scope, Organization, MetabaseForm) {
var formFields = {
name: 'name',
description: 'description',
logo_url: 'logo_url'
};
$scope.save = function(organization) {
MetabaseForm.clearFormErrors($scope.form, formFields);
$scope.form.$setPristine();
//$scope.form.$setUntouched();
$scope.updateOrg = function(organization) {
Organization.update(organization, function (org) {
$scope.currentOrg = org;
$scope.alertInfo('Organization settings updated!');
......@@ -16,8 +29,7 @@ OrganizationAdminControllers.controller('OrganizationSettings', ['$scope', 'Orga
$scope.refreshCurrentUser();
}, function (error) {
console.log('error', error);
$scope.alertError('Update failed!');
MetabaseForm.parseFormErrors($scope.form, formFields, error);
});
};
......
<section class="wrapper">
<div class="py2">
<h2>Settings</h2>
</div>
<form id="settings_form" novalidate>
<div class="bg-white bordered rounded shadowed">
<div class="p4">
<div class="py1">
<label>Slug:</label>
<input class="input block full" type="text" ng-model="currentOrg.slug" ng-disabled="true"/>
</div>
<!-- breadcrumb / page title -->
<section>
<h2 class="PageTitle">Organization</h2>
</section>
<div class="py1">
<label for="id_name">Name:</label>
<input class="input block full" id="id_name" type="text" ng-model="currentOrg.name"/>
</div>
<section>
<!-- form -->
<div class="p4 bordered">
<form name="form" novalidate>
<div class="FormError" ng-show="form.$error.message">{{form.$error.message}}</div>
<div class="py1">
<label for="id_desc">Description:</label>
<textarea class="input block full" id="id_desc" rows="5" ng-model="currentOrg.description"></textarea>
</div>
<div ng-class="{'FormFieldError': form.slug.$error.message == undefined}">
<label>Slug: <span ng-show="form.slug.$error.message">{{form.slug.$error.message}}</span></label>
<input class="input full" name="slug" ng-model="currentOrg.slug" ng-disabled="true" />
</div>
<div class="py1">
<label for="id_logo">Logo Url:</label>
<input class="input block full" id="id_logo" type="text" ng-model="currentOrg.logo_url"/>
</div>
<div ng-class="{'FormFieldError': form.name.$error.message == undefined}">
<label>Name: <span ng-show="form.name.$error.message">{{form.name.$error.message}}</span></label>
<input class="input full" name="name" ng-model="currentOrg.name" required />
</div>
<div class="py1">
<label>Reporting Timezone:</label>
<label class="Select">
<select ng-model="currentOrg.report_timezone" ng-options="tz for tz in form_input['timezones']">
<option value="">Select a Timezone</option>
</select>
</label>
</div>
<div ng-class="{'FormFieldError': form.description.$error.message == undefined}">
<label>Description: <span ng-show="form.description.$error.message">{{form.description.$error.message}}</span></label>
<input class="input full" name="description" ng-model="currentOrg.description" />
</div>
<div class="py3 px4 border-top clearfix">
<input class="Button Button--primary float-right" type="button" value="Save" ng-click="updateOrg(currentOrg)"/>
<div ng-class="{'FormFieldError': form.logo_url.$error.message == undefined}">
<label>Logo url: <span ng-show="form.logo_url.$error.message">{{form.logo_url.$error.message}}</span></label>
<input class="input full" name="logo_url" ng-model="currentOrg.logo_url" />
</div>
</div>
</form>
<!-- SAVE BUTTON -->
<div>
<button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(currentOrg)" ng-disabled="!form.$valid">
Save
</button>
</div>
</form>
</div>
</section>
'use strict';
/*jslint browser:true */
/*global _*/
/* Services */
var MetabaseFormsService = angular.module('metabase.forms.services', []);
MetabaseFormsService.service('MetabaseForm', function() {
// accepts an instance of angular form.FormController and a map of expected form fields and will simply
// clear any of our error messages from the form instance
this.clearFormErrors = function(form, formFields) {
Object.keys(formFields).forEach(function (key) {
form[formFields[key]].$error.message = undefined;
});
form.$error.message = undefined;
};
// accepts an instance of angular form.FormController, a map of expected form fields, and the http errors
// from an $http call and will parse out any supplied error information and set it on the form
//
// the formFields should come as .. {'api_field_name': 'angularFormFieldName'}
this.parseFormErrors = function(form, formFields, httpErrors) {
if (httpErrors.data.errors) {
// field validation error(s)
Object.keys(httpErrors.data.errors).forEach(function (key) {
if (formFields[key] !== 'undefined') {
// this simply takes the error message from our api response and
// applies it to the correct form field in our angular form object
form[formFields[key]].$error.message = httpErrors.data.errors[key];
}
// NOTE: if we the above conditional fails that means we got an error for a field that our form
// does not seem to be interested in, so we simply skip over it and do nothing
});
} else if (httpErrors.data.message) {
// generic error not attributed to specific field
form.$error.message = httpErrors.data.message;
}
};
});
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment