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-11-04 21:32:15 +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,123 @@
+import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, OnInit } from '@angular/core';
+import { PageEvent } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { Project } 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-project-list',
+    templateUrl: './project-list.component.html',
+    styleUrls: ['./project-list.component.scss'],
+    animations: [
+        trigger('list', [
+            transition(':enter', [
+                query('@animate',
+                    stagger(80, 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 ProjectListComponent implements OnInit {
+    public totalResult: number = 0;
+    public dataSource: MatTableDataSource<Project.AsObject> = new MatTableDataSource<Project.AsObject>();
+    public projectList: Project.AsObject[] = [];
+    public displayedColumns: string[] = ['select', 'name', 'orgName', 'orgDomain', 'type', 'state', 'creationDate', 'changeDate'];
+    public selection: SelectionModel<Project.AsObject> = new SelectionModel<Project.AsObject>(true, []);
+    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+
+    public grid: boolean = true;
+    private subscription?: Subscription;
+
+    constructor(private router: Router,
+        public translate: TranslateService,
+        private route: ActivatedRoute,
+        private projectService: ProjectService,
+        private toast: ToastService,
+    ) { }
+
+    public ngOnInit(): void {
+        this.subscription = this.route.params.subscribe(() => this.getData(10, 0));
+    }
+
+    public isAllSelected(): boolean {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected === numRows;
+    }
+
+    public masterToggle(): void {
+        this.isAllSelected() ?
+            this.selection.clear() :
+            this.dataSource.data.forEach(row => this.selection.select(row));
+    }
+
+    public changePage(event: PageEvent): void {
+        this.getData(event.pageSize, event.pageIndex);
+    }
+
+    public addProject(): void {
+        this.router.navigate(['/projects', 'create']);
+    }
+
+    private async getData(limit: number, offset: number): Promise<void> {
+        this.loadingSubject.next(true);
+        this.projectService.SearchProjects(limit, offset).then(res => {
+            this.projectList = res.toObject().resultList;
+            this.totalResult = res.toObject().totalResult;
+            this.dataSource.data = this.projectList;
+            this.loadingSubject.next(false);
+        }).catch(error => {
+            this.toast.showError(error.message);
+            this.loadingSubject.next(false);
+        });
+    }
+
+    public dateFromTimestamp(date: Timestamp.AsObject): any {
+        const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000);
+        return ts;
+    }
+
+    public reactivateSelectedProjects(): void {
+        const promises = this.selection.selected.map(project => {
+            this.projectService.ReactivateProject(project.id);
+        });
+
+        Promise.all(promises).then(() => {
+            this.toast.showInfo('Reactivated selected projects successfully');
+        }).catch(error => {
+            this.toast.showInfo(error.message);
+        });
+    }
+
+
+    public deactivateSelectedProjects(): void {
+        const promises = this.selection.selected.map(project => {
+            this.projectService.DeactivateProject(project.id);
+        });
+
+        Promise.all(promises).then(() => {
+            this.toast.showInfo('Deactivated selected projects Successfully');
+        }).catch(error => {
+            this.toast.showInfo(error.message);
+        });
+    }
+}