feat: display initial list on product page

apps/angular/projects/catalog/src/lib/proxy/README.md

@@ -0,0 +1,17 @@
+# Proxy Generation Output
+
+This directory includes the output of the latest proxy generation.
+The files and folders in it will be overwritten when proxy generation is run again.
+Therefore, please do not place your own content in this folder.
+
+In addition, `generate-proxy.json` works like a lock file.
+It includes information used by the proxy generator, so please do not delete or modify it.
+
+Finally, the name of the files and folders should not be changed for two reasons:
+- Proxy generator will keep creating them at those paths and you will have multiple copies of the same content.
+- ABP Suite generates files which include imports from this folder.
+
+> **Important Notice:** If you are building a module and are planning to publish to npm,
+> some of the generated proxies are likely to be exported from public-api.ts file. In such a case,
+> please make sure you export files directly and not from barrel exports. In other words,
+> do not include index.ts exports in your public-api.ts exports.

apps/angular/projects/catalog/src/lib/proxy/index.ts

@@ -0,0 +1,2 @@
+import * as Products from './products';
+export { Products };

apps/angular/projects/catalog/src/lib/proxy/products/index.ts

@@ -0,0 +1,3 @@
+export * from './models';
+export * from './product.service';
+export * from './public-product.service';

apps/angular/projects/catalog/src/lib/proxy/products/models.ts

@@ -0,0 +1,24 @@
+import type { AuditedEntityDto } from '@abp/ng.core';
+
+export interface CreateProductDto {
+  code: string;
+  name: string;
+  imageName?: string;
+  price: number;
+  stockCount: number;
+}
+
+export interface ProductDto extends AuditedEntityDto<string> {
+  code?: string;
+  name?: string;
+  imageName?: string;
+  price: number;
+  stockCount: number;
+}
+
+export interface UpdateProductDto {
+  name: string;
+  imageName?: string;
+  price: number;
+  stockCount: number;
+}

apps/angular/projects/catalog/src/lib/proxy/products/product.service.ts

@@ -0,0 +1,58 @@
+import type { CreateProductDto, ProductDto, UpdateProductDto } from './models';
+import { RestService } from '@abp/ng.core';
+import type { ListResultDto, PagedAndSortedResultRequestDto, PagedResultDto } from '@abp/ng.core';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ProductService {
+  apiName = 'Catalog';
+
+  create = (input: CreateProductDto) =>
+    this.restService.request<any, ProductDto>({
+      method: 'POST',
+      url: '/api/catalog/product',
+      body: input,
+    },
+    { apiName: this.apiName });
+
+  delete = (id: string) =>
+    this.restService.request<any, void>({
+      method: 'DELETE',
+      url: `/api/catalog/product/${id}`,
+    },
+    { apiName: this.apiName });
+
+  get = (id: string) =>
+    this.restService.request<any, ProductDto>({
+      method: 'GET',
+      url: `/api/catalog/product/${id}`,
+    },
+    { apiName: this.apiName });
+
+  getList = () =>
+    this.restService.request<any, ListResultDto<ProductDto>>({
+      method: 'GET',
+      url: '/api/catalog/product',
+    },
+    { apiName: this.apiName });
+
+  getListPaged = (input: PagedAndSortedResultRequestDto) =>
+    this.restService.request<any, PagedResultDto<ProductDto>>({
+      method: 'GET',
+      url: '/api/catalog/product/paged',
+      params: { sorting: input.sorting, skipCount: input.skipCount, maxResultCount: input.maxResultCount },
+    },
+    { apiName: this.apiName });
+
+  update = (id: string, input: UpdateProductDto) =>
+    this.restService.request<any, ProductDto>({
+      method: 'PUT',
+      url: `/api/catalog/product/${id}`,
+      body: input,
+    },
+    { apiName: this.apiName });
+
+  constructor(private restService: RestService) {}
+}

apps/angular/projects/catalog/src/lib/proxy/products/public-product.service.ts

