<repo_name>crunchcubes/angular-admin<file_sep>/src/app/modules/default/no-auth-guard.service.ts
//https://scotch.io/tutorials/protecting-angular-v2-routes-with-canactivatecanactivatechild-guards

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

import { UserService } from '../../core';
@Injectable()
export class NoAuthGuard implements CanActivate {
  isLoggedIn:boolean = true;
  constructor(
    private router: Router,
    private userService: UserService
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }

  canActivateChild(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }


}
<file_sep>/src/app/modules/project/project.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

import {BaseComponent} from '../../core/base.component';
import {UserService, ProjectService} from '../../core';

//import { DataTable, DataTableResource } from 'angular6-data-table';

import {
  User,
  Project
} from '../../core';

@Component({
  selector: 'app-project',
  templateUrl: './project.component.html'
})
export class ProjectComponent extends BaseComponent {
  private projects: [Project];
    
  constructor
  (
    private userService: UserService,
    private projectService: ProjectService,
    private router: Router
  ) {super()}

  ngOnInit() {
    this.projectService.getAll()
    .subscribe(projects => {
      this.projects = projects;
    });
  }
}
<file_sep>/src/app/modules/auth/no-auth-guard.service.ts
//https://scotch.io/tutorials/protecting-angular-v2-routes-with-canactivatecanactivatechild-guards

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { Observable, of } from 'rxjs';
import { UserService } from '../../core';


@Injectable()
export class NoAuthGuard implements CanActivate {
  isLoggedIn:boolean = true;
  constructor(
    private router: Router,
    private userService: UserService
  ) {}

  /*canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    //console.log(this.userService.isAuthenticated);
    return this.userService.isAuthenticated.pipe(take(1), map(isAuth => !isAuth));

  }*/
  /*canActivate(next:ActivatedRouteSnapshot, state:RouterStateSnapshot) {
    return this.userService.isLoggedIn().map(e => {
        if (e) {
            return true;
        }
    }).catch(() => {
        this.router.navigate(['/login']);
        return Observable.of(false);
    });
}   */
/*
[::KEEP::]
canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
}*/

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }

  canActivateChild(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }


}
<file_sep>/src/app/core/services/index.ts
export * from './api.service';
export * from './auth-guard.service';
export * from './no-auth-guard.service';
export * from './jwt.service';
export * from './task.service';
export * from './project.service';
export * from './user.service';
export * from './team.service';
export * from './script.service';
export * from './utility.service';
export * from './dependency-resolver.service';
<file_sep>/src/app/core/services/utility.service.ts
import { Injectable, Output, EventEmitter } from '@angular/core';

@Injectable()
export class UtilityService {
  private title:string;

  constructor () {}

  @Output() onTitleChanged: EventEmitter<any> = new EventEmitter();
  
  setNavigation(title: string, items:any[]) {
    this.title = title;
    this.onTitleChanged.emit({sender: this, value: {title: title, items: items}});
  }
  getTitle(): string{
    return this.title;
  }
}<file_sep>/src/app/shared/index.ts
//export * from './article-helpers';
//export * from './buttons';
//export * from './layout';
//export * from './list-errors.component';
export * from './shared.module';
export * from './content-header/content-header.component';
export * from './sidebar/sidebar.component';
export * from './message/message.component';
export * from './notification/notification.component';
export * from './user-menu/user-menu.component';
export * from './navbar/navbar.component';

//export * from './show-authed.directive';
<file_sep>/src/app/modules/task/task.module.ts
import { ModuleWithProviders, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
//import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { TaskComponent } from './task.component';
import { TaskAuthResolver } from './task-auth-resolver.service';
import { SharedModule } from '../../shared';
import { TaskRoutingModule } from './task-routing.module';
import { CommonModule } from "@angular/common";
import { TaskNewComponent } from './task-new/task-new.component';
import { TaskEditComponent } from './task-edit/task-edit.component';
//import { NoAuthGuard } from './no-auth-guard.service';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    TaskRoutingModule,
    /*ReactiveFormsModule,
    FormsModule*/
  ],
  declarations: [
    TaskComponent,
    TaskNewComponent,
    TaskEditComponent
  ],
  providers: [
    //TaskAuthResolver,
    //NoAuthGuard
  ]
})
export class TaskModule {}
<file_sep>/src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { CoreModule } from './core/core.module';

