Add layouts support.

This commit is contained in:
Arik Fraimovich 2018-01-09 12:06:46 +02:00
parent 55b852f8ee
commit 5b938f2c3e
6 changed files with 75 additions and 34 deletions

View File

@ -7,6 +7,73 @@ const logger = debug('redash:app-view');
const handler = new ErrorHandler();
const layouts = {
default: {
showHeader: true,
showFooter: true,
bodyClass: false,
},
fixed: {
showHeader: true,
showFooter: false,
bodyClass: 'fixed-layout',
},
defaultSignedOut: {
showHeader: false,
showFooter: false,
},
};
function selectLayout(route) {
let layout = layouts.default;
if (route.layout) {
layout = layouts[route.layout];
} else if (!route.authenticated) {
layout = layout.defaultSignedOut;
}
return layout;
}
class AppViewComponent {
constructor($rootScope, $route, Auth) {
this.$rootScope = $rootScope;
this.showHeaderAndFooter = false;
this.layout = layouts.defaultSignedOut;
this.handler = handler;
$rootScope.$on('$routeChangeStart', (event, route) => {
this.handler.reset();
if (route.$$route.authenticated) {
// For routes that need authentication, check if session is already
// loaded, and load it if not.
logger('Requested authenticated route: ', route);
if (Auth.isAuthenticated()) {
this.applyLayout(route.$$route);
} else {
event.preventDefault();
// Auth.requireSession resolves only if session loaded
Auth.requireSession().then(() => {
this.applyLayout(route.$$route);
$route.reload();
});
}
} else {
this.applyLayout(route.$$route);
}
});
$rootScope.$on('$routeChangeError', (event, current, previous, rejection) => {
throw new PromiseRejectionError(rejection);
});
}
applyLayout(route) {
this.layout = selectLayout(route);
this.$rootScope.bodyClass = this.layout.bodyClass;
}
}
export default function init(ngModule) {
ngModule.factory('$exceptionHandler', () => function exceptionHandler(exception) {
handler.process(exception);
@ -14,35 +81,6 @@ export default function init(ngModule) {
ngModule.component('appView', {
template,
controller($rootScope, $route, Auth) {
this.showHeaderAndFooter = false;
this.handler = handler;
$rootScope.$on('$routeChangeStart', (event, route) => {
this.handler.reset();
if (route.$$route.authenticated) {
// For routes that need authentication, check if session is already
// loaded, and load it if not.
logger('Requested authenticated route: ', route);
if (Auth.isAuthenticated()) {
this.showHeaderAndFooter = true;
} else {
event.preventDefault();
// Auth.requireSession resolves only if session loaded
Auth.requireSession().then(() => {
this.showHeaderAndFooter = true;
$route.reload();
});
}
} else {
this.showHeaderAndFooter = false;
}
});
$rootScope.$on('$routeChangeError', (event, current, previous, rejection) => {
throw new PromiseRejectionError(rejection);
});
},
controller: AppViewComponent,
});
}

View File

@ -1,6 +1,6 @@
<app-header ng-if="$ctrl.showHeaderAndFooter"></app-header>
<app-header ng-if="$ctrl.layout.showHeader"></app-header>
<div ng-if="$ctrl.handler.error" class="container-fluid">
<div class="alert alert-danger">{{ $ctrl.handler.error.message }}</div>
</div>
<div ng-if="!$ctrl.handler.error" ng-view></div>
<footer ng-if="$ctrl.showHeaderAndFooter"></footer>
<footer ng-if="$ctrl.layout.showFooter"></footer>

View File

@ -11,7 +11,7 @@
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
</head>
<body>
<body ng-class="bodyClass">
<section>
<app-view></app-view>
</section>

View File

@ -11,7 +11,7 @@
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
</head>
<body>
<body ng-class="bodyClass">
<section>
<app-view></app-view>
</section>

View File

@ -112,6 +112,7 @@ export default function init(ngModule) {
return {
'/queries/new': {
template,
layout: 'fixed',
controller: 'QuerySourceCtrl',
reloadOnSearch: false,
resolve: {
@ -129,6 +130,7 @@ export default function init(ngModule) {
},
'/queries/:queryId/source': {
template,
layout: 'fixed',
controller: 'QuerySourceCtrl',
reloadOnSearch: false,
resolve: {

View File

@ -424,6 +424,7 @@ export default function init(ngModule) {
return {
'/queries/:queryId': {
template,
layout: 'fixed',
controller: 'QueryViewCtrl',
reloadOnSearch: false,
resolve: {