Feature/505 add my projects page

CHANGELOG.md

@@ -8,6 +8,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ## [Unreleased]
 
 ### Added
+- Added my projects page - [#505](https://github.com/DigitalExcellence/dex-frontend/issues/505)
 
 - Added project images. - [#464](https://github.com/DigitalExcellence/dex-frontend/issues/464)
 - Added images to highlights - [#463](https://github.com/DigitalExcellence/dex-frontend/issues/463)

package.json

@@ -42,7 +42,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.901.13",
-    "@angular/cli": "^9.1.13",
+    "@angular/cli": "^9.1.15",
     "@angular/compiler-cli": "^9.1.13",
     "@angular/language-service": "^9.1.13",
     "@types/jasmine": "^3.6.3",

src/app/app-routing.module.ts

@@ -31,6 +31,10 @@ const routes: Routes = [
     path: 'project',
     loadChildren: () => import('./modules/project/project.module').then((m) => m.ProjectModule),
   },
+  {
+    path: 'user',
+    loadChildren: () => import('./modules/user/user.module').then((m) => m.UserModule),
+  },
   {
     path: 'account',
     loadChildren: () => import('./modules/account/account.module').then((m) => m.AccountModule),

src/app/components/app-layout/app-layout.component.html

@@ -52,7 +52,9 @@
               <span class="caret"></span>
             </button>
             <ul *dropdownMenu aria-labelledby="button-basic" class="dropdown-menu" id="dropdown-basic" role="menu">
-              <li role="menuitem"><a (click)="onClickSignout()" class="dropdown-item" routerLinkActive="active">Sign Out</a></li>
+              <li role="menuitem"> <a class="dropdown-item" routerLink="user/projects">My Projects</a></li>
+              <li role="menuitem"><a (click)="onClickSignout()" class="dropdown-item">Sign Out</a></li>
+
             </ul>
           </div>
         </div>

src/app/components/app-layout/app-layout.component.scss

@@ -197,6 +197,7 @@
   below each other
   */
   .profile-dropdown {
+    z-index: 9;
     @include media-breakpoint-down(sm) {
       flex-direction: column;
     }

src/app/components/app-layout/app-layout.component.ts

@@ -120,6 +120,11 @@ export class AppLayoutComponent implements OnInit {
     this.displayBetaBanner = true;
   }
 
+
+  public viewUserProjects() {
+    this.router.navigate(['user/projects']);
+  }
+
   /**
    * Method which triggers when the user clicks on the burger menu in the header.
    * Toggles the navbar visibility

src/app/modules/project/overview/overview.component.ts

@@ -52,7 +52,6 @@ export class OverviewComponent implements OnInit, AfterViewInit {
   public projectsToDisplay: Project[] = [];
   public projectsTotal: Project[] = [];
 
-
   /**
    * Determine whether we need to render a list or cart view
    */

src/app/modules/project/overview/project/project.component.html

@@ -40,7 +40,7 @@ <h3 class="project-name">{{ project.name }}</h3>
       </ng-template>
     </div>
     <div (click)="userClicked($event)" class="item project-user-name disabled"><em class="fas fa-user"></em> {{ project.user.name }}</div>
-  </div>
+  </div> 
 </ng-container>
 
 <!-- Grid Project-->

src/app/modules/user/user-projects/user-projects.component.html

@@ -0,0 +1,80 @@
+<!--
+
+  Digital Excellence Copyright (C) 2020 Brend Smits
+
+   This program is free software: you can redistribute it and/or modify
+   it under the terms of the GNU Lesser General Public License as published
+   by the Free Software Foundation version 3 of the License.
+
+   This program is distributed in the hope that it will be useful,
+   but WITHOUT ANY WARRANTY; without even the implied warranty
+   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+   See the GNU Lesser General Public License for more details.
+
+   You can find a copy of the GNU Lesser General Public License
+   along with this program, in the LICENSE.md file in the root project directory.
+   If not, see https://www.gnu.org/licenses/lgpl-3.0.txt
+-->
+
+<div class="row">
+
+
+  <div class="col-md projects-overview-wrapper">
+    <div class="project-list-header">
+      <h1 class="">My projects</h1>
+
+      <div class="list-view-toggle">
+        <label class="container">
+          <input [(ngModel)]="showListView" [value]="false" aria-label="Switch to grid view" name="list-view" type="radio"/>
+          <span class="checkmark grid">
+            <svg>
+              <use xlink:href="assets/images/grid-icon.svg#img"></use>
+            </svg>
+          </span>
+        </label>
+        <label class="container">
+          <input [(ngModel)]="showListView" [value]="true" aria-label="Switch to list view" checked="checked" name="list-view" type="radio"/>
+          <span class="checkmark list">
+            <svg>
+              <use xlink:href="assets/images/list-icon.svg#img"></use>
+            </svg>
+          </span>
+        </label>
+      </div>
+    </div>
+
+    <div class="userinfo">
+      <img alt="" class="profile-picture" loading="lazy" src="assets/images/profile-placeholder.png" />
+      <div class="usercreds">
+       <h3> {{ userName }} </h3>
+       <div class="user-amounts">
+       <div class="grid-item"><p>Projects:</p></div>
+       <div class="grid-item"><p>{{ userprojects.length }}</p></div>
+
+       </div>
+      </div>
+    </div>
+
+    <ng-container *ngIf="projectsLoading; else projectsLoading">
+      <div class="project-list-wrapper" [ngClass]="this.showListView ? 'list' : 'grid'">
+        <app-project
+            (click)="onClickProject($event, project.id, project.name)"
+            *ngFor="let project of userprojects"
+            [project]="project"
+            [showListView]="this.showListView"
+        >
+        </app-project>
+      </div>
+    </ng-container>
+
+    <ng-container *ngIf="projectsEmpty()">
+      <h3>No projects found</h3>
+      <button class="primary" (click)="addProjectClicked()">Create project</button>
+    </ng-container>
+
+    <ng-template #projectsLoading>
+      <h2 class="fas fa-spinner fa-pulse loading-circle" *ngIf="userProjectsLoading"></h2>
+      <p *ngIf="!userProjectsLoading">There are no projects available.</p>
+    </ng-template>
+  </div>
+</div>