import { AppComponent } from './app.component';
//import { routing } from "./app.routing"; [::KEEP::] - Example of routing with component only
//import { DashboardComponent } from './modules/dashboard/dashboard.component';
import { TaskModule } from './modules/task/task.module';
import { DashboardModule } from './modules/dashboard/dashboard.module';
import { AuthModule } from './modules/auth/auth.module';
import {
  SidebarComponent,
  NavbarComponent,
  NotificationComponent,
  MessageComponent,
  UserMenuComponent,
  ContentHeaderComponent,
  SharedModule
} from './shared';
import { AppRoutingModule } from './app-routing.module';

import {UtilityService } from './core';

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    SidebarComponent,
    MessageComponent,
    NotificationComponent,
    UserMenuComponent,
    ContentHeaderComponent,
    NavbarComponent,
    UserMenuComponent
  ],

  imports: [
    BrowserModule,
    FormsModule,
    CoreModule,
    SharedModule,
    //AuthModule,
    //TaskModule,
    //DashboardModule,
    ReactiveFormsModule,
    AppRoutingModule
  ],
  providers: [UtilityService],
  bootstrap: [
    AppComponent,
    SidebarComponent,
    NavbarComponent,
    ContentHeaderComponent,
    MessageComponent,
    NotificationComponent,
    UserMenuComponent
  ]
})
export class AppModule {}<file_sep>/src/app/modules/team/team.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

import {BaseComponent} from '../../core/base.component';
import {UserService, TeamService} from '../../core';

//import { DataTable, DataTableResource } from 'angular6-data-table';
import { Input } from '@angular/core';
import {
  Team
} from '../../core';

import {NgbModal,NgbModalRef, ModalDismissReasons, NgbModalOptions, NgbModalConfig } from '@ng-bootstrap/ng-bootstrap';
import {NgbdModalContent } from  './modal-content.component';


@Component({
  selector: 'app-team',
  templateUrl: './team.component.html',
  providers: [NgbModalConfig, NgbModal]
})
export class TeamComponent extends BaseComponent {
  private teams: [Team];
  private closeResult:string;
  private modalRef: NgbModalRef;
    
  constructor
  (
    private userService: UserService,
    private teamService: TeamService,
    private router: Router,
    private modalService: NgbModal,
    private config: NgbModalConfig
  ) {
    super();
    config.backdrop = 'static';
    config.keyboard = false;
  }

  open(content) {
    this.modalRef = this.modalService.open(NgbdModalContent);
    this.modalRef.componentInstance.name = 'World';


    this.modalRef.result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    console.log('>>>> getDismissReason');
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }

  ngOnInit() {
    this.setNavigation(
      'Teams', 
      [{name: 'Team', link: '/team', type : 'active'}]
    );
  }
}


//https://ng-bootstrap.github.io/#/components/modal/examples
//https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/
//https://stackblitz.com/angular/xxlxmbednyv?file=app%2Fmodal-component.ts<file_sep>/src/app/core/services/task.service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

import { ApiService } from './api.service';
import { map } from 'rxjs/operators';

import { Task } from '../models';

@Injectable()
export class TaskService {
  constructor (
    private apiService: ApiService
  ) {}

  getAll(): Observable<[Task]> {
    return this.apiService.get('/task/get-all')
      .pipe(map((data: {tasks: [Task]}) => data.tasks));
  }

  get(taskId): Observable<Task> {
    return this.apiService.get(`/task/${taskId}`)
      .pipe(map((data: {task: Task}) => data.task));
  }

  add(payload): Observable<Task> {
    return this.apiService
    .post(
      '/task/create',
      { task: { body: payload } }
    ).pipe(map(response => response));
  }

