done-clean-code

HoangLinh51 · Sep 3, 2023 · 754a217 · 754a217
1 parent 7d145eb
commit 754a217
Show file tree

Hide file tree

Showing 34 changed files with 178 additions and 235 deletions.
diff --git a/angular.json b/angular.json
@@ -21,7 +21,8 @@
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "src/styles.css",
-              "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
+              "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
+              "node_modules/ngx-toastr/toastr.css"
             ],
             "scripts": []
           },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,6 @@
     "ngx-pagination": "^6.0.3",
     "ngx-toastr": "^17.0.2",
     "rxjs": "~7.8.0",
-    "toastr": "^2.1.4",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"
   },

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -4,8 +4,8 @@ import { CommonModule, registerLocaleData } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AppRoutingModule } from './app-routing.module';
-
-import { MaterialModule } from './material-module';
+import { RouterModule } from '@angular/router';
+import { ToastrModule } from 'ngx-toastr';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AngularFireModule } from '@angular/fire/compat';
 import { AngularFireStorageModule } from '@angular/fire/compat/storage';
@@ -33,8 +33,6 @@ import { LibModule } from './lib/lib.module';
 import { NZ_I18N } from 'ng-zorro-antd/i18n';
 import { en_US } from 'ng-zorro-antd/i18n';
 import en from '@angular/common/locales/en';
-import { RouterModule } from '@angular/router';
-import { ToastrModule } from 'ngx-toastr';
 
 registerLocaleData(en);
 
@@ -55,13 +53,10 @@ registerLocaleData(en);
     AuthRoutingModule,
     ProductDetailModule,
     ProfileModule,
-    MaterialModule,
     PostModule,
     AngularFireModule.initializeApp(environment.firebaseConfig),
     AngularFireStorageModule,
     BrowserAnimationsModule,
-    // ScrollingModule,
-    // DragDropModule,
     ToastrModule.forRoot({
       closeButton: true,
       timeOut: 2000,

diff --git a/src/app/cart/gross-product/gross-product.component.html b/src/app/cart/gross-product/gross-product.component.html
@@ -1,23 +1,21 @@
 <ng-container *ngIf="productco.id">
-  <tr class="gross-product">
+  <tr class="gross-product" [routerLink]="['/shop/', productco.id]" style="cursor: pointer">
     <td class="product-remove">
       <button type="submit" (click)="removeItem()"><i class="fa-solid fa-xmark"></i></button>
     </td>
-    <a [routerLink]="['/shop/', productco.id]">
-      <td class="product-thumbnail">
-        <img width="145" height="145" alt="poster_1_up" class="shop_thumbnail" [src]="productco.images[0]">
-      </td>
-      <td class="product-name">
-        {{productco.title}}
-      </td>
-    </a>
+    <td class="product-thumbnail">
+      <img width="145" height="145" alt="poster_1_up" class="shop_thumbnail" [src]="productco.images[0]">
+    </td>
+    <td class="product-name">
+      {{productco.title}}
+    </td>
     <td class="product-price">
       <span class="amount">{{productco.price | currency: 'USD'}}</span>
     </td>
     <td class="product-quantity">
       <div class="quantity buttons_added">
-        <input type="number" class="quantity" title="Qty" step="1" min="1"
-          [(ngModel)]="productco.quantity" (click)="[onChangeQuantity(), totalAmount()]">
+        <input type="number" class="quantity" title="Qty" step="1" min="1" [(ngModel)]="productco.quantity"
+          (click)="[onChangeQuantity(), totalAmount()]">
       </div>
     </td>
     <td class="product-subtotal">

diff --git a/src/app/cart/gross-product/gross-product.component.ts b/src/app/cart/gross-product/gross-product.component.ts
@@ -3,6 +3,7 @@ import { IUser } from 'src/app/model/auth.model';
 import { AuthService } from 'src/app/service/auth.service';
 import { Product } from 'src/app/model/product.model';
 import { CartComponent } from '../cart.component';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-gross',
@@ -16,13 +17,15 @@ export class GrossProductComponent {
 
   constructor(
     private authService: AuthService,
-    private cartComponent: CartComponent
+    private cartComponent: CartComponent,
+    private toastrService: ToastrService
   ) {
     this.user = this.authService.userValue;
   }
 
   removeItem() {
     this.cartComponent.removeItem(this.productco.id);
+    this.toastrService.info('Delete Product!');
   }
 
   onChangeQuantity() {

diff --git a/src/app/cart/orther-product/orther-product.component.html b/src/app/cart/orther-product/orther-product.component.html
@@ -1,12 +1,10 @@
 <ng-container *ngIf="product.id">
   <div class="single-sidebar">
-    <div class="thubmnail-recent">
-      <a [routerLink]="['/shop/', product.id]">
-        <img src={{product.images[0]}} class="recent-thumb" alt="">
-        <h4>{{product.title}}</h4>
-      </a>
+    <div class="thubmnail-recent" [routerLink]="['/shop/', product.id]">
+      <img src={{product.images[0]}} class="recent-thumb" alt="">
+      <h4>{{product.title}}</h4>
       <div class="product-sidebar-price">
-        {{product.price | currency: 'USD'}}
+        <ins>{{product.price | currency: 'USD'}}</ins>
       </div>
     </div>
   </div>

diff --git a/src/app/checkout/checkout.module.ts b/src/app/checkout/checkout.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgOptimizedImage } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -27,6 +27,7 @@ import { ShippingAddressComponent } from './shipping-address/shipping-address.co
   ],
   providers: [],
   bootstrap: [],
+  schemas: [NO_ERRORS_SCHEMA],
   exports: [FormsModule],
 })
 export class CheckoutModeule {}