@@ -0,0 +1,27 @@
+import type { ProductDto } from './models';
+import { RestService } from '@abp/ng.core';
+import type { ListResultDto } from '@abp/ng.core';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PublicProductService {
+  apiName = 'Catalog';
+
+  get = (id: string) =>
+    this.restService.request<any, ProductDto>({
+      method: 'GET',
+      url: `/api/catalog/public-product/${id}`,
+    },
+    { apiName: this.apiName });
+
+  getList = () =>
+    this.restService.request<any, ListResultDto<ProductDto>>({
+      method: 'GET',
+      url: '/api/catalog/public-product',
+    },
+    { apiName: this.apiName });
+
+  constructor(private restService: RestService) {}
+}

apps/angular/projects/catalog/src/pages/product/product.component.html

@@ -1 +1,5 @@
-<p>product works!</p>
+<ul *ngIf="list$ | async; let list">
+  <li *ngFor="let item of list">
+    {{ item | json }}
+  </li>
+</ul>

apps/angular/projects/catalog/src/pages/product/product.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ProductComponent } from './product.component';
-
-describe('ProductComponent', () => {
-  let component: ProductComponent;
-  let fixture: ComponentFixture<ProductComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ProductComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ProductComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

apps/angular/projects/catalog/src/pages/product/product.component.ts

@@ -1,15 +1,14 @@
 import { Component, OnInit } from '@angular/core';
-
+import { ProductService } from '@catalog/proxy/products';
+import { map } from 'rxjs/operators';
 @Component({
   selector: 'lib-product',
   templateUrl: './product.component.html',
-  styleUrls: ['./product.component.css']
+  styleUrls: ['./product.component.css'],
 })
 export class ProductComponent implements OnInit {
+  list$ = this.productService.getList().pipe(map(res => res.items));
+  constructor(public readonly productService: ProductService) {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+  ngOnInit(): void {}
 }

apps/angular/projects/catalog/src/public-api.ts

@@ -1,5 +0,0 @@
-/*
- * Public API Surface of catalog
- */
-export * from './catalog.module';
-export * from './pages';

apps/angular/src/app/app-routing.module.ts

@@ -27,7 +27,7 @@ const routes: Routes = [
   },
   {
     path: 'catalog',
-    loadChildren: () => import('@catalog').then(m => m.CatalogModule),
+    loadChildren: () => import('@catalog/catalog.module').then(m => m.CatalogModule),
   },
 ];
 

apps/angular/src/environments/environment.ts

@@ -21,7 +21,7 @@ export const environment = {
       url: 'https://localhost:44372',
       rootNamespace: 'EShopOnAbp',
     },
-    CatalogService: {
+    Catalog: {
       url: 'https://localhost:44354',
       rootNamespace: 'EShopOnAbp.CatalogService',
     },

apps/angular/tsconfig.json

@@ -14,15 +14,11 @@
     "typeRoots": ["node_modules/@types"],
     "lib": ["es2018", "dom"],
     "paths": {
-      "@proxy": ["src/app/proxy/index.ts"],
-      "@proxy/*": [
-        "src/app/proxy/*"
-      ],
       "@catalog/config": [
         "projects/catalog/config/src/public-api.ts"
       ],
-      "@catalog": [
-        "projects/catalog/src/public-api.ts",
+      "@catalog/*": [
+        "projects/catalog/src/*",
       ],
     }
   },

services/catalog/src/EShopOnAbp.CatalogService.HttpApi.Host/appsettings.json

@@ -1,7 +1,7 @@
 {
   "App": {
     "SelfUrl": "https://localhost:44354",
-    "CorsOrigins": "https://localhost:44372,https://localhost:44373,https://localhost:44335"
+    "CorsOrigins": "https://localhost:44372,https://localhost:44373,https://localhost:44335,http://localhost:4200"
   },
   "AuthServer": {
     "Authority": "https://localhost:44330",
@@ -41,4 +41,4 @@
   "ElasticSearch": {
     "Url": "http://localhost:9200"
   }
-}
+}