  update(payload): Observable<Task> {
    return this.apiService
    .post(
      '/task/update',
      { task: { body: payload } }
    ).pipe(map(response => response));
  }

}
<file_sep>/python-server/server.py
#!/usr/bin/python
from http.server import BaseHTTPRequestHandler,HTTPServer
from os import curdir, sep
import os
import pathlib

PORT_NUMBER = 8080
HOST_NAME = '0.0.0.0'

#This class will handles any incoming request from
#the browser 
class HTTPHandler(BaseHTTPRequestHandler):
	def do_OPTIONS(self):
		self.send_response(200, "ok")
		self.send_header('Access-Control-Allow-Origin', '*')
		self.send_header('Access-Control-Allow-Methods', 'GET,HEAD,OPTIONS,POST,PUT')
		self.send_header("Access-Control-Allow-Headers", "X-Requested-With")
		self.send_header("Access-Control-Allow-Headers", "Content-Type")
		
		
		self.send_header('Access-Control-Allow-Credentials', 'true')
		self.send_header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
		#self.send_header('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers')
		
		self.end_headers()
	def do_POST(self):
		self.do_GET()
	def handle_http(self, status_code, path):
		self.send_response(status_code)
		self.send_header('Content-type', 'text/html')
		self.end_headers()
		content = '''
		<html><head><title>Python Server</title></head>
		<body><p>The requested file could not be found</p>
		<p>Path: {}</p>
		</body></html>
		'''.format(path)
		return bytes(content, 'UTF-8')
	#Handler for the GET requests
	def do_GET(self):
		if self.path=="/":
			self.path="/index.html"
		try:
			#Check the file extension required and
			#set the right mime type
			mimetype = ''
			ext = pathlib.Path(self.path).suffix
			types = {
				'.html': 'text/html',
				'.jpg': 'image/jpg',
				'.png': 'image/png',
				'.js': 'application/javascript',
				'.css': 'text/css',
				'.json': 'application/json',
				'': 'application/json'
			}

			if ext in types:
				mimetype = types[ext]
				print(mimetype);

				#Open the static file requested and send it
				f = open(curdir + sep + self.path, 'rb') 
				#self.send_response(200)
				self.send_response(200, "ok")
				self.send_header('Access-Control-Allow-Origin', '*')
				self.send_header('Access-Control-Allow-Methods', 'GET,HEAD,OPTIONS,POST,PUT')
				self.send_header("Access-Control-Allow-Headers", "X-Requested-With")
				self.send_header("Access-Control-Allow-Headers", "Content-Type")
				# self.end_headers()
				self.send_header('Content-type',mimetype)
				self.end_headers()
				self.wfile.write(f.read())
				f.close()
			else:
				#return bytes('Regregu', 'UTF-8')
				response = self.handle_http(400, self.path)
				self.wfile.write(response)
			return		
		except IOError:
			self.send_error(404,'File Not Found: %s' % self.path)
try:
	#Create a web server and define the handler to manage the
	#incoming request
	server = HTTPServer((HOST_NAME, PORT_NUMBER), HTTPHandler)
	print ('Started httpserver on port ' , PORT_NUMBER)
	
	#Wait forever for incoming htto requests
	server.serve_forever()

except KeyboardInterrupt:
	print ('^C received, shutting down the web server')
	server.socket.close()<file_sep>/src/app/modules/profile/profile.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

import {BaseComponent} from '../../core/base.component';
import {UserService} from '../../core';

//import { DataTable, DataTableResource } from 'angular-6-data-table';

import {
  Profile
} from '../../core';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent extends BaseComponent {
  private teams: [Profile];
    
  constructor
  (
    private userService: UserService,
    private router: Router
  ) {super()}

  ngOnInit() {
    this.setNavigation(
      'Profiles', 
      [{name: 'Profile', link: '/team', type : 'active'}]
    );
  }
}
<file_sep>/src/app/shared/task-schedule/task-schedule.component.ts
import { Component, OnInit } from '@angular/core';
import { initializeCalendar } from '../../../assets/external-js/functions';
import {ScriptService} from '../../core/services/script.service'

