Merge pull request #16 from SmartStockTz/migrate_angular_14

Migrate angular 14

angular.json

@@ -146,6 +146,5 @@
     }},
   "cli": {
     "analytics": false
-  },
-  "defaultProject": "web"
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartstock-web",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "ng": "ng",
     "box": "yarn install && yarn start",
@@ -13,33 +13,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~13.0.1",
-    "@angular/cdk": "^13.0.1",
-    "@angular/common": "~13.0.1",
-    "@angular/compiler": "~13.0.1",
-    "@angular/core": "~13.0.1",
-    "@angular/forms": "~13.0.1",
-    "@angular/material": "^13.0.1",
-    "@angular/platform-browser": "~13.0.1",
-    "@angular/platform-browser-dynamic": "~13.0.1",
-    "@angular/router": "~13.0.1",
+    "@angular/animations": "^14.0.3",
+    "@angular/cdk": "^14.0.3",
+    "@angular/common": "^14.0.3",
+    "@angular/compiler": "^14.0.3",
+    "@angular/core": "^14.0.3",
+    "@angular/forms": "^14.0.3",
+    "@angular/material": "^14.0.3",
+    "@angular/platform-browser": "^14.0.3",
+    "@angular/platform-browser-dynamic": "^14.0.3",
+    "@angular/router": "^14.0.3",
     "bfast": "6.0.1",
     "comlink": "^4.3.1",
-    "masonry-layout": "4.2.2",
     "moment": "2.29.3",
     "ngx-infinite-scroll": "13.0.2",
-    "ngx-masonry": "13.0.0",
     "rxjs": "~7.4.0",
-    "smartstock-accounts": "1.0.0",
-    "smartstock-core": "1.0.1",
-    "smartstock-shop": "1.0.0",
+    "smartstock-accounts": "1.0.1",
+    "smartstock-core": "1.0.2",
+    "smartstock-shop": "1.0.1",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.0.2",
-    "@angular/cli": "~13.0.2",
-    "@angular/compiler-cli": "~13.0.1",
+    "@angular-devkit/build-angular": "^14.0.3",
+    "@angular/cli": "^14.0.3",
+    "@angular/compiler-cli": "^14.0.3",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^14.17.32",
@@ -51,10 +49,10 @@
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^13.0.3",
+    "ng-packagr": "^14.0.2",
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.4.4"
+    "typescript": "~4.7.4"
   }
 }

projects/web-mock/src/app/app.module.ts

@@ -27,7 +27,7 @@ const routes: Routes = [
   {
     path: "account",
     loadChildren: () =>
-      import("smartstockt-accounts").then((mod) => mod.AccountModule)
+      import("smartstock-accounts").then((mod) => mod.AccountModule)
   }
 ];
 

projects/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartstock-web",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "repository": {
     "url": "git://github.com/smartstocktz/smartstock-web.git"
   },

projects/web/src/componets/product.ts

@@ -3,21 +3,7 @@ import {MallProduct} from '../models/mall-product';
 
 @Component({
   selector: 'app-product',
-  template: `
-    <div ngxMasonryItem class="product-item"
-         routerLink="/shops/{{product.shop.projectId}}" [queryParams]="{product:product.product}">
-      <img *ngIf="!noImage" (error)="hideImage()" [src]="product.images[0]" alt="{{product.product}}"/>
-      <div [class]="!noImage?'product-item-detail':'product-item-detail-no-image'">
-        <p [style]="noImage?{color: '#f5f5f5'}:{}" class="product-item-detail-category">{{product.product}}</p>
-        <p [style]="noImage?{color: 'white'}:{}"
-           class="product-item-detail-price">{{product.retailPrice | currency: 'TZS '}}</p>
-      </div>
-      <a routerLink="/shops/{{product.shop.projectId}}" [queryParams]="{product:product.product}"
-         class="product-item-detail-link">
-        by {{product.shop.businessName}}
-      </a>
-    </div>
-  `,
+  templateUrl: './product.html',
   styleUrls: ['../styles/product.scss']
 })
 export class Product {

projects/web/src/componets/products.ts

@@ -3,30 +3,7 @@ import {MallState} from '../states/mall.state';
 
 @Component({
   selector: 'app-products',
-  template: `
-    <div infiniteScroll
-         [infiniteScrollDistance]="5"
-         [infiniteScrollThrottle]="50"
-         [scrollWindow]="false"
-         (scrolled)="onScroll()"
-         class="products-container">
-      <app-join-promotion></app-join-promotion>
-      <ngx-masonry (layoutComplete)="donePopulate()" [ordered]="true" [options]="options">
-        <app-product [product]="product" *ngFor="let product of mallState.products | async"></app-product>
-      </ngx-masonry>
-      <div *ngIf="showLoadMore" class="load-more">
-        <button (click)="onScroll()"
-                mat-button color="primary" *ngIf="(mallState.loadProducts  |async) === false">
-          Load More
-        </button>
-        <mat-progress-spinner *ngIf="(mallState.loadProducts  | async) === true"
-                              [diameter]="20"
-                              color="primary"
-                              mode="indeterminate">
-        </mat-progress-spinner>
-      </div>
-    </div>
-  `,
+  templateUrl: './products.html',
   styleUrls: ['../styles/product.scss']
 })
 

projects/web/src/styles/product.scss

@@ -1,3 +1,11 @@
+.products-container {
+  display: flex;
+  flex-wrap: wrap;
+  margin: auto;
+  align-items: flex-start;
+  justify-content: center;
+}
+
 .product-item {
   width: 243px;
   background: transparent;
@@ -9,7 +17,8 @@
     height: auto;
     border-radius: 8px;
   }
-  :hover{
+
+  :hover {
     cursor: pointer;
   }
 }
@@ -65,7 +74,7 @@
   color: #000000;
 }
 
-.product-item-detail-link{
+.product-item-detail-link {
   font-family: Roboto, "Helvetica Neue", sans-serif;
   font-style: normal;
   font-weight: 200;
@@ -129,4 +138,4 @@
   .product-item {
     width: 130px;
   }
-}
+}

projects/web/src/web.module.ts

@@ -39,7 +39,6 @@ import { DesktopDownloadsComponent } from "./componets/desktop-downloads.compone
 import { MobileDownloadsComponent } from "./componets/mobile-downloads.component";
 import { ProductsPage } from "./pages/products.page";
 import { Products } from "./componets/products";
-import { NgxMasonryModule } from "ngx-masonry";
 import { Product } from "./componets/product";
 
 const routes: Routes = [
@@ -137,8 +136,7 @@ const routes: Routes = [
     MatIconModule,
     ScrollingModule,
     InfiniteScrollModule,
-    MatProgressSpinnerModule,
-    NgxMasonryModule
+    MatProgressSpinnerModule
   ]
 })
 export class WebModule {}

projects/web/tsconfig.lib.json

@@ -3,7 +3,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
-    "target": "es2015",
+    "target": "es2020",
     "declaration": true,
     "declarationMap": true,
     "inlineSources": true,

tsconfig.json

@@ -9,7 +9,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2020",
     "module": "es2020",
     "lib": [
       "es2018",