Merge branch 'master' into paje/fix_org_diag

Author: paule96

.azure/pipelines/Phonebook.preview.yml

@@ -165,7 +165,7 @@ jobs:
           connectionType: 'Kubernetes Service Connection'
           kubernetesServiceConnection: 'Phonebook Kubernetes Demo Cluster'
           command: 'delete'
-          arguments: 'phonebook-$(namespace)'
+          arguments: '--purge phonebook-$(namespace)'
           tillerNamespace: kube-system
       - task: Kubernetes@1
         displayName: 'Delete Namespace'

Phonebook.Frontend/Dockerfile

@@ -21,7 +21,7 @@ RUN npm run build
 ### production ###
 ##################
 
-FROM nginx:1.17.10@sha256:6b3b6c113f98e901a8b1473dee4c268cf37e93d72bc0a01e57c65b4ab99e58ee
+FROM nginx:1.18.0@sha256:391d37e78da03e16d35ffcd2b9764995978610b727e2ce17a9b5c2cf9b8e5398
 WORKDIR /etc/nginx
 
 ARG BASE_URL

Phonebook.Frontend/package-lock.json

@@ -79,10 +79,10 @@
     "@types/node": "13.13.2",
     "codelyzer": "5.2.2",
     "commitizen": "4.0.4",
-    "concurrently": "5.1.0",
+    "concurrently": "5.2.0",
     "cz-customizable": "6.2.0",
     "jasmine-core": "3.5.0",
-    "jasmine-spec-reporter": "5.0.1",
+    "jasmine-spec-reporter": "5.0.2",
     "karma": "5.0.2",
     "karma-chrome-launcher": "3.1.0",
     "karma-cli": "2.0.0",

Phonebook.Frontend/package.json

@@ -53,6 +53,7 @@ import { environment } from 'src/environments/environment';
 import { FloorplanService } from './services/floorplan.service';
 import { SearchComponent } from './shared/components/search/search.component';
 import { HttpRedirectToLogin } from 'src/app/shared/interceptors/HttpRedirectToLogin';
+import { FormsModule } from '@angular/forms';
 
 declare const require;
 
@@ -71,6 +72,7 @@ declare const require;
     HttpClientModule,
     ErrorHandlerModule.forRoot(),
     MaterialModule,
+    FormsModule,
     DialogsModule,
     ProfilePictureModule,
     SettingsModule,

Phonebook.Frontend/src/app/app.module.ts

@@ -90,29 +90,77 @@ <h1>
             >
           </mat-select>
         </mat-form-field>
+        <button
+          i18n-matTooltip="
+            DashboardComponent|Layout Change Button Tooltip@@dashboardComponentLayoutChangeTooltip"
+          matTooltip="Here you can change the layout of your dashboard."
+          (click)="select.open()"
+          mat-icon-button
+          class="changeLayoutButton"
+        >
+          <mat-icon>{{ activeLayout$ | async }}</mat-icon>
+          <mat-select
+            #select
+            class="selectLayout"
+            [ngModel]="activeLayout$ | async"
+            (ngModelChange)="changeLayout($event)"
+          >
+            <mat-option *ngFor="let view of layouts" [value]="view">
+              <span>{{ getLayoutName(view) }}</span>
+            </mat-option>
+          </mat-select>
+        </button>
       </div>
       <!-- This is a workaround for https://github.com/angular/material2/issues/13372 -->
-      <div cdkDropListGroup class="pb-bookmarks-list pb-flex-row">
-        <div
-          *ngFor="let person of bookmarkedPersons; index as i"
-          cdkDropList
-          [cdkDropListData]="i"
-          cdkDropListOrientation="horizontal"
-          class="card-container"
-        >
-          <app-user-small-card
-            [person]="person"
-            [actionButtonIcon]="'close'"
-            [actionButtonClasses]="'white'"
-            (actionButtonClicked)="removeFromBookmarkedPersons(person)"
-            class="pb-small-card pb-card"
-            cdkDrag
-            (cdkDragEntered)="entered($event)"
-            (cdkDragEnded)="ended($event)"
-            [cdkDragData]="i"
-            [cdkDragDisabled]="favoriteSort != ''"
-          ></app-user-small-card>
-        </div>
+      <div
+        cdkDropListGroup
+        class="pb-flex-row pb-bookmarks-list"
+        [ngSwitch]="activeLayout$ | async"
+      >
+        <ng-container *ngSwitchCase="layout.medium_cards">
+          <div
+            *ngFor="let person of bookmarkedPersons; index as i"
+            cdkDropList
+            [cdkDropListData]="i"
+            cdkDropListOrientation="horizontal"
+            class="card-container"
+          >
+            <app-user-small-card
+              [person]="person"
+              [actionButtonIcon]="'close'"
+              [actionButtonClasses]="'white'"
+              (actionButtonClicked)="removeFromBookmarkedPersons(person)"
+              class="pb-small-card pb-card"
+              cdkDrag
+              (cdkDragEntered)="entered($event)"
+              (cdkDragEnded)="ended($event)"
+              [cdkDragData]="i"
+              [cdkDragDisabled]="favoriteSort != ''"
+            ></app-user-small-card>
+          </div>
+        </ng-container>
+        <ng-container *ngSwitchCase="layout.small_cards">
+          <div
+            *ngFor="let person of bookmarkedPersons; index as i"
+            cdkDropList
+            [cdkDropListData]="i"
+            cdkDropListOrientation="horizontal"
+            class="card-container"
+          >
+            <app-user-tiny-card
+              [person]="person"
+              [actionButtonIcon]="'close'"
+              [actionButtonClasses]="'white'"
+              (actionButtonClicked)="removeFromBookmarkedPersons(person)"
+              class="pb-card"
+              cdkDrag
+              (cdkDragEntered)="entered($event)"
+              (cdkDragEnded)="ended($event)"
+              [cdkDragData]="i"
+              [cdkDragDisabled]="favoriteSort != ''"
+            ></app-user-tiny-card>
+          </div>
+        </ng-container>
       </div>
       <div
         *ngIf="bookmarkedPersons.length === 0"

Phonebook.Frontend/src/app/pages/dashboard/dashboard.component.html

@@ -11,6 +11,7 @@ mat-drawer-container {
 
 .pb-bookmarked {
   height: 100%;
+  margin-right: 50px;
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -93,3 +94,17 @@ mat-drawer-container {
 .cdk-drag-animating {
   transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
 }
+
+::ng-deep .selectLayout div.mat-select-arrow-wrapper {
+  display: none;
+}
+
+::ng-deep .selectLayout.mat-select {
+  display: inline;
+}
+
+.changeLayoutButton {
+  position: absolute;
+  right: 0;
+  margin-right: 10px;
+}