Dexin Wang

ExpenseRecord/ClientApp/src/app/app.server.module.ts

@@ -1,11 +1,10 @@
 import { NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
-import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
 import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
 
 @NgModule({
-    imports: [AppModule, ServerModule, ModuleMapLoaderModule],
+    imports: [AppModule, ServerModule],
     bootstrap: [AppComponent]
 })
 export class AppServerModule { }

ExpenseRecord/ClientApp/src/app/greeting/greeting.component.html

@@ -1,4 +1,21 @@
-<input type="text" [(ngModel)]="name">
-<button (click)="greet()">greet</button>
-<br>
-<label> {{greeting}} </label>
+<!-- src/app/app.component.html -->
+<div>
+    <h2>Add Expense</h2>
+    <div>
+      <input [(ngModel)]="newExpense.description" placeholder="Description" />
+      <input [(ngModel)]="newExpense.type" placeholder="Type" />
+      <input [(ngModel)]="newExpense.amount" placeholder="Amount" />
+      <input [(ngModel)]="newExpense.date" placeholder="Date (YYYYMMDD)" />
+      <button (click)="addExpense()">Add</button>
+    </div>
+
+    <h2>Expenses</h2>
+    <a>Description - type - amount - date</a>
+    <ul *ngIf="expenses.length > 0">
+      <li *ngFor="let expense of expenses; let i = index">
+      {{ expense.description }}   {{ expense.type }}   {{ expense.amount }}   {{ expense.date }}
+        <button (click)="deleteExpense(expense.id)">Delete</button>
+      </li>
+    </ul>
+  </div>
+

ExpenseRecord/ClientApp/src/app/greeting/greeting.component.ts

@@ -1,34 +1,62 @@
 import {Component, Inject, OnInit} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
-
+import { Record } from '../models/record';
 @Component({
   selector: 'app-greeting',
   templateUrl: './greeting.component.html',
   styleUrls: ['./greeting.component.css']
 })
 export class GreetingComponent implements OnInit {
-  name!: string;
-  greeting!: string;
-
+
+  expenses: Record[] = [];
+  newExpense: Record = {
+    id: 1,
+    description: '',
+    type: '',
+    amount: '',
+    date: ''
+  };
   private baseUrl: string;
   private http: HttpClient;
+
 
   constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
     this.http = http;
     this.baseUrl = baseUrl;
+    this.loadExpenses();
   }
 
   ngOnInit(): void {
   }
-
-  greet() {
-    this.callApi(this.name);
+  loadExpenses() {
+    this.http.get<Record[]>(this.baseUrl + 'greeting').subscribe(
+      (result: Record[]) => {
+        this.expenses = result;
+    });
   }
-
-  callApi(name: string) {
-    this.http.get<string>(this.baseUrl + 'greeting?name=' + name, {responseType: 'text' as 'json'})
-      .subscribe((result: string) => {
-        this.greeting = result;
-      }, (error: any) => console.error(error));
+  addExpense() {
+    if (this.newExpense.description && this.newExpense.type && this.newExpense.amount && this.newExpense.date) {
+      this.http.post<Record>(this.baseUrl + 'greeting', this.newExpense )
+      .subscribe((result: Record)=> {
+      this.loadExpenses();
+      });
+
+
+    }
+  }
+    deleteExpense(Id: number) {
+      console.log(Id);
+      this.http.delete(this.baseUrl + 'greeting/' + Id).subscribe(() => {
+        this.loadExpenses();
+      });
   }
+
+
+
+
+
+
+
+  // callApi(item : Record) {
+  //   
 }

ExpenseRecord/ClientApp/src/app/models/record.ts

@@ -0,0 +1,7 @@
+export interface Record {
+    id: number;
+    description: string;
+    type: string;
+    amount: string;
+    date: String;
+  }

ExpenseRecord/Controllers/GreetingController.cs

@@ -1,3 +1,4 @@
+using ExpenseRecord.Models;
 using Microsoft.AspNetCore.Mvc;
 
 namespace ExpenseRecord.Controllers;
@@ -6,10 +7,42 @@ namespace ExpenseRecord.Controllers;
 [Route("[controller]")]
 public class GreetingController : ControllerBase
 {
-    [HttpGet]
-    public string greet(string name)
-    {
-        Console.Out.WriteLine(name);
-        return "Hello, " + name;
+        private static List<Record> _expenses = new List<Record>(){
+
+        new Record {id = 0, description = "Expense 1", type = "Type 1", amount = "10", date = "1010" }
+       };
+
+        private static int _nextId = 1;
+
+        [HttpGet]
+        public ActionResult<List<Record>> Get()
+        {   
+            return _expenses;
+        }
+
+        [HttpPost]
+        public Record Post([FromBody]Record newExpense)
+        {   
+            newExpense.id = _nextId++;
+            _expenses.Insert(0, newExpense);
+            return newExpense;
+        }
+
+        [HttpDelete("{id}")]
+        public IActionResult Delete(int id)
+        {
+            var expense = _expenses.FirstOrDefault(e => e.id == id);
+            if (expense != null)
+            {
+                _expenses.Remove(expense);
+                return Ok();
+            }
+            return NotFound();
+        }
     }
-}
+
+
+
+
+
+

ExpenseRecord/Models/record.cs

@@ -0,0 +1,17 @@
+ using System.ComponentModel.DataAnnotations;
+
+namespace ExpenseRecord.Models
+{
+    public class Record
+    {
+        public int id {get; set;}
+
+        public string description { get; set; } = string.Empty;
+        public string type { get; set; }
+        public string amount { get; set; }
+
+        public string date {get; set;}
+
+
+    }
+}

ExpenseRecord/Program.cs

@@ -13,6 +13,7 @@
     app.UseHsts();
 }
 
+app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
 app.UseHttpsRedirection();
 app.UseStaticFiles();
 app.UseRouting();