initial editing of table

src/AspNetCoreSpa.Core/Entities/Customer.cs

@@ -11,6 +11,7 @@ public class Customer : AuditableEntity
         public int Id { get; set; }
         public string Name { get; set; }
         public string Email { get; set; }
+        public DateTime DateOfBirth { get; set; }
         public string PhoneNumber { get; set; }
         public string Address { get; set; }
         public string City { get; set; }

src/AspNetCoreSpa.Core/ViewModels/CustomerViewModel.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
@@ -9,13 +10,23 @@ namespace AspNetCoreSpa.Core.ViewModels
 {
     public class CustomerViewModel
     {
+        // Not required since this is not populated during put
         public int Id { get; set; }
+        [Required]
         public string Name { get; set; }
+        [Required]
         public string Email { get; set; }
+        [Required]
+        [DataType(DataType.Date)]
+        public DateTime DateOfBirth { get; set; }
+        [Required]
         public string PhoneNumber { get; set; }
+        [Required]
         public string Address { get; set; }
+        [Required]
         public string City { get; set; }
-        public string Gender { get; set; }
+        [Required]
+        public Gender Gender { get; set; }
 
         public ICollection<OrderViewModel> Orders { get; set; }
     }

src/AspNetCoreSpa.Infrastructure/ApplicationDbContext.cs

@@ -1,10 +1,10 @@
-
-
-using AspNetCoreSpa.Core.Entities;
+using AspNetCoreSpa.Core.Entities;
 using AspNetCoreSpa.Infrastructure.Services;
 using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.EntityFrameworkCore.ChangeTracking;
+using Microsoft.EntityFrameworkCore.Diagnostics;
+using Microsoft.EntityFrameworkCore.Metadata.Internal;
 using System;
 using System.Linq;
 using System.Threading;
@@ -27,7 +27,10 @@ public class ApplicationDbContext : DbContext
         public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)
         {
         }
