fix pins, get translated changes, home (#390)

console/src/app/modules/changes/changes.component.html

@@ -6,7 +6,7 @@
             {{event.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
         </span>
         <span class="editor">{{event.editor}}</span>
-        <span class="desc">{{'CHANGES.EVENTS.'+event.eventType | translate}}</span>
+        <span class="desc">{{event?.eventType?.localizedMessage }}</span>
     </li>
     <div class="sp-wrapper">
         <mat-spinner *ngIf="loading | async" diameter="25"></mat-spinner>

console/src/app/modules/changes/changes.component.ts

@@ -105,6 +105,7 @@ export class ChangesComponent implements OnInit {
             return from(col).pipe(
                 tap((res: Changes) => {
                     let values = res.toObject().changesList;
+                    console.log(values);
                     // If prepending, reverse the batch order
                     values = false ? values.reverse() : values;
 

console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.html

@@ -10,7 +10,7 @@
 
     <div class="item card" *ngFor="let item of selection.selected; index as i"
         [ngClass]="{ inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}"
-        [routerLink]="[item.projectId, 'grant', item.id]">
+        (click)="navigateToProject(item.projectId,item.id, $event)">
         <div class="text-part">
             <span *ngIf="item.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
                 {{
@@ -34,7 +34,8 @@
 <div class="container">
     <p class="n-items" *ngIf="!loading && notPinned.length > 0">{{'PROJECT.PAGES.ALL' | translate}}</p>
 
-    <div class="item card" *ngFor="let item of notPinned; index as i" [routerLink]="[item.projectId, 'grant', item.id]"
+    <div class="item card" *ngFor="let item of notPinned; index as i"
+        (click)="navigateToProject(item.projectId,item.id, $event)"
         [ngClass]="{ inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}">
         <div class="text-part">
             <span *ngIf="item.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}

console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.ts

@@ -1,6 +1,7 @@
 import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Router } from '@angular/router';
 import { ProjectGrantView, ProjectState, ProjectType } from 'src/app/proto/generated/management_pb';
 import { AuthService } from 'src/app/services/auth.service';
 
@@ -40,7 +41,7 @@ export class GrantedProjectGridComponent implements OnChanges {
     public ProjectState: any = ProjectState;
     public ProjectType: any = ProjectType;
 
-    constructor(private authService: AuthService) {
+    constructor(private authService: AuthService, private router: Router) {
         this.selection.changed.subscribe(selection => {
             this.setPrefixedItem('pinned-granted-projects', JSON.stringify(
                 this.selection.selected.map(item => item.projectId),
@@ -97,4 +98,10 @@ export class GrantedProjectGridComponent implements OnChanges {
         const prefix = (await this.authService.GetActiveOrg()).id;
         return localStorage.setItem(`${prefix}:${key}`, value);
     }
+
+    public navigateToProject(projectId: string, id: string, event: any): void {
+        if (event && event.srcElement && event.srcElement.localName !== 'button') {
+            this.router.navigate(['/granted-projects', projectId, 'grant', id]);
+        }
+    }
 }

console/src/app/pages/home/home.component.html

@@ -31,7 +31,7 @@
             <span class="fill-space"></span>
             <div class="footer">
                 <a color="accent" mat-button
-                    [routerLink]="['/users/me']">{{'HOME.SECURITYANDPRIVACY_BUTTON' | translate}}</a>
+                    [routerLink]="['/user/me']">{{'HOME.SECURITYANDPRIVACY_BUTTON' | translate}}</a>
             </div>
         </div>
 
@@ -59,8 +59,7 @@
                 </div>
                 <span class="fill-space"></span>
                 <div class="footer">
-                    <a color="accent" mat-button
+                    <a color="accent" mat-button [routerLink]="['/org']">{{'HOME.PROTECTION_BUTTON' | translate}}</a>
-                        [routerLink]="['/users/me']">{{'HOME.PROTECTION_BUTTON' | translate}}</a>
                 </div>
             </div>
         </ng-template>
@@ -75,7 +74,7 @@
                 </div>
                 <span class="fill-space"></span>
                 <div class="footer">
-                    <a color="accent" mat-button [routerLink]="['/users/me']">{{'HOME.USERS_BUTTON' | translate}}</a>
+                    <a color="accent" mat-button [routerLink]="['/user/me']">{{'HOME.USERS_BUTTON' | translate}}</a>
                 </div>
             </div>
         </ng-template>

console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.ts

@@ -82,6 +82,7 @@ export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
 
     private async getData({ id }: Params): Promise<void> {
         this.projectId = id;
+        console.log(this.projectId);
 
         this.orgService.GetIam().then(iam => {
             this.isZitadel = iam.toObject().iamProjectId === this.projectId;
@@ -91,6 +92,7 @@ export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
             this.projectService.GetProjectById(id).then(proj => {
                 this.project = proj.toObject();
             }).catch(error => {
+                console.error(error);
                 this.toast.showError(error.message);
             });
         }
@@ -104,7 +106,11 @@ export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
                 this.toast.showError(error.message);
             });
         } else if (newState === ProjectState.PROJECTSTATE_INACTIVE) {
-            this.toast.showInfo('You cant update this project.');
+            this.projectService.DeactivateProject(this.projectId).then(() => {
+                this.toast.showInfo('Deactivated Project');
+            }).catch(error => {
+                this.toast.showError(error.message);
+            });
         }
     }
 

console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.html

@@ -9,7 +9,8 @@
 
     <p class="n-items" *ngIf="!loading && selection.selected.length > 0">{{'PROJECT.PAGES.PINNED' | translate}}</p>
 
-    <div class="item card" *ngFor="let item of selection.selected; index as i" [routerLink]="[item.projectId]"
+    <div class="item card" *ngFor="let item of selection.selected; index as i"
+        (click)="navigateToProject(item.projectId, $event)"
         [ngClass]="{ inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}">
         <div class="text-part">
             <span *ngIf="item.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
@@ -36,7 +37,8 @@
 <div class="container">
     <p class="n-items" *ngIf="!loading && notPinned.length > 0">{{'PROJECT.PAGES.ALL' | translate}}</p>
 
-    <div class="item card" *ngFor="let item of notPinned; index as i" [routerLink]="[item.projectId]"
+    <div class="item card" *ngFor="let item of notPinned; index as i"
+        (click)="navigateToProject(item.projectId, $event)"
         [ngClass]="{ inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}">
         <div class="text-part">
             <span *ngIf="item.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
@@ -64,7 +66,7 @@
     <ng-template appHasRole [appHasRole]="['project.write']">
         <div class="add-project-button card" (click)="addItem()">
             <mat-icon class="icon">add</mat-icon>
-            <span>Add new project</span>
+            <span>{{'PROJECT.PAGES.ADDNEW' | translate}}</span>
         </div>
     </ng-template>
 </div>

console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.ts

@@ -109,4 +109,10 @@ export class OwnedProjectGridComponent implements OnChanges {
         const prefix = (await this.authService.GetActiveOrg()).id;
         return localStorage.setItem(`${prefix}:${key}`, value);
     }
+
+    public navigateToProject(id: string, event: any): void {
+        if (event && event.srcElement && event.srcElement.localName !== 'button') {
+            this.router.navigate(['/projects', id]);
+        }
+    }
 }

console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.html

@@ -86,7 +86,7 @@
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
-                [routerLink]="['/projects', row.id]"></tr>
+                [routerLink]="['/projects', row.projectId]"></tr>
 
         </table>
         <mat-paginator class="background-style" [length]="totalResult" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"

console/src/assets/i18n/de.json

@@ -344,7 +344,8 @@
             "PINNED":"Angepinnt",
             "ALL": "Alle",
             "CREATEDON":"erstellt am",
-            "LASTMODIFIED":"zuletzt verändert am"
+            "LASTMODIFIED":"zuletzt verändert am",
+            "ADDNEW":"Neues Projekt erstellen"
         },
         "STATE": {
             "TITLE":"Status",

console/src/assets/i18n/en.json

@@ -345,7 +345,8 @@
             "PINNED":"Pinned",
             "ALL": "All",
             "CREATEDON":"created on",
-            "LASTMODIFIED":"last modified on"
+            "LASTMODIFIED":"last modified on",
+            "ADDNEW":"create new project"
         },
         "STATE": {
             "TITLE":"State",