fix(console): edit project role, address form cleanup, assets, i18n (#339)

* remove grant detail module, role detail dialog

* change appearance, i18n, remove address form

console/src/app/modules/add-member-dialog/member-create-dialog.component.html

@@ -23,11 +23,11 @@
 </div>
 <div mat-dialog-actions class="action">
     <button mat-button (click)="closeDialog()">
-        cancel
+        {{'ACTIONS.CANCEL' | translate}}
     </button>
 
     <button [disabled]="users.length == 0 || roles.length == 0" color="primary" mat-raised-button class="ok-button"
         (click)="closeDialogWithSuccess()">
-        Add
+        {{'ACTIONS.ADD' | translate}}
     </button>
 </div>

console/src/app/modules/add-member-dialog/member-create-dialog.component.scss

@@ -1,17 +1,17 @@
 .title {
     font-size: 1.2rem;
-  }
+}
   
-  .desc {
-      color: #8795a1;
-      font-size: .9rem;
-  }
+.desc {
+    color: #8795a1;
+    font-size: .9rem;
+}
 
- .full-width {
-     width: 100%;
- }
+.full-width {
+    width: 100%;
+}
   
-  .action {
+.action {
     display: flex;
     justify-content: flex-end;
   
@@ -22,4 +22,4 @@
     button {
       border-radius: 0.5rem;
     }
-  }
+}

console/src/app/modules/card/card.component.scss

@@ -18,9 +18,7 @@
             .title {
                 margin: 0;
                 font-weight: 400;
-                font-family: 'Rubik';
                 font-size: 18px;
-                // margin-top: .3rem;
             }
 
             .fill-space {

console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.html

@@ -0,0 +1,30 @@
+<h1 mat-dialog-title>
+    <span class="title">{{'PROJECT.ROLE.EDITTITLE' | translate}}</span>
+</h1>
+<p class="desc"> {{'PROJECT.ROLE.EDITDESCRIPTION' | translate}}</p>
+<div mat-dialog-content>
+    <form *ngIf="formGroup" class="full-width" [formGroup]="formGroup" (ngSubmit)="submitForm()">
+        <mat-form-field class="formfield">
+            <mat-label>{{ 'PROJECT.ROLE.KEY' | translate }}</mat-label>
+            <input matInput formControlName="key" />
+        </mat-form-field>
+        <mat-form-field class="formfield">
+            <mat-label>{{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }}</mat-label>
+            <input matInput formControlName="displayName" />
+        </mat-form-field>
+        <mat-form-field class="formfield">
+            <mat-label>{{ 'PROJECT.ROLE.GROUP' | translate }}</mat-label>
+            <input matInput formControlName="group" />
+        </mat-form-field>
+    </form>
+</div>
+
+<div mat-dialog-actions class="action">
+    <button mat-button (click)="closeDialog()">
+        {{'ACTIONS.CANCEL' | translate}}
+    </button>
+
+    <button [disabled]="formGroup.invalid" color="primary" mat-raised-button class="ok-button" (click)="submitForm()">
+        {{'ACTIONS.SAVE' | translate}}
+    </button>
+</div>

console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.scss

@@ -0,0 +1,25 @@
+.title {
+    font-size: 1.2rem;
+}
+  
+.desc {
+    color: #8795a1;
+    font-size: .9rem;
+}
+
+.full-width, .formfield {
+    width: 100%;
+}
+
+.action {
+    display: flex;
+    justify-content: flex-end;
+  
+    .ok-button {
+      margin-left: 0.5rem;
+    }
+  
+    button {
+      border-radius: 0.5rem;
+    }
+}

console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { UserGrantComponent } from './user-grant.component';
+import { ProjectRoleDetailComponent } from './project-role-detail.component';
 
-describe('UserGrantComponent', () => {
-    let component: UserGrantComponent;
-    let fixture: ComponentFixture<UserGrantComponent>;
+describe('ProjectRoleDetailComponent', () => {
+    let component: ProjectRoleDetailComponent;
+    let fixture: ComponentFixture<ProjectRoleDetailComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [UserGrantComponent],
+            declarations: [ProjectRoleDetailComponent],
         })
             .compileComponents();
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(UserGrantComponent);
+        fixture = TestBed.createComponent(ProjectRoleDetailComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.ts

@@ -0,0 +1,59 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ProjectService } from 'src/app/services/project.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+@Component({
+    selector: 'app-project-role-detail',
+    templateUrl: './project-role-detail.component.html',
+    styleUrls: ['./project-role-detail.component.scss'],
+})
+export class ProjectRoleDetailComponent implements OnInit {
+    public projectId: string = '';
+
+    public formGroup!: FormGroup;
+    constructor(private projectService: ProjectService, private toast: ToastService,
+        public dialogRef: MatDialogRef<ProjectRoleDetailComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any) {
+
+        this.projectId = data.projectId;
+        this.formGroup = new FormGroup({
+            key: new FormControl({ value: '', disabled: true }, [Validators.required]),
+            displayName: new FormControl(''),
+            group: new FormControl(''),
+        });
+        console.log(data);
+
+        this.formGroup.patchValue(data.role);
+    }
+
+    ngOnInit(): void {
+    }
+
+    submitForm(): void {
+        if (this.formGroup.valid && this.key?.value && this.group?.value && this.displayName?.value) {
+            this.projectService.ChangeProjectRole(this.projectId, this.key.value, this.key.value, this.group.value)
+                .then(() => {
+                    this.toast.showInfo('Role updated');
+                    this.dialogRef.close(true);
+                }).catch(error => {
+                    this.toast.showError(error.message);
+                });
+        }
+    }
+
+    public closeDialog(): void {
+        this.dialogRef.close(false);
+    }
+
+    public get key(): AbstractControl | null {
+        return this.formGroup.get('key');
+    }
+    public get displayName(): AbstractControl | null {
+        return this.formGroup.get('displayName');
+    }
+    public get group(): AbstractControl | null {
+        return this.formGroup.get('group');
+    }
+}

console/src/app/modules/project-roles/project-roles.component.html

@@ -47,26 +47,25 @@
 
         <ng-container matColumnDef="key">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.KEY' | translate }} </th>
-            <td mat-cell *matCellDef="let role"> {{role.key}} </td>
+            <td (click)="openDetailDialog(role)" mat-cell *matCellDef="let role"> {{role.key}} </td>
         </ng-container>
 
         <ng-container matColumnDef="displayname">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }} </th>