@Component({
  selector: 'app-task-schedule',
  templateUrl: './task-schedule.component.html'
})
export class TaskScheduleComponent implements OnInit {

  constructor(private script: ScriptService) { }

  ngOnInit() {
    this.script.load(/*'momentjs', */'fullcalendar', ).then(data => {
      console.log('script loaded ', data);
      initializeCalendar();
  }).catch(error => console.log(error));
  }

}
<file_sep>/src/app/modules/default/default.module.ts
import { ModuleWithProviders, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { DefaultComponent } from './default.component';
import { NoAuthGuard } from './no-auth-guard.service';
import { SharedModule } from '../../shared';
import { DefaultRoutingModule } from './default-routing.module';

@NgModule({
  imports: [
    SharedModule,
    DefaultRoutingModule
  ],
  declarations: [
    DefaultComponent
  ],
  providers: [
    NoAuthGuard
  ]
})
export class DefaultModule {}
<file_sep>/src/app/core/models/index.ts
export * from './task.model';

export * from './errors.model';
export * from './profile.model';
export * from './user.model';
export * from './project.model';
export * from './team.model';

<file_sep>/src/app/shared/content-header/content-header.component.ts
import { Component, HostBinding, OnInit } from '@angular/core';
import {DependencyResolverService} from '../../core';


@Component({
  selector: 'app-content-header',
  templateUrl: './content-header.component.html'
})
export class ContentHeaderComponent implements OnInit {
  title:string;
  items:any;
  constructor() {
  }

  ngOnInit() {
    this.title = '';
    this.items = []; 

    console.log('ContentHeaderComponent>>> ');
    DependencyResolverService.getUtilityService().onTitleChanged.subscribe(args => {
      this.title = args.value.title;
      this.items = args.value.items;
    });
  }

}
<file_sep>/src/app/modules/user/user.module.ts
import { ModuleWithProviders, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from "@angular/common";

import { UserComponent } from './user.component';
import { UserAuthResolver } from './user-auth-resolver.service';
import { SharedModule } from '../../shared';
import { UserRoutingModule } from './user-routing.module';

import { DataTableModule } from 'angular-6-datatable';

import {  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatRippleModule, MatTableModule } from '@angular/material';

const modules = [
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatRippleModule,
  MatTableModule
];

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    UserRoutingModule,
    modules
  ],
  declarations: [
    UserComponent
  ],
  providers: [
    //NoAuthGuard
  ]
})
export class UserModule {}
<file_sep>/src/app/modules/task/task-new/task-new.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import {Router} from "@angular/router";

import {ProjectService, TaskService } from '../../../core';

import {
  Project
} from '../../../core';

import {BaseComponent} from '../../../core/base.component';
import { initializeFormElements } from '../../../../assets/external-js/functions';

@Component({
  selector: 'app-task-new',
  templateUrl: './task-new.component.html',
  styleUrls: ['./task-new.component.css']
})

export class TaskNewComponent extends BaseComponent {
  private taskNameControl: FormControl;
  private projects: [Project];

  newTask:any;
  constructor
  (
    private projectService: ProjectService,
    private taskService: TaskService,
    private router: Router,
  ) 
  { 
    super();
    this.taskNameControl = new FormControl();
  }

  ngOnInit() {
    super.ngOnInit();
    this.setNavigation(
      'New Task',
      [
        {name: 'Task', link: '/task'}, 
        {name: 'New Task', link: '/task-new', type : 'active'}
      ]
    );
   
    this.projectService.getAll()
      .subscribe(projects => {
        this.projects = projects;
        initializeFormElements();
      });
  }

  addTask() {
    const taskName = this.taskNameControl.value;
    this.newTask = {
      projectId:0,
      taskName:"New Task",
      taskDescription:"Task Description"
    };
    this.taskService.add(this.newTask)
    .subscribe(response => {
      console.log(response);
      if(response){
        this.router.navigate(['task']);
      }
    });
  }
}
<file_sep>/src/app/core/services/team.service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { ApiService } from './api.service';
import { Team } from '../models';

