add roles panel
This commit is contained in:
parent
6b1b973a4e
commit
1fe670a2f0
|
@ -1,7 +1,9 @@
|
||||||
<footer class="container">
|
<footer class="container">
|
||||||
<p>
|
<p>
|
||||||
<span class="line">
|
<span class="line">
|
||||||
Made with 🤍 by
|
Made with
|
||||||
|
<span class="material-icons-outlined heart"> favorite_border </span>
|
||||||
|
by
|
||||||
<a class="link-unstyled" href="https://rubikscraft.nl" target="_blank"
|
<a class="link-unstyled" href="https://rubikscraft.nl" target="_blank"
|
||||||
>Rubikscraft</a
|
>Rubikscraft</a
|
||||||
>
|
>
|
||||||
|
|
|
@ -11,3 +11,8 @@ footer {
|
||||||
span.line {
|
span.line {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.heart {
|
||||||
|
font-size: 22px;
|
||||||
|
translate: 0 25%;
|
||||||
|
}
|
||||||
|
|
|
@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { FooterComponent } from './footer.component';
|
import { FooterComponent } from './footer.component';
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [FooterComponent],
|
declarations: [FooterComponent],
|
||||||
imports: [CommonModule],
|
imports: [CommonModule],
|
||||||
|
|
|
@ -29,7 +29,7 @@
|
||||||
{{ user?.username }}
|
{{ user?.username }}
|
||||||
</span>
|
</span>
|
||||||
<button *ngIf="isLoggedIn" mat-icon-button [matMenuTriggerFor]="menu">
|
<button *ngIf="isLoggedIn" mat-icon-button [matMenuTriggerFor]="menu">
|
||||||
<mat-icon>account_circle</mat-icon>
|
<mat-icon fontSet="material-icons-outlined">account_circle</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<mat-menu #menu="matMenu" xPosition="before">
|
<mat-menu #menu="matMenu" xPosition="before">
|
||||||
|
@ -40,11 +40,11 @@
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
<button *ngIf="canAccessSettings" mat-menu-item (click)="doSettings()">
|
<button *ngIf="canAccessSettings" mat-menu-item (click)="doSettings()">
|
||||||
<mat-icon>settings</mat-icon>
|
<mat-icon fontSet="material-icons-outlined">settings</mat-icon>
|
||||||
<span>Settings</span>
|
<span>Settings</span>
|
||||||
</button>
|
</button>
|
||||||
<button mat-menu-item (click)="doLogout()">
|
<button mat-menu-item (click)="doLogout()">
|
||||||
<mat-icon>logout</mat-icon>
|
<mat-icon fontSet="material-icons-outlined">logout</mat-icon>
|
||||||
<span>Logout</span>
|
<span>Logout</span>
|
||||||
</button>
|
</button>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
<h1>Roles</h1>
|
||||||
|
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
templateUrl: './settings-roles.component.html',
|
||||||
|
})
|
||||||
|
export class SettingsRolesComponent implements OnInit {
|
||||||
|
constructor() {}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { SettingsRolesComponent } from './settings-roles.component';
|
||||||
|
import { SettingsRolesRoutingModule } from './settings-roles.routing.module';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [SettingsRolesComponent],
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
SettingsRolesRoutingModule,
|
||||||
|
],
|
||||||
|
})
|
||||||
|
export class SettingsRolesRouteModule {}
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { RouterModule } from '@angular/router';
|
||||||
|
import { PRoutes } from 'src/app/models/picsur-routes';
|
||||||
|
import { SettingsRolesComponent } from './settings-roles.component';
|
||||||
|
|
||||||
|
const routes: PRoutes = [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
component: SettingsRolesComponent,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [RouterModule.forChild(routes)],
|
||||||
|
exports: [RouterModule],
|
||||||
|
})
|
||||||
|
export class SettingsRolesRoutingModule {}
|
|
@ -5,6 +5,7 @@ import { PermissionGuard } from 'src/app/guards/permission.guard';
|
||||||
import { PRoutes } from 'src/app/models/picsur-routes';
|
import { PRoutes } from 'src/app/models/picsur-routes';
|
||||||
import { SidebarResolverService } from 'src/app/services/sidebar-resolver/sidebar-resolver.service';
|
import { SidebarResolverService } from 'src/app/services/sidebar-resolver/sidebar-resolver.service';
|
||||||
import { SettingsGeneralRouteModule } from './general/settings-general.module';
|
import { SettingsGeneralRouteModule } from './general/settings-general.module';
|
||||||
|
import { SettingsRolesRouteModule } from './roles/settings-roles.module';
|
||||||
import { SettingsSidebarComponent } from './sidebar/settings-sidebar.component';
|
import { SettingsSidebarComponent } from './sidebar/settings-sidebar.component';
|
||||||
import { SettingsSysprefRouteModule } from './syspref/settings-syspref.module';
|
import { SettingsSysprefRouteModule } from './syspref/settings-syspref.module';
|
||||||
import { SettingsUsersRouteModule } from './users/settings-users.module';
|
import { SettingsUsersRouteModule } from './users/settings-users.module';
|
||||||
|
@ -36,7 +37,19 @@ const SettingsRoutes: PRoutes = [
|
||||||
permissions: [Permission.UserManage],
|
permissions: [Permission.UserManage],
|
||||||
page: {
|
page: {
|
||||||
title: 'Users',
|
title: 'Users',
|
||||||
icon: 'people',
|
icon: 'people_outline',
|
||||||
|
category: 'system',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'roles',
|
||||||
|
loadChildren: () => SettingsRolesRouteModule,
|
||||||
|
data: {
|
||||||
|
permissions: [Permission.RoleManage],
|
||||||
|
page: {
|
||||||
|
title: 'Roles',
|
||||||
|
icon: 'admin_panel_settings',
|
||||||
category: 'system',
|
category: 'system',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
routerLinkActive="active"
|
routerLinkActive="active"
|
||||||
[routerLinkActiveOptions]="{ exact: true }"
|
[routerLinkActiveOptions]="{ exact: true }"
|
||||||
>
|
>
|
||||||
<mat-icon mat-list-icon>{{ route.data?.page?.icon }}</mat-icon>
|
<mat-icon fontSet="material-icons-outlined" mat-list-icon>{{ route.data?.page?.icon }}</mat-icon>
|
||||||
<span mat-line>{{ route.data?.page?.title }}</span>
|
<span mat-line>{{ route.data?.page?.title }}</span>
|
||||||
</a>
|
</a>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
@ -24,7 +24,7 @@
|
||||||
[routerLink]="'/settings/' + route.path"
|
[routerLink]="'/settings/' + route.path"
|
||||||
routerLinkActive="active"
|
routerLinkActive="active"
|
||||||
>
|
>
|
||||||
<mat-icon mat-list-icon>{{ route.data?.page?.icon }}</mat-icon>
|
<mat-icon fontSet="material-icons-outlined" mat-list-icon >{{ route.data?.page?.icon }}</mat-icon>
|
||||||
<span mat-line>{{ route.data?.page?.title }}</span>
|
<span mat-line>{{ route.data?.page?.title }}</span>
|
||||||
</a>
|
</a>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
|
@ -10,7 +10,11 @@
|
||||||
<mat-header-cell *matHeaderCellDef>Roles</mat-header-cell>
|
<mat-header-cell *matHeaderCellDef>Roles</mat-header-cell>
|
||||||
<mat-cell *matCellDef="let user">
|
<mat-cell *matCellDef="let user">
|
||||||
<mat-chip-list aria-label="User Roles">
|
<mat-chip-list aria-label="User Roles">
|
||||||
<mat-chip [disableRipple]="true" [disabled]="true" *ngIf="isSystem(user)">
|
<mat-chip
|
||||||
|
[disableRipple]="true"
|
||||||
|
[disabled]="true"
|
||||||
|
*ngIf="isSystem(user)"
|
||||||
|
>
|
||||||
System
|
System
|
||||||
</mat-chip>
|
</mat-chip>
|
||||||
<mat-chip [disableRipple]="true" *ngFor="let role of user.roles">
|
<mat-chip [disableRipple]="true" *ngFor="let role of user.roles">
|
||||||
|
@ -24,14 +28,21 @@
|
||||||
<mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
|
<mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
|
||||||
<mat-cell *matCellDef="let user">
|
<mat-cell *matCellDef="let user">
|
||||||
<button mat-icon-button (click)="editUser(user)">
|
<button mat-icon-button (click)="editUser(user)">
|
||||||
<mat-icon aria-label="Edit">edit</mat-icon>
|
<mat-icon fontSet="material-icons-outlined" aria-label="Edit"
|
||||||
|
>edit</mat-icon
|
||||||
|
>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
*ngIf="!isSystem(user)"
|
*ngIf="!isSystem(user)"
|
||||||
mat-icon-button
|
mat-icon-button
|
||||||
(click)="deleteUser(user)"
|
(click)="deleteUser(user)"
|
||||||
>
|
>
|
||||||
<mat-icon class="icon-red" aria-label="Delete">delete</mat-icon>
|
<mat-icon
|
||||||
|
fontSet="material-icons-outlined"
|
||||||
|
class="icon-red"
|
||||||
|
aria-label="Delete"
|
||||||
|
>delete</mat-icon
|
||||||
|
>
|
||||||
</button>
|
</button>
|
||||||
</mat-cell>
|
</mat-cell>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
@ -57,6 +68,6 @@
|
||||||
class="fabbutton fullanimate mat-elevation-z6"
|
class="fabbutton fullanimate mat-elevation-z6"
|
||||||
(click)="addUser()"
|
(click)="addUser()"
|
||||||
>
|
>
|
||||||
<mat-icon>add</mat-icon>
|
<mat-icon fontSet="material-icons-outlined">person_add</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
// have to load a single css file for Angular Material in your app.
|
// have to load a single css file for Angular Material in your app.
|
||||||
|
|
||||||
// Fonts
|
// Fonts
|
||||||
@import "https://fonts.googleapis.com/icon?family=Material+Icons+Round";
|
@import "https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp";
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
|
||||||
|
|
||||||
$fontConfig: (
|
$fontConfig: (
|
||||||
|
|
Loading…
Reference in a new issue