- Added User Model

- Added navbar
- Added user table -> dx grid
- Added add user logic

angularapp/angular.json

@@ -5,7 +5,11 @@
   "projects": {
     "angularapp": {
       "projectType": "application",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "less"
+        }
+      },
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",

angularapp/angularapp.esproj

@@ -3,10 +3,15 @@
     <StartupCommand>npm start</StartupCommand>
     <JavaScriptTestFramework>Jasmine</JavaScriptTestFramework>
     <!-- Command to run on project build -->
-    <BuildCommand></BuildCommand>
+    <BuildCommand>
+    </BuildCommand>
     <!-- Command to create an optimized build of the project that's ready for publishing -->
     <ProductionBuildCommand>npm run build</ProductionBuildCommand>
     <!-- Folder where production build objects will be placed -->
     <BuildOutputFolder>$(MSBuildProjectDirectory)\dist\angularapp</BuildOutputFolder>
   </PropertyGroup>
+  <ItemGroup>
+    <Folder Include="src\app\Models\" />
+    <Folder Include="src\app\Services\" />
+  </ItemGroup>
 </Project>

angularapp/package-lock.json

@@ -41,6 +41,7 @@
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.0.0",
+        "less": "^4.1.3",
         "typescript": "~4.9.4"
       }
     },

angularapp/package.json

@@ -44,6 +44,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
+    "less": "^4.1.3",
     "typescript": "~4.9.4"
   }
-}
+}

angularapp/src/app/Models/User.ts

@@ -0,0 +1,11 @@
+export interface User {
+  id: number
+  userId: string
+  firstname: string
+  lastname: string
+  email: string
+  birthday: string | null
+  isDeleted: boolean
+  countrySlug: string
+  registerDate: string | null
+}

angularapp/src/app/Services/users.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { User } from '../Models/User';
+import { Observable } from 'rxjs';
+import { DatePipe } from '@angular/common';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UsersService {
+  users: User[] = [];
+
+  constructor(private http: HttpClient, private datePipe: DatePipe) {
+  }
+
+  loadAllUsers(): Observable<User[]> {
+    return this.http.get<User[]>('https://localhost:7090/api/getAllUsers');
+  }
+
+  addNewUser(user: User) {
+    return this.http.post('https://localhost:7090/api/addUser', user);
+  }
+
+  formatDates(users: User[]): User[] {
+    return users.map(user => {
+      if (user.birthday !== null) {
+        user.birthday = this.datePipe.transform(user.birthday, 'dd.MM.yyyy');
+      }
+      if (user.registerDate !== null) {
+        user.registerDate = this.datePipe.transform(user.registerDate, 'dd.MM.yyyy HH:mm:ss');
+      }
+      return user;
+    });
+  }
+}

angularapp/src/app/app.component.html

@@ -1,7 +1,7 @@
-<h1 id="tableLabel">WeiFerL</h1>
+<div class="container">
-
+  <app-navbar></app-navbar>
-<button class="btn btn-primary">Bootstrap Button</button>
+  <div style="width: 90%; margin-left: auto; margin-right: auto;">
-
+    <app-users-table></app-users-table>
-<dx-button text="Click me!" (onClick)="showMessage()">
+    <app-add-user></app-add-user>
-</dx-button>
+  </div>
-
+</div>

angularapp/src/app/app.component.ts

@@ -5,25 +5,10 @@ import notify from 'devextreme/ui/notify';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.less']
 })
 export class AppComponent {
   showMessage = () => {
-
+    notify("Dx ButtonClick");
-    let user = this.getAllUsers();
-    console.log(user);
-
-    notify("Fetch Users");
-  }
-
-  getAllUsers(): void {
-    fetch('http://localhost:5129/api/getAllUsers')
-      .then(response => response.json())
-      .then(data => {
-        console.log(data);
-      })
-      .catch(error => {
-        console.error(error);
-      });
   }
 }

angularapp/src/app/app.module.ts

@@ -1,21 +1,36 @@
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { DxButtonModule } from 'devextreme-angular';
+import { DxButtonModule, DxDataGridModule, DxDateBoxModule, DxFormModule } from 'devextreme-angular';
 import { AppComponent } from './app.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { UsersTableComponent } from './users/users-table/users-table.component';