@Injectable()
export class TeamService {
  constructor (
    private apiService: ApiService
  ) {}

  getAll(): Observable<[Team]> {
    return this.apiService.get('/team/get-all')
      .pipe(map((data: {teams: [Team]}) => data.teams));
  }

  get(teamId): Observable<Team> {
    return this.apiService.get(`/team/${teamId}`)
      .pipe(map((data: {team: Team}) => data.team));
  }

  add(payload): Observable<Team> {
    return this.apiService
    .post(
      '/team/create',
      { team: { body: payload } }
    ).pipe(map(response => response));
  }

  update(payload): Observable<Team> {
    return this.apiService
    .post(
      '/team/update',
      { team: { body: payload } }
    ).pipe(map(response => response));
  }

}
<file_sep>/src/app/core/services/project.service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

import { ApiService } from './api.service';
import { map } from 'rxjs/operators';

import { Project } from '../models';

@Injectable()
export class ProjectService {
  constructor (
    private apiService: ApiService
  ) {}

  getAll(): Observable<[Project]> {
    return this.apiService.get('/project/get-projects')
      .pipe(map((data: {projects: [Project]}) => data.projects));
  }

}
<file_sep>/src/app/core/models/bread-crumb.model.ts
export interface BreadCrumb {
    items: any[];
}<file_sep>/src/app/app.routing.ts
import { Routes, RouterModule } from "@angular/router";


const routes: Routes = [
    //{ path: "", redirectTo: "home", pathMatch: "full" },
    //{ path: "task", component: TaskComponent },
    //{ path: "**", component: DashboardComponent }
]
export const routing = RouterModule.forRoot(routes);
<file_sep>/src/app/modules/dashboard/dashboard.component.ts
import { Component, OnInit } from '@angular/core';
import {BaseComponent} from '../../core/base.component';


@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent extends BaseComponent {

  constructor() { super() }
  ngOnInit() {
    super.ngOnInit();
    this.setNavigation(
      'Dashboard',
      [{name: 'Dashboard', link: '/', type : 'active'}]
    );
  }
}

//https://stackoverflow.com/questions/34489916/how-to-load-external-scripts-dynamically-in-angular
<file_sep>/src/app/modules/task/task-edit/task-edit.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import {Router, ActivatedRoute} from "@angular/router";

import {ProjectService, TaskService } from '../../../core';

import {
  Task, Project
} from '../../../core';

import {BaseComponent} from '../../../core/base.component';
import { initializeFormElements } from '../../../../assets/external-js/functions';

@Component({
  selector: 'app-task-edit',
  templateUrl: './task-edit.component.html'
})

export class TaskEditComponent extends BaseComponent {
  private taskNameControl: FormControl;
  private projects: [Project];
  task: Task = {} as Task;

  //newTask:any;

  title:string;
  constructor
  (
    private projectService: ProjectService,
    private taskService: TaskService,
    private router: Router,
    private route: ActivatedRoute
  ) 
  { 
    super();
    this.taskNameControl = new FormControl();
  }

  ngOnInit() {
    super.ngOnInit();

    var taskId: string = '';
    this.setNavigation(
      'Edit Task',
      [
        {name: 'Task', link: '/task'}, 
        {name: 'Edit Task', link: '/task-new', type : 'active'}
      ]
    );
    
    this.projectService.getAll()
    .subscribe(projects => {
      this.projects = projects;
      //initializeFormElements();
    });
    
    this.route.paramMap.subscribe(params => {
      let id = params.get('id') 
      console.log(id);
      this.taskService.get(id)
      .subscribe(task => { 
        this.task = task;
      });
    })
  }

  private updateTask() {
    //[::KEEP::]// const taskName = this.taskNameControl.value; 

    var newTask:any = {
      taskId: null,
      projectId: this.task.projectId,
      taskName: this.task.taskName,
      taskDescription: this.task.taskDescription
    };

    this.taskService.update(newTask)
    .subscribe(response => {
      if(response){
        this.router.navigate(['task']);
      }
    });

    console.log(newTask);
  }
}
<file_sep>/src/app/modules/default/default.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

