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-10 08:05:12 +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,33 @@
+<h1 mat-dialog-title>
+    <span class="title">{{'MEMBER.ADD' | translate}}</span>
+</h1>
+<p class="desc"> {{'ORG_DETAIL.MEMBER.ADDDESCRIPTION' | translate}}</p>
+<div mat-dialog-content>
+    <app-search-user-autocomplete (selectionChanged)="users = $event"></app-search-user-autocomplete>
+
+    <mat-form-field class="full-width" appearance="outline"
+        *ngIf="creationType === CreationType.PROJECT_OWNED || creationType === CreationType.PROJECT_GRANTED">
+        <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
+        <mat-select [(ngModel)]="roles" multiple>
+            <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
+                {{ 'ROLES.'+role | translate }}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+
+    <ng-container *ngIf="creationType === CreationType.ORG">
+        <app-org-member-roles-autocomplete (selectionChanged)="setOrgMemberRoles($event)">
+        </app-org-member-roles-autocomplete>
+    </ng-container>
+
+</div>
+<div mat-dialog-actions class="action">
+    <button mat-button (click)="closeDialog()">
+        cancel
+    </button>
+
+    <button [disabled]="users.length == 0 || roles.length == 0" color="primary" mat-raised-button class="ok-button"
+        (click)="closeDialogWithSuccess()">
+        Add
+    </button>
+</div>
@@ -0,0 +1,25 @@
+.title {
+    font-size: 1.2rem;
+  }
+  
+  .desc {
+      color: #81868a;
+      font-size: .9rem;
+  }
+
+ .full-width {
+     width: 100%;
+ }
+  
+  .action {
+    display: flex;
+    justify-content: flex-end;
+  
+    .ok-button {
+      margin-left: 0.5rem;
+    }
+  
+    button {
+      border-radius: 0.5rem;
+    }
+  }
@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectMemberCreateDialogComponent } from './project-member-create-dialog.component';
+
+
+describe('AddMemberDialogComponent', () => {
+    let component: ProjectMemberCreateDialogComponent;
+    let fixture: ComponentFixture<ProjectMemberCreateDialogComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [ProjectMemberCreateDialogComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ProjectMemberCreateDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
@@ -0,0 +1,60 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ProjectRole, User } from 'src/app/proto/generated/management_pb';
+import { ProjectService } from 'src/app/services/project.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+export enum CreationType {
+    PROJECT_OWNED = 0,
+    PROJECT_GRANTED = 1,
+    ORG = 2,
+}
+@Component({
+    selector: 'app-project-member-create-dialog',
+    templateUrl: './project-member-create-dialog.component.html',
+    styleUrls: ['./project-member-create-dialog.component.scss'],
+})
+export class ProjectMemberCreateDialogComponent {
+    public projectId: string = '';
+    public creationType!: CreationType;
+    public users: Array<User.AsObject> = [];
+    public roles: Array<ProjectRole.AsObject> | string[] = [];
+    public CreationType: any = CreationType;
+    public memberRoleOptions: string[] = [];
+    constructor(
+        private projectService: ProjectService,
+        public dialogRef: MatDialogRef<ProjectMemberCreateDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any,
+        toastService: ToastService,
+    ) {
+        this.creationType = data.creationType;
+        this.projectId = data.projectId;
+
+        if (this.creationType === CreationType.PROJECT_GRANTED) {
+            this.projectService.GetProjectGrantMemberRoles().then(resp => {
+                this.memberRoleOptions = resp.toObject().rolesList;
+            }).catch(error => {
+                toastService.showError(error.message);
+            });
+        } else if (this.creationType === CreationType.PROJECT_OWNED) {
+            this.projectService.GetProjectMemberRoles().then(resp => {
+                this.memberRoleOptions = resp.toObject().rolesList;
+                console.log(this.memberRoleOptions);
+            }).catch(error => {
+                toastService.showError(error.message);
+            });
+        }
+    }
+
+    public closeDialog(): void {
+        this.dialogRef.close(false);
+    }
+
+    public closeDialogWithSuccess(): void {
+        this.dialogRef.close({ users: this.users, roles: this.roles });
+    }
+
+    public setOrgMemberRoles(roles: string[]): void {
+        this.roles = roles;
+    }
+}
@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { TranslateModule } from '@ngx-translate/core';
+import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module';
+
+import {
+    OrgMemberRolesAutocompleteModule,
+} from '../../pages/orgs/org-member-roles-autocomplete/org-member-roles-autocomplete.module';
+import { SearchRolesAutocompleteModule } from '../search-roles-autocomplete/search-roles-autocomplete.module';
+import { ProjectMemberCreateDialogComponent } from './project-member-create-dialog.component';
+
+@NgModule({
+    declarations: [ProjectMemberCreateDialogComponent],
+    imports: [
+        CommonModule,
+        MatDialogModule,
+        MatButtonModule,
+        TranslateModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        FormsModule,
+        SearchUserAutocompleteModule,
+        SearchRolesAutocompleteModule,
+        OrgMemberRolesAutocompleteModule,
+    ],
+    entryComponents: [
+        ProjectMemberCreateDialogComponent,
+    ],
+})
+export class ProjectMemberCreateDialogModule { }