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-30 19:12:16 +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,54 @@
+<form>
+    <mat-form-field *ngIf="target == UserTarget.SELF" appearance="outline" class="full-width">
+        <mat-label>Organizations User Email</mat-label>
+
+        <input matInput *ngIf="singleOutput" type="text" placeholder="Search for the user email" #usernameInput
+            [formControl]="myControl" [matAutocomplete]="auto" />
+
+        <mat-chip-list *ngIf="!singleOutput" #chipList aria-label="useremail selection">
+            <mat-chip class="chip" *ngFor="let selecteduser of users" [selectable]="selectable" [removable]="removable"
+                (removed)="remove(selecteduser)">
+                {{ selecteduser?.firstName }} {{selecteduser.lastName}} | <small> {{selecteduser.email}}</small>
+                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+            </mat-chip>
+            <input placeholder="{{'ORG_DETAIL.MEMBER.EMAIL' | translate}}" #usernameInput [formControl]="myControl"
+                [matAutocomplete]="auto" [matChipInputFor]="chipList"
+                [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
+                (matChipInputTokenEnd)="add($event)" />
+        </mat-chip-list>
+
+        <!-- <mat-hint *ngIf="hint">
+            {{hint}}
+            <a (click)=" changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>
+        </mat-hint> -->
+
+        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [displayWith]="displayFn">
+            <mat-option *ngIf="isLoading" class="is-loading">
+                <mat-spinner diameter="30"></mat-spinner>
+            </mat-option>
+            <mat-option *ngFor="let user of filteredUsers" [value]="user">
+                {{user.firstName}} {{user.lastName}}
+                <small>{{user.email}}</small>
+            </mat-option>
+        </mat-autocomplete>
+    </mat-form-field>
+
+    <div *ngIf="target == UserTarget.EXTERNAL" class="line">
+        <mat-form-field appearance="outline">
+            <mat-label>Global User Email</mat-label>
+            <input matInput type="text" [formControl]="globalEmailControl" />
+        </mat-form-field>
+
+        <button mat-icon-button (click)="getGlobalUser()">
+            <mat-icon>search</mat-icon>
+        </button>
+    </div>
+
+    <p *ngIf="target == UserTarget.EXTERNAL && users.length > 0">{{'USER.SEARCH.FOUND' | translate}}: <span
+            *ngFor="let user of users; index as i">{{user.email}} <mat-icon class="sm-dlt" (click)="users.splice(i, 1)">
+                remove_circle</mat-icon></span></p>
+
+    <p class="target-desc">{{(target == UserTarget.SELF ? 'USER.TARGET.SELF' : 'USER.TARGET.EXTERNAL') | translate}}
+        <a (click)="changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>
+    </p>
+</form>
@@ -0,0 +1,36 @@
+.full-width {
+    width: 100%;
+}
+
+.target-desc {
+    color: #81868a;
+    font-size: .8rem;
+    margin: 0;
+    margin-bottom: 1rem;
+    a {
+        color: white;
+        &:hover {
+            cursor: pointer;
+            color: white;
+            text-decoration: underline;
+        }
+    }
+}
+
+.line {
+    width: 100%;
+    display: flex;
+
+    mat-form-field {
+        flex: 1;
+    }
+
+    button {
+        margin-top: 1rem;
+    }
+}
+
+.sm-dlt {
+    cursor: pointer;
+    font-size: .8rem;
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchUserAutocompleteComponent } from './search-user-autocomplete.component';
+
+describe('SearchUserAutocompleteComponent', () => {
+    let component: SearchUserAutocompleteComponent;
+    let fixture: ComponentFixture<SearchUserAutocompleteComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [SearchUserAutocompleteComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(SearchUserAutocompleteComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
@@ -0,0 +1,146 @@
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatChipInputEvent } from '@angular/material/chips';
+import { from, of, Subject } from 'rxjs';
+import { debounceTime, switchMap, takeUntil, tap } from 'rxjs/operators';
+import { SearchMethod, User, UserSearchKey, UserSearchQuery } from 'src/app/proto/generated/management_pb';
+import { MgmtUserService } from 'src/app/services/mgmt-user.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+export enum UserTarget {
+    SELF = 'self',
+    EXTERNAL = 'external',
+}
+
+@Component({
+    selector: 'app-search-user-autocomplete',
+    templateUrl: './search-user-autocomplete.component.html',
+    styleUrls: ['./search-user-autocomplete.component.scss'],
+})
+export class SearchUserAutocompleteComponent {
+    public selectable: boolean = true;
+    public removable: boolean = true;
+    public addOnBlur: boolean = true;
+    public separatorKeysCodes: number[] = [ENTER, COMMA];
+
+    public myControl: FormControl = new FormControl();
+    public globalEmailControl: FormControl = new FormControl();
+
+    public emails: string[] = [];
+    public users: Array<User.AsObject> = [];
+    public filteredUsers: Array<User.AsObject> = [];
+    public isLoading: boolean = false;
+    public target: UserTarget = UserTarget.SELF;
+    public hint: string = '';
+    public UserTarget: any = UserTarget;
+    @ViewChild('usernameInput') public usernameInput!: ElementRef<HTMLInputElement>;
+    @ViewChild('auto') public matAutocomplete!: MatAutocomplete;
+    @Output() public selectionChanged: EventEmitter<User.AsObject | User.AsObject[]> = new EventEmitter();
+    @Input() public singleOutput: boolean = false;
+    private unsubscribed$: Subject<void> = new Subject();
+    constructor(private userService: MgmtUserService, private toast: ToastService) {
+        this.getFilteredResults();
+    }
+
+    private getFilteredResults(): void {
+        this.myControl.valueChanges.pipe(debounceTime(200),
+            takeUntil(this.unsubscribed$),
+            tap(() => this.isLoading = true),
+            switchMap(value => {
+                const query = new UserSearchQuery();
+                query.setKey(UserSearchKey.USERSEARCHKEY_EMAIL);
+                query.setValue(value);
+                query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS);
+                if (this.target === UserTarget.SELF) {
+                    return from(this.userService.SearchUsers(10, 0, [query]));
+                } else {
+                    return of(); // from(this.userService.GetUserByEmailGlobal(value));
+                }
+            }),
+        ).subscribe((userresp: any) => {
+            this.isLoading = false;
+            if (this.target === UserTarget.SELF && userresp) {
+                this.filteredUsers = userresp.toObject().resultList;
+            }
+        });
+    }
+
+    public displayFn(user?: User.AsObject): string | undefined {
+        return user ? `${user.email}` : undefined;
+    }
+
+    public add(event: MatChipInputEvent): void {
+        if (!this.matAutocomplete.isOpen) {
+            const input = event.input;
+            const value = event.value;
+
+            if ((value || '').trim()) {
+                const index = this.filteredUsers.findIndex((user) => {
+                    if (user.email) {
+                        return user.email === value;
+                    }
+                });
+                if (index > -1) {
+                    if (this.users && this.users.length > 0) {
+                        this.users.push(this.filteredUsers[index]);
+                    } else {
+                        this.users = [this.filteredUsers[index]];
+                    }
+                }
+            }
+
+            if (input) {
+                input.value = '';
+            }
+        }
+    }
+
+    public remove(user: User.AsObject): void {
+        const index = this.users.indexOf(user);
+
+        if (index >= 0) {
+            this.users.splice(index, 1);
+        }
+    }
+
+    public selected(event: MatAutocompleteSelectedEvent): void {
+        const index = this.filteredUsers.findIndex((user) => user === event.option.value);
+        if (index !== -1) {
+            if (this.singleOutput) {
+                this.selectionChanged.emit(this.filteredUsers[index]);
+            } else {
+                if (this.users && this.users.length > 0) {
+                    this.users.push(this.filteredUsers[index]);
+                } else {
+                    this.users = [this.filteredUsers[index]];
+                }
+                this.selectionChanged.emit(this.users);
+            }
+        }
+
+        this.usernameInput.nativeElement.value = '';
+        this.myControl.setValue(null);
+    }
+
+    public changeTarget(): void {
+        if (this.target === UserTarget.SELF) {
+            this.target = UserTarget.EXTERNAL;
+            this.filteredUsers = [];
+            this.unsubscribed$.next(); // clear old subscription
+        } else if (this.target === UserTarget.EXTERNAL) {
+            this.target = UserTarget.SELF;
+            this.getFilteredResults(); // new subscription
+        }
+    }
+
+    public getGlobalUser(): void {
+        this.userService.GetUserByEmailGlobal(this.globalEmailControl.value).then(user => {
+            this.users = [user.toObject()];
+            this.selectionChanged.emit(this.users);
+        }).catch(error => {
+            this.toast.showError(error.message);
+        });
+    }
+}
@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { SearchUserAutocompleteComponent } from './search-user-autocomplete.component';
+
+
+@NgModule({
+    declarations: [SearchUserAutocompleteComponent],
+    imports: [
+        CommonModule,
+        MatAutocompleteModule,
+        MatChipsModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        ReactiveFormsModule,
+        MatProgressSpinnerModule,
+        FormsModule,
+        TranslateModule,
+    ],
+    exports: [SearchUserAutocompleteComponent],
+})
+export class SearchUserAutocompleteModule { }