feat(console): integrate frontend (#95)

* feat: console frontend * chore(dependabot): cycle and npm * chore: rename citadel to zitadel, remove generated files * chore: delete go files * chore(frontend): ci steps * chore: remove docker and envoy files * chore: remove docker file * chore: working dir * chore: run proto build * add console start * chore: restructure folders * chore: remove gui build * statikFs * generate proto for console * add statik import * import * chore: try statik * chore: path * chore: path * chore: script in root * chore: order build steps * chore: go get * chore: folder traversal * chore: non empty test file * chore: gitignore * chore: gitignore * chore: statik path * chore: switch to failing FE build * fix: build * fix: project-grant-test * fix: rm test * add statik.go * go mod tidy * chore: place test, seperate test from build * chore: lint all the world * chore: ci the world instead * chore: tune docker * chore: undo container test * chore: fix run * chore: docker build * chore: test docker build * chore: go build flags * finaly * fix caos_local * go mod Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: Max Peintner <[email protected]>
2026-10-20 22:44:25 +00:00 · 2020-05-13 14:41:43 +02:00
parent 9e32740eb8
commit 92a294f5c8
375 changed files with 97826 additions and 52 deletions
@@ -0,0 +1,110 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTable } from '@angular/material/table';
+import { tap } from 'rxjs/operators';
+import { ProjectRole } from 'src/app/proto/generated/management_pb';
+import { ProjectService } from 'src/app/services/project.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { ProjectRolesDataSource } from './project-roles-datasource';
+
+
+@Component({
+    selector: 'app-project-roles',
+    templateUrl: './project-roles.component.html',
+    styleUrls: ['./project-roles.component.scss'],
+})
+export class ProjectRolesComponent implements AfterViewInit, OnInit {
+    @Input() public projectId: string = '';
+    @Input() public disabled: boolean = false;
+    @Input() public actionsVisible: boolean = false;
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    @ViewChild(MatTable) public table!: MatTable<ProjectRole.AsObject>;
+    public dataSource!: ProjectRolesDataSource;
+    public selection: SelectionModel<ProjectRole.AsObject> = new SelectionModel<ProjectRole.AsObject>(true, []);
+    @Output() public changedSelection: EventEmitter<Array<ProjectRole.AsObject>> = new EventEmitter();
+
+    /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+    public displayedColumns: string[] = ['select', 'name', 'displayname', 'group'];
+
+    constructor(private projectService: ProjectService, private toast: ToastService) { }
+
+    public ngOnInit(): void {
+        this.dataSource = new ProjectRolesDataSource(this.projectService);
+        this.dataSource.loadRoles(this.projectId, 0, 25, 'asc');
+
+        this.selection.changed.subscribe(() => {
+            this.changedSelection.emit(this.selection.selected);
+        });
+    }
+
+    public ngAfterViewInit(): void {
+        this.paginator.page
+            .pipe(
+                tap(() => this.loadRolesPage()),
+            )
+            .subscribe();
+    }
+
+    public selectAllOfGroup(group: string): void {
+        const groupRoles: ProjectRole.AsObject[] = this.dataSource.rolesSubject.getValue()
+            .filter(role => role.group === group);
+        this.selection.select(...groupRoles);
+    }
+
+    private loadRolesPage(): void {
+        this.dataSource.loadRoles(
+            this.projectId,
+            this.paginator.pageIndex,
+            this.paginator.pageSize,
+        );
+    }
+
+    public isAllSelected(): boolean {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.rolesSubject.value.length;
+        return numSelected === numRows;
+    }
+
+    public masterToggle(): void {
+        this.isAllSelected() ?
+            this.selection.clear() :
+            this.dataSource.rolesSubject.value.forEach((row: ProjectRole.AsObject) => this.selection.select(row));
+    }
+
+    public deleteSelectedRoles(): Promise<any> {
+        const oldState = this.dataSource.rolesSubject.value;
+        const indexes = this.selection.selected.map(sel => {
+            return oldState.findIndex(iter => iter.key === sel.key);
+        });
+
+        return Promise.all(this.selection.selected.map(role => {
+            return this.projectService.RemoveProjectRole(role.projectId, role.key);
+        })).then(() => {
+            this.toast.showInfo('Deleted');
+            indexes.forEach(index => {
+                if (index > -1) {
+                    oldState.splice(index, 1);
+                    this.dataSource.rolesSubject.next(this.dataSource.rolesSubject.value);
+                }
+            });
+            this.selection.clear();
+        }).catch(error => {
+            this.toast.showError(error?.message || 'Error');
+        });
+    }
+
+    public removeRole(role: ProjectRole.AsObject, index: number): void {
+        this.projectService
+            .RemoveProjectRole(role.projectId, role.key)
+            .then(() => {
+                this.toast.showInfo('Role removed');
+                this.dataSource.rolesSubject.value.splice(index, 1);
+                this.dataSource.rolesSubject.next(this.dataSource.rolesSubject.value);
+            })
+            .catch(data => {
+                this.toast.showError(data.message);
+            });
+    }
+}