mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-14 18:05:12 +00:00
feat(console): org managers, refactor, bugfixes (#226)
* resourceowner header, i18n * password policy validators, roles required field * use angular pattern instead of custom validator * user detail fixes, mfa qr code, add org * use mgmt for mfa list * fetch owned projects * search project * seperate owned from granted projects * lint * fix granted project grid * refactor project detail * disable zitadel apps * refactor project contributors * changed i18n * hide meta nav * mobile meta layout * refactor contributor name * refactor org contributors * org i18n, org member detail view
This commit is contained in:
Max Peintner
+58
@@ -0,0 +1,58 @@
|
||||
<div class="view-toggle">
|
||||
<div class="anim-list" @list *ngIf="selection.selected.length > 0">
|
||||
<!-- <ng-template appHasRole [appHasRole]="['project.write']">
|
||||
<button (click)="deactivateProjects(selection.selected)" @animate
|
||||
matTooltip="{{'PROJECT.TABLE.DEACTIVATE' | translate}}" class="left-button" mat-icon-button>
|
||||
<i class="las la-toggle-off"></i>
|
||||
</button>
|
||||
<button @animate (click)="reactivateProjects(selection.selected)" class="left-button"
|
||||
matTooltip="{{'PROJECT.TABLE.ACTIVATE' | translate}}" mat-icon-button>
|
||||
<i class="las la-toggle-on"></i>
|
||||
</button>
|
||||
</ng-template> -->
|
||||
</div>
|
||||
<button [disabled]="selection.selected.length > 0" (click)="changedView.emit(true)" mat-icon-button>
|
||||
<i class="show list view las la-th-list"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="container">
|
||||
<mat-progress-bar *ngIf="loading" class="spinner" color="accent" mode="indeterminate"></mat-progress-bar>
|
||||
<div class="item card" *ngFor="let item of items; index as i" (click)="selectItem(item, $event)"
|
||||
[ngClass]="{ selected: selection.isSelected(item), inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}">
|
||||
<mat-icon matTooltip="select item" (click)="selection.toggle(item)" class="selection-icon">
|
||||
check_circle</mat-icon>
|
||||
<div class="text-part">
|
||||
<span *ngIf="item.changeDate" class="top">last modified on
|
||||
{{
|
||||
dateFromTimestamp(item.changeDate) | date: 'EEE dd. MMM, HH:mm'
|
||||
}}</span>
|
||||
<span class="name" *ngIf="item.projectName">{{ item.projectName }}</span>
|
||||
<span class="description" *ngIf="item.state">{{'PROJECT.STATE.'+item.state | translate}}</span>
|
||||
<span class="description">{{'PROJECT.TYPE.TITLE' | translate}}:
|
||||
{{'PROJECT.TYPE.'+ProjectType.PROJECTTYPE_GRANTED | translate}}</span>
|
||||
<span *ngIf="item.changeDate" class="created">created on
|
||||
{{
|
||||
dateFromTimestamp(item.creationDate) | date: 'EEE dd. MMM, HH:mm'
|
||||
}}</span>
|
||||
<span class="fill-space"></span>
|
||||
<div class="icons">
|
||||
<mat-icon class="icon">apps</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
<button [matMenuTriggerFor]="editMenu" class="edit-button" mat-icon-button>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #editMenu="matMenu">
|
||||
<ng-template matMenuContent>
|
||||
<button (click)="selectItem(item)" mat-menu-item>
|
||||
{{'ACTIONS.VIEW' | translate}}
|
||||
</button>
|
||||
<button (click)="selection.toggle(item)" mat-menu-item>
|
||||
{{'ACTIONS.INFO' | translate}}
|
||||
</button>
|
||||
</ng-template>
|
||||
</mat-menu>
|
||||
</div>
|
||||
<p class="n-items" *ngIf="!loading && items.length === 0">{{'PROJECT.PAGES.NOITEMS' | translate}}</p>
|
||||
</div>
|
||||
+219
@@ -0,0 +1,219 @@
|
||||
.view-toggle {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: .5rem;
|
||||
border-bottom: 1px solid #2d2e30;
|
||||
|
||||
.anim-list {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
button {
|
||||
&.left-button {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -1rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
h2 {
|
||||
padding: 0 1rem;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
margin: 1rem;
|
||||
flex-basis: 250px;
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
min-height: 166px;
|
||||
|
||||
&.inactive {
|
||||
color: #81868a;
|
||||
}
|
||||
|
||||
.selection-icon {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: -12px;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.text-part {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 70px;
|
||||
padding: 0.5rem 0;
|
||||
|
||||
.top {
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0;
|
||||
margin-top: .5rem;
|
||||
color: #81868a;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.created {
|
||||
font-size: 0.8rem;
|
||||
color: #81868a;
|
||||
}
|
||||
|
||||
.organization {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
|
||||
.org_avatar {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.icons {
|
||||
margin-top: 1rem;
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
|
||||
.icon {
|
||||
margin-right: 3px;
|
||||
font-size: 1.3rem;
|
||||
height: 1.4rem;
|
||||
color: #81868a;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
.selection-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.text-part {
|
||||
.icons {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.text-part {
|
||||
.icons {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-project-button {
|
||||
z-index: 100;
|
||||
flex-basis: 250px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
min-height: 166px;
|
||||
border-radius: 0.5rem;
|
||||
margin: 1rem;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
margin-bottom: 1rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #ffffff25;
|
||||
|
||||
.icon,
|
||||
span {
|
||||
&.disabled {
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.n-items {
|
||||
flex-basis: 100%;
|
||||
padding: 0 1rem;
|
||||
font-size: .8rem;
|
||||
color: #81868a;
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { GrantedProjectGridComponent } from './granted-project-grid.component';
|
||||
|
||||
describe('GridComponent', () => {
|
||||
let component: GrantedProjectGridComponent;
|
||||
let fixture: ComponentFixture<GrantedProjectGridComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [GrantedProjectGridComponent],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(GrantedProjectGridComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,65 @@
|
||||
import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
|
||||
import { SelectionModel } from '@angular/cdk/collections';
|
||||
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
|
||||
import { ProjectGrantView, ProjectState, ProjectType, ProjectView } from 'src/app/proto/generated/management_pb';
|
||||
import { ProjectService } from 'src/app/services/project.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-granted-project-grid',
|
||||
templateUrl: './granted-project-grid.component.html',
|
||||
styleUrls: ['./granted-project-grid.component.scss'],
|
||||
animations: [
|
||||
trigger('list', [
|
||||
transition(':enter', [
|
||||
query('@animate',
|
||||
stagger(100, animateChild()),
|
||||
),
|
||||
]),
|
||||
]),
|
||||
trigger('animate', [
|
||||
transition(':enter', [
|
||||
style({ opacity: 0, transform: 'translateY(-100%)' }),
|
||||
animate('100ms', style({ opacity: 1, transform: 'translateY(0)' })),
|
||||
]),
|
||||
transition(':leave', [
|
||||
style({ opacity: 1, transform: 'translateY(0)' }),
|
||||
animate('100ms', style({ opacity: 0, transform: 'translateY(100%)' })),
|
||||
]),
|
||||
]),
|
||||
],
|
||||
})
|
||||
export class GrantedProjectGridComponent {
|
||||
@Input() items: Array<ProjectGrantView.AsObject> = [];
|
||||
@Output() newClicked: EventEmitter<boolean> = new EventEmitter();
|
||||
@Output() changedView: EventEmitter<boolean> = new EventEmitter();
|
||||
@Input() loading: boolean = false;
|
||||
|
||||
public selection: SelectionModel<ProjectView.AsObject> = new SelectionModel<ProjectView.AsObject>(true, []);
|
||||
public selectedIndex: number = -1;
|
||||
|
||||
public showNewProject: boolean = false;
|
||||
public ProjectState: any = ProjectState;
|
||||
public ProjectType: any = ProjectType;
|
||||
|
||||
constructor(private router: Router, private projectService: ProjectService, private toast: ToastService) { }
|
||||
|
||||
public selectItem(item: ProjectGrantView.AsObject, event?: any): void {
|
||||
if (event && !event.target.classList.contains('mat-icon')) {
|
||||
this.router.navigate(['projects', item.projectId, 'grant', `${item.id}`]);
|
||||
} else if (!event) {
|
||||
this.router.navigate(['projects', item.projectId, 'grant', `${item.id}`]);
|
||||
}
|
||||
}
|
||||
|
||||
public addItem(): void {
|
||||
this.newClicked.emit(true);
|
||||
}
|
||||
|
||||
public dateFromTimestamp(date: Timestamp.AsObject): any {
|
||||
const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000);
|
||||
return ts;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user