+import { DatePipe } from '@angular/common';
+import { AddUserComponent } from './users/add-user/add-user.component';
+import { FormsModule } from '@angular/forms';
+import { NavbarComponent } from './navbar/navbar.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    UsersTableComponent,
+    AddUserComponent,
+    NavbarComponent
   ],
   imports: [
+    // Angular
     BrowserModule,
     HttpClientModule,
     NgbModule,
-    DxButtonModule
+    FormsModule,
+
+    // Devextreme
+    DxButtonModule,
+    DxDataGridModule,
+    DxFormModule,
+    DxDateBoxModule
   ],
-  providers: [],
+  providers: [DatePipe],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

angularapp/src/app/navbar/navbar.component.html

@@ -0,0 +1,21 @@
+<header>
+  <nav class="navbar navbar-expand-lg">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">User List</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Add User</a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+  </header>

angularapp/src/app/navbar/navbar.component.spec.ts

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

angularapp/src/app/navbar/navbar.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.less']
+})
+export class NavbarComponent {
+
+}

angularapp/src/app/users/add-user/add-user.component.html

@@ -0,0 +1,29 @@
+
+<form (submit)="onSubmit()">
+  <div class="long-title">
+    <h3>New User</h3>
+    <hr/>
+  </div>
+  <div id="form-container" class="col-md-12 d-flex justify-content-center">
+    <dx-form id="form" [formData]="user" [colCount]="1">
+      <dxi-item dataField="firstname"></dxi-item>
+      <dxi-item dataField="lastname"></dxi-item>
+      <dxi-item dataField="email"></dxi-item>
+      <dxi-item dataField="birthday">
+        <dx-date-box placeholder="10/16/2018"
+                     [showClearButton]="true"
+                     [useMaskBehavior]="true"
+                     displayFormat="dd/MM/yyyy"
+                     type="date"
+                     [value]="birthDatePicker"
+                     (valueChange)="handleDateChange($event)"
+                     [inputAttr]="{ 'aria-label': 'Date' }" />
+      </dxi-item>
+      <dxi-item dataField="countrySlug"></dxi-item>
+      <dxi-item itemType="button"
+                horizontalAlignment="center"
+                [buttonOptions]="submitButtonOptions">
+      </dxi-item>
+    </dx-form>
+  </div>
+</form>

angularapp/src/app/users/add-user/add-user.component.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { User } from '../../Models/User';
+import { UsersService } from '../../Services/users.service';
+
+@Component({
+  selector: 'app-add-user',
+  templateUrl: './add-user.component.html',
+  styleUrls: ['./add-user.component.less']
+})
+export class AddUserComponent {
+  birthDatePicker = new Date(1986, 1, 17);
+  birthDate: string = "";
+  user: Partial<User> = {};
+
+  constructor(private userService: UsersService) {
+
+  }
+
+  submitButtonOptions = {
+    text: "Submit the Form",
+    useSubmitBehavior: true
+  }
+
+  handleDateChange(event: any) {
+    const utcDate = new Date(Date.UTC(event.getFullYear(), event.getMonth(), event.getDate()));
+    this.birthDate = utcDate.toISOString();
+  }
+
+  onSubmit() {
+    this.user.birthday = this.birthDate;
+    this.user.countrySlug = this.user.countrySlug?.toUpperCase();
+
+    this.userService.addNewUser(this.user as User).subscribe(
+      response => {
+        console.log(response);
+        alert("Submitted");
+      },
+      error => {
+        console.error(error);
+      }
+    );
+  }
+}

angularapp/src/app/users/users-table/users-table.component.html

@@ -0,0 +1,7 @@
+<dx-data-grid id="gridContainer"
+              [dataSource]="users"
+              keyExpr="id"
+              [columns]="['id','firstname', 'lastname', 'email', 'birthday', 'countrySlug', 'registerDate']"
+              [showBorders]="true"
+              [columnAutoWidth]="true">
+</dx-data-grid>

angularapp/src/app/users/users-table/users-table.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { User } from '../../Models/User';
+import { UsersService } from '../../Services/users.service';
+
+
+@Component({
+  selector: 'app-users-table',
+  templateUrl: './users-table.component.html',
+  styleUrls: ['./users-table.component.less']
+})
+export class UsersTableComponent implements OnInit {
+  users: User[] = [];
+  constructor(private userService: UsersService) {
+
+  }
+  ngOnInit() {
+    this.userService.loadAllUsers().subscribe(
+      data => {
+        this.users = this.userService.formatDates(data);
+      },
+      error => {
+        console.error(error);
+      }
+    );
+  }
+}