29/09/2021

Shopify-Cart/src/main/resources/application.properties

@@ -1,6 +1,6 @@
 server.port=8002
 
-spring.datasource.url=jdbc:mysql://10.3.117.22:3306/Shopify_DB?createDatabaseIfNotExist=true
+spring.datasource.url=jdbc:mysql://10.3.117.30:3306/Shopify_DB?createDatabaseIfNotExist=true
 spring.datasource.username=testuser1
 spring.datasource.password=PASSWORD123
 

ShopifyUI/proxy.conf.json

@@ -1,14 +1,14 @@
 {
     "/api1": {
-        "target": "http://10.3.117.22:8001",
+        "target": "http://10.3.117.30:8001",
         "secure": false
     },
     "/api2": {
-        "target": "http://10.3.117.22:8002",
+        "target": "http://10.3.117.30:8002",
         "secure": false
     },
     "/api3": {
-        "target": "http://10.3.117.22:8003",
+        "target": "http://10.3.117.30:8004",
         "secure": false
     }
 }

ShopifyUI/src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import { SignUpComponent } from './auth/sign-up/sign-up.component';
 import { AdminComponent } from './components/admin/admin.component';
 import { CartComponent } from './components/cart/cart.component';
 import { HomeComponent } from './components/home/home.component';
+import { OrdersComponent } from './components/orders/orders.component';
 import { PaymentsComponent } from './components/payments/payments.component';
 import { ProductDetailComponent } from './components/product-detail/product-detail.component';
 import { ProductsComponent } from './components/products/products.component';
@@ -17,6 +18,7 @@ const routes: Routes = [
   { path: 'products', component: ProductsComponent},
   { path: 'products/:product_id', component: ProductDetailComponent},
   { path: 'cart/:user_id', component: CartComponent, canActivate:[AuthGuardService] },
+  { path: 'orders/:user_id', component: OrdersComponent, canActivate:[AuthGuardService] },
   { path: 'payment', component: PaymentsComponent, canActivate: [AuthGuardService]},
   { path: 'login', component: LoginComponent},
   { path: 'signup', component: SignUpComponent},

ShopifyUI/src/app/auth/login/login.component.html

@@ -4,10 +4,10 @@
       <h2>Shopify</h2>
     </div>
     <div class="col-1">
-      <a routerLink="/home">Home</a>
+        <a routerLink="/home"><i class="bi bi-house"></i></a>
     </div>
     <div class="col-1">
-      <a routerLink="/products">Products</a>
+        <a routerLink="/products"><i class="bi bi-box-seam"></i></a>
     </div>
     <div class="col-1"></div>
 </div>

ShopifyUI/src/app/auth/sign-up/sign-up.component.html

@@ -4,10 +4,10 @@
       <h2>Shopify</h2>
     </div>
     <div class="col-1">
-      <a routerLink="/home">Home</a>
+        <a routerLink="/home"><i class="bi bi-house"></i></a>
     </div>
     <div class="col-1">
-      <a routerLink="/products">Products</a>
+        <a routerLink="/products"><i class="bi bi-box-seam"></i></a>
     </div>
     <div class="col-1"></div>
 </div>

ShopifyUI/src/app/components/cart/cart.component.html

@@ -20,9 +20,9 @@
           <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
             <button ngbDropdownItem disabled class="usernameBtn">Hello {{username}}</button>
             <hr>
-            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}">Personal details</button>
-            <button ngbDropdownItem>Orders</button>
-            <button ngbDropdownItem (click)="onLogout()">Logout</button>
+            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}"><i class="bi bi-person-circle"></i>&nbsp;&nbsp;Personal details</button>
+            <button ngbDropdownItem routerLink="/orders/{{uid}}"><i class="bi bi-box"></i>&nbsp;&nbsp;Orders</button>
+            <button ngbDropdownItem (click)="onLogout()"><i class="bi bi-box-arrow-right"></i>&nbsp;&nbsp;Logout</button>
           </div>
         </div>
     </ng-template>
@@ -87,10 +87,11 @@
 </div>
 <br>
 <div class="row">
-  <div class="col-6 cart-content">
+  <div class="col-10 cart-content">
     <h3>Total : Rs {{totalPrice}}</h3> 
   </div>