diff --git a/src/app/checkout/orther-product/orther-product.component.html b/src/app/checkout/orther-product/orther-product.component.html
@@ -1,12 +1,10 @@
 <ng-container *ngIf="product.id">
   <div class="single-sidebar">
-    <div class="thubmnail-recent">
-      <a [routerLink]="['/shop/', product.id]">
-        <img src={{product.images[0]}} class="recent-thumb" alt="">
-        <h4>{{product.title}}</h4>
-      </a>
+    <div class="thubmnail-recent" [routerLink]="['/shop/', product.id]">
+      <img src={{product.images[0]}} class="recent-thumb" alt="">
+      <h4>{{product.title}}</h4>
       <div class="product-sidebar-price">
-        {{product.price | currency: 'USD'}}
+        <ins>{{product.price | currency: 'USD'}}</ins>
       </div>
     </div>
   </div>

diff --git a/src/app/checkout/shipping-address/shipping-address.component.ts b/src/app/checkout/shipping-address/shipping-address.component.ts
@@ -68,7 +68,6 @@ export class ShippingAddressComponent implements OnInit {
       a.push(ifCheckout);
       localStorage.setItem(ORDER_KEY + this.user?.id, JSON.stringify(a));
       this.router.navigate(['/profile']);
-
       this.toastrService.success('Successful Order', 'Success!');
     } else {
       this.toastrService.error(

diff --git a/src/app/footertop/footertop.component.css b/src/app/footertop/footertop.component.css
@@ -0,0 +1,39 @@
+.footer-social a {
+  background: none repeat scroll 0 0 #1abc9c;
+  color: #fff;
+  display: inline-block;
+  font-size: 20px;
+  height: 40px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  padding-top: 5px;
+  text-align: center;
+  width: 40px;
+  border: 1px solid #1abc9c;
+}
+
+.footer-social a:hover {
+  background-color: #222;
+  border-color: #666
+}
+
+.footer-social {
+  margin-top: 20px
+}
+
+.footer-menu ul {
+  list-style: outside none none;
+  margin: 0;
+  padding: 0;
+}
+
+.footer-menu ul li {
+  border-bottom: 1px dashed #555;
+  padding: 5px 0;
+}
+
+.footer-menu a {
+  display: block;
+  padding: 5px 0;
+  color: #999
+}
diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css
@@ -0,0 +1,24 @@
+.user-menu ul {
+  list-style: outside none none;
+  margin: 0;
+  padding: 0;
+}
+
+.user-menu li {
+  display: inline-block;
+}
+
+.user-menu li a {
+  display: block;
+  font-size: 13px;
+  margin-right: 5px;
+  padding: 10px;
+}
+
+.user-menu li a i.fa {
+  margin-right: 5px;
+
+}
+a{
+  color: #3dc6ab;;
+}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
@@ -8,12 +8,12 @@
               <li><a routerLink="/signin" routerLinkActive="selected"><i class="fa fa-user"></i>Login</a></li>
             </div>
             <ng-template #template>
-                <li><a routerLink="/profile" routerLinkActive="selected`"><i class="fa fa-user"></i> My Account</a></li>
-                <li><a routerLink="/cart" routerLinkActive="selected`"><i class="fa fa-user"></i> My Cart</a> </li>
-                <li><a routerLink="/checkout"routerLinkActive="selected`"><i class="fa fa-user"></i> Checkout</a> </li>
-                <li ><a routerLinkActive="selected"class="btn btn-link nav-item nav-link" (click)="logout()"><i class="fa fa-user"></i>Logout</a></li>
-              </ng-template>
-
+              <li><a routerLink="/profile" routerLinkActive="selected`"><i class="fa fa-user"></i> My Account</a></li>
+              <li><a routerLink="/cart" routerLinkActive="selected`"><i class="fa fa-user"></i> My Cart</a> </li>
+              <li><a routerLink="/checkout" routerLinkActive="selected`"><i class="fa fa-user"></i> Checkout</a> </li>
+              <li><a routerLinkActive="selected" class="btn btn-link nav-item nav-link" (click)="logout()"><i
+                    class="fa fa-user"></i>Logout</a></li>
+            </ng-template>
           </ul>
         </div>
       </div>

diff --git a/src/app/home/bestproduct/recently-viewed/recently-viewed.component.html b/src/app/home/bestproduct/recently-viewed/recently-viewed.component.html
@@ -1,14 +1,15 @@
-<div class="single-wid-product " style="cursor: pointer" [routerLink]="['/shop/', productco.id]">
-  <a><img [src]="productco.images[0]" width="90" alt="" class="product-thumb"></a>
-  <h2><a>{{productco.title}}</a></h2>
-  <div class="product-wid-rating">
-    <i class="fa fa-star"></i>
-    <i class="fa fa-star"></i>
-    <i class="fa fa-star"></i>
-    <i class="fa fa-star"></i>
-    <i class="fa fa-star"></i>
-  </div>
-  <div class="product-wid-price">
-    <ins>{{productco.price | currency: 'USD'}}</ins>
-  </div>
+<div class="single-wid-product " style="cursor: pointer" >
+  <a [routerLink]="['/shop/', productco.id]"><img [src]="productco.images[0]" width="90" alt="" class="product-thumb">
+    <h2>{{productco.title}}</h2>
+    <div class="product-wid-rating">
+      <i class="fa fa-star"></i>
+      <i class="fa fa-star"></i>
+      <i class="fa fa-star"></i>
+      <i class="fa fa-star"></i>
+      <i class="fa fa-star"></i>
+    </div>
+    <div class="product-carousel-price">
+      <ins>{{productco.price | currency: 'USD'}}</ins>
+    </div>
+  </a>
 </div>
diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
@@ -15,6 +15,7 @@ import { ProductComponent } from './newproduct/product/product.component';
 import { TopSellersComponent } from './bestproduct/top-sellers/top-sellers.component';
 import { RecentlyViewedComponent } from './bestproduct/recently-viewed/recently-viewed.component';
 import { TopNewComponent } from './bestproduct/top-new/top-new.component';
+import { LibModule } from '../lib/lib.module';
 
 @NgModule({
   declarations: [
@@ -36,6 +37,7 @@ import { TopNewComponent } from './bestproduct/top-new/top-new.component';
     NgOptimizedImage,
     CarouselModule,
     NgxPaginationModule,
+    LibModule,
   ],
   providers: [],
   bootstrap: [],

diff --git a/src/app/home/newproduct/product/product.component.css b/src/app/home/newproduct/product/product.component.css
@@ -79,3 +79,13 @@ form {
 .single-product:hover .product-hover:after {
   left: 0
 }
+.product-carousel-price ins {
+  color: #1abc9c;
+  font-weight: 700;
+  margin-right: 5px;
+  text-decoration: none;
+}
+.product-carousel-price{
+  color: #1abc9c ;
+  cursor: pointer
+}
diff --git a/src/app/home/newproduct/product/product.component.html b/src/app/home/newproduct/product/product.component.html
@@ -8,10 +8,10 @@
         details</button>
     </div>
   </div>
-  <a [routerLink]="['/shop/', product.id]">
+  <div class="product-carousel-price" [routerLink]="['/shop/', product.id]">
     <h2>{{product.title}}</h2>
-    <div class="product-carousel-price">
+    <div>
       {{product.price | currency: 'USD'}}
     </div>
-  </a>
+  </div>
 </div>
diff --git a/src/app/home/newproduct/product/product.component.ts b/src/app/home/newproduct/product/product.component.ts
@@ -21,9 +21,9 @@ export class ProductComponent {
   constructor(
     private formBuilder: FormBuilder,
     private authService: AuthService,
-    private toastrService: ToastrService,
     private route: ActivatedRoute,
-    private router: Router
+    private router: Router,
+    private toastrService: ToastrService
   ) {
     this.user = this.authService.userValue;
   }

diff --git a/src/app/lib/lib.module.ts b/src/app/lib/lib.module.ts
@@ -1,7 +1,19 @@
 import { NgModule } from '@angular/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
 import { NzRateModule } from 'ng-zorro-antd/rate';
+import { ToastrModule } from 'ngx-toastr';
 
 @NgModule({
-  exports: [NzRateModule],
+  exports: [
+    NzRateModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatTableModule,
+    MatTabsModule,
+    ToastrModule,
+  ],
 })
 export class LibModule {}