diff --git a/angularapp/angular.json b/angularapp/angular.json index e81053b..1904fc3 100644 --- a/angularapp/angular.json +++ b/angularapp/angular.json @@ -5,7 +5,11 @@ "projects": { "angularapp": { "projectType": "application", - "schematics": {}, + "schematics": { + "@schematics/angular:component": { + "style": "less" + } + }, "root": "", "sourceRoot": "src", "prefix": "app", diff --git a/angularapp/angularapp.esproj b/angularapp/angularapp.esproj index 1c678e8..f0cebd5 100644 --- a/angularapp/angularapp.esproj +++ b/angularapp/angularapp.esproj @@ -3,10 +3,15 @@ npm start Jasmine - + + npm run build $(MSBuildProjectDirectory)\dist\angularapp + + + + \ No newline at end of file diff --git a/angularapp/package-lock.json b/angularapp/package-lock.json index 4c426cf..1eacde5 100644 --- a/angularapp/package-lock.json +++ b/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" } }, diff --git a/angularapp/package.json b/angularapp/package.json index de08180..d73f239 100644 --- a/angularapp/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/angularapp/src/app/Models/User.ts b/angularapp/src/app/Models/User.ts new file mode 100644 index 0000000..24ea71e --- /dev/null +++ b/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 +} diff --git a/angularapp/src/app/Services/users.service.ts b/angularapp/src/app/Services/users.service.ts new file mode 100644 index 0000000..1d8c15e --- /dev/null +++ b/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 { + return this.http.get('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; + }); + } +} diff --git a/angularapp/src/app/app.component.html b/angularapp/src/app/app.component.html index cb3ae0f..e0e5279 100644 --- a/angularapp/src/app/app.component.html +++ b/angularapp/src/app/app.component.html @@ -1,7 +1,7 @@ -

WeiFerL

- - - - - - +
+ +
+ + +
+
diff --git a/angularapp/src/app/app.component.css b/angularapp/src/app/app.component.less similarity index 100% rename from angularapp/src/app/app.component.css rename to angularapp/src/app/app.component.less diff --git a/angularapp/src/app/app.component.ts b/angularapp/src/app/app.component.ts index 6dac356..2d3aa06 100644 --- a/angularapp/src/app/app.component.ts +++ b/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 = () => { - - 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); - }); + notify("Dx ButtonClick"); } } diff --git a/angularapp/src/app/app.module.ts b/angularapp/src/app/app.module.ts index 24581ea..1fa9c25 100644 --- a/angularapp/src/app/app.module.ts +++ b/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 { } diff --git a/angularapp/src/app/navbar/navbar.component.html b/angularapp/src/app/navbar/navbar.component.html new file mode 100644 index 0000000..3008c97 --- /dev/null +++ b/angularapp/src/app/navbar/navbar.component.html @@ -0,0 +1,21 @@ +
+ +
diff --git a/angularapp/src/app/navbar/navbar.component.less b/angularapp/src/app/navbar/navbar.component.less new file mode 100644 index 0000000..e69de29 diff --git a/angularapp/src/app/navbar/navbar.component.spec.ts b/angularapp/src/app/navbar/navbar.component.spec.ts new file mode 100644 index 0000000..505cc2f --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ NavbarComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(NavbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angularapp/src/app/navbar/navbar.component.ts b/angularapp/src/app/navbar/navbar.component.ts new file mode 100644 index 0000000..95de99c --- /dev/null +++ b/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 { + +} diff --git a/angularapp/src/app/users/add-user/add-user.component.html b/angularapp/src/app/users/add-user/add-user.component.html new file mode 100644 index 0000000..0236282 --- /dev/null +++ b/angularapp/src/app/users/add-user/add-user.component.html @@ -0,0 +1,29 @@ + +
+
+

New User

+
+
+
+ + + + + + + + + + + +
+
diff --git a/angularapp/src/app/users/add-user/add-user.component.less b/angularapp/src/app/users/add-user/add-user.component.less new file mode 100644 index 0000000..e69de29 diff --git a/angularapp/src/app/users/add-user/add-user.component.ts b/angularapp/src/app/users/add-user/add-user.component.ts new file mode 100644 index 0000000..3e576ce --- /dev/null +++ b/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 = {}; + + 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); + } + ); + } +} diff --git a/angularapp/src/app/users/users-table/users-table.component.html b/angularapp/src/app/users/users-table/users-table.component.html new file mode 100644 index 0000000..367f577 --- /dev/null +++ b/angularapp/src/app/users/users-table/users-table.component.html @@ -0,0 +1,7 @@ + + diff --git a/angularapp/src/app/users/users-table/users-table.component.less b/angularapp/src/app/users/users-table/users-table.component.less new file mode 100644 index 0000000..e69de29 diff --git a/angularapp/src/app/users/users-table/users-table.component.ts b/angularapp/src/app/users/users-table/users-table.component.ts new file mode 100644 index 0000000..ee5388f --- /dev/null +++ b/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); + } + ); + } +}