-  <div class="col-6 text-center payBtn">
+  <div class="col-2 text-center payBtn">
     <button routerLink="/payment">Proceed To Pay</button>
   </div>
-</div>
+</div>
+<br><br>

ShopifyUI/src/app/components/home/home.component.html

@@ -20,9 +20,9 @@
           <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
             <button ngbDropdownItem disabled class="usernameBtn">Hello {{username}}</button>
             <hr>
-            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}">Personal details</button>
-            <button ngbDropdownItem>Orders</button>
-            <button ngbDropdownItem (click)="onLogout()">Logout</button>
+            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}"><i class="bi bi-person-circle"></i>&nbsp;&nbsp;Personal details</button>
+            <button ngbDropdownItem routerLink="/orders/{{uid}}"><i class="bi bi-box"></i>&nbsp;&nbsp;Orders</button>
+            <button ngbDropdownItem (click)="onLogout()"><i class="bi bi-box-arrow-right"></i>&nbsp;&nbsp;Logout</button>
           </div>
         </div>
     </ng-template>

ShopifyUI/src/app/components/orders/orders.component.css

@@ -0,0 +1,43 @@
+.orders  {
+    margin: 0px auto;
+}
+
+.orderHeading h1 {
+    font-size: 3em;
+}
+.order{
+    color: #1B4F72;
+    padding: 12px;
+    border: 1px solid lightgray;
+}
+
+.data {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    height: 520px;
+    border: 1px solid lightgray;
+}
+
+.dataheading {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    background-color: #1B4F72;
+    padding: 12px;
+}
+
+.nd {
+    background-color: #F39C12;
+    padding: 6px;
+    border-radius: 20px;
+    color: white;
+}
+
+.d {
+    background-color: #27AE60;
+    color: white;
+}
+
+.dc {
+    background-color: #E74C3C;
+    color: white;
+}

ShopifyUI/src/app/components/orders/orders.component.html

@@ -1 +1,70 @@
-<p>orders works!</p>
+<div class="row navbar text-right">
+        <div class="col-1"></div>
+        <div class="col-5">
+        <h2>Shopify</h2>
+        </div>
+        <div class="col-1">
+        <a routerLink="/home"><i class="bi bi-house"></i></a>
+        </div>
+        <div class="col-1">
+        <a routerLink="/products"><i class="bi bi-box-seam"></i></a>
+        </div>
+        <div class="col-1">
+        <a routerLink="/cart/{{uid}}"><i class="bi bi-cart3"></i>&nbsp;&nbsp;{{cartNo}}</a>
+        </div>
+        <div class="col-3 loginbtn">
+        <ng-container *ngIf="authcode == null;then loginmsg else logoutmsg"></ng-container>
+        <ng-template #logoutmsg>
+            <div ngbDropdown class="d-inline-block">
+                <button class="btn dropBtn" id="dropdownBasic1" ngbDropdownToggle><i class="bi bi-person"></i>Welcome {{username}}</button>
+                <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+                <button ngbDropdownItem disabled class="usernameBtn">Hello {{username}}</button>
+                <hr>
+                <button ngbDropdownItem routerLink="/personalDetails/{{uid}}"><i class="bi bi-person-circle"></i>&nbsp;&nbsp;Personal details</button>
+            <button ngbDropdownItem routerLink="/orders/{{uid}}" class="activeBtn"><i class="bi bi-box"></i>&nbsp;&nbsp;Orders</button>
+            <button ngbDropdownItem (click)="onLogout()"><i class="bi bi-box-arrow-right"></i>&nbsp;&nbsp;Logout</button>
+                </div>
+            </div>
+        </ng-template>
+        <ng-template #loginmsg>
+            <a routerLink="/login">Login To Continue</a>
+        </ng-template>
+        </div>
+        <div class="col-1"></div>
+</div>
+<br><br>
+<div class="row">
+    <div class="col-12 text-center orderHeading">
+        <h1 style="color: #1B4F72;">MY ORDERS</h1>
+    </div>
+</div>
+<br><br>
+<div class="row">
+    <div class="col-10 orders">
+        <div class="row dataheading text-center">
+            <div class="col-2"><h6>Order Id</h6></div>
+            <div class="col-2"><h6>Order Number</h6></div>
+            <div class="col-2"><h6>Product Name</h6></div>
+            <div class="col-2"><h6>Quantity</h6></div>
+            <div class="col-2"><h6>Price</h6></div>
+            <div class="col-2"><h6>Order Status</h6></div>
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-10 orders data">
+        <div *ngFor='let o of orders'>
+            <div class="row order text-center align-items-center">
+                <div class="col-2">{{o.id}}</div>
+                <div class="col-2">{{o.orderNumber}}</div>
+                <div class="col-2">{{o.productName}}</div>
+                <div class="col-2">{{o.quantity}}</div>
+                <div class="col-2">{{o.price}}</div>
+                <div class="col-2 nd" *ngIf="o.status == 'Not Delivered'">{{o.status}}</div>
+                <div class="col-2 d" *ngIf="o.status == 'Delivered'">{{o.status}}</div>
+                <div class="col-2 dc" *ngIf="o.status == 'Cancelled'">{{o.status}}</div>
+            </div>
+        </div>
+    </div>
+</div>
+<br><br><br>