-            <td mat-cell *matCellDef="let role"> {{role.displayName}} </td>
+            <td (click)="openDetailDialog(role)" mat-cell *matCellDef="let role"> {{role.displayName}} </td>
         </ng-container>
 
         <ng-container matColumnDef="group">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.GROUP' | translate }} </th>
             <td mat-cell *matCellDef="let role">
-                <span class="role app-label" *ngIf="role.group"
-                    matTooltip="Add all of group {{role.group}} to selection"
-                    (click)="selectAllOfGroup(role.group)">{{role.group}}</span>
+                <span class="role app-label" *ngIf="role.group" (click)="selectAllOfGroup(role.group)"
+                    [matTooltip]="'PROJECT.ROLE.SELECTGROUPTOOLTIP' | translate: role">{{role.group}}</span>
             </td>
         </ng-container>
 
         <ng-container matColumnDef="creationDate">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.CREATIONDATE' | translate }} </th>
-            <td mat-cell *matCellDef="let role">
+            <td (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
                 <span>{{role.creationDate | timestampToDate | date: 'dd. MMM, HH:mm' }}</span>
             </td>
         </ng-container>

console/src/app/modules/project-roles/project-roles.component.ts

@@ -1,5 +1,6 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTable } from '@angular/material/table';
 import { tap } from 'rxjs/operators';
@@ -7,6 +8,7 @@ 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 { ProjectRoleDetailComponent } from './project-role-detail/project-role-detail.component';
 import { ProjectRolesDataSource } from './project-roles-datasource';
 
 
@@ -28,7 +30,7 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
     /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
     public displayedColumns: string[] = ['select', 'key', 'displayname', 'group', 'creationDate'];
 
-    constructor(private projectService: ProjectService, private toast: ToastService) { }
+    constructor(private projectService: ProjectService, private toast: ToastService, private dialog: MatDialog) { }
 
     public ngOnInit(): void {
         console.log(this.projectId);
@@ -108,4 +110,14 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
                 this.toast.showError(data.message);
             });
     }
+
+    public openDetailDialog(role: ProjectRole.AsObject): void {
+        this.dialog.open(ProjectRoleDetailComponent, {
+            data: {
+                role,
+                projectId: this.projectId,
+            },
+            width: '400px',
+        });
+    }
 }

console/src/app/modules/project-roles/project-roles.module.ts

@@ -1,8 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -13,16 +16,22 @@ import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { PipesModule } from 'src/app/pipes/pipes.module';
 
+import { ProjectRoleDetailComponent } from './project-role-detail/project-role-detail.component';
 import { ProjectRolesComponent } from './project-roles.component';
 