import {UserService } from '../../core';
@Component({
  selector: 'app-default',
  templateUrl: './default.component.html'
})
export class DefaultComponent implements OnInit {

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private userService: UserService,
  ) { }

  ngOnInit() {
    if (this.userService.isLoggedIn()) {
      this.router.navigate(['/dashboard']);
    }else{
      this.router.navigate(['auth/login']);
    }
  }

}
<file_sep>/src/app/modules/task/task.component.ts
//Reference: https://medium.com/dailyjs/3-ways-to-communicate-between-angular-components-a1e3f3304ecb

import { Component} from '@angular/core';
//import 'rxjs/add/operator/map';

import {TaskService} from '../../core';
import {BaseComponent} from '../../core/base.component';
import {
  Task
} from '../../core';

import { Router } from '@angular/router';

@Component({
  selector: 'app-task',
  templateUrl: './task.component.html',
  styleUrls: ['./task.component.css']
})
export class TaskComponent extends BaseComponent {
  tasks: [Task];

  constructor(private taskService: TaskService, private router: Router) {super()}

  ngOnInit() {  
    super.ngOnInit();
    this.setNavigation(
      'My Tasks', 
      [{name: 'Task', link: '/task', type : 'active'}]
    );

    this.taskService.getAll()
      .subscribe(tasks => {
        this.tasks = tasks;
        this.loaded = true;
        console.log(tasks)
      });
  }

  selectTask(taskId:string){
    this.router.navigate([`/task/edit/${taskId}`, {}], {
      skipLocationChange: false
  });
  }
}
<file_sep>/src/app/modules/user/user.component.ts
import { Component, ViewChild, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

import {BaseComponent} from '../../core/base.component';
import {UserService, ProjectService} from '../../core';

//import { DataTable, DataTableResource } from 'angular6-data-table';
//import { DataTableResourceCustom } from './data-table-resources-custom';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';

import {
  User,
  Project
} from '../../core';

export interface UserData {
  id: string;
  name: string;
  progress: string;
  color: string;
}

@Component({
  selector: 'app-default',
  templateUrl: './user.component.html'
})
export class UserComponent extends BaseComponent {
  private users:any = [];
  private itemCount = 0;
  private limit = 0;
  private itemResource:any;
 
  displayedColumns = ['id', 'name', 'progress', 'color'];
  dataSource: MatTableDataSource<UserData>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
    
  constructor
  (
    private userService: UserService,
    private projectService: ProjectService,
    private router: Router
  ) 
     {
       super();
       const users: UserData[] = [];
       for (let i = 1; i <= 100; i++) { users.push(createNewUser(i)); }
   
       // Assign the data to the data source for the table to render
       this.dataSource = new MatTableDataSource(users);
    }

  ngOnInit() {
   // this.itemResource.count().then(count => this.itemCount = count);

    this.userService.getUsers()
    .subscribe(users => {
      this.users = users;
      this.loaded = true;
      console.log(this.users);

      //this.itemResource = new DataTableResourceCustom(this.users);
      this.itemResource.count().then(count => {this.itemCount = count, this.limit = 10});
    });
  }

  reloadItems(params) {
    if(this.itemResource != null){
      this.itemResource.query(params).then(items => this.users = items);
    }
  }



  /************************************************************************** */
  /**
   * Set the paginator and sort after the view init since this component will
   * be able to query its view for the initialized paginator and sort.
   */
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
}


/** Builds and returns a new User. */
function createNewUser(id: number): UserData {
  const name =
      NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
      NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';

  return {
    id: id.toString(),
    name: name,
    progress: Math.round(Math.random() * 100).toString(),
    color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
  };
}

/** Constants used to fill up our data base. */
const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
  'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
  'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];


  //https://stackblitz.com/angular/dnbermjydavk?file=app%2Ftable-overview-example.ts


<file_sep>/src/app/core/services/dependency-resolver.service.ts
//https://codecraft.tv/courses/angular/dependency-injection-and-providers/providers/
//https://codecraft.tv/courses/angular/dependency-injection-and-providers/injectors/

import { Injectable, Injector } from '@angular/core';
import { UtilityService } from './utility.service';

@Injectable()
export class DependencyResolverService {
  private static injector:Injector  = Injector.create([
    { provide: UtilityService, useClass: UtilityService, deps: [] }
  ])
  constructor() {}
  
  public static getUtilityService():UtilityService {
    return DependencyResolverService.injector.get(UtilityService);
  }
}<file_sep>/src/app/core/models/task.model.ts

export interface Task {
  taskId: string;
  taskName: string;
  taskDescription: string;
  projectId: string;
  projectName: string;
}
<file_sep>/src/app/modules/team/team.module.ts
import { ModuleWithProviders, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from "@angular/common";

import { TeamComponent } from './team.component';
import { SharedModule } from '../../shared';
import { TeamRoutingModule } from './team-routing.module';

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {NgbModal, ModalDismissReasons, NgbActiveModal, NgbModalConfig} from '@ng-bootstrap/ng-bootstrap';
import {NgbdModalContent } from  './modal-content.component';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    TeamRoutingModule,
    NgbModule.forRoot()
  ],
  declarations: [
    TeamComponent,
    NgbdModalContent,
  ],
  providers: [
    NgbActiveModal, NgbModalConfig, NgbModal
  ],
  entryComponents: [NgbdModalContent]
})
export class TeamModule {}
<file_sep>/src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';