-
+        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
+        {
+            optionsBuilder.ReplaceService<IEntityMaterializerSource, EfCoreMaterializerSource>();
+        }
         protected override void OnModelCreating(ModelBuilder modelBuilder)
         {
             foreach (var entityType in modelBuilder.Model.GetEntityTypes()

src/AspNetCoreSpa.Infrastructure/EfCoreMaterializerSource.cs

@@ -0,0 +1,84 @@
+using System;
+using System.Linq.Expressions;
+using System.Reflection;
+using Microsoft.EntityFrameworkCore.Metadata;
+using Microsoft.EntityFrameworkCore.Metadata.Internal;
+
+namespace AspNetCoreSpa.Infrastructure
+{
+    /// <summary>
+    /// When creating any objects with data from the database, make sure any required transformations are made:
+    /// - DateTime should have DateTimeKind.Utc set.
+    /// </summary>
+    /// <remarks>
+    /// See https://volosoft.com/datetime-specifykind-in-entity-framework-core-while-querying/
+    /// See also https://github.com/aspnet/EntityFrameworkCore/issues/4711#issuecomment-358695190 for changes in EF core 2.1
+    /// </remarks>
+    /// <example>
+    /// protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
+    /// {
+    ///    optionsBuilder.ReplaceService&lt;IEntityMaterializerSource, EfCoreMaterializerSource>();
+    /// }
+    /// </example>
+    public class EfCoreMaterializerSource : EntityMaterializerSource
+    {
+        /// <summary>
+        /// The DateTime normalize method
+        /// </summary>
+        private static readonly MethodInfo UtcDateTimeNormalizeMethod = typeof(DateTimeMapper).GetTypeInfo().GetMethod(nameof(DateTimeMapper.Normalize));
+
+        /// <summary>
+        /// The DateTime? normalize method
+        /// </summary>
+        private static readonly MethodInfo UtcDateTimeNormalizeNullableMethod = typeof(DateTimeMapper).GetTypeInfo().GetMethod(nameof(DateTimeMapper.NormalizeNullable));
+
+        /// <summary>
+        /// This function is called whenever any value is read from the database and needs to be turned into an instance.
+        /// In our case, we're only interested in DateTime fields.
+        /// </summary>
+        /// <remarks>
+        /// This API supports the Entity Framework Core infrastructure and is not intended to be used
+        /// directly from your code. This API may change or be removed in future releases.
+        /// </remarks>
+        public override Expression CreateReadValueExpression(Expression valueBuffer, Type type, int index, IPropertyBase property)
+        {
+            if (type == typeof(DateTime))
+            {
+                return Expression.Call(UtcDateTimeNormalizeMethod, base.CreateReadValueExpression(valueBuffer, type, index, property));
+            }
+
+            if (type == typeof(DateTime?))
+            {
+                return Expression.Call(UtcDateTimeNormalizeNullableMethod, base.CreateReadValueExpression(valueBuffer, type, index, property));
+            }
+
+            return base.CreateReadValueExpression(valueBuffer, type, index, property);
+        }
+
+        /// <summary>
+        /// Make sure any DateTime objects are set to UTC.
+        /// </summary>
+        private static class DateTimeMapper
+        {
+            /// <summary>
+            /// Normalizes the specified value.
+            /// </summary>
+            /// <param name="value">The value.</param>
+            /// <returns>The DateTime with UTC kind specified.</returns>
+            public static DateTime Normalize(DateTime value)
+            {
+                return DateTime.SpecifyKind(value, DateTimeKind.Utc);
+            }
+
+            /// <summary>
+            /// Normalizes the specified value.
+            /// </summary>
+            /// <param name="value">The value.</param>
+            /// <returns>The DateTime? with UTC kind specified (or null).</returns>
+            public static DateTime? NormalizeNullable(DateTime? value)
+            {
+                return value.HasValue ? DateTime.SpecifyKind(value.Value, DateTimeKind.Utc) : (DateTime?)null;
+            }
+        }
+    }
+}

src/AspNetCoreSpa.Infrastructure/DatabaseInitializer.cs → src/AspNetCoreSpa.Infrastructure/SeedData.cs

@@ -18,20 +18,20 @@
 
 namespace AspNetCoreSpa.Infrastructure
 {
-    public interface IDatabaseInitializer
+    public interface ISeedData
     {
         void Initialise();
     }
 
-    public class DatabaseInitializer : IDatabaseInitializer
+    public class SeedData : ISeedData
     {
         private readonly ApplicationDbContext _context;
         private readonly ILogger _logger;
         private readonly IHostingEnvironment _hostingEnvironment;
 
-        public DatabaseInitializer(
+        public SeedData(
             ApplicationDbContext context,
-            ILogger<DatabaseInitializer> logger,
+            ILogger<SeedData> logger,
             IHostingEnvironment hostingEnvironment
             )
         {
@@ -96,6 +96,7 @@ private void AddShopData()
                     {
                         Name = "John Doe " + i,
                         Email = $"{i}[email protected]",
+                        DateOfBirth = DateTime.Now.AddDays(i),
                         PhoneNumber = "0123456789" + i,
                         Address = @"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
                     Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet",

src/AspNetCoreSpa.Infrastructure/ServicesCollectionExtension.cs

@@ -13,7 +13,7 @@ public static IServiceCollection AddInfrastructurServices(this IServiceCollectio
             services.AddTransient<IApplicationDataService, ApplicationDataService>();
             services.AddScoped<IUnitOfWork, HttpUnitOfWork>();
             services.AddTransient<ApplicationDbContext>();
-            services.AddTransient<IDatabaseInitializer, DatabaseInitializer>();
+            services.AddTransient<ISeedData, SeedData>();
             services.AddTransient<ICustomerRepository, CustomerRepository>();
             services.AddTransient<IOrdersRepository, OrdersRepository>();
             services.AddTransient<IProductRepository, ProductRepository>();

src/AspNetCoreSpa.Web/ClientApp/package.json

@@ -39,8 +39,8 @@
     "@angular/platform-browser-dynamic": "6.1.7",
     "@angular/platform-server": "6.1.7",
     "@angular/router": "6.1.7",
-    "@aspnet/signalr": "1.1.0-preview1-35029",
-    "@aspnet/signalr-protocol-msgpack": "1.1.0-preview1-35029",
+    "@aspnet/signalr": "1.1.0-preview2-35157",
+    "@aspnet/signalr-protocol-msgpack": "1.1.0-preview2-35157",
     "@ng-bootstrap/ng-bootstrap": "3.2.0",
     "@nguniversal/module-map-ngfactory-loader": "6.1.0",
     "@swimlane/ngx-datatable": "13.1.0",
@@ -59,21 +59,21 @@
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.8.1",
-    "@angular/cli": "6.2.1",
+    "@angular-devkit/build-angular": "0.8.2",
+    "@angular/cli": "6.2.2",
     "@angular/compiler-cli": "6.1.7",
     "@angular/language-service": "6.1.7",
     "@angular/service-worker": "6.1.7",
     "@compodoc/compodoc": "1.1.5",
     "@types/node": "10.9.4",
     "codelyzer": "4.4.4",
-    "jest": "23.5.0",
+    "jest": "23.6.0",
     "jest-preset-angular": "6.0.0",
-    "protractor": "5.4.0",
+    "protractor": "5.4.1",
     "ts-node": "7.0.1",
     "tslint": "5.11.0",
     "typescript": "2.9.2",
-    "webpack-bundle-analyzer": "2.13.1"
+    "webpack-bundle-analyzer": "3.0.2"
   },
   "jest": {
     "preset": "jest-preset-angular",

src/AspNetCoreSpa.Web/ClientApp/src/app/+examples/examples.module.ts

@@ -5,12 +5,13 @@ import { SharedModule } from '@app/shared';
 
 import { ExamplesComponent } from './examples.component';
 import { routes } from './examples.routes';
+import { FormsPlaygroundComponent } from './examples/forms-playground/forms-playground.component';
 
 @NgModule({
   imports: [
     SharedModule,
     RouterModule.forChild(routes)
   ],
-  declarations: [ExamplesComponent]
+  declarations: [ExamplesComponent, FormsPlaygroundComponent]
 })
 export class ExamplesModule { }

src/AspNetCoreSpa.Web/ClientApp/src/app/+examples/examples.routes.ts

@@ -1,9 +1,11 @@
 import { Routes } from '@angular/router';
 
 import { ExamplesComponent } from './examples.component';
+import { FormsPlaygroundComponent } from './examples/forms-playground/forms-playground.component';
 
 export const routes: Routes = [
     { path: '', component: ExamplesComponent, data: { displayText: 'Home' } },
+    { path: 'forms-playground', component: FormsPlaygroundComponent, data: { displayText: 'Forms playground' } },
     { path: 'signalr', loadChildren: './examples/signalr/signalr.module#SignalrModule', data: { displayText: 'SignalR' } },
     { path: 'calendar', loadChildren: './examples/calendar/calendar.module#AppCalendarModule', data: { displayText: 'Calendar' } },
     { path: 'datatable', loadChildren: './examples/datatable/datatable.module#DatatableModule', data: { displayText: 'Datatable' } },

src/AspNetCoreSpa.Web/ClientApp/src/app/+examples/examples/crud-shop/crud-shop.module.ts

@@ -2,12 +2,13 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { SharedModule } from '@app/shared';
 
+import { GenderPipe } from './pipes';
 import { CrudShopComponent } from './crud-shop.component';
 import { CustomersComponent } from './customers/customers.component';
+import { CustomersService } from './customers/customers.service';
 import { ProductsComponent } from './products/products.component';
 import { OrdersComponent } from './orders/orders.component';
 import { ProductCategoriesComponent } from './product-categories/product-categories.component';
-import { CustomersService } from '@app/+examples/examples/crud-shop/customers/customers.service';
 
 @NgModule({
   imports: [
@@ -24,7 +25,16 @@ import { CustomersService } from '@app/+examples/examples/crud-shop/customers/cu
       }
     ])
   ],
-  providers: [CustomersService],
-  declarations: [CrudShopComponent, CustomersComponent, ProductsComponent, OrdersComponent, ProductCategoriesComponent]
+  providers: [
+    GenderPipe,
+    CustomersService
+  ],
+  declarations: [
+    CrudShopComponent,
+    CustomersComponent,
+    ProductsComponent,
+    OrdersComponent,
+    ProductCategoriesComponent
+  ]
 })
 export class CrudShopModule { }

src/AspNetCoreSpa.Web/ClientApp/src/app/+examples/examples/crud-shop/customers/customers.component.spec.ts

@@ -1,16 +1,18 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CustomersComponent } from './customers.component';
+import { CustomersService } from './customers.service';
 
 describe('CustomersComponent', () => {
   let component: CustomersComponent;
   let fixture: ComponentFixture<CustomersComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CustomersComponent ]
+      declarations: [CustomersComponent],
+      providers: [CustomersService]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

src/AspNetCoreSpa.Web/ClientApp/src/app/+examples/examples/crud-shop/customers/customers.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
+import { Validators } from '@angular/forms';
 
 import { CustomersService } from './customers.service';
-import { IAppTableOptions } from '@app/shared';
-import { ICustomer } from '../crud-shop.models';
+import { ICustomer, Gender } from '../crud-shop.models';
+import { FieldTypes, IAppTableOptions } from '@app/models';
 
 @Component({
   selector: 'appc-customers',
@@ -11,8 +12,9 @@ import { ICustomer } from '../crud-shop.models';
 })
 export class CustomersComponent implements OnInit {
   options: IAppTableOptions<ICustomer>;
-
-  constructor(private customerService: CustomersService) { }
+  constructor(
+    private customerService: CustomersService,
+  ) { }
 
   ngOnInit() {
     this.customerService.get().subscribe((data: ICustomer[]) => {
@@ -21,10 +23,21 @@ export class CustomersComponent implements OnInit {
         rows: data,
         apiUrl: 'api/customers',
         columns: [
-          { name: 'Name' },
-          { name: 'Email' },
-          { name: 'Phone number' },
-          { name: 'Address', sortable: false }
+          { prop: 'name', name: 'Name', fieldType: FieldTypes.Textbox, fieldValidations: [Validators.required] },
+          { prop: 'email', name: 'Email', fieldType: FieldTypes.Email, fieldValidations: [Validators.required] },
+          { prop: 'dateOfBirth', name: 'Date of birth', fieldType: FieldTypes.Date, fieldValidations: [Validators.required] },
+          { prop: 'phoneNumber', name: 'Phone number', fieldType: FieldTypes.Number },
+          { prop: 'address', name: 'Address', fieldType: FieldTypes.Textarea },
+          { prop: 'city', name: 'City', fieldType: FieldTypes.Textbox },
+          {
+            prop: 'gender',
+            name: 'Gender',
+            fieldType: FieldTypes.Select,
+            fieldOptions: [
+              { key: Gender.Male, value: 'Male' },
+              { key: Gender.Female, value: 'Female' }
+            ]
+          },
         ]
       };
     });

src/AspNetCoreSpa.Web/ClientApp/src/app/+examples/examples/crud-shop/pipes/gender.pipe.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Gender } from '../crud-shop.models';
+
+@Pipe({
+    name: 'gender'
+})
+
+export class GenderPipe implements PipeTransform {
+    transform(value: any, ...args: any[]): any {
+        switch (value) {
+            case Gender.Male:
+                return 'Male';
+            case Gender.Female:
+                return 'Female';
+            default:
+                return 'None';
+        }
+    }
+}

src/AspNetCoreSpa.Web/ClientApp/src/app/+examples/examples/crud-shop/pipes/index.ts

@@ -0,0 +1 @@
+export * from './gender.pipe';