31.1. Base components to decompose user.component (#31 Split user.component into several components)

support-portal-frontend/src/app/app.module.ts

@@ -13,13 +13,29 @@ import {RegisterComponent} from './component/register/register.component';
 import {UserComponent} from './component/user/user.component';
 import {AppRoutingModule} from './app-routing.module';
 import {FormsModule} from "@angular/forms";
+import {ManagementComponent} from './component/management/management.component';
+import {UsersComponent} from './component/management/users/users.component';
+import {SettingsComponent} from './component/management/settings/settings.component';
+import {ProfileComponent} from './component/management/profile/profile.component';
+import {UsersTableComponent} from './component/management/users/users-table/users-table.component';
+import {UserRowComponent} from './component/management/users/users-table/user-row/user-row.component';
+import {UserViewComponent} from './component/management/users/user-view/user-view.component';
+import {UserEditComponent} from './component/management/users/user-edit/user-edit.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
     RegisterComponent,
-    UserComponent
+    UserComponent,
+    ManagementComponent,
+    UsersComponent,
+    SettingsComponent,
+    ProfileComponent,
+    UsersTableComponent,
+    UserRowComponent,
+    UserViewComponent,
+    UserEditComponent
   ],
   imports: [
     BrowserModule,

support-portal-frontend/src/app/component/management/management.component.html

@@ -0,0 +1,2 @@
+<p>management works!</p>
+<router-outlet></router-outlet>

support-portal-frontend/src/app/component/management/management.component.ts

@@ -0,0 +1,15 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-management',
+  templateUrl: './management.component.html',
+  styleUrls: ['./management.component.css']
+})
+export class ManagementComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

support-portal-frontend/src/app/component/management/profile/profile.component.html

@@ -0,0 +1 @@
+<p>profile works!</p>

support-portal-frontend/src/app/component/management/profile/profile.component.ts

@@ -0,0 +1,15 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.css']
+})
+export class ProfileComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

support-portal-frontend/src/app/component/management/settings/settings.component.html

@@ -0,0 +1 @@
+<p>settings works!</p>

support-portal-frontend/src/app/component/management/settings/settings.component.ts

@@ -0,0 +1,15 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.css']
+})
+export class SettingsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

support-portal-frontend/src/app/component/management/users/user-edit/user-edit.component.html

@@ -0,0 +1 @@
+<p>user-edit works!</p>

support-portal-frontend/src/app/component/management/users/user-edit/user-edit.component.ts

@@ -0,0 +1,15 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-user-edit',
+  templateUrl: './user-edit.component.html',
+  styleUrls: ['./user-edit.component.css']
+})
+export class UserEditComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

support-portal-frontend/src/app/component/management/users/user-view/user-view.component.html

@@ -0,0 +1 @@
+<p>user-view works!</p>

support-portal-frontend/src/app/component/management/users/user-view/user-view.component.ts

@@ -0,0 +1,15 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-user-view',
+  templateUrl: './user-view.component.html',
+  styleUrls: ['./user-view.component.css']
+})
+export class UserViewComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

support-portal-frontend/src/app/component/management/users/users-table/user-row/user-row.component.html

@@ -0,0 +1 @@
+<p>user-row works!</p>

support-portal-frontend/src/app/component/management/users/users-table/user-row/user-row.component.ts

@@ -0,0 +1,15 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-user-row',
+  templateUrl: './user-row.component.html',
+  styleUrls: ['./user-row.component.css']
+})
+export class UserRowComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

support-portal-frontend/src/app/component/management/users/users-table/users-table.component.html

@@ -0,0 +1,2 @@
+<p>users-table works!</p>
+<app-user-row class="row" *ngFor="let i of [1,2,3]"></app-user-row>

support-portal-frontend/src/app/component/management/users/users-table/users-table.component.ts

@@ -0,0 +1,15 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-users-table',
+  templateUrl: './users-table.component.html',
+  styleUrls: ['./users-table.component.css']
+})
+export class UsersTableComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

support-portal-frontend/src/app/component/management/users/users.component.html

@@ -0,0 +1,3 @@
+<p>users works!</p>
+<app-users-table></app-users-table>
+<router-outlet></router-outlet>

support-portal-frontend/src/app/component/management/users/users.component.ts

@@ -0,0 +1,15 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-users',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.css']
+})
+export class UsersComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}