add roles panel
This commit is contained in:
rubikscraft
parent
6b1b973a4e
commit
1fe670a2f0
|
|
@ -1,7 +1,9 @@
|
|||
<footer class="container">
|
||||
<p>
|
||||
<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"
|
||||
>Rubikscraft</a
|
||||
>
|
||||
|
|
|
|||
|
|
@ -11,3 +11,8 @@ footer {
|
|||
span.line {
|
||||
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 { FooterComponent } from './footer.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [FooterComponent],
|
||||
imports: [CommonModule],
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
{{ user?.username }}
|
||||
</span>
|
||||
<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>
|
||||
|
||||
<mat-menu #menu="matMenu" xPosition="before">
|
||||
|
|
@ -40,11 +40,11 @@
|
|||
</div>
|
||||
</span>
|
||||
<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>
|
||||
</button>
|
||||
<button mat-menu-item (click)="doLogout()">
|
||||
<mat-icon>logout</mat-icon>
|
||||
<mat-icon fontSet="material-icons-outlined">logout</mat-icon>
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</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 { SidebarResolverService } from 'src/app/services/sidebar-resolver/sidebar-resolver.service';
|
||||
import { SettingsGeneralRouteModule } from './general/settings-general.module';
|
||||
import { SettingsRolesRouteModule } from './roles/settings-roles.module';
|
||||
import { SettingsSidebarComponent } from './sidebar/settings-sidebar.component';
|
||||
import { SettingsSysprefRouteModule } from './syspref/settings-syspref.module';
|
||||
import { SettingsUsersRouteModule } from './users/settings-users.module';
|
||||
|
|
@ -36,7 +37,19 @@ const SettingsRoutes: PRoutes = [
|
|||
permissions: [Permission.UserManage],
|
||||
page: {
|
||||
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',
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
routerLinkActive="active"
|
||||
[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>
|
||||
</a>
|
||||
</ng-container>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
[routerLink]="'/settings/' + route.path"
|
||||
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>
|
||||
</a>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,11 @@
|
|||
<mat-header-cell *matHeaderCellDef>Roles</mat-header-cell>
|
||||
<mat-cell *matCellDef="let user">
|
||||
<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
|
||||
</mat-chip>
|
||||
<mat-chip [disableRipple]="true" *ngFor="let role of user.roles">
|
||||
|
|
@ -24,14 +28,21 @@
|
|||
<mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
|
||||
<mat-cell *matCellDef="let 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
|
||||
*ngIf="!isSystem(user)"
|
||||
mat-icon-button
|
||||
(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>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
|
@ -57,6 +68,6 @@
|
|||
class="fabbutton fullanimate mat-elevation-z6"
|
||||
(click)="addUser()"
|
||||
>
|
||||
<mat-icon>add</mat-icon>
|
||||
<mat-icon fontSet="material-icons-outlined">person_add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
// have to load a single css file for Angular Material in your app.
|
||||
|
||||
// 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");
|
||||
|
||||
$fontConfig: (
|
||||
|
|
|
|||
Loading…
Reference in a new issue