|
|
@@ -1,5 +1,5 @@
|
|
|
const app = require('../app')
|
|
|
-const { logo, menuIcon, userIcon, dashboardIcon, roleIcon } = require('../assets')
|
|
|
+const { logo, menuIcon, userIcon, dashboardIcon, roleIcon, dropdownIcon, dropupIcon } = require('../assets')
|
|
|
const assets = require('../assets')
|
|
|
|
|
|
app.component('appUserArea', {
|
|
|
@@ -11,8 +11,10 @@ app.component('appUserArea', {
|
|
|
class="md-sidenav-left"
|
|
|
md-is-locked-open="$mdMedia('gt-md')"
|
|
|
md-whiteframe="4"
|
|
|
- layout="column">
|
|
|
+ layout="column"
|
|
|
+ md-theme="nav">
|
|
|
|
|
|
+ <md-content md-theme="nav">
|
|
|
<header>
|
|
|
<div class="logo-container">
|
|
|
<img class="logo" src="${logo}" />
|
|
|
@@ -21,36 +23,67 @@ app.component('appUserArea', {
|
|
|
|
|
|
<app-user-area-nav></app-user-area-nav>
|
|
|
|
|
|
- <md-menu-item ng-repeat="crud in ctrl.cruds">
|
|
|
+ <md-menu-item ng-repeat="crud in $ctrl.cruds">
|
|
|
<md-button ng-href="/{{crud.paramPlural}}">
|
|
|
<md-icon md-svg-icon="{{assets[crud.iconAsset]}}"></md-icon>
|
|
|
{{crud.titlePlural}}
|
|
|
</md-button>
|
|
|
</md-menu-item>
|
|
|
|
|
|
- <h3>
|
|
|
- Administration
|
|
|
- </h3>
|
|
|
+ <div ng-if="$ctrl.api.claims.USER_READ || $ctrl.api.claims.ROLE_READ">
|
|
|
+ <h3>
|
|
|
+ Administration
|
|
|
+ </h3>
|
|
|
|
|
|
- <md-menu-item>
|
|
|
- <md-button ng-href="/users">
|
|
|
- <md-icon md-svg-icon="${userIcon}"></md-icon>
|
|
|
- Users
|
|
|
- </md-button>
|
|
|
- </md-menu-item>
|
|
|
+ <md-menu-item ng-if="$ctrl.api.claims.USER_READ">
|
|
|
+ <md-button ng-href="/users">
|
|
|
+ <md-icon md-svg-icon="${userIcon}"></md-icon>
|
|
|
+ Users
|
|
|
+ </md-button>
|
|
|
+ </md-menu-item>
|
|
|
+ <md-menu-item ng-if="$ctrl.api.claims.ROLE_READ">
|
|
|
+ <md-button ng-href="/roles">
|
|
|
+ <md-icon md-svg-icon="${roleIcon}"></md-icon>
|
|
|
+ Roles
|
|
|
+ </md-button>
|
|
|
+ </md-menu-item>
|
|
|
+ </div>
|
|
|
<!-- <md-menu-item>
|
|
|
<md-button ng-href="/roles">
|
|
|
<md-icon md-svg-icon="${roleIcon}"></md-icon>
|
|
|
Roles
|
|
|
</md-button>
|
|
|
</md-menu-item> -->
|
|
|
+ </md-content>
|
|
|
</md-sidenav>
|
|
|
<md-content flex>
|
|
|
<md-toolbar>
|
|
|
<div class="md-toolbar-tools">
|
|
|
- <md-button class="md-icon-button" aria-label="Settings" ng-hide="$mdMedia('gt-md')" ng-click="ctrl.toggleNav()">
|
|
|
+ <md-button class="md-icon-button" aria-label="Settings" ng-hide="$mdMedia('gt-md')" ng-click="$ctrl.toggleNav()">
|
|
|
<md-icon md-svg-icon="${menuIcon}"></md-icon>
|
|
|
</md-button>
|
|
|
+ <h1 flex>{{$ctrl.titleText}}</h1>
|
|
|
+ <md-menu md-position-mode="target-right target">
|
|
|
+ <md-button class="md-raised md-accent hue-10" ng-click="$mdMenu.open($event)">
|
|
|
+ <md-icon md-svg-icon="${userIcon}"></md-icon>
|
|
|
+ {{$ctrl.api.user.name}}
|
|
|
+ <md-icon md-svg-icon="${dropdownIcon}"></md-icon>
|
|
|
+ </md-button>
|
|
|
+ <md-menu-content>
|
|
|
+ <md-menu-item>
|
|
|
+ <md-button ng-click="$mdMenu.close($event)">
|
|
|
+ <md-icon md-svg-icon="${userIcon}"></md-icon>
|
|
|
+ {{$ctrl.api.user.name}}
|
|
|
+ <md-icon md-svg-icon="${dropupIcon}"></md-icon>
|
|
|
+ </md-button>
|
|
|
+ </md-menu-item>
|
|
|
+ <md-menu-item>
|
|
|
+ <md-button class="md-warn" ng-click="$ctrl.logout()">
|
|
|
+ Log out
|
|
|
+ </md-button>
|
|
|
+ </md-menu-item>
|
|
|
+ </md-menu-content>
|
|
|
+ </md-menu>
|
|
|
</div>
|
|
|
</md-toolbar>
|
|
|
<div layout-padding>
|
|
|
@@ -59,8 +92,14 @@ app.component('appUserArea', {
|
|
|
</md-content>
|
|
|
</div>
|
|
|
`,
|
|
|
- controllerAs: 'ctrl',
|
|
|
- controller: function($mdSidenav, $mdMedia, $scope, cruds) {
|
|
|
+ bindings: {
|
|
|
+ titleText: '@'
|
|
|
+ },
|
|
|
+ controller: function($mdSidenav, $mdMedia, $scope, cruds, api, $location) {
|
|
|
+ this.api = api
|
|
|
+ if (!api.user || !api.token) {
|
|
|
+ $location.url('/login')
|
|
|
+ }
|
|
|
this.cruds = cruds.filter(crud => crud.showNav !== false)
|
|
|
$scope.assets = assets
|
|
|
$scope.$mdMedia = $mdMedia
|
|
|
@@ -68,5 +107,9 @@ app.component('appUserArea', {
|
|
|
this.toggleNav = () => {
|
|
|
$mdSidenav('left').toggle()
|
|
|
}
|
|
|
+ this.logout = async () => {
|
|
|
+ await api.logout()
|
|
|
+ $location.url('/login')
|
|
|
+ }
|
|
|
}
|
|
|
})
|