ShopifyUI/src/app/components/orders/orders.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Order } from 'src/app/model/order.model';
+import { CartService } from 'src/app/service/cart.service';
+import { OrderService } from 'src/app/service/order.service';
 
 @Component({
   selector: 'app-orders',
@@ -7,9 +10,37 @@ import { Component, OnInit } from '@angular/core';
 })
 export class OrdersComponent implements OnInit {
 
-  constructor() { }
+  uid:any = 0;
+  username:any='';
+  authcode:any='';
+  cartNo: number = 0;
+  orders: Order[];
+  constructor(private cartService: CartService, private orderService:OrderService) { }
 
   ngOnInit(): void {
+    this.username = window.sessionStorage.getItem("username");
+    this.authcode = window.sessionStorage.getItem("authcode");
+    if (this.authcode !== null) {
+      this.uid = window.sessionStorage.getItem("user_id");
+    }
+    this.cartService.getCartByUser(this.uid).subscribe(data1 => {
+      this.cartNo = data1.length;
+    })
+    this.orderService.getOrderByUser(this.uid).subscribe(data => {
+      this.orders = data;
+      console.log(this.orders)
+    })
   }
 
+  onLogout() {
+    if (this.authcode != null) {
+      this.authcode = null;
+      this.username = null;
+      window.sessionStorage.removeItem("username");
+      window.sessionStorage.removeItem("user_id");
+      window.sessionStorage.removeItem("authcode");
+      window.sessionStorage.removeItem("isLoggedIn");
+      this.cartNo = 0;
+    }
+  }
 }

ShopifyUI/src/app/components/payments/payments.component.html

@@ -43,6 +43,6 @@
 <br><br>
 <div class="row">
     <div class="col-12 text-center payBtn">
-      <button routerLink="/order">Proceed To Checkout</button>
+      <button (click)="addOrder()">Proceed To Checkout</button>
     </div>
 </div>

ShopifyUI/src/app/components/payments/payments.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { Cart } from 'src/app/model/cart.model';
+import { Order } from 'src/app/model/order.model';
 import { CartService } from 'src/app/service/cart.service';
