Updated Favourite Products Page

ikismail · Apr 27, 2018 · bd66248 · bd66248
1 parent 714617c
commit bd66248
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 104 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -23,7 +23,7 @@ import { AppComponent } from "./app.component";
     ProductModule,
     UserModule,
     LoaderSpinnerModule,
-    RouterModule.forRoot(AppRoutes)
+    RouterModule.forRoot(AppRoutes, { enableTracing: true })
   ],
   providers: [],
   bootstrap: [AppComponent],

diff --git a/src/app/index/navbar/navbar.component.html b/src/app/index/navbar/navbar.component.html
@@ -29,7 +29,7 @@
     <ul class="navbar-nav ml-auto">
       <li class="nav-item">
         <div *ngIf="authService.isLoggedIn() ; else favCountNotLogged">
-          <a class="nav-link" href="javascript:;;" [routerLink]="['/users/favourite-products']">
+          <a class="nav-link" href="javascript:;;" [routerLink]="['/users', {outlets: {'profileOutlet': ['favourite-products']}}]">
             <i class="fa fa-heart">
               <span class="mt-2">{{productService.navbarFavProdCount}}</span>
             </i>
@@ -74,4 +74,4 @@
   <!-- Collapsible content -->
 
 </mdb-navbar>
-<!--/.Navbar-->
+<!--/.Navbar-->
diff --git a/src/app/user/user-favourite-products/user-favourite-products.component.html b/src/app/user/user-favourite-products/user-favourite-products.component.html
@@ -1,7 +1,6 @@
-<br>
 <div class="row">
   <!-- List of Products -->
-  <div class="col-sm-4" *ngFor="let favourite of products">
+  <div class="col-sm-4" *ngFor="let favourite of products | paginate: { itemsPerPage: 6, currentPage: page }">
     <div class="item">
       <div class=" mb-r">
 
@@ -40,14 +39,8 @@ <h5 class="card-title">
             <!--Card footer-->
             <div class="card-footer">
               <span class="left">{{ favourite.product.productPrice }} $</span>
-              <span class="right">
-                <a placement="top" mdbTooltip="Quick Look" container="body" [routerLink]="['/products/product', favourite.productId]">
-                  <i class="fa fa-eye"></i>
-                </a>
-                <a placement="top" mdbTooltip="Add to Wishlist" container="body">
-                  <i class="fa fa-heart" style="color: red"></i>
-                </a>
-                <a placement="top" mdbTooltip="Remove Product" container="body" *ngIf="authService.isLoggedIn()" (click)="removeFromFavourite(favourite.productId)">
+              <span class="right" *ngIf="authService.isLoggedIn()">
+                <a placement="top" mdbTooltip="Remove Product" container="body" (click)="removeFromFavourite(favourite.$key)">
                   <i class="fa fa-trash"></i>
                 </a>
               </span>
@@ -63,3 +56,6 @@ <h5 class="card-title">
     </div>
   </div>
 </div>
+<div class="text-center">
+  <pagination-controls (pageChange)="page = $event"></pagination-controls>
+</div>
diff --git a/src/app/user/user-locate/user-locate.component.html b/src/app/user/user-locate/user-locate.component.html
diff --git a/src/app/user/user-locate/user-locate.component.scss b/src/app/user/user-locate/user-locate.component.scss
diff --git a/src/app/user/user-locate/user-locate.component.ts b/src/app/user/user-locate/user-locate.component.ts
diff --git a/src/app/user/user.component.html b/src/app/user/user.component.html
@@ -6,15 +6,18 @@
     <div class="col-sm-4">
       <ul class="list-group">
         <li class="list-group-item hoverable">
-          <a [routerLink]="['/users', {outlets: {'profileOutlet': ['']}}]">My Profile</a>
+          <a [routerLink]="['/users', {outlets: {'profileOutlet': ['']}}]">Your Profile</a>
         </li>
-        <li class="list-group-item hoverable" *ngIf="authService.isAdmin()">
-          <a [routerLink]="['/users', {outlets: {'profileOutlet': ['locate-users']}}]">Locate Users</a>
+        <li class="list-group-item hoverable">
+          <a [routerLink]="['/users', {outlets: {'profileOutlet': ['favourite-products']}}]">Your Wishlist</a>
+        </li>
+        <li class="list-group-item hoverable">
+          <a>Your Cart</a>
         </li>
       </ul>
     </div>
     <div class="col-sm-8">
       <router-outlet name="profileOutlet"></router-outlet>
     </div>
   </div>