import { DefaultModule } from './modules/default/default.module';
import { AuthModule } from './modules/auth/auth.module';
import { TaskModule } from './modules/task/task.module';
import { DashboardModule } from './modules/dashboard/dashboard.module';
import { NotFoundModule } from './modules/not-found/not-found.module';
import { UserModule } from './modules/user/user.module';
import { ProjectModule } from './modules/project/project.module';
import { TeamModule } from './modules/team/team.module';
import { ProfileModule } from './modules/profile/profile.module';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => DefaultModule,
  },
  {
    path: 'dashboard',
    loadChildren: () => DashboardModule
  },
  {
    path: 'auth',
    loadChildren: () => AuthModule,
  },
  {
    path: 'dashboard',
    loadChildren: () => DashboardModule
  },
  {
    path: 'task',
    loadChildren: () => TaskModule,
  },
  {
    path: 'user',
    loadChildren: () => UserModule,
  },
  {
    path: 'project',
    loadChildren: () => ProjectModule,
  },
  {
    path: 'team',
    loadChildren: () => TeamModule,
  },
  {
    path: 'profile',
    loadChildren: () => ProfileModule,
  },
  { path: '**', loadChildren: () => NotFoundModule, }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    // preload all modules;
    preloadingStrategy: PreloadAllModules
  })],
  exports: [RouterModule]
})
export class AppRoutingModule {}<file_sep>/src/assets/external-js/functions.d.ts
export declare function initializeCalendar();
export declare function initializeFormElements();<file_sep>/python-server/user/login
{
	"user":
	{
	  "iss": "scotch.io",
	  "exp": 1300819380,
	  "name": "<NAME>",
	  "admin": true,
	  "token":"<KEY>"
	}
}<file_sep>/src/app/core/base.component.ts
import {OnInit } from '@angular/core';
import {DependencyResolverService} from '../core';

export class BaseComponent implements OnInit {   
  protected loaded: boolean;
  constructor() {
      
  }

  setNavigation(title:string, items:any[]){
    DependencyResolverService.getUtilityService().setNavigation(title, this.getBreadCrumb(items));
  }

  getTitle():string{
    return DependencyResolverService.getUtilityService().getTitle();
  }

  getBreadCrumb(items:any[]){
    let mergeItems = [{name: 'Home', link: '', type : ''}].concat(items);
    return mergeItems;
  }

  ngOnInit() {  
    
  }

}