+import { OrderService } from 'src/app/service/order.service';
 
 @Component({
   selector: 'app-payments',
@@ -9,17 +12,20 @@ import { CartService } from 'src/app/service/cart.service';
 })
 export class PaymentsComponent implements OnInit {
 
-  uid:number = 1;
+  uid:any = 0;
   cartNo: number = 0;
   cartItems: Cart[] = [];
   totalPrice: number = 0;
   username:any = '';
   authcode:any = '';
-  constructor(private cartService: CartService) { }
+  constructor(private cartService: CartService,private orderService: OrderService, private route:Router) { }
 
   ngOnInit(): void {
     this.username = window.sessionStorage.getItem("username");
     this.authcode = window.sessionStorage.getItem("authcode");
+    if (this.authcode !== null) {
+      this.uid = window.sessionStorage.getItem("user_id");
+    }
     this.cartService.getCartByUser(this.uid).subscribe(data1 => {
       this.cartNo = data1.length;
       this.cartItems=data1;
@@ -30,6 +36,15 @@ export class PaymentsComponent implements OnInit {
     })    
   }
 
+  addOrder() {
+    let order:Order = {
+      status: "Not Delivered"
+    }
+    this.orderService.postOrder(this.uid,order).subscribe(data => {
+    })
+    this.route.navigateByUrl("/orders/" + this.uid);
+  }
+
   onLogout() {
     if (this.authcode != null) {
       this.authcode = null;

ShopifyUI/src/app/components/product-detail/product-detail.component.html

@@ -20,9 +20,9 @@
           <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
             <button ngbDropdownItem disabled class="usernameBtn">Hello {{username}}</button>
             <hr>
-            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}">Personal details</button>
-            <button ngbDropdownItem>Orders</button>
-            <button ngbDropdownItem (click)="onLogout()">Logout</button>
+            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}"><i class="bi bi-person-circle"></i>&nbsp;&nbsp;Personal details</button>
+            <button ngbDropdownItem routerLink="/orders/{{uid}}"><i class="bi bi-box"></i>&nbsp;&nbsp;Orders</button>
+            <button ngbDropdownItem (click)="onLogout()"><i class="bi bi-box-arrow-right"></i>&nbsp;&nbsp;Logout</button>
           </div>
         </div>
     </ng-template>
@@ -95,7 +95,7 @@
   <br><br>
   <h3>Submit Your Review</h3>
   <hr>
-  <div class="row">
+  <div class="row" *ngIf="authcode != null">
     <div class="col-12">
       <form [formGroup]='reviewForm' (submit)='onReviewFormSubmit()' class="text-center review_Form">
         <div class="row align-items-center">

ShopifyUI/src/app/components/product-detail/product-detail.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Cart } from 'src/app/model/cart.model';
 import { Product } from 'src/app/model/product.model';
 import { Review } from 'src/app/model/review.model';
@@ -26,7 +26,7 @@ export class ProductDetailComponent implements OnInit {
   reviewForm: FormGroup;
   username:any='';
   authcode:any='';
-  constructor(private actRouter:ActivatedRoute, private productService:ProductService, private cartService:CartService,private reviewService:ReviewService) {  
+  constructor(private actRouter:ActivatedRoute, private productService:ProductService, private cartService:CartService,private reviewService:ReviewService, private route: Router) {  
     this.reviewForm = new FormGroup({
       reviewText : new FormControl(''),
       rating : new FormControl(''),
@@ -70,17 +70,22 @@ export class ProductDetailComponent implements OnInit {
   }
 
   addToCart(discountedPrice: number) {
-    console.log("addtocart")
-    let cartData:Cart = {
-      quantity : this.quantity,
-      price: discountedPrice
-    }
-    console.log(cartData)
-    this.cartService.postCart(cartData,this.uid,this.pid).subscribe(data => {
-      this.cartService.getCartByUser(this.uid).subscribe(data1 => {
-        this.cartNo = data1.length;
+    if (this.authcode != null) {
+      console.log("addtocart")
+      let cartData:Cart = {
+        quantity : this.quantity,
+        price: discountedPrice
+      }
+      console.log(cartData)
+      this.cartService.postCart(cartData,this.uid,this.pid).subscribe(data => {
+        this.cartService.getCartByUser(this.uid).subscribe(data1 => {
+          this.cartNo = data1.length;
+        })
       })
-    })
+    }
+    else {
+      this.route.navigateByUrl("/login")
+    }
   }
 
   onReviewFormSubmit() {
@@ -119,6 +124,7 @@ export class ProductDetailComponent implements OnInit {
       window.sessionStorage.removeItem("authcode");
       window.sessionStorage.removeItem("isLoggedIn");
       this.cartNo = 0;
+      this.route.navigateByUrl("/home");
     }
   }
 }

ShopifyUI/src/app/components/products/products.component.html

@@ -20,9 +20,9 @@
           <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
             <button ngbDropdownItem disabled class="usernameBtn">Hello {{username}}</button>
             <hr>
-            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}">Personal details</button>
-            <button ngbDropdownItem>Orders</button>
-            <button ngbDropdownItem (click)="onLogout()">Logout</button>
+            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}"><i class="bi bi-person-circle"></i>&nbsp;&nbsp;Personal details</button>
+            <button ngbDropdownItem routerLink="/orders/{{uid}}"><i class="bi bi-box"></i>&nbsp;&nbsp;Orders</button>
+            <button ngbDropdownItem (click)="onLogout()"><i class="bi bi-box-arrow-right"></i>&nbsp;&nbsp;Logout</button>
           </div>
         </div>
     </ng-template>

ShopifyUI/src/app/components/products/products.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
 import { Cart } from 'src/app/model/cart.model';
 import { Product } from 'src/app/model/product.model';
 import { CartService } from 'src/app/service/cart.service';
@@ -20,7 +21,7 @@ export class ProductsComponent implements OnInit {
   uid:any = 0;
   username:any='';
   authcode:any='';
-  constructor(private productService: ProductService,private cartService: CartService) { 
+  constructor(private productService: ProductService,private cartService: CartService, private route: Router) { 
     this.searchForm = new FormGroup({
       prodName: new FormControl('')
     })
@@ -54,15 +55,20 @@ export class ProductsComponent implements OnInit {
 
   addToCart(discountedPrice: number,pid:number) {
     console.log("addtocart")
-    let cartData:Cart = {
-      quantity : 1,
-      price: discountedPrice
-    }
-    this.cartService.postCart(cartData,this.uid,pid).subscribe(data => {
-      this.cartService.getCartByUser(this.uid).subscribe(data1 => {
-        this.cartNo = data1.length;
+    if (this.authcode != null) {
+      let cartData:Cart = {
+        quantity : 1,
+        price: discountedPrice
+      }
+      this.cartService.postCart(cartData,this.uid,pid).subscribe(data => {
+        this.cartService.getCartByUser(this.uid).subscribe(data1 => {
+          this.cartNo = data1.length;
+        })
       })
-    })
+    }
+    else {
+      this.route.navigateByUrl("/login");
+    }
   }
 
   onLogout() {

ShopifyUI/src/app/components/userprofile/userprofile.component.css

@@ -1,8 +1,3 @@
-.activeBtn {
-    background-color: #1B4F72;
-    color: white;
-}
-
 .container {
     margin: 0px auto;
 }

ShopifyUI/src/app/components/userprofile/userprofile.component.html

@@ -20,9 +20,9 @@
           <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
             <button ngbDropdownItem disabled class="usernameBtn">Hello {{username}}</button>
             <hr>
-            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}" class="activeBtn">Personal details</button>
-            <button ngbDropdownItem>Orders</button>
-            <button ngbDropdownItem (click)="onLogout()">Logout</button>
+            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}" class="activeBtn"><i class="bi bi-person-circle"></i>&nbsp;&nbsp;Personal details</button>
+            <button ngbDropdownItem routerLink="/orders/{{uid}}"><i class="bi bi-box"></i>&nbsp;&nbsp;Orders</button>
+            <button ngbDropdownItem (click)="onLogout()"><i class="bi bi-box-arrow-right"></i>&nbsp;&nbsp;Logout</button>
           </div>
         </div>
     </ng-template>

ShopifyUI/src/app/model/order.model.ts

@@ -0,0 +1,11 @@
+export class Order {
+    id?: number;
+    quantity?: number;
+	price?: number;
+	status?: string;
+	orderNumber?: number;
+	userId?: number;
+	productId?: number;
+	username?: string;
+	productName?: string;
+}

ShopifyUI/src/app/service/order.service.ts

@@ -1,9 +1,24 @@
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Order } from '../model/order.model';
 
 @Injectable({
   providedIn: 'root'
 })
 export class OrderService {
 
-  constructor() { }
+  path:String = "http://localhost:59279/api3";
+
+  constructor(private httpClient:HttpClient) { }
+
+  public postOrder(uid:number, order:Order): Observable<any> {
+    let order_post_api = this.path + "/order/" + uid;
+    return this.httpClient.post<any>(order_post_api,order);
+  }
+
+  public getOrderByUser(uid:number): Observable<Order[]> {
+    let order_get_api = this.path + "/order/" + uid;
+    return this.httpClient.get<Order[]>(order_get_api);
+  }
 }

ShopifyUI/src/styles.css

@@ -94,4 +94,10 @@ body {
   background-color: #1B4F72;
   color: white;
   padding-top: 10px;
+}
+
+/* For Dropdown */
+.activeBtn {
+  background-color: #1B4F72;
+  color: white;
 }