-</div>
+</div>
diff --git a/src/app/user/user.module.ts b/src/app/user/user.module.ts
@@ -11,6 +11,7 @@ import { CommonModule } from "@angular/common";
 
 // Third Party Dependencies
 import { AgmCoreModule } from "@agm/core";
+import { NgxPaginationModule } from "ngx-pagination";
 
 // Configuration and Services
 import { UserRoutes } from "./user.routing";
@@ -19,12 +20,12 @@ import { UserService } from "./shared/user.service";
 // Components
 import { UserComponent } from "./user.component";
 import { UserAccountComponent } from "./user-account/user-account.component";
-import { UserLocateComponent } from "./user-locate/user-locate.component";
 import { UserFavouriteProductsComponent } from "./user-favourite-products/user-favourite-products.component";
 
 @NgModule({
   imports: [
     CommonModule,
+    NgxPaginationModule,
     FormsModule,
     HttpClientModule,
     RouterModule.forChild(UserRoutes),
@@ -35,7 +36,6 @@ import { UserFavouriteProductsComponent } from "./user-favourite-products/user-f
   declarations: [
     UserComponent,
     UserAccountComponent,
-    UserLocateComponent,
     UserFavouriteProductsComponent
   ],
   providers: [UserService, FormBuilder],

diff --git a/src/app/user/user.routing.ts b/src/app/user/user.routing.ts
@@ -1,7 +1,6 @@
 import { UserComponent } from "./user.component";
 import { UserAccountComponent } from "./user-account/user-account.component";
 import { Routes, RouterModule } from "@angular/router";
-import { UserLocateComponent } from "./user-locate/user-locate.component";
 import { UserFavouriteProductsComponent } from "./user-favourite-products/user-favourite-products.component";
 
 export const UserRoutes: Routes = [
@@ -15,14 +14,10 @@ export const UserRoutes: Routes = [
         outlet: "profileOutlet"
       },
       {
-        path: "locate-users",
-        component: UserLocateComponent,
+        path: "favourite-products",
+        component: UserFavouriteProductsComponent,
         outlet: "profileOutlet"
       }
     ]
-  },
-  {
-    path: "users/favourite-products",
-    component: UserFavouriteProductsComponent
   }
 ];
diff --git a/yarn-error.log b/yarn-error.log
@@ -1,14 +1,14 @@
 Arguments: 
-  C:\Program Files\nodejs\node.exe C:\Program Files (x86)\Yarn\bin\yarn.js install
+  C:\Program Files\nodejs\node.exe C:\Program Files (x86)\Yarn\bin\yarn.js update @agm/core --save
 
 PATH: 
-  C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\ikism\bin;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\iCLS;C:\Program Files\Intel\Intel(R) Management Engine Components\iCLS;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\nodejs;C:\Program Files (x86)\Yarn\bin;C:\Program Files\Git\cmd;C:\Users\ikism\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Microsoft VS Code\bin;C:\Users\ikism\AppData\Roaming\npm;C:\Users\ikism\AppData\Local\Yarn\bin;C:\Program Files\Heroku\bin
+  C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\ikism\bin;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\iCLS;C:\Program Files\Intel\Intel(R) Management Engine Components\iCLS;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Yarn\bin;C:\Program Files\Git\cmd;C:\Program Files\nodejs;C:\Program Files\Java\jdk1.8.0_121\bin;C:\Users\ikism\AppData\Local\Programs\Python\Python36\Scripts;C:\Users\ikism\AppData\Local\Programs\Python\Python36;C:\Users\ikism\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Microsoft VS Code\bin;C:\Users\ikism\AppData\Local\Yarn\bin;C:\Program Files\Heroku\bin;C:\Users\ikism\AppData\Local\atom\bin;C:\Users\ikism\AppData\Local\GitHubDesktop\bin;C:\Users\ikism\AppData\Roaming\npm
 
 Yarn version: 
   1.5.1
 
 Node version: 
-  8.11.0
+  8.11.1
 
 Platform: 
   win32 x64
@@ -27,10 +27,10 @@ npm manifest:
       "lint": "ng lint",
       "e2e": "ng e2e",
       "postinstall": "ng build --aot -prod",
-      "deploy": "git push origin master && git push heroku master"
+      "deploy": "git push && git push heroku"
     },
     "engines": {
-      "node": "8.11.0",
+      "node": "8.11.1",
       "npm": "5.6.0"
     },
     "private": true,