+
 @NgModule({
-    declarations: [ProjectRolesComponent],
+    declarations: [ProjectRolesComponent, ProjectRoleDetailComponent],
     imports: [
         CommonModule,
         MatButtonModule,
         HasRoleModule,
         MatTableModule,
         MatPaginatorModule,
+        MatFormFieldModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatInputModule,
         MatIconModule,
         MatProgressSpinnerModule,
         MatCheckboxModule,

console/src/app/modules/user-grant/user-grant-routing.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { UserGrantComponent } from './user-grant.component';
-
-const routes: Routes = [
-    {
-        path: '',
-        component: UserGrantComponent,
-        data: { animation: 'AddPage' },
-    },
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
-})
-export class UserGrantRoutingModule { }

console/src/app/modules/user-grant/user-grant.component.html

@@ -1,15 +0,0 @@
-<div class="max-width-container">
-    <div class="container">
-        <div class="left">
-            <a *ngIf="userid" [routerLink]="[ '/users', userid]" mat-icon-button>
-                <mat-icon class="icon">arrow_back</mat-icon>
-            </a>
-        </div>
-        <div class="right">
-            <div class="head">
-                <h1>{{ 'GRANTS.DETAIL.TITLE' | translate }}</h1>
-                <p class="desc">{{ 'GRANTS.DETAIL.DESCRIPTION' | translate }}</p>
-            </div>
-        </div>
-    </div>
-</div>

console/src/app/modules/user-grant/user-grant.component.scss

@@ -1,43 +0,0 @@
-.container {
-    display: flex;
-    padding-bottom: 3rem;
-
-    .left {
-        width: 100px;
-        display: flex;
-        padding: 1rem;
-        justify-content: center;
-
-        a {
-            margin-top: .2rem;
-        }
-    }
-
-    .right {
-        flex: 1;
-        padding-top: 1rem;
-
-        .head {
-            display: flex;
-            align-items: center;
-            border-bottom: 1px solid #ffffff20;
-            margin-bottom: 2rem;
-            flex-wrap: wrap;
-          
-            a {
-                display: block;
-            }
-          
-            h1 {
-                font-size: 1.2rem;
-            }
-          
-            .desc {
-                width: 100%;
-                display: block;
-                font-size: .9rem;
-                color: #8795a1;
-            }
-        }
-    }
-}

console/src/app/modules/user-grant/user-grant.component.ts

@@ -1,44 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { UserGrantView } from 'src/app/proto/generated/management_pb';
-import { MgmtUserService } from 'src/app/services/mgmt-user.service';
-import { ToastService } from 'src/app/services/toast.service';
-
-@Component({
-    selector: 'app-user-grant',
-    templateUrl: './user-grant.component.html',
-    styleUrls: ['./user-grant.component.scss'],
-})
-export class UserGrantComponent implements OnInit {
-    public userid: string = '';
-    public grantid: string = '';
-
-    public grantView!: UserGrantView.AsObject;
-    constructor(
-        private mgmtUserService: MgmtUserService,
-        private route: ActivatedRoute,
-        private toast: ToastService,
-    ) {
-        this.route.params.subscribe(params => {
-            this.userid = params.projectid;
-            this.grantid = params.grantid;
-
-            this.mgmtUserService.UserGrantByID(this.grantid, this.userid).then(resp => {
-                this.grantView = resp.toObject();
-                console.log(this.grantView);
-            });
-        });
-    }
-
-    ngOnInit(): void {
-    }
-
-    updateGrant(): void {
-        this.mgmtUserService.UpdateUserGrant(this.grantid, this.userid, this.grantView.roleKeysList).then(() => {
-            this.toast.showInfo('Roles updated');
-        }).catch(error => {
-            this.toast.showError(error.message);
-        });
-    }
-
-}

console/src/app/modules/user-grant/user-grant.module.ts

@@ -1,29 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
-import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { HttpLoaderFactory } from 'src/app/app.module';
-
-import { UserGrantRoutingModule } from './user-grant-routing.module';
-import { UserGrantComponent } from './user-grant.component';
-
-@NgModule({
-    declarations: [UserGrantComponent],
-    imports: [
-        CommonModule,
-        UserGrantRoutingModule,
-        MatIconModule,
-        MatButtonModule,
-        TranslateModule.forChild({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: HttpLoaderFactory,
-                deps: [HttpClient],
-            },
-        }),
-    ],
-    schemas: [],
-})
-export class UserGrantModule { }