@@ -57,9 +57,11 @@ npm manifest:
       "firebase": "4.6.0",
       "font-awesome": "^4.7.0",
       "jquery": "^3.2.1",
+      "moment": "^2.22.1",
       "ng2-owl-carousel": "^0.1.15",
       "ng2-toasty": "^4.0.3",
       "ngx-pagination": "^3.0.3",
+      "node-sass": "^4.8.3",
       "owl.carousel": "^2.2.0",
       "primeng": "^5.0.2",
       "rxjs": "^5.4.2",
@@ -3745,6 +3747,10 @@ Lockfile:
     version "2.18.1"
     resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
 
+  moment@^2.22.1:
+    version "2.22.1"
+    resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.1.tgz#529a2e9bf973f259c9643d237fda84de3a26e8ad"
+
   move-concurrently@^1.0.1:
     version "1.0.1"
     resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -3779,6 +3785,10 @@ Lockfile:
       dns-packet "^1.0.1"
       thunky "^0.1.0"
 
+  nan@^2.10.0:
+    version "2.10.0"
+    resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
+
   nan@^2.3.0, nan@^2.3.2:
     version "2.8.0"
     resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a"
@@ -3908,6 +3918,30 @@ Lockfile:
       stdout-stream "^1.4.0"
       "true-case-path" "^1.0.2"
 
+  node-sass@^4.8.3:
+    version "4.8.3"
+    resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.8.3.tgz#d077cc20a08ac06f661ca44fb6f19cd2ed41debb"
+    dependencies:
+      async-foreach "^0.1.3"
+      chalk "^1.1.1"
+      cross-spawn "^3.0.0"
+      gaze "^1.0.0"
+      get-stdin "^4.0.1"
+      glob "^7.0.3"
+      in-publish "^2.0.0"
+      lodash.assign "^4.2.0"
+      lodash.clonedeep "^4.3.2"
+      lodash.mergewith "^4.6.0"
+      meow "^3.7.0"
+      mkdirp "^0.5.1"
+      nan "^2.10.0"
+      node-gyp "^3.3.1"
+      npmlog "^4.0.0"
+      request "~2.79.0"
+      sass-graph "^2.2.4"
+      stdout-stream "^1.4.0"
+      "true-case-path" "^1.0.2"
+
   "nopt@2 || 3":
     version "3.0.6"
     resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
@@ -6400,17 +6434,14 @@ Lockfile:
     resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.18.tgz#8cecb3977fcd1b3090562ff4570e2847e752b48d"
 
 Trace: 
-  Error: Command failed.
-  Exit code: 1
-  Command: C:\Windows\system32\cmd.exe
-  Arguments: /d /s /c ng build --aot -prod
-  Directory: E:\Ismail\Projects\Angular4-ShoppingCart
-  Output:
-
-      at ProcessTermError.MessageError (C:\Program Files (x86)\Yarn\lib\cli.js:186:110)
-      at new ProcessTermError (C:\Program Files (x86)\Yarn\lib\cli.js:226:113)
-      at ChildProcess.<anonymous> (C:\Program Files (x86)\Yarn\lib\cli.js:30281:17)
-      at emitTwo (events.js:126:13)
-      at ChildProcess.emit (events.js:214:7)
-      at maybeClose (internal/child_process.js:925:16)
-      at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
+  Error: Command "update" not found.
+      at new MessageError (C:\Program Files (x86)\Yarn\lib\cli.js:186:110)
+      at C:\Program Files (x86)\Yarn\lib\cli.js:87307:17
+      at Generator.next (<anonymous>)
+      at step (C:\Program Files (x86)\Yarn\lib\cli.js:98:30)
+      at C:\Program Files (x86)\Yarn\lib\cli.js:116:14
+      at new Promise (<anonymous>)
+      at new F (C:\Program Files (x86)\Yarn\lib\cli.js:23451:28)
+      at C:\Program Files (x86)\Yarn\lib\cli.js:95:12
+      at runCommand (C:\Program Files (x86)\Yarn\lib\cli.js:87312:22)
+      at Object.<anonymous> (C:\Program Files (x86)\Yarn\lib\cli.js:87412:14)