programming-with-drmas

Crud Customer Application Spring boot and Angular Part 1

2022-01-18T06:07:00.009-08:00

Getting Started | Building an Application with Spring Boot

Crud Customer Application Spring boot and Angular

In this tutorial, we are going to develop a CRUD (create-read-update-delete) web application. This application contains the student form that includes the CRUD features like add, view, delete, and update student. In this integration, we are using Spring Boot to handle the backend part and Angular to handle the frontend part.

Tools to be used

° Use any IDE to develop the Spring and Hibernate project. It may be STS/Eclipse/Netbeans. Here, we are using STS (Spring Tool Suite).

° MySQL for the database.

° Use any IDE to develop the Angular project. It may be Visual Studio Code/Sublime. Here, we are using Visual Studio Code.

° Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Spring MVC

Spring MVC is the primary web framework built on the Servlet API. It is build on the popular MVC design pattern. MVC (Model-View-Controller) is a software architecture pattern, which separates application into three areas: model, view, and controller. The model represents a Java object carrying data. The view represents the visualization of the data that the model contains. The controller controls the data flow into model object and updates the view when the data changes. It separates the view and model.

Spring Boot Architecture

Spring Boot is a module of the Spring Framework. It is used to create stand-alone, production-grade Spring Based Applications with minimum efforts. It is developed on top of the core Spring Framework.

pom.xml

    
  
  
 <?xml version="1.0" encoding="UTF-8"?>
 <project xmlns="http://maven.apache.org/POM/4.0.0"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0>/modelVersion>
   <parent>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-parent</artifactId>
	<version>2.4.1</version>
	<relativePath/> 
  </parent>
    
    <groupId>com.curd-customer</groupId>
	<artifactId>curd-customer</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>curd-customer</name>
	<description>Demo project for Spring Boot</description>
    
    <properties>
	 <java.version>1.8</java.version>
    </properties>
    
    <dependencies>
     <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-data-jpa</artifactId>
   </dependency>
    
      <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
   </dependency>
   
      <dependency>
	<groupId>mysql</groupId>
	<artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
   </dependency>
   
     <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
   </dependency>
  </dependencies>
  
  <build>
    <plugins>
	 <plugin>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-maven-plugin</artifactId>
	 </plugin>
	</plugins>
 </build>
 
 </project>

Properties File

Properties files are used to keep ‘N’ number of properties in a single file to run the application in a different environment. In Spring Boot, properties are kept in the application.properties file under the classpath.

The application.properties file is located in the src/main/resources directory. The code for sample application.properties

We need to create database name it gestion-stock

src/main/resources/application.properties

    
  
  
spring.datasource.url=jdbc:mysql://localhost:3306/crud-customer?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
spring.datasource.username=root
spring.activemq.password=
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
spring.jpa.hibernate.ddl-auto=create-drop
server.port=8080

Class Diagram

First We Will Create a package model inside it We will add Customer Class

Here, we are creating an Entity

-> Customer.java

src/main/java/com/curdcustomer/model/Customer.java):




package com.curdcustomer.model;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Customer {

 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private Long id;
 private String firstname;
 private String lastname;
 private int age;
 private boolean active;
    
 public Customer() {
  super();
  }
    
 public Customer(String firstname, String lastname, int age, boolean active) {
    super();
  this.firstname = firstname
  this.lastname = lastname
  this.age = age
  this.active = active
 }

 public Long getId() {
   return id;
 }
 
 public void setId(Long id) {
  this.id = id;
 }
 
 public String getFirstname() {
  return firstname;
 }
 
 public void setFirstname(String firstname) {
  this.firstname = firstname;
 }
 
 public String getLastname() {
  return lastname;
 }
 
 public void setLastname(String lastname) {
  this.lastname = lastname;
 }
 
 public int getAge() {
  return age;
 }
 
 public void setAge(int age) {
  this.age = age;
 }
 public boolean isActive() {
  return active;
 }
 
 public void setActive(boolean active) {
  this.active = active;
 }
}

Here, we are creating the DAO interface to perform database related operations.

src/main/java/com/curdcustomer/repository/CustomerRepository.java):




package com.curdcustomer.repository;
import java.util.List;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.curdcustomer.model.Customer;

@Repository
public interface CustomerRepository extends JpaRepository<Customer, Long> {
	List<Customer> findByAge(int age);
}

Here, we are creating a service layer interface that acts as a bridge between DAO and Entity classes.

src/main/java/com/curdcustomer/service/CustomerService.java):




package com.curdcustomer.service;

import java.util.List;
import java.util.Optional;
import org.springframework.http.ResponseEntity;
import com.curdcustomer.model.Customer;

public interface CustomerService {
 Customer create(Customer customer);
	
 ResponseEntity<Customer> update(Customer customer, Long id);
	
 ResponseEntity<Customer> isActive(Customer customer, Long id);
	
 ResponseEntity<Customer> inActive(Customer customer, Long id);
	
 List<Customer> getAllCustomers();
	
 ResponseEntity<String> deleteAllCustomers();
	
 ResponseEntity<String>  deleteCustomer(long id);
	
 Optional<Customer> findById(long id);
	
 List<Customer> findByAge(int age);
}

Create the service layer implementation class

src/main/java/com/impl/service/CustomerServiceImpl.java):




package com.curdcustomer.impl;

import java.util.Comparator;
import java.util.List;
import java.util.Optional;
import java.util.stream.Collectors;

import javax.transaction.Transactional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Component;
import com.curdcustomer.model.Customer;
import com.curdcustomer.repository.CustomerRepository;
import com.curdcustomer.service.CustomerService;

@Component
@Transactional
public class CustomerServiceImpl implements CustomerService {
	
 @Autowired
 private CustomerRepository customerRepository;

@Override
public Customer create(Customer customer) {
 return customerRepository.save(customer);
 }
    
 @Override
public ResponseEntity<Customer> update(Customer customer, Long id) {
  Optional<Customer> customerDataOptional = customerRepository.findById(id);
  if (customerDataOptional.isPresent()) {
    Customer _Customer = customerDataOptional.get();
    _Customer.setFirstname(customer.getFirstname());
    _Customer.setLastname(customer.getLastname());
    _Customer.setAge(customer.getAge());
    return new ResponseEntity<Customer>(customerRepository.save(_Customer), HttpStatus.OK);
 } else {
    return new ResponseEntity<Customer>(HttpStatus.NOT_FOUND);
	}
 }

 @Override
 public List<Customer> getAllCustomers() {
   List<Customer> customers = customerRepository.findAll();
   customers = customers.stream().sorted(Comparator.comparing(Customer::getAge))
				.collect(Collectors.toList());
   return customers;
 }

 @Override
 public ResponseEntity<String> deleteAllCustomers() {
   customerRepository.deleteAll();
   return new ResponseEntity<String>("All customer have been deleted!", HttpStatus.OK);
}

 @Override
 public ResponseEntity<String> deleteCustomer(long id) {
   customerRepository.deleteById(id);
   return new ResponseEntity<String>("Customer has been deleted!", HttpStatus.OK);
}

 @Override
 public Optional<Customer> findById(long id) {
    Optional<Customer> customers = customerRepository.findById(id);
    return customers;
}

 @Override
 public List<Customer> findByAge(int age) {
    List<Customer> customers = customerRepository..findByAge(age);
    return customers;
}

 @Override
 public ResponseEntity<Customer> isActive(Customer customer, Long id) {
    Optional<Customer> customerDataOptional = customerRepository.findById(id);
    if (customerDataOptional.isPresent()) {
    Customer _Customer = customerDataOptional.get();
    _Customer.setActive(true);
    return new ResponseEntity<Customer>(customerRepository..save(_Customer), HttpStatus.OK);
} else {
    return new ResponseEntity<Customer>(HttpStatus.NOT_FOUND);
 }
}
    
 @Override
 public ResponseEntity<Customer> inActive(Customer customer, Long id) {
    Optional<Customer> customerDataOptional = customerRepository.findById(id);
    if (customerDataOptional.isPresent()) {
    Customer _Customer = customerDataOptional.get();
    _Customer.setActive(false);
    return new ResponseEntity<Customer>(customerRepository.save(_Customer), HttpStatus.OK);
} else {
   return new ResponseEntity<Customer>(HttpStatus.NOT_FOUND);
  }
 }
}

Create the controller class

src/main/java/com/curdcustomer/controller/CustomerController.java):




package com.curdcustomer.controller;

import java.util.List;
import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.curdcustomer.model.Customer;
import com.curdcustomer.service.CustomerService;

@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping("/api")
public class CustomerController {

 @Autowired
  private CustomerService customerService;
  
 @PostMapping(value="/customers/create")
 public Customer create(@RequestBody Customer customer) {
  return customerService.create(customer);
 }
	
 @GetMapping(value="/customers/getAllCustomers")
 public  List<Customer> getAllCustomers(){
  return customerService.getAllCustomers();
 }
 
 @PutMapping(value="/customers/update/{id}")
 public  ResponseEntity<Customer> update(@RequestBody Customer customer, @PathVariable("id") Long id){
    return customerService.update(customer, id);
 }

 @DeleteMapping(value="/customers/deleteAllCustomers")
 public ResponseEntity@lt;String> deleteAllCustomers() {
  return customerService.deleteAllCustomers();
 }
	
 @DeleteMapping(value="/customers/delete/{id}")
 public ResponseEntity<String>  deleteCustomer(@PathVariable("id") long id){
  return customerService.deleteCustomer(id);
 }
 
 @GetMapping(value="customers/id/{id}")
 Optional<Customer> findById(@PathVariable long id) {
  return customerService.findById(id);
 }

 @GetMapping(value="customers/age/{age}")
 public List<Customer> findByAge(@PathVariable int age){
  return customerService.findByAge(age);
 }
    
 @PutMapping(value="/customers/isActive/{id}")
 public ResponseEntity<Customer> isActive(@RequestBody Customer customer, @PathVariable Long id) {
  return customerService.isActive(customer, id);
 }
    
 @PutMapping(value="/customers/inActive/{id}")
 ResponseEntity<Customer> inActive(@RequestBody Customer customer, @PathVariable Long id) {
  return customerService.inActive(customer, id);
 }
}

src/main/java/com/curdcustomer/CurdCustomerApplication.java):




package com.curdcustomer;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class CurdCustomerApplication {

 public static void main(String[] args) {
  SpringApplication.run(CurdCustomerApplication.class, args);
  System.out.print("App started...");
  }
}

Conclusion

Now we have an overview of Spring Boot CRUD example when building a CRUD App.

We also take a look at client-server architecture for REST API using Spring Web MVC & Spring Data JPA, as well, we are gooing to continue with Angular 10 project structure for building a front-end app to make HTTP requests and consume responses.

Crud Customer Application Spring boot and Angular Part 2

Download Gestion Stock project From Github

Building gestion school with Spring boot & Angular Pt 4

2022-01-18T03:46:00.007-08:00

Getting Started | Building an Application with Angular

In this part We will continue to complete school project

Find Activity Components

In find Activity component we can display informarion of Activity with Update and Delete

src/app/find-activity-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { Activity }  from  '../model/Model';
 import  { ActivityService }  from  '../service/activity.service';
 import  { AddActivityComponent }  from  '../add-activity/add-activity.component';
 import  { ActivatedRoute, Router }  from  '@angular/router';

@Component({
  selector: 'find-activity',
  templateUrl: './find-activity.component.html',
  styleUrls: ['./find-activity.component.css']
})
export class FindActivityComponent implements OnInit {

  activity: Activity = {} as Activity;
  idActivity: number;
  
constructor (private route: ActivatedRoute, private activityService: ActivityService, private dialog: MatDialog,
    private router: Router) {
    this.route.params.subscribe (
      params => {
        this.idActivity = this.route.snapshot.params.idActivity;
        this.activityService .findActivity (this.idActivity).subscribe (activity => {
          this.activity = activity;
        })
      }
    )
  }

  ngOnInit (): void  {}
  
  deleteActivity (idActivity: number) {
      if(confirm( 'Are you sure' )) {
        this.activityService .deleteActivity(idActivity ).subscribe (() => {
         window.location .replace( `/find-school/ ${this.route.parent.snapshot.params.idSchool} /find-activities` )
        })
      }
  }

  updateActivity(idActivity: number) {
    this.dialog.open(AddActivityComponent, {
      data : {idActivity},
      height :  '600px' ,
      width :  '400px' ,
    });
  }
}

src/app/find-activity-component.html




<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>{{activity.type}}</mat-card-title>
    <mat-card-subtitle>{{activity.createdAt|date}}</mat-card-subtitle>
  </mat-card-header>
    <mat-card-content *ngIf="activity!=null">
      <mat-list>
        <mat-divider ></mat-divider >
        <mat-list-item > <strong>{{activity.day}}</strong> </mat-list-item >
        <mat-list-item >Date: {{activity.date|date: 'dd/MM/yyyy'}}</mat-list-item >
        <mat-divider  style="width: 180px !important;"></mat-divider >
        <mat-list-item >Start: {{activity.startDate}}</mat-list-item >
        <mat-divider  style="width: 180px !important;"></mat-divider >
        <mat-list-item >End: {{activity.endDate}}</mat-list-item >
        <mat-divider  style="width: 180px !important;"></mat-divider >
      </mat-list>
      <p style="padding: 10px; color: #333; background: #f5f6fa;">
        {{activity.description}}
      </p>
    </mat-card-content>
    <mat-card-actions><br>
      <button mat-stroked-button color="accent" (click)="deleteActivity((activity.id)" >Delete activity</button>
      <button mat-stroked-button color="primary" (click)="updateActivity(activity.id)">Update activity</button>
    </mat-card-actions>
</mat-card>

Find Subject Components

In find Subject component we can display informarion of Subject with Update and Delete, We can also add a new Program

find-subject.component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { Subject }  from  '../model/Model';
 import  { SubjectService }  from  '../service/subject.service';
 import  { AddSubjectComponent }  from  '../add-subject/add-subject.component';
 import  { ActivatedRoute, Router }  from  '@angular/router';
 import  { AddProgramComponent }  from  '../add-program/add-program.component';
 import  { AddCoefficientComponent}  from  '../add-coefficient/add-coefficient.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class FindSubjectComponent implements OnInit {

  subject : Subject = {} as  Subject;
  idSubject : number;
  
constructor (private route: ActivatedRoute, private subjectService: SubjectService, private dialog: MatDialog) {
    this.route.params.subscribe(
      params => {
        this.idSubject = this.route.snapshot.params.idSubject ;
        this.subjectService.findSubject(this.idSubject ).subscribe(subject => {
          this.subject = subject
        })
      }
    )
  }

  ngOnInit(): void {
  }
  deleteSubject(idSubject: number) {
    if(confirm('Are you sure')) {
      this.subjectService.deleteSubject(idSubject).subscribe(() => {
       window.location.replace(`/find-school/ ${this.route.parent.snapshot.params.idSchool} /find-subjects`)
      })
    }
  }
  updateSubject(idSubject: number) {
    this.dialog.open(AddSubjectComponent, {
      data: {idSubject},
      height: '620px',
      width: '400px',
    });
  }
  addProgram(idSubject: number) {
    this.dialog.open(AddProgramComponent, {
      data: {idSubject},
      height: '320px',
     width: '400px',
    });
  }
}

find-subject.component.html




  <mat-card>
    <mat-card-header [style.background-color]="subject.color" style="padding-top: 10px; border-radius: 5px; margin-bottom: 10px;">
      <mat-card-title>Subject: {{subject.name}}</mat-card-title>
      <mat-card-subtitle>Created at: {{subject.createdAt|date}} </mat-card-subtitle>
    </mat-card-header>
      <mat-divider></mat-divider>
      <mat-card-content><br>
        <p style="padding: 10px; color: #333; background: #f5f6fa;">
          {{subject.description}}
        </p>
      </mat-card-content>
      <mat-card-actions><br>
        <button mat-stroked-button color="accent" (click)="deleteSubject(subject.id)" >Delete subject</button>
        <button mat-stroked-button color="primary" (click)="updateSubject(subject.id)">Update subject</button>
        <button mat-stroked-button color="primary" (click)="addProgram(subject.id)">Add a new program</button>
      </mat-card-actions>
  </mat-card>

Add Program Components

In Add Program component we can add a new Program

src/app/add-program-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Program }  from  '../model/Model';
 import  { ProgramService }  from  '../service/program.service';



@Component({
  selector: 'app-add-program',
  templateUrl: './add-program.component.html',
  styleUrls: ['./add-program.component.css']
})
export class AddProgramComponent implements OnInit {

  progressBar = false;
  program: Program = {} as Program;
  
  
constructor(private programService: ProgramService, @Inject(MAT_DIALOG_DATA) private data: any) { }

  ngOnInit(): void {
    if(this.data.idProgram!=null) {
      this.programService.findProgram(this.data.idProgram).subscribe(program => {
        this.program = program;
      })
    }
  }

addProgram() {
  this.progressBar = true;
  if(this.data.idProgram!=null) {
   this.programService.editProgram(this.program, this.data.idProgram).subscribe(program => {
     this.program = program;
     window.location.reload();
   })
  } else {
    this.programService.addProgram(this.program, this.data.idSubject).subscribe(program => {
      this.program = program;
      window.location.reload();
    })
  }
}
}

src/app/add-program-component.html




<div style="margin: auto; width: 100%; border: 3px solid #73AD21;">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Add a new program</mat-card-title>
    </mat-card-header>
    <mat-card-content><br>
    <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
      <form
        <mat-form-field style="width: 100%;">
          <mat-label>Name</mat-label>
          <input type="text" matInput placeholder="name" name="name"
                 [(ngModel)]="program.name" #name="ngModel" required>
        </mat-form-field> <br>

        <mat-form-field style="width: 100%;">
          <mat-label>Enter description</mat-label>
          <textarea matInput placeholder="Description" name="description" [(ngModel)]="program.description"
            #description="ngModel"></textarea>
        </mat-form-field><br>

        <button mat-raised-button color="primary"
          [disabled]="name.invalid || description.invalid"
          (click)="addProgram()" style="width: 10em !important">Save</button>
      </form>
    </mat-card-content>
  </mat-card>
</div>

Find Program Components

In Find Program component we can display information of Program and add a new Coefficien

src/app/find-program-component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { Program }  from  '../model/Model';
 import  { ProgramService }  from  '../service/program.service';
 import  { AddCoefficientComponent }  from  '../add-coefficient/add-coefficient.component';
 import  { ActivatedRoute, Router }  from  '@angular/router';
 import  { AddProgramComponent }  from  '../add-program/add-program.component';


@Component({
  selector: 'app-find-program',
  templateUrl: './find-program.component.html',
  styleUrls: ['./find-program.component.css']
})
export class FindProgramComponent implements OnInit {

 program: Program = {} as Program;
 idProgram: number;
 
constructor(private route: ActivatedRoute, private programService: ProgramService, private dialog: MatDialog) {
    this.route.params.subscribe(
      params => {
        this.idProgram = this.route.snapshot.params.idProgram;
        this.programService.findProgram(this.idProgram).subscribe(program => {
          this.program = program;
        })
      }
    )
  }

  ngOnInit(): void {}
  
updateProgram(idProgram: number) {
    this.dialog.open(AddProgramComponent, {
      data: {idProgram},
      height: '320px',
      width: '400px',
    });
  }
  deleteProgram(idProgram: number) {
    if(confirm('Are you sure')) {
      this.programService.deleteProgram(idProgram).subscribe(() => {
        window.location.replace(`/find-school/ ${this.route.parent.snapshot.params.idSchool} /find-subjects`)
      })
    }
  }
  addCoefficient(idProgram: number) {
    this.dialog.open(AddCoefficientComponent, {
      data: {idProgram},
      height: '320px',
      width: '400px',
    });
  }
}

src/app/find-program-component.html




  <mat-card>
    <mat-card-header>
      <mat-card-title>Program: {{program.name}}</mat-card-title>
      <mat-card-subtitle>Created at: {{program.createdAt|date}} </mat-card-subtitle>
    </mat-card-header>
      <mat-divider></mat-divider>
      <mat-card-content><br>
        <p style="padding: 10px; color: #333; background: #f5f6fa;">
          {{program.description}}
        </p>
      </mat-card-content>
      <mat-card-actions><br>
        <button mat-stroked-button color="accent" (click)="deleteProgram(program.id)" >Delete program</button>
        <button mat-stroked-button color="primary" (click)="updateProgram(program.id)">Update program</button>
        <button mat-stroked-button color="primary" (click)="addCoefficient(program.id)">Add a new coefficient</button>
      </mat-card-actions>
  </mat-card>

Add Coefficien Components

In Add Coefficien component we can add a new Coefficien

src/app/add-coefficien-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Coefficient }  from  '../model/Model';
 import  { CoefficientService }  from  '../service/coefficient.service';



@Component({
  selector: 'app-add-coefficient',
  templateUrl: './add-coefficient.component.html',
  styleUrls: ['./add-coefficient.component.css']
})
export class AddCoefficientComponent implements OnInit {

  progressBar = false;
  coefficient: Coefficient = {} as Coefficient;
  
  
constructor(private coefficientService: CoefficientService, @Inject(MAT_DIALOG_DATA) private data: any) { }

  ngOnInit(): void {
    if(this.data.idCoefficient!=null) {
     this.coefficientService.findCoefficient(this.data.idCoefficient).subscribe(coefficient => {
     this.coefficient = coefficient;
   })
    }
  }
  addCoefficient() {
    this.progressBar = true;
    if(this.data.idCoefficient!=null) {
      this.coefficientService.editCoefficient(this.coefficient, this.data.idCoefficient).subscribe(coefficient => {
        this.coefficient = coefficient;
        window.location.reload();
      })
    } else {
      this.coefficientService.addCoefficient(this.coefficient, this.data.idProgram).subscribe(coefficient => {
        this.coefficient = coefficient;
        window.location.reload();
      })
    }
  }
}

src/app/add-coefficien-component.html




  <div style="margin: auto; width: 100%; border: 3px solid #73AD21;">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Add a new coefficient</mat-card-title>
      </mat-card-header>
      <mat-card-content><br>
      <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
        <form>
          <mat-form-field style="width: 100%;">
            <mat-label>Grade</mat-label>
            <input type="number" matInput placeholder="grade" name="grade"
                   [(ngModel)]="coefficient.grade" #grade="ngModel" required>
          </mat-form-field> <br>
  
          <mat-form-field style="width: 100%;">
            <mat-label>Enter description</mat-label>
            <textarea matInput placeholder="Description" name="description" [(ngModel)]="coefficient.description"
              #description="ngModel"></textarea>
          </mat-form-field><br>
  
          <button mat-raised-button color="primary"
            [disabled]="grade.invalid || description.invalid"
            (click)="addCoefficient()" style="width: 10em !important">Save</button>
        </form>
      </mat-card-content>
    </mat-card>
  </div>

Find Coefficien Components

In Find Coefficien component we can display information of Coefficien and update/delete

src/app/find-coefficien-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { Coefficient }  from  '../model/Model';
 import  { CoefficientService }  from  '../service/coefficient.service';
 import  { AddCoefficientComponent }  from  '../add-coefficient/add-coefficient.component';


@Component({
  selector: 'app-find-coefficient',
  templateUrl: './find-coefficient.component.html',
  styleUrls: ['./find-coefficient.component.css']
})
export class FindCoefficientComponent implements OnInit {

  coefficien: Coefficient = {} as Coefficient;
  idCoefficient: number;
  
constructor(private route: ActivatedRoute, private coefficientService: CoefficientService, private dialog: MatDialog) {
    this.route.params.subscribe(
      params => {
        this.idCoefficient = this.route.snapshot.params.idCoefficient;
        this.coefficientService.findCoefficient(this.idCoefficient).subscribe(coefficien => {
          this.coefficien = coefficien;
        })
      }
    )
  }
  ngOnInit(): void {
  }
  deleteCoefficien(idCoefficient: number) {
   if(confirm('Are you sure')) {
     this.coefficientService.deleteCoefficient(idCoefficient).subscribe(() => {
      window.location.replace(`/find-school/ ${this.route.parent.snapshot.params.idSchool} /find-subjects`)
     })
   }
  }
  updateCoefficien(idCoefficient: number) {
    this.dialog.open(AddCoefficientComponent, {
      data: {idCoefficient},
      height: '320px',
      width: '400px',
    });
  }
}

src/app/find-coefficien-component.html




  <mat-card>
    <mat-card-header>
      <mat-card-title>Coefficien grade: {{coefficien.grade}}</mat-card-title>
      <mat-card-subtitle>Created at: {{coefficien.createdAt|date}} </mat-card-subtitle>
    </mat-card-header>
      <mat-divider></mat-divider>
      <mat-card-content><br>
        <p style="padding: 10px; color: #333; background: #f5f6fa;">
          {{coefficien.description}}
        </p>
      </mat-card-content>
      <mat-card-actions><br>
        <button mat-stroked-button color="accent" (click)="deleteCoefficien(coefficien.id)" >Delete coefficien</button>
        <button mat-stroked-button color="primary" (click)="updateCoefficien(coefficien.id)">Update coefficien</button>
      </mat-card-actions>
  </mat-card>

Find Exam Components

In Find Exam component we can display information of Exam and update/delete We need elso add a new note for exam

src/app/find-exam-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { Exam, Subject }  from  '../model/Model';
 import  { ExamService }  from  '../service/exam.service';
 import  { AddExamComponent }  from  '../add-exam/add-exam.component';
 import  { ActivatedRoute, Router }  from  '@angular/router';
 import  { SubjectService }  from  '../service/subject.service';
 import  { AddNoteComponent}  from  '../add-note/add-note.component';


@Component({
  selector: 'app-find-exam',
  templateUrl: './find-exam.component.html',
  styleUrls: ['./find-exam.component.css']
})
export class FindExamComponent implements OnInit {

 exam: Exam = {} as Exam;
 subject: Subject = {} as Subject;
 idExam: number;

 constructor(private route: ActivatedRoute, private examService: ExamService,
    private subjectService: SubjectService, private dialog: MatDialog) {
    this.route.params.subscribe(
      params => {
        this.idExam = this.route.snapshot.params.idExam;
        this.examService.findExam(this.idExam).subscribe(exam => {
           this.exam = exam;
           this.subjectService.findSubjectForExam(this.idExam).subscribe(subject => {
             this.subject = subject;
           })
         })
      }
    )
  }

  ngOnInit(): void {

  }

  deleteExam(idExam: number, idSubject) {
   if(confirm('Are you sure')) {
     this.examService.deleteExam(idExam, idSubject).subscribe(() => {
      window.location.replace(`/find-school/ ${this.route.parent.snapshot.params.idSchool} /find-exams`)
     })
   }
  }
  updateExam(idExam: number) {
    this.dialog.open(AddExamComponent, {
      data: {idExam},
      height: '480px',
      width: '400px',
    });
  }
  addNote(idExam: number) {
    this.dialog.open(AddNoteComponent, {
      data: {idExam},
      height: '300px',
      width: '400px',
    });
  }
}

src/app/find-exam-component.html




  <mat-card class="example-card">
    <mat-card-header>
      <mat-card-title>Exam of <strong style="color: #4CAF50; text-decoration: underline;">{{subject?.name}}</strong> subject</mat-card-title>
      <mat-card-subtitle>{{exam.createdAt|date}}</mat-card-subtitle>
    </mat-card-header>
      <mat-card-content>
        <mat-list>
          <mat-divider></mat-divider>
          <mat-list-item>Date: {{exam.date|date: 'dd/MM/yyyy'}}</mat-list-item>
          <mat-divider style="width: 180px !important;"></mat-divider>
          <mat-list-item>Start: {{exam.start}}</mat-list-item>
          <mat-divider style="width: 180px !important;"></mat-divider>
          <mat-list-item>End: {{exam.end}}</mat-list-item>
          <mat-divider style="width: 180px !important;"></mat-divider>
        </mat-list>
        <p style="padding: 10px; color: #333; background: #f5f6fa;">
          {{exam.description}}
        </p>
      </mat-card-content>
      <mat-card-actions><br>
        <button mat-stroked-button color="accent" (click)="deleteExam(exam.id, subject.id)" >Delete exam</button>
        <button mat-stroked-button color="primary" (click)="updateExam(exam.id)">Update exam</button>
        <button mat-stroked-button color="primary" (click)="addNote(exam.id)">Add note</button>
      </mat-card-actions>
  </mat-card>

Add Note Components

In Add Note component we can add a new Note and update/delete

src/app/add-note-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Note }  from  '../model/Model';
 import  { NoteService }  from  '../service/note.service';
 import  { ActivatedRoute, Router }  from  '@angular/router';


@Component({
  selector: 'app-add-note',
  templateUrl: './add-note.component.html',
  styleUrls: ['./add-note.component.css']
})
export class AddNoteComponent implements OnInit {

  progressBar = false;
  note: Note = {} as Note;
  
constructor(private noteService: NoteService, private route: ActivatedRoute,
    @Inject(MAT_DIALOG_DATA) private data: any) { }

  ngOnInit(): void {
    if(this.data.idNote) {
      this.noteService.findNote(this.data.idNote).subscribe(note => {
        this.note = note;
      })
    }
  }
addNote() {
  this.progressBar = true;
  if(this.data.idNote) {
    this.noteService.editNote(this.note, this.data.idNote).subscribe(note => {
      this.note = note;
      window.location.reload();
    })
  } else {
    this.noteService.addNote(this.note, this.data.idExam).subscribe(note => {
      this.note = note;
      window.location.reload();
    })
  }
}
}

src/app/add-note-component.html




  <div style="margin: auto; width: 100%; border: 3px solid #73AD21;">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Add a new note</mat-card-title>
      </mat-card-header>
      <mat-card-content><br>
      <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
        <form>
          <mat-form-field style="width: 100%;">
            <mat-label>Score</mat-label>
            <input type="number" matInput placeholder="score" name="score"
                   [(ngModel)]="note.score" #score="ngModel" required>
          </mat-form-field> <br>
  
          <mat-form-field style="width: 100%;">
            <mat-label>Enter description</mat-label>
            <textarea matInput placeholder="Description" name="description" [(ngModel)]="note.description"
              #description="ngModel"></textarea>
          </mat-form-field><br>
  
          <button mat-raised-button color="primary"
            [disabled]="score.invalid || description.invalid"
            (click)="addNote()" style="width: 10em !important">Save</button>
        </form>
      </mat-card-content>
    </mat-card>
  </div>

Find Note Components

In Find Note component we can display inofrmation of Note and update/delete

src/app/find-note-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { Note }  from  '../model/Model';
 import  { NoteService }  from  '../service/note.service';
 import  { AddNoteComponent }  from  '../add-note/add-note.component';
 import  { ActivatedRoute, Router }  from  '@angular/router';


@Component({
  selector: 'app-find-note',
  templateUrl: './find-note.component.html',
  styleUrls: ['./find-note.component.css']
})
export class FindNoteComponent implements OnInit {

  note: Note = {} as Note;
  idNote: number;
  
 constructor(private route: ActivatedRoute, private noteService: NoteService,  private dialog: MatDialog) {
    this.route.params.subscribe(
      params => {
        this.idNote = this.route.snapshot.params.idNote;
        this.noteService.findNote(this.idNote).subscribe(note => {
          this.note = note;
        })
      }
    )
  }

  ngOnInit(): void {
  }

  deleteNote(idNote: number) {
   if(confirm('Are you sure')) {
     this.noteService.deleteNote(idNote).subscribe(() => {
      window.location.replace(`/find-school/ ${this.route.parent.snapshot.params.idSchool} /find-exams`)
     })
   }
  }
  updateNote(idNote: number) {
    this.dialog.open(AddNoteComponent, {
      data: {idNote},
      height: '300px',
      width: '400px',
    });
  }
}

src/app/find-note-component.html




  <mat-card>
    <mat-card-header>
      <mat-card-title>Note score:
        <button mat-mini-fab disabled style="color: #27ae60">
        {{note.score}}
      </button></mat-card-title>
      <mat-card-subtitle>Created at: {{note.createdAt|date}} </mat-card-subtitle>
    </mat-card-header>
      <mat-divider></mat-divider>
      <mat-card-content><br>
        <p style="padding: 10px; color: #333; background: #f5f6fa;">
          {{note.description}}
        </p>
      </mat-card-content>
      <mat-card-actions><br>
        <button mat-stroked-button color="accent" (click)="deleteNote(note.id)" >Delete note</button>
        <button mat-stroked-button color="primary" (click)="updateNote(note.id)">Update note</button>
      </mat-card-actions>
  </mat-card>

Find Room Components

In Find Room component we can display inofrmation of Room and update/delete We can elso add a new level of exists levels

src/app/find-room-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { Level, Room }  from  '../model/Model';
 import  { RoomService }  from  '../service/room.service';
 import  { AddRoomComponent }  from  '../add-room/add-room.component';
 import  { AddLevelToRoomComponent }  from  '../add-level-to-room/add-level-to-room.component';
 import  { LevelService }  from  '../service/level.service';


@Component({
  selector: 'app-find-room',
  templateUrl: './find-room.component.html',
  styleUrls: ['./find-room.component.css']
})
export class FindRoomComponent implements OnInit {

  idRoom: number;
  room: Room = {} as Room;
  level: Level = {} as Level;
  
 constructor(private route: ActivatedRoute, private roomService: RoomService, private dialog: MatDialog,
    private levelService: LevelService) {
    this.route.params.subscribe(
      params => {
        this.idRoom = this.route.snapshot.params.idRoom;
        this.roomService.findRoom(this.idRoom).subscribe(room => {
          this.room = room;
          if(this.level!=null) {
          this.levelService.findLevelForRoom(this.idRoom).subscribe(level => {
              this.level = level;
          })
         }
        });
      }
    );
  }

  ngOnInit(): void {
  }
  deleteRoom(idRoom: number) {
    if(confirm('Are you sure')) {
      this.roomService.deleteRoom(idRoom).subscribe(() => {
        window.location.replace(`/find-school/ ${this.route.parent.snapshot.params.idSchool} /find-rooms`)
      })
    }
  }
 updateRoom(idRoom: number) {
    this.dialog.open(AddRoomComponent, {
      data: { idRoom },
      height: '370px',
      width: '400px',
    });
  }
  addLevelToRoom(idRoom: number) {
    this.dialog.open(AddLevelToRoomComponent, {
      data: { idRoom },
      height: '240px',
      width: '400px',
    });
  }
  deleteLevelFromRoom(idRoom: number, idLevel: number) {
    if(confirm('Are you sure')){
      this.levelService.deleteLevelFromRoom(idRoom, idLevel).subscribe((data) => {
        window.location.reload();
       })
    }

  }
}

src/app/find-room-component.html




  <mat-card>
    <mat-card-header>
      <mat-card-title>Room: {{room.code}}</mat-card-title>
      <mat-card-title>Capacity: {{room.capacity}}</mat-card-title>
      <mat-card-subtitle>Created at: {{room.createdAt|date}} </mat-card-subtitle>
    </mat-card-header>
      <mat-divider></mat-divider>
      <mat-card-content><br>
        <mat-list>
          <h2 style="margin-left: 15px;">Levels</h2>
          <mat-list-item style="color: cadetblue;" *ngIf="level!=null">
            {{level.label}}
            <span class="material-icons" style="color: #c0392b; margin-left: 15px; cursor: pointer;" (click)="deleteLevelFromRoom(room.id, level.id)">
              close
              </span>
          </mat-list-item>
          <mat-list-item style="color: cadetblue;" *ngIf="level==null"> No level</mat-list-item>
        </mat-list>
        <p style="padding: 10px; color: #333; background: #f5f6fa;">
          {{room.description}}
        </p>
      </mat-card-content>
      <mat-card-actions><br>
        <button mat-stroked-button color="accent" (click)="deleteRoom(room.id)" >Delete room</button>
        <button mat-stroked-button color="primary" (click)="updateRoom(room.id)">Update room</button>
        <button mat-stroked-button color="primary" (click)="addLevelToRoom(room.id)" *ngIf="level==null">Add level to this room </button>
      </mat-card-actions>
  </mat-card>

Add Level To Room Components

In Add Level To Room component we can Add Level To Room Of exists levels from schooling

add-level-to-room.component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Level }  from  '../model/Model';
 import  { LevelService }  from  '../service/level.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class AddLevelToRoomComponent implements OnInit {

  progressBar = false;
  levels: Level[];
  idLevel: number;
  
constructor(private levelService: LevelService, @Inject(MAT_DIALOG_DATA) private data: any) { }

  ngOnInit(): void {
    this.levelService.findLevels().subscribe(levels => {
      this.levels = levels;
    })
  }
  onSelecLevel(e) {
   this.idLevel = e.target.value;
   this.levelService.addLevelToRoom(this.data.idRoom, this.idLevel).subscribe(() => {
     window.location.reload();
   })
  }
  cancel() {
    window.location.reload();
  }
}

add-level-to-room.component.html




  <div style="margin: auto; width: 100%; border: 3px solid #73AD21;">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Add a new course</mat-card-title>
      </mat-card-header>
      <mat-card-content><br>
      <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
        <form>
  
          <mat-form-field style="width: 100%;">
            <mat-label>Please choose a level</mat-label>
            <select matNativeControl required (change)="onSelecLevel($event)">
              <option selected disabled>Levels</option>
              <option *ngFor="let s of levels" [value]="s.id">{{s.label}}</option>
            </select>
          </mat-form-field><br>
  
          <button mat-raised-button color="accent"
            (click)="cancel()" style="width: 10em !important">Cancel</button>
        </form>
      </mat-card-content>
    </mat-card>
  </div>

Find Schooling Components

In Find Schooling component we can display information of schooling and update/delete, We can elso Add a new Level for each Schooling

src/app/find-schooling-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { Schooling }  from  '../model/Model';
 import  { SchoolingService }  from  '../service/schooling.service';
 import  { AddSchoolingComponent }  from  '../add-schooling/add-schooling.component';
 import  { ActivatedRoute, Router }  from  '@angular/router';
 import  { AddLevelComponent }  from  '../add-level/add-level.component';


@Component({
  selector: 'app-find-schooling',
  templateUrl: './find-schooling.component.html',
  styleUrls: ['./find-schooling.component.css']
})
export class FindSchoolingComponent implements OnInit {

  schooling: Schooling = {} as Schooling;
  idSchooling: number;
  
  
 constructor(private route: ActivatedRoute, private schoolingService: SchoolingService, private dialog: MatDialog,
    private router: Router) {
    this.route.params.subscribe(
      params => {
        this.idSchooling = this.route.snapshot.params.idSchooling;
        this.schoolingService.findSchooling(this.idSchooling).subscribe(schooling => {
          this.schooling = schooling;
        })
      }
    )
  }

  ngOnInit(): void {}

  deleteSchooling(idSchooling: number) {
   if(confirm('Are you sure')) {
     this.schoolingService.deleteSchooling(idSchooling).subscribe(() => {
      window.location.replace(`/find-school/ ${this.route.parent.snapshot.params.idSchool} /find-schoolings`)
     })
   }
  }

src/app/find-schooling-component.html




  <mat-card class="example-card">
    <mat-card-content>
     <h2 style="margin-left: 15px;">Year: {{schooling.year}}</h2>
     <mat-card-title>Created at: {{schooling.createdAt|date}}</mat-card-title>
      <p style="padding: 10px; color: #333; background: #f5f6fa;">
        {{schooling.description}}
      </p>
    </mat-card-content>
    <mat-card-actions><br>
      <button mat-stroked-button color="accent" (click)="deleteSchooling(schooling.id)" >Delete activity</button>
      <button mat-stroked-button color="primary" (click)="updateSchooling(schooling.id)">Update activity</button>
      <button mat-stroked-button color="primary" (click)="addLevel(schooling.id)">Add level</button>
    </mat-card-actions>
</mat-card>

Add Level Components

In Add Level component we can add a new level

src/app/add-level-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Level }  from  '../model/Model';
 import  { LevelService }  from  '../service/level.service';

@Component({
  selector: 'app-add-level',
  templateUrl: './add-level.component.html',
  styleUrls: ['./add-level.component.css']
})
export class AddLevelComponent implements OnInit {

  progressBar = false;
 level: Level = {} as Level;

  constructor( private levelService: LevelService, @Inject(MAT_DIALOG_DATA) private data: any) { }

  ngOnInit(): void {
    if(this.data.idLevel!=null) {
      this.levelService.findLevel(this.data.idLevel).subscribe(level => {
        this.level = level;
      })
    }
  }

  addLevel() {
    if(this.data.idLevel!=null) {
      this.levelService.editLevel(this.level, this.data.idLevel).subscribe(level => {
        this.level = level;
        window.location.reload();
      })
    } else {
      this.levelService.addLevel(this.level, this.data.idSchooling).subscribe(level => {
        this.level = level;
        window.location.reload();
      })
    }
  }
}

src/app/add-level-component.html




  <div style="margin: auto; width: 100%; border: 3px solid #73AD21;">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Add a new level</mat-card-title>
      </mat-card-header>
      <mat-card-content><br>
      <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
        <form>
  
          <mat-form-field style="width: 100%;">
            <input type="text" matInput name="label"
                   [(ngModel)]="level.label" #label="ngModel" required>
          </mat-form-field> <br>
  
          <mat-form-field style="width: 100%;">
            <mat-label>Enter description</mat-label>
            <textarea matInput placeholder="Description" name="description" [(ngModel)]="level.description"
              #description="ngModel"></textarea>
          </mat-form-field><br>
  
          <button mat-raised-button color="primary"
            [disabled]="description.invalid || label.invalid"
            (click)="addLevel()" style="width: 10em !important">Save</button>
        </form>
      </mat-card-content>
    </mat-card>
  </div>

Find Level Components

In Find Level component we can display information of level and update/delete, We can elso add a new course

src/app/find-level-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { Level }  from  '../model/Model';
 import  { LevelService }  from  '../service/level.service';
 import  { AddNoteComponent }  from  '../add-note/add-note.component';
 import  { ActivatedRoute, Router }  from  '@angular/router';
 import  { AddLevelComponent }  from  '../add-level/add-level.component';
 import  { AddCourseComponent }  from  '../add-course/add-course.component';

@Component({
  selector: 'app-find-level',
  templateUrl: './find-level.component.html',
  styleUrls: ['./find-level.component.css']
})
export class FindLevelComponent implements OnInit {

 level: Level = {} as Level;
 idLevel: number;
 idSchool: number;
 
 constructor(private levelService: LevelService, private route: ActivatedRoute, private dialog: MatDialog) {
    this.route.params.subscribe(
      params => {
        this.idSchool = this.route.parent.snapshot.params.idSchool;
        this.idLevel = this.route.snapshot.params.idLevel;
        this.levelService.findLevel(this.idLevel).subscribe(level => {
          this.level = level;
        })
      }
    )
   }

  ngOnInit(): void {}
  
  deleteLevel(idLevel: number) {
    if(confirm('Are you sure')) {
      this.levelService.deleteLevel(idLevel).subscribe(() => {
        window.location.replace(`/find-school/ ${this.route.parent.snapshot.params.idSchool} /find-schoolings`)
      })
    }
  }

 updateLevel(idLevel: number) {
    this.dialog.open(AddLevelComponent, {
      data: {idLevel},
      height: '300px',
      width: '400px',
    });
  }
  addCourse(idLevel: number) {
    this.dialog.open(AddCourseComponent, {
      data: {idLevel},
      height: '500px',
      width: '400px',
    });
  }
}

src/app/find-level-component.html




  <mat-card>
    <mat-card-header>
      <mat-card-title>Level: {{level.label}}</mat-card-title>
      <mat-card-subtitle>Created at: {{level.createdAt|date}} </mat-card-subtitle>
    </mat-card-header>
      <mat-divider></mat-divider>
      <mat-card-content><br>
        <p style="padding: 10px; color: #333; background: #f5f6fa;">
          {{level.description}}
        </p>
      </mat-card-content>
      <mat-card-actions><br>
        <button mat-stroked-button color="accent" (click)="deleteLevel(level.id)" >Delete level</button>
        <button mat-stroked-button color="primary" (click)="updateLevel(level.id)">Update level</button>
        <button mat-stroked-button color="primary" [routerLink]="['/find-school/' + idSchool + '/add-course/', level.id]">Add course</button>
      </mat-card-actions>
  </mat-card>

Add Course Components

In Add Course component we can add a new course

src/app/add-course-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Course, Subject }  from  '../model/Model';
 import  { CourseService }  from  '../service/course.service';
 import  { SubjectService }  from  '../service/subject.service';
 import  { ActivatedRoute, Router }  from  '@angular/router';
 import  { SchoolService }  from  '../service/school.service';

@Component({
  selector: 'app-add-course',
  templateUrl: './add-course.component.html',
  styleUrls: ['./add-course.component.css']
})
export class AddCourseComponent implements OnInit {

  progressBar = false;
  course: Course = {} as Course;
  subject: Subject = {} as Subject;
  subjects: Subject[];
  idSubject: number;
  idSchool: number;
  idCourse: number;
  idLevel: number;
  
constructor(private courseService: CourseService,
  private subjectService: SubjectService, private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.idLevel = this.route.snapshot.params.idLevel;
    this.idCourse = this.route.snapshot.params.idCourse;
    this.idSchool = this.route.parent.snapshot.params.idSchool;
    if(this.idCourse!=null) {
      this.courseService.findCourse(this.idCourse).subscribe(course => {
        this.course = course;
        this.subjectService.findSubjectForCourse(this.idCourse).subscribe(subject => {
          this.subject = subject;
        })
      })
    }
    this.subjectService.findAllSubjectsForSchool(this.idSchool).subscribe(subjects => {
      this.subjects = subjects;
    })
  }
  
 onSelecSubject(e) {
    this.idSubject = e.target.value;
 }
  onDateTime(e) {
    this.course.date = e.target.value;
  }

  addCourse() {
   this.progressBar = true;
   if(this.idCourse!=null) {
    this.courseService.editCourse(this.course, this.idCourse, this.idSubject).subscribe(course => {
      this.course = course;
      window.location.reload();
    })
  } else {
    this.courseService.addCourse(this.course, this.idLevel, this.idSubject).subscribe(course => {
      this.course = course;
      window.location.reload();
    })
  }
  }
}

src/app/add-course-component.html




  <div style="margin: auto; width: 40%; border: 3px solid #73AD21;">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Add a new course</mat-card-title>
      </mat-card-header>
      <mat-card-content><br>
      <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
        <form>
  
          <mat-form-field style="width: 100%;">
            <mat-label>Please choose a subject</mat-label>
            <select matNativeControl required (change)="onSelecSubject($event)">
              <option selected disabled>Subjects</option>
              <option *ngFor="let s of subjects" [value]="s.id" [selected]="s.name==subject.name">{{s.name}}</option>
            </select>
          </mat-form-field><br>
  
          <mat-form-field style="width: 100%;">
            <input type="date" matInput name="date" min="minDate"
                   [(ngModel)]="course.date" #date="ngModel" required (change)="onDateTime($event)">
          </mat-form-field> <br>
  
          <mat-form-field style="width: 100%;">
            <mat-label>START</mat-label>
            <input type="time" matInput placeholder="startTime" name="startTime"
                   [(ngModel)]="course.startDate" #startTime="ngModel" required>
          </mat-form-field> <br>
  
          <mat-form-field style="width: 100%;">
            <mat-label>END</mat-label>
            <input type="time" matInput placeholder="endTime" name="endTime"
                   [(ngModel)]="course.endDate" #endTime="ngModel" required>
          </mat-form-field> <br>
  
          <mat-form-field style="width: 100%;">
            <mat-label>Enter description</mat-label>
            <textarea matInput placeholder="Description" name="description" [(ngModel)]="course.description"
              #description="ngModel"></textarea>
          </mat-form-field><br>
  
          <button mat-raised-button color="primary"
            [disabled]="description.invalid || startTime.invalid  || endTime.invalid"
            (click)="addCourse()" style="width: 10em !important">Save</button>
        </form>
      </mat-card-content>
    </mat-card>
  </div>

Find Course Components

In Find Course component we can display inofrmation of Course and update/delete

src/app/find-course-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { Course, Subject }  from  '../model/Model';
 import  { CourseService }  from  '../service/course.service';
 import  { SubjectService }  from  '../service/subject.service';
 import  { ActivatedRoute, Router }  from  '@angular/router';

@Component({
  selector: 'app-find-course',
  templateUrl: './find-course.component.html',
  styleUrls: ['./find-course.component.css']
})
export class FindCourseComponent implements OnInit {

  course: Course = {} as Course;
  subject: Subject = {} as Subject;
  idCourse: number;
  idSchool: number;
  
 constructor(private route: ActivatedRoute, private courseService: CourseService, private dialog: MatDialog,
    private router: Router, private subjectService: SubjectService) {
    this.route.params.subscribe(
      params => {
        this.idSchool = this.route.parent.snapshot.params.idSchool;
        this.idCourse = this.route.snapshot.params.idCourse;
        this.courseService.findCourse(this.idCourse).subscribe(course => {
          this.course = course;
          this.subjectService.findSubjectForCourse(this.idCourse).subscribe(subject => {
            this.subject = subject;
          })
        })
      }
    )
  }

  ngOnInit(): void {}
  
  deleteCourse(idCourse: number, idSubject: number) {
    if(confirm('Are you sure')) {
      this.courseService.deleteCourse(idCourse, idSubject).subscribe(() => {
        window.location.replace(`/find-school/ ${this.route.parent.snapshot.params.idSchool} /find-schoolings`)
      })
    }
  }

}

src/app/find-course-component.html




  <mat-card class="example-card">
    <mat-card-header>
      <mat-card-title>Course of <strong style="color: #4CAF50; text-decoration: underline;">{{subject.name}}</strong> subject</mat-card-title>
      <mat-card-subtitle>{{course.createdAt|date}}</mat-card-subtitle>
    </mat-card-header>
      <mat-card-content>
        <mat-list>
          <mat-divider></mat-divider>
          <mat-list-itemDate: {{course.date|date: 'dd/MM/yyyy'}}</mat-list-item
          <mat-divider style="width: 180px !important;"></mat-divider>
          <mat-list-itemStart: {{course.startDate}}</mat-list-item
          <mat-divider style="width: 180px !important;"></mat-divider>
          <mat-list-itemEnd: {{course.endDate}}</mat-list-item
          <mat-divider style="width: 180px !important;"></mat-divider>
        </mat-list>
        <p style="padding: 10px; color: #333; background: #f5f6fa;">
          {{course.description}}
        </p>
      </mat-card-content>
      <mat-card-actions><br>
        <button mat-stroked-button color="accent" (click)="deleteCourse(course.id, subject.id)">Delete course</button>
        <button mat-stroked-button color="primary" [routerLink]="['/find-school/' + idSchool + '/edit-course/', course.id]">Update course</button>
      </mat-card-actions>
  </mat-card>

NgModules and JavaScript modules

The NgModule system is different from and unrelated to the JavaScript (ES2015) module system for managing collections of JavaScript objects. These are complementary module systems that you can use together to write your apps.

In JavaScript each file is a module and all objects defined in the file belong to that module. The module declares some objects to be public by marking them with the export key word. Other JavaScript modules use import statements to access public objects from other modules.

app-module.ts




  import { BrowserModule } form '@angular/platform-browser';
  import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } form '@angular/core';
  import { AppRoutingModule } form './app-routing.module';
  import { AppComponent } form './app.component';
  import {  NoopAnimationsModule } form '@angular/platform-browser/animations';
  import { MaterialModule } form './material-module';
  import { HomeComponent } form './home/home.component';
  import { HttpClientModule } form '@angular/common/http';
  import { FormsModule } form '@angular/forms';
  import { AddSchoolComponent } form './add-school/add-school.component';
  import { FindSchoolComponent } form './find-school/find-school.component';
  import { AddManagerComponent } form './add-manager/add-manager.component';
  import { DisplaySchoolComponent } form './display-school/display-school.component';
  import { AddActivityComponent } form './add-activity/add-activity.component';
  import { FindActivityComponent } form './find-activity/find-activity.component';
  import { FindActivitiesComponent } form './find-activities/find-activities.component';
  import { AddSchoolingComponent } form './add-schooling/add-schooling.component';
  import { FindSchoolingsComponent } form './find-schoolings/find-schoolings.component';
  import { FindSchoolingComponent } form './find-schooling/find-schooling.component';
  import { AddExamComponent } form './add-exam/add-exam.component';
  import { AddRoomComponent } form './add-room/add-room.component';
  import { FindRoomsComponent } form './find-rooms/find-rooms.component';
  import { FindRoomComponent } form './find-room/find-room.component';
  import { ColorPickerModule } form 'ngx-color-picker';
  import { AddSubjectComponent } form './add-subject/add-subject.component';
  import { FindSubjectsComponent } form './find-subjects/find-subjects.component';
  import { FindSubjectComponent } form './find-subject/find-subject.component';
  import { AddProgramComponent } form './add-program/add-program.component';
  import { FindProgramComponent } form './find-program/find-program.component';
  import { AddCoefficientComponent } form './add-coefficient/add-coefficient.component';
  import { FindCoefficientComponent } form './find-coefficient/find-coefficient.component';
  import { FindExamsComponent } form './find-exams/find-exams.component';
  import { FindExamComponent } form './find-exam/find-exam.component';
  import { AddNoteComponent } form './add-note/add-note.component';
  import { FindNoteComponent } form './find-note/find-note.component';
  import { AddLevelComponent } form './add-level/add-level.component';
  import { FindLevelComponent } form './find-level/find-level.component';
  import { AddCourseComponent } form './add-course/add-course.component';
  import { FindCourseComponent } form './find-course/find-course.component';
  import { AddLevelToRoomComponent } form './add-level-to-room/add-level-to-room.component';
  import { FindLevelToRoomComponent } form './find-level-to-room/find-level-to-room.component';
  import { DashboardComponent } form './dashboard/dashboard.component';
 
 @NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AddSchoolComponent,
    FindSchoolComponent,
    AddManagerComponent,
    DisplaySchoolComponent,
    AddActivityComponent,
    FindActivityComponent,
    FindActivitiesComponent,
    AddSchoolingComponent,
    FindSchoolingsComponent,
    FindSchoolingComponent,
    AddExamComponent,
    AddRoomComponent,
    FindRoomsComponent,
    FindRoomComponent,
    AddSubjectComponent,
    FindSubjectsComponent,
    FindSubjectComponent,
    AddProgramComponent,
    FindProgramComponent,
    AddCoefficientComponent,
    FindCoefficientComponent,
    FindExamsComponent,
    FindExamComponent,
    AddNoteComponent,
    FindNoteComponent,
    AddLevelComponent,
    FindLevelComponent,
    AddCourseComponent,
    FindCourseComponent,
    AddLevelToRoomComponent,
    FindLevelToRoomComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    NoopAnimationsModule,
    MaterialModule,
    AppRoutingModule,
    ColorPickerModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ]
})
export class AppModule { }

Conclusion

Now we have an overview of Angular 10 + Spring Boot CRUD example when building a CRUD App.

We also take a look at client-server architecture for REST API using Spring Web MVC & Spring Data JPA, as well as Angular 10 project structure for building a front-end app to make HTTP requests and consume responses.

Building application School with Spring boot and Angular Part 1

Download This Application My School From Github

Building management school with Spring boot & Angular Pt 3

2022-01-18T03:45:00.018-08:00

Getting Started | Building an Application with Angular

Angular 10 Front-end

In this tutorial We will build an application School To display the database Add, update or delete.

Technology

Angular 10

Angular HTTPClient

Angular Router

Angular CLI version (10.1.1)

ng new

The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!

ng generate

Generate components, routes, services and pipes with a simple command. The CLI will also create simple test shells for all of these.

ng serve

Easily test your app locally while developing.


$  npm install -g @angular/cli

$  ng new school

$  cd school

$  ng serve

Project Structure

Font Awesome

Font Awesome is a font and icon toolkit based on CSS and Less. It was made by Dave Gandy for use with Bootstrap, and later was incorporated into the BootstrapCDN. Font Awesome has a 38% market share among those websites that use third-party font scripts on their platform, ranking it second place after Google Fonts.

Add this link in index.html to use Font Awesome




 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

Angular Material Tutorial

The idea of this is article is to teach you how to use Angular Material through a hands-on exercise. First, you will check the dependencies that you need on your computer to use and develop with Angular Material, then you will learn how to configure and use different components.

Install Angular Material

Angular Material In addition to the install schematic, Angular Material comes with several schematics (like nav, table, address-form, etc.) that can be used to easily generate pre-built components in your application.


$  ng add @angular/material

MaterialModule

In earlier versions of Angular Material, we could import MaterialModule which imports all components from Angular Material and makes them available in our app. Most of the time we will need to import the most of material.

src/app/material-module.ts



import { NgModule } from '@angular/core';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';

@NgModule({
  exports: [
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
  ],
  imports: [
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
  ]
})
export class MaterialModule { }

Modals interfaces

The purpose of this class is to map the specified fields with the fields of Spring entity class.

Angular NgModules differ from and complement JavaScript (ES2015) modules. An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. An NgModule can associate its components with related code, such as services, to form functional units.

Every Angular app has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.

src/app/modal/Modal.ts



    
    export interface PersistableElement {
      id: number ;
      createdAt: any;
      description: string;
    }
    export interface Activity extends PersistableElement {
      type: string;
      day: string;
      endDate: string;
      startDate: string;
      date: string;
    }
    export interface Coefficient extends PersistableElement {
      grade: number ;
    }
    export interface Exam extends PersistableElement {
      date: string;
      start: string;
      end: string;
    }
    export interface Manager extends PersistableElement {
      id: number ;
      firstName: string;
      lastName: string;
    }
    export interface Subject extends PersistableElement {
      name: string;
      color: string;
      programs: Program[];
      coefficients: Coefficient[];
    }
    export interface Note extends PersistableElement {
      score: number ;
    }
    export interface Program extends PersistableElement {
      name: string;
    }
    export interface Room extends PersistableElement {
      code: string;
      capacity: number ;
      levels: Level[];
    }
    export interface School extends PersistableElement {
      name: string;
      city: string;
      department: string;
      open: string;
      close: string;
    }
    export interface Schooling extends PersistableElement {
      year: number ;
    }
    
    export interface Level extends PersistableElement  {
      label: string;
      courses: Course[];
    }
    
    export interface Course extends PersistableElement {
      date: string;
      endDate: string;
      startDate: string;
    }

Angular Services

Angular services are singleton objects that get instantiated only once during the lifetime of an application. They contain methods that maintain data throughout the life of an application, i.e. data does not get refreshed and is available all the time. The main objective of a service is to organize and share business logic, models, or data and functions with different components of an Angular application.

An example of when to use services would be to transfer data from one controller to another custom service.

Why Should We Use Services in Angular? The separation of concerns is the main reason why Angular services came into existence. An Angular service is a stateless object and provides some very useful functions. These functions can be invoked from any component of Angular, like Controllers, Directives, etc. This helps in dividing the web application into small, different logical units which can be reused.

Create Data services

This service will use Angular HTTPClient to send HTTP requests. You can see that its functions includes CRUD operations and finder method

Create these services in the service package

-> activity.service.ts

-> coefficient.service.ts

-> course.service.ts

-> exam.service.ts

-> level.service.ts

-> manager.service.ts

-> note.service.ts

-> program.service.ts

-> room.service.ts

-> school.service.ts

-> schooling.service.ts

-> subject.service.ts

-> tree-application.service.ts

src/app/service/activity.service.ts




import { Injectable } form '@angular/core';
import { Observable } form 'rxjs';
import  { HttpClient }  form  '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ActivityService {
  constructor(private http: HttpClient) { }

  addActivity(data: any, id: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addActivity/${id}`, data);
  }
  editActivity(data: any, id: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editActivity/${id}`, data);
  }
  findActivity(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findActivity/${id}`);
  }
  deleteActivity(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteActivity/${id}`);
  }
  findActivitiesForSchool(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findActivitiesForSchool/${id}`);
  }
}

src/app/service/coefficient.service.ts




import { Injectable } form '@angular/core';
import { Observable } form 'rxjs';
import  { HttpClient }  form  '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class CoefficientService {
  constructor(private http: HttpClient) { }

  addCoefficient(data: any, id: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addCoefficient/${id}`, data);
  }
  editCoefficient(data: any, id: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editCoefficient/${id}`, data);
  }
  findCoefficient(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findCoefficient/${id}`);
  }
  deleteCoefficient(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteCoefficient/${id}`);
  }

}

src/app/service/course.service.ts




import { Injectable } form '@angular/core';
import { Observable } form 'rxjs';
import  { HttpClient }  form  '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class CourseService {
  constructor(private http: HttpClient) { }

  addCourse(data: any, idLevel: number, idSubject: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addCourse/${idLevel}/${idSubject}`, data);
  }
  editCourse(data: any, idCourse: number, idSubject: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editCourse/${idCourse}/${idSubject}`, data);
  }
  findCourse(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findCourse/${id}`);
  }
  deleteCourse(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteCourse/${id}`);
  }

}

src/app/service/exam.service.ts




import { Injectable } form '@angular/core';
import { Observable } form 'rxjs';
import  { HttpClient }  form  '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ExamService {
  constructor(private http: HttpClient) { }

  addExam(data: any, idSchool: number, idSubject: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addExam/${idSchool}/${idSubject}`, data);
  }
  editExam(data: any, idCourse: number, idSubject: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editExam/${idCourse}/${idSubject}`, data);
  }
  findExam(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findExam/${id}`);
  }
  deleteExam(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteExam/${id}`);
  }
  findExamsForSchool(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findExamsForSchool/${id}`);
  }
}

src/app/service/exam.service.ts




import { Injectable } form '@angular/core';
import { Observable } form 'rxjs';
import  { HttpClient }  form  '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class LevelService {
  constructor(private http: HttpClient) { }

  addLevel(data: any, id: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addLevel/${id}`, data);
  }
  editLevel(data: any, id: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editLevel/${id}`, data);
  }
  findLevel(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findLevel/${id}`);
  }
  deleteLevel(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteLevel/${id}`);
  }
  addLevelToRoom(idRoom: number, idLevel: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addLevelToRoom/${idRoom}/${idLevel}`);
  }
    findLevelForRoom(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findLevelForRoom/${id}`);
  }
 findLevels(): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findLevels`);
  }
 deleteLevelFromRoom(idRoom: number, idLevel: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteLevelFromRoom/${idRoom}/${idLevel}`);
  }
}

src/app/service/manager.service.ts




import { Injectable } form '@angular/core';
import { Observable } form 'rxjs';
import  { HttpClient }  form  '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ManagerService {
  constructor(private http: HttpClient) { }

  addManager(data: any, id: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addManager/${id}`, data);
  }
  editManager(data: any, id: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editManager/${id}`, data);
  }
  deleteManager(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteManager/${id}`);
  }
  findManager(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findManager/${id}`);
  }
  findManagerForSchool(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findManagerForSchool/${id}`);
  }
}

src/app/service/note.service.ts




import { Injectable } form '@angular/core';
import { Observable } form 'rxjs';
import  { HttpClient }  form  '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class NoteService {
  constructor(private http: HttpClient) { }

  addNote((data: any, id: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addNote/${id}`, data);
  }
  editNote(data: any, id: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editNote/${id}`, data);
  }
  findNote(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findNote/${id}`);
  }
  deleteNote(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteNote/${id}`);
  }

}

src/app/service/program.service.ts




import { Injectable } form '@angular/core';
import { Observable } form 'rxjs';
import  { HttpClient }  form  '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ProgramService {
  constructor(private http: HttpClient) { }

  addProgram((data: any, id: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addProgram/${id}`, data);
  }
  editProgram(data: any, id: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editProgram/${id}`, data);
  }
  findProgram(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findProgram/${id}`);
  }
  deleteProgram(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteProgram/${id}`);
  }

}

src/app/service/room.service.ts




import { Injectable } form '@angular/core';
import { Observable } form 'rxjs';
import  { HttpClient }  form  '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class RoomService {
  constructor(private http: HttpClient) { }

  addRoom((data: any, id: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addRoom/${id}`, data);
  }
  editRoom(data: any, id: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editRoom/${id}`, data);
  }
  findRoom(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findRoom/${id}`);
  }
  deleteRoom(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteRoom/${id}`);
  }
  findRoomsForSchool(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findRoomsForSchool/${id}`);
  }
}

src/app/service/school.service.ts




import { Injectable } form '@angular/core';
import { Observable } form 'rxjs';
import  { HttpClient }  form  '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class SchoolService {
  constructor(private http: HttpClient) { }

  addSchool((data: any): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addSchool`, data);
  }
  editSchool(data: any, id: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editSchool/${id}`, data);
  }
  findSchool(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findSchool/${id}`);
  }
  deleteSchool(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteSchool/${id}`);
  }

  findSchools(): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findSchools`);
  }
}

src/app/service/schooling.service.ts




import { Injectable } form '@angular/core';
import { Observable } form 'rxjs';
import  { HttpClient }  form  '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class SchoolingService {
  constructor(private http: HttpClient) { }

  addSchooling((data: any, id: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addSchooling/${id}`, data);
  }
  editSchooling(data: any, id: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editSchooling/${id}`, data);
  }
  findSchooling(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findSchooling/${id}`);
  }
  deleteSchooling(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteSchooling/${id}`);
  }

  findSchoolingsForSchool(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findSchoolingsForSchool/${id}`);
  }
}

src/app/service/subject.service.ts




import { Injectable } form '@angular/core';
import { Observable } form 'rxjs';
import  { HttpClient }  form  '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class SubjectService {
  constructor(private http: HttpClient) { }

  addSubject((data: any, id: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addSubject/${id}`, data);
  }
  editSubject(data: any, id: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editSubject/${id}`, data);
  }
  findSubject(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findSubject/${id}`);
  }
  deleteSubject(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteSubject/${id}`);
  }
  findAllSubjectsForSchool(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findAllSubjectsForSchool/${id}`);
  }
  findSubjectForExam(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findSubjectForExam/${id}`);
  }
  findSubjectForCourse(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findSubjectForCourse/${id}`);
  }
  findSubjectsForSchool(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findSubjectsForSchool/${id}`);
  }
}

Flat tree

The mat-tree provides a Material Design styled tree that can be used to display hierarchy data.
This tree builds on the foundation of the CDK tree and uses a similar interface for its data source input and template, except that its element and attribute selectors will be prefixed with mat- instead of cdk-.
There are two types of trees: Flat tree and nested tree. The DOM structures are different for these two types of trees.

In a flat tree, the hierarchy is flattened; nodes are not rendered inside of each other, but instead are rendered as siblings in sequence. An instance of TreeFlattener is used to generate the flat list of items from hierarchical data. The "level" of each tree node is read through the getLevel method of the TreeControl; this level can be used to style the node such that it is indented to the appropriate level.

src/app/service/tree-application.service.ts




import { Injectable } form '@angular/core' ;
import { ActivatedRoute } form '@angular/router' ;
import { BehaviorSubject, Observable } form 'rxjs' ;
import { School } form '../modal/Modal' ;
import { SchoolService } form './school.service' ;

export class NodeAction {
  linkActive: string;
  url: string;
  title: string;
}
export class ApplicationItemNode {
  children: ApplicationItemNode[] = [];
  name: string;
  id: number;
  clazz: string;
  actions: NodeAction[] = [];
  title: string;
  routerLink: any;
}
export class ApplicationItemFlatNode {
  id: number;
  item: string;
  clazz: string;
  level: number;
  name: string;
  expandable: boolean;
  actions: NodeAction[] = [];
  title: string;
  routerLink: any;
}

@Injectable({
  providedIn: 'root'
})
export class TreeApplicationService {
  idSchool: any;
  applicationData = new BehaviorSubject<ApplicationItemNode[]>([]);
  applicationState = new BehaviorSubject<School>({} as School);

  constructor(private route: ActivatedRoute, private schoolService: SchoolService) {
    this.initialize();
  }

  initialize() {
   this.idSchool = this.route.snapshot.params.idSchool;
    this.applicationState.subscribe(() => {
      this.buildFileTree(0).subscribe(value => {
        this.applicationData.next(value);
      });
    });
    this.buildFileTree(0).subscribe(value => {
      this.applicationData.next(value);
    });
  }
  get data(): ApplicationItemNode[] {
    return this.applicationData.value;
  }

  buildFileTree(level: number): Observable<ApplicationItemNode[]>  {
    const nodes: ApplicationItemNode[] = [];
    return new Observable((observer) => {
      return this.schoolService.findSchool(this.idSchool).subscribe(school => {

        const activityRoot = new ApplicationItemNode();
        activityRoot.name = 'Activities';
        activityRoot.title = 'More details';
        activityRoot.clazz = 'fas fa-swimmer';
        activityRoot.routerLink = '/find-school/' + school.id + '/find-activities';
        nodes.push(activityRoot);

        if(school.activities.length > 0) {
          school.activities.forEach((activity) => {
            const activityNodeRoot = new ApplicationItemNode();
            activityNodeRoot.name = 'Activity ' + activity.type;
            activityNodeRoot.title = 'Level details';
            activityNodeRoot.clazz = 'fas fa-swimmer';
            activityNodeRoot.routerLink = '/find-school/' + school.id +  '/find-activity/' + activity.id;
            activityRoot.children.push(activityNodeRoot);
          });
        }
        const SubjectRoot = new ApplicationItemNode();
        SubjectRoot.name = 'Subjects';
        SubjectRoot.title = 'More details';
        SubjectRoot.clazz = 'far fa-copy';
        SubjectRoot.routerLink = '/find-school/' + school.id + '/find-subjects';
        nodes.push(SubjectRoot);

        if (school.subjects.length > 0 && Array.isArray(school.subjects)) {
              school.subjects.forEach((subject) => {
              const subjectNodeRoot = new ApplicationItemNode();
              subjectNodeRoot.name = subject.name;
              subjectNodeRoot.title = 'Parent details';
              subjectNodeRoot.clazz = 'far fa-copy';
              subjectNodeRoot.routerLink = '/find-school/' + school.id + '/find-subject/' + subject.id;
              SubjectRoot.children.push(subjectNodeRoot);

              if(subject.programs.length > 0) {
                subject.programs.forEach((program) => {
                    const programNodeRoot = new ApplicationItemNode();
                    programNodeRoot.name = program.name;
                    programNodeRoot.clazz = 'fas fa-project-diagram';
                    programNodeRoot.routerLink  = '/find-school/' + school.id + '/find-program/' + program.id;
                    subjectNodeRoot.children.push(programNodeRoot);

                    if(program.coefficients.length > 0) {
                      program.coefficients.forEach((coefficient) => {
                        const coefficientNodeRoot = new ApplicationItemNode();
                        coefficientNodeRoot.name = 'Coefficient = (' + coefficient.grade + ')';
                        coefficientNodeRoot.clazz = 'fas fa-not-equal';
                        coefficientNodeRoot.routerLink  = '/find-school/' + school.id + '/find-coefficient/' + coefficient.id;
                        programNodeRoot.children.push(coefficientNodeRoot);
                      });
                    }
                  });
                }
            });
          }
          const examRoot = new ApplicationItemNode();
          examRoot.name = 'Exams';
          examRoot.title = 'More details';
          examRoot.clazz = 'fas fa-book-open';
          examRoot.routerLink = '/find-school/' + school.id + '/find-exams';
          nodes.push(examRoot);

          if(school.exams.length > 0) {
            school.exams.forEach((exam) => {
              const examNodeRoot = new ApplicationItemNode();
              examNodeRoot.name = 'Date: ' + exam.date;
              examNodeRoot.title = 'Level details';
              examNodeRoot.clazz = 'fas fa-book-open';
              examNodeRoot.routerLink = '/find-school/' + school.id + '/find-exam/' + exam.id;
              examRoot.children.push(examNodeRoot);

              if(exam.notes.length > 0) {
                  exam.notes.forEach((note, index) => {
                  const noteNodeRoot = new ApplicationItemNode();
                  const noteLength = index + 1;
                  noteNodeRoot.name = 'Note ' + noteLength;
                  noteNodeRoot.clazz = 'fas fa-book';
                  noteNodeRoot.routerLink  = '/find-school/' + school.id + '/find-note/' + note.id;
                  examNodeRoot.children.push(noteNodeRoot);
                });
              }

            });
          }
        const roomRoot = new ApplicationItemNode();
        roomRoot.name = 'Rooms';
        roomRoot.title = 'More details';
        roomRoot.clazz = 'fas fa-university';
        roomRoot.routerLink = '/find-school/' + school.id + '/find-rooms';
        nodes.push(roomRoot);

        if(school.rooms.length > 0) {
          school.rooms.forEach((room) => {
            const roomNodeRoot = new ApplicationItemNode();
            roomNodeRoot.name = 'Room ' + room.code;
            roomNodeRoot.title = 'Level details';
            roomNodeRoot.clazz = 'fas fa-university';
            roomNodeRoot.routerLink = '/find-school/' + school.id + '/find-room/' + room.id;
            roomRoot.children.push(roomNodeRoot);
          });
        }

        const yearRoot = new ApplicationItemNode();
        yearRoot.name = 'Schoolings';
        yearRoot.title = 'More details';
        yearRoot.clazz = 'fas fa-calendar-alt';
        yearRoot.routerLink = '/find-school/' + school.id + '/find-schoolings';
        nodes.push(yearRoot);

        if(school.schoolings.length > 0) {
          school.schoolings.forEach((schooling) => {
            const schoolingNodeRoot = new ApplicationItemNode();
            schoolingNodeRoot.name = 'Year ' + schooling.year;
            schoolingNodeRoot.title = 'Year details';
            schoolingNodeRoot.clazz = 'fas fa-calendar-alt';
            schoolingNodeRoot.routerLink = '/find-school/' + school.id + '/find-schoolling/' + schooling.id;
            yearRoot.children.push(schoolingNodeRoot);

            if (schooling.levels.length > 0) {
              schooling.levels.forEach((level) => {
                const levelNodeRoot = new ApplicationItemNode();
                levelNodeRoot.name = level.label;
                levelNodeRoot.title = 'More details';
                levelNodeRoot.clazz = 'fas fa-swatchbook';
                levelNodeRoot.routerLink = '/find-school/' + school.id + '/find-level/' + level.id;
                schoolingNodeRoot.children.push(levelNodeRoot);

                if(level.courses.length > 0) {
                  level.courses.forEach((course, index) => {
                      const courseNodeRoot = new ApplicationItemNode();
                      const courseLength = index + 1;
                      courseNodeRoot.name = 'Course: ' + courseLength;
                      courseNodeRoot.title = 'More details';
                      courseNodeRoot.clazz = 'fas fa-atlas';
                      courseNodeRoot.routerLink = '/find-school/' + school.id +  '/find-course/' + course.id;
                      levelNodeRoot.children.push(courseNodeRoot);

                  });
                }
              });
            }
          });
        }

        observer.next(nodes);
      })
    });
  }
}

Components

The @Component decorator identifies the class immediately below it as a component class, and specifies its metadata. In the example code below, you can see that Component is just a class, with no special Angular notation or syntax at all. It's not a component until you mark it as one with the @Component decorator.

The metadata for a component tells Angular where to get the major building blocks that it needs to create and present the component and its view. In particular, it associates a template with the component, either directly with inline code, or by reference. Together, the component and its template describe a view.

In addition to containing or pointing to the template, the @Component metadata configures, for example, how the component can be referenced in HTML and what services it requires.

- app.component.html

The above files were created by default when we created new project using the angular-cli command.

We need to create these components




     ng generate component add-activity
     ng generate component add-coefficient
     ng generate component add-course
     ng generate component add-exam
     ng generate component add-level-to-room
     ng generate component add-level
     ng generate component add-manager
     ng generate component add-note
     ng generate component add-program
     ng generate component add-room
     ng generate component add-school
     ng generate component add-schooling
     ng generate component add-subject
     ng generate component dashboard
     ng generate component display-school
     ng generate component find-activities
     ng generate component find-activity
     ng generate component find-coefficient
     ng generate component find-course
     ng generate component find-exam
     ng generate component find-exams
     ng generate component find-level-to-room
     ng generate component find-level
     ng generate component find-note
     ng generate component find-program
     ng generate component find-room
     ng generate component find-rooms
     ng generate component find-school
     ng generate component find-schooling
     ng generate component find-schoolings
     ng generate component find-subject
     ng generate component find-subjects
     ng generate component home

Add the AppRoutingModule

In Angular, the best practice is to load and configure the router in a separate, top-level module that is dedicated to routing and imported by the root AppModule.

By convention, the module class name is AppRoutingModule and it belongs in the app-routing.module.ts in the src/app folder.

app-routing-module.ts

src/app/app-routing.module.ts




    import { NgModule } form '@angular/core';
    import { Routes, RouterModule } form '@angular/router';
    import { HomeComponent } form './home/home.component';
    import { FindSchoolComponent } form './find-school/find-school.component';
    import { DisplaySchoolComponent } form './display-school/display-school.component';
    import { FindActivityComponent } form './find-activity/find-activity.component';
    import { FindActivitiesComponent } form './find-activities/find-activities.component';
    import { FindSchoolingsComponent } form './find-schoolings/find-schoolings.component';
    import { FindSchoolingComponent } form './find-schooling/find-schooling.component';
    import { FindRoomsComponent } form './find-rooms/find-rooms.component';
    import { FindRoomComponent } form './find-room/find-room.component';
    import { FindSubjectsComponent } form './find-subjects/find-subjects.component';
    import { FindSubjectComponent } form './find-subject/find-subject.component';
    import { FindProgramComponent } form './find-program/find-program.component';
    import { FindCoefficientComponent } form './find-coefficient/find-coefficient.component';
    import { FindExamsComponent } form './find-exams/find-exams.component';
    import { FindExamComponent } form './find-exam/find-exam.component';
    import { FindNoteComponent } form './find-note/find-note.component';
    import { FindLevelComponent } form './find-level/find-level.component';
    import { AddCourseComponent } form './add-course/add-course.component';
    import { FindCourseComponent } form './find-course/find-course.component';
    import { DashboardComponent } form './dashboard/dashboard.component';
    
const routes: Routes = [
    { path: '', redirectTo:  '/home', pathMatch:  'full' },
    {
      path:  'home',
      component: HomeComponent
    },
    {
      path:  'find-school/:idSchool',
      component: FindSchoolComponent,
      children: [
        {
          path:  '',
          component: DashboardComponent
        },
        {
          path:  'display-school/:idSchool',
          component: DisplaySchoolComponent
        },
        {
          path:  'find-activities',
          component: FindActivitiesComponent
        },
        {
          path:  'find-activity/:idActivity',
          component: FindActivityComponent
        },
        {
          path:  'find-schoolings',
          component: FindSchoolingsComponent
        },
        {
          path:  'find-schoolling/:idSchooling',
          component: FindSchoolingComponent
        },
        {
          path:  'find-rooms',
          component: FindRoomsComponent
        },
        {
          path:  'find-room/:idRoom',
          component: FindRoomComponent
        },
        {
          path:  'find-subjects',
          component: FindSubjectsComponent
        },
        {
          path:  'find-subject/:idSubject',
          component: FindSubjectComponent
        },
        {
          path:  'find-program/:idProgram',
          component: FindProgramComponent
        },
        {
          path:  'find-coefficient/:idCoefficient',
          component: FindCoefficientComponent
        },
        {
          path:  'find-exams',
          component: FindExamsComponent
        },
        {
          path:  'find-exam/:idExam',
          component: FindExamComponent
        },
        {
          path:  'find-note/:idNote',
          component: FindNoteComponent
        },
        {
          path:  'find-level/:idLevel',
          component: FindLevelComponent
        },
        {
          path:  'add-course/:idLevel',
          component: AddCourseComponent
        },
        {
          path:  'edit-course/:idCourse',
          component: AddCourseComponent
        },
        {
          path:  'find-course/:idCourse',
          component: FindCourseComponent
        }
      ]
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }

src/app/app.component.html




<style>
  body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }

  .topnav {
    overflow: hidden;
    background-color: #333;
  }

  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  .topnav a.active {
    background-color: #4CAF50;
    color: white;
  }
  </style>
<div class="topnav">
  <a class="active" href="/home">Home</;a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
>/div>

<router-outlet>>/router-outlet>

src/app/home-component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { AddSchoolComponent }  from  '../add-school/add-school.component';
 import  { School }  from  '../modal/Modal';
 import  { SchoolService }  from  '../service/school.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  schools: School[];

  constructor(private dialog: MatDialog, private schoolService: SchoolService) { }

  ngOnInit(): void {
    this.schoolService.findSchools().subscribe((schools) => {
      this.schools = schools;
    });
  }
  addSchool() {
    const id = null;
    this.dialog.open(AddSchoolComponent, {
      data: {id},
      height: '580px',
      width: '400px',
    });
  }
}

Home Components

In home commnent we will display all school and add a new school

src/app/home-component.html




    <div style="width: 30%; float:left">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Find all schools </mat-card-title>
      </mat-card-header><hr>
      <mat-card-content>
        <mat-list *ngFor="let school of schools">
          <mat-list-item>
            <mat-icon mat-list-icon>school</mat-icon>
            <div mat-line style="cursor: pointer; color: #73AD21;" [routerLink]="['/find-school/', school.id]">{{school.name}}</div>
            <div mat-line style="color: #99a1a8;"> {{school.createdAt|date}} </div>
          </mat-list-item>
          <mat-divider></mat-divider>
        </mat-list>
        <h4 style="color: rgba(117, 114, 114, 0.87); margin-top: 240px; background: #f2f2f2; padding: 5px 10px;">All copy right reserved by issamdrmas</h4>
      </mat-card-content>
    </mat-card>
  </div>
  
  <div style="width: 70%; float:right">
    <div style="margin: auto; width: 50%; border: 3px solid #73AD21; padding: 10px; margin-top: 40px;">
      <mat-card>
        <mat-card-header>
          <mat-card-title>Welcome to gestion school</mat-card-title>
        </mat-card-header><hr>
        <mat-card-content>
          <i class="fas fa-school" style="font-size: 200px; margin-left: 130px;"></i>
        </mat-card-content><hr>
        <mat-card-actions>
          <button mat-raised-button color="warn" (click)="addSchool()">Add a new school</button>
        </mat-card-actions>
      </mat-card>
    </div>
  </div>

Dashboard Components

In dashboard commnent we will display the length of school, activity, subject, exam, room and schooling

src/app/dashboard-component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { SchoolService }  from  '../service/school.service';
 import  { ActivityService }  from  '../service/activity.service';
 import  { ActivatedRoute }  from  '@angular/router';
 import  { SubjectService }  from  '../service/subject.service';
 import  { ExamService }  from  '../service/exam.service';
 import  { RoomService }  from  '../service/room.service';
 import  { SchoolingService }  from  '../service/schooling.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

   schoolLength = 0;
   activityLength = 0;
   subjectLength = 0;
   examsLength = 0;
   roomLength = 0;
   schoolingLength = 0;

  constructor(private schoolService: SchoolService, private activityService: ActivityService,
    private route: ActivatedRoute, private subjectService: SubjectService, private examService: ExamService,
    private roomService: RoomService, private schoolingService: SchoolingService) { }
    
  ngOnInit(): void {
    const id = this.route.parent.snapshot.params.idSchool;

    this.schoolService.findSchools().subscribe(schools => {
      this.schoolLength = schools.length;
    })
    this.activityService.findActivitiesForSchool(id).subscribe(activities => {
      this.activityLength = activities.length;
    })
    this.subjectService.findAllSubjectsForSchool(id).subscribe(subjects => {
      this.subjectLength = subjects.length;
    })
    this.examService.findExamsForSchool(id).subscribe(exams => {
      this.examsLength = exams.length;
    })
    this.roomService.findRoomsForSchool(id).subscribe(rooms => {
      this.roomLength = rooms.length;
    })
    this.schoolingService.findSchoolingsForSchool(id).subscribe(schoolings => {
      this.schoolingLength = schoolings.length;
    })
  }

}

src/app/dashboard-component.ts




    <div id="container">
    <div id="left">
      <mat-card style="background-color: #9b59b6">
        <mat-card-header>
          <mat-card-title *ngIf="schoolLength>0">
            <button mat-mini-fab disabled style="color: #ecf0f1">
              {{schoolLength}}
            </button>
          </mat-card-title>
          <mat-card-title *ngIf="schoolLength==0">
            <button mat-mini-fab disabled style="color: #ecf0f1">
              0
            </button>
          </mat-card-title>
          <mat-card-subtitle style="font-weight: bold">Schools</mat-card-subtitle>
          <mat-card-subtitle style="margin-top: -14px;">Total schools</mat-card-subtitle>
        </mat-card-header>
        <mat-divider></mat-divider>
        <mat-card-actions>
          <i class="fas fa-school"></i>
        </mat-card-actions>
      </mat-card>
    </div>
    <div id="center">
      <mat-card style="background-color: #3498db">
        <mat-card-header>
          <mat-card-title *ngIf="activityLength>0">
            <button mat-mini-fab disabled style="color: #ecf0f1">
              {{activityLength}}
            </button>
          </mat-card-title>
          <mat-card-title *ngIf="activityLength==0">
            <button mat-mini-fab disabled style="color: #ecf0f1">
              0
            </button>
          </mat-card-title>
          <mat-card-subtitle style="font-weight: bold">Activities</mat-card-subtitle>
          <mat-card-subtitle style="margin-top: -14px;">Total activities</mat-card-subtitle>
        </mat-card-header>
        <mat-divider></mat-divider>
        <mat-card-actions>
          <i class="fas fa-swimmer"></i>
        </mat-card-actions>
      </mat-card>
    </div>
    <div id="right">
      <mat-card style="background-color: #e67e22">
        <mat-card-header>
          <mat-card-title *ngIf="subjectLength>0">
            <button mat-mini-fab disabled style="color: #ecf0f1">
              {{subjectLength}}
            </button>
          </mat-card-title>
          <mat-card-title *ngIf="subjectLength==0">
            <button mat-mini-fab disabled style="color: #ecf0f1">
              0
            </button>
          </mat-card-title>
          <mat-card-subtitle style="font-weight: bold">Subjects</mat-card-subtitle>
          <mat-card-subtitle style="margin-top: -14px;">Total subjects</mat-card-subtitle>
        </mat-card-header>
        <mat-divider></mat-divider>
        <mat-card-actions>
          <i class="far fa-copy"></i>
        </mat-card-actions>
      </mat-card>
    </div>
  </div>     
  
  <div id="container">
    <div id="left" style="margin-top: 20px !important;">
      <mat-card style="background-color: #16a085">
        <mat-card-header>
          <mat-card-title *ngIf="examsLength>0">
            <button mat-mini-fab disabled style="color: #ecf0f1">
              {{examsLength}}
            </button>
          </mat-card-title>
          <mat-card-title *ngIf="examsLength==0">
            <button mat-mini-fab disabled style="color: #ecf0f1">
              0
            </button>
          </mat-card-title>
          <mat-card-subtitle style="font-weight: bold">Exams</mat-card-subtitle>
          <mat-card-subtitle style="margin-top: -14px;">Total exams</mat-card-subtitle>
        </mat-card-header>
        <mat-divider></mat-divider>
        <mat-card-actions>
          <i class="fas fa-book-open"></i>
        </mat-card-actions>
      </mat-card>
    </div>
    <div id="center" style="margin-top: 20px !important;">
      <mat-card style="background-color: #c0392b">
        <mat-card-header>
          <mat-card-title *ngIf="roomLength>0">
            <button mat-mini-fab disabled style="color: #ecf0f1">
              {{roomLength}}
            </button>
          </mat-card-title>
          <mat-card-title *ngIf="roomLength==0">
            <button mat-mini-fab disabled style="color: #ecf0f1">
              0
            </button>
          </mat-card-title>
          <mat-card-subtitle style="font-weight: bold">Rooms</mat-card-subtitle>
          <mat-card-subtitle style="margin-top: -14px;">Total rooms</mat-card-subtitle>
        </mat-card-header>
        <mat-divider></mat-divider>
        <mat-card-actions>
          <i class="far fa-hospital"></i>
        </mat-card-actions>
      </mat-card>
    </div>
    <div id="right" style="margin-top: 20px !important;">
      <mat-card style="background-color: #7f8c8d">
        <mat-card-header>
          <mat-card-title *ngIf="schoolingLength>0">
            <button mat-mini-fab disabled style="color: #ecf0f1">
              {{schoolingLength}}
            </button>
          </mat-card-title>
          <mat-card-title *ngIf="schoolingLength==0">
            <button mat-mini-fab disabled style="color: #ecf0f1">
              0
            </button>
          </mat-card-title>
          <mat-card-subtitle style="font-weight: bold">Schoolings</mat-card-subtitle>
          <mat-card-subtitle style="margin-top: -14px;">Total schoolings</mat-card-subtitle>
        </mat-card-header>
        <mat-divider></mat-divider>
        <mat-card-actions>
          <i class="fas fa-calendar-alt"></i>
        </mat-card-actions>
      </mat-card>
    </div>
  </div>

src/app/dashboard-component.css




#container
{
    width:100%;
}

#left, #center, #right
{
    width:32%;
    float:left;
    text-align:center;
}
#center
{
  overflow:hidden;
  margin: 0 1%;

}
mat-card-title,
mat-card-subtitle {
  padding-left: 80px;
  color: #ecf0f1;
}
#container i {
  font-size: 40px;
  color: #ecf0f1;
}

Find Activities Components

In find activities commnent we can display all activities

src/app/school/find-activities.component.html




    <mat-card class="example-card">
        <mat-card-content style="margin: 16px;">
          <img mat-card-image src="https://blogsimages.adobe.com/creative/files/2019/06/Fotolia_224946995_M-1.jpg"
               alt="photo">
        </mat-card-content>
      </mat-card>

Find school Components

In find school commnent We can display all information in tree like list

src/app/find-school.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { ActivatedRoute }  from  '@angular/router';
 import  { School }  from  '../model/Model';
 import  { SchoolService }  from  '../service/school.service';
 import  { FlatTreeControl }  from  '@angular/cdk/tree';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { MatTreeFlattener, MatTreeFlatDataSource }  from  '@angular/material/tree';
 import  { AddSchoolComponent }  from  '../add-school/add-school.component';
 import  { ApplicationItemFlatNode, ApplicationItemNode, TreeApplicationService }  from  '../service/tree-application.service';


@Component({
  selector: 'app-find-school',
  templateUrl: './find-school.component.html',
  styleUrls: ['./find-school.component.css'],
  providers: [TreeApplicationService]
})
export class FindSchoolComponent implements OnInit {

  school: School = {} as School;
  idSchool: number;

  flatNodeMap = new Map<ApplicationItemFlatNode, ApplicationItemNode>();
  nestedNodeMap = new Map<ApplicationItemNode, ApplicationItemFlatNode>();

  treeControl: FlatTreeControl<ApplicationItemFlatNode>;
  treeFlattener: MatTreeFlattener<ApplicationItemNode, ApplicationItemFlatNode>;
  dataSource: MatTreeFlatDataSource<ApplicationItemNode, ApplicationItemFlatNode>;
  expandedNodes: ApplicationItemFlatNode[];
  
constructor(private route: ActivatedRoute, private schoolService: SchoolService, private dialog: MatDialog,
    private treeApplicationService: TreeApplicationService) {
    this.route.params.subscribe(
      params => {
        this.idSchool = this.route.snapshot.params.idSchool;

        this.treeFlattener = new MatTreeFlattener(this.transform, this.getLevel, this.isExpandable, this.getChildren);
        this.treeControl = new FlatTreeControl<ApplicationItemFlatNode>(this.getLevel, this.isExpandable);
        this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
        this.saveExpandedNodes();
        this.restoreExpandedNodes();

        treeApplicationService.applicationData.subscribe(school => {
          this.dataSource.data = school;
        });
        this.treeApplicationService.applicationState.next(this.school);

        this.schoolService.findSchool(this.idSchool).subscribe((school) => {
          this.school = school;
        })
      }
    )
   }
   
ngOnInit(): void {}

  getLevel = (node: ApplicationItemFlatNode) => node.level;
  isExpandable = (node: ApplicationItemFlatNode) => node.expandable;
  getChildren = (node: ApplicationItemNode): ApplicationItemNode [] => node.children;
  hasChild = (_: number, nodeDate: ApplicationItemFlatNode) => nodeDate.expandable;
  hasNoContent = (_: number, nodeData: ApplicationItemFlatNode) => nodeData.item === '';

    transform = (node: ApplicationItemNode, level: number) => {
    const existingNode = this.nestedNodeMap.get(node);
    const flatNode = existingNode && existingNode.name === node.name ? existingNode : new ApplicationItemFlatNode();
    flatNode.name = node.name;
    flatNode.id = node.id;
    flatNode.clazz = node.clazz;
    flatNode.level = level;
    flatNode.title = node.title;
    flatNode.routerLink = node.routerLink;
    flatNode.actions = node.actions;
    flatNode.expandable = (node.children && node.children.length > 0);
    this.flatNodeMap.set(flatNode, node);
    this.nestedNodeMap.set(node, flatNode);
    return flatNode;
  }
  private saveExpandedNodes() {
    if(this.treeControl && this.treeControl.dataNodes) {
      this.expandedNodes = new Arrayalt;ApplicationItemFlatNode>();
      this.treeControl.dataNodes.forEach(node => {
      if(node.expandable && this.treeControl.isExpanded(node)) {
          this.expandedNodes.push(node);
        }
      });
    }
  }
  private restoreExpandedNodes() {
    if(this.expandedNodes && this.expandedNodes.length > 0) {
      this.expandedNodes.forEach(node => {
        this.treeControl.expand(this.treeControl.dataNodes.find(n => n.id === node.id));
      });
    }
  }
  deleteSchool() {
   if(confirm('Are you sure')) {
     this.schoolService.deleteSchool(this.idSchool).subscribe(() => {
       window.location.replace('/home');
     })
   }
  }
  editSchool(id: number) {
    this.dialog.open(AddSchoolComponent, {
      data: {id},
      height: '580px',
      width: '400px',
    });
  }

}

src/app/find-school.html




  <div style="width: 30%; float:left">
    <mat-card>
      <mat-card-header>
        <mat-card-title> {{school.name}} </mat-card-title>
        <mat-card-subtitle>{{school.createdAt|date}}</mat-card-subtitle>
      </mat-card-header>
      <hr>
      <mat-card-content>
        <mat-list-item><i class="fas fa-th-list" style="margin: 0 15px 0 10px;"></i>
          <a style="color: #4CAF50;" [routerLink]="['/find-school/', school.id]" routerLinkActive="router-link-active" >Dashbaord</a></mat-list-item>
        <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
          <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding matTreeNodeToggle>
  
            <mat-basic-chip class="checklist-leaf-node root" [routerLink]="[node.routerLink]"
              routerLinkActive="linkActive">
              <a title="{{node.title}}">
                <i [ngClass]="node.clazz" style="margin-right: 5px; color: #666a6c;"></i>
                {{node.name}}
              </a>
            </mat-basic-chip>
          </mat-tree-node>
  
          <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
            <span [attr.aria-label]="'toggle ' + node.filename" id="chevronIcon" matTreeNodeToggle
              style="background: transparent;">
              <mat-icon class="mat-icon-rtl-mirror" id="mat-icon-plus">
                {{treeControl.isExpanded(node) ? 'arrow_drop_down' : 'arrow_right'}}
              </mat-icon>
            </span>
            <mat-basic-chip class="root" [routerLink]="[node.routerLink]" routerLinkActive="linkActive">
  
              <a title="{{node.title}}">
                <i [ngClass]="node.clazz" style="margin-right: 5px;  color: #666a6c;"></i>
                {{node.name}}
              </a>
  
            </mat-basic-chip>
          </mat-tree-node>
        </mat-tree>
      </mat-card-content>
      <mat-card-actions>
        <button mat-raised-button color="primary" (click)="editSchool(school.id)">Update school</button>
        <button mat-raised-button color="warn" (click)="deleteSchool()">Delete school</button>
        <button mat-raised-button [routerLink]="['/find-school/' + school.id + '/display-school/', school.id]">School details</button>
      </mat-card-actions>
    </mat-card>
  </div>
  
  <div style="width: 68%; float:right; margin-top: 30px; padding: 1%;">
    <router-outlet></router-outlet>
  </div>

src/app/find-school.css




.full-height {
  background: #f1f2f6;
}

.root {
  width: 100%;
  font-size: 16px;
  display: block;
  background: #f5f6fa;
  padding: 0 10px;
  border-radius: 4px;
}

a {
  font-family:  initial;
  color: #2f3542;
  text-decoration: none;
}

#mat-icon-plus {
  color: #666a6c;
  font-size: 24px;
  margin-top: 4px;
}

.root:hover {
  -webkit-transition: all .4s  ease-in-out;
  -moz-transition: all .4s  ease-in-out;
  transition: all .4s  ease-in-out;
  cursor:  pointer;
}

#chevronIcon {
  cursor: pointer;
}

.mat-tree-node {
  margin-bottom: -15px;
}

h2 {
  background: #e58e26;
  padding: 0 16px;
  border-radius: 5px;
}

.linkActive {
  background-color: #bcffb6 !important;
  padding: 2px 10px 0 3px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #a94442 !important;
  -webkit-transition: all .4s  ease-in-out;
  -moz-transition: all .4s  ease-in-out;
  transition: all .4s  ease-in-out;
}
.content-logo {
  padding-top: 15px;
  padding-left: 30px;
  margin-bottom: 10px;
}
.content-logo .fa-user-graduate {
  font-size: 24px;
  color: #2d3436;
}

Find Subjects Components

In find subjects commnent we can display all subjects

src/app/school/find-subjects.component.html




    <mat-card class="example-card">
        <mat-card-content style="margin: 16px;">
          <img mat-card-image src="https://i.ytimg.com/vi/AnZxeX_8mVk/maxresdefault.jpg"
               alt="photo">
        </mat-card-content>
      </mat-card>

Find Exams Components

In find subjects commnent we can display all exams

src/app/school/find-exams.component.html




    <mat-card class="example-card">
        <mat-card-content style="margin: 16px;">
          <img mat-card-image src="https://static01.nyt.com/images/2020/11/22/magazine/22Ethicist/22Ethicist-superJumbo.jpg"
               alt="photo">
        </mat-card-content>
      </mat-card>

Find Rooms Components

In find rooms commnent we can display all rooms

src/app/school/find-rooms.component.html




    <mat-card class="example-card">
        <mat-card-content style="margin: 16px;">
          <img mat-card-image src="https://thumbs.dreamstime.com/b/illustration-du-vecteur-concept-d-encadrement-professionnel-chef-%C3%A9quipe-promotion-des-employ%C3%A9s-cours-de-perfectionnement-156525531.jpg"
               alt="photo">
        </mat-card-content>
      </mat-card>

Find Schoolings Components

In find schoolings commnent we can display all schoolings

src/app/school/find-schoolings.component.html




    <mat-card class="example-card">
        <mat-card-content style="margin: 16px;">
          <img mat-card-image src="https://i.ytimg.com/vi/AnZxeX_8mVk/maxresdefault.jpg"
               alt="photo">
        </mat-card-content>
      </mat-card>

Add School Components

In add school commnent we can add a new school

src/app/add-school-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { School }  from  '../modal/Modal';
 import  { SchoolService }  from  '../service/school.service';

@Component({
  selector: 'app-add-school',
  templateUrl: './add-school.component.html',
  styleUrls: ['./add-school.component.css']
})
export class AddSchoolComponent implements OnInit {
   
  progressBar = false;
  school: School = {} as School;
  
    constructor(private schoolService: SchoolService, @Inject(MAT_DIALOG_DATA) private data: any) {}

  ngOnInit(): void {
    if(this.data.id != null) {
      this.schoolService.findSchool(this.data.id).subscribe((school) => {
        this.school = school;
      });
    }
  }
  addSchool() {
    this.progressBar = true;
    if(this.data.id != null) {
          this.schoolService.editSchool(this.school, this.data.id).subscribe((school) => {
          this.school = school;
          window.location.reload();
        });
    } else {
      this.schoolService.addSchool(this.school).subscribe((school) => {
        this.school = school;
        window.location.reload();
      });
    }
  }
}

src/app/add-school-component.html




    <div style="margin: auto; width: 100%; border: 3px solid #73AD21;">
        <mat-card>
          <mat-card-header>
            <mat-card-title>Add a new school</mat-card-title>
          </mat-card-header>
          <mat-card-content><br>
            <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
            <form>
              <mat-form-field appearance=fill style="width: 100%;">
                <mat-label>Enter name</mat-label>
                <input matInput type="text" placeholder="name" name="name" [(ngModel)]="school.name" #name="ngModel" required>
              </mat-form-field><br>
      
              <mat-form-field appearance=fill style="width: 100%;">
                <mat-label>Enter city</mat-label>
                <input matInput type="text" placeholder="city" name="city" [(ngModel)]="school.city" #city="ngModel" required>
              </mat-form-field><br>
      
              <mat-form-field appearance=fill style="width: 100%;">
                <mat-label>Enter department</mat-label>
                <input matInput type="text" placeholder="department" name="department" [(ngModel)]="school.department"
                  #department="ngModel" required>
              </mat-form-field><br>
      
              <mat-form-field>
                <mat-label>Enter open</mat-label>
                <input type="time" matInput placeholder="open" name="open" [(ngModel)]="school.open" #open="ngModel" required>
              </mat-form-field> <br>
      
              <mat-form-field>
                <mat-label>Enter close</mat-label>
                <input type="time" matInput placeholder="close" name="close" [(ngModel)]="school.close" #close="ngModel"
                  required>
              </mat-form-field> <br>
      
              <mat-form-field style="width: 100%;">
                <mat-label>Enter description</mat-label>
                <textarea matInput placeholder="Description" name="description" [(ngModel)]="school.description"
                  #description="ngModel"></textarea>
              </mat-form-field><br>
      
              <button mat-raised-button color="primary"
[disabled]="name.invalid || city.invalid || description.invalid || department.invalid || open.invalid || close.invalid"
                (click)="addSchool()" style="width: 10em !important">Save</button>
            </form>
          </mat-card-content>
        </mat-card>
      </div>

Display School Components

In Display school commnent We will display the school information open time and close time or update/delete. We can also add a new activity, subject, exam, room and schooling

src/app/display-school-component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { ActivatedRoute }  from  '@angular/router';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { AddActivityComponent }  from  '../add-activity/add-activity.component';
 import  { AddManagerComponent }  from  '../add-manager/add-manager.component';
 import  { School, Manager }  from  '../modal/Modal';
 import  { ManagerService }  from  '../service/manager.service';
 import  { SchoolService }  from  '../service/school.service';
 import  { AddSchoolingComponent }  from  '../add-schooling/add-schooling.component';
 import  { AddRoomComponent }  from  '../add-room/add-room.component';
 import  { AddSubjectComponent }  from  '../add-subject/add-subject.component';
 import  { AddExamComponent }  from  '../add-exam/add-exam.component';

@Component({
  selector: 'app-display-school',
  templateUrl: './display-school.component.html',
  styleUrls: ['./display-school.component.css']
})
export class DisplaySchoolComponent implements OnInit {

  school: School = {} as School;
  manager: Manager = {} as Manager;
  idSchool: number;
  
 constructor(private route: ActivatedRoute, private schoolService: SchoolService, private dialog: MatDialog,
    private managerService: ManagerService) {
    this.route.params.subscribe(
      params => {
        this.idSchool = this.route.snapshot.params.idSchool;
        this.schoolService.findSchool(this.idSchool).subscribe((school) => {
          this.school = school;
           if(this.manager!=null) {
            this.managerService.findManagerForSchool(this.idSchool).subscribe((manager) => {
              this.manager = manager
            })
           }
        })
      })
    }
  ngOnInit(): void {}
  
 addManager(id: number) {
    this.dialog.open(AddManagerComponent, {
      data: {id},
      height: '320px',
      width: '400px',
    });
  }
  
   editManager(idManager: number) {
    this.dialog.open(AddManagerComponent, {
      data: {idManager},
      height: '320px',
      width: '400px',
    });
  }

  deleteManager(idManager: number, idSchool: number) {
    if(confirm('Are you sur')) {
      this.managerService.deleteManager(idManager, idSchool).subscribe(() => {
      window.location.reload();
      })
    }
  }
  
  addSchoolling(idSchool: number) {
    this.dialog.open(AddActivityComponent, {
      data: {idSchool},
      height: '600px',
      width: '400px',
    });
  }

  addActivity(idSchool: number) {
    this.dialog.open(AddSchoolingComponent, {
      data: {idSchool},
      height: '300px',
      width: '400px',
    });
  }
 
  addRoom(idSchool: number) {
    this.dialog.open(AddRoomComponent, {
      data: {idSchool},
      height: '370px',
      width: '400px',
    });
  }
 
  addSubject(idSchool: number) {
    this.dialog.open(AddSubjectComponent, {
      data: {idSchool},
      height: '620px',
      width: '400px',
    });
  }

  addExam(idSchool: number) {
    this.dialog.open(AddExamComponent, {
      data: {idSchool},
      height: '480px',
      width: '400px',
    });
  }

}

src/app/display-school-component.html




    <mat-card>
        <mat-card-header>
          <mat-card-title>Welcome to {{school.name}} </mat-card-title>
          <mat-card-subtitle>{{school.createdAt|date}}</mat-card-subtitle>
        </mat-card-header><hr>
        <mat-card-content>
          <mat-list>
            <mat-list-item>
              <div mat-line style="color: #222f3e;">
                 <h2 *ngIf="manager!=null">Manager: {{manager.firstName}} {{manager.lastName}}
                  <span class="material-icons" (click)="deleteManager(manager.id, school.id)" 
                  style="cursor: pointer; color: #c0392b;">close</span>
                </h2>
               </div>
              <div mat-line style="color: #222f3e;">City: {{school.city}}</div>
              <div mat-line style="color: #222f3e;">Department: {{school.department}}</div>
            </mat-list-item>
          </mat-list><</br>
          <mat-chip-list cdkDropList cdkDropListOrientation="horizontal">
            <mat-chip>Open: {{school.open}} </mat-chip>
            <mat-chip>Close: {{school.close}} </mat-chip>
           </mat-chip-list>
           <p style="background: #f5f6fa; padding: 10px; border-radius: 5px; color: #444;">
             {{school.description}}
           </p>
        </mat-card-content><hr>
        <mat-card-actions><br>
          <button mat-stroked-button color="accent" (click)="editManager(manager.id)" *ngIf="manager!=null">Edit the manager</button>
          <button mat-stroked-button color="accent" (click)="addManager(school.id)" *ngIf="manager==null">Add a manager</button>
          <button mat-stroked-button color="primary" (click)="addActivity(school.id)">Add an activity</button>
          <button mat-stroked-button color="primary" (click)="addSchoolling(school.id)">Add a schooling</button>
          <button mat-stroked-button color="primary" (click)="addRoom(school.id)">Add a room</button>
          <button mat-stroked-button color="primary" (click)="addSubject(school.id)">Add a subject</button>
          <button mat-stroked-button color="primary" (click)="addExam(school.id)">Add an exam</button>
        </mat-card-actions>
      </mat-card>

Add Manager Components

In add manager commnent we can add a new manager for each school

src/app/add-manager-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Manager }  from  '../model/Model';
 import  { ManagerService}  from  '../service/manager.service';

@Component({
  selector: 'app-add-manager',
  templateUrl: './add-manager.component.html',
  styleUrls: ['./add-manager.component.css']
})
export class AddManagerComponent implements OnInit {

  progressBar = false;
  manager: Manager = {} as Manager;
  
constructor(private managerService: ManagerService, @Inject(MAT_DIALOG_DATA) private data: any) { }

  ngOnInit(): void {
    if(this.data.idManager!=null) {
      this.managerService.findManager(this.data.idManager).subscribe((manager) => {
        this.manager = manager;
      })
    }
  }
addManager() {
  this.progressBar = true;
  if(this.data.idManager!=null) {
    this.managerService.editManager(this.manager, this.data.idManager).subscribe((manager) => {
      this.manager = manager;
      window.location.reload()
    })
  } else {
    this.managerService.addManager(this.manager, this.data.id).subscribe((manager) => {
      this.manager = manager;
      window.location.reload()
    })
  }
}

}

src/app/add-manager-component.html




    <div style="margin: auto; width: 100%; border: 3px solid #73AD21;">
        <mat-card=>
          <mat-card-header>
            <mat-card-title>Add a new manager</mat-card-title>
          </mat-card-header>
          <mat-card-content><br>
            <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
            <form>
              <mat-form-field appearance= fill style="width: 100%;">
                <mat-label>Enter firstName</mat-label>
                <input matInput type="text" placeholder="firstName" name="firstName" [(ngModel)]="manager.firstName" #firstName="ngModel" required>
              </mat-form-field><br>
      
              <mat-form-field appearance= fill style="width: 100%;">
                <mat-label>Enter lastName</mat-label>
                <input matInput type="text" placeholder="lastName" name="lastName" [(ngModel)]="manager.lastName" #lastName="ngModel" required>
              </mat-form-field><br>
      
              <button mat-raised-button color="primary"
                [disabled]="firstName.invalid || lastName.invalid"
                (click)="addManager()" style="width: 10em !important">Save</button>
            </form>
          </mat-card-content>
        </mat-card=
      </div>

Add Activity Components

In add activity commnent we can add a new activity for each school

src/app/add-activity-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Activity }  from  '../model/Model';
 import  { ActivityService }  from  '../service/activity.service';

@Component({
  selector: 'app-add-activity',
  templateUrl: './add-activity.component.html',
  styleUrls: ['./add-activity.component.css']
})
export class AddActivityComponent implements OnInit {

  progressBar = false;
  activity: Activity = {} as Activity;
  weekDay: any = {};
  
 constructor(private activityService: ActivityService, @Inject(MAT_DIALOG_DATA) private data: any) {}

  ngOnInit(): void {
    if(this.data.idActivity) {
      this.activityService.findActivity(this.data.idActivity).subscribe((activity) => {
          this.activity = activity;
        });
    }
  }
  onSelectedDay() {
    this.activity.day = this.weekDay;
  }
  onDateTime(e) {
    this.activity.date = e.target.value;
  }
  addActivity() {
    this.progressBar = true;
    if(this.data.idActivity) {
      this.activityService.editActivity(this.activity, this.data.idActivity).subscribe((activity) => {
          this.activity = activity;
          window.location.reload();
        });
    } else {
      this.activityService.addActivity(this.activity, this.data.idSchool).subscribe((activity) => {
          this.activity = activity;
          window.location.reload();
        });
    }
  }
}

src/app/add-activity-component.html




    <div style="margin: auto; width: 100%; border: 3px solid #73AD21;">
        <mat-card>
          <mat-card-header>
            <mat-card-title>Add a new activity</mat-card-title>
          </mat-card-header>
          <mat-card-content><br>
          <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
            <form>
              <mat-form-field appearance="fill" style="width: 100%;">
                <mat-label>Enter type</mat-label>
                <input matInput type="text" placeholder="type" name="type" 
                [(ngModel)]="activity.type" #type="ngModel" required>
              </mat-form-field><br>
      
              <div style="margin-bottom: 15px;">
                <strong>Day</strong>
              </div>
      
              <mat-radio-group [(ngModel)]="weekDay" name="weekDay" (change)="onSelectedDay()">
                <mat-radio-button value="Monday">Monday</mat-radio-button>
                <mat-radio-button value="Tuesday">Tesday</mat-radio-button>
                <mat-radio-button value="Wednesday">Wendesday</mat-radio-button>
                <mat-radio-button value="Thursday">Thursday</mat-radio-button>
                <mat-radio-button value="Friday">Friday</mat-radio-button>
              </mat-radio-group> <hr>
      
              <mat-form-field style="width: 100%;">
                <input matInput type="date" name="date" min="minDate"
                       [(ngModel)]="activity.date" #date="ngModel" required (change)="onDateTime($event)">
              </mat-form-field> <br>
      
              <mat-form-field style="width: 100%;">
                <mat-label>START</mat-label>
                <input matInput type="time" placeholder="startTime" name="startTime"
                       [(ngModel)]="activity.startDate" #startTime="ngModel" required>
              </mat-form-field> <br>
      
              <mat-form-field style="width: 100%;">
                <mat-label>END</mat-label>
                <input matInput type="time" placeholder="endTime" name="endTime"
                       [(ngModel)]="activity.endDate" #endTime="ngModel" required>
              </mat-form-field> <br>
      
              <mat-form-field style="width: 100%;">
                <mat-label>Enter description</mat-label>
                <textarea matInput placeholder="Description" name="description" [(ngModel)]="activity.description"
                  #description="ngModel"></textarea>
              </mat-form-field><br>
      
              <button mat-raised-button color="primary"
                [disabled]="type.invalid || description.invalid
                || startTime.invalid  || endTime.invalid"
                (click)="addActivity()" style="width: 10em !important">Save</button>
            </form>
          </mat-card-content>
        </mat-card>
      </div>

Add schooling Components

In add schooling commnent we can add a new schooling for each school

src/app/add-schooling-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Schooling }  from  '../model/Model';
 import  { SchoolingService }  from  '../service/schooling.service';

@Component({
  selector: 'app-add-schooling',
  templateUrl: './add-schooling.component.html',
  styleUrls: ['./add-schooling.component.css']
})
export class AddSchoolingComponent implements OnInit {

  progressBar = false;
  schooling: Schooling = {} as Schooling;
  
constructor(private schoolingService: SchoolingService, @Inject(MAT_DIALOG_DATA) private data: any) { }

  ngOnInit(): void  {
    if (this.data.idSchooling!=null) {
     this.schoolingService.findSchooling(this.data.idSchooling).subscribe(schooling => {
       this.schooling = schooling;
     })
    }
  }
  addSchoolling() {
    this.progressBar = true;
    if (this.data.idSchooling!=null) {
      this.schoolingService.editSchooling(this.schooling, this.data.idSchooling).subscribe(schooling => {
        this.schooling = schooling;
        window.location.reload();
      })
    } else  {
      this.schoolingService.addSchooling(this.schooling, this.data.idSchool).subscribe(schooling => {
        this.schooling = schooling;
        window.location.reload();
      })
    }
  }
}

src/app/add-schooling-component.html




    <div style="margin: auto; width: 100%; border: 3px solid #73AD21;">
        <mat-card>
          <mat-card-header>
            <mat-card-title>Add a new schoolling</mat-card-title>
          </mat-card-header>
          <mat-card-content><br>
          <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
            <form>
      
              <mat-form-field style="width: 100%;">
                <mat-label>Year</mat-label>
                <input matInput type="number" placeholder="Year" name="year"
                       [(ngModel)]="schooling.year" #year="ngModel" required>
              </mat-form-field> <br>
      
              <mat-form-field style="width: 100%;">
                <mat-label>Enter description</mat-label>
                <textarea matInput placeholder="Description" name="description" [(ngModel)]="schooling.description"
                  #description="ngModel"></textarea>
              </mat-form-field><br>
      
              <button mat-raised-button color="primary"
                [disabled]="year.invalid || description.invalid"
                (click)="addSchoolling()" style="width: 10em !important">Save</button>
            </form>
          </mat-card-content>
        </mat-card>
      </div>

Add room Components

In add room commnent we can add a new room for each school

src/app/add-room-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Room }  from  '../model/Model';
 import  { RoomService }  from  '../service/room.service';

@Component({
  selector: 'app-add-room',
  templateUrl: './add-room.component.html',
  styleUrls: ['./add-room.component.css']
})
export class AddRoomComponent implements OnInit {

  progressBar = false;
  room: Room = {} as Room;
    
constructor(private roomService: RoomService, @Inject(MAT_DIALOG_DATA) private data: any) { }

  ngOnInit(): void {
    if(this.data.idRoom !=null) {
      this.roomService.findRoom(this.data.idRoom).subscribe(room => {
        this.room = room;
      })
    }
  }

  addRoom() {
    this.progressBar = true;
    if(this.data.idRoom !=null ) {
       this.roomService.editRoom(this.room, this.data.idRoom ).subscribe(room => {
         this.room = room;
         window.location.reload();
       })
    } else {
      this.roomService.addRoom(this.room, this.data.idSchool).subscribe(room => {
        this.room = room;
        window.location.reload();
      })
    }
  }
}

src/app/add-room-component.html




    <div style="margin: auto; width: 100%; border: 3px solid #73AD21;">
        <mat-card>
          <mat-card-header>
            <mat-card-title>Add a new room</mat-card-title>
          </mat-card-header>
          <mat-card-content><br>
          <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
            <form>
              <mat-form-field style="width: 100%;">
                <mat-label>Code</mat-label>
                <input matInput type="text" placeholder="Code" name="code"
                       [(ngModel)]="room.code" #code="ngModel" required>
              </mat-form-field> <br>
      
              <mat-form-field style="width: 100%;">
                <mat-label>Capacity</mat-label>
                <input matInput type="number" placeholder="Capacity" name="capacity"
                       [(ngModel)]="room.capacity" #capacity="ngModel" required>
              </mat-form-field> <br>
      
              <mat-form-field style="width: 100%;">
                <mat-label>Enter description</mat-label>
                <textarea matInput placeholder="Description" name="description" 
                [(ngModel)]="room.description" #description="ngModel"></textarea>
              </mat-form-field><br>
      
              <button mat-raised-button color="primary"
                [disabled]="capacity.invalid || description.invalid
                || code.invalid"
                (click)="addRoom()" style="width: 10em !important">Save</button>
            </form>
          </mat-card-content>
        </mat-card>
      </div>

Add subject Components

In add subject commnent we can add a new subject for each school

src/app/add-subject-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Subject }  from  '../model/Model';
 import  { SubjectService }  from  '../service/subject.service';

@Component({
  selector: 'app-add-subject',
  templateUrl: './add-subject.component.html',
  styleUrls: ['./add-subject.component.css']
})
export class AddSubjectComponent implements OnInit {

  progressBar = false;
  subject: Subject = {} as Subject;
  public arrayColors: any = {
    color1: '#f8c291',
    color2: '#d1f28e',
    color3: 'rgb(255,245,0)',
    color4: 'rgb(236,64,64)',
    color5: 'rgba(45,208,45,1)'
  };
  color1: '#d1f28e';
  public selectedColor = 'color2';
  
constructor(private subjectService: SubjectService, @Inject(MAT_DIALOG_DATA) private data: any) { }

  ngOnInit(): void {
    if(this.data.idSubject!=null) {
      this.subjectService.findSubject(this.data.idSubject).subscribe(subject => {
        this.subject = subject;
      })
    }
  }
  updateColor(event) {
    this.color1 = event;
    this.subject.color = this.color1;
   }
  addMatter() {
    this.progressBar = true;
    if(this.data.idSubject!=null) {
    this.subjectService.editSubject(this.subject, this.data.idSubject).subscribe(subject => {
      this.subject = subject;
      window.location.reload();
    })
    } else {
      this.subjectService.addSubject(this.subject, this.data.idSchool).subscribe(subject => {
        this.subject = subject;
        window.location.reload();
      })
    }
  }
}

src/app/add-subject-component.html




    <div style="margin: auto; width: 100%; border: 3px solid #73AD21;">
        <mat-card>
          <mat-card-header>
            <mat-card-title>Add a new subject</mat-card-title>
          </mat-card-header>
          <mat-card-content><br>
          <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
            <form>
      
              <mat-form-field style="width: 100%;">
                <mat-label>Name</mat-label>
                <input matInput type="text" placeholder="Name" name="name"
                       [(ngModel)]="subject.name" #name="ngModel" required>
              </mat-form-field> <br>
      
              <mat-form-field style="width: 100%;">
                <mat-label>Description</mat-label>
                <textarea  matInput placeholder="Description" name="description"
                           [(ngModel)]="subject.description" #description="ngModel" required></textarea>
              </mat-form-field>
      
              <div>
                <span [style.background]="arrayColors[selectedColor]"
                      [cpToggle]="true"
                      [cpDialogDisplay]="'inline'"
                      [cpCancelButton]="true"
                      [(colorPicker)]="arrayColors[selectedColor]"
                      (colorPickerChange)="updateColor($event)" ></span>
                </div><br>
      
              <button mat-raised-button color="primary"
                [disabled]="name.invalid || description.invalid"
                (click)="addMatter()" style="width: 10em !important">Save</button>
            </form>
          </mat-card-content>
        </mat-card>
      </div>

Add exam Components

In add exam commnent we can add a new exam for each school

src/app/add-exam-component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Exam, Subject }  from  '../model/Model';
 import  { ExamService }  from  '../service/exam.service';
 import  { dashCaseToCamelCase }  from  '@angular/compiler/src/util';
 import  { SubjectService }  from  '../service/subject.service';

@Component({
  selector: 'app-add-exam',
  templateUrl: './add-exam.component.html',
  styleUrls: ['./add-exam.component.css']
})
export class AddExamComponent implements OnInit {

  progressBar = false;
  exam: Exam = {} as Exam;
  idSubject: number;
  subjects: Subject[];
  subject: Subject = {} as Subject;
  
constructor(private examService: ExamService, private subjectService: SubjectService,
    @Inject(MAT_DIALOG_DATA) private data: any) { }

  ngOnInit(): void {
    if(this.data.idExam!=null) {
      this.examService.findExam(this.data.idExam).subscribe(exam => {
        this.exam = exam;
        this.subjectService.findSubjectForExam(this.data.idExam).subscribe(subject => {
          this.subject = subject;
        })
      })
    }
    this.subjectService.findAllSubjectsForSchool(this.data.idSchool).subscribe(subjects => {
      this.subjects = subjects;
    })
  }
  onSelecSubject(e) {
    this.idSubject = e.target.value;
 }
  onDateTime(e) {
    this.exam.date = e.target.value;
  }
  addExam() {
  this.progressBar = true;
    if(this.data.idExam!=null) {
     this.examService.editExam(this.exam, this.data.idExam).subscribe(exam => {
       this.exam = exam;
       window.location.reload();
     })
    } else {
      this.examService.addExam(this.exam, this.data.idSchool, this.idSubject).subscribe(exam => {
        this.exam = exam;
        window.location.reload();
      })
    }
  }
}

src/app/add-exam-component.html




    <div style="margin: auto; width: 100%; border: 3px solid #73AD21;">
        <mat-card>
          <mat-card-header>
            <mat-card-title>Add a new exam</mat-card-title>
          </mat-card-header>
          <mat-card-content><br>
          <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
            <form>
      
              <mat-form-field style="width: 100%;">
                <mat-label>Please choose a subject</mat-label>
                <select matNativeControl required (change)="onSelecSubject($event)">
                  <option selected disabled>Subjects</option>
                  <option *ngFor="let s of subjects" [value]="s.id" [selected]="s.name==subject.name">{{s.name}}</option>
                </select>
              </mat-form-field><br>
      
              <mat-form-field style="width: 100%;">
                <input matInput type="date" name="date" min="minDate"
                       [(ngModel)]="exam.date" #date="ngModel" required (change)="onDateTime($event)">
              </mat-form-field> <br>
      
              <mat-form-field style="width: 100%;">
                <mat-label>START</mat-label>
                <input matInput type="time" placeholder="startTime" name="start"
                       [(ngModel)]="exam.start" #startTime="ngModel" required>
              </mat-form-field> <br>
      
              <mat-form-field style="width: 100%;">
                <mat-label>END</mat-label>
                <input matInput type="time" placeholder="endTime" name="end"
                       [(ngModel)]="exam.end" #endTime="ngModel" required>
              </mat-form-field> <br>
      
              <mat-form-field style="width: 100%;">
                <mat-label>Enter description</mat-label>
                <textarea matInput placeholder="Description" name="description" [(ngModel)]="exam.description"
                  #description="ngModel"></textarea>
              </mat-form-field><br>
      
              <button mat-raised-button color="primary"
                [disabled]="description.invalid
                || startTime.invalid  || endTime.invalid"
                (click)="addExam()" style="width: 10em !important">Save</button>
            </form>
          </mat-card-content>
        </mat-card>
      </div>

Building application School with Spring boot and Angular Part 4

Download This Application My School From Github

Building application School with Spring boot and Angular Part 4

Download This Application My School From Github

Building gestion school with Spring boot & Angular Pt 2

2022-01-18T03:45:00.016-08:00

Getting Started | Building an Application with Spring Boot

Build an application enterprise with Spring boot and Angular use Jpa

In this part we will continue with Repositories and Services

When using Spring Data JPA to implement the persistence layer, the repository typically returns one or more instances of the root class. However, more often than not, we don't need all the properties of the returned objects.

In such cases, it may be desirable to retrieve data as objects of customized types. These types reflect partial views of the root class, containing only properties we care about. This is where projections come in handy.

We need to create these interface dao

-> ActivityDao.java

-> CoefficientDao.java

-> CourseDao.java

-> ExamDao.java

-> LevelDao.java

-> ManagerDao.java

-> NoteDao.java

-> ProgramDao.java

-> RoomDao.java

-> SchoolDao.java

-> SchoolingDao.java

-> SubjectDao.java

Here, we are creating an interface ActivityDao

src/main/java/com/school/dao/ActivityDao.java):





package com.school.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.school.modal.Activity;

@Repository
public interface ActivityDao extends JpaRepository<Activity, Long>{

}

Here, we are creating an interface CoefficientDao

src/main/java/com/school/dao/CoefficientDao.java):





package com.school.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.school.modal.Coefficient;

@Repository
public interface CoefficientDao extends JpaRepository<Coefficient, Long>{

}

Here, we are creating an interface CourseDao

src/main/java/com/school/dao/CourseDao.java):





package com.school.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.school.modal.Course;

@Repository
public interface CourseDao extends JpaRepository<Course, Long>{

}

Here, we are creating an interface ExamDao

src/main/java/com/school/dao/ExamDao.java):





package com.school.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.school.modal.Exam;

@Repository
public interface ExamDao extends JpaRepository<Exam, Long>{

}

Here, we are creating an interface LevelDao

src/main/java/com/school/dao/LevelDao.java):





package com.school.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.school.modal.Level;

@Repository
public interface LevelDao extends JpaRepository<Level, Long>{

}

Here, we are creating an interface ManagerDao

src/main/java/com/school/dao/ManagerDao.java):





package com.school.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.school.modal.Manager;

@Repository
public interface ManagerDao extends JpaRepository<Manager, Long>{

}

Here, we are creating an interface NoteDao

src/main/java/com/school/dao/NoteDao.java):





package com.school.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.school.modal.Note;

@Repository
public interface NoteDao extends JpaRepository<Note, Long>{

}

Here, we are creating an interface ProgramDao

src/main/java/com/school/dao/ProgramDao.java):





package com.school.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.school.modal.Program;

@Repository
public interface ProgramDao extends JpaRepository<Program, Long>{

}

Here, we are creating an interface RoomDao

src/main/java/com/school/dao/RoomDao.java):





package com.school.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.school.modal.Room;

@Repository
public interface RoomDao extends JpaRepository<Room, Long>{

}

Here, we are creating an interface SchoolDao

src/main/java/com/school/dao/SchoolDao.java):





package com.school.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.School;
import com.school.modal.Room;

@Repository
public interface SchoolDao extends JpaRepository<School, Long>{

}

Here, we are creating an interface SchoolingDao

src/main/java/com/school/dao/SchoolingDao.java):





package com.school.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.School;
import com.school.modal.Schooling;

@Repository
public interface SchoolingDao extends JpaRepository<Schooling, Long>{

}

Here, we are creating an interface SubjectDao

src/main/java/com/school/dao/SubjectDao.java):





package com.school.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.School;
import com.school.modal.Subject;

@Repository
public interface SubjectDao extends JpaRepository<Subject, Long>{

}

The services

Service Components are the class file which contains @Service annotation. These class files are used to write business logic in a different layer, separated from @RestController class file. The logic for creating a service component class file is shown here

We will create these interfaces in service package:

-> ActivityService.java

-> CoefficientService.java

-> CourseService.java

-> ExamService.java

-> LevelService.java

-> ManagerService.java

-> NoteService.java

-> ProgramService.java

-> RoomService.java

-> SchoolService.java

-> SchoolingService.java

-> SubjectService.java

Here, we are creating an interface ActivityService

src/main/java/com/school/service/ActivityService.java):





package com.school.service;
import java.util.List;
import org.springframework.stereotype.Service;
import com.school.modal.Activity;

@Service
public interface ActivityService {
	
  Activity addActivity(Activity activity, long id);
	
  Activity editActivity(Activity activity, long id);
	
  Activity findActivity(long id);
	
  void deleteActivity(long id);
	
  List<Activity> findActivitiesForSchool(long id);

}

Here, we are creating an interface CoefficientService

src/main/java/com/school/service/CoefficientService.java):





package com.school.service;

import org.springframework.stereotype.Service;
import com.school.modal.Coefficient;

@Service
public interface CoefficientService {
	
 Coefficient addCoefficient(Coefficient coefficient, long id);
	
 Coefficient editCoefficient(Coefficient coefficient, long id);
	
 Coefficient findCoefficient(long id);
	
 void deleteCoefficient(long id);

}

Here, we are creating an interface CourseService

src/main/java/com/school/service/CourseService.java):





package com.school.service;

import org.springframework.stereotype.Service;
import com.school.modal.Course;

@Service
public interface CourseService {

 Course addCourse(Course course, long idLevel, long idSubject);
	
 Course editCourse(Course course, long idCourse, long idSubject);
	
 Course findCourse(long id);
	
 void deleteCourse(long idCourse, long idSubject);
}

Here, we are creating an interface ExamService

src/main/java/com/school/service/ExamService.java):





package com.school.service;

import java.util.List;
import org.springframework.stereotype.Service;
import com.school.modal.Exam;

@Service
public interface ExamService {

 Exam addExam(Exam exam, long idSchool, long  idSubject);
	
 Exam editExam(Exam exam, long id);
	
 Exam findExam(long id);
	
 void deleteExam(long id, long idSubject);
	
 List<Exam> findExamsForSchool(long id);

}

Here, we are creating an interface LevelService

src/main/java/com/school/service/LevelService.java):





package com.school.service;

import java.util.List;
import com.school.modal.Level;

public interface LevelService {
	
 Level addLevel(Level level, long id);
	
 Level editLevel(Level level, long id);
	
 Level findLevel(long id);
	
 Level findLevelForRoom(long id);
	
 void deleteLevel(long id);
	
 void addLevelToRoom(long idRoom, long idLevel);
	
 List<Level> findLevels();
	
 void deleteLevelFromRoom(long idRoom, long idLevel);
	
}

Here, we are creating an interface ManagerService

src/main/java/com/school/service/ManagerService.java):





package com.school.service;

import org.springframework.stereotype.Service;
import com.school.modal.Manager;

@Service
public interface ManagerService {

 Manager addManager(Manager manager, long id);
	
 Manager editManager(Manager manager, long id);
	
 Manager findManager(long id);
	
 Manager findManagerForSchool(long id);
	
 void deleteManager(long id, long idSchhol);
 
}

Here, we are creating an interface NoteService

src/main/java/com/school/service/NoteService.java):





package com.school.service;

import org.springframework.stereotype.Service;
import com.school.modal.Note;

@Service
public interface NoteService {
	
 Note addNote(Note note, long id);
	
 Note editNote(Note note, long id);
	
 Note findNote(long id);
	
 void deleteNote(long id);

}

Here, we are creating an interface ProgramService

src/main/java/com/school/service/ProgramService.java):





package com.school.service;

import org.springframework.stereotype.Service;
import com.school.modal.Program;

@Service
public interface ProgramService {

 Program addProgram(Program program, long id);
	
 Program editProgram(Program program, long id);
	
 Program findProgram(long id);
 
 void deleteProgram(long id);
	
}

Here, we are creating an interface RoomService

src/main/java/com/school/service/RoomService.java):





package com.school.service;

import java.util.List;
import org.springframework.stereotype.Service;
import com.school.modal.Room;

@Service
public interface RoomService {
	
 Room addRoom(Room room, long id);
	
 Room editRoom(Room room, long id);
	
 Room findRoom(long id);
	
 void deleteRoom(long id);
	
 List<Room> findRoomsForSchool(long id);

}

Here, we are creating an interface SchoolService

src/main/java/com/school/service/SchoolService.java):




 
package com.school.service;

import java.util.List;
import org.springframework.stereotype.Service;
import com.school.modal.School;

@Service
public interface SchoolService {
	
 School addSchool(School school);
	
 School editSchool(School school, long id);
	
 School findSchool(long id);
	
 void deleteSchool(long id);
	
 List<School> findSchools();

}

Here, we are creating an interface SchoolingService

src/main/java/com/school/service/SchoolingService.java):





package com.school.service;

import java.util.List;
import org.springframework.stereotype.Service;
import com.school.modal.Schooling;

@Service
public interface SchoolingService {
	
 Schooling addSchooling(Schooling schooling, long id);
	
 Schooling editSchooling(Schooling schooling, long id);
	
 Schooling findSchooling(long id);
	
 void deleteSchooling(long id);
	
 List<Schooling> findSchoolingsForSchool(long id);

}

Here, we are creating an interface SubjectService

src/main/java/com/school/service/SubjectService.java):





package com.school.service;

import java.util.List;
import org.springframework.stereotype.Service;
import com.school.modal.Subject;

@Service
public interface SubjectService {

 Subject addSubject(Subject subject, long idSchool);
	
 Subject editSubject(Subject subject, long id);
	
 Subject findSubject(long id);
	
 Subject findSubjectForExam(long id);
	
 Subject findSubjectForCourse(long id);
	
 void deleteSubject(long id);
	
 List<Subject> findAllSubjectsForSchool(long id);
	
 List<Subject> findSubjectsForSchool(long id);
	
}

The managers classes implementation

An impl class is usually a class that implements the behaviour described by one of these interfaces. While the internal implementation class, With transactions configured, we can now annotation a bean with @Transactional and @Service either at the class or method level. Then conversion Entity to DTO. This is stands for Data Transfer Object and is a simple Plain Old Java Object which contains class properties and getters and settings methods for accessing those properties.

We will create these class in the impl package

-> ActivityServiceImpl.java

-> CoefficientServiceImpl.java

-> CourseServiceImpl.java

-> ExamServiceImpl.java

-> LevelServiceImpl.java

-> ManagerServiceImpl.java

-> NoteServiceImpl.java

-> ProgramServiceImpl.java

-> RoomServiceImpl.java

-> SchoolServiceImpl.java

-> SchoolingServiceImpl.java

-> SubjectServiceImpl.java

Here, we are creating a class ActivityServiceImpl

src/main/java/com/school/impl/ActivityServiceImpl.java):





package com.school.impl;

import java.util.Date;
import java.util.List;
import javax.transaction.Transactional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import com.school.dao.ActivityDao;
import com.school.dao.SchoolDao;
import com.school.modal.Activity;
import com.school.modal.School;
import com.school.service.ActivityService;

 @Component
@Transactional 
public class ActivityServiceImpl implements ActivityService {
	
   @Autowired
   private ActivityDao activityDao;
	
	@Autowired
    private SchoolDao schoolDao;

 @Override
 public Activity addActivity(Activity activity,  long id) {
		School school = schoolDao.findById(id).get();
		school.addActivity(activity);
		activity.setCreatedAt(new Date());
		return activityDao.save(activity);
	}

 @Override
 public Activity editActivity(Activity activity,  long id) {
		Activity existActivity = activityDao.findById(id).get();
		existActivity.setType(activity.getType());
		existActivity.setDay(activity.getDay());
		existActivity.setStartDate(activity.getStartDate());
		existActivity.setEndDate(activity.getEndDate());
		existActivity.setDescription(activity.getDescription());
		existActivity.setDate(activity.getDate());
		return activityDao.save(existActivity);
	}

 @Override
 public Activity findActivity( long id) {
		return activityDao.findById(id).get();
	}

 @Override
 public void deleteActivity( long id) {
		 activityDao.deleteById(id);
	}

 @Override
 public List<Activity> findActivitiesForSchool( long id) {
		School school = activityDao.findById(id).get();
		return school.getActivities();
	}

}

Here, we are creating a class CoefficientServiceImpl

src/main/java/com/school/impl/CoefficientServiceImpl.java):





package com.school.impl;

import java.util.Date;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.school.dao.CoefficientDao;
import com.school.dao.ProgramDao;
import com.school.modal.Coefficient;
import com.school.modal.Program;
import com.school.service.CoefficientService;

 @Component
@Transactional 
public class CoefficientServiceImpl implements CoefficientService {
	
 @Autowired
 private CoefficientDao coefficientDao;
	
 @Autowired
 private ProgramDao programDao;

 @Override
 public Coefficient addCoefficient(Coefficient coefficient, long id) {
		Program program = programDao.findById(id).get();
		coefficient.setCreatedAt(new Date());
	     program.addCoefficient(coefficient);
		return coefficientDao.save(coefficient);
	}

 @Override
 public Coefficient editCoefficient(Coefficient coefficient, long id) {
		Coefficient existCoefficient = coefficientDao.findById(id).get();
		existCoefficient.setGrade(coefficient.getGrade());
		existCoefficient.setDescription(coefficient.getDescription());
		return coefficientDao.save(existCoefficient);
	}

 @Override
 public Coefficient findCoefficient(long id) {
		return coefficientDao.findById(id).get();
	}

 @Override
 public void deleteCoefficient(long id) {
		coefficientDao.deleteById(id);		
	}
		
}

Here, we are creating a class CourseServiceImpl

src/main/java/com/school/impl/CourseServiceImpl.java):





package com.school.impl;

import java.util.Date;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.school.dao.CourseDao;
import com.school.dao.LevelDao;
import com.school.dao.SubjectDao;
import com.school.modal.Course;
import com.school.modal.Level;
import com.school.modal.Subject;
import com.school.service.CourseService;

 @Component
@Transactional 
public class CourseServiceImpl implements CourseService {
	
 @Autowired
 private CourseDao courseDao;
	
 @Autowired
 private LevelDao levelDao;
	
 @Autowired
 private SubjectDao subjectDao;

 @Override
 public Course addCourse(Course course, long idLevel, long idSubject) {
		Level level = levelDao.findById(idLevel).get();
		Subject subject = subjectDao.findById(idSubject).get();
		course.setCreatedAt(new Date());
		level.addCourse(course);
		course.setSubject(subject);
		subject.setCourse(course);
		return courseDao.save(course);
	}

 @Override
 public Course editCourse(Course course, long idCourse, long idSubject) {
		Subject subject = subjectDao.findById(idSubject).get();
		Course existsCourse = courseDao.findById(idCourse).get();
		existsCourse.setDate(course.getDate());
		existsCourse.setStartDate(course.getStartDate());
		existsCourse.setEndDate(course.getEndDate());
		existsCourse.setDescription(course.getDescription());
		subject.setCourse(existsCourse);
		existsCourse.setSubject(subject);
		return courseDao.save(existsCourse);
	}

 @Override
 public Course findCourse(long id) {
		return courseDao.findById(id).get();
	}

 @Override
 public void deleteCourse(long idCourse, long idSubject) {
		Subject subject = subjectDao.findById(idSubject).get();
		Course existsCourse = courseDao.findById(idCourse).get();
		subject.setCourse(null);
		existsCourse.setSubject(null);
		courseDao.delete(existsCourse);	
	}
	
}

Here, we are creating a class ExamServiceImpl

src/main/java/com/school/impl/ExamServiceImpl.java):





package com.school.impl;

import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.school.dao.ExamDao;
import com.school.dao.SubjectDao;
import com.school.dao.SchoolDao;
import com.school.modal.Exam;
import com.school.modal.Subject;
import com.school.modal.School;
import com.school.service.ExamService;

@Component
@Transactional 
public class ExamServiceImpl implements ExamService {

 @Autowired
 private ExamDao examDao;
	
 @Autowired
 private SchoolDao schoolDao;
	
 @Autowired
 private SubjectDao subjectDao;

 @Override
 public Exam addExam(Exam exam, long idSchool, long idSubject) {
		School school = schoolDao.findById(idSchool).get();
		Subject subject = subjectDao.findById(idSubject).get();
		exam.setCreatedAt(new Date());
		school.addExam(exam);
		exam.setSubject(subject);
		subject.setExam(exam);
		return examDao.save(exam);
	}

 @Override
 public Exam editExam(Exam exam, long id) {
		Exam existExam = examDao.findById(id).get();
		existExam.setDate(exam.getDate());
		existExam.setDescription(exam.getDescription());
		existExam.setStart(exam.getStart());
		existExam.setEnd(exam.getEnd());
		return examDao.save(existExam);
	}

 @Override
 public Exam findExam(long id) {
		return examDao.findById(id).get();
	}

 @Override
 public void deleteExam(long id, long idSubject) {
		Exam existExam = examDao.findById(id).get();
		Subject subject = subjectDao.findById(idSubject).get();
		existExam.setSubject(null);
		subject.setExam(null);
		examDao.delete(existExam);
	}

 @Override
 public List<Exam> findExamsForSchool(long id) {
		School school = schoolDao.findById(id).get();
		return school.getExams();
	}

}

Here, we are creating a class LevelServiceImpl

src/main/java/com/school/impl/LevelServiceImpl.java):





package com.school.impl;

import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.school.dao.LevelDao;
import com.school.dao.RoomDao;
import com.school.dao.SchoolingDao;
import com.school.modal.Level;
import com.school.modal.Room;
import com.school.modal.Schooling;
import com.school.service.LevelService;

 @Component
@Transactional 
public class LevelServiceImpl implements LevelService {
	
 @Autowired
 private LevelDao levelDao;
	
 @Autowired
 private SchoolingDao schoolingDao;
	
 @Autowired
 private RoomDao roomDao;

 @Override
 public Level addLevel(Level level, longid) {
		Schooling schooling = schoolingDao.findById(id).get();
		level.setCreatedAt(new Date());
		schooling.addLevel(level);
		return levelDao.save(level);
	}

 @Override
 public Level editLevel(Level level, longid) {
		Level existLevel = levelDao.findById(id).get();
		existLevel.setLabel(level.getLabel());
		existLevel.setDescription(level.getDescription());
		return levelDao.save(existLevel);
	}

 @Override
 public Level findLevel(longid) {
		return levelDao.findById(id).get();
	}

 @Override
 public void deleteLevel(longid) {
		levelDao.deleteById(id);	
	}

 @Override
 public void addLevelToRoom(longidRoom, longidLevel) {
		Level existLevel = levelDao.findById(idLevel).get();
		Room room = roomDao.findById(idRoom).get();
		existLevel.setRoom(room);
		room.setLevel(existLevel);
	}


 @Override
 public List<Level> findLevels() {
		return levelDao.findAll();
	}

 @Override
 public void deleteLevelFromRoom(longidRoom, longidLevel) {
		Level existLevel = levelDao.findById(idLevel).get();
		Room room = roomDao.findById(idRoom).get();
		existLevel.setRoom(null);
		room.setLevel(null);
	}

 @Override
 public Level findLevelForRoom(longidRoom) {
		Room room = roomDao.findById(idRoom).get();
		return room.getLevel();
	}
}

Here, we are creating a class ManagerServiceImpl

src/main/java/com/school/impl/ManagerServiceImpl.java):





package com.school.impl;

import javax.transaction.Transactional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import com.school.dao.ManagerDao;
import com.school.dao.SchoolDao;
import com.school.modal.Manager;
import com.school.modal.School;
import com.school.service.ManagerService;

 @Component
@Transactional 
public class ManagerServiceImpl implements ManagerService {
	
 @Autowired
 private ManagerDao managerDao;
	
 @Autowired
 private SchoolDao schoolDao;

 @Override
 public Manager addManager(Manager manager, longid) {
		School school = schoolDao.findById(id).get();
		manager.setSchool(school);
		school.setManager(manager);
		return managerDao.save(manager);
	}

 @Override
 public Manager editManager(Manager manager, longid) {
		Manager existManager = managerDao.findById(id).get();
		existManager.setFirstName(manager.getFirstName());
		existManager.setLastName(manager.getLastName());
		return managerDao.save(existManager);
	}

 @Override
 public Manager findManager(longid) {
		return managerDao.findById(id).get();
	}

 @Override
 public void deleteManager(longid, longidSchool) {
	   School school = schoolDao.findById(idSchhol).get();
	   school.setManager(null);
       managerDao.deleteById(id);	
	}

 @Override
 public Manager findManagerForSchool(longid) {
		School school = schoolDao.findById(id).get();
		return school.getManager();
	}

}

Here, we are creating a class NoteServiceImpl

src/main/java/com/school/impl/NoteServiceImpl.java):





package com.school.impl;

import java.util.Date;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.school.dao.ExamDao;
import com.school.dao.NoteDao;
import com.school.modal.Exam;
import com.school.modal.Note;
import com.school.service.NoteService;

 @Component
@Transactional 
public class NoteServiceImpl implements NoteService {
	
 @Autowired
 private NoteDao noteDao;
	
 @Autowired
 private ExamDao examDao;

 @Override
 public Note addNote(Note note, longid) {
		Exam exam = examDao.findById(id).get();
		note.setCreatedAt(new Date());
		exam.addNote(note);
		return noteDao.save(note);
	}

 @Override
 public Note editNote(Note note, longid) {
		Note existNote = noteDao.findById(id).get();
		existNote.setScore(note.getScore());
		existNote.setDescription(note.getDescription());
		return noteDao.save(existNote);
	}

 @Override
 public Note findNote(longid) {
		return noteDao.findById(id).get();
	}

 @Override
 public void deleteNote(longid) {
		noteDao.deleteById(id);
	}	

}

Here, we are creating a class ProgramServiceImpl

src/main/java/com/school/impl/ProgramServiceImpl.java):





package com.school.impl;

import java.util.Date;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.school.dao.SubjectDao;
import com.school.dao.ProgramDao;
import com.school.modal.Subject;
import com.school.modal.Program;
import com.school.service.ProgramService;

 @Component
@Transactional 
public class ProgramServiceImpl implements ProgramService {
	
 @Autowired
 private ProgramDao programDao;
	
 @Autowired
 private SubjectDao matterDao;

 @Override
 public Program addProgram(Program program, longid) {
		Subject matter = matterDao.findById(id).get();
		program.setCreatedAt(new Date());
		matter.addProgram(program);
		return programDao.save(program);
	}

 @Override
 public Program editProgram(Program program, longid) {
	   Program existProgram = programDao.findById(id).get();
	   existProgram.setName(program.getName());
	   existProgram.setDescription(program.getDescription());
		return programDao.save(existProgram);
	}

 @Override
 public Program findProgram(longid) {
		return programDao.findById(id).get();
	}

 @Override
 public void deleteProgram(longid) {
        programDao.deleteById(id);
	}
}

Here, we are creating a class RoomServiceImpl

src/main/java/com/school/impl/RoomServiceImpl.java):





package com.school.impl;

import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.school.dao.LevelDao;
import com.school.dao.RoomDao;
import com.school.dao.SchoolDao;
import com.school.modal.Level;
import com.school.modal.Room;
import com.school.modal.School;
import com.school.service.RoomService;

 @Component
@Transactional 
public class RoomServiceImpl implements RoomService {
	
 @Autowired
 private RoomDao roomDao;

 @Autowired
 private SchoolDao schoolDao;
	
 @Override
 public Room addRoom(Room room, longid) {
		School school = schoolDao.findById(id).get();
		room.setCreatedAt(new Date());
		school.addRoom(room);
		return roomDao.save(room);
	}

 @Override
 public Room editRoom(Room room, longid) {
		Room existRoom = roomDao.findById(id).get();
		existRoom.setCode(room.getCode());
		existRoom.setCapacity(room.getCapacity());
		existRoom.setDescription(room.getDescription());
		return roomDao.save(existRoom);
	}

 @Override
 public Room findRoom(longid) {
		return roomDao.findById(id).get();
	}

 @Override
 public void deleteRoom(longid) {
		roomDao.deleteById(id);
	}

 @Override
 public List<Room> findRoomsForSchool(longid) {
		School school = schoolDao.findById(id).get();
		return school.getRooms();
	}

}

Here, we are creating a class SchoolServiceImpl

src/main/java/com/school/impl/SchoolServiceImpl.java):





package com.school.impl;

import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.school.dao.SchoolDao;
import com.school.modal.School;
import com.school.service.SchoolService;

@Component
@Transactional 
public class SchoolServiceImpl implements SchoolService {
	
 @Autowired
 private SchoolDao schoolDao;

 @Override
 public School addSchool(School school) {
		school.setCreatedAt(new Date());
		return schoolDao.save(school);
	}

 @Override
 public School editSchool(School school, longid) {
		School existSchool = schoolDao.findById(id).get();
		existSchool.setName(school.getName());
		existSchool.setCity(school.getCity());
		existSchool.setDescription(school.getDescription());
		existSchool.setOpen(school.getOpen());
		existSchool.setClose(school.getClose());
		return schoolDao.save(existSchool);
	}

 @Override
 public School findSchool(longid) {
		return schoolDao.findById(id).get();
	}

 @Override
 public void deleteSchool(longid) {
		schoolDao.deleteById(id);
	}

 @Override
 public List<School> findSchools() {
		return schoolDao.findAll();
	}

}

Here, we are creating a class SchoolingServiceImpl

src/main/java/com/school/impl/SchoolingServiceImpl.java):





package com.school.impl;

import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.school.dao.SchoolDao;
import com.school.dao.SchoolingDao;
import com.school.modal.School;
import com.school.modal.Schooling;
import com.school.service.SchoolingService;

 @Component
@Transactional 
public class SchoolingServiceImpl implements SchoolingService {
	
 @Autowired
 private SchoolingDao schoolingDao;
	
 @Autowired
 private SchoolDao schoolDao;

 @Override
 public Schooling addSchooling(Schooling schooling, longid) {
		School school = schoolDao.findById(id).get();
		school.addSchooling(schooling);
		schooling.setCreatedAt(new Date());
		return schoolingDao.save(schooling);
	}

 @Override
 public Schooling editSchooling(Schooling schooling, longid) {
		Schooling existSchooling = schoolingDao.findById(id).get();
		existSchooling.setYear(schooling.getYear());
		existSchooling.setDescription(schooling.getDescription());
		return schoolingDao.save(existSchooling);
	}

 @Override
 public Schooling findSchooling(longid) {
		return schoolingDao.findById(id).get();
	}

 @Override
 public void deleteSchooling(longid) {
		schoolingDao.deleteById(id);		
	}

 @Override
 public List<Schooling> findSchoolingsForSchool(longid) {
		School school = schoolDao.findById(id).get();
		return school.getSchoolings();
	}

}

Here, we are creating a class SubjectServiceImpl

src/main/java/com/school/impl/SubjectServiceImpl.java):





package com.school.impl;

import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.school.dao.SubjectDao;
import com.school.dao.CourseDao;
import com.school.dao.ExamDao;
import com.school.dao.SchoolDao;
import com.school.modal.Subject;
import com.school.modal.Course;
import com.school.modal.Exam;
import com.school.modal.School;
import com.school.service.SubjectService;

@Component
@Transactional 
public class SubjectServiceImpl implements SubjectService {
	
 @Autowired
 private SubjectDao subjectDao;
	
 @Autowired
 private SchoolDao schoolDao;
	
 @Autowired
 private ExamDao examDao;
	
 @Autowired
 private CourseDao courseDao;

 @Override
 public Subject addSubject(Subject subject, longidSchool) {
		School school = schoolDao.findById(idSchool).get();
		subject.setCreatedAt(new Date());
		school.addSubject(subject);
		return subjectDao.save(subject);
	}

 @Override
 public Subject editSubject(Subject subject, longid) {
		Subject existSubject = subjectDao.findById(id).get();
		existSubject.setName(subject.getName());
		existSubject.setColor(subject.getColor());
		existSubject.setDescription(subject.getDescription());
		return subjectDao.save(existSubject);
	}

 @Override
 public Subject findSubject(longid) {
		return subjectDao.findById(id).get();
	}

 @Override
 public void deleteSubject(longid) {
		subjectDao.deleteById(id);
	}

 @Override
 public List<Subject> findAllSubjectsForSchool(longid) {
		School school = schoolDao.findById(id).get();
		return school.getSubjects();
	}

 @Override
 public Subject findSubjectForExam(longid) {
		Exam exam = examDao.findById(id).get();
		return exam.getSubject();
	}

 @Override
 public Subject findSubjectForCourse(longid) {
		Course course = courseDao.findById(id).get();
		return course.getSubject();
	}

 @Override
 public List<Subject> findSubjectsForSchool(longid) {
		School school = schoolDao.findById(id).get();
		return school.getSubjects();
	}
}

@RestController API

@RestController is a convenience annotation for creating Restful controllers. It is a specialization of @Component and is autodetected through classpath scanning. It adds the @Controller and @ResponseBody annotations. It converts the response to JSON or XML. It does not work with the view technology, so the methods cannot return ModelAndView. It is typically used in combination with annotated handler methods based on the @RequestMapping annotation.

We will create these class in controller package:

-> ActivityController.java

-> CoefficientController.java

-> CourseController.java

-> ExamController.java

-> LevelController.java

-> ManagerConntroller.java

-> NoteController.java

-> ProgramController.java

-> RoomController.java

-> SchoolController.java

-> SchoolingController.java

-> SubjectController.java

Here, we are creating a class ActivityController

src/main/java/com/school/controller/ActivityController.java):





package com.school.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.school.modal.Activity;
import com.school.service.ActivityService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class ActivityController {

 @Autowired
 private ActivityService activityService;

	@PostMapping("/addActivity/{id}")
	Activity addActivity(@RequestBody Activity activity, @PathVariable  long id) {
		return activityService.addActivity(activity, id);
	}

	@PutMapping("/editActivity/{id}")
	Activity editActivity(@RequestBody Activity activity, @PathVariable  long id) {
		return activityService.editActivity(activity, id);
	}

	@GetMapping("/findActivity/{id}")
	Activity findActivity(@PathVariable  long id) {
		return activityService.findActivity(id);
	}

	@DeleteMapping("/deleteActivity/{id}")
	void deleteActivity(@PathVariable  long id) {
		activityService.deleteActivity(id);
	}
	@GetMapping("/findActivitiesForSchool/{id}")
	Listélt;Activity> findActivitiesForSchool(@PathVariable  long id) {
		return activityService.findActivitiesForSchool(id);
	}

}

Here, we are creating a class CoefficientController

src/main/java/com/school/controller/CoefficientController.java):





package com.school.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.school.modal.Coefficient;
import com.school.service.CoefficientService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class CoefficientController {

 @Autowired
 private CoefficientService coefficientService;

	@PostMapping("/addCoefficient/{id}")
	Coefficient addCoefficient(@RequestBody Coefficient coefficient, @PathVariable  long id) {
		return coefficientService.addCoefficient(coefficient, id);
	}

	@PutMapping("/editCoefficient/{id}")
	Coefficient editCoefficient(@RequestBody Coefficient coefficient, @PathVariable  long id) {
		return coefficientService.editCoefficient(coefficient, id);
	}

	@GetMapping("/findCoefficient/{id}")
	Coefficient findCoefficient(@PathVariable  long id) {
		return coefficientService.findCoefficient(id);
	}

	@DeleteMapping("/deleteCoefficient/{id}")
	void deleteCoefficient(@PathVariable  long id) {
		coefficientService.deleteCoefficient(id);
	}

}

Here, we are creating a class CourseController

src/main/java/com/school/controller/CourseController.java):





package com.school.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.school.modal.Course;
import com.school.service.CourseService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class CourseController {
	
 @Autowired
 private CourseService courseService;

	@PostMapping("/addCourse/{idLevel}/{idSubject}")
	Course addCourse(@RequestBody Course course, @PathVariable  long idLevel, @PathVariable  long idSubject) {
		return courseService.addCourse(course, idLevel, idSubject);
	}
	
	@PutMapping("/editCourse/{idCourse}/{idSubject}")
	Course editCourse(@RequestBody Course course, @PathVariable  long idCourse, @PathVariable  long idSubject) {
		return courseService.editCourse(course, idCourse, idSubject);
	}
	
	@GetMapping("/findCourse/{id}")
	Course findCourse(@PathVariable  long id) {
		return courseService.findCourse(id);
	}
	
	@DeleteMapping("/deleteCourse/{idCourse}/{idSubject}")
	void deleteCourse(@PathVariable  long idCourse, @PathVariable  long idSubject) {
		courseService.deleteCourse(idCourse, idSubject);
	}

}

Here, we are creating a class ExamController

src/main/java/com/school/controller/ExamController.java):





package com.school.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.school.modal.Exam;
import com.school.service.ExamService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class ExamController {

 @Autowired
 private ExamService examService;

	@PostMapping("/addExam/{idSchool}/{idSubject}")
	Exam addExam(@RequestBody Exam exam, @PathVariable  long idSchool, @PathVariable  long idSubject) {
		return examService.addExam(exam, idSchool, idSubject);
	}

	@PutMapping("/editExam/{id}")
	Exam editExam(@RequestBody Exam exam, @PathVariable  long id) {
		return examService.editExam(exam, id);
	}

	@GetMapping("/findExam/{id}")
	Exam findExam(@PathVariable  long id) {
		return examService.findExam(id);
	}

	@DeleteMapping("/deleteExam/{id}/{idSubject}")
	void deleteExam(@PathVariable  long id, @PathVariable  long idSubject) {
		examService.deleteExam(id, idSubject);
	}
	
	@GetMapping("/findExamsForSchool/{id}")
	List<Exam> findExamsForSchool(@PathVariable  long id) {
		return examService.findExamsForSchool(id);
	}

}

Here, we are creating a class LevelController

src/main/java/com/school/controller/LevelController.java):





package com.school.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.school.modal.Level;
import com.school.service.LevelService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class LevelController {
	
 @Autowired
 private LevelService levelService;
	
	@PostMapping("/addLevel/{id}")
	Level addLevel(@RequestBody Level level, @PathVariable  long id) {
		return levelService.addLevel(level, id);
	}
	@PutMapping("/editLevel/{id}")
	Level editLevel(@RequestBody Level level, @PathVariable  long id) {
		return levelService.editLevel(level, id);
	}
	
	@GetMapping("/findLevel/{id}")
	Level findLevel(@PathVariable  long id) {
		return levelService.findLevel(id);
	}
	@DeleteMapping("/deleteLevel/{id}")
	void deleteLevel(@PathVariable  long id) {
		levelService.deleteLevel(id);
	}
	@PostMapping("/addLevelToRoom/{idRoom}/{idLevel}")
	void addLevelToRoom(@PathVariable  long idRoom, @PathVariable  long idLevel) {
		levelService.addLevelToRoom(idRoom, idLevel);
	}
	
	@GetMapping("/findLevels")
	List<Level> findLevels() {
		return levelService.findLevels();
	}
	@DeleteMapping("/deleteLevelFromRoom/{idRoom}/{idLevel}")
	void deleteLevelFromRoom(@PathVariable  long idRoom, @PathVariable  long idLevel)  {
	    levelService.deleteLevelFromRoom(idRoom, idLevel);
	}
	@GetMapping("/findLevelForRoom/{idRoom}")
	Level findLevelForRoom(@PathVariable  long idRoom) {
		return levelService.findLevelForRoom(idRoom);
	}
}

Here, we are creating a class ManagerConntroller

src/main/java/com/school/controller/ManagerConntroller.java):





package com.school.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.school.modal.Manager;
import com.school.service.ManagerService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class ManagerConntroller {

 @Autowired
 private ManagerService managerService;

	@PostMapping("/addManager/{id}")
	Manager addManager(@RequestBody Manager manager, @PathVariable  long id) {
		return managerService.addManager(manager, id);
	}

	@PutMapping("/editManager/{id}")
	Manager editManager(@RequestBody Manager manager, @PathVariable  long id) {
		return managerService.editManager(manager, id);
	}

	@GetMapping("/findManager/{id}")
	Manager findManager(@PathVariable  long id) {
		return managerService.findManager(id);
	}
	
	@GetMapping("/findManagerForSchool/{id}")
	Manager findManagerForSchool(@PathVariable  long id) {
		return managerService.findManagerForSchool(id);
	}

	@DeleteMapping("/deleteManager/{id}/{idSchhol}")
	void deleteManager(@PathVariable  long id, @PathVariable  long idSchool) {
		managerService.deleteManager(id, idSchhol);
	}

}

Here, we are creating a class NoteController

src/main/java/com/school/controller/NoteController.java):





package com.school.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.school.modal.Note;
import com.school.service.NoteService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class NoteController {

 @Autowired
 private NoteService noteService;

	@PostMapping("/addNote/{id}")
	Note addNote(@RequestBody Note note, @PathVariable  long id) {
		return noteService.addNote(note, id);
	}

	@PutMapping("/editNote/{id}")
	Note editNote(@RequestBody Note note, @PathVariable  long id) {
		return noteService.editNote(note, id);
	}

	@GetMapping("/findNote/{id}")
	Note findNote(@PathVariable  long id) {
		return noteService.findNote(id);
	}

	@DeleteMapping("/deleteNote/{id}")
	void deleteNote(@PathVariable  long id) {
		noteService.deleteNote(id);
	}

}

Here, we are creating a class ProgramController

src/main/java/com/school/controller/ProgramController.java):





package com.school.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.school.modal.Program;
import com.school.service.ProgramService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class ProgramController {
	
 @Autowired
 private ProgramService programService;
	
	@PostMapping("/addProgram/{id}")
	Program addProgram(@RequestBody Program program, @PathVariable  long id) {
		return programService.addProgram(program, id);
	}
	
	@PutMapping("/editProgram/{id}")
	Program editProgram(@RequestBody Program program, @PathVariable  long id) {
		return programService.editProgram(program, id);
	}
	
	@GetMapping("/findProgram/{id}")
	Program findProgram(@PathVariable  long id) {
		return programService.findProgram(id);
	}
	
	@DeleteMapping("/deleteProgram/{id}")
	void deleteProgram(@PathVariable  long id) {
		programService.deleteProgram(id);
	}

}

Here, we are creating a class RoomController

src/main/java/com/school/controller/RoomController.java):





package com.school.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.school.modal.Room;
import com.school.service.RoomService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class RoomController {

 @Autowired
 private RoomService roomService;

	@PostMapping("/addRoom/{id}")
	Room addRoom(@RequestBody Room room, @PathVariable  long id) {
		return roomService.addRoom(room, id);
	}

	@PutMapping("/editRoom/{id}")
	Room editRoom(@RequestBody Room room, @PathVariable  long id) {
		return roomService.editRoom(room, id);
	}

	@GetMapping("/findRoom/{id}")
	Room findRoom(@PathVariable  long id) {
		return roomService.findRoom(id);
	}

	@DeleteMapping("/deleteRoom/{id}")
	void deleteRoom(@PathVariable  long id) {
		roomService.deleteRoom(id);
	}
	
	@GetMapping("/findRoomsForSchool/{id}")
	List<Room> findRoomsForSchool(@PathVariable  long id) {
		return roomService.findRoomsForSchool(id);
	}
}

Here, we are creating a class SchoolController

src/main/java/com/school/controller/SchoolController.java):





package com.school.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.school.modal.School;
import com.school.service.SchoolService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class SchoolController {

 @Autowired
 private SchoolService schoolService;

	@PostMapping("/addSchool")
	School addSchool(@RequestBody School school) {
		return schoolService.addSchool(school);
	}

	@PutMapping("/editSchool/{id}")
	School editSchool(@RequestBody School school, @PathVariable  long id) {
		return schoolService.editSchool(school, id);
	}

	@GetMapping("/findSchool/{id}")
	School findSchool(@PathVariable  long id) {
		return schoolService.findSchool(id);
	}

	@DeleteMapping("/deleteSchool/{id}")
	void deleteSchool(@PathVariable  long id) {
		schoolService.deleteSchool(id);
	}

	@GetMapping("/findSchools")
	List<School> findSchools() {
		return schoolService.findSchools();
	}

}

Here, we are creating a class SchoolingController

src/main/java/com/school/controller/SchoolingController.java):





package com.school.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.school.modal.Schooling;
import com.school.service.SchoolingService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class SchoolingController {

 @Autowired
 private SchoolingService schoolingService;

	@PostMapping("/addSchooling/{id}")
	Schooling addSchooling(@RequestBody Schooling schooling, @PathVariable  long id) {
		return schoolingService.addSchooling(schooling, id);
	}

	@PutMapping("/editSchooling/{id}")
	Schooling editSchooling(@RequestBody Schooling schooling, @PathVariable  long id) {
		return schoolingService.editSchooling(schooling, id);
	}

	@GetMapping("/findSchooling/{id}")
	Schooling findSchooling(@PathVariable  long id) {
		return schoolingService.findSchooling(id);
	}

	@DeleteMapping("/deleteSchooling/{id}")
	void deleteSchooling(@PathVariable  long id) {
		schoolingService.deleteSchooling(id);
	}
	@GetMapping("/findSchoolingsForSchool/{id}")
	List<Schooling> findSchoolingsForSchool(@PathVariable  long id) {
		return schoolingService.findSchoolingsForSchool(id);
	}
}

Here, we are creating a class SubjectController

src/main/java/com/school/controller/SubjectController.java):





package com.school.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.school.modal.Subject;
import com.school.service.SubjectService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class SubjectController {
	
 @Autowired
 private SubjectService subjectService;
	
	@PostMapping("/addSubject/{id}")
	Subject addSubject(@RequestBody Subject subject, @PathVariable  long id) {
		return subjectService.addSubject(subject, id);
	}
	
	@PutMapping("/editSubject/{id}")
	Subject editSubject(@RequestBody Subject subject, @PathVariable  long id) {
		return subjectService.editSubject(subject, id);
	}
	
	@GetMapping("/findSubject/{id}")
	Subject findSubject(@PathVariable  long id) {
		return subjectService.findSubject(id);
	}
	
	@GetMapping("/findSubjectForExam/{id}")
	Subject findSubjectForExam(@PathVariable  long id) {
		return subjectService.findSubjectForExam(id);
	}
	
	@DeleteMapping("/deleteSubject/{id}")
	void deleteSubject(@PathVariable  long id) {
		subjectService.deleteSubject(id);
	}
	@GetMapping("/findAllSubjectsForSchool/{id}")
	List<Subject> findAllSubjectsForSchool(@PathVariable  long id) {
		return subjectService.findAllSubjectsForSchool(id);
	}
	
	@GetMapping("/findSubjectForCourse/{id}")
	Subject findSubjectForCourse(@PathVariable  long id) {
		return subjectService.findSubjectForCourse(id);
	}
	
	@GetMapping("/findSubjectsForSchool/{id}")
	List<Subject> findSubjectsForSchool(@PathVariable  long id) {
		return subjectService.findSubjectsForSchool(id);
	}

}

SchoolApplication

@BookStoreApplication and its use in a simple Spring Boot application. We use the @SpringBootApplication annotation in our Application or Main class to enable a host of features, e.g. Java-based Spring configuration, component scanning, and in particular for enabling Spring

src/main/java/com/school/SchoolApplication.java):





package com.shcool;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;


@SpringBootApplication
public class SchoolApplication {

 public static void main(String[] args) {
   SpringApplication.run(SchoolApplication.class, args);		
   System.out.println("App started....");
  }
  
}

Conclusion

Now we have an overview of Spring Boot example when building a @RestController API.

We also take a look at client-server architecture for REST API using Spring Web MVC & Spring Data JPA, as well, we are gooing to continue with Angular project structure for building a front-end app to make HTTP requests and consume responses.

Building application School with Spring boot and Angular Part 3

Download This Application My School From Github

Building gestion school with Spring boot & Angular

2022-01-18T03:44:00.017-08:00

Getting Started | Building an Application with Spring Boot

Build an application enterprise with Spring boot and Angular use Jpa

Objective:

This tutoral is to develop a application of school management modules, such as the management of: Schools, activities, subjects, exams, rooms, schooling etc.... Using the different techniques and development tools mentioned.

As for the technical aspect, new technologies and good development practices have been used since Maven, which allows to create a standard tree of the code and its resources, to Framework & technologies: Hibernate / JPA, Spring, Spring security, JavaEE, Angular, Typescript... etc.

Used Skills in this project:

Java, SpringBoot, MicroServices, REST WebServices, JPA, Hibernate, MySQL Database, Maven, Angular, GitHub, SpringBoot Embedded Tomcat Server, STS-Eclipse IDE

Tools to be used

° Use any IDE to develop the Spring and Hibernate project. It may be STS/Eclipse/Netbeans. Here, we are using STS (Spring Tool Suite).

° Mysql for the database.

° Use any IDE to develop the Angular project. It may be Visual Studio Code/Sublime. Here, we are using Visual Studio Code.

° Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Spring MVC

Spring Boot Architecture

Introduction mysql to database

MySQL is a database management system that allows you to manage relational databases. It is open source software backed by Oracle. It means you can use MySQL without paying a dime. Also, if you want, you can change its source code to suit your needs. MySQL can run on various platforms UNIX, Linux, Windows, etc. You can install it on a server or even in a desktop. Besides, MySQL is reliable, scalable, and fast.

Introduction to the POM

POM A Project Object Model or POM is the fundamental unit of work in Maven. It is an XML file that contains information about the project and configuration details used by Maven to build the project. It contains default values for most projects. Examples for this is the build directory, which is target; the source directory, which is src/main/java; the test source directory, which is src/main/java; and so on. When executing a task or goal, Maven looks for the POM in the current directory. It reads the POM, gets the needed configuration information, then executes the goal.

pom.xml

    
  
   
 <?xml version="1.0" encoding="UTF-8"?>
 <project xmlns="http://maven.apache.org/POM/4.0.0"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0>/modelVersion>
   <parent>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-parent</artifactId>
	<version>2.4.1</version>
	<relativePath/> 
  </parent>
    
    <groupId>org.school</groupId>
	<artifactId>school</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>school</name>
	<description>Demo project for Spring Boot</description>
    
    <properties>
	 <java.version>1.8</java.version>
    </properties>
    
    <dependencies>
    
   <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-data-jpa</artifactId>
   </dependency>
    
   <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
   </dependency>
   
   <dependency>
	<groupId>javax.validation</groupId>
	<artifactId>validation-api</artifactId>
   </dependency>
   
   <dependency>
	 <groupId>org.springframework.boot</groupId>
	 <artifactId>spring-boot-devtools</artifactId>
     <scope>runtime</scope>
     <optional>true</optional>
   </dependency>
   
   <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
   </dependency>
   
   <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    
  </dependencies>
  
  <build>
    <plugins>
	 <plugin>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-maven-plugin</artifactId>
	 </plugin>
	</plugins>
 </build>
 
 </project>

Properties File

The application.properties file is located in the src/main/resources directory. The code for sample application.properties

We need to create database name it bank

src/main/resources/application.properties

    
   
spring.datasource.url=jdbc:mysql://localhost:3306/school?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
spring.datasource.username=root
spring.activemq.password=
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
spring.jpa.hibernate.ddl-auto=update
server.port=8080
spring.jpa.database=MYSQL

Class Diagram

Modals / Entities

An entity is a lightweight persistence domain object. Typically, an entity represents a table in a relational database, and each entity instance corresponds to a row in that table. The primary programming artifact of an entity is the entity class, although entities can use helper classes.

We need to create these entities in modal package

-> Activity

-> Coefficient

-> Course

-> Exam

-> Level

-> Manager

-> Note

-> PersistableElement

-> Program

-> Room

-> School

-> Schooling

-> Subject

Here, we are creating an Entity

Activity.java This object content type, day, date, startDate, endDate and relational @ManyToOne with School

src/main/java/com/school/model/Activity.java):





package com.school.modal;
import javax.persistence.Entity;
import javax.persistence.ManyToOne;
import javax.persistence.Table;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
@Table(name = "activites")
public class Activity extends PersistableElement {
 private static final long serialVersionUID = 1L;

 private String type;

 private String day;
	
 private String date;
	
 private String startDate;
	
 private String endDate;

 @JsonBackReference(value = "school")
 @ManyToOne
 private School school;
 
 public Activity() {
  super();
 }
 
public Activity(String type, String day, String date, School school) {
   super();
   this.type = type;
   this.day = day;
   this.date = date;
   this.school = school;
 }

 public String getType() {
   return type;
 }

 public void setType(String type) {
   this.type = type;
 }

 public String getDay() {
   return day;
 }

 public void setDate(String date) {
   this.date = date;
 }
 
 public String getDate() {
   return date;
 }
 
 public void setDay(String day) {
   this.day = day;
 }

 public String getStartDate() {
   return startDate;
 }

 public void setStartDate(String startDate) {
   this.startDate = startDate;
 }

 public String getEndDate() {
   return endDate;
 }

 public voidsetEndDate(String endDate) {
   this.endDate = endDate;
 }

 public School getSchool() {
   return school;
 }

 public void setSchool(School school) {
   this.school = school;
 }

}

Here, we are creating an Entity

Coefficient.java This object content id, name, and relational @ManyToOne with Program

src/main/java/com/school/model/Coefficient.java):





package com.school.modal;
import javax.persistence.Entity;
import javax.persistence.ManyToOne;
import javax.persistence.Table;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
@Table(name = "coefficients")
public class Coefficient extends PersistableElement {
 private static final long serialVersionUID = 1L;

 private int grade;

 @JsonBackReference(value = "program")
 @ManyToOne
 private Program program;

 public Coefficient() {
   super();
 }
 public Coefficient(int grade, Program program) {
    super();
    this.grade = grade;
    this.program = program;
 }

 public int getGrade() {
    return grade;
 }

 public void setGrade(int grade) {
   this.grade = grade;
 }

 public Program getProgram() {
   return program;
 }

 public void setProgram(Program program) {
   this.program = program;
 }       
}

Here, we are creating an Entity

Course.java This object content id, name, and relational @ManyToOne with Level and @OneToOne with Subject

src/main/java/com/school/model/Course.java):





package com.school.modal;
import javax.persistence.*;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
@Table(name = "courses")
public class Course extends PersistableElement {
 private static final long serialVersionUID = 1L;

 private String date;
 private String startDate;	
 private String endDate;
	
 @JsonBackReference(value = "subject")
 @OneToOne(cascade = CascadeType.ALL)
 private Subject subject;
	
 @JsonBackReference(value = "level")
 @ManyToOne
 private Level level;
 
 public Course() {
  super();
}
 
 public Course(String date, String startDate, String endDate, Subject subject, Level level) {
   super();
   this.date = date;
   this.startDate = startDate;
   this.endDate = endDate;
   this.subject = subject;
   this.level = level;
 }

 public String getDate() {
   return date;
 }

public void setDate(String date) {
   this.date = date;
 }

 public String getStartDate() {
   return startDate;
 }

public void setStartDate(String startDate) {
   this.startDate = startDate;
 }

 public String getEndDate() {
   return endDate;
 }

public void setEndDate(String endDate) {
   this.endDate = endDate;
 }

 public Subject getSubject() {
   return subject;
 }

public void setSubject(Subject subject) {
   this.subject = subject;
 }

 public Level getLevel() {
   return level;
 }

public void setLevel(Level level) {
   this.level = level;
 }	
}

Here, we are creating an Entity

Exam.java This object content id, name, and relational @ManyToOne with School and Subject and @OneToMany with Note

src/main/java/com/school/model/Exam.java):





package com.school.modal;
import javax.persistence.*;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
@Table(name = "exams")
public class Exam extends PersistableElement {
 private static final long serialVersionUID = 1L;

 private String date;
 private String start;	
 private String end;
 
 @JsonBackReference(value = "school")
 @ManyToOne
 private School school;

 @OneToMany(cascade = CascadeType.ALL, mappedBy = "exam")
 private List<Note> notes;

 @JsonBackReference(value = "subject")
 @ManyToOne
 private Subject subject;
 
 public Exam() {
  super();
 }

public Exam(String date, String start, String end, School school, List<Note> notes, Subject subject) {
   super();
   this.date = date;
   this.start = start;
   this.end = end;
   this.school = school;
   this.notes = notes;
   this.subject = subject;
 }

public String getDate() {
   return date;
 }

public void setDate(String date) {
   this.date = date;
 }

public String getStart() {
   return start;
 }

public void setStart(String start) {
   this.start = start;
 }

public String getEnd() {
   return end;
 }

public void setEnd(String end) {
   this.end = end;
 }

public School getSchool() {
   return school;
 }

public void setSchool(School school) {
   this.school = school;
 }

public List<Note> getNotes() {
   return notes;
 }

public void setNotes(List<Note> notes) {
   this.notes = notes;
 }

public Subject getSubject() {
   return subject;
 }

public void setSubject(Subject subjects) {
   this.subject = subjects;
 }

public void addNote(Note note) {
   if (getNotes() == null) {
    this.notes = new ArrayList<>();
   }
   getNotes().add(note);
   note.setExam(this);
 }
}

Here, we are creating an Entity

Level.java This object content id, name, and relational @ManyToOne with Schooling and @OneToMany Course and @OneToOne with Room

src/main/java/com/school/model/Level.java):




 
package com.school.modal;
import java.util.ArrayList;
import java.util.List;
import javax.persistence.*;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
@Table(name = "levels")
public class Level extends PersistableElement {
 private static final long serialVersionUID = 1L;
	
 @Column(unique = true)
 private String label;
	
 @JsonBackReference(value = "schooling")
 @ManyToOne
 private Schooling schooling;
	
 @OneToMany(cascade = CascadeType.ALL, mappedBy = "level")
 private List<Course> courses;
	
 @JsonBackReference(value = "room")
 @OneToOne
 private Room room;
    
 public Level() {
  super();
}

 public Level(String label, Schooling schooling, List<Course> courses, Room room) {
   super();
   this.label = label;
   this.schooling = schooling;
   this.courses = courses;
   this.room = room;
 }

 public String getLabel() {
    return label;
  }

 public void setLabel(String label) {
    this.label = label;
 }

 public Schooling getSchooling() {
    return schooling;
 }

 public void setSchooling(Schooling schooling) {
   this.schooling = schooling;
 }

 public List<Course> getCourses() {
   return courses;
 }

 public void setCourses(List<Course> courses) {
   this.courses = courses;
 }
	
 public Room getRoom() {
   return room;
 }

 public void setRoom(Room room) {
   this.room = room;
 }

 public void addCourse(Course course) {
    if (getCourses()== null) {
    this.courses =  new ArrayList<>();
 }
   getCourses().add(course);
  course.setLevel(this);
 }
}

Here, we are creating an Entity

Manager.java This object content id, name, and relational @ManyToOne with School

src/main/java/com/school/model/Manager.java):





package com.school.modal;
import javax.persistence.*;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
@Table(name = "managers")
public class Manager extends PersistableElement {
 private static final long serialVersionUID = 1L;

 private String firstName;
 private String lastName;

 @JsonBackReference(value = "school")
 @ManyToOne
 private School school;
 
 public Manager() {
   super();
 }
 
 public Manager(String firstName, String lastName, School school) {
   super();
   this.firstName = firstName;
   this.lastName = lastName;
   this.school = school;
 }

 public long getId() {
    return id;
 }

 public void setId(long id) {
   this.id = id;
 }

 public String getFirstName() {
   return firstName;
 }

 public void setFirstName(String firstName) {
   this.firstName = firstName;
 }

 public String getLastName() {
   return lastName
 }

 public void setLastName(String lastName) {
   this.lastName = lastName;
 }

 public School getSchool() {
    return school;
 }

 public void setSchool(School school) {
   this.school = school;
 }
}

Here, we are creating an Entity

Note.java This object content id, name, and relational @ManyToOne with Exam

src/main/java/com/school/model/Note.java):





package com.school.modal;
import javax.persistence.*;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
@Table(name = "notes")
public class Note extends PersistableElement {
 private static final long serialVersionUID = 1L;

 private double score;

 @JsonBackReference(value = "exam")
 @ManyToOne
 private Exam exam;
 
 public Note() {
  super();
 }

 public Note(double score, Exam exam) {
    super();
    this.score = score;
    this.exam = exam;
 }

 public double getScore() {
    return score;
 }

 public void setScore(double score) {
   this.score = score;
 }

 public Exam getExam() {
   return exam;
 }

 public void setExam(Exam exam) {
   this.exam = exam;
 }
}

Here, we are creating an Entity

PersistableElement.java This object content id, createdAt, and description This class is abstract for extends for all entities

src/main/java/com/school/model/PersistableElement.java):





package com.school.modal;

import java.io.Serializable;
import java.util.Date;

import javax.persistence.Column;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.MappedSuperclass;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;

@MappedSuperclass
public abstract class PersistableElement implements Serializable {

 /**
  * 
  */
 private static final long serialVersionUID = 1L;
 
 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private long id;
	
 @Temporal(TemporalType.TIMESTAMP)
 private Date createdAt;
	
 @Column(columnDefinition = "TEXT")
 private String description;
 
 public long getId() {
   return id;
 }

 public void setId(long id) {
   this.id = id;
 }

 public Date getCreatedAt() {
   return createdAt;
 }

 public void setCreatedAt(Date createdAt) {
   this.createdAt = createdAt;
 }

 public String getDescription() {
   return description;
 }

 public void setDescription(String description) {
   this.description = description;
 }
	
}

Here, we are creating an Entity

Program.java This object content name, and relational @ManyToOne with Subject and @OneToMany With Coefficient

src/main/java/com/school/model/Program.java):





package com.school.modal;

import java.util.ArrayList;
import java.util.List;
import javax.persistence.CascadeType;
import javax.persistence.Entity;
import javax.persistence.ManyToOne;
import javax.persistence.OneToMany;
import javax.persistence.Table;

import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
@Table(name = "programs")
public class Program extends PersistableElement {

 private static final long serialVersionUID = 1L;

 private String name;

 @JsonBackReference(value = "subject")
 @ManyToOne
 private Subject subject;
	
 @OneToMany(cascade = CascadeType.ALL, mappedBy = "program")
 private List<Coefficient> coefficients;
 
 public Program() {
  super();
}
 
 public Program(String name, Subject subject, List<Coefficient> coefficients) {
   super();
   this.name = name;
   this.subject = subject;
   this.coefficients = coefficients;
 }

 public String getName() {
   return name;
 }

 public void setName(String name) {
   this.name = name;
 }

 public Subject getSubject() {
   return subject;
 }

 public void setSubject(Subject subject) {
   this.subject = subject;
 }

 public List<Coefficient> getCoefficients() {
   return coefficients;
 }

 public void setCoefficients(List<Coefficient> coefficients) {
   this.coefficients = coefficients;
 }

 public void addCoefficient(Coefficient coefficient) {
   if (getCoefficients() == null) {
      this.coefficients = new ArrayList<>();
    }
  getCoefficients().add(null);
  coefficient.setProgram(this);
 }

}

Here, we are creating an Entity

Room.java This object content code, capacity, and relational @ManyToOne with School and @OneToOne with Level

src/main/java/com/school/model/Room.java):





package com.school.modal;

import javax.persistence.CascadeType;
import javax.persistence.Entity;
import javax.persistence.ManyToOne;
import javax.persistence.OneToOne;
import javax.persistence.Table;

import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
@Table(name = "rooms")
public class Room extends PersistableElement {

 private static final long serialVersionUID = 1L;

 private String code;

 private int capacity;

 @JsonBackReference(value = "school")
 @ManyToOne
 private School school;
	
 @JsonBackReference(value = "level")
 @OneToOne(cascade = CascadeType.ALL)
 private Level level;
 
 public Room() {
   super();
 }
 
 public Room(String code, int capacity, School school, Level level) {
   super();
   this.code = code;
   this.capacity = capacity;
   this.school = school;
   this.level = level;
 }

 public String getCode() {
   return code;
 }

 public void setCode(String code) {
   this.code = code;
 }

 public int getCapacity() {
   return capacity;
 }

 public void setCapacity(int capacity) {
   this.capacity = capacity;
 }

 public School getSchool() {
   return school;
 }

 public void setSchool(School school) {
   this.school = school;
 }

 public Level getLevel() {
   return level;
 }

 public void setLevel(Level level) {
   this.level = level;
 }  
	
}

Here, we are creating an Entity

School.java This object content id, name, city, department, open, close and relational @OneToMany with Activity, Schooling, Exam and Room @OneToOne with Manager

src/main/java/com/school/model/School.java):





package com.school.modal;
import java.util.ArrayList;
import java.util.List;
import javax.persistence.CascadeType;
import javax.persistence.Entity;
import javax.persistence.OneToMany;
import javax.persistence.OneToOne;
import javax.persistence.Table;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
@Table(name = "schools")
public class School extends PersistableElement {

 private static final long serialVersionUID = 1L;

 private String name;

 private String city;

 private String department;

 private String open;

 private String close;

 @OneToMany(cascade = CascadeType.ALL, mappedBy = "school")
 private List<Activity> activities;

 @OneToMany(cascade = CascadeType.ALL, mappedBy = "school")
 private List<Schooling> schoolings;

 @OneToMany(cascade = CascadeType.ALL, mappedBy = "school")
 private List<Exam> exams;

 @OneToMany(cascade = CascadeType.ALL, mappedBy = "school")
 private List<Subject> subjects;

 @OneToMany(cascade = CascadeType.ALL, mappedBy = "school")
 private List<Room> rooms;

 @JsonBackReference(value = "manager")
 @OneToOne(cascade = CascadeType.ALL)
 private Manager manager;

 public School() {
  super();
}
 
 public School(String name, String city, String department, String open, String close,
			List<Activity> activities, List<Schooling> schoolings, List<Exam> exams,
			List<Subject> subjects, List<Room> rooms, Manager manager) {
	super();
   this.name = name;
   this.city = city;
   this.department = department;
   this.open = open;
   this.close = close;
   this.activities = activities;
   this.schoolings = schoolings;
   this.exams = exams;
   this.subjects = subjects;
   this.rooms = rooms;
   this.manager = manager;
 }

 public String getName() {
   return name;
 }

 public void setName(String name) {
   this.name = name;
 }

 public String getCity() {
   return city;
 }

 public void setCity(String city) {
   this.city = city;
 }

 public String getDepartment() {
   return department;
 }

 public void setDepartment(String department) {
   this.department = department;
 }

 public String getOpen() {
   return open;
 }

 public void setOpen(String open) {
   this.open = open;
 }

 public String getClose() {
   return close;
 }

 public void setClose(String close) {
   this.close = close;
 }

 public List<Activity> getActivities() {
   return activities;
 }

 public void setActivities(List<Activity> activities) {
   this.activities = activities;
 }

 public List<Schooling> getSchoolings() {
   return schoolings;
 }

 public void setSchoolings(List<Schooling> schoolings) {
   this.schoolings = schoolings;
 }

 public List<Exam> getExams() {
   return exams;
 }

 public void setExams(List<Exam> exams) {
   this.exams = exams;
 }

 public List<Subject> getSubjects() {
   return subjects;
 }

 public void setSubjects(List<Subject> subjects) {
   this.subjects = subjects;
 }

 public List<Room> getRooms() {
   return rooms;
 }

 public void setRooms(List<Room> rooms) {
   this.rooms = rooms;
 }

 public Manager getManager() {
   return manager;
 }

 public void setManager(Manager manager) {
   this.manager = manager;
 }

 public void addActivity(Activity activity) {
   if (getActivities() == null) {
     this.activities = new ArrayList<>();
    }
   getActivities().add(activity);
   activity.setSchool(this);
 }

 public void addSchooling(Schooling schooling) {
	if (getSchoolings() == null) {
	 this.schoolings = new ArrayList<>();
	 }
   getSchoolings().add(schooling);
   schooling.setSchool(this);
 }

 public void addExam(Exam exam) {
    if (getExams() == null) {
	this.exams = new ArrayList<>();
   }
   getExams().add(exam);
   exam.setSchool(this);
 }

 public void addSubject(Subject matter) {
     if (getSubjects() == null) {
	 this.subjects = new ArrayList<>();
    }
  getSubjects().add(matter);
  matter.setSchool(this);
 }

 public void addRoom(Room room) {
	if (getRooms() == null) {
	 this.rooms = new ArrayList<>();
     }
	getRooms().add(room);
    room.setSchool(this);
  }
}

Here, we are creating an Entity

Schooling.java This object content id, year, and relational @ManyToOne with School @OneToMany with Level

src/main/java/com/school/model/Schooling.java):





package com.school.modal;

import java.util.ArrayList;
import java.util.List;
import javax.persistence.CascadeType;
import javax.persistence.Entity;
import javax.persistence.ManyToOne;
import javax.persistence.OneToMany;
import javax.persistence.Table;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
@Table(name = "schoolings")
public class Schooling extends PersistableElement {
 
 private static final long serialVersionUID = 1L;

 private int year;

 @JsonBackReference(value = "school")
 @ManyToOne
 private School school;
	
 @OneToMany(cascade = CascadeType.ALL, mappedBy = "schooling")
 private List<Level> levels;

 public Schooling() {
  super();
}

 public Schooling(int year, School school, List<Level> levels) {
	super();
   this.year = year;
   this.school = school;
   this.levels = levels;
  }
 
 public int getYear() {
   return year;
 }

 public void setYear(int year) {
   this.year = year;
 }

 public School getSchool() {
   return school;
 }

 public void setSchool(School school) {
   this.school = school;
 }

 public List<Level> getLevels() {
   return levels;
 }

 public void setLevels(List<Level> levels) {
   this.levels = levels;
 }
	
 public void addLevel(Level level) {
	if(getLevels()==null) {
	 this.levels = new ArrayList<>();
	}
	getLevels().add(level);
	level.setSchooling(this);
 }	
}

Here, we are creating an Entity

Subject.java This object content id, name, color and relational @ManyToOne with School

src/main/java/com/school/model/Subject.java):





package com.school.modal;

import java.util.ArrayList;
import java.util.List;
import javax.persistence.CascadeType;
import javax.persistence.Entity;
import javax.persistence.ManyToOne;
import javax.persistence.OneToMany;
import javax.persistence.OneToOne;
import javax.persistence.Table;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
@Table(name = "subjects")
public class Subject extends PersistableElement {

 private static final long serialVersionUID = 1L;

 private String name;

 private String color;

 @JsonBackReference(value = "school")
 @ManyToOne
 private School school;

 @OneToMany(cascade = CascadeType.ALL, mappedBy = "subject")
 private List<Program> programs;
	
 @JsonBackReference(value = "exam")
 @OneToOne
 private Exam exam;
	
 @JsonBackReference(value = "course")
 @OneToOne
 private Course course;

 public Subject() {
  super();
}
 
 public Subject(String name, String color, 
			School school, List<Program> programs, Exam exam, Course course) {
	super();
   this.name = name;
   this.color = color;
   this.school = school;
   this.programs = programs;
   this.exam = exam;
   this.course = course;
 }
 
 public String getName() {
   return name;
 }

 public void setName(String name) {
   this.name = name;
 }

 public String getColor() {
   return color;
 }

 public void setColor(String color) {
   this.color = color;
 }
	
 public School getSchool() {
   return school;
 }

 public void setSchool(School school) {
   this.school = school;
 }

 public List<Program> getPrograms() {
   return programs;
 }

 public void setPrograms(List<Program> programs) {
   this.programs = programs;
 }
	
 public Exam getExam() {
   return exam;
 }

 public void setExam(Exam exam) {
   this.exam = exam;
 }
	
 public Course getCourse() {
   return course;
 }

 public void setCourse(Course course) {
   this.course = course;
 }

 public void addProgram(Program program) {
   if(getPrograms() == null) {
	  this.programs = new ArrayList<>();
    }
	getPrograms().add(program);
   program.setSubject(this);
  }

}

Building application School with Spring boot and Angular Part 2

Download This Application My School From Github

Building an application Company with Spring boot and Angular Part 3

2022-01-18T03:44:00.015-08:00

Building an application Company with Spring boot and Angular Part 3

Angular 10 Front-end

We will continue to complete this project with add and display Company, Department, Employee and Project

Components

In addition to containing or pointing to the template, the @Component metadata configures, for example, how the component can be referenced in HTML and what services it requires.

- add-company.component.ts
- add-company.component.html

src/app/add-company.component.ts




 import  { Component, OnInit, Inject }  from  '@angular/core';
 import  { Router }  from  '@angular/router';
 import  { Company }  from  '../modal/Modal';
 import  { CompanyService }  from  '../service/company.service';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';

@Component({
  selector: 'app-add-company',
  templateUrl: './add-company.component.html',
  styleUrls: ['./add-company.component.css']
})
export class AddCompanyComponent implements OnInit {
  company: Company = {} as Company;
  progressBar = false;

  constructor(private companyService: CompanyService, @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit(): void {
    if(this.data.idCompany!=null) {
      this.companyService.findCompany(this.data.idCompany).subscribe(company => {
        this.company = company;
      })
    }
  }
 addCompany() {
   this.showProgressBar = true;
   if(this.data.idCompany!=null) {
     this.companyService.editCompany(this.company, this.data.idCompany).subscribe(company => {
       this.company = company;
       window.location.reload();
     })
   } else {
     this.companyService.addCompany(this.company, this.data.idUser).subscribe(company => {
       this.company = company;
       window.location.reload();
     })
   }
 }
}

src/app/add-company.component.html




<div style="margin: auto; width: 100%; border: 3px solid #3f51b5;">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Add company</mat-card-title>
    </mat-card-header>
    <mat-card-content><br><br>
      <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
       <form>
        <mat-form-field appearance="fill" style="width: 100%;">
          <mat-label>Enter name</mat-label>
          <input matInput type="text" placeholder="Name" name="name" [(ngModel)]="company.name" #name="ngModel" required>
        </mat-form-field><br>
        <mat-form-field appearance="fill" style="width: 100%;">
          <mat-label>Enter location</mat-label>
          <input matInput type="text" placeholder="Location" name="location" [(ngModel)]="company.location" #location="ngModel" required>
        </mat-form-field><br>
        <mat-form-field style="width: 100%;">
          <mat-label>Enter description</mat-label>
          <textarea matInput placeholder="Description" name="description" [(ngModel)]="company.description" #description="ngModel"></textarea>
        </mat-form-field><br>
         <button mat-raised-button color="primary" [disabled]="name.invalid || location.invalid || description.invalid" (click)="addCompany()" style="width: 10em !important">Save</button>
      </form>
    </mat-card-content>
  </mat-card>
</div>

src/app/display-company.component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { ActivatedRoute }  from  '@angular/router';
 import  { Company }  from  '../modal/Modal';
 import  { CompanyService }  from  '../service/company.service';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { AddCompanyComponent }  from  '../add-company/add-company.component';
 import  { AddDepartmentComponent }  from  '../add-department/add-department.component';

@Component({
  selector: 'app-display-company',
  templateUrl: './display-company.component.html',
  styleUrls: ['./display-company.component.css']
})
export class DisplayCompanyComponent implements OnInit {
  company: Company = {} as Company;
  id: number;

  constructor(private companyService: CompanyService, private route: ActivatedRoute,
    private dialog: MatDialog) {
      this.route.params.subscribe(
        params => {
          this.id = this.route.snapshot.params.id;
          this.companyService.findCompany(this.id).subscribe(company => {
            this.company = company;
          })
        }
      )
    }
    
  ngOnInit(): void { }

  editCompany(idCompany) {
    this.dialog.open(AddCompanyComponent, {
      data: {idCompany},
      height: '400px',
      width: '400px',
      })
}
  deleteCompany(idCompany) {
   if(confirm('Are you sure')) {
     this.companyService.deleteCompany(idCompany).subscribe(() => {
      window.location.replace(`/dashbaord`);
     })
   }
  }
  addDepartment(idCompany) {
    this.dialog.open(AddDepartmentComponent, {
      data: {idCompany},
      height: '400px',
      width: '400px',
      })
  }
}

src/app/display-company.component.html




<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>Company: {{company.name}}</mat-card-title>
    <mat-card-subtitle>Location: {{company.location}}</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p style="background: #f5f6fa; padding: 15px;border-radius: 6px; color: rgba(0,0,0,.54);">
      {{company.description}}
    </p>
    <hr>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button color="primary" (click)="addDepartment(company.id)">Add department</button>
    <button mat-button color="accent" (click)="editCompany(company.id)">Update</button>
    <button mat-button color="warn" (click)="deleteCompany(company.id)">Delete</button>
    <button mat-button disabled>{{company.createAt|date}}</button>
  </mat-card-actions>
</mat-card>

src/app/add-department.component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Department }  from  '../modal/Modal';
 import  { DepartmentService }  from  '../service/department.service';

@Component({
  selector: 'app-add-department',
  templateUrl: './add-department.component.html',
  styleUrls: ['./add-department.component.css']
})
export class AddDepartmentComponent implements OnInit {
  department: Department = {} as Department;
  progressBar = false;

  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private departmentService: DepartmentService) { }

  ngOnInit(): void {
      if(this.data.idDepartment!=null) {
      this.departmentService.findDepartment(this.data.idDepartment).subscribe(department => {
        this.department = department;
      })
    }
  }
  addDeprtmant() {
    this.showProgressBar = true;
     if(this.data.idDepartment!=null) {
     this.departmentService.editDepartment(this.department, this.data.idDepartment).subscribe(department => {
       this.department = department;
       window.location.reload();
     })
    }  else {
      this.departmentService.addDepartment(this.department , this.data.idCompany).subscribe(department => {
        this.department = department;
        window.location.reload();
      })
    }
  }
}

src/app/add-department.component.html




<div style="margin: auto; width: 100%; border: 3px solid #3f51b5;">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Add department</mat-card-title>
    </mat-card-header>
    <mat-card-content><br><br>
      <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
       <form>
        <mat-form-field appearance="fill" style="width: 100%;">
          <mat-label>Enter code</mat-label>
          <input matInput type="text" placeholder="Code" name="code" [(ngModel)]="department.code" #code="ngModel" required>
        </mat-form-field><br>
        <mat-form-field appearance="fill" style="width: 100%;">
          <mat-label>Enter location</mat-label>
          <input matInput type="text" placeholder="Location" name="location" [(ngModel)]="department.location" #location="ngModel" required>
        </mat-form-field><br>
        <mat-form-field style="width: 100%;">
          <mat-label>Enter description</mat-label>
          <textarea matInput placeholder="Description" name="description" [(ngModel)]="department.description" #description="ngModel"></textarea>
        </mat-form-field><br>
         <button mat-raised-button color="primary" [disabled]="code.invalid || location.invalid || description.invalid" (click)="addDeprtmant()" style="width: 10em !important">Save</button>
      </form>
    </mat-card-content>
  </mat-card>
</div>

src/app/display-department.component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { ActivatedRoute }  from  '@angular/router';
 import  { Department }  from  '../modal/Modal';
 import  { DepartmentService }  from  '../service/department.service';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { AddEmployeeComponent }  from  '../add-employee/add-employee.component';
 import  { AddDepartmentComponent}  from  '../add-department/add-department.component';
 import  { AddProjectToDeprtmentComponent }  from  './add-project-to-deprtment/add-project-to-deprtment.component';

@Component({
  selector: 'app-display-department',
  templateUrl: './display-department.component.html',
  styleUrls: ['./display-department.component.css']
})
export class DisplayDepartmenntComponent implements OnInit {

  department: Department = {} as Department;
  idDepartment: number;

  constructor(private route: ActivatedRoute, private departmentService: DepartmentService,
    private dialog: MatDialog) { }

  ngOnInit(): void {
    this.idDepartment = this.route.snapshot.params.id;
    this.departmentService.findDepartment(this.idDepartment).subscribe(department => {
      this.department = department;
    })
  }
  addEmployee(idDepartment) {
    this.dialog.open(AddEmployeeComponent, {
      data: {idDepartment},
      height: '540px',
      width: '400px',
      })
  }
   editDepartment(idDepartment) {
    this.dialog.open(AddDepartmentComponent, {
      data: {idDepartment},
      height: '400px',
      width: '400px',
      })
  }
  addProject(idDepartment) {
  this.dialog.open(AddProjectToDeprtmentComponent, {
      data: {idDepartment},
      height: '400px',
      width: '400px',
      })
  }
 deleteDepartment(idDepartment) {
     if(confirm('Are you sure')) {
       this.departmentService.deleteDepartment(idDepartment).subscribe(() => {
        window.location.replace(`/dashbaord`);
       })
     }
  }
 }

src/app/display-department.component.html




<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>Department: {{department.code}}</mat-card-title>
    <mat-card-subtitle>Location: {{department.location}}</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p style="background: #f5f6fa; padding: 15px;border-radius: 6px; color: rgba(0,0,0,.54);">
      {{department.description}}
    </p>
    <hr>
    <mat-list>
      <div mat-subheader>Projects</div>
      <mat-list-item *ngFor="let pro of department.projects">
        <mat-icon mat-list-icon>folder</mat-icon>
        <div mat-line>{{pro.name}}</div>
        <div mat-line> {{pro.createAt | date}} </div>
        <button mat-raised-button color="primary" [routerLink]="['/dashbaord/display-department/' + department.id + '/display-project/', pro.id]" >Project details</button>
      </mat-list-item>
      <mat-divider></mat-divider>
    </mat-list>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button color="primary" (click)="addEmployee(department.id)">Add employee</button>
    <button mat-button color="primary" (click)="addProject(department.id)">Add project</button>
    <button mat-button color="accent" (click)="editDepartment(department.id)">Update department</button>
    <button mat-button color="warn" (click)="deleteDepartment(department.id)">Delete department</button>
    <button mat-button disabled>{{company.createAt|date}}</button>
    <button mat-button disabled>{{department.createAt|date}}</button>
  </mat-card-actions>
</mat-card>

<div style="margin-top: 15px; margin-bottom: 40px;">
  <router-outlet></router-outlet>
</div>

src/app/add-employee.component.ts




 import  { Component, OnInit, Inject }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Employee }  from  '../modal/Modal';
 import  { EmployeeService }  from  '../service/employee.service';

@Component({
  selector: 'app-add-employee',
  templateUrl: './add-employee.component.html',
  styleUrls: ['./add-employee.component.css']
})
export class AddEmployeeComponent implements OnInit {
  employee: Employee = {} as Employee;
  progressBar = false;

  constructor(@Inject@Inject(MAT_DIALOG_DATA) public data: any, private employeeService: EmployeeService) { }

 ngOnInit(): void  {
    if(this.data.idEmployee!=null) {
      this.employeeService.findEmployee(this.data.idEmployee).subscribe(employee => {
        this.employee = employee;
      })
    }
  }
 addEmployee() {
  this.showProgressBar = true;
   if(this.data.idEmployee!=null) {
     this.employeeService.editEmployee(this.employee, this.data.idEmployee).subscribe(employee => {
       this.employee = employee;
       window.location.reload();
     })
   } else {
     this.employeeService.addEmployee(this.employee, this.data.idDepartment).subscribe(employee => {
       this.employee = employee;
       window.location.reload();
     })
   }
 }
}

src/app/add-employee.component.html




<div style="margin: auto; width: 100%; border: 3px solid #3f51b5;">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Add employee</mat-card-title>
    </mat-card-header>
    <mat-card-content><br><br>
      <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
      
       <form>
        <mat-form-field appearance="fill" style="width: 100%;">
          <mat-label>Enter name</mat-label>
          <input matInput type="text" placeholder="Name" name="name" [(ngModel)]="employee.name" #name="ngModel" required>      
        </mat-form-field><br>
        
        <mat-form-field appearance="fill" style="width: 100%;">
          <mat-label>Enter address</mat-label>
          <input matInput type="text" placeholder="Address" name="address" [(ngModel)]="employee.address" #address="ngModel" required>
        </mat-form-field><br>

        <mat-form-field appearance="fill" style="width: 100%;">
          <mat-label>Enter birth date</mat-label>
          <input matInput type="text" placeholder="Birth date" name="birthDate" [(ngModel)]="employee.birthDate" #birthDate="ngModel" required>
        </mat-form-field><br>
        
        <mat-form-field appearance="fill" style="width: 100%;">
          <mat-label>Enter hiring date</mat-label>
          <input matInput type="text" placeholder="Hiring date" name="hiringDate" [(ngModel)]="employee.hiringDate" #hiringDate="ngModel" required>
        </mat-form-field><br>  
               
        <mat-form-field appearance="fill" style="width: 100%;">
          <mat-label>Enter salary</mat-label>
          <input matInput type="number" placeholder="Salary" name="salary" [(ngModel)]="employee.salary" #salary="ngModel" required>
        </mat-form-field><br>  
        
      <button mat-raised-button color="primary" [disabled]="name.invalid || salary.invalid || address.invalid || birthDate.invalid || hiringDate.invalid" (click)="addEmployee()" style="width: 10em !important">Save</button>
      </form>
    </mat-card-content>
  </mat-card>
</div>

src/app/display-employee.component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { ActivatedRoute}  from  '@angular/router';
 import  { Employee, EmployeePhone, Project}  from  '../modal/Modal';
 import  { EmployeeService }  from  '../service/employee.service';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { AddEmployeeComponent }  from  '../add-employee/add-employee.component';
 import  { AddProjectToEmployeComponent }  from  '../add-project-to-employe/add-project-to-employe.component';
 import  { AddEmployeePhoneComponent }  from  '../add-employee-phone/add-employee-phone.component';
 import  { EmployeePhoneService }  from  '../service/employee-phone.service';
 import  { ProjectService }  from  '../service/project.service';

@Component({
  selector: 'app-display-employee',
  templateUrl: './display-employee.component.html',
  styleUrls: ['./display-employee.component.css']
})
export class DisplayEmployeeComponent implements OnInit {
  employeePhones: EmployeePhone[];
  projects: Project[];  
  employee: Employee = {} as Employee;
  idEmployee: number;

  constructor(private employeeService: EmployeeService, private route: ActivatedRoute,
    private dialog: MatDialog, private employeePhoneService: EmployeePhoneService,
     private projectService: ProjectService) {
      this.route.params.subscribe(
        params => {
          this.idEmployee = this.route.snapshot.params.id;
          this.projectService.findProjectsForEmplopyee(this.idEmployee).subscribe(projects => {
            this.projects = projects;
          });
          this.employeeService.findEmployee(this.idEmployee).subscribe(employee => {
            this.employee = employee;
            this.employeePhoneService.findEmployeePhones(this.idEmployee).subscribe(employeePhones => {
              this.employeePhones = employeePhones;
            })
          })
        }
      )
    }
  deleteEmployee(idEmployee) {
    if(confirm('Are you sure')) {
      this.employeeService.deleteEmployee(idEmployee).subscribe(() => {
        window.location.replace(`/dashbaord`);
      })
    }
  }
 editEmployee(idEmployee) {
  this.dialog.open(AddEmployeeComponent, {
      data: {idEmployee},
      height: '540px',
      width: '400px',
      })
  }
 addProjectToEmployee(idEmployee) {
  this.dialog.open(AddProjectToEmployeComponent, {
      data: {idEmployee},
      height: '220px',
      width: '400px',
      })
  }
 addPhone(idEmployee) {
  this.dialog.open(AddEmployeePhoneComponent, {
      data: {idEmployee},
      height: '250px',
      width: '400px',
      })
  }
 editPhoone(idPhone) {
  this.dialog.open(AddEmployeePhoneComponent, {
      data: {idPhone},
      height: '250px',
      width: '400px',
      })
  }
 deletePhoone(idPhone) {
   if(confirm('Are you sure')) {
     this.employeePhoneService.deleteEmployeePhone(idPhone).subscribe(() => {
       window.location.reload();
     })
   }
  }
 deleteProjectFromEmployee(idEmployee, idProject) {
    if(confirm('Are you sure')){
     this.projectService.deleteProjectFromEmployee(idEmployee, idProject).subscribe(() => {
      window.location.reload();
     })
    }
  }

}

src/app/display-employee.component.html




<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>Name: {{employee.name}}</mat-card-title>
    <mat-card-subtitle>Address: {{employee.address}}</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <hr>
    
     <div style="background: #f5f6fa; padding: 15px;border-radius: 6px;">
        <mat-list role="list">
          <mat-list-item role="listitem">Birth date: {{employee.birthDate}}</mat-list-item>
          <mat-list-item role="listitem">Hiring date: {{employee.hiringDate}}</mat-list-item>
          <mat-list-item role="listitem" color="accent">Salary: {{employee.salary}}</mat-list-item>
        </mat-list>
      </div>
    <hr>
    <div style="background-color: #ecf0f1; padding: 15px;border-radius: 6px;">
    <mat-list>
      <div mat-subheader>Phones</div>
      <mat-list-item *ngFor="let phone of employeePhones">
        <mat-icon mat-list-icon>phone</mat-icon>
        <div mat-line>{{phone.phone}} </div>
        <i class="fas fa-edit" style="cursor: pointer; color: cadetblue; margin-right: 15px;" (click)="editPhoone(phone.id)"></i>
        <i class="fas fa-trash-alt" style="cursor: pointer; color: #c0392b;" (click)="deletePhoone(phone.id)"></i>
      </mat-list-item>
      </mat-list>
      </div>
      <hr>
      <div style="background-color: #dcdde1; padding: 15px;border-radius: 6px; color: rgba(0,0,0,.54);">
        <mat-list>
          <div mat-subheader>Projects</div>
          <mat-list-item *ngFor="let pro of projects">
            <mat-icon mat-list-icon>model_training</mat-icon>
            <div mat-line>{{pro.name}}</div>
            <i class="fas fa-eye-slash" style="cursor: pointer; color: #8e44ad; margin-right: 15px;"
            [routerLink]="['/dashbaord/display-project-employee/', pro.id]"></i>
            <i class="fas fa-trash-alt" style="cursor: pointer; color: #c0392b;"
            (click)="deleteProjectFromEmployee(employee.id, pro.id)"></i>
          </mat-list-item>
          </mat-list>
       </div>
       
  </mat-card-content>
  <mat-card-actions>
    <button mat-button color="primary" (click)="addProjectToEmployee(employee.id)">Add project</button>
    <button mat-button color="primary" (click)="addPhone(employee.id)">Add phone</button>
    <button mat-button color="accent" (click)="editEmployee(employee.id)">Update employee</button>
    <button mat-button color="warn" (click)="deleteEmployee(employee.id)">Delete employee</button>
    <button mat-button disabled>{{company.createAt|date}}</button>
  </mat-card-actions>
</mat-card>

src/app/add-employee-phone.component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { EmployeePhone }  from  '../modal/Modal';
 import  { EmployeePhoneService }  from  '../service/employee-phone.service';

@Component({
  selector: 'app-add-employee-phone',
  templateUrl: './add-employee-phone.component.html',
  styleUrls: ['./add-employee-phone.component.css']
})
export class AddEmployeePhoneComponent implements OnInit {

  employeePhone: EmployeePhone = {} as EmployeePhone;
  progressBar = false;

  constructor(@Inject(MAT_DIALOG_DATA) public data: any,  private employeePhoneService: EmployeePhoneService) { }

  ngOnInit(): void  {
    if(this.data.idPhone!=null) {
      this.employeePhoneService.findEmployeePhone(this.data.idPhone).subscribe(employeePhone => {
        this.employeePhone = employeePhone;
      })
    }
  }
  addPhone() {
    this.showProgressBar = true;
    if(this.data.idPhone!=null) {
      this.employeePhoneService.editEmployeePhone(this.employeePhone, this.data.idPhone).subscribe(employeePhone => {
        this.employeePhone = employeePhone;
        window.location.reload();
      })
    } else {
      this.employeePhoneService.addEmployeePhone(this.employeePhone, this.data.idEmployee).subscribe(employeePhone => {
        this.employeePhone = employeePhone;
        window.location.reload();
      })
    }

  }
}

src/app/add-employee-phone.component.html




<div style="margin: auto; width: 100%; border: 3px solid #3f51b5;">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Add employee phone</mat-card-title>
    </mat-card-header>
    <mat-card-content><br><br>
      <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
       <form>
        <mat-form-field appearance="fill" style="width: 100%;">
          <mat-label>Enter phone</mat-label>
          <input matInput type="number" placeholder="Phone" name="code" [(ngModel)]="employeePhone.phone" #phone="ngModel" required>
        </mat-form-field><br>
        <button mat-raised-button color="primary" [disabled]="phone.invalid" (click)="addPhone()" style="width: 10em !important">Save</button>
      </form>
    </mat-card-content>
  </mat-card>
</div>

src/app/display-employee-phone.component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { ActivatedRoute }  from  '@angular/router';
 import  { Project }  from  '../modal/Modal';
 import  { ProjectService }  from  '../service/project.service';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { AddProjectToDeprtmentComponent }  from  '../add-project-to-deprtment/add-project-to-deprtment.component';

@Component({
  selector: 'app-display-project-employee',
  templateUrl: './display-project-employee.component.html',
  styleUrls: ['./display-project-employee.component.css']
})
export class DisplayProjectEmployeeComponent implements OnInit {
  project: Project = {} as Project;
  id: number;

  constructor(private projectService: ProjectService, private route: ActivatedRoute,
    private dialog: MatDialog) {
    this.route.params.subscribe(
      params => {
        this.id = this.route.snapshot.params.id;
        this.projectService.findProject(this.id).subscribe(project => {
          this.project = project;
        })
      }
    )
  }
  
 ngOnInit(): void { }

  deleteProject(id) {
   if(confirm('Are you sure')){
     this.projectService.deleteProejct(id).subscribe(() => {
      window.location.replace(`/dashbaord`);
     });
   }
  }

 editProject(idProject) {
  this.dialog.open(AddProjectToDeprtmentComponent, {
      data: {idProject},
      height: '480px',
      width: '400px',
      })
  }
}

src/app/display-employee-phone.component.html




<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>{{project.name}}</mat-card-title>
    <mat-card-subtitle>{{project.createAt|date}}</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p style="background: #f5f6fa; padding: 15px;border-radius: 6px; color: rgba(0,0,0,.54);">
      {{project.description}}
    </p>
    <hr>

  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button color="primary" *ngIf="project.process==['TODO']">{{project.process}}</button>
    <button mat-raised-button color="accent" *ngIf="project.process==['WORKON']">{{project.process}}</button>
    <button mat-raised-button color="warn" *ngIf="project.process==['DONE']">{{project.process}}</button>
    <button mat-button color="primary" (click)="editProject(project.id)">Edit project</button>
    <button mat-button color="accent" (click)="deleteProject(project.id)">Delete project</button>
  </mat-card-actions>
</mat-card>

src/app/add-project-to-deprtment.component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Project }  from  '../modal/Modal';
 import  { ProjectService }  from  '../service/project.service';

@Component({
  selector: 'app-add-project-to-deprtment',
  templateUrl: './add-project-to-deprtment.component.html',
  styleUrls: ['./add-project-to-deprtment.component.css']
})
export class AddProjectToDeprtmentComponent implements OnInit {
  process: any = {};
  project: Project = {} as Project;
  progressBar = false;

  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private projectService: ProjectService) { }

  ngOnInit(): void {
    if(this.data.idProject!=null) {
      this. projectService.findProject(this.data.idProject).subscribe(project => {
        this.project = project
      })
  }
}
 setProcess(e) {
  this.process = e;
 }
addProject() {
  this.showProgressBar = true;
  this.project.process = this.process;
  if(this.data.idProject!=null) {
    this.projectService.editProject(this.project, this.data.idProject).subscribe(project => {
      this.project = project;
      window.location.reload();
    })
  } else {
    this.projectService.addProjectToDeprtment(this.project, this.data.idDepartment).subscribe(project => {
      this.project = project;
      window.location.reload();
    })
  }
 }
}

src/app/add-project-to-deprtment.component.html




<div style="margin: auto; width: 100%; border: 3px solid #3f51b5;">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Add project to department</mat-card-title>
    </mat-card-header>
    <mat-card-content><br><br>
      <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
       <form>
        <mat-form-field appearance="fill" style="width: 100%;">
          <mat-label>Enter name</mat-label>
          <input matInput type="text" placeholder="Name" name="name" [(ngModel)]="project.name" #name="ngModel" required>
        </mat-form-field><br>
        
         <mat-label>Enter description</mat-label>
         <textarea matInput placeholder="Description" name="description" [(ngModel)]="project.description" #description="ngModel"></textarea>
        </mat-form-field><br>
        
        <label style="font-weight: bold;">Process</label><br><br>
        <mat-radio-group name="process" [(ngModel)]="process" (ngModelChange)="setProcess($event)">
          <mat-radio-button [checked]="project.process==['TODO']" [value]="'TODO'"> To do </mat-radio-button><br>
          <mat-radio-button [checked]="project.process==['WORKON']" [value]="'WORKON'" style="margin: 10px 0"> Workon</mat-radio-button><br>
          <mat-radio-button [checked]="project.process==['DONE']" [value]="'DONE'"> Done </mat-radio-button><br>
        </mat-radio-group><br>       
        <button mat-raised-button color="primary" [disabled]="name.invalid || description.invalid" (click)="addCompany()" style="width: 10em !important">Save</button>        
      </form>
    </mat-card-content>
  </mat-card>
</div>

src/app/display-project.component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { ActivatedRoute }  from  '@angular/router';
 import  { Project }  from  '../modal/Modal';
 import  { ProjectService }  from  '../service/project.service';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { AddProjectToDeprtmentComponent }  from  '../add-project-to-deprtment/add-project-to-deprtment.component';

@Component({
  selector: 'app-display-project',
  templateUrl: './display-project.component.html',
  styleUrls: ['./display-project.component.css']
})
export class HomeComponent implements OnInit {
  project: Project = {} as Project;
  id: number;
 
  constructor(private projectService: ProjectService, private route: ActivatedRoute,
    private dialog: MatDialog) {
    this.route.params.subscribe(
      params => {
        this.id = this.route.snapshot.params.id;
        this.projectService.findProject(this.id).subscribe(project => {
          this.project = project;
        })
      }
    )
  }

 ngOnInit(): void { }

  deleteProject(id) {
   if(confirm('Are you sure')){
     this.projectService.deleteProejct(id).subscribe(() => {
      window.location.replace(`/dashbaord`);
     });
   }
  }

 editProject(idProject) {
  this.dialog.open(AddProjectToDeprtmentComponent, {
      data: {idProject},
      height: '480px',
      width: '400px',
      })
  }
}

src/app/display-project.component.html




<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>{{project.name}}</mat-card-title>
    <mat-card-subtitle>{{project.createAt|date}}</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p style="background: #f5f6fa; padding: 15px;border-radius: 6px; color: rgba(0,0,0,.54);">
      {{project.description}}
    </p>
    <hr>

  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button color="primary" *ngIf="project.process==['TODO']">{{project.process}}</button>
    <button mat-raised-button color="accent" *ngIf="project.process==['WORKON']">{{project.process}}</button>
    <button mat-raised-button color="warn" *ngIf="project.process==['DONE']">{{project.process}}</button>
    <button mat-button color="primary" (click)="editProject(project.id)">Edit project</button>
    <button mat-button color="accent" (click)="deleteProject(project.id)">Delete project</button>
  </mat-card-actions>
</mat-card>

src/app/add-project-to-employee.component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { ActivatedRoute }  from  '@angular/router';
 import  { Project }  from  '../modal/Modal';
 import  { ProjectService }  from  '../service/project.service';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';

@Component({
  selector: 'app-add-project-to-employe',
  templateUrl: './add-project-to-employe.component.html',
  styleUrls: ['./add-project-to-employe.component.css']
})
export class AddProjectToEmployeComponent implements OnInit {
  projects: Project[];
  progressBar = false;

  constructor(private projectService: ProjectService, @Inject(MAT_DIALOG_DATA) public data: any,
  private route: ActivatedRoute) {
    this.route.params.subscribe(
      params => {
        this.projectService.findProjects().subscribe(projects => {
          this.projects = projects;
          this.projectService.findProjectsForEmplopyee(this.data.idEmployee).subscribe(filterProjects => {
            filterProjects.forEach(pro => {
            this.projects = this.projects.filter(p => p.id !== pro.id);
          })
          })
        })
      }
    )
   }
   
ngOnInit(): void { }

AddProjectToEmployee(e) {
  this.projectService.addProjectToEmployee(this.data.idEmployee, e.value).forEach(() => {
    window.location.replace(`/dashbaord`);
  })
 }
}

src/app/add-project-to-employee.component.html




<div style="margin: auto; width: 100%; border: 3px solid #3f51b5;">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Add project to employee</mat-card-title>
    </mat-card-header>
    <mat-card-content><br><br>
      <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
       <form>
        
        <mat-form-field style="width: 100%;">
          <mat-label>Choose a project</mat-label>
          <mat-select (selectionChange)="AddProjectToEmployee($event)">
            <mat-option *ngFor="let pro of projects" [value]="pro.id">{{pro.name}}</mat-option>
          </mat-select>
        </mat-form-field>
        
      </form>
    </mat-card-content>
  </mat-card>
</div>

Add the AppRoutingModule

In Angular, the best practice is to load and configure the router in a separate, top-level module that is dedicated to routing and imported by the root AppModule.

By convention, the module class name is AppRoutingModule and it belongs in the app-routing.module.ts in the src/app folder.

app-routing-module.ts

src/app/app-routing.module.ts




 import  { LoginComponent }  from  './login/login.component';
 import  { DashboardComponent}  from  './dashboard/dashboard.component';
 import  { NgModule }  from  '@angular/core';
 import  { DisplayCompanyComponent }  from  './display-company/display-company.component';
 import  { Routes, RouterModule  }  from  '@angular/router';
 import  { DisplayDepartmenntComponent }  from  './display-departmennt/display-departmennt.component';
 import  { DisplayEmployeeComponent }  from  './display-employee/display-employee.component';
 import  { DisplayProjectComponent }  from  './display-project/display-project.component';
 import  { DisplayProjectEmployeeComponent }  from  './display-project-employee/display-project-employee.component';

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'dashbaord',
    component: DashboardComponent,
    children: [
      {
        path: 'display-company/:id',
        component: DisplayCompanyComponent
      },
      {
        path: 'display-department/:id',
        component: DisplayDepartmenntComponent,
        children: [
          {
            path: 'display-project/:id',
            component: DisplayProjectComponent
          }
        ]
      },
      {
        path: 'display-employee/:id',
        component: DisplayEmployeeComponent
      },
      {
        path: 'display-project-employee/:id',
        component: DisplayProjectEmployeeComponent
      }
    ]
  },
];

@NgModule({
  declarations: [],
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

NgModules and JavaScript modules

app-module.ts

src/app/app-module.ts




 import  { BrowserModule }  from  '@angular/platform-browser';
 import  { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA }  from  '@angular/core';
 import  { HttpClientModule }  from  '@angular/common/http';
 import  { AppComponent }  from  './app.component';
 import  { AppRoutingModule }  from  './app-routing.module';
 import  { FormsModule }  from  '@angular/forms';
 import  { NoopAnimationsModule }  from  '@angular/platform-browser/animations';
 import  { MaterialModule }  from  './material-module';
 import  { LoginComponent }  from  './login/login.component';
 import  { DashboardComponent }  from  './dashboard/dashboard.component';
 import  { AddCompanyComponent }  from  './add-company/add-company.component';
 import  { DisplayCompanyComponent }  from  './display-company/display-company.component';
 import  { AddDepartmentComponent }  from  './add-department/add-department.component';
 import  { DisplayDepartmenntComponent }  from  './display-departmennt/display-departmennt.component';
 import  { AddEmployeeComponent }  from  './add-employee/add-employee.component';
 import  { DisplayEmployeeComponent }  from  './display-employee/display-employee.component';
 import  { AddProjectToDeprtmentComponent }  from  './add-project-to-deprtment/add-project-to-deprtment.component';
 import  { DisplayProjectComponent }  from  './display-project/display-project.component';
 import  { AddProjectToEmployeComponent }  from  './add-project-to-employe/add-project-to-employe.component';
 import  { DisplayProjectEmployeeComponent }  from  './display-project-employee/display-project-employee.component';
 import  { AddEmployeePhoneComponent }  from  './add-employee-phone/add-employee-phone.component';
 import  { DatePipe }  from  '@angular/common';

@NgModule({
  declarations: [
    AppComponent,
    AppComponent,
    LoginComponent,
    DashboardComponent,
    AddCompanyComponent,
    DisplayCompanyComponent,
    AddDepartmentComponent,
    DisplayDepartmenntComponent,
    AddEmployeeComponent,
    DisplayEmployeeComponent,
    AddProjectToDeprtmentComponent,
    DisplayProjectComponent,
    AddProjectToEmployeComponent,
    DisplayProjectEmployeeComponent,
    AddEmployeePhoneComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    NoopAnimationsModule,
    MaterialModule,
    AppRoutingModule
  ],
  providers: [DatePipe],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ]
})
export class AppModule { }

Conclusion

Now we have an overview of Angular 10 + Spring Boot App.

Building an application Company with Spring boot and Angular Part 1

Download My Company Application From Github

Building an application Company with Spring boot and Angular Part 1

2022-01-18T03:43:00.021-08:00

Getting Started | Building an Application with Spring Boot

Build an application enterprise with Spring boot and Angular use Jpa

Objective:

In this tutorial We will build an application Company To display departments with code, location and description, employees with name, hiring date, salary etc... and projects with name, description and process. Each employee can have one project or many projects to work on and every user can management the functionality Add, update or delete.

Used Skills in this project:

Java, SpringBoot, MicroServices, REST WebServices, JPA, Hibernate, MySQL Database, Maven, Angular, GitHub, SpringBoot Embedded Tomcat Server, STS-Eclipse IDE

Tools to be used

° Use any IDE to develop the Spring and Hibernate project. It may be STS/Eclipse/Netbeans. Here, we are using STS (Spring Tool Suite).

° Mysql for the database.

° Use any IDE to develop the Angular project. It may be Visual Studio Code/Sublime. Here, we are using Visual Studio Code.

° Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Spring MVC

Spring Boot Architecture

Introduction mysql to database

Introduction to the POM

pom.xml

    
  
   
 <?xml version="1.0" encoding="UTF-8"?>
 <project xmlns="http://maven.apache.org/POM/4.0.0"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0>/modelVersion>
   <parent>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-parent</artifactId>
	<version>2.4.1</version>
	<relativePath/> 
  </parent>
    
    <groupId>org.company</groupId>
	<artifactId>company</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>company</name>
	<description>Demo project for Spring Boot</description>
    
    <properties>
	 <java.version>1.8</java.version>
    </properties>
    
    <dependencies>
    
   <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-data-jpa</artifactId>
   </dependency>
    
   <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
   </dependency>
   
   <dependency>
	<groupId>javax.validation</groupId>
	<artifactId>validation-api</artifactId>
   </dependency>
   
   <dependency>
	 <groupId>org.springframework.boot</groupId>
	 <artifactId>spring-boot-devtools</artifactId>
     <scope>runtime</scope>
     <optional>true</optional>
   </dependency>
   
   <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
   </dependency>
   
   <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    
  </dependencies>
  
  <build>
    <plugins>
	 <plugin>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-maven-plugin</artifactId>
	 </plugin>
	</plugins>
 </build>
 
 </project>

Properties File

The application.properties file is located in the src/main/resources directory. The code for sample application.properties

We need to create database name it bank

src/main/resources/application.properties

    
   
spring.datasource.url=jdbc:mysql://localhost:3306/company?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
spring.datasource.username=root
spring.activemq.password=
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
spring.jpa.hibernate.ddl-auto=update
server.port=8080
spring.jpa.database=MYSQL

Class Diagram

Modals / Entities

We need to create these entities in modal package

-> Company

-> Department

-> Employee

-> EmployeePhone

-> Project

-> User

Here, we are creating an Entity

Company.java This object content id, name, location, createAt and relational @ManyToOne User and @OneToMany with Department

src/main/java/com/company/model/Company.java):





package com.company.modal;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import javax.persistence.*;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
public class Company {

 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private long id;

 @Column(unique = true)
 private String name;

 private String location;

 @Column(columnDefinition = "TEXT")
 private String description;

 @Temporal(TemporalType.TIMESTAMP)
 private Date createAt;

 @ManyToOne
 @JsonBackReference(value = "user")
 private User user;

 @OneToMany(cascade = CascadeType.ALL, mappedBy = "company")
 private List<Department> departments;
 
 public Company() {
  super();
 }

public Company(String name, String location, String description, Date createAt, User user, List<Department> departments) {
  super();
   this.name = name;
   this.location = location;
   this.description = description;
   this.createAt = createAt;
   this.user = user;
   this.departments = departments;
 }

 public long getId() {
   return id;
 }

 public void setId(long id) {
   this.id = id;
 }

 public String getName() {
   return name;
 }

 public void setName(String name) {
   this.name = name;
 }

 public String getLocation() {
   return location;
 }

 public void setLocation(String location) {
   this.location = location;
 }

 public String getDescription() {
   return description;
 }

 public void setDescription(String description) {
   this.description = description;
 }

 public Date getCreateAt() {
   return createAt;
 }

 public void setCreateAt(Date createAt) {
   this.createAt = createAt;
 }

 public User getUser() {
   return user;
 }

 public void setUser(User user) {
   this.user = user;
 }

 public List<Department> getDepartments() {
   return departments;
 }

 public void setDepartments(List<Department> departments) {
   this.departments = departments;
 }

 public void addDepartment(Department department) {
   if(getDepartments() == null) {
   this.departments = new ArrayList<>();
   }
   getDepartments().add(department);
    department.setCompany(this);
 }

}

Here, we are creating an Entity

Department.java This object content id, code, location, createAt and relational @ManyToOne with Company and @OneToMany with Employee and Project

src/main/java/com/company/model/Department.java):





package com.company.modal;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import javax.persistence.*;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
public class Department {

 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private long id;

 @Column(unique = true)
 private String code;

 private String location;

 @Column(columnDefinition = "TEXT")
 private String description;

 @Temporal(TemporalType.TIMESTAMP)
 private Date createAt;

 @ManyToOne
 @JsonBackReference(value = "company")
 private Company company;

 @OneToMany(cascade = CascadeType.ALL, mappedBy = "department")
 private List<Employee> employees;

 @OneToMany(cascade = CascadeType.ALL, mappedBy = "department")
 private List<Project> projects;
 
 public Department() {
  super();
 }

 public Department(String code, String location, String description, Date createAt, Company company, List<Employee> employees, List<Project> projects) {
   super();
   this.code = code;
   this.location = location;
   this.description = description;
   this.createAt = createAt;
   this.company = company;
   this.employees = employees;
   this.projects = projects;
 }

 public long getId() {
   return id;
 }

 public void setId(long id) {
   this.id = id;
 }

 public String getCode() {
   return code;
 }

 public void setCode(String code) {
   this.code = code;
 }

 public String getLocation() {
   return location;
 }

 public void setLocation(String location) {
   this.location = location;
 }

 public String getDescription() {
   return description;
 }

 public void setDescription(String description) {
   this.description = description;
 }

 public Date getCreateAt() {
   return createAt;
 }

 public void setCreateAt(Date createAt) {
   this.createAt = createAt;
 }

 public Company getCompany() {
   return company;
 }

 public void setCompany(Company company) {
   this.company = company;
 }

 public List<Employee> getEmployees() {
   return employees;
 }

 public void setEmployees(List<Employee> employees) {
   this.employees = employees;
 }

 public List<Project> getProjects() {
   return projects;
 }

 public void setProjects(List<Project> projects) {
   this.projects = projects;
 }

 public void addEmployee(Employee employee) {
  if(getEmployees() == null) {
    this.employees = new ArrayList<>();
   }
   getEmployees().add(employee);
   employee.setDepartment(this);
 }

 public void addProjectToDepratment(Project project) {
   if(getProjects() == null) {
    this.projects = new ArrayList<>();
   }
   getProjects().add(project);
   project.setDepartment(this);
 }

}

Here, we are creating an Entity

Employee.java This object content id, name, address, salary, hiringDate, birthDate and relational @ManyToOne with Department @OneToMany With EmployeePhone @ManyToMany with Project

src/main/java/com/company/model/Employee.java):





package com.company.modal;

import java.util.ArrayList;
import java.util.List;
import javax.persistence.*;
import com.fasterxml.jackson.annotation.JsonBackReference;
import com.fasterxml.jackson.annotation.JsonProperty;
import com.fasterxml.jackson.annotation.JsonProperty.Access;

@Entity
public class Employee {

 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private long id;

 private String name;

 private String address;

 private double salary;

 private String hiringDate;

 private String birthDate;

 @ManyToOne
 @JsonBackReference("department")
 private Department department;

 @OneToMany(cascade = CascadeType.ALL, mappedBy = "employee")
 private List<EmployeePhone> employeePhones;

 @JsonProperty(access = Access.WRITE_ONLY)
 @ManyToMany(fetch = FetchType.LAZY)
 @JoinTable(name = "employee_projects", joinColumns = @JoinColumn(name = "project_id"), inverseJoinColumns = @JoinColumn(name = "employee_id"))
 private List<Project> projects;

 public Employee() {
  super();
 }
 public Employee(String name, String address, double salary, String hiringDate, String birthDate, Department department, List<EmployeePhone> employeePhones, List<Project> projects) {
   super();
   this.name = name;
   this.address = address;
   this.salary = salary;
   this.hiringDate = hiringDate;
   this.birthDate = birthDate;
   this.department = department;
   this.employeePhones = employeePhones;
   this.projects = projects;
 }
    
 public long getId() {
   return id;
 }

 public void setId(long id) {
   this.id = id;
 }

 public String getName() {
   return name;
 }

 public void setName(String name) {
   this.name = name;
 }
 
 public String getAddress() {
   return address;
 }

 public void setAddress(String address) {
   this.address = address;
 }

 public double getSalary() {
   return salary;
 }

 public void setSalary(double salary) {
   this.salary = salary;
 }

 public String getHiringDate() {
   return hiringDate;
 }

 public void setHiringDate(String hiringDate) {
   this.hiringDate = hiringDate;
 }

 public String getBirthDate() {
   return birthDate;
 }

 public void setBirthDate(String birthDate) {
   this.birthDate = birthDate;
 }

 public Department getDepartment() {
   return department;
 }

 public void setDepartment(Department department) {
   this.department = department;
 }

 public List<EmployeePhone> getEmployeePhones() {
   return employeePhones;
 }

 public void setEmployeePhones(List<EmployeePhone> employeePhones) {
   this.employeePhones = employeePhones;
 }

 public List<Project> getProjects() {
   return projects;
 }

 public void setProjects(List<Project> projects) {
   this.projects = projects;
 }

 public void addEmployeePhone(EmployeePhone employeePhone) {
   if (getEmployeePhones() == null) {
     this.employeePhones = new ArrayList<>();
    }
    getEmployeePhones().add(employeePhone);
    employeePhone.setEmployee(this);
   }

 public void addProjectToEmploye(Project project) {
   if (getProjects() == null) {
    this.projects = new ArrayList<>();
   }
   if (!getProjects().contains(project)) {
    getProjects().add(project);
    }
  }

}

Here, we are creating an Entity

Arbitrate.java This object content id, phone, and relational @ManyToOne with Employee

src/main/java/com/company/model/Arbitrate.java):





package com.company.modal;
import javax.persistence.*;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
public class EmployeePhone {

 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private long id;

 private String phone;
	
 @ManyToOne
 @JsonBackReference(value = "employee")
 private Employee employee;
 
 public EmployeePhone() {
  super();
 }
 
 public EmployeePhone(String phone, Employee employee) {
   super();
   this.phone = phone;
   this.employee = employee;
 }
    
  public long getId() {
   return id;
 }

 public void setId(long id) {
   this.id = id;
 }

 public String getPhone() {
   return phone;
 }

 public void setPhone(String phone) {
   this.phone = phone;
 }
 
 public Employee getEmployee() {
   return employee;
 }

 public voidsetEmployee(Employee employee) {
   this.employee = employee;
 }
		
}

Here, we are creating an Entity

Project.java This object content id, name, location, createAt and relational @ManyToOne with Employee and Department

src/main/java/com/company/model/Project.java):





package com.company.modal;

import java.util.Date;
import javax.persistence.*;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
public class Project {

 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private long id;

 @Column(unique = true)
 private String name;

 @Column(columnDefinition = "TEXT")
 private String description;

 @Temporal(TemporalType.TIMESTAMP)
 private Date createAt;
 
 @Enumerated(EnumType.STRING)
 private Process process;

 @ManyToOne
 @JsonBackReference(value = "employee")
 private Employee employee;

 @ManyToOne
 @JsonBackReference(value = "department")
 private Department department;

 public Project() {
  super();
 }

 public Project(String name, String description, Date createAt, Process process, Employee employee, Department department) {
  super();
   this.name = name;
   this.description = description;
   this.createAt = createAt;
   this.process = process;
   this.employee = employee;
   this.department = department;
 }

 public long getId() {
   return id;
 }

 public void setId(long id) {
   this.id = id;
 }

 public String getName() {
   return name;
 }

 public void setName(String name) {
   this.name = name;
 }

 public String getDescription() {
   return description;
 }

 public void setDescription(String description) {
   this.description = description;
 }

 public Date getCreateAt() {
   return createAt;
 }

 public void setCreateAt(Date createAt) {
   this.createAt = createAt;
 }

 public Process getProcess() {
   return process;
 }

 public voidsetProcess(Process process) {
   this.process = process;
 }

 public Employee getEmployee() {
   return employee;
 }

 public void setEmployee(Employee employee) {
   this.employee = employee;
 }

 public Department getDepartment() {
   return department;
 }

 public void setDepartment(Department department) {
   this.department = department;
 }

}

Here, we are creating an Entity

User.java This object content id, username, password, admin and relational @ManyToOne with Company

src/main/java/com/company/model/User.java):





package com.company.modal;

import java.util.ArrayList;
import java.util.List;
import javax.persistence.*;

@Entity
public class User {

 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private long id;

 private String username;

 private String password;
 
 private boolean admin;

 @OneToMany(cascade = CascadeType.ALL, mappedBy = "user")
 private List<Company> companies;
 
 public User() {
  super();
 }
 
 public User(String username, String password, boolean admin, List<Company> companies) {
   super();
   this.username = username;
   this.password = password;
   this.admin = admin;
   this.companies = companies;
 }

 public long getId() {
   return id;
 }

 public void setId(long id) {
   this.id = id;
 }

 public String getUsername() {
   return username;
 }

 public void setUsername(String username) {
   this.username = username;
 }

 public String getPassword() {
   return password;
 }

 public void setPassword(String password) {
   this.password = password;
 }

 public boolean isAdmin() {
   return admin;
 }

 public void setAdmin(boolean admin) {
   this.admin = admin;
 }

 public List<Company> getCompanies() {
   return companies;
 }

 public void setCompanies(List<Company> companies) {
   this.companies = companies;
 }

 public void addCompany(Company company) {
   if (getCompanies() == null) {
    this.companies = new ArrayList<>();
   }
    getCompanies().add(company);
     company.setUser(this);
 }

}

Here, we are creating an enum Process

src/main/java/com/company/model/Process.java):




 
package com.company.modal;

public enum Process {
  TODO, WORKON, DONE
}

Spring Data JPA Projections

We need to create these interface dao

-> CompanyDao

-> DepartmentDao

-> EmployeeDao

-> EmployeePhoneDao

-> ProjectDao

-> UserDao

Here, we are creating an interface CompanyDao

src/main/java/com/company/dao/CompanyDao.java):





package com.company.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.company.modal.Company;

@Repository
public interface CompanyDao extends JpaRepository<Company, Long>{

}

Here, we are creating an interface DepartmentDao

src/main/java/com/company/dao/DepartmentDao.java):





package com.company.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.company.modal.Department;

@Repository
public interface DepartmentDao extends JpaRepository<Department, Long>{

}

Here, we are creating an interface EmployeeDao

src/main/java/com/company/dao/EmployeeDao.java):





package com.company.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.company.modal.Employee;

@Repository
public interface EmployeeDao extends JpaRepository<Employee, Long>{

}

Here, we are creating an interface EmployeePhoneDao

src/main/java/com/company/dao/EmployeePhoneDao.java):





package com.company.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.company.modal.EmployeePhone;

@Repository
public interface EmployeePhoneDao extends JpaRepository<EmployeePhone, Long>{

}

Here, we are creating an interface ProjectDao

src/main/java/com/company/dao/ProjectDao.java):





package com.company.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.company.modal.Project;

@Repository
public interface ProjectDao extends JpaRepository<Project, Long>{

}

Here, we are creating an interface UserDao

src/main/java/com/company/dao/UserDao.java):





package com.company.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.company.modal.User;

@Repository
public interface UserDao extends JpaRepository<User, Long>{

}

The services

We will create these interfaces in service package:

-> CompanyService

-> DepartmentService

-> EmployeeService

-> EmployeePhoneService

-> ProjectService

-> UserService

Here, we are creating an interface CompanyService

src/main/java/com/company/service/CompanyService.java):





package com.company.service;
import java.util.List;
import org.springframework.stereotype.Service;
import com.company.modal.Company;

@Service
public interface CompanyService {
	
 Company addCompany(Company company, long id);
	
 Company editCompany(Company company, long id);
	
 Company findCompany(long id);
	
 void deleteCompany(long id);
	
 List<Company> findCompanies();

}

Here, we are creating an interface DepartmentService

src/main/java/com/company/service/DepartmentService.java):





package com.company.service;
import com.company.modal.Department;

@Service
public interface DepartmentService {
	
 Department addDepartment(Department department, long id);
	
 Department editDepartment(Department department, long id);
	
 Department findDepartment(long id);
	
 void deleteDepartment(long id);

}

Here, we are creating an interface EmployeePhoneService

src/main/java/com/company/service/EmployeePhoneService.java):





package com.company.service;
import java.util.List;
import com.company.modal.EmployeePhone;

@Service
public interface EmployeePhoneService {
	
 EmployeePhone addEmployeePhone(EmployeePhone employeePhone, long id);
	
 EmployeePhone editEmployeePhone(EmployeePhone employeePhone, long id);
	
 void deleteEmployeePhone(long id);
	
 List<EmployeePhone> findEmployeePhones(long id);
	
 EmployeePhone findEmployeePhone(long id);

}

Here, we are creating an interface EmployeeService

src/main/java/com/company/service/EmployeeService.java):





package com.company.service;
import java.util.List;
import com.company.modal.Employee;

@Service
public interface EmployeeService {
	
 Employee addEmployee(Employee employee, long id);
	 
 Employee editEmployee(Employee employee, long id);
	 
 Employee findEmployee(long id);
	 
 void deleteEmployee(long id);
	 
 List<Employee> findEmployees();

}

Here, we are creating an interface ProjectService

src/main/java/com/company/service/ProjectService.java):





package com.company.service;
import java.util.List;
import com.company.modal.Project;

@Service
public interface ProjectService {
	
 Project addProjectToEmployee(long idEmployee, long idProject);
 
 Project addProjectToDeprtment(Project project, long id);
 
 Project editProject(Project project, long id;
 
 Project findProject(long id);
 
 void deleteProejct(long id);
 
 List<Project> findProjectsForEmplopyee(long id);

 List<Project> findProjects();

 void deleteProjectFromEmployee(long idEmployee, long idProject);
 
}

Here, we are creating an interface UserService

src/main/java/com/company/model/UserService.java):





package com.company.service;
import java.util.List;
import com.company.modal.User;

@Service
public interface UserService {
	
 User addUser(User user);
  
 List<User> findAllUsers();
  
 User editUser(User user, long id);
  
 User findUserById(long id);
  
 void deleteUser(long id);
  
 User findByUsername(String username);
  
}

The managers classes implementation

We will create these class in the impl package

-> CompanyServiceImpl

-> DepartmentServiceImpl

-> EmployeeService

-> EmployeePhoneServiceImpl

-> ProjectServiceImpl

-> UserServiceImpl

Here, we are creating a class CompanyServiceImpl

src/main/java/com/company/impl/CompanyServiceImpl.java):





package com.company.impl;
import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.company.dao.CompanyDao;
import com.company.dao.UserDao;
import com.company.modal.Company;
import com.company.modal.User;
import com.company.service.CompanyService;

@Transactional
@Component
public class CompanyServiceImpl implements CompanyService{
	
 @Autowired
 private CompanyDao companyDao;
	
 @Autowired
 private UserDao userDao;

 @Override
 public Company addCompany(Company company, long id) {
   User user = userDao.findById(id).orElse(null);
 company.setCreateAt(new Date());
 user.addCompany(company);
 return companyDao.save(company);
}

 @Override
 public Company editCompany(Company company, long id) {
 Company existCompany = companyDao.findById(id).get();
 existCompany.setName(company.getName());
 existCompany.setDescription(company.getDescription());
 existCompany.setLocation(company.getLocation());
 return companyDao.save(existCompany);
}

 @Override
 public Company findCompany(long id) {
 return companyDao.findById(id).get();
}

 @Override
 public void deleteCompany(long id) {
 companyDao.deleteById(id);
}

 @Override
 public List<Company> findCompanies() {
 return companyDao.findAll();
}

}

Here, we are creating a class DepartmentServiceImpl

src/main/java/com/company/impl/DepartmentServiceImpl.java):





package com.company.impl;
import java.util.Date;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.company.dao.CompanyDao;
import com.company.dao.DepartmentDao;
import com.company.modal.Company;
import com.company.modal.Department;
import com.company.service.DepartmentService;

@Transactional
@Component
public class DepartmentServiceImpl implements DepartmentService {
	
 @Autowired
 private DepartmentDao departmentDao;
	
 @Autowired
 private CompanyDao companyDao;

 @Override
 public Department addDepartment(Department department, long id) {
   Company company = companyDao.findById(id).get();
   department.setCreateAt(new Date());
   company.addDepartment(department);
   return departmentDao.save(department);
 }

 @Override
 publicDepartment editDepartment(Department department, long id) {
   Department existDepartment = departmentDao.findById(id).get();
   existDepartment.setCode(department.getCode());
   existDepartment.setLocation(department.getLocation());
   existDepartment.setDescription(department.getDescription());
   return departmentDao.save(existDepartment);
 }

 @Override
 public Department findDepartment(long id) {
   return departmentDao.findById(id).get();
 }

 @Override
 public void deleteDepartment(long id) {
   departmentDao.deleteById(id);
 }

}

Here, we are creating a class EmployeePhoneServiceImpl

src/main/java/com/company/impl/EmployeePhoneServiceImpl.java):





package com.company.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.company.dao.EmployeeDao;
import com.company.dao.EmployeePhoneDao;
import com.company.modal.Employee;
import com.company.modal.EmployeePhone;
import com.company.service.EmployeePhoneService;

@Transactional
@Component
public class EmployeePhoneServiceImpl implements EmployeePhoneService {
	
 @Autowired
 private EmployeePhoneDao employeePhoneDao;
	
 @Autowired
 private EmployeeDao employeeDao;

 @Override
 public EmployeePhone addEmployeePhone(EmployeePhone employeePhone, long id) {
   Employee employee = employeeDao.findById(id).get();
   employee.addEmployeePhone(employeePhone);
   return employeePhoneDao.save(employeePhone);
 }

 @Override
 public EmployeePhone editEmployeePhone(EmployeePhone employeePhone, long id) {
   EmployeePhone exsitEmployeePhone = employeePhoneDao.findById(id).get();
   exsitEmployeePhone.setPhone(employeePhone.getPhone());
   return employeePhoneDao.save(exsitEmployeePhone);
 }

 @Override
 public void deleteEmployeePhone(long id) {
   employeePhoneDao.deleteById(id);
 }

 @Override
 public List<EmployeePhone> findEmployeePhones(long id) {
   Employee employee = employeeDao.findById(id).get();
   return employee.getEmployeePhones();
 }

 @Override
 public EmployeePhone findEmployeePhone(long id) {
   return employeePhoneDao.findById(id).get();
 }	

}

Here, we are creating a class EmployeeServiceImpl

src/main/java/com/company/impl/EmployeeServiceImpl.java):





package com.company.impl;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.company.dao.DepartmentDao;
import com.company.dao.EmployeeDao;
import com.company.modal.Department;
import com.company.modal.Employee;
import com.company.service.EmployeeService;

@Transactional
@Component
public class EmployeeServiceImpl implements EmployeeService{
	
 @Autowired
 private EmployeeDao employeeDao;
	
 @Autowired
 private DepartmentDao departmentDao;

 @Override
 public Employee addEmployee(Employee employee, long id) {
   Department department = departmentDao.findById(id).get();
   department.addEmployee(employee);
   return employeeDao.save(employee);
 }

 @Override
 public Employee editEmployee(Employee employee, long id) {
   Employee existEmployee = employeeDao.findById(id).get();
   existEmployee.setName(employee.getName());
   existEmployee.setAddress(employee.getAddress());
   existEmployee.setSalary(employee.getSalary());
   existEmployee.setBirthDate(employee.getBirthDate());
   existEmployee.setHiringDate(employee.getHiringDate());
   return employeeDao.save(existEmployee);
 }

 @Override
 public Employee findEmployee(long id) {
   return employeeDao.findById(id).get();
 }

 @Override
 public void deleteEmployee(long id) {
   employeeDao.deleteById(id);
 }

 @Override
 public List<Employee> findEmployees() {
    return employeeDao.findAll();
 }

}

Here, we are creating a class ProjectServiceImpl

src/main/java/com/company/impl/ProjectServiceImpl.java):





package com.company.impl;

import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.company.dao.DepartmentDao;
import com.company.dao.EmployeeDao;
import com.company.dao.ProjectDao;
import com.company.modal.Department;
import com.company.modal.Employee;
import com.company.modal.Project;
import com.company.service.ProjectService;

@Transactional
@Component
public class ProjectServiceImpl implements ProjectService {
	
 @Autowired
 private ProjectDao projectDao;
	
 @Autowired
 private DepartmentDao departmentDao;
	
 @Autowired
 private EmployeeDao employeeDao;

 @Override
 public Project addProjectToEmployee(long long idEmployee, long idProject) {
   Employee employee = employeeDao.findById(idEmployee).get();
   Project project = projectDao.findById(idProject).get();
   employee.addProjectToEmploye(project);
   return projectDao.save(project);
 }

 @Override
 public Project addProjectToDeprtment(Project project, long id) {
   Department department = departmentDao.findById(id).get();
   project.setCreateAt(new Date());
   department.addProjectToDepratment(project);
   return projectDao.save(project);
 }

 @Override
 public Project editProject(Project project, long id) {
   Project existProject = projectDao.findById(id).get();
   existProject.setName(project.getName());
   existProject.setDescription(project.getDescription());
   existProject.setProcess(project.getProcess());
   return projectDao.save(existProject);
 }

 @Override
 public Project findProject(long id) {
   return projectDao.findById(id).get();
 }

 @Override
 public void deleteProejct(long id) {
   Project project = projectDao.findById(id).get();
   projectDao.delete(project);
 }

 @Override
 public List<Project> findProjectsForEmplopyee(long id) {
   Employee employee = employeeDao.findById(id).get();
   return employee.getProjects();
 }

 @Override
 public List<Project> findProjects() {
   return projectDao.findAll();
 }

 @Override
 public void deleteProjectFromEmployee(long long idEmployee, long long idProject) {
   Employee employee = employeeDao.findById(idEmployee).get();
   Project project = projectDao.findById(idProject).get();
   employee.getProjects().remove(project);
		
 }

}

Here, we are creating a class UserServiceImpl

src/main/java/com/company/impl/UserServiceImpl.java):





package com.company.impl;

import java.util.List;
import java.util.Optional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.company.dao.UserDao;
import com.company.modal.User;
import com.company.service.UserService;

@Transactional
@Component
public class UserServiceImpl implements UserService {

 @Autowired
 private UserDao userDao;

 @Override
 public User addUser(User user) {
   List<User> users = userDao.findAll();
    if (users.size() == 0) {
    user.setAdmin(true);
   }
   for (User existUser : users) {
     if (user.getUsername().equals(existUser.getUsername())) {
      existUser.setUsername(existUser.getUsername());
      existUser.setPassword(existUser.getPassword());
      return userDao.save(existUser);
   }
 }

    return userDao.save(user);
 }

 @Override
 public List<User> findAllUsers() {
   return userDao.findAll();
 }

 @Override
 public User editUser(User user, long id) {
   User existUser = userDao.findById(id).get();
   existUser.setUsername(user.getUsername());
   existUser.setPassword(user.getPassword());
   return userDao.save(existUser);
 }

 @Override
 public User findUserById(long id) {
   return userDao.findById(id).get();
 }

 @Override
 public void deleteUser(long id) {
   userDao.deleteById(id);
 }

 @Override
 public User findByUsername(String username) {
   Optional<User> users = userDao.findByUsername(username);
    if (users.isPresent()) {
     User user = users.get();
     return user;
   }
    return null;
 }
}

@RestController API

We will create these class in controller package:

-> CompanyController

-> DepartmentController

-> EmployeeController

-> EmployeePhoneController

-> ProjectController

-> UserController

Here, we are creating a class CompanyController

src/main/java/com/company/controller/CompanyController.java):





package com.company.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.company.modal.Company;
import com.company.service.CompanyService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class CompanyController {

 @Autowired
 private CompanyService companyService;
	
 @PostMapping("/addCompany/{id}")
 Company addCompany( @RequestBodyCompany company, @PathVariable long id) {
   return companyService.addCompany(company, id);
 }
	
 @PutMapping("/editCompany/{id}")
 Company editCompany( @RequestBody Company company, @PathVariable long id) {
   return companyService.editCompany(company, id);
 }
	
 @GetMapping("/findCompany/{id}")
 Company findCompany(@PathVariable long id) {
   return companyService.findCompany(id);
 }
	
 @DeleteMapping("/deleteCompany/{id}")
 void deleteCompany(@PathVariable long id) {
   companyService.deleteCompany(id);
 }
	
 @GetMapping("/findCompanies")
 List<Company> findCompaniesForUser() {
   return companyService.findCompanies();
 }
}

Here, we are creating a class DepartmentController

src/main/java/com/company/controller/DepartmentController.java):





package com.company.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.company.modal.Department;
import com.company.service.DepartmentService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class DepartmentController {
	
 @Autowired
 private DepartmentService departmentService;
	
 @PostMapping("/addDepartment/{id}")
 Department addDepartment(@RequestBody Department department, @PathVariable long id) {
   return departmentService.addDepartment(department, id);
 }
	
 @PutMapping("/editDepartment/{id}")
 Department editDepartment(@RequestBody Department department, @PathVariable long id) {
   return departmentService.editDepartment(department, id);
 }
	
 @GetMapping("/findDepartment/{id}")
 Department findDepartment(@PathVariable long id) {
   return departmentService.findDepartment(id);
 }
	
 @DeleteMapping("/deleteDepartment/{id}")
 void deleteDepartment(@PathVariable long id) {
   departmentService.deleteDepartment(id);
 }

}

Here, we are creating a class EmployeeController

src/main/java/com/company/controller/EmployeeController.java):





package com.company.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.company.modal.Employee;
import com.company.service.EmployeeService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class EmployeeController {
	
 @Autowired
 private EmployeeService employeeService;
	
 @PostMapping("/addEmployee/{id}")
 Employee addEmployee(@RequestBody Employee employee, @PathVariable long id) {
   return employeeService.addEmployee(employee, id);
 }
	 
 @PutMapping("/editEmployee/{id}")
 Employee editEmployee(@RequestBody Employee employee, @PathVariable long id) {
   return employeeService.editEmployee(employee, id);
 }
	 
 @GetMapping("/findEmployee/{id}")
 Employee findEmployee(@PathVariable long id) {
   return employeeService.findEmployee(id);
 }
	 
 @DeleteMapping("/deleteEmployee/{id}")
 void deleteEmployee(@PathVariable long id) {
   employeeService.deleteEmployee(id);
 }
 @GetMapping("/findEmployees")
 List<Employee> findEmployees() {
    return employeeService.findEmployees();
 }
}

Here, we are creating a class EmployeePhoneController

src/main/java/com/company/controller/EmployeePhoneController.java):





package com.company.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.company.modal.EmployeePhone;
import com.company.service.EmployeePhoneService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class EmployeePhoneController {
	
 @Autowired
 private EmployeePhoneService employeePhoneService;
	
 @PostMapping("/addEmployeePhone/{id}")
 EmployeePhone addEmployeePhone(@RequestBody EmployeePhone employeePhone, @PathVariable long id) {
   return employeePhoneService.addEmployeePhone(employeePhone, id);
 }
	
 @PutMapping("/editEmployeePhone/{id}")
 EmployeePhone editEmployeePhone(@RequestBody EmployeePhone employeePhone, @PathVariable long id) {
   return employeePhoneService.editEmployeePhone(employeePhone, id);
 }
	
 @DeleteMapping("/deleteEmployeePhone/{id}")
 void deleteEmployeePhone(@PathVariable long id) {
   employeePhoneService.deleteEmployeePhone(id);
 }
 
 @GetMapping("/findEmployeePhones/{id}")
 List<EmployeePhone> findEmployeePhones(@PathVariable long id) {
   return employeePhoneService.findEmployeePhones(id);
 }
	
 @GetMapping("/findEmployeePhone/{id}")
 EmployeePhone findEmployeePhone(@PathVariable long id) {
   return employeePhoneService.findEmployeePhone(id);
 }

}

Here, we are creating a class ProjectController

src/main/java/com/company/controller/ProjectController.java):





package com.company.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.company.modal.Project;
import com.company.service.ProjectService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class ProjectController {
	
 @Autowired
 private ProjectService projectService;
	
 @PostMapping("/addProjectToEmployee/{idEmployee}/{idProject}")
 Project addProjectToEmploye(@PathVariable long idEmployee, @PathVariable long idProject) {
   return projectService.addProjectToEmployee(idEmployee, idProject);
 }
 
 @PostMapping("/addProjectToDeprtment/{id}")
 Project addProjectToDeprtment(@RequestBody Project project, @PathVariable long id) {
   return projectService.addProjectToDeprtment(project, id);
 }
 
 @PutMapping("/editProject/{id}")
 Project editProject(@RequestBody Project project, @PathVariable long id) {
   return projectService.editProject(project, id);
 }
 
 @GetMapping("/findProject/{id}")
 Project findProject(@PathVariable long id) {
   return projectService.findProject(id);
 }

 @DeleteMapping("/deleteProejct/{id}")
 void deleteProejct(@PathVariable long id) {
   projectService.deleteProejct(id);
 }
 
 @GetMapping("/findProjectsForEmplopyee/{id}")
 List<Project> findProjectsForEmplopyee(@PathVariable long id) {
   return projectService.findProjectsForEmplopyee(id);
 }
 @GetMapping("/findProjects")
 List<Project> findProjects() {
   return projectService.findProjects();
 }
 @DeleteMapping("/deleteProjectFromEmployee/{idEmployee}/{idProject}")
 void deleteProjectFromEmployee(@PathVariable long idEmployee, @PathVariable long idProject) {
   projectService.deleteProjectFromEmployee(idEmployee, idProject);
 }
}

Here, we are creating a class UserController

src/main/java/com/company/controller/UserController.java):





package com.company.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import com.company.modal.User;
import com.company.service.UserService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class UserController {

 @Autowired
 private UserService userService;

 @PostMapping("/addUser")
 User addUser(@RequestBody User user) {
   return userService.addUser(user);
 }

 @GetMapping("/findAllUsers")
 List<User> findAllUsers() {
   return userService.findAllUsers();
 }

 @PutMapping("/editUser/{id}")
 User editUser(@RequestBody User user, @PathVariable long id) {
   return userService.editUser(user, id);
 }

 @GetMapping("/findUserById/{id}")
 User findUserById(@PathVariable long id) {
   return userService.findUserById(id);
 }

 @DeleteMapping("/deleteUser/{id}")
 void deleteUser(@PathVariable long id) {
   userService.deleteUser(id);
 }
	
 @GetMapping("/findByUsername/{username}")
 User findByUsername(@PathVariable String username) {
   return userService.findByUsername(username);
 }
}

CompanyApplication

src/main/java/com/company/CompanyApplication.java):





package com.company;
import org.springframework.boot.autoconfigure.SpringBootApplication;


@SpringBootApplication
public class CompanyApplication {

 public static void main(String[] args) {
   SpringApplication.run(CompanyApplication.class, args);		
   System.out.println("App started....");
  }
  
}

Conclusion

Now we have an overview of Spring Boot example when building a @RestController API.

Building application Company with Spring boot and Angular Part 2

Download This Application My Company From Github

Building an application enterprise with Spring boot & Ionic Part 2

2022-01-18T03:43:00.020-08:00

Getting Started | Building an Application with Ionic

In this part 2 of enterprise application we will buid an application with Ionic framewotk

The objective of this tutorial is how to know Design Patterns work. In this tutorial we will create an application enterprise to calculate the language and the level for the applications how many language used in the app like Java, Php, Javascript etc... Criticality like Low, Medium and High.

Ionic apps are created and developed primarily through the Ionic command line utility (the “CLI”), and use Cordova to build/deploy as a native app. This means we need to install a few utilities to get developing.

Installing Ionic

Ionic apps are created and developed primarily through the Ionic command-line utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Ionic Appflow.

Before proceeding, make sure your computer has Node.js installed.

Install the Ionic CLI with npm:


$  npm install -g @ionic/cli

Starting an App

Starting a new Ionic app is incredibly simple. From the command line, run the ionic start command and the CLI will handle the rest.

Here, myApp is the name of the project, blank is the starter template, and the project type is angular.


$  ionic start enterprise tabs

Project structure

Let's go through the files and folders of the app.

/ src

Inside of the /src directory we find our raw, uncompiled code. This is where most of the work for your Ionic app will take place.

/ app

The App folder is the largest folder because it contains all the code of our ionic app. It has all the components, modules, pages, services and styles you will use to build your app.

This is the core of the project. Let’s have a look at the structure of this folder so you get an idea where to find things and where to add your own modules to adapt this project to your particular needs.

Modals

Create a folder modal in side it add a class Model.ts

src/app/modal/Modal.ts




export interface User {
  id: number;
  name: string;
}

export interface Application {
  id: number;
  name: string;
  description: string;  
  criticality: Criticality;
  language: Language;
}

export interface Enterprise {
  id: number;
  name: string;
  description: string;  
  applications: Application[];
}

export enum Criticality {
  LOW,
  MEDIUM,
  HIGH,
}
export enum Language {
  JAVA,
  JAVASCRIPT,
  PHP,
}

Angular Services

An example of when to use services would be to transfer data from one controller to another custom service.

Create these service in the service package

-> ApplicationService
-> EnterpriseService
-> UserService

src/app/service/application-service.ts




 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable}  from  '@angular/core';
 import  { Observable}  from  'rxjs';
 import  { Application}  from  '../modal/Modal';

@Injectable({
  providedIn: 'root',
})
export class ApplicationService {
  constructor(private http: HttpClient) { }

  createApplication(application: Application, id: number): Observable<any> {
    return this.http.post<any>(
      `http://localhost:8080/api/createApplication/${id}`,
      application
    );
  }

  createApplicationForEnterprise(idApplication: number, id: number): Observable<any> {
    return this.http.post<any>(
      `http://localhost:8080/api/createApplicationForEnterprise/${idApplication}/${id}`,
      null
    );
  }
  
  deleteApplication(id: number): Observable<any> {
    return this.http.delete<any>(
      `http://localhost:8080/api/deleteApplication/${id}`
    );
  }
  findApplication(id: number): Observable<any> {
    return this.http.get<any>(
      `http://localhost:8080/api/findApplication/${id}`
    );
  }
  findApplications(): Observable<any[]> {
    return this.http.get<any[]>(
      `http://localhost:8080/api/findApplications`);
  }
  findApplicationsForEnterprise(id: number): Observable<any[]> {
    return this.http.get<any[]>(
      `http://localhost:8080/api/findApplicationsForEnterprise/${id}`);
  }
}

src/app/service/enterprise-service.ts




 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable}  from  '@angular/core';
 import  { Observable}  from  'rxjs';
 import  { Enterprise}  from  '../modal/Modal';

@Injectable({
  providedIn: 'root',
})
export class EnterpriseService {
  constructor(private http: HttpClient) { }

  createEnterprise(enterprise: Enterprise): Observable<any> {
    return this.http.post<any>(
      `http://localhost:8080/api/createEnterprise`,
      enterprise
    );
  }
  
  deleteEnterprise(id: number): Observable<any> {
    return this.http.delete<any>(
      `http://localhost:8080/api/deleteEnterprise/${id}`
    );
  }
  findEnterprise(id: number): Observable<any> {
    return this.http.get<any>(
      `http://localhost:8080/api/findEnterprise/${id}`
    );
  }
  
  findEnterprises(): Observable<any[]> {
    return this.http.get<any[]>(
      `http://localhost:8080/api/findEnterprises`);
  }
  
  findApplicationsForEnterprise(id: number): Observable<any[]> {
    return this.http.get<any[]>(
      `http://localhost:8080/api/findApplicationsForEnterprise/${id}`);
  }
  
 calculateJava(id: number): Observable<any> {
    return this.http.get<any>(
      `http://localhost:8080/api/calculateJava/${id}`);
  }
  
  calculateLow(id: number): Observable<any> {
    return this.http.get<any>(
      `http://localhost:8080/api/calculateLow/${id}`);
  }
  
 calculateMedium(id: number): Observable<any> {
    return this.http.get<any>(
      `http://localhost:8080/api/calculateMedium/${id}`);
  }
  
  calculatePhp(id: number): Observable<any> {
    return this.http.get<any>(
      `http://localhost:8080/api/calculatePhp/${id}`);
  }
  
  calculateHigh(id: number): Observable<any> {
    return this.http.get<any>(
      `http://localhost:8080/api/calculateHigh/${id}`);
  }
  
  calculateJavascript(id: number): Observable<any> {
    return this.http.get<any>(
      `http://localhost:8080/api/calculateJavascript/${id}`);
  }
}

src/app/service/user-service.ts




 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable}  from  '@angular/core';
 import  { Observable}  from  'rxjs';
 import  { User}  from  '../modal/Modal';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  constructor(private http: HttpClient) { }

  createUser(user: User): Observable<any> {
    return this.http.post<any>(
      `http://localhost:8080/api/createUser`,
      user
    );
  }
  
  findUsers(): Observable<any[]> {
    return this.http.get<any[]>(
      `http://localhost:8080/api/findUsers`);
  }
  
}

Create pages

Now we'll continue with the project by adding pages which are the basic buildings of an Ionic app. So let's get started. You can create pages either manually or generating them using the Ionic CLI v5 which is the recommended method. In this guide we'll look first at how to create a page generate it with the Ionic CLI, then how to add it to the project.

We will use these pages

- add-user.page.ts
- add-user.page.html

src/app/add-user.page.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { User }  from  '../model/Model';
 import  { UserService }  from  '../service/user.service';

@Component({
  selector: 'app-add-user',
  templateUrl: './add-user.page.html',
  styleUrls: ['./add-user.page.scss']
})
export class AddUserPage implements OnInit {
  users: User[];
  user: User = {} as User;
  progressBar = false;

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.userService.findUsers().subscribe(users => {
      this.users = users;
    });
  }

  addUser() {
    this.showProgressBar = true;
    this.userService.createUser(this.user).subscribe(user => {
      this.user = user;
      window.location.reload();
    })
  }
}

src/app/add-user.page.html




<ion-header [translucent]="true">
  <ion-toolbar color="dark">
    <ion-title>Users</ion-title>
  </ion-toolbar>
</ion-header>

 <ion-content [fullscreen]="true">
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>
    <ion-card-content>
      <form name="user" (ngSubmit)="addUser()" #formRegister="ngForm" novalidate>
        <ion-item>
          <ion-label position="floating">Name</ion-label>
          <ion-input type="text" placeholder="Enter name" name="name" [(ngModel)]="user.name" #name="ngModel" required></ion-input>
        </ion-item><br>
        
        <ion-button type="submit" color="success" fill="solid" size="large" expand="block" [disabled]="name.invalid">Save</ion-button>
      </form>
    </ion-card-content>
  </ion-card>
  
    <ion-card>
    <ion-card-header>
      <ion-card-subtitle>Find all users</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
     
    <ion-list *ngFor="let u of users">
      <ion-item lines="full">
        <ion-label>
          {{u.name}}
        </ion-label>
        <ion-icon color="success" slot="end" name="create-outline" style="cursor: pointer;" [routerLink]="['/add-application/', u.id]"></ion-icon>
      </ion-item>
    </ion-list>
      
    </ion-card-content>
  </ion-card>
  
</ion-content>

We will use these pages

- add-application.page.ts
- add-application.page.html

src/app/add-application.page.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { Router, ActivatedRoute }  from  '@angular/router';
 import  { Application}  from  '../model/Model';
 import  { ApplicationService}  from  '../service/application.service';

@Component({
  selector: 'app-add-application',
  templateUrl: './add-application.page.html',
  styleUrls: ['./add-application.page.scss']
})
export class AddApplicationPage implements OnInit {
  progressBar = false;
  application: Application = {} as Application;
  criticality: any;
  language: any;
  id: number;
  
  constructor(private applicationService: ApplicationService, private router: Router,
    private route: ActivatedRoute) { }

  ngOnInit() {
    this.id = this.route.snapshot.params.id;
  }
  setCriticality(e) {
    this.criticality = e.target.value;
  }
  setLanguage(e) {
    this.language = e.target.value;
  }
  addApplication() {
    this.showProgressBar = true;
    this.application.criticality = this.criticality;
    this.application.language = this.language;
    this.applicationService.createApplication(this.application, this.id).subscribe(application => {
      this.application = application;
      window.location.reload();
    })
  }
  cancel() {
    this.router.navigateByUrl("/tabs/add-user")
  }
}

src/app/add-application.page.html




<ion-header>
  <ion-toolbar color="dark">
    <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Back</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>

    <ion-card-content>
    
      <form name="application" (ngSubmit)="addApplication()" #formRegister="ngForm" novalidate>
        <ion-item>
          <ion-label position="floating">Name</ion-label>
          <ion-input type="text" placeholder="Enter name" name="name" [(ngModel)]="application.name" #name="ngModel" required></ion-input>
        </ion-item>
        
       <ion-item>
         <ion-label position="floating">Description</ion-label>
          <ion-textarea type="text" placeholder="Enter description" name="description" [(ngModel)]="application.description"
            #description="ngModel" required></ion-textarea>
       </ion-item> 
       
        <ion-list>
          <ion-radio-group value="criticality" (ionChange)="setCriticality($event)">
            <ion-list-header>
              <ion-label>Criticality</ion-label>
            </ion-list-header>
            
          <ion-item> 
              <ion-label>LOW</ion-label>
              <ion-radio slot="start" value="LOW"></ion-radio>
         </ion-item> 
         
           <ion-item> 
              <ion-label>MEDIUM</ion-label>
              <ion-radio slot="start" value="MEDIUM"></ion-radio>
         </ion-item> 
         
        <ion-item> 
              <ion-label>HIGH</ion-label>
              <ion-radio slot="start" value="HIGH"></ion-radio>
         </ion-item> 
            
        </ion-radio-group>
       </ion-list>
       
       <ion-list>
          <ion-radio-group value="language" (ionChange)="setLanguage($event)">
            <ion-list-header>
              <ion-label>Language</ion-label>
            </ion-list-header>
            
          <ion-item> 
              <ion-label>JAVA</ion-label>
              <ion-radio slot="start" value="JAVA"></ion-radio>
         </ion-item> 
         
           <ion-item> 
              <ion-label>JAVASCRIPT</ion-label>
              <ion-radio slot="start" value="JAVASCRIPT"></ion-radio>
         </ion-item> 
         
        <ion-item> 
              <ion-label>PHP</ion-label>
              <ion-radio slot="start" value="PHP"></ion-radio>
         </ion-item> 
            
        </ion-radio-group>
       </ion-list>
        
        <br>
        <ion-button type="submit" color="success" fill="solid" size="large" expand="block" [disabled]="name.invalid">Save</ion-button>
      </form>
    </ion-card-content>
  </ion-card>
</ion-content>

We will use these pages

- add-enterprise.page.ts
- add-enterprise.page.html

src/app/add-enterprise.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { Router }  from  '@angular/router';
 import  { Enterprise }  from  '../model/Model';
 import  { EnterpriseService }  from  '../service/enterprise.service';

@Component({
  selector: 'app-add-enterprise',
  templateUrl: './add-enterprise.page.html',
  styleUrls: ['./add-enterprise.page.scss']
})
export class AddEnterprisePage implements OnInit {
  enterprise: Enterprise = {} as Enterprise;
  progressBar = false;

  constructor(private router: Router, private enterpriseService: EnterpriseService) { }

  ngOnInit(): void { }

  addEnterprise() {
   this.showProgressBar = true;
   this.enterpriseService.createEnterprise(this.enterprise).subscribe(enterprise => {
     this.enterprise = enterprise;
     window.location.reload();
   })
  }
  cancel() {
    this.router.navigateByUrl("/tabs/find-enterprises");
  }
}

src/app/add-enterprise.html




<ion-header>
  <ion-toolbar color="dark">
    <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Back</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>

    <ion-card-content>
    
      <form name="application" (ngSubmit)="addEnterprise()" #formRegister="ngForm" novalidate>
        <ion-item>
          <ion-label position="floating">Name</ion-label>
          <ion-input type="text" placeholder="Enter name" name="name" [(ngModel)]="enterprise.name" #name="ngModel" required></ion-input>
        </ion-item>
        
       <ion-item>
         <ion-label position="floating">Description</ion-label>
          <ion-textarea type="text" placeholder="Enter description" name="description" [(ngModel)]="enterprise.description"
            #description="ngModel" required></ion-textarea>
       </ion-item> 
        
        <br>
        <ion-button type="submit" color="success" fill="solid" size="large" expand="block" [disabled]="name.invalid">Save</ion-button>
      </form>
    </ion-card-content>
  </ion-card>
</ion-content>

We will use these pages

- find-enterprises.page.ts
- find-enterprises.page.html

src/app/find-enterprises.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { Enterprise }  from  '../model/Model';
 import  { EnterpriseService }  from  '../service/enterprise.service';

@Component({
  selector: 'app-find-enterprises',
  templateUrl: './find-enterprises.page.html',
  styleUrls: ['./find-enterprises.page.scss']
})
export class FindEnterprisesPage implements OnInit {
  enterprises: Enterprise[];

  constructor(private enterpriseService: EnterpriseService) { }

  ngOnInit() {
    this.enterpriseService.findEnterprises().subscribe(enterprises => {
      this.enterprises = enterprises;
    })
  }

}

src/app/find-enterprises.html




<ion-header [translucent="true">
  <ion-toolbar color="dark">
    <ion-title>
      Enterprises
    </ion-title>
    <ion-buttons slot="primary" [routerLink]="['/add-enterprise']">
      <ion-button fill="solid" color="secondary">
        Add enterprise
        <ion-icon slot="end" name="create-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-card>
    <ion-card-header>
      <ion-card-title>Find all enterprises</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-list *ngFor="let e of enterprises">
      <ion-item button [routerLink]="['/find-enterprise/', e.id]" color="secondary">
        <ion-label>
          {{e.name}}
        </ion-label>
      </ion-item>
    </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>

We will use these pages

- find-enterprise.page.ts
- find-enterprise.page.html
- find-enterprise.page.scss

src/app/find-enterprise.page.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { Router, ActivatedRoute }  from  '@angular/router';
 import  { Enterprise, Application }  from  '../model/Model';
 import  { ApplicationService }  from  '../service/application.service';
 import  { EnterpriseService }  from  '../service/enterprise.service';

@Component({
  selector: 'app-find-enterprise',
  templateUrl: './find-enterprise.page.html',
  styleUrls: ['./find-enterprise.page.scss']
})
export class FindEnterprisePage implements OnInit {
  applications: Application[];
  filterApps: Application[];  
  enterprise: Enterprise = {} as Enterprise;
  id: number;
  calculateJava: number;
  calculateJavascript: number;
  calculatePhp: number;
  calculateLow: number;  
  calculateMedium: number;
  calculateHigh: number;

  constructor(private enterpriseService: EnterpriseService, private route: ActivatedRoute,
    private applicationService: ApplicationService, private router: Router) { }

  ngOnInit() {
    this.id = this.route.snapshot.params.id;
    this.enterpriseService.findEnterprise(this.id).subscribe(enterprise => {
      this.enterprise = enterprise;
    });
    this.applicationService.findApplications().subscribe(applications => {
      this.applications = applications;
      this.applicationService.findApplicationsForEnterprise(this.id).subscribe(filterApps => {
        this.filterApps = filterApps;
        filterApps.forEach(app => {
         this.applications = this.applications.filter(a => a.id !== app.id)
        })
      })
    })
  this.getCalculate();
  }
  setApplication(e) {
   this.applicationService.createApplicationForEnterprise(e.target.value, this.id).subscribe(() => {
     window.location.reload();
   })
  }
  getCalculate() {
    this.enterpriseService.calculateJava(this.id).subscribe(calculateJava => {
      this.calculateJava = calculateJava;
    });
    this.enterpriseService.calculateJavascript(this.id).subscribe(calculateJavascript => {
      this.calculateJavascript = calculateJavascript;
    });
    this.enterpriseService.calculatePhp(this.id).subscribe(calculatePhp => {
      this.calculatePhp = calculatePhp;
    });
    this.enterpriseService.calculateLow(this.id).subscribe(calculateLow => {
      this.calculateLow = calculateLow;
    });
    this.enterpriseService.calculateMedium(this.id).subscribe(calculateMedium => {
      this.calculateMedium = calculateMedium;
    })
    this.enterpriseService.calculateHigh(this.id).subscribe(calculateHigh => {
      this.calculateHigh = calculateHigh;
    })
  }
  cancel() {
   this.router.navigateByUrl("/tabs/find-enterprises");
  }
  deleteEnterprise() {
    if(confirm('Are you sure'))
    this.enterpriseService.deleteEnterprise(this.id).subscribe(() => {
      window.location.replace('/tabs/find-enterprises')
    })
  }
}

src/app/find-enterprise.page.ts




<ion-header>
  <ion-toolbar color="dark">
    <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Back</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div class="stories">
    <div class="story">
      <div class="img-box">
        <div class="content">{{calculateJava}}</div>
      </div>
      <p style="color: #86888f;">JAVA</p>
    </div>
    <div class="story">
      <div class="img-box">
        <div class="content">{{calculateJavascript}}</div>
      </div>
      <p style="color: #86888f;">JAVASCRIPT</p>
    </div>
    <div class="story">
      <div class="img-box">
        <div class="content">{{calculatePhp}}</div>
      </div>
      <p style="color: #86888f;">PHP</p>
    </div>
    <div class="story">
      <div class="img-box">
        <div class="content">{{calculateLow}}</div>
      </div>
      <p style="color: #86888f;">LOW</p>
    </div>
    <div class="story">
      <div class="img-box">
        <div class="content">{{calculateMedium}}</div>
      </div>
      <p style="color: #86888f;">MEDIUM</p>
    </div>
    <div class="story">
      <div class="img-box">
        <div class="content">{{calculateHigh}}</div>
      </div>
      <p style="color: #86888f;">HIGH</p>
    </div>
  </div>
 <hr>
 
<ion-content>
  <ion-card>
    <ion-card-header>
    <ion-card-subtitle>{{enterprise.name}}</ion-card-subtitle>
      <ion-card-subtitle>Enterprise details</ion-card-subtitle>
      <ion-card-subtitle>{{enterprise.description}}</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <ion-text color="danger">
        <h1 style="margin-left: 15px;">Applications</h1>
      </ion-text>
      <ion-item>
        <ion-label disabled="true">Add application</ion-label>
        <ion-select (ionChange)="setApplication($event)">
          <ion-select-option *ngFor="let app of applications" [value]="app.id">{{app.name}}</ion-select-option>
        </ion-select>
      </ion-item>
      <ion-list *ngFor="let app of filterApps">
        <ion-item color="dark">{{app.name}}</ion-item>
        <ion-item *ngIf="app.criticality==['LOW']" color="success">{{app.criticality}}</ion-item>
        <ion-item *ngIf="app.criticality==['MEDIUM']" color="secondary">{{app.criticality}}</ion-item>
        <ion-item *ngIf="app.criticality==['HIGH']" color="danger">{{app.criticality}}</ion-item>
        <ion-item color="medium">{{app.language}}</ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card><br>

  <ion-button expand="full" fill="outline" color="danger" (click)="deleteEnterprise()">Delete this enterprise</ion-button>
</ion-content>

src/app/find-enterprise.page.scss




.text-stories {
  display: flex;
  justify-content: space-between;
  font-size: smaller;
  font-weight: 700;
  color: #171717;
  margin-left: 7px;
  margin-right: 7px;
}
.stories {
  display: flex;
  overflow: scroll;
  margin-left: 15px;
}
.stories .img-box {
  margin-left: 7px;
  margin-right: 12px;
  background-image: url("https://drissas.com/wp-content/uploads/2019/11/instagram-bg-color.jpg");
  background-size: contain;
  border-radius: 50%;
}
.stories .content {
  width: 50px;
  max-width: none;
  height: 50px;
  max-height: none;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid white;
  margin-bottom: -3px;
  text-align: center;
  font-size: 22px;
  color: aliceblue;
  font-weight: bold;
  margin-top: 2px;
  padding-top: 8px;
}
.stories p {
  font-size: 11px;
  text-align: center;
  margin: 4px 0px 0px 0px;
  font-weight: 500;
  color: #383a3e;
}
.add_story {
  position: relative;
  margin-left: 7px;
  margin-right: 12px;
  border-radius: 50%;
  padding: 2px;
}
.add_story ion-icon {
  position: absolute;
  bottom: 1px;
  right: 1px;
  border-radius: 50%;
  background-color: white;
}
hr {
  height: 2px !important;
  width: 100% !important;
  background: #d5d5d5 !important;
}

We will use these pages

- find-applications.page.ts
- find-applications.page.html

src/app/find-applications.page.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { Application }  from  '../model/Model';
 import  { ApplicationService }  from  '../service/application.service';

@Component({
  selector: 'app-find-applications',
  templateUrl: './find-applications.page.html',
  styleUrls: ['./find-applications.page.scss']
})
export class FindApplicationsPage implements OnInit {
  applications: Application[];

  constructor(private applicationService: ApplicationService) { }

  ngOnInit() {
    this.applicationService.findApplications().subscribe(applications => {
      this.applications = applications;
    })
  }

}

src/app/find-applications.page.html




<ion-header [translucent]="true">
  <ion-toolbar color="dark">
    <ion-title>Applications</ion-title>
  </ion-toolbar>
</ion-header>

 <ion-content [fullscreen]="true">
  <ion-card>
    <ion-card-header>
      <ion-card-subtitle>Find all application</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <ion-list *ngFor="let app of applications">
      <ion-item button [routerLink]="['/find-application/', app.id]" color="tertiary">
        <ion-label>
          {{app.name}}
        </ion-label>
      </ion-item>
    </ion-list>
   </ion-card-content>

 </ion-card>
</ion-content>

We will use these pages

- find-application.page.ts
- find-application.page.html

src/app/find-application.page.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { Router, ActivatedRoute }  from  '@angular/router';
 import  { Application }  from  '../model/Model';
 import  { ApplicationService }  from  '../service/application.service';

@Component({
  selector: 'app-find-application',
  templateUrl: './find-application.page.html',
  styleUrls: ['./find-application.page.scss']
})
export class FindApplicationPage implements OnInit {
  application: Application = {} as Application;
  id: number;

  constructor(private router: Router, private route: ActivatedRoute,
     private applicationService: ApplicationService) { }
     
 ngOnInit() {
    this.id = this.route.snapshot.params.id;
    this.applicationService.findApplication(this.id).subscribe(application => {
      this.application = application;
    })
  }
  cancel() {
   this.router.navigateByUrl("/tabs/find-applications")
  }
  deleteApplication() {
    if(confirm('Are you sure')) {
      this.applicationService.deleteApplication(this.id).subscribe(() => {
        window.location.replace('/tabs/find-applications')
      })
    }
  }
}

src/app/find-application.page.html




<ion-header>
  <ion-toolbar color="dark">
    <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Back</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>{{application.name}}</ion-card-title>
      <ion-card-subtitle>{{application.description}}</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <ion-item *ngIf="application.criticality==['LOW']" color="success">{{application.criticality}}</ion-item>
        <ion-item *ngIf="application.criticality==['MEDIUM']" color="secondary">{{application.criticality}}</ion-item>
        <ion-item *ngIf="application.criticality==['HIGH']" color="danger">{{application.criticality}}</ion-item>
        <ion-item color="medium">{{application.language}}</ion-item>
      </ion-list>
   </ion-card-content>
  </ion-card>
  
   <ion-button expand="full" fill="outline" color="danger" (click)="deleteApplication()">Delete this enterprise</ion-button> 
</ion-content>

src/app/tabs-routing.module.ts




import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'add-user',
        loadChildren: () => import('../add-user/add-user.module').then( m => m.AddUserPageModule)
      },
      {
        path: 'find-enterprises',
        loadChildren: () => import('../find-enterprises/find-enterprises.module').then( m => m.FindEnterprisesPageModule)
      },
      {
        path: 'find-applications',
        loadChildren: () => import('../find-applications/find-applications.module').then( m => m.FindApplicationsPageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/add-user',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/add-user',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
})
export class TabsPageRoutingModule {}

src/app/tabs-page.html




<ion-tabs>
  <ion-tab-bar slot="bottom">
  
    <ion-tab-button tab="add-user">
      <ion-icon name="people-outline"></ion-icon>
      <ion-label>Users</ion-label>
    </ion-tab-button>
    
    <ion-tab-button tab="find-enterprises">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Enterprises</ion-label>
    </ion-tab-button>

   <ion-tab-button tab="find-applications">
      <ion-icon name="square"></ion-icon>
      <ion-label>Applications</ion-label>
    </ion-tab-button>
    
  </ion-tab-bar>
</ion-tabs>

Add the AppRoutingModule

In Angular, the best practice is to load and configure the router in a separate, top-level module that is dedicated to routing and imported by the root AppModule.

By convention, the module class name is AppRoutingModule and it belongs in the app-routing.module.ts in the src/app folder.

src/app/app-routing.module.ts



import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'add-enterprise',
    loadChildren: () => import('./add-enterprise/add-enterprise.module').then( m => m.AddEnterprisePageModule)
  },
  {
    path: 'add-application/:id',
    loadChildren: () => import('./add-application/add-application.module').then( m => m.AddApplicationPageModule)
  },
  {
    path: 'find-enterprise/:id',
    loadChildren: () => import('./find-enterprise/find-enterprise.module').then( m => m.FindEnterprisePageModule)
  },
  {
    path: 'find-application/:id',
    loadChildren: () => import('./find-application/find-application.module').then( m => m.FindApplicationPageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

NgModules and JavaScript modules

src/app/app-module.ts




import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,     
    FormsModule,
    HttpClientModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
    NO_ERRORS_SCHEMA
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Conclusion

Now we have an overview of Spring Boot CRUD example when building a CRUD App.

We also take a look at client-server architecture for REST API using Spring Web MVC & Spring Data JPA, as well, we ware creating an Ionic app with Angular 10 project structure for building a front-end app to make HTTP requests and consume responses.

Building an application enterprise with Spring boot and Ionic part 1

Download My enterprise Application From Github

Building an application Company with Spring boot and Angular Part 2

2022-01-18T03:43:00.012-08:00

Getting Started | Building an Application with Angular

Angular 10 Front-end

Technology

Angular 10

Angular HTTPClient

Angular Router

Angular CLI version (10.1.1)

ng new

The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!

ng generate

Generate components, routes, services and pipes with a simple command. The CLI will also create simple test shells for all of these.

ng serve

Easily test your app locally while developing.


$  npm install -g @angular/cli

$  ng new company

$  cd company

$  ng serve

Project Structure

Font Awesome

Add this link in index.html to use Font Awesome




 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

Angular Material Tutorial

Install Angular Material


$  ng add @angular/material

MaterialModule

src/app/material-module.ts



import { NgModule } from '@angular/core';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';

@NgModule({
  exports: [
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
  ],
  imports: [
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
  ]
})
export class MaterialModule { }

Modals interfaces

The purpose of this class is to map the specified fields with the fields of Spring entity class.

Every Angular app has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.

src/app/modal/Modal.ts




export interface Company {
   id: number;
   name: string;
   location: string;
   description: string;
   createAt: any;
   departments: Department[];
}
export interface Department {
   id: number;
   code: string;
   location: string;
   description: string;
   createAt: any;
   employees: Employee[];
   projects: Project[];
}
export interface Employee {
   id: number;
   name: string;
   address: string;
   salary: number;
   hiringDate: string;
   birthDate: string;
   employeePhones: EmployeePhone[];
   projects: Project[];
}
export interface EmployeePhone {
   id: number;
   phone: string;
}
export interface Project {
   id: number;
   name: string;
   description: string;
   createAt: any;
   process: Process;
   workOns: WorkOn[];
}
export interface WorkOn {
   id: number;
   done: boolean;
   createAt: any;
}
export interface User {
   id: number;
   username: string;
   password: string;
   admin: boolean;
   companies: Company[];
}
export enum Process {
   TODO,  WORKON,  DONE
}

Angular Services

An example of when to use services would be to transfer data from one controller to another custom service.

Create Data services

This service will use Angular HTTPClient to send HTTP requests. You can see that its functions includes CRUD operations and finder method

Create these services in the service package

-> CompanyService

-> DepartmentService

-> EmployeeService

-> EmployeePhoneService

-> ProjectService

-> UserService

src/app/service/company.service.ts



 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable }  from  '@angular/core';
 import  { Observable }  from  'rxjs';

 @Injectable({
  providedIn: 'root'
})
export class CompanyService {

  constructor(private http: HttpClient) { }

  addCompany(data: any, id: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addCompany/${id}`, data);
  }
  editCompany(data: any, id: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editCompany/${id}`, data);
  }
  findCompany(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findCompany/${id}`);
  }
  deleteCompany(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteCompany/${id}`);
  }
  findCompanies(): Observable<any> {
   return this.http.get<any>(`http://localhost:8080/api/findCompanies`);
  }
}

src/app/service/department.service.ts



 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable }  from  '@angular/core';
 import  { Observable }  from  'rxjs';

 @Injectable({
  providedIn: 'root'
})
export class DepartmentService {

  constructor(private http: HttpClient) { }

  addDepartment(data: any, id: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addDepartment/${id}`, data);
  }
  editDepartment(data: any, id: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editDepartment/${id}`, data);
  }
  findDepartment(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findDepartment/${id}`);
  }
  deleteDepartment(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteDepartment/${id}`);
  }

}

src/app/service/employee-phone.service.ts



 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable }  from  '@angular/core';
 import  { Observable }  from  'rxjs';

 @Injectable({
  providedIn: 'root'
})
export class EmployeePhoneService {

  constructor(private http: HttpClient) { }

  addEmployeePhone(data: any, id: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addEmployeePhone/${id}`, data);
  }
  editEmployeePhone(data: any, id: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editEmployeePhone/${id}`, data);
  }
  findEmployeePhone(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findEmployeePhone/${id}`);
  }
  deleteEmployeePhone(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteEmployeePhone/${id}`);
  }
  findEmployeePhones(id: number): Observable<any> {
   return this.http.get<any>(`http://localhost:8080/api/findEmployeePhones/${id}`);
  }
}

src/app/service/employee.service.ts



 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable }  from  '@angular/core';
 import  { Observable }  from  'rxjs';

 @Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  constructor(private http: HttpClient) { }

  addEmployee(data: any, id: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addEmployee/${id}`, data);
  }
  editEmployee(data: any, id: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editEmployee/${id}`, data);
  }
  findEmployee(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findEmployee/${id}`);
  }
  deleteEmployee(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteEmployee/${id}`);
  }

}

src/app/service/project.service.ts



 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable }  from  '@angular/core';
 import  { Observable }  from  'rxjs';

 @Injectable({
  providedIn: 'root'
})
export class ProjectService {

  constructor(private http: HttpClient) { }

  addProjectToEmployee(idEmployee: number, idProject: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addProjectToEmployee/${idEmployee}/${idProject}`, null);
  }
  addProjectToDeprtment(data: any, id: number): Observable<any> {
    return this.http.post<any>(`http://localhost:8080/api/addProjectToDeprtment/${id}`, data);
  }
  editProject(data: any, id: number): Observable<any> {
    return this.http.put<any>(`http://localhost:8080/api/editProject/${id}`, data);
  }
  findProject(id: number): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/api/findProject/${id}`);
  }
  deleteProejct(id: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteProejct/${id}`);
  }
  findProjectsForEmplopyee(id: number): Observable<any> {
   return this.http.get<any>(`http://localhost:8080/api/findProjectsForEmplopyee/${id}`);
  }
  findProjects(): Observable<any> {
   return this.http.get<any>(`http://localhost:8080/api/findProjects`);
  }
 deleteProjectFromEmployee(idEmployee: number, idProject: number): Observable<any> {
    return this.http.delete<any>(`http://localhost:8080/api/deleteProjectFromEmployee/${idEmployee}/${idProject}`);
  }
}

src/app/service/user.service.ts



 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable }  from  '@angular/core';
 import  { Observable }  from  'rxjs';
 import  { User }  from  '../model/Model';

const USERNAME_KEY = 'USERNAME';

 @Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private http: HttpClient) { }

  addUser(user: User): Observable<User> {
    return this.http.post<User>(`http://localhost:8080/api/addUser`, user); 
  }

  editUser(user: User, idUser: number): Observable<User> {
    return this.http.post<User>(`http://localhost:8080/api/editUser/${idUser}`, user); 
  }
  
  findUserById(id: number): Observable<User> {
     return this.http.get<User>(`http://localhost:8080/api/findUserById/${id}`); 
   }
   
  deleteUser(id: number): Observable<User> {
     return this.http.delete<User>(`http://localhost:8080/api/deleteUser/${id}`); 
   }

   findAllUsers(): Observable<User[]> {
     return this.http.get<User[]>(`http://localhost:8080/api/findAllUsers/`); 
   }
   
  findByUsername(name: string): Observable<User> {
     return this.http.get<User>(`http://localhost:8080/api/findByUsername/${name}`); 
   }
   
 saveUsername(username: string) {
    window.sessionStorage.removeItem( USERNAME_KEY);
    window.sessionStorage.setItem( USERNAME_KEY, username);
  }

  getUsername(): string {
   return sessionStorage.getItem( USERNAME_KEY);
  }

}

Flat tree

TreeCompanyService

We are going fill this service with date

src/app/service/tree-company-service.ts




 import  { Injectable }  from  '@angular/core';
 import  { BehaviorSubject, Observable }  from  'rxjs';
 import  { Company}  from  '../modal/Modal';
 import  { CompanyService}  from  './company.service';

export class NodeAction {
  linkActive: string;
  url: string;
  title: string;
}
export class ApplicationItemNode {
  children: ApplicationItemNode[] = [];
  name: string;
  id: number;
  clazz: string;
  actions: NodeAction[] = [];
  title: string;
  routerLink: any;
}
export class ApplicationItemFlatNode {
  id: number;
  item: string;
  clazz: string;
  level: number;
  name: string;
  expandable: boolean;
  actions: NodeAction[] = [];
  title: string;
  routerLink: any;
}

@Injectable({
  providedIn: 'root'
})
export class TreeCompanyService {
  companies: Company[];
  applicationData = new BehaviorSubject<ApplicationItemNode[]>([]);
  applicationState = new BehaviorSubject<Company>({} as Company);

  constructor(private companyService: CompanyService) {
    this.initialize();
  }
  initialize() {
    this.applicationState.subscribe(() => {
      this.buildFileTree(0).subscribe(value => {
        this.applicationData.next(value);
      });
    });
    this.buildFileTree(0).subscribe(value => {
      this.applicationData.next(value);
    });
  }
  get data(): ApplicationItemNode[] {
    return this.applicationData.value;
  }

  buildFileTree(level: number): Observable<ApplicationItemNode[]>  {
    const nodes: ApplicationItemNode[] = [];

    return new Observable((observer) => {
        return this.companyService.findCompanies().subscribe(companies => {
          this.companies = companies.forEach(company => {
            const nodeCompany = new ApplicationItemNode();
            nodeCompany.name = company.name;
            nodeCompany.id = company.id;
            nodeCompany.routerLink = 'display-company/' + company.id;
            nodeCompany.clazz = 'fab fa-accusoft';
            nodeCompany.title = 'Display ' + company.name;
            nodes.push(nodeCompany);

            if(company.departments.length > 0) {
              company.departments.forEach(department => {
                const nodeDepartment = new ApplicationItemNode();
                nodeDepartment.name = department.code;
                nodeDepartment.id = department.id;
                nodeDepartment.routerLink = 'display-department/' + department.id;
                nodeDepartment.clazz = 'fas fa-building';
                nodeDepartment.title = 'Display department ' + department.code;
                nodeCompany.children.push(nodeDepartment);

                if(department.employees.length > 0) {
                  department.employees.forEach(employee => {
                    const nodeEmployee = new ApplicationItemNode();
                    nodeEmployee.name = employee.name
                    nodeEmployee.id = employee.id;
                    nodeEmployee.routerLink = 'display-employee/' + employee.id;
                    nodeEmployee.clazz = 'fas fa-user-secret';
                    nodeEmployee.title = 'Display employee ' + employee.name;
                    nodeDepartment.children.push(nodeEmployee);
                  })
                }
              });
            }
          });
          observer.next(nodes);
      });
    });
  }
}

Components

In addition to containing or pointing to the template, the @Component metadata configures, for example, how the component can be referenced in HTML and what services it requires.

- app.component.ts
- app.component.html
- app.component.scss

The above files were created by default when we created new project using the angular-cli command.

src/app/app.component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { User }  from  '../modal/Modal';
 import  { StorageService }  from  '../service/storage.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  user: User = {} as User;
  
  constructor(private userService: UserService) {}

  ngOnInit(): void {
    if(this.user!=null) {
      this.userService.findByUsername(this.userService.getUsername()).subscribe(user => {
        this.user = user;
      })
    }
  }

  logout() {
   this.userService.logout();
   window.location.replace(`/dashbaord`);
  }
}

src/app/app.component.html




  <nav>
    <a [routerLink]="['/dashbaord']">
        <i class="material-icons">dashboard</i>
        <span>Dashboard</span>
    </a>
    <a [routerLink]="['/login']" class=active *ngIf="!user">
        <i class="material-icons">psychology</i>
        <span>Login</span>
    </a>
    <a [routerLink]="['/login']" class=active *ngIf="user">
      <i class="material-icons">person</i>
      <span>Users</span>
    </a>
    <a [routerLink]="['/dashbaord']" (click)="logout()">
        <i class="material-icons">logout</i>
        <span>Logout</span>
    </a>
    <a [routerLink]="['/login']">
      <i class="material-icons">error</i>
      <span>Something</span>
   </a>
  </nav>
  <div id=body>
    <div id=content>
      <router-outlet></router-outlet>
    </div>
  </div>

src/app/app.component.scss




body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  background: #f8f8f8;
  #body {
    padding-left: 4.5675em;
    width: 100%;
    height: 8em;
    background-color: white;
  }
}
nav {
z-index: 999;
background: #f8f8f8;
border-right: 1px solid #ccc;
position: fixed;
left: 0;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
a {
  position: relative;
  display: flex;
  flex-direction: row;
  text-decoration: none;
  color: black;
  font-size: 1em;
  align-items: center;
  &:hover {
    background: #ddd;
  }
  &.active {
    i {
      padding: .75em .8125em .75em 1.1875em;
    }
    color: white;
    background: #3f51b5;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
    &::after {
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
      clip-path: inset(-5px -5px -5px 0);
      content: "";
      z-index: 2;
      background: #3f51b5;
      position: absolute;
      right: -0.5em;
      width: 0.5em;
      height: 100%;
      border-radius: 0 0.375em 0.375em 0;
    }
  }
  i {
    padding: 0.75em 1em;
  }
  span {
    transition: opacity 0.5s 1s, padding 0.5s 1.25s, font-size 0.5s 1.25s;
    padding: 0;
    font-size: 0;
    opacity: 0;
  }
}
&:hover a {
  &.active span {
    padding: .75em .8125em .75em .1875em;
  }
  span {
    transition: padding 0.5s 1s, font-size 0.5s 1s, opacity 0.25s 1.5s;
    opacity: 1;
    font-size: 1em;
    padding: 0.75em 1em 0.75em 0;
  }
}
}
#content {
  margin-left: 100px;
}

- dashboard.component.ts
- dashboard.component.html
- dashboard.component.css

src/app/dashboard.component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { FlatTreeControl }  from  '@angular/cdk/tree';
 import  { User, Company }  from  '../modal/Modal';
 import  { MatTreeFlattener, MatTreeFlatDataSource }  from  '@angular/material/tree';
 import  { ApplicationItemFlatNode, ApplicationItemNode, TreeCompanyService }  from  '../service/tree-company.service';
 import  { Router,ActivatedRoute }  from  '@angular/router';
 import  { UserService }  from  '../service/user.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  company: Company = {} as Company;
  user: User = {} as User;
  
  flatNodeMap = new Map<ApplicationItemFlatNode, ApplicationItemNode>();
  nestedNodeMap = new Map<ApplicationItemNode, ApplicationItemFlatNode>();

  treeControl: FlatTreeControl<ApplicationItemFlatNode>;
  treeFlattener: MatTreeFlattener<ApplicationItemNode, ApplicationItemFlatNode>;
  dataSource: MatTreeFlatDataSource<ApplicationItemNode, ApplicationItemFlatNode>;
  private expandedNodes: ApplicationItemFlatNode[];
  
    constructor(private userService: UserService, private route: ActivatedRoute,
              private treeCompanyService: TreeCompanyService) {
    this.treeFlattener = new MatTreeFlattener(this.transform, this.getLevel, this.isExpandable, this.getChildren);
    this.treeControl = new FlatTreeControl<ApplicationItemFlatNode>(this.getLevel, this.isExpandable);
    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
    this.route.params.subscribe(
      params => {
        this.saveExpandedNodes();
        this.restoreExpandedNodes();
        treeCompanyService.applicationData.subscribe(company => {
          this.dataSource.data = company;
        });
        if(this.user!=null) {
          this.userService.findByUsername(this.userService.getUsername()).subscribe(user => {
            this.user = user;
          })
        }
        this.treeCompanyService.applicationState.next(this.company);
      });
  }
  ngOnInit(): void { }
  
  getLevel = (node: ApplicationItemFlatNode) => node.level;
  isExpandable = (node: ApplicationItemFlatNode) => node.expandable;
  getChildren = (node: ApplicationItemNode): ApplicationItemNode [] => node.children;
  hasChild = (_: number, nodeDate: ApplicationItemFlatNode) => nodeDate.expandable;
  hasNoContent = (_: number, nodeData: ApplicationItemFlatNode) => nodeData.item === '';
  
    transform = (node: ApplicationItemNode, level: number) => {
    const existingNode = this.nestedNodeMap.get(node);
    const flatNode = existingNode && existingNode.name === node.name ? existingNode : new ApplicationItemFlatNode();
    flatNode.name = node.name;
    flatNode.id = node.id;
    flatNode.clazz = node.clazz;
    flatNode.level = level;
    flatNode.title = node.title;
    flatNode.routerLink = node.routerLink;
    flatNode.actions = node.actions;
    flatNode.expandable = (node.children && node.children.length > 0);
    this.flatNodeMap.set(flatNode, node);
    this.nestedNodeMap.set(node, flatNode);
    return flatNode;
  }
  private saveExpandedNodes() {
    if (this.treeControl && this.treeControl.dataNodes) {
      this.expandedNodes = new Array<ApplicationItemFlatNode>();
      this.treeControl.dataNodes.forEach(node => {
      if (node.expandable && this.treeControl.isExpanded(node)) {
          this.expandedNodes.push(node);
        }
      });
    }
  }

  private restoreExpandedNodes() {
    if (this.expandedNodes && this.expandedNodes.length > 0) {
      this.expandedNodes.forEach(node => {
        this.treeControl.expand(this.treeControl.dataNodes.find(n => n.id === node.id));
      });
    }
  }

}

src/app/dashboard.component.html




<br
<div style="width: 30%; float:left;">
  <mat-card class="example-card">
    <mat-card-header
      <mat-card-title{{user.username}}</mat-card-title
      <mat-card-subtitleFind all companies</mat-card-subtitle
    </mat-card-header<hr
    <mat-card-content
 <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
 <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>

     <mat-basic-chip class="checklist-leaf-node root">
        <span style="margin-top: 4px;">
        <i [ngClass]="node.clazz" style="margin-left: 22px; font-size: 18px; color: #666a6c; margin-right: 4px;"></i
        <a title="{{node.title}}" [routerLink]="[node.routerLink]" routerLinkActive="linkActive"> {{node.name }} </a
        </span
      </mat-basic-chip
    </mat-tree-node

    <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
    <span id="chevronIcon" matTreeNodeToggle [attr.aria-label]="'toggle ' + node.filename"
        style="background: transparent;">
        <mat-icon id="mat-icon-plus" class="mat-icon-rtl-mirror">
          {{treeControl.isExpanded(node) ? 'arrow_drop_down' : 'arrow_right'}}
        </mat-icon>
      </span>
      <mat-basic-chip class="root">
        <a title="{{node.title}}" [routerLink]="[node.routerLink]" routerLinkActive="linkActive">
          <i [ngClass]="node.clazz" style="margin-right: 5px;  color: #666a6c;"></i
          {{node.name}}
        </a>
      </mat-basic-chip>
    </mat-tree-node>
    
  </mat-tree><br><br
</mat-card-content>
</mat-card>
</div><br>

<div style="width: 68%; float:right; margin-left: 1%; margin-right: 1%;" id="border-left">
  <router-outlet></router-outlet
</div>

src/app/dashboard.component.css




#applicationName {
  font-size: 22px;
  font-weight: bold;
}
.root {
  width: 100%;
  font-size: 14px;
  margin-bottom: 0;
  margin-top: 4px;
  display: block;
}
a {
  font-family: initial;
  color: #2f3542;
  text-decoration: none;
}
#mat-icon-plus {
  color: #666a6c;
  font-size: 24px;
  margin-top: 4px;
}
.root:hover {
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  cursor: pointer;
}

#chevronIcon {
  cursor: pointer;
}
.panel-danger {
  border-radius: 0 !important;
  border-bottom: none;
}
.panel-body {
  padding: 0 10px;
  padding-bottom: 20px;
  border-bottom: none;
}
@media screen and (max-width: 767px) {
  .panel-body,
  .panel-danger  {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}
#btnApplicationInfo {
  float: right;
  padding: 3px 6px 1px;
}
.linkActive {
  background-color: #f2dede !important;
  padding: 2px 10px 0 3px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #a94442 !important;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
.mat-tree-node {
  margin-bottom: -20px;
}
.vl {
  border-left: 1px solid #f2dede;
  height: 589px;
  float: right;
  margin-top: -20px;
}
@media screen and (max-width: 767px) {
  #border-left  {
    border-left: 1px solid #f2dede;
  }
}
@media screen and (max-width: 967px) {
  #border-left  {
    border-left: 1px solid #f2dede;
  }
}

- login.component.ts
- login.component.html

src/app/login.component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { MatDialog }  from  '@angular/material/dialog'';
 import  { User }  from  '../modal/Modal';
 import  { UserService }  from  '../service/user.service';
 import  { AddCompanyComponent }  from  '../add-company/add-company.component';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  users: User[];
  formUser: User = {} as User;
  existUser: User = {} as User;
  progressBar = false;
  admin: boolean;

  constructor(private userService: UserService, private dialog: MatDialog) {}
  
  ngOnInit(): void {
   if(this.existUser!=null) {
    this.userService.findAllUsers().subscribe(users => {
      this.users = users;
    });
    this.userService.findByUsername(this.userService.getUsername()).subscribe(existUser => {
      this.existUser = existUser;
      this.admin = this.existUser.admin;
    })
   }
 }
  addUser() {
    this.showProgressBar = true;
    this.userService.addUser(this.formUser).subscribe((formUser) => {
      this.formUser = formUser;
      this.userService.saveUsername(formUser.username);
      window.location.replace(`/dashbaord`);
    });
  }
  deleteUser(id) {
    if(confirm('Are you sure')) {
      this.userService.deleteUser(id).subscribe(() => {
        window.location.replace(`/dashbaord`);
      })
    }
  }
addCompany(idUser) {
  this.dialog.open(AddCompanyComponent, {
  data: {idUser},
  height: '400px',
  width: '400px',
  })
}
}

src/app/login.component.html




<div style="margin: auto; width: 30%; border: 3px solid #5d89ff; margin-top: 40px;" *ngIf="existUser==null">
<mat-card class="example-card">
  <mat-card-header>
  <div mat-card-avatar> <img src="https://zupimages.net/up/20/49/hnp3.png" style="width: 50px;"> </div>
    <mat-card-title>Authentification</mat-card-title>
  </mat-card-header>
  <mat-card-content><br><br>
    <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
     <form>
      <mat-form-field appearance="fill" style="width: 100%;">
        <mat-label>Enter your username</mat-label>
        <input matInput type="text" placeholder="Username" name="username" [(ngModel)]="formUser.username" #username="ngModel" required>
      </mat-form-field><br>
      <mat-form-field appearance="fill" style="width: 100%;">
        <mat-label>Enter your password</mat-label>
        <input matInput type="password" placeholder="Password" name="password" [(ngModel)]="formUser.password" #password="ngModel" required>
      </mat-form-field><br>
      <button mat-raised-button color="primary" [disabled]="username.invalid || password.invalid" (click)="addUser()" style="width : 10em !important">Login</button>
    </form>
  </mat-card-content>
</mat-card>
</div>

<div style="margin: auto; width: 40%; border: 3px solid #6F1E51; margin-top: 40px;" *ngIf="admin==true">
  <h1 style="margin: 10px">Welcome {{existUser.username}}</h1>
<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>Users</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <mat-list>
      <mat-list-item *ngFor="let user of users">
        <mat-icon mat-list-icon>account_circle</mat-icon>
        <div mat-line>{{user.username}} <button mat-button color="primary" (click)="addCompany(user.id)">Add company</button>
         <button mat-button color="warn" (click)="deleteUser(user.id)">Delete</button></div>
      </mat-list-item>
      <mat-divider></mat-divider>
    </mat-list>
  </mat-card-content>
</mat-card>
</div>

<div style="margin: auto; width: 40%; border: 3px solid #6F1E51; margin-top: 40px;" *ngIf="admin==false">
  <h1 style="margin: 10px">Welcome {{existUser.username}}</h1>
</div>

Conclusion

Now we have an overview of Angular 10 + Spring Boot CRUD example when building a CRUD App.

Building an application Company with Spring boot and Angular Part 3

Download My Company Application From Github

Building a note application with Spring boot and Ionic Part 1

2022-01-18T03:42:00.012-08:00

Getting Started | Building an Application with Spring Boot

Build an application note with Spring boot and Angular use Jpa

Objective:

In this tutorial we will create an application note to do or create your idea by category the note conent a title, create at, update at end content a description, We ere going use Spring boot for banckend and Ionic Angular for Frontend.

Used Skills in this project:

Java, SpringBoot, MicroServices, REST WebServices, JPA, Hibernate, MySQL Database, Maven, Angular, GitHub, SpringBoot Embedded Tomcat Server, STS-Eclipse IDE

Tools to be used

° Use any IDE to develop the Spring and Hibernate project. It may be STS/Eclipse/Netbeans. Here, we are using STS (Spring Tool Suite).

° Mysql for the database.

° Use any IDE to develop the Angular project. It may be Visual Studio Code/Sublime. Here, we are using Visual Studio Code.

° Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Spring MVC

Spring Boot Architecture

Introduction mysql to database

Introduction to the POM

pom.xml

    
  
   
 <?xml version="1.0" encoding="UTF-8"?>
 <project xmlns="http://maven.apache.org/POM/4.0.0"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0>/modelVersion>
   <parent>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-parent</artifactId>
	<version>2.4.1</version>
	<relativePath/> 
  </parent>
    
    <groupId>org.note</groupId>
	<artifactId>note</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>note</name>
	<description>Demo project for Spring Boot</description>
    
    <properties>
	 <java.version>1.8</java.version>
    </properties>
    
    <dependencies>
    
   <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-data-jpa</artifactId>
   </dependency>
    
   <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
   </dependency>
   
   <dependency>
	<groupId>javax.validation</groupId>
	<artifactId>validation-api</artifactId>
   </dependency>
   
   <dependency>
	 <groupId>org.springframework.boot</groupId>
	 <artifactId>spring-boot-devtools</artifactId>
     <scope>runtime</scope>
     <optional>true</optional>
   </dependency>
   
   <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
   </dependency>
   
   <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    
  </dependencies>
  
  <build>
    <plugins>
	 <plugin>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-maven-plugin</artifactId>
	 </plugin>
	</plugins>
 </build>
 
 </project>

Properties File

The application.properties file is located in the src/main/resources directory. The code for sample application.properties

We need to create database name it bank

src/main/resources/application.properties

    
   
spring.datasource.url=jdbc:mysql://localhost:3306/note?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
spring.datasource.username=root
spring.activemq.password=
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect
spring.jpa.hibernate.ddl-auto=update
server.port=8080
spring.jpa.database=MYSQL

Class Diagram

Modals / Entities

We need to create these entities

-> Category

-> Note

Here, we are Category an Entity

Category.java This object content id, name, createAt, updateAt and relational @ManyToOne with Note

src/main/java/com/note/model/Category.java):




 
package com.note.modal;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import javax.persistence.*;
import javax.validation.constraints.NotBlank;

@Entity
@Table(name = "category")
public class Category {
 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private Long id;

 @NotBlank
 private String name;

 @Temporal(TemporalType.TIMESTAMP)
 private Date createAt;

 @Temporal(TemporalType.TIMESTAMP)
 private Date updateAt;

 @OneToMany(mappedBy = "category", cascade = CascadeType.ALL)
 private List<Note> notes;
 
 public Category() {
  super();
 }

 public Category(String name, Date createAt, Date updateAt, List<Note> notes) {
   super();
   this.name = name;
   this.createAt = createAt;
   this.updateAt = updateAt;
   this.notes = notes;
 }

 public long getId() {
   return id;
 }

 public void setId(long id) {
   this.id = id;
 }

 public String getName() {
   return name;
 }

 public void setName(String name) {
   this.name = name;
 }

 public Date getCreateAt() {
   return createAt;
 }

 public void setCreateAt(Date createAt) {
   this.createAt = createAt;
 }

 public Date getUpdateAt() {
   return updateAt;
 }

 public void setUpdateAt(Date updateAt) {
   this.updateAt = updateAt;
 }

 public List<Note> getNotes() {
   return notes;
 }

 public void setNotes(List<Note> notes) {
   this.notes = notes;
 }

 public void addNote(Note note) {
  if (getNotes() == null) {
   this.notes = new ArrayList<>();
  }
   getNotes().add(note);
   note.setCategory(this);
 }

}

Here, we are creating an Entity

Note.java This object content id, titel, createAt, updateAt and relational @ManyToOne with Category

src/main/java/com/note/model/Note.java):




  
package com.note.modal;
import java.util.Date;
import javax.persistence.*;
import javax.validation.constraints.NotBlank;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
@Table(name = "note")
public class Note {
 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private Long id;
	
 @NotBlank
 private String title;
	
 @NotBlank
 @Column(columnDefinition = "TEXT")
 private String content;
	
 @Temporal(TemporalType.TIMESTAMP)
 private Date createAt;
	
 @Temporal(TemporalType.TIMESTAMP)
 private Date updateAt;
	
 @ManyToOne
 @JsonBackReference(value = "category")
 private Category category;
 
 public Note() {
  super();
 }
 public Note(String title, String content, Date createAt, Date updateAt, Category category) {
  super();
   this.title = title;
   this.content = content;
   this.createAt = createAt;
   this.updateAt = updateAt;
   this.category = category;
 }
    
 public long getId() {
   return id;
 }

 public void setId(long id) {
   this.id = id;
 }

 public String getTitle() {
   return title;
 }

 public void setTitle(String title) {
   this.title = title;
 }

 public String getContent() {
   return content;
 }

 public void setContent(String content) {
   this.content = content;
 }
 
 public Date getCreateAt() {
   return createAt;
 }

 public void setCreateAt(Date createAt) {
   this.createAt = createAt;
 }

 public Date getUpdateAt() {
   return updateAt;
 }

 public void setUpdateAt(Date updateAt) {
   this.updateAt = updateAt;
 }
 
 public Category getCategory() {
   return category;
 }

 public void setCategory(Category category) {
   this.category = category;
 }
}

Spring Data JPA Projections

We need to create these interface dao

-> CategoryDao

-> NoteDao

Here, we are creating an interface

src/main/java/com/note/dao/CategoryDao.java):





package com.note.dao;
import org.springframework.data.jpa.repository.JpaRepository;
import com.note.modal.Category;

public interface CategoryDao extends JpaRepository<Category, Long> {

}

Here, we are creating an interface

src/main/java/com/note/dao/NoteDao.java):





package com.note.dao;
import org.springframework.data.jpa.repository.JpaRepository;
import com.note.modal.Note;

public interface NoteDao extends JpaRepository<Note, Long> {

}

The services

We will create one interface in service package:

-> CategoryService

-> NoteService

Here, we are creating an interface

src/main/java/com/note/service/CategoryService.java):





package com.note.service;
import java.util.List;
import com.note.modal.Category;

public interface CategoryService {

 Category addCategory(Category category);

 Category editCategory(Category category, long id);

 void deleteCategory(long id);

 Category findCategory(long id);

 List<Category> findCategories();

}

Here, we are creating an interface

src/main/java/com/note/service/NoteService.java):





package com.note.service;
import com.note.modal.Note;

public interface NoteService {

 Note addNote(Note note, long id);

 Note editNote(Note note, long id);

 void deleteNote(long id);

 Note findNote(long id);

}

The managers classes implementation

We will create ont class in the impl package

-> CategoryServiceImpl

-> NoteServiceImpl

Here, we are creating a class impl

src/main/java/com/note/impl/CategoryServiceImpl.java):





package com.note.impl;
import java.util.Comparator;
import java.util.Date;
import java.util.List;
import java.util.stream.Collectors;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.note.dao.CategoryDao;
import com.note.modal.Category;
import com.note.service.CategoryService;

@Transactional
@Component
public class CategoryServiceImpl implements CategoryService {

 @Autowired
 private CategoryDao categoryDao;

 @Override
 public Category addCategory(Category category) {
   category.setCreateAt(new Date());
   return categoryDao.save(category);
 }

 @Override
 public Category editCategory(Category category, long id) {
   Category existsCategory = categoryDao.findById(id).orElse(null);
   existsCategory.setUpdateAt(new Date());
   existsCategory.setName(category.getName());
   existsCategory.setCreateAt(null);
   return categoryDao.save(existsCategory);
 }

 @Override
 public void deleteCategory(long id) {
   categoryDao.deleteById(id);
 }

 @Override
 public Category findCategory(long id) {
   return categoryDao.findById(id).orElse(null);
 }

 @Override
 public List<Category> findCategories() {
   List<Category> categories = categoryDao.findAll();
   categories = categories.stream().sorted(Comparator.comparing(Category::getName).reversed())
		.collect(Collectors.toList());
   return categories;
 }

}

Here, we are creating a class

src/main/java/com/note/impl/NoteServiceImpl.java):





package com.note.impl;

import java.util.Date;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.note.dao.CategoryDao;
import com.note.dao.NoteDao;
import com.note.modal.Category;
import com.note.modal.Note;
import com.note.service.NoteService;

@Transactional
@Component
public class NoteServiceImpl implements NoteService {

 @Autowired
 private NoteDao noteDao;

 @Autowired
 private CategoryDao categoryDao;

 @Override
 public Note addNote(Note note, long id) {
   Category category = categoryDao.findById(id).orElse(null);
   note.setCreateAt(new Date());
   category.addNote(note);
   return noteDao.save(note);
 }

 @Override
 public Note editNote(Note note, long id) {
   Note existsNote = noteDao.findById(id).orElse(null);
   existsNote.setUpdateAt(new Date());
   existsNote.setTitle(note.getTitle());
   existsNote.setContent(note.getContent());
   existsNote.setCreateAt(null);
   return noteDao.save(existsNote);
 }

 @Override
 public void deleteNote(long id) {
   noteDao.deleteById(id);
 }

 @Override
 public Note findNote(long id) {
   return noteDao.findById(id).orElse(null);
 }

}

@RestController API

We will create one class in controller package:

-> CategoryController

-> NoteController

Here, we are creating a class

src/main/java/com/note/controller/CategoryController.java):





package com.note.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.note.modal.Category;
import com.note.service.CategoryService;

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/api")
public class CategoryController {

 @Autowired
 private CategoryService categoryService;

 @PostMapping("/addCategory")
 Category addCategory(@RequestBody Category category) {
   return categoryService.addCategory(category);
 }

 @PutMapping("/editCategory/{id}")
 Category editCategory(@RequestBody Category category, @PathVariable long id) {
   return categoryService.editCategory(category, id);
 }

 @DeleteMapping("/deleteCategory/{id}")
 void deleteCategory(@PathVariable long id) {
   categoryService.deleteCategory(id);
 }

 @GetMapping("/findCategory/{id}")
 Category findCategory(@PathVariable long id) {
   return categoryService.findCategory(id);
 }

 @GetMapping("/findCategories")
 List<Category> findCategories() {
   return categoryService.findCategories();
 }

}

Here, we are creating a class

src/main/java/com/note/controller/NoteService.java):





package com.note.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.note.modal.Note;
import com.note.service.NoteService;

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/api")
public class NoteController {

 @Autowired
 private NoteService noteService;

 @PostMapping("/addNote/{id}")
 Note addNote(@RequestBody Note note, @PathVariable long id) {
   return noteService.addNote(note, id);
 }

 @PutMapping("/editNote/{id}")
   Note editNote(@RequestBody Note note, @PathVariable long id) {
   return noteService.editNote(note, id);
 }

 @DeleteMapping("/deleteNote/{id}")
 void deleteNote(@PathVariable long id) {
   noteService.deleteNote(id);
 }

 @GetMapping("/findNote/{id}")
 Note findNote(@PathVariable long id) {
   return noteService.findNote(id);
 }

}

NoteApplication

src/main/java/com/note/NoteApplication.java):





package com.note;
import org.springframework.boot.autoconfigure.SpringBootApplication;


@SpringBootApplication
public class NoteApplication {

 public static void main(String[] args) {
   SpringApplication.run(NoteApplication.class, args);		
   System.out.println("App started....");
  }
  
}

Conclusion

Now we have an overview of Spring Boot example when building a @RestController API.

We also take a look at client-server architecture for REST API using Spring Web MVC & Spring Data JPA, as well, we are gooing to continue with Ionic project structure for building a front-end app to make HTTP requests and consume responses.

Building an application note with Spring boot and Ionic part 2

Download This Application My note From Github

Building an application enterprise with Spring boot & Ionic Part 1

2022-01-18T03:42:00.011-08:00

Getting Started | Building an Application with Spring Boot

Build an application enterprise with Spring boot and Angular use Jpa

Objective:

Java Design Patterns

1. Design Patterns are already defined and provides industry standard approach to solve a recurring problem, so it saves time if we sensibly use the design pattern. There are many java design patterns that we can use in our java based projects.

2. Using design patterns promotes reusability that leads to more robust and highly maintainable code. It helps in reducing total cost of ownership (TCO) of the software product.

3. Since design patterns are already defined, it makes our code easy to understand and debug. It leads to faster development and new members of team understand it easily.

Used Skills in this project:

Java, SpringBoot, MicroServices, REST WebServices, JPA, Hibernate, MySQL Database, Maven, Angular, GitHub, SpringBoot Embedded Tomcat Server, STS-Eclipse IDE

Tools to be used

° Use any IDE to develop the Spring and Hibernate project. It may be STS/Eclipse/Netbeans. Here, we are using STS (Spring Tool Suite).

° Mysql for the database.

° Use any IDE to develop the Angular project. It may be Visual Studio Code/Sublime. Here, we are using Visual Studio Code.

° Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Spring MVC

Spring Boot Architecture

Introduction mysql to database

Introduction to the POM

pom.xml

    
  
   
 <?xml version="1.0" encoding="UTF-8"?>
 <project xmlns="http://maven.apache.org/POM/4.0.0"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0>/modelVersion>
   <parent>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-parent</artifactId>
	<version>2.4.1</version>
	<relativePath/> 
  </parent>
    
    <groupId>org.enterprise</groupId>
	<artifactId>enterprise</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>enterprise</name>
	<description>Demo project for Spring Boot</description>
    
    <properties>
	 <java.version>1.8</java.version>
    </properties>
    
    <dependencies>
    
   <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-data-jpa</artifactId>
   </dependency>
    
   <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
   </dependency>
   
   <dependency>
	<groupId>javax.validation</groupId>
	<artifactId>validation-api</artifactId>
   </dependency>
   
   <dependency>
	 <groupId>org.springframework.boot</groupId>
	 <artifactId>spring-boot-devtools</artifactId>
     <scope>runtime</scope>
     <optional>true</optional>
   </dependency>
   
   <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
   </dependency>
   
   <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    
  </dependencies>
  
  <build>
    <plugins>
	 <plugin>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-maven-plugin</artifactId>
	 </plugin>
	</plugins>
 </build>
 
 </project>

Properties File

The application.properties file is located in the src/main/resources directory. The code for sample application.properties

We need to create database name it bank

src/main/resources/application.properties

    
   
spring.datasource.url=jdbc:mysql://localhost:3306/enterprise?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
spring.datasource.username=root
spring.activemq.password=
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
spring.jpa.hibernate.ddl-auto=update
server.port=8080
spring.jpa.database=MYSQL

Class Diagram

Modals / Entities

We need to create these entities

-> Application

-> Enterprise

-> User

-> Criticality

-> Language

Here, we are creating an Entity

Application.java This object content id, name, description and two Enums Criticality and Language and relational @ManyToOne with Enterprise and @OneToOne with User, we need also implements Visitable this interface we will create in the backage visitor

src/main/java/com/enterprise/model/Application.java):





package com.enterprise.modal;
import javax.persistence.*;
import com.enterprise.visitor.Visitable;
import com.enterprise.visitor.Visitor;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
public class Application implements Visitable {
 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private Long id;
	
 @Column(columnDefinition="VARCHAR(40)")
 private String name;
	
 @Column(columnDefinition = "TEXT")
 private String description;
	
 @Enumerated(EnumType.STRING)
 private Language language;
	
 @Enumerated(EnumType.STRING)
 private Criticality criticality;
	
 @JsonBackReference(value = "user")
 @OneToOne(cascade = CascadeType.ALL)
 private User user;
	
 @JsonBackReference(value = "enterprise")
 @ManyToOne
 private Enterprise enterprise;
 
 public Application() {
  super();
 }
 
public Application(String name, String description, Language language, Criticality criticality, User user,
			Enterprise enterprise) {
  super();
 this.name = name;
 this.description = description;
 this.language = language;
 this.criticality = criticality;
 this.user = user;
 this.enterprise = enterprise;
 }

 public Long getId() {
   return id;
 }

 public void setId(long id) {
   this.id = id;
 }

 public String getName() {
   return name;
 }

 public void setName(String name) {
   this.name = name;
 }

 public String getDescription() {
   return description;
 }

 public void setDescription(String description) {
   this.description = description;
 }

 public Language getLanguage() {
   return language;
 }

 public void setLanguage(Language language) {
   this.language = language;
 }

 public Criticality getCriticality() {
   return criticality;
 }

 public void setCriticality(Criticality criticality) {
   this.criticality = criticality;
 }

 public User getUser() {
   return user;
 }

 public void setUser(User user) {
   this.user = user;
 }

 public Enterprise getEnterprise() {
   return enterprise;
 }

 public void setEnterprise(Enterprise enterprise) {
   this.enterprise = enterprise;
 }
	
 @Override
 public void accept(Visitor visitor) {
   visitor.visit(this);	
 }
}

Here, we are creating an Entity

Enterprise.java This object content id, name

src/main/java/com/enterprise/model/Enterprise.java):





package com.enterprise.modal;
import javax.persistence.*;
import com.enterprise.visitor.Visitable;
import com.enterprise.visitor.Visitor;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
public class Enterprise implements Visitable {
 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private Long id;
	
 @Column(columnDefinition="VARCHAR(40)")
 private String name;
	
 @Column(columnDefinition = "TEXT")
 private String description;
 
 @OneToMany(mappedBy="enterprise", cascade = CascadeType.ALL)
 private List<Application> applications;
 
 public Enterprise() {
  super();
 }
 
public Enterprise(String name, String description, List<Application> applications) {
  super();
 this.name = name;
 this.description = description;
 this.applications = applications;
 }

 public Long getId() {
   return id;
 }

 public void setId(long id) {
   this.id = id;
 }

 public String getName() {
   return name;
 }

 public void setName(String name) {
   this.name = name;
 }

 public String getDescription() {
   return description;
 }

 public void setDescription(String description) {
   this.description = description;
 }

 public List<Application> getApplications() {
   return applications;
 }

 public void setApplications(List<Application> applications) {
   this.applications = applications;
 }

 public void addApplication(Application app) {
   if (getApplications() == null) {
	this.applications = new ArrayList<Application>();
   }
	getApplications().add(app);
	app.setEnterprise(this);	
 }

 @Override
 public void accept(Visitor visitor) {
  visitor.visit(this);
  if (getApplications() != null) {
	getApplications().forEach(application -> {
	 application.accept(visitor);
    });
   }
 }
}

Here, we are creating an Entity

User.java This object content id, name, and relational @ManyToOne with Sport and Gym

src/main/java/com/enterprise/model/User.java):





package com.enterprise.modal;
import javax.persistence.*;

@Entity
public class User {
 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private Long id;
	
 @Column(columnDefinition="VARCHAR(40)")
 private String name;
 
 public User() {
  super();
 }
 
public User(String name) {
  super();
 this.name = name;
 }

 public Long getId() {
   return id;
 }

 public void setId(long id) {
   this.id = id;
 }

 public String getName() {
   return name;
 }

 public void setName(String name) {
   this.name = name;
 }

Enum

Here, we are creating an enum Criticality

src/main/java/com/enterprise/model/Criticality.java):





import com.enterprise.modal;

public enum Criticality {
 LOW, MEDIUM, HIGH
}

Here, we are creating an enum Language

src/main/java/com/enterprise/model/Language.java):





package com.enterprise.modal;

public enum Language {
 JAVA, JAVASCRIPT, PHP
}

Visitor Design Pattern

The purpose of a Visitor pattern is to define a new operation without introducing the modifications to an existing object structure. Imagine that we have a composite object which consists of components. The object's structure is fixed – we either can't change it, or we don't plan to add new types of elements to the structure. Now, how could we add new functionality to our code without modification of existing classes? The Visitor design pattern might be an answer. Simply put

We'll have to do is to add a function which accepts the visitor class to each element of the structure.

That way our components will allow the visitor implementation to “visit” them and perform any required action on that element. In other words, we'll extract the algorithm which will be applied to the object structure from the classes. Consequently,

We'll make good use of the Open/Closed principle

As we won't modify the code, but we'll still be able to extend the functionality by providing a new Visitor implementation.

We need to create these interfaces

-> Visitable

-> Visitor

Here, we are creating an interface Visitable

src/main/java/com/enterprise/visitor/Visitable.java):





package com.enterprise.visitor;

public interface Visitable {
 void accept(Visitor visitor);
}

Here, we are creating an interface

src/main/java/com/enterprise/model/Visitor.java):





package com.enterprise.visitor;

import com.enterprise.modal.Application;
import com.enterprise.modal.Enterprise;
import com.enterprise.modal.User;

public interface Visitor {
 int visit(Enterprise enterprise);
 int visit(Application application);
 int visit(User user);
}

Calculate

We will calculate the criticalities and the languages in these entities.

We need to create these interfaces

-> CalculateHigh

-> CalculateJava

-> CalculateJavascript

-> CalculateLow

-> CalculateMedium

-> CalculatePhp

Here, we are creating an entity CalculateHigh

CalculateHigh.java We are going implements Visitor to @Override the visit method

src/main/java/com/enterprise/calculator/CalculateHigh.java):





package com.enterprise.calculator;

import com.enterprise.modal.Application;
import com.enterprise.modal.Enterprise;
import com.enterprise.modal.Language;
import com.enterprise.modal.User;
import com.enterprise.visitor.Visitor;

public class CalculateHigh implements Visitor {

 private int value = 0;

 @Override
 public int visit(Enterprise enterprise) {
   return 0;
 }

 @Override
 public int visit(Application application) {
   if(application.getCriticality() == Criticality.HIGH) {
   value++;
   }
   return value;
 }

 @Override
 public int visit(User user) {
   return 0;
 }

 public int getValue() {
   return value;
 }

}

Here, we are creating an entity CalculateJava

CalculateJava.java We are going implements Visitor to @Override the visit method

src/main/java/com/enterprise/calculator/CalculateJava.java):





package com.enterprise.calculator;

import com.enterprise.modal.Application;
import com.enterprise.modal.Enterprise;
import com.enterprise.modal.Language;
import com.enterprise.modal.User;
import com.enterprise.visitor.Visitor;

public class CalculateJava implements Visitor {

 private int value = 0;

 @Override
 public int visit(Enterprise enterprise) {
   return 0;
 }

 @Override
 public int visit(Application application) {
   if(application.getLanguage() == Language.JAVA) {
   value++;
   }
   return value;
 }

 @Override
 public int visit(User user) {
   return 0;
 }

 public int getValue() {
   return value;
 }

}

Here, we are creating an entity CalculateJavascript

CalculateJavascript.java We are going implements Visitor to @Override the visit method

src/main/java/com/enterprise/calculator/CalculateJavascript.java):





package com.enterprise.calculator;

import com.enterprise.modal.Application;
import com.enterprise.modal.Enterprise;
import com.enterprise.modal.Language;
import com.enterprise.modal.User;
import com.enterprise.visitor.Visitor;

public class CalculateJavascript implements Visitor {

 private int value = 0;

 @Override
 public int visit(Enterprise enterprise) {
   return 0;
 }

 @Override
 public int visit(Application application) {
   if(application.getLanguage() == Language.JAVASCRIPT) {
   value++;
   }
   return value;
 }

 @Override
 public int visit(User user) {
   return 0;
 }

 public int getValue() {
   return value;
 }

}

Here, we are creating an entity CalculateLow

CalculateLow.java We are going implements Visitor to @Override the visit method

src/main/java/com/enterprise/calculator/CalculateLow.java):





package com.enterprise.calculator;

import com.enterprise.modal.Application;
import com.enterprise.modal.Enterprise;
import com.enterprise.modal.Language;
import com.enterprise.modal.User;
import com.enterprise.visitor.Visitor;

public class CalculateLow implements Visitor {

 private int value = 0;

 @Override
 public int visit(Enterprise enterprise) {
   return 0;
 }

 @Override
 public int visit(Application application) {
   if(application.getCriticality() == Criticality.LOW) {
   value++;
   }
   return value;
 }

 @Override
 public int visit(User user) {
   return 0;
 }

 public int getValue() {
   return value;
 }

}

Here, we are creating an entity CalculateMedium

CalculateMedium.java We are going implements Visitor to @Override the visit method

src/main/java/com/enterprise/calculator/CalculateMedium.java):





package com.enterprise.calculator;

import com.enterprise.modal.Application;
import com.enterprise.modal.Enterprise;
import com.enterprise.modal.Language;
import com.enterprise.modal.User;
import com.enterprise.visitor.Visitor;

public class CalculateMedium implements Visitor {

 private int value = 0;

 @Override
 public int visit(Enterprise enterprise) {
   return 0;
 }

 @Override
 public int visit(Application application) {
   if(application.getCriticality() == Criticality.MEDIUM) {
   value++;
   }
   return value;
 }

 @Override
 public int visit(User user) {
   return 0;
 }

 public int getValue() {
   return value;
 }

}

Here, we are creating an entity CalculatePhp

CalculatePhp.java We are going implements Visitor to @Override the visit method

src/main/java/com/enterprise/calculator/CalculatePhp.java):





package com.enterprise.calculator;

import com.enterprise.modal.Application;
import com.enterprise.modal.Enterprise;
import com.enterprise.modal.Language;
import com.enterprise.modal.User;
import com.enterprise.visitor.Visitor;

public class CalculatePhp implements Visitor {

 private int value = 0;

 @Override
 public int visit(Enterprise enterprise) {
   return 0;
 }

 @Override
 public int visit(Application application) {
   if(application.getLanguage() == Language.PHP) {
   value++;
   }
   return value;
 }

 @Override
 public int visit(User user) {
   return 0;
 }

 public int getValue() {
   return value;
 }

}

Spring Data JPA Projections

We need to create these interface dao

-> ApplicationDao

-> EnterpriseDao

-> UserDao

Here, we are creating an interface ApplicationDao

src/main/java/com/enterprise/dao/ApplicationDao.java):





package com.enterprise.dao;
import org.springframework.data.jpa.repository.JpaRepository;
import com.enterprise.modal.Application;

public interface ApplicationDao extends JpaRepository<Application, Long> {

}

Here, we are creating an interface EnterpriseDao

src/main/java/com/enterprise/dao/EnterpriseDao.java):





package com.enterprise.dao;
import org.springframework.data.jpa.repository.JpaRepository;
import com.enterprise.modal.Enterprise;

public interface EnterpriseDao extends JpaRepository<Enterprise, Long> {

}

Here, we are creating an interface UserDao

src/main/java/com/enterprise/dao/UserDao.java):





package com.enterprise.dao;
import org.springframework.data.jpa.repository.JpaRepository;
import com.enterprise.modal.User;

public interface UserDao extends JpaRepository<User, Long> {

}

The services

We will create one interface in service package:

-> ApplicationService

-> EnterpriseService

-> UserService

Here, we are creating an interface ApplicationService

src/main/java/com/enterprise/service/ApplicationService.java):





package com.enterprise.service;
import java.util.List;
import com.enterprise.modal.Application;

public interface ApplicationService {
   Application createApplicationForUser(Application application, long id);
   
   Application createApplicationForEnterprise(long idApplication, long id);
   
   List<Application> findApplications();
   
   List<Application> findApplicationsForEnterprise(long id);
   
   Application findApplication(long id);
   
   void deleteApplication(long id);
}

Here, we are creating an interface EnterpriseService

src/main/java/com/enterprise/service/EnterpriseService.java):





package com.enterprise.service;
import java.util.List;
import org.springframework.stereotype.Service;
import com.enterprise.modal.Enterprise;

public interface EnterpriseService {
	 
  Enterprise createEnterprise(Enterprise enterprise);
	 
  List<Enterprise> findEnterprises();
	 
  Enterprise findEnterprise(long id);
	 
  void deleteEnterprise(long id);
	  
  int calculateJava(Enterprise enterprise);
	 
  int calculateLow(Enterprise enterprise);
	 
  int calculateMedium(Enterprise enterprise);
	 
  int calculatePhp(Enterprise enterprise);
	 
  int calculateHigh(Enterprise enterprise);
	 
  int calculateJavascript(Enterprise enterprise);

}

Here, we are creating an interface UserService

src/main/java/com/enterprise/service/UserService.java):





package com.enterprise.service;
import java.util.List;
import com.enterprise.modal.User;

public interface UserService {
   User createUser(User user);
   
   List<User> findUsers(); 
}

The managers classes implementation

We will create one interface in impl package:

-> ApplicationServiceImpl

-> EnterpriseServiceImpl

-> UserServiceImpl

Here, we are creating an class ApplicationServiceImpl

src/main/java/com/enterprise/impl/ApplicationServiceImpl.java):





package com.enterprise.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.enterprise.dao.ApplicationDao;
import com.enterprise.dao.EnterpriseDao;
import com.enterprise.dao.UserDao;
import com.enterprise.modal.Application;
import com.enterprise.modal.Enterprise;
import com.enterprise.modal.User;
import com.enterprise.service.ApplicationService;

@Transactional
@Component
public class ApplicationServiceImpl implements ApplicationService{
 
 @Autowired
 private ApplicationDao applicationDao;
	
 @Autowired
 private UserDao userDao;
	
 @Autowired
 private EnterpriseDao enterpriseDao;

 @Override
 public Application createApplicationForUser(Application application, long id) {
   User user = userDao.findById(id).orElse(null);
   application.setUser(user);
   return applicationDao.save(application);
 }

 @Override
 public List<Application> findApplications() {
   return applicationDao.findAll();
 }

 @Override
 public Application findApplication(long id) {
   return applicationDao.findById(id).orElse(null);
 }

 @Override
 public void deleteApplication(long id) {
   Application application = applicationDao.findById(id).orElse(null);
   application.setUser(null);
   applicationDao.delete(application);		
 }

 @Override
 public Application createApplicationForEnterprise(long idApplication, long id) {
   Enterprise enterprise = enterpriseDao.findById(id).orElse(null);
   Application application = applicationDao.findById(idApplication).orElse(null);
   enterprise.addApplication(application);
   return applicationDao.save(application);
 }

 @Override
 public List<Application> findApplicationsForEnterprise(long id) {
   Enterprise enterprise = enterpriseDao.findById(id).orElse(null);
   return enterprise.getApplications();
 }
}

Here, we are creating an interface EnterpriseServiceImpl

src/main/java/com/enterprise/impl/EnterpriseServiceImpl.java):





package com.enterprise.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.enterprise.calculator.CalculateHigh;
import com.enterprise.calculator.CalculateMedium;
import com.enterprise.calculator.CalculateJava;
import com.enterprise.calculator.CalculateJavascript;
import com.enterprise.calculator.CalculateLow;
import com.enterprise.calculator.CalculatePhp;
import com.enterprise.dao.EnterpriseDao;
import com.enterprise.modal.Enterprise;
import com.enterprise.service.EnterpriseService;

@Transactional
@Component
public class EnterpriseServiceImpl implements EnterpriseService {

 @Autowired
 private EnterpriseDao enterpriseDao;

 @Override
 public Enterprise createEnterprise(Enterprise enterprise) {
   return enterpriseDao.save(enterprise);
 }

 @Override
 public List<Enterprise> findEnterprises() {
   return enterpriseDao.findAll();
 }

 @Override
 public Enterprise findEnterprise(long id) {
   return enterpriseDao.findById(id).orElse(null);
 }

 @Override
 public void deleteEnterprise(long id) {
   enterpriseDao.deleteById(id);	
 }

 @Override
 public int calculateJava(Enterprise enterprise) {
   CalculateJava calculateJava = new CalculateJava();
   enterprise.accept(calculateJava);
   return calculateJava.getValue();
 }

 @Override
 public int calculateLow(Enterprise enterprise) {
   CalculateLow calculateLow = new CalculateLow();
   enterprise.accept(calculateLow);
   return calculateLow.getValue();
 }

 @Override
 public int calculateMedium(Enterprise enterprise) {
   CalculateMedium calculateMedium = new CalculateMedium();
   enterprise.accept(calculateMedium);
   return calculateMedium.getValue();
 }

 @Override
 public int calculatePhp(Enterprise enterprise) {
   CalculatePhp calculatePhpApps = new CalculatePhp();
   enterprise.accept(calculatePhpApps);
   return calculatePhpApps.getValue();
 }

 @Override
 public int calculateJavascript(Enterprise enterprise) {
   CalculateJavascript calculateJavascript = new CalculateJavascript();
   enterprise.accept(calculateJavascript);
   return calculateJavascript.getValue();
 }

 @Override
 public int calculateHigh(Enterprise enterprise) {
   CalculateHigh calculateHigh = new CalculateHigh();
   enterprise.accept(calculateHigh);
   return calculateHigh.getValue();
 }

}

Here, we are creating an Entity UserServiceImpl

src/main/java/com/enterprise/impl/UserServiceImpl.java):





package com.enterprise.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;
import com.enterprise.dao.UserDao;
import com.enterprise.modal.User;
import com.enterprise.service.UserService;

@Transactional
@Component
public class UserServiceImpl implements UserService{
 
 @Autowired
 private UserDao userDao;

 @Override
 public User createUser(User user) {
   return userDao.save(user);
 }

 @Override
 public List<User> findUsers() {
   return userDao.findAll();
 }
}

@RestController API

We will create one interface in controller package:

-> ApplicationController

-> EnterpriseController

-> UserController

Here, we are creating an Entity ApplicationController

src/main/java/com/enterprise/controller/ApplicationController.java):





package com.enterprise.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.enterprise.modal.Application;
import com.enterprise.service.ApplicationService;

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/api")
public class ApplicationController {

 @Autowired
 private ApplicationService applicationService;

 @PostMapping("/createApplication/{id}")
 Application createApplication(@RequestBody Application application, @PathVariable long id) {
   return applicationService.createApplicationForUser(application, id);
 }
 
 @PostMapping("/createApplicationForEnterprise/{idApplication}/{id}")
 Application createApplicationForEnterprise(@PathVariable long idApplication, @PathVariable long id) {
   return applicationService.createApplicationForEnterprise(idApplication, id);
 }
	   
 @GetMapping("/findApplications")
   List<Application> findApplications() {
   return applicationService.findApplications();
 }
	
 @GetMapping("/findApplicationsForEnterprise/{id}")
 List<Application> findApplicationsForEnterprise(@PathVariable long id) {
   return applicationService.findApplicationsForEnterprise(id);
 }

 @GetMapping("/findApplication/{id}")
 Application findApplication(@PathVariable long id) {
   return applicationService.findApplication(id);
 }

 @DeleteMapping("/deleteApplication/{id}")
 void deleteApplication(@PathVariable long id) {
   applicationService.deleteApplication(id);
 }
}

Here, we are creating an Entity EnterpriseController

src/main/java/com/enterprise/conntroller/EnterpriseController.java):





package com.enterprise.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.enterprise.dao.EnterpriseDao;
import com.enterprise.modal.Enterprise;
import com.enterprise.service.EnterpriseService;

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/api")
public class EnterpriseController {

 @Autowired
 private EnterpriseService enterpriseService;

 @Autowired
 private EnterpriseDao enterpriseDao;

 @PostMapping("/createEnterprise")
 Enterprise createEnterprise(@RequestBody Enterprise enterprise) {
   return enterpriseService.createEnterprise(enterprise);
 }

 @GetMapping("/findEnterprises")
 List<Enterprise> findEnterprises() {
   return enterpriseService.findEnterprises();
 }
   
 @GetMapping("/findEnterprise/{id}")
 Enterprise findEnterprise(@PathVariable long id) {
   return enterpriseService.findEnterprise(id);
 }
    
 @DeleteMapping("/deleteEnterprise/{id}")
 void deleteEnterprise(@PathVariable long id) {
   enterpriseService.deleteEnterprise(id);
 }
 
 @GetMapping("/calculateJava/{id}")
 int calculateJavaApps(@PathVariable long id) {
   Enterprise enterprise = enterpriseDao.findById(id).get();
   return enterpriseService.calculateJava(enterprise);
 }
 
 @GetMapping("/calculateLow/{id}")
 int calculateLowApps(@PathVariable long id) {
   Enterprise enterprise = enterpriseDao.findById(id).get();
   return enterpriseService.calculateLow(enterprise);
 }
 
 @GetMapping("/calculateMedium/{id}")
 int calculateLowAndJava(@PathVariable long id) {
   Enterprise enterprise = enterpriseDao.findById(id).get();
   return enterpriseService.calculateMedium(enterprise);
 }
    
 @GetMapping("/calculatePhp/{id}")
 int calculatePhpApps(@PathVariable long id) {
   Enterprise enterprise = enterpriseDao.findById(id).get();
   return enterpriseService.calculatePhp(enterprise);
 }
 
 @GetMapping("/calculateHigh/{id}")
 int calculateHighApps(@PathVariable long id) {
   Enterprise enterprise = enterpriseDao.findById(id).get();
   return enterpriseService.calculateHigh(enterprise);
 }
    
 @GetMapping("/calculateJavascript/{id}")
 int calculateHigtAndPhp(@PathVariable long id) {
   Enterprise enterprise = enterpriseDao.findById(id).get();
   return enterpriseService.calculateJavascript(enterprise);
 }
}

Here, we are creating an Entity UserController

src/main/java/com/enterprise/controller/UserController.java):





package com.enterprise.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.enterprise.modal.User;
import com.enterprise.service.UserService;

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/api")
public class UserController {

 @Autowired
 private UserService userService;

 @PostMapping("/createUser")
 User createUser(@RequestBody User user) {
   return userService.createUser(user);
 }

 @GetMapping("/findUsers")
 List<User> findUsers() {
   return userService.findUsers();
 }

}

EnterpriseApplication

src/main/java/com/note/EnterpriseApplication.java):





package com.enterprise;
import org.springframework.boot.autoconfigure.SpringBootApplication;


@SpringBootApplication
public class EnterpriseApplication {

 public static void main(String[] args) {
   SpringApplication.run(EnterpriseApplication.class, args);		
   System.out.println("App started....");
  }
  
}

Conclusion

Now we have an overview of Spring Boot example when building a @RestController API.

We also take a look at client-server architecture for REST API using Spring Web MVC & Spring Data JPA, and The Visitor pattern is great to separate the algorithm from the classes on which it operates. Besides that, it makes adding new operation more easily, just by providing a new implementation of the Visitor. as well, we are gooing to continue with Ionic project structure for building a front-end app to make HTTP requests and consume responses.

Building an application note with Spring boot and Ionic part 2

Download This Application My ennterprise From Github

Building an application bank with Spring boot and Ionic part 2

2022-01-18T03:41:00.009-08:00

Getting Started | Building an Application with Ionic

In this part 2 of bank application we will buid an application with Ionic framewotk

In this tutorials we will build an application bank to create Standing Account and Savings Account the user can do operations deposit, debit or transfer from account to another the admin can add the accounts with balance, tax or loan for any account.

Installing Ionic

Before proceeding, make sure your computer has Node.js installed.

Install the Ionic CLI with npm:


$  npm install -g @ionic/cli

Starting an App

Starting a new Ionic app is incredibly simple. From the command line, run the ionic start command and the CLI will handle the rest.

Here, myApp is the name of the project, blank is the starter template, and the project type is angular.


$  ionic start bank blank

Project structure

Let's go through the files and folders of the app.

/ src

Inside of the /src directory we find our raw, uncompiled code. This is where most of the work for your Ionic app will take place.

/ app

The App folder is the largest folder because it contains all the code of our ionic app. It has all the components, modules, pages, services and styles you will use to build your app.

Modals

Create a folder modal in side it add a class Model.ts

src/app/modal/Modal.ts




export interface Account {
   id: number;
   code: string;
   createDate: any;
   balance: number;
}

export interface Client {
   id: number;
   username: string;
   password: string;
   name: string;
   email: string;
   admin: boolean;
   accounts: Account[];
}

export interface Credit extends Operation {}

export interface Operation {
   numberOperation: number;
   operationDate: any;
   amount: number;
   typeOperation: string;
}

export interface SavingsAccount extends Account {
   tax: number;
}

export interface StandingAccount extends Account {
  loan: number;
}

export interface Withdraw extends Operation {}

export interface AmmountResponse {
   amount: number;
}

Angular Services

An example of when to use services would be to transfer data from one controller to another custom service.

Create BankService in the service package

-> BankService

src/app/service/bank-service.ts




 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable }  from  '@angular/core';
 import  { Observable }  from  'rxjs';
 import  { AmmountResponse, Client, Operation, SavingsAccount, StandingAccount }  from  '../modal/Modal';


@Injectable({
  providedIn: 'root'
})
export class BankService {

  constructor(private http: HttpClient) { }

  checkingAccount(code: number): Observable<any[]> {
     return this.http.get<any[]>(`http://localhost:8080/api/checkingAccount/${code}`);
  }

  depositOperation(operation: Operation, code: number): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/depositOperation/${code}`, operation);
  }

  saveClient(client: Client): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/saveClient`, client);
  }
  
  addStandingAccount(standingAcount: StandingAccount, code: number): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/addStandingAccount/${code}`, standingAcount);
  }
  
  addSavingsAccount(savingsAccount: SavingsAccount, code: number): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/addSavingsAccount/${code}`, savingsAccount);
  }
  
  debitOperation(ammountResponse: AmmountResponse, code: number): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/debitOperation/${code}`, ammountResponse); 
  }
  
  findWithdraws(code: number): Observable<any[]> {
     return this.http.get<any[]>(`http://localhost:8080/api/findWithdraws/${code}`); 
  }
  
  findCredits(code: number): Observable<any[]> {
     return this.http.get<any[]>(`http://localhost:8080/api/findCredits/${code}`); 
  }
  
  transfer(code1: number, code2: number, operation: Operation): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/transfer/${code1}/${code2}`, operation); 
  }
  
  findClients(): Observable<any[]> {
     return this.http.get<any[]>(`http://localhost:8080/api/findClients`); 
  }
  
  findClient(id: number): Observable<any> {
     return this.http.get<any>(`http://localhost:8080/api/findClient/${id}`); 
  }
  
  updateClient(client: Client, id: number): Observable<any> {
     return this.http.put<any>(`http://localhost:8080/api/updateClient/${id}`, client);
  }
  
  findStandingAccountAccounts(id: number): Observable<any[]> {
     return this.http.get<any[]>(`http://localhost:8080/api/findStandingAccountAccounts/${id}`); 
  }
  
  findSavingsAccountAccounts(id: number): Observable<any[]> {
     return this.http.get<any[]>(`http://localhost:8080/api/findSavingsAccountAccounts/${id}`); 
  }
  
  findAccountById(id: number): Observable<any> {
     return this.http.get<any>(`http://localhost:8080/api/findAccountById/${id}`); 
  }
  
  findAccountsForClient(id: number): Observable<any[]> {
     return this.http.get<any[]>(`http://localhost:8080/api/findAccountsForClient/${id}`); 
  }
  
  editStandingAccount(standingAccount: StandingAccount, id: number): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/editStandingAccount/${id}`, standingAccount); 
  }
  
  editSavingsAccount(savingsAccount: SavingsAccount, id: number): Observable<any> {
     return this.http.post<any>(`http://localhost:8080/api/editSavingsAccount/${id}`, savingsAccount); 
  }
}

Create pages

-> login

Go ahead and open your terminal or command prompt and follow the instructions:


$  ng generate page login

We will use these components

- login.page.ts
- login.page.html

src/app/login.page.ts



 import  { Component, OnInit }  from  '@angular/core';
 import  { Router}  from  '@angular/router';
 import  { Client }  from  '../modal/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss']
})
export class LoginPage implements OnInit {
  progressBar = false;
  client: Client = {} as Client;

  constructor(private bankService: BankService, private router: Router) { }

  ngOnInit() { }

   addClient() {
      this.bankService.saveClient(this.client).subscribe((client) => {
      this.client = client;
      this.router.navigate(["/find-clients/", client.id]);
    });
  }
  
}

src/app/login.page.html




<ion-header>
<ion-toolbar color="tertiary">
  <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="person-circle-outline"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Login to your bank</ion-title>
</ion-toolbar>
</ion-header>

<div style="margin: 40px auto;">
  <ion-avatar>
    <img src="https://www.kindpng.com/picc/m/78-785975_icon-profile-bio-avatar-person-symbol-chat-icon.png">
  </ion-avatar>
</div>

<ion-content>
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>
    <ion-card-header>
      <ion-card-subtitle>Please login to access your account</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <form name="client" (ngSubmit)="addClient()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="text" id="username" placeholder="Enter username" name="username" [(ngModel)]="client.username"
            #username="ngModel" required></ion-input>
       </ion-item>

        <ion-item>
          <ion-input type="password" id="password" placeholder="Enter password" name="password"
            [(ngModel)]="client.password" #password="ngModel" required></ion-input>
        </ion-item>

        <br>
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="username.invalid || password.invalid">Login</ion-button>
      </form>

   </ion-card-content>
  </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions:


$  ng generate page update-client

We will use these components

- update-client.page.ts
- update-client.page.html

src/app/update-client.page.ts



 import  { Component, OnInit }  from  '@angular/core';
 import  { Client }  from  '../modal/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-update-client',
  templateUrl: './login.page.html',
  styleUrls: ['./update-client.page.scss']
})
export class LoginPage implements OnInit {
  progressBar = false;
  client: Client = {} as Client;
  id: number;
  
  constructor(private bankService: BankService) { }

  ngOnInit() { 
       this.showProgressBar = true;
      this.bankService.findClient(this.id).subscribe(client => {
       this.client = client;
    });
  }

   updateClient() {
      this.bankService.updateClient(this.client, this.id).subscribe((client) => {
      this.client = client;
      this.cancel();
    });
  }
  
  cancel() {
   window.location.reload();
  }
  
}

src/app/update-client.page.html




<ion-header>
<ion-toolbar color="tertiary">
  <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="person-circle-outline"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Update your account</ion-title>
</ion-toolbar>
</ion-header>

<div style="margin: 40px auto;">
  <ion-avatar>
    <img src="https://www.kindpng.com/picc/m/78-785975_icon-profile-bio-avatar-person-symbol-chat-icon.png">
  </ion-avatar>
</div>

<ion-content>
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>

    <ion-card-content>
      <form name="client" (ngSubmit)="updateClient()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="text" id="username" placeholder="Enter username" name="username" [(ngModel)]="client.username"
            #username="ngModel" required></ion-input>
       </ion-item>

        <ion-item>
          <ion-input type="password" id="password" placeholder="Enter password" name="password"
            [(ngModel)]="client.password" #password="ngModel" required></ion-input>
        </ion-item>

        <ion-item>
          <ion-input type="text" id="name" placeholder="Enter name" name="name" [(ngModel)]="client.name"
            #name="ngModel" required></ion-input>
       </ion-item>

        <ion-item>
          <ion-input type="text" id="email" placeholder="Enter email" name="email"
            [(ngModel)]="client.email" #email="ngModel" required></ion-input>
        </ion-item>
        
        <br>
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="username.invalid || password.invalid || name.invalid || email.invalid">Save</ion-button>
      </form>

   </ion-card-content>
  </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions:


$  ng generate page find-clients

We will use these components

- app-find-clients.ts
- app-find-clients.html

src/app/app-find-clients.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { ActivatedRoute, Router }  from  '@angular/router';
 import  { Client }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';
 import  { ModalController }  from  '@ionic/angular'';
 import  { AddSavingsAccountPage }  from  '../add-savings-account/add-savings-account.page';
 import  { AddStandingAccountPage }  from  '../add-standing-account/add-standing-account.page';
 import  { UpdateClientPage }  from  '../update-client/update-client.page';

@Component({
  selector: 'app-find-clients',
  templateUrl: './app-find-clients.page.html',
  styleUrls: ['./app-find-clients.page.scss']
})
export class FindClientsPage implements OnInit {
  clients: Client[];
  client: Client = {} as Client;
  id: number;
  accountsAdded = 0;
  standingAccount: any;

  techs = [
    {
      'title': 'Contacts',
      'icon': 'call-outline'
    },
    {
      'title': 'Products',
      'icon': 'card-outline'
    },
    {
      'title': 'Warning',
      'icon': 'warning'
    },
    {
      'title': 'Help',
      'icon': 'help-circle'
    }
  ];

  constructor(private route: ActivatedRoute, private bankService: BankService,
    private modalController: ModalController, private router: Router) { }

  ngOnInit() {
    this.id = this.route.snapshot.params.id;
    this.bankService.findClient(this.id).subscribe(client => {
     this.client = client;
     this.accountsAdded = this.client.accounts.length;
   });
   this.bankService.findClients().subscribe(clients => {
     this.clients = clients;
   });
  }
  
  logout() {
    this.router.navigateByUrl("/login")
  }
  
  async updateClient(id: number) {
    const modal = await this.modalController.create({
      component: UpdateClientPage,
      swipeToClose: true,
      componentProps: {id}
    });
    return await modal.present();
  }
  
    async addStandingAccount(id: number) {
    const modal = await this.modalController.create({
      component: AddStandingAccountPage,
      swipeToClose: true,
      componentProps: {id}
    });
    return await modal.present();
  }
  
    async addSavingsAccount(id: number) {
    const modal = await this.modalController.create({
      component: AddSavingsAccountPage,
      swipeToClose: true,
      componentProps: {id}
    });
    return await modal.present();
  }

}

src/app/app-find-clients.html




<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start" (click)="updateClient(client.id)" *ngIf="client.name==null || client.email==null">
      <ion-button>
        <ion-icon slot="icon-only" name="person-add-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Welcome {{client.username}} </ion-title>
    <ion-buttons slot="primary" (click)="logout()">
      <ion-button color="danger" fill="outline">
        Logout
        <ion-icon slot="end" name="add-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>

  <ion-toolbar color="danger" *ngIf="accountsAdded==0">
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="alert-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>You have to create your account </ion-title>
  </ion-toolbar>
  <ion-toolbar color="tertiary" *ngIf="accountsAdded >= 1" style="cursor: pointer" (click)="checkingAccount(client.id)">
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="cash-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Checking your account</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>
  <ion-list *ngFor="let tech of techs">
    <ion-item button color="light">
      <ion-icon slot="start" name="{{tech.icon}}" color="danger"></ion-icon>
      <ion-label>
        <h3>{{tech.title}}</h3>
      </ion-label>
    </ion-item>
  </ion-list><br/>

  <ion-card *ngIf="client.admin">
    <ion-card-header>
      <ion-card-subtitle>Clents</ion-card-subtitle>
      <ion-card-title>Add account to a client</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <ion-list *ngFor="let client of clients">
        <ion-item>
          <ion-label>
            <h3>{{client.name}} - {{client.username}}</h3>
          </ion-label>
          <ion-icon slot="end" name="create-outline" color="primary" style="cursor: pointer"
            [routerLink]="['/find-account/', client.id]"></ion-icon>
        </ion-item>
        <ion-item>
          <ion-button size="small" color="warning" (click)="addStandingAccount(client.id)">Add standing account
          </ion-button>
          <ion-button size="small" color="danger" (click)="addSavingsAccount(client.id)">Add savings account
          </ion-button>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions:


$  ng generate page add-savings-account

We will use these components

- add-savings-account.ts
- add-savings-account.html

src/app/add-savings-account.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { Router }  from  '@angular/router';
 import  { Client, SavingsAccount }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-add-savings-account',
  templateUrl: './add-savings-account.page.html',
  styleUrls: ['./add-savings-account.page.scss']
})
export class AddSavingsAccountPage implements OnInit {
  progressBar = false;
  savingsAccountExist = 0;  
  savingsAccount: SavingsAccount = {} as SavingsAccount;
  client: Client = {} as Client;  
  id: number;
  
  constructor(private bankService: BankService) { }
  
   ngOnInit() {
    this.bankService.findClient(this.id).subscribe(client => {
      this.client = client;
      this.bankService.findSavingsAccountAccounts(this.client.id).subscribe(savingsAccount => {
        this.savingsAccountExist = savingsAccount.length;
      })
    });
  }
  addStandingAccount() {
    this.showProgressBar = true;
    this.bankService.addSavingsAccount(this.savingsAccount, this.id).subscribe(savingsAccount => {
      this.savingsAccount = savingsAccount;
      this.cancel();
    })
  }
  cancel() {
   window.location.reload();
  }
}

src/app/add-savings-account.html




<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>
    <ion-card-header>
      <ion-card-subtitle>Please a savings account for {{client.name}}</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <form name="client" (ngSubmit)="addStandingAccount()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="number" id="balance" placeholder="Enter balance" name="balance" [(ngModel)]="savingsAccount.balance"
            #balance="ngModel" required></ion-input>
       </ion-item>

        <ion-item>
          <ion-input type="number" id="tax" placeholder="Enter tax" name="tax"
            [(ngModel)]="savingsAccount.tax" #tax="ngModel" required></ion-input>
        </ion-item>

        <br>
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="balance.invalid || tax.invalid">Save</ion-button>
      </form>

   </ion-card-content>
  </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions:


$  ng generate page add-standing-account

We will use these components

- add-standing-account.ts
- add-standing-account.html

src/app/add-standing-account.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { Router }  from  '@angular/router';
 import  { Client, StandingAccount }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-add-standing-account',
  templateUrl: './add-standing-account.page.html',
  styleUrls: ['./add-standing-account.page.scss']
})
export class AddStandingAccountPage implements OnInit {
  progressBar = false;
  standingAccountExist = 0;  
  standingAccount: StandingAccount = {} as StandingAccount;
  client: Client = {} as Client;  
  id: number;
  
  constructor(private bankService: BankService) { }
  
   ngOnInit() {
    this.bankService.findClient(this.id).subscribe(client => {
      this.client = client;
      this.bankService.findStandingAccountAccounts(this.client.id).subscribe(standingAccount => {
        this.standingAccountExist = standingAccount.length;
      })
    });
  }
   addStandingAccount() {
    this.showProgressBar = true;
    this.bankService.addStandingAccount(this.standingAccount, this.id).subscribe(standingAccount => {
      this.standingAccount = standingAccount;
      this.cancel();
    })
  }
  cancel() {
   window.location.reload();
  }
}

src/app/add-savings-account.html




<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>
    <ion-card-header>
      <ion-card-subtitle>Please a astandig account for {{client.name}}</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <form name="client" (ngSubmit)=" addStandingAccount()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="number" id="balance" placeholder="Enter balance" name="balance" [(ngModel)]="standingAccount.balance"
            #balance="ngModel" required></ion-input>
       </ion-item>

        <ion-item>
          <ion-input type="number" id="loan" placeholder="Enter loan" name="loan"
            [(ngModel)]="standingAccount.loan" #loan="ngModel" required></ion-input>
        </ion-item>

        <br>
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="balance.invalid || loan.invalid">Save</ion-button>
      </form>

   </ion-card-content>
  </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions:


$  ng generate page checking-account

We will use these components

- checking-account.ts
- checking-account.html

src/app/checking-account.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { Router, ActivatedRoute }  from  '@angular/router';
 import  { Account, SavingsAccount, StandingAccount}  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';
 import  { ModalController }  from  '@ionic/angular';
 import  { DebitPage }  from  '../debit/debit.page';
 import  { DepositPage }  from  '../deposit/deposit.page';
 import  { OperationPage }  from  '../operation/operation.page"';
 import  { TransferPage }  from  '../transfer/transfer.page';

@Component({
  selector: 'app-checking-account',
  templateUrl: './checking-account.page.html',
  styleUrls: ['./checking-account.page.scss']
})
export class AddStandingAccountPage implements OnInit {
  savingsAccounts: SavingsAccount[];
  standingAccounts: StandingAccount[];
  code: any;  
  account: Account = {} as Account;
  savingsAccount: SavingsAccount = {} as SavingsAccount;  
  id: number;
   
  constructor(private bankService: BankService, private route: ActivatedRoute, private router: Router, private modalController: ModalController) { }
  
   ngOnInit() {
    this.id = this.route.snapshot.params.id;
    this.bankService.findStandingAccountAccounts(this.id).subscribe((standingAccounts) => {
        this.standingAccounts = standingAccounts;
      });
    this.bankService.findSavingsAccountAccounts(this.id).subscribe((savingsAccounts) => {
        this.savingsAccounts = savingsAccounts;
      });
  }

  cancel() {
   this.router.navigate(["/find-clients/", this.id]);
  }
  
  async doOperation(id) {
    const modal = await this.modalController.create({
      component: OperationPage,
      swipeToClose: true,
      componentProps: { id },
    });
    return await modal.present();
  }
  async depositOperation(id) {
    const modal = await this.modalController.create({
      component: DepositPage,
      swipeToClose: true,
      componentProps: { id },
    });
    return await modal.present();
  }
  async debitOperation(id) {
    const modal = await this.modalController.create({
      component: DebitPage,
      swipeToClose: true,
      componentProps: { id },
    });
    return await modal.present();
  }
    async transferCode1(code1, id) {
    const modal = await this.modalController.create({
      component: TransferPage,
      swipeToClose: true,
      componentProps: {code1, id },
    });
    return await modal.present();
  }
    async transferCode2(code2, id) {
    const modal = await this.modalController.create({
      component: TransferPage,,
      swipeToClose: true,
      componentProps: {code2, id },
    });
    return await modal.present();
  }
 cancel() {
   this.router.navigate(["/login/"]);
  }
}

src/app/add-savings-account.html




<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
    <ion-buttons (click)="logout()" slot="primary">
      <ion-button color="light" fill="outline">
      Logout
        <ion-icon slot="end" name="add-outline"></ion-icon>
      </ion-button>
  </ion-buttons>
</ion-toolbar>
</ion-header>

<ion-content>

  <ion-card *ngIf="stadingAccounts!=null">
    <ion-card-header color="light">
      <ion-card-subtitle>Stading Account</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
    
     <ion-card-content>
      <ion-list *ngFor="let stading of stadingAccounts">
        <div style="margin: auto 100px; text-align: center; margin-bottom: 20px;">
          <div style="width: 230px; background-color: #9b59b6; border-radius: 5%; color: #ecf0f1;">
            <h1 style="font-size: 50px; margin-top: 20px;">
              {{stading.balance}},00
            </h1>
          </div>
          <br />
          <ion-text color="dark">
            <h1 style="text-transform: uppercase;">No: {{stading.code}}</h1>
          </ion-text>
          <ion-text color="danger">
            <h5>{{stading.createDate | date}}</h5>
          </ion-text>
          <ion-button size="small" fill="outline" color="primary" (click)="doOperation(stading.id)">Operations
          </ion-button>
        </div>
        <ion-row>
          <ion-col>
            <ion-button expand="full" color="success" (click)="depositOperation(stading.id)">Deposit</ion-button>
          </ion-col>
          <ion-col>
            <ion-button expand="full" color="danger" [disabled]="stading.balance==0" (click)="debitOperation(stading.id)">Debit</ion-button>
          </ion-col>
          <ion-col>
            <ion-button expand="full" color="warning" [disabled]="stading.balance==0" (click)="transferCode1(stading.id, id)">Transfer</ion-button>
          </ion-col>
        </ion-row>
      </ion-list>
    </ion-card>
    
      <ion-card *ngIf="savingsAccounts!=null">
    <ion-card-header color="light">
      <ion-card-subtitle>Savings Account</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
    
     <ion-card-content>
      <ion-list *ngFor="let stading of stadingAccounts">
        <div style="margin: auto 100px; text-align: center; margin-bottom: 20px;">
          <div style="width: 230px; background-color: #9b59b6; border-radius: 5%; color: #ecf0f1;">
            <h1 style="font-size: 50px; margin-top: 20px;">
              {{savingsAccount.balance}},00
            </h1>
          </div>
          <br />
          <ion-text color="dark">
            <h1 style="text-transform: uppercase;">No: {{savingsAccount.code}}</h1>
          </ion-text>
          <ion-text color="danger">
            <h5>{{savingsAccount.createDate | date}}</h5>
          </ion-text>
          <ion-button size="small" fill="outline" color="primary" (click)="doOperation(savingsAccount.id)">Operations
          </ion-button>
        </div>
        <ion-row>
          <ion-col>
            <ion-button expand="full" color="success" (click)="depositOperation(savingsAccount.id)">Deposit</ion-button>
          </ion-col>
          <ion-col>
            <ion-button expand="full" color="danger" [disabled]="savingsAccount.balance==0" (click)="debitOperation(savingsAccount.id)">Debit</ion-button>
          </ion-col>
          <ion-col>
            <ion-button expand="full" color="warning" [disabled]="savingsAccount.balance==0" (click)="transferCode2(savingsAccount.id, id)">Transfer</ion-button>
          </ion-col>
        </ion-row>
      </ion-list>
    </ion-card>
  
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions:


$  ng generate page debit

We will use these components

- debit.ts
- debit.html

src/app/debit.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { ModalController  }  from  '@ionic/angular';
 import  {  Operation, Account }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-debit',
  templateUrl: './debit.page.html',
  styleUrls: ['./debit.page.scss']
})
export class AddStandingAccountPage implements OnInit {
  progressBar = false;
  operation: Operation = {} as Operation;
  account: Account = {} as Account;  
  id: number;
  
  constructor(private bankService: BankService, private modalController: ModalController) { }
  
   ngOnInit() {
    this.bankService.findAccountById(this.id).subscribe(account => {
      this.account = account;
    });
  }
  debitOperation() {
    this.showProgressBar = true;
    this.bankService.debitOperation(this.standingAccount, this.id).subscribe(operation => {
      this.operation = operation;
      window.location.reload();
    })
  }
  cancel() {
   this.modalController.dismiss();
  }
}

src/app/debit.html




<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>
    <ion-card-header>
      <ion-card-subtitle>Add debit for <strong style="text-transform: uppercase; color:#c0392b">{{account.code}}</strong></ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <form name="client" (ngSubmit)=" debitOperation()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="number" id="amount" placeholder="Enter amount" name="amount" [(ngModel)]="operation.amount"
            #amount="ngModel" required></ion-input>
       </ion-item>

        <br>
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="amount.invalid">Save</ion-button>
      </form>

   </ion-card-content>
  </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions:


$  ng generate page deposit

We will use these components

- deposit.ts
- deposit.html

src/app/deposit.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { ModalController  }  from  '@ionic/angular';
 import  {  Operation, Account }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-deposit',
  templateUrl: './deposit.page.html',
  styleUrls: ['./deposit.page.scss']
})
export class AddStandingAccountPage implements OnInit {
  progressBar = false;
  operation: Operation = {} as Operation;
  account: Account = {} as Account;  
  id: number;
  
  constructor(private bankService: BankService, private modalController: ModalController) { }
  
   ngOnInit() {
    this.bankService.findAccountById(this.id).subscribe(account => {
      this.account = account;
    });
  }
  depositOperation() {
    this.showProgressBar = true;
    this.bankService.depositOperation(this.standingAccount, this.id).subscribe(operation => {
      this.operation = operation;
      window.location.reload();
    })
  }
  cancel() {
   this.modalController.dismiss();
  }
}

src/app/deposit.html




<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>
    <ion-card-header>
      <ion-card-subtitle>Add deposit for <strong style="text-transform: uppercase; color:#c0392b">{{account.code}}</strong></ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <form name="client" (ngSubmit)="depositOperation()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="number" id="amount" placeholder="Enter amount" name="amount" [(ngModel)]="operation.amount"
            #amount="ngModel" required></ion-input>
       </ion-item>

        <br>
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="amount.invalid">Save</ion-button>
      </form>

   </ion-card-content>
  </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions:


$  ng generate page transfer

We will use these components

- transfer.ts
- transfer.html

src/app/transfer.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { ModalController  }  from  '@ionic/angular';
 import  {  Operation, Account }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-transfer',
  templateUrl: './transfer.page.html',
  styleUrls: ['./transfer.page.scss']
})
export class AddStandingAccountPage implements OnInit {
  savingsAccountCode: any = {};
  standingAccountCode: any = {};  
  operation: Operation = {} as Operation;
  accounts: Account[];  
  id: number;
  titleFrom: number;  
  titleTo: number;
  code1: number;
  code2: number;
  progressBar = false;  
  showTransferCode1 = false;
  showTransferCode2 = false;
  showMessageError = false;

  constructor(private bankService: BankService, private modalController: ModalController) { }
  
   ngOnInit() {
    if(this.code1==null) {
      this.bankService.findAccountsForClient(this.id).subscribe(accounts => {
        this.accounts = accounts;
        this.standingAccountCode = this.accounts.find(x => x.id != this.code2);
        this.code1 = this.standingAccountCode.id;
        this.titleTo = this.standingAccountCode.code;
        this.bankService.findAccountById(this.code2).subscribe(savingsAccountCode => {
          this.savingsAccountCode = savingsAccountCode;
          this.titleFrom = this.savingsAccountCode.code;
          this.showTransferCode2 = true;
        })
      });
    }
    if(this.code2==null) {
      this.bankService.findAccountsForClient(this.id).subscribe(accounts => {
        this.accounts = accounts;
        this.savingsAccountCode = this.accounts.find(x => x.id != this.code1);
        this.code2 = this.savingsAccountCode.id;
        this.titleTo = this.savingsAccountCode.code;
        this.bankService.findAccountById(this.code1).subscribe(standingAccountCode => {
          this.standingAccountCode = standingAccountCode;
          this.titleFrom = this.standingAccountCode.code;
          this.showTransferCode1 = true;
        } )
      });
    }
  }
  cancel() {
   this.modalController.dismiss();
  }
  
  transferCode1() {
    this.bankService.transfer(this.code2, this.code1, this.operation).subscribe(operation => {
      this.operation = operation;
      this.showMessageError = false
      window.location.reload();
    }), 
    console.error(this.showMessageError = true);    
   }
   
  transferCode2() {
    this.bankService.transfer(this.code1, this.code2, this.operation).subscribe(operation => {
      this.operation = operation;
      this.showMessageError = false
      window.location.reload();
    }), 
    console.error(this.showMessageError = true);    
   }
}

src/app/transfer.html




<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>Transfer</ion-card-title>
    </ion-card-header>
  </ion-card>

  <ion-card-header>
    <ion-card-title>From <strong style="text-transform: uppercase; color:#c0392b">{{titleFrom}}</strong> Account To  <strong style="text-transform: uppercase; color:#16a085">{{titleTo}} </strong>Account </ion-card-title>
  </ion-card-header>
  
  <ion-card>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>
    
    <ion-text color="danger" *ngIf="showMessageError">
      <h1 style="margin-left: 20px;">Insufficient balance</h1>
    </ion-text>
    
    <ion-card-content>
      <form name="client" (ngSubmit)="depositOperation()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="number" id="amount" placeholder="Enter amount" name="amount" [(ngModel)]="operation.amount"
            #amount="ngModel" required></ion-input>
       </ion-item>

        <br>
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="amount.invalid" (click)="transferCode1()" *ngIf="showTransferCode1">Save</ion-button>
          
        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block"
          [disabled]="amount.invalid" (click)="transferCode2()" *ngIf="showTransferCode2">Save</ion-button>
          
      </form>

   </ion-card-content>
  </ion-card>
  
  <ion-card>
    <ion-card-content>
      <ion-list>
      <ion-item color="warning">
        <ion-label>
          {{standingAccountCode.code}} - <strong>{{standingAccountCode.balance}}</strong>
        </ion-label>
      </ion-item>
     </ion-list>
    </ion-card>
  </ion-card-content>
  
    <ion-card>
    <ion-card-content>
      <ion-list>
      <ion-item color="warning">
        <ion-label>
          {{savingsAccountCode.code}} - <strong>{{savingsAccountCode.balance}}</strong>
        </ion-label>
      </ion-item>
     </ion-list>
    </ion-card>
  </ion-card-content>
  
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions:


$  ng generate page operation

We will use these components

- operation.ts
- operation.html

src/app/operation.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { ModalController  }  from  '@ionic/angular';
 import  {  Operation }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-operation',
  templateUrl: './operation.page.html',
  styleUrls: ['./operation.page.scss']
})
export class OperationPage implements OnInit {
  operations: Operation[];  
  id: number;
  
  constructor(private bankService: BankService, private modalController: ModalController) { }
  
   ngOnInit() {
    this.bankService.checkingAccount(this.id).subscribe(operations => {
      this.operations = operations;
    })
    }

  cancel() {
   this.modalController.dismiss();
  }
  
}

src/app/operation.html




<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>Operations</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <ion-list>
      <ion-item *ngFor="let o of operations">
         <ion-label>
          {{o.amount}}$ - {{o.typeOperation}} - {{o.operationDate|date}}
        </ion-label>
      </ion-item>
     </ion-list>

  </ion-card-content>
 </ion-card>
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions:


$  ng generate page find-account

We will use these components

- find-account.ts
- find-account.html

src/app/find-account.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { ModalController  }  from  '@ionic/angular';
 import  {  SavingsAccount, StandingAccount  }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';
 import  { ActivatedRoute, Router  }  from  '@angular/router';
 import  { EditAccountPage }  from  '../edit-account/edit-account.page;

@Component({
  selector: 'app-find-account',
  templateUrl: './find-account.page.html',
  styleUrls: ['./find-account.page.scss']
})
export class OperationPage implements OnInit {
  savingsAccounts: SavingsAccount[];  
  standingAccounts: StandingAccount[];   
  id: number;

  constructor(private bankService: BankService, private modalController: ModalController, private  route: ActivatedRoute, private  router: Router) { }
  
   ngOnInit() {
     this.id = this.route.snapshot.params.id;
     this.bankService.findSavingsAccountAccounts(this.id).subscribe(savingsAccounts => {
      this.savingsAccounts = savingsAccounts;
    })
    this.bankService.findStandingAccountAccounts(this.id).subscribe(standingAccounts => {
      this.standingAccounts = standingAccounts;
    })
    }

  cancel() {
   this.router.navigate(["/find-clients/", this.id]);
  }
 async editTax(idTax) {
    const modal = await this.modalController.create({
      component: EditAccountPage,
      swipeToClose: true,
      componentProps: {idTax},
    });
    return await modal.present();
  }
 async editLoan(idLoan) {
    const modal = await this.modalController.create({
      component: EditAccountPage,
      swipeToClose: true,
      componentProps: {idLoan},
    });
    return await modal.present();
  }
}

src/app/find-account.html




<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-content>
      <ion-list *ngFor="let savings of savingsAccount">
      <ion-item color="warning">
         <ion-label>
          {{savings.code}} - <strong>{{savings.balance}}</strong>
        </ion-label>
      </ion-item>
     <ion-item button color="light" (click)="editTax(savings.id)">
          Update tax ({{savings.tax}})
      </ion-item>
     </ion-list>
  </ion-card-content>
 </ion-card>
 
   <ion-card>
    <ion-card-content>
      <ion-list *ngFor="let standig of standingAccount">
      <ion-item color="warning">
         <ion-label>
          {{standig.code}} - <strong>{{standig.balance}}</strong>
        </ion-label>
      </ion-item>
     <ion-item button color="light" (click)="editLoan(standig.id)">
          Update loan ({{standig.loan}})
      </ion-item>
     </ion-list>
  </ion-card-content>
 </ion-card>
 
</ion-content>

Go ahead and open your terminal or command prompt and follow the instructions:


$  ng generate page edit-account

We will use these components

- edit-account.ts
- edit-account.html

src/app/edit-account.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { ModalController  }  from  '@ionic/angular';
 import  {  SavingsAccount, StandingAccount  }  from  '../model/Model';
 import  { BankService }  from  '../service/bank.service';

@Component({
  selector: 'app-edit-account',
  templateUrl: './edit-account.page.html',
  styleUrls: ['./edit-account.page.scss']
})
export class OperationPage implements OnInit {
  savingsAccount: SavingsAccount = {} as SavingsAccount ;  
  standingAccount: StandingAccount = {} as StandingAccount;   
  idTax: number;
  idLoan: number;  
  progressBar = false;
  showEditTax = false;
  showEditLoan = false;    

  constructor(private bankService: BankService, private modalController: ModalController) { }
  
   ngOnInit() {
    if(this.idTax!=null) {
    this.bankService.findAccountById(this.idTax).subscribe(savingsAccount => {
      this.savingsAccount = savingsAccount;
      this.showEditTax = true;
    })
    }
    if(this.idLoan!=null) {
      this.bankService.findAccountById(this.idLoan).subscribe(standingAccount => {
        this.standingAccount = standingAccount;
        this.showEditLoan = true;
      });
    }
    }

  cancel() {
   this.modalController.dismiss();
  }
  addStandingAccountTax() {
    this.showProgressBar = true;
    this.bankService.editSavingsAccount(this.savingsAccount, this.idTax).subscribe(savingsAccount => {
      this.savingsAccount = savingsAccount;
      window.location.reload();
    })
  }
  addStandingAccountLoan() {
    this.showProgressBar = true;
    this.bankService.editStandingAccount(this.standingAccount, this.idLoan).subscribe(standingAccount => {
      this.standingAccount = standingAccount;
      window.location.reload();
    })
  }
}

src/app/edit-account.html




<ion-header>
<ion-toolbar color="danger">
  <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>
  </ion-buttons>
  <ion-title>Back</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>

  <ion-card *ngIf="showEditTax">
    <ion-card-header>
      <ion-card-title>Update tax </ion-card-title>
    </ion-card-header>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>

  <ion-card-content>
      <form name="savingsAccount" (ngSubmit)="addStandingAccountTax()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="number" placeholder="Enter tax" name="tax" [(ngModel)]="savingsAccount.tax" #tax="ngModel"
            required></ion-input>
        </ion-item> <br>

        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block" [disabled]="tax.invalid">
          Add</ion-button>
      </form>     
  </ion-card-content>
 </ion-card>
 
   <ion-card *ngIf="showEditLoan">
    <ion-card-header>
      <ion-card-title>Update loan</ion-card-title>
    </ion-card-header>
    <ion-spinner name="bubbles" color="primary" class="center" *ngIf="progressBar"></ion-spinner>

  <ion-card-content>
      <form name="savingsAccount" (ngSubmit)="addStandingAccountLoan()" #formRegister="ngForm" novalidate>

        <ion-item>
          <ion-input type="number" placeholder="Enter loan" name="loan" [(ngModel)]="standingAccount.loan" #loan="ngModel"
            required></ion-input>
        </ion-item><br>

        <ion-button type="submit" color="warning" fill="solid" size="large" expand="block" [disabled]="loan.invalid">
          Add</ion-button>
      </form>     
  </ion-card-content>
 </ion-card>
 
</ion-content>

Add the AppRoutingModule

In Angular, the best practice is to load and configure the router in a separate, top-level module that is dedicated to routing and imported by the root AppModule.

By convention, the module class name is AppRoutingModule and it belongs in the app-routing.module.ts in the src/app folder.

app-routing-module.ts

src/app/app-routing.module.ts



import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'find-clients/:id',
    loadChildren: () => import('./find-clients/find-clients.module').then( m => m.FindClientsPageModule)
  },
  {
    path: 'update-client',
    loadChildren: () => import('./update-client/update-client.module').then( m => m.UpdateClientPageModule)
  },
  {
    path: 'add-standing-account',
    loadChildren: () => import('./add-standing-account/add-standing-account.module').then( m => m.AddStandingAccountPageModule)
  },
  {
    path: 'add-savings-account',
    loadChildren: () => import('./add-savings-account/add-savings-account.module').then( m => m.AddSavingsAccountPageModule)
  },
  {
    path: 'checking-account/:id',
    loadChildren: () => import('./checking-account/checking-account.module').then( m => m.CheckingAccountPageModule)
  },
  {
    path: 'operation',
    loadChildren: () => import('./operation/operation.module').then( m => m.OperationPageModule)
  },
  {
    path: 'deposit',
    loadChildren: () => import('./deposit/deposit.module').then( m => m.DepositPageModule)
  },
  {
    path: 'debit',
    loadChildren: () => import('./debit/debit.module').then( m => m.DebitPageModule)
  },
  {
    path: 'transfer',
    loadChildren: () => import('./transfer/transfer.module').then( m => m.TransferPageModule)
  },
  {
    path: 'find-account/:id',
    loadChildren: () => import('./find-account/find-account.module').then( m => m.FindAccountPageModule)
  },
  {
    path: 'edit-account',
    loadChildren: () => import('./edit-account/edit-account.module').then( m => m.EditAccountPageModule)
  },    
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

NgModules and JavaScript modules

app-module.ts

src/app/app-module.ts




import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,     
    FormsModule,
    HttpClientModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
    NO_ERRORS_SCHEMA
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Conclusion

Now we have an overview of Spring Boot CRUD example when building a CRUD App.

Building an application bank with Spring boot and Ionic part 1

Download My bank Application From Github

Building an application bank with Spring boot and Ionic part 1

2022-01-18T03:35:00.005-08:00

Getting Started | Building an Application with Spring Boot

Build an application bank with Spring boot and Angular use Jpa

Objective:

Used Skills in this project:

Java, SpringBoot, MicroServices, REST WebServices, JPA, Hibernate, MySQL Database, Maven, Angular, GitHub, SpringBoot Embedded Tomcat Server, STS-Eclipse IDE

Tools to be used

° Use any IDE to develop the Spring and Hibernate project. It may be STS/Eclipse/Netbeans. Here, we are using STS (Spring Tool Suite).

° Mysql for the database.

° Use any IDE to develop the Angular project. It may be Visual Studio Code/Sublime. Here, we are using Visual Studio Code.

° Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Spring MVC

Spring Boot Architecture

Introduction mysql to database

Introduction to the POM

pom.xml

    
  
   
 <?xml version="1.0" encoding="UTF-8"?>
 <project xmlns="http://maven.apache.org/POM/4.0.0"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0>/modelVersion>
   <parent>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-parent</artifactId>
	<version>2.4.1</version>
	<relativePath/> 
  </parent>
    
    <groupId>org.bank</groupId>
	<artifactId>bank</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>bank</name>
	<description>Demo project for Spring Boot</description>
    
    <properties>
	 <java.version>1.8</java.version>
    </properties>
    
    <dependencies>
    
   <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-data-jpa</artifactId>
   </dependency>
    
   <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
   </dependency>
   
   <dependency>
	 <groupId>org.springframework.boot</groupId>
	 <artifactId>spring-boot-devtools</artifactId>
     <scope>runtime</scope>
     <optional>true</optional>
   </dependency>
   
   <dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
   </dependency>
   
   <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    
  </dependencies>
  
  <build>
    <plugins>
	 <plugin>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-maven-plugin</artifactId>
	 </plugin>
	</plugins>
 </build>
 
 </project>

Properties File

The application.properties file is located in the src/main/resources directory. The code for sample application.properties

We need to create database name it bank

src/main/resources/application.properties

    
   
spring.datasource.url=jdbc:mysql://localhost:3306/bank?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
spring.datasource.username=root
spring.activemq.password=
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect
spring.jpa.hibernate.ddl-auto=update
server.port=8080
spring.jpa.database=MYSQL

Class Diagram

Modals / Entities

We need to create these entities

-> Account

-> Client

-> Credit

-> Operation

-> SavingsAccount

-> StandingAccount

-> OrderProductPk

-> Withdraw

Here, we are creating an Entity

Account.java This object content id, code, createDate, balance and relational @ManyToOne with Client and @OneToMany with Operation

src/main/java/com/bank/model/Account.java):





package com.bank.modal;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import javax.persistence.*;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
@Table(name = "accounts")
@Inheritance(strategy = InheritanceType.SINGLE_TABLE)
public class Account implements Serializable {

 /**
 * 
 */
 private static final long serialVersionUID = 1L;

 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private Integer id;
 private String code;
 private Date createDate;
 private double balance;

 @ManyToOne
 @JsonBackReference(value = "client")
 private Client client;

 @OneToMany(mappedBy = "account", cascade = CascadeType.ALL)
 private List<Operation> operations;
 
 public Account() {
  super();
 }
 
 public Account(String code, Date createDate, double balance, Client client, List<Operation> operations) {
   super();
   this.code = code;
   this.createDate = createDate;
   this.balance = balance;
   this.client = client;
   this.operations = operations;
 }

 public Integer getId() {
   return id;
 }

 public void setId(Integer id) {
   this.id = id;
 }

 public String getCode() {
   return code;
 }

 public void setCode(String code) {
   this.code = code;
 }

 public Date getCreateDate() {
   return createDate;
 }

 public void setCreateDate(Date createDate) {
   this.createDate = createDate;
 }

 public double getBalance() {
   return balance;
 }

 public void setBalance(double balance) {
   this.balance = balance;
 }

 public Client getClient() {
   return client;
 }

 public void setClient(Client client) {
   this.client = client;
 }

 public List<Operation> getOperations() {
   return operations;
 }

 public void setOperations(List<Operation> operations) {
   this.operations = operations;
 }

 public void doOperation(Operation operation) {
  if (getOperations() == null) {
    this.operations = new ArrayList<>();
   }
    getOperations().add(operation);
    operation.setAccount(this);
 }

}

Here, we are creating an Entity

Client.java This object content id, name, username, password, email, admin and relational @OneToMany with Account

src/main/java/com/bank/model/Client.java):





package com.bank.modal;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.persistence.*;

@Entity
@Table(name = "clients")
public class Client implements Serializable {
 /**
 * 
 */
 private static final long serialVersionUID = 1L;

 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private long id;

 @Column(name = "_username", unique = true)
 private String username;

 @Column(name = "_password")
 private String password;;

 @Column(name = "_name")
 private String name;;

 @Column(name = "_email")
 private String email;

 private boolean admin;

 @OneToMany(mappedBy = "client", cascade = CascadeType.ALL)
 private List<Account> accounts;

 public Client() {
  super();
 }
 
 public Client(String username, String password, String name, String email, boolean admin, List<Account> accounts) {
   super();
   this.username = username;
   this.password = password;
   this.name = name;
   this.email = email;
   this.admin = admin;
   this.accounts = accounts;
 }

 public long  getId() {
   return id;
 }

 public void setId(long id) {
   this.id = id;
 }

 public String getUsername() {
   return username;
 }

 public void setUsername(String username) {
   this.username = username;
 }

 public String getPassword() {
   return password;
 }

 public void setPassword(String password) {
   this.password = password;
 }

 public String getName() {
   return name;
 }

 public void setName(String name) {
   this.name = name;
 }

 public String getEmail() {
   return email;
 }

 public void setEmail(String email) {
   this.email = email;
 }

 public boolean isAdmin() {
   return admin;
 }

 public void setAdmin(boolean admin) {
   this.admin = admin;
 }

 public List<Account> getAccounts() {
   return accounts;
 }

 public void setAccounts(List<Account> accounts) {
   this.accounts = accounts;
 }

 public void addAccount(Account account) {
   if (getAccounts() == null) {
    this.accounts = new ArrayList<>();
   }
    getAccounts().add(account);
    account.setClient(this);
 }
}

Here, we are creating an Entity

Credit.java This object extends Operation

src/main/java/com/bank/model/Credit.java):





package com.bank.modal;

import java.util.Date;
import javax.persistence.DiscriminatorValue;
import javax.persistence.Entity;

@Entity
@DiscriminatorValue("C")
public class Credit extends Operation {

 /**
 * 
 */
 private static final long serialVersionUID = 1L;

 public Credit() {
  super();
 }

 public Credit(Date operationDate, double amount, String typeOperation, Account account) {
   super(operationDate, amount, typeOperation, account);
 }

}

Here, we are creating an Entity

Operation.java This object content numberOperation, operationDate, amount, typeOperation and relational @ManyToOne with Account

src/main/java/com/bank/model/Operation.java):





package com.bank.modal;

import java.io.Serializable;
import java.util.Date;
import javax.persistence.*;
import com.fasterxml.jackson.annotation.JsonBackReference;

@Entity
@Table(name = "accounts")
@Inheritance(strategy = InheritanceType.SINGLE_TABLE)
public class Operation implements Serializable {

 /**
 * 
 */
 private static final long serialVersionUID = 1L;

 @Id
 @GeneratedValue(strategy = GenerationType.AUTO)
 private long numberOperation;
 private Date operationDate;
 private double amount;
 private String typeOperation;

 @ManyToOne
 @JsonBackReference(value = "accounnt")
 private Account account;

 public Operation() {
  super();
 }

 public Operation(Date operationDate, double amount, String typeOperation, Account account) {
   super();
   this.operationDate = operationDate;
   this.amount = amount;
   this.typeOperation = typeOperation;
   this.account = account;
 }

 public long getNumberOperation() {
   return numberOperation;
 }

 public void setNumberOperation(long numberOperation) {
   this.numberOperation = numberOperation;
 }

 public Date getOperationDate() {
   return operationDate;
 }

 public void setOperationDate(Date operationDate) {
   this.operationDate = operationDate;
 }

 public double getAmount() {
   return amount;
 }

 public void setAmount(double amount) {
   this.amount = amount;
 }

 public String getTypeOperation() {
   return typeOperation;
 }

 public void setTypeOperation(String typeOperation) {
   this.typeOperation = typeOperation;
 }

 public Account getAccount() {
   return account;
 }

 public void setAccount(Account account) {
   this.account = account;
 }

}

Here, we are creating an Entity

SavingsAccount.java This object extends Account

src/main/java/com/bank/model/SavingsAccount.java):





package com.bank.modal;

import java.util.Date;
import javax.persistence.DiscriminatorValue;
import javax.persistence.Entity;

@Entity
@DiscriminatorValue("SA")
public class SavingsAccount extends Account {

 /**
 * 
 */
 private static final long serialVersionUID = 1L;
	
 private double tax;

 public SavingsAccount() {
  super();
 }

 public SavingsAccount(String code, Date createDate, double balance, Client client, double tax) {
   super(code, createDate, balance, client);
   this.tax = tax;
 }

 public double getTax() {
   return tax;
 }

 public void setTax(double tax) {
   this.tax = tax;
 } 

}

Here, we are creating an Entity

StandingAccount.java This object extends Account

src/main/java/com/bank/model/StandingAccount.java):





package com.bank.modal;

import java.util.Date;
import javax.persistence.DiscriminatorValue;
import javax.persistence.Entity;

@Entity
@DiscriminatorValue("CA")
public class StandingAccount extends Account {

 /**
 * 
 */
 private static final long serialVersionUID = 1L;
	
 private double loan;

 public StandingAccount() {
  super();
 }

 public StandingAccount(String code, Date createDate, double balance, Client client, double loan) {
   super(code, createDate, balance, client);
   this.loan = loan;
 }

 public double getLoan() {
   return loan;
 }

 public void setLoan(double loan) {
   this.loan = loan;
 } 

}

Here, we are creating an Entity

Credit.java This object extends Operation

src/main/java/com/bank/model/Credit.java):





package com.bank.modal;

import java.util.Date;
import javax.persistence.DiscriminatorValue;
import javax.persistence.Entity;

@Entity
@DiscriminatorValue("w")
public class Withdraw extends Operation {

 /**
 * 
 */
 private static final long serialVersionUID = 1L;

 public Withdraw() {
  super();
 }

 public Withdraw(Date operationDate, double amount, String typeOperation, Account account) {
   super(operationDate, amount, typeOperation, account);
 }

}

Spring Data JPA Projections

We need to create these interface dao

-> AccountDao

-> ClientDao

-> OperationDao

Here, we are creating a AccountDao interface

src/main/java/com/bank/dao/AccountDao.java):





package com.bank.dao;

import java.util.Optional;
import org.springframework.data.jpa.repository.JpaRepository;
import com.bank.modal.Account;

public interface AccountDao extends JpaRepository<Account, Integer> {
  Optional<Account> findByCode(String  code);
}

Here, we are creating a ClientDao interface

src/main/java/com/bank/dao/ClientDao.java):





package com.bank.dao;
import org.springframework.data.jpa.repository.JpaRepository;
import com.bank.modal.Client;

public interface ClientDao extends JpaRepository<Client, Long> {

}

Here, we are creating a OperationDao interface

src/main/java/com/bank/dao/OperationDao.java):





package com.bank.dao;

import java.util.List;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;
import com.bank.modal.Operation;

public interface OperationDao extends JpaRepository<Operation, Long> {
  @Query("select o from Operation o where o.account.id=:x order by o.operationDate desc")
  public List<Operation> checkingAccount(@Param("x") int id);
}

The services

We will create one interface in service package:

-> BankService

Here, we are creating a BankService

src/main/java/com/bank/model/BankService.java):





package com.bank.service;

import java.util.List;
import com.bank.modal.Account;
import com.bank.modal.Client;
import com.bank.modal.Operation;
import com.bank.modal.SavingsAccount;
import com.bank.modal.StandingAccount;

public interface BankService {

 List<Operation> checkingAccount(int code);

 Operation deposit(int code, double amount);

 Operation debit(int code, double amount);

 Operation transfer(int code1, int code2, Operation operation);

 void debitOperation(int code, double amount);

 void depositOperation(int code, double amount);

 Client loginClient(Client client);
	
 Client updateClient(Client client, long id);

 StandingAccount addStandingAccount(StandingAccount standingAccount, long id);

 SavingsAccount addSavingsAccount(SavingsAccount savingsAccount, long id);
	
 StandingAccount editStandingAccount(StandingAccount standingAccount, int id);

 SavingsAccount editSavingsAccount(SavingsAccount savingsAccount, int id);

 List<Operation> findWithdraws(int id);

 List<Operation> findCredits(int id);
	
 List<Client> findClients();
	
 Client findClient(long id);
	
 List<Account> findStandingAccountAccounts(long id);
	
 List<Account> findSavingsAccountAccounts(long id);
	
 List<Account> findAccountsForClient(long id);

}

The managers classes implementation

We will create ont class in the impl package

-> BankServiceImpl

Here, we are creating a BankServiceImpl

src/main/java/com/bank/service/BankServiceImpl.java):





package com.bank.service;

import java.util.Date;
import java.util.List;
import java.util.Random;
import java.util.stream.Collectors;
import javax.transaction.Transactional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import com.bank.dao.AccountDao;
import com.bank.dao.ClientDao;
import com.bank.dao.OperationDao;
import com.bank.modal.Account;
import com.bank.modal.Client;
import com.bank.modal.Credit;
import com.bank.modal.StandingAccount;
import com.bank.modal.Operation;
import com.bank.modal.SavingsAccount;
import com.bank.modal.Withdraw;

@Transactional
@Component
public class BankServiceImp implements BankService {

 @Autowired
 private AccountDao accountDao;

 @Autowired
 private OperationDao operationDao;

 @Autowired
 private ClientDao clientDao;

 @Override
 public List<Operation> checkingAccount(int code) {
   return operationDao.checkingAccount(code);
 }

 @Override
 public Operation deposit(int code, double amount) {
   String deposit = "deposit";
   Account account = accountDao.findById(code).orElse(null);
   Credit credit = new Credit(new Date(), amount, deposit, account);
   account.setBalance(account.getBalance() + amount);
   accountDao.save(account);
   return operationDao.save(credit);
 }

 @Override
 public Operation debit(int code, double amount) {
   String debit = "debit";
   Account account = accountDao.findById(code).orElse(null);
   double checkout = 0;
  if (account instanceof StandingAccount) {
   checkout = ((StandingAccount) account).getLoan();
  }

 if (account.getBalance() + checkout < amount) {
   throw new RuntimeException("Insufficient balance");
 }
   Withdraw withdraw = new Withdraw(new Date(), amount, debit, account);
   account.setBalance(account.getBalance() - amount);
   accountDao.save(account);

   return operationDao.save(withdraw);
 }

 @Override
 public Operation transfer(int code1, int code2, Operation operation) {
  if (code1 == code2) {
   throw new RuntimeException("Cannot transfer to the same account ");
  }
   deposit(code1, operation.getAmount());
   debit(code2, operation.getAmount());
  return operationDao.save(operation);
 }

 @Override
 public void depositOperation(int code, double amount) {
   Account account = accountDao.findById(code).orElse(null);
   deposit(account.getId(), amount);
 }

 @Override
 public Client loginClient(Client client) {
   List<Client> clients = clientDao.findAll();
    if (clients.size() == 0) {
     client.setAdmin(true);
   }

   for (Client client2 : clients) {
     if (client.getUsername().equals(client2.getUsername())) {
      client2.setUsername(client2.getUsername());
      return clientDao.save(client2);
    }
   }
   return clientDao.save(client);
 }

 @Override
 public StandingAccount addStandingAccount(StandingAccount standingAccount, long id) {
   char[] chars = "0123456789abcdefghijklmnopqrstuvwxyz".toCharArray();
   StringBuilder sb = new  StringBuilder(6);
   Random random = new Random();
  for (int  i = 0; i < 6; i++) {
    char c = chars[random.nextInt(chars.length)];
      sb.append(c);
   }
  String output = sb.toString();
  Client client = clientDao.findById(id).orElse(null);
  standingAccount.setCreateDate(new Date());
  standingAccount.setCode(output);
  client.addAccount(standingAccount);
  return accountDao.save(standingAccount);
 }

 @Override
 public void debitOperation(int code, double amount) {
    Account account = accountDao.findById(code).orElse(null);
    debit(account.getId(), amount);
 }

 @Override
 public SavingsAccount addSavingsAccount(SavingsAccount savingsAccount, long id) {
  char[] chars = "0123456789abcdefghijklmnopqrstuvwxyz".toCharArray();
  StringBuilder sb = new StringBuilder(6);
  Random random = new Random();
  
   for (int i = 0; i < 6; i++) {
    char c = chars[random.nextInt(chars.length)];
     sb.append(c);
   }
   String output = sb.toString();
   Client client = clientDao.findById(id).orElse(null);
   savingsAccount.setCreateDate(new  Date());
   savingsAccount.setCode(output);
   client.addAccount(savingsAccount);
   return accountDao.save(savingsAccount);
 }

 @Override
 public List<Operation> findWithdraws(int id) {
   List<Operation> operations = accountDao.getOne(id).getOperations().stream().filter(w -> w instanceof Withdraw)
      .collect(Collectors.toList());
     return operations;
 }

 @Override
 public List<Operation> findCredits(int id) {
    List<Operation> operations = accountDao.getOne(id).getOperations().stream().filter(c -> c instanceof Credit)
      .collect(Collectors.toList());
    return operations;
 }

 @Override
 public List<Client> findClients() {
   return clientDao.findAll();
 }

 @Override
 public Client findClient(long id) {
    return clientDao.findById(id).orElse(null);
 }

 @Override
 public Client updateClient(Client client, long id) {
   Client client2 = clientDao.findById(id).orElse(null);
   client2.setPassword(client.getPassword());
   client2.setUsername(client.getUsername());
   client2.setEmail(client.getEmail());
   client2.setName(client.getName());
   return clientDao.save(client2);
 }

 @Override
 public List<Account> findStandingAccountAccounts(long id) {
    List<Account> accounts = clientDao.getOne(id).getAccounts().stream().filter(s -> s instanceof StandingAccount)
      .collect(Collectors.toList());
    return accounts;
 }

 @Override
 public List<Account> findSavingsAccountAccounts(long id) {
    List<Account> accounts = clientDao.getOne(id).getAccounts().stream().filter(s -> s instanceof  SavingsAccount)
      .collect(Collectors.toList());
    return accounts;
 }

 @Override
 public List<Account> findAccountsForClient(long id) {
   Client client = clientDao.findById(id).orElse(null);
   return client.getAccounts();
 }

 @Override
 public StandingAccount editStandingAccount(StandingAccount standingAccount, int id) {
    StandingAccount standingAccount2 = (StandingAccount) accountDao.findById(id).orElse(null);
    standingAccount2.setLoan(standingAccount.getLoan());
    standingAccount2.setBalance(standingAccount.getBalance() + standingAccount.getLoan());
    return accountDao.save(standingAccount2);
 }

 @Override
 public SavingsAccount editSavingsAccount(SavingsAccount savingsAccount, int id) {
    SavingsAccount savingsAccount2 = (SavingsAccount) accountDao.findById(id).orElse(null);
    savingsAccount2.setTax(savingsAccount.getTax());
    savingsAccount2.setBalance(savingsAccount2.getBalance() - savingsAccount.getTax());
    return accountDao.save(savingsAccount2);
 }

}

@RestController API

We will create one class in controller package:

-> BankController

In The Controller We'll inject this bean into the controller bean using @Autowired on the field definition: We need to add map requests with request mapping annotations e.g. @RequestMapping, @GetMapping and @PostMapping

src/main/java/com/bank/controller/BankController.java):





package com.bank.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.bank.dao.AccountDao;
import com.bank.modal.Account;
import com.bank.modal.Client;
import com.bank.modal.Operation;
import com.bank.modal.SavingsAccount;
import com.bank.modal.StandingAccount;
import com.bank.service.BankService;

@RestController
@RequestMapping(value = "/api")
@CrossOrigin(origins = "*")
public class BankController {

 @Autowired
 private BankService bankService;
	
 @Autowired
 private AccountDao accountDao;

 @GetMapping("/checkingAccount/{code}")
 List<Operation> checkingAccount(@PathVariable int code) {
   return bankService.checkingAccount(code);
 }

 @PostMapping("/depositOperation/{code}")
 void depositOperation(@PathVariable int code, @RequestBody Operation operation) {
   bankService.depositOperation(code, operation.getAmount());
 }

 @PostMapping("/saveClient")
 Client loginClient(@RequestBody Client client) {
   return bankService.loginClient(client);
 }

 @PostMapping("/addStandingAccount/{id}")
 StandingAccount addStandingAccount(@RequestBody StandingAccount standingAccount, @PathVariable long id) {
   return bankService.addStandingAccount(standingAccount, id);
 }

 @PostMapping("/addSavingsAccount/{id}")
 SavingsAccount addSavingsAccount(@RequestBody SavingsAccount savingsAccount, @PathVariable long id) {
   return bankService.addSavingsAccount(savingsAccount, id);
 }

 @PostMapping("/debitOperation/{code}")
 void debitOperation(@PathVariable int code, @RequestBody Operation operation) {
   bankService.debitOperation(code, operation.getAmount());
 }

 @GetMapping("/findWithdraws/{id}")
 List<Operation> findWithdraws(@PathVariable int id) {
   return bankService.findWithdraws(id);
 }

 @GetMapping("/findCredits/{id}")
 List<Operation> findCredits(@PathVariable int id) {
   return bankService.findCredits(id);
 }

 @PostMapping("/transfer/{code1}/{code2}")
 Operation transfer(@PathVariable int code1, @PathVariable int code2, @RequestBody Operation operation) {
   return bankService.transfer(code1, code2, operation);
 }
	
 @GetMapping("/findClients")
 List<Client> findClients() {
   return bankService.findClients();
 }
	
 @GetMapping("/findClient/{id}")
 Client findClient(@PathVariable long id) {
   return bankService.findClient(id);
 }
	
 @PutMapping("/updateClient/{id}")
 Client updateClient(@RequestBody Client client, @PathVariable long id) {
   return bankService.updateClient(client, id);
 }
    
 @GetMapping("/findStandingAccountAccounts/{id}")
 List<Account> findStandingAccountAccounts(@PathVariable long id) {
   return bankService.findStandingAccountAccounts(id);
 }
	
 @GetMapping("/findSavingsAccountAccounts/{id}")
 List<Account> findSavingsAccountAccounts(@PathVariable long id) {
   return bankService.findSavingsAccountAccounts(id);
 }
	
 @GetMapping("/findAccountById/{id}")
 Account findAccountById(@PathVariable int id) {
   return accountDao.findById(id).orElse(null);
 }
 
 @GetMapping("/findAccountsForClient/{id}")
 List<Account> findAccountsForClient(@PathVariable long id) {
   return bankService.findAccountsForClient(id);
 }
 
 @PostMapping("/editStandingAccount/{id}")
 StandingAccount editStandingAccount(@RequestBody StandingAccount standingAccount, @PathVariable int id) {
   return bankService.editStandingAccount(standingAccount, id);
 }
 
 @PostMapping("/editSavingsAccount/{id}")
 SavingsAccount editSavingsAccount(@RequestBody SavingsAccount savingsAccount, @PathVariable int id) {
   return bankService.editSavingsAccount(savingsAccount, id);
 }
}

BankApplication

src/main/java/com/bank/BankApplication.java):





package com.bank;
import org.springframework.boot.autoconfigure.SpringBootApplication;


@SpringBootApplication
public class BankApplication {

 public static void main(String[] args) {
   SpringApplication.run(BankApplication.class, args);		
   System.out.println("App started....");
  }
  
}

Conclusion

Now we have an overview of Spring Boot example when building a @RestController API.

Building an application bank with Spring boot and Ionic part 2

Download This Application My bank From Github

Build an application Ecommerce with Spring boot and Angular part 2

2022-01-18T03:34:00.017-08:00

Getting Started | Building an Application with Angular

Angular 10 Front-end

In this tutorial We are going to build an application Ecommerce. The project content user, category, product, comment and cart for the user, we will create to parts backend use Spring boot and frontend use Angular. The admin can add, modfily and delete, the user after login can add a comment or buy products as will choose to delivery also can add to his cart. Front-end side is made with Angular 10, HTTPClient & Router.

Technology

Angular 10

Angular HTTPClient

Angular Router

Angular CLI version (10.1.1)

ng new

The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!

ng generate

Generate components, routes, services and pipes with a simple command. The CLI will also create simple test shells for all of these.

ng serve

Easily test your app locally while developing.


$  npm install -g @angular/cli

$  ng new ecommerce

$  cd ecommerce

$  ng serve

Project Structure

Install Bootstrap CSS framework

Bootstrap a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden. According to Twitter developer Mark Otto:

Use the following command to install bootstrap in the project.


$  npm install bootstrap --save

Angular Material Tutorial

Install Angular Material


$  ng add @angular/material

MaterialModule

src/app/material-module.ts



import { NgModule } from '@angular/core';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';

@NgModule({
  exports: [
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
  ],
  imports: [
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
  ]
})
export class MaterialModule { }

Style.css

First of all, we need to create the various entry point CSS files of course. You can just create further scss files at the level where the styles.scss is in your project.

src/style.css




/* You can add global styles to this file, and also import other style files */

@import "~bootstrap/dist/css/bootstrap.min.css";
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: linear-gradient(
   to right,
    #d1d8e0,
    #d980fa,
    #c8d6e5,
    #9980fa,
    #d1d8e0
  );
  font-family: initial !important;
  color: #222f3e;
}
.title-page {
  border-bottom: 1px solid;
  font-family: initial;
  padding: 10px 20px;
  border-radius: 10px;
  width: 230px;
  text-align: center;
  color: #2c3e50;
}

.container {
  margin-top: 40px;
}
.fa-info-circle {
  color: #4b6584;
  font-size: 20px;
  cursor: pointer;
  margin-left: 22px;
}
#btn {
  background: #fff;
  border: 0;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #ffd;
  margin: auto;
  padding: 10px;
  border: 1px solid #888;
  width: 80%;
}
#price {
  color: #c23616;
  font-weight: bold;
  padding: 10px 20px;
  border: 1px solid antiquewhite;
  font-size: 16px;
  display: inline-block;
}

.fa-eye-slash {
  font-size: 22px;
  color: #4b6584;
}
.btn-primary {
  font-size: 12px;
}

Modals interfaces

The purpose of this class is to map the specified fields with the fields of Spring entity class.

Every Angular app has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.

src/app/Modal.ts



export class User {
  id: number;
  username: string;
  password: string;
  address: string;
  admin: boolean;
  cardNumber: string;
  cvv: any;
  email: string;
  nameOnCard: string;
}
export interface Cart {
  id: number;
  name: string;
  price: number;
  quantity: number;
  pictureUrl: string;
}
export interface Category {
  id: number;
  name: string;
}
export interface Comment {
  id: number;
  addedAt: any;
  addedBy: string;
  message: string;
  title: string;
}

export interface Order {
  id: number;
  dateCreated: any;
  status: any;
}
export class ProductOrder {
  id: number;
  product: Product;
  quantity: number = 1;
  constructor(product: Product, quantity: number) {
    this.product = product;
    this.quantity = quantity = 1;
  }
}
export class ProductOrders {
  productOrders: ProductOrder[] = [];
}
export interface Product {
  id: number;
  description: string;
  name: string;
  pictureUrl: string;
  price: number;
}
export interface Tag {
  id: number;
  name: string;
  products: any;
}
export class Item {
  name: string;
  value: string;
  price: number;
}
export class UpdateProduct {
  id: number;
  name: string;
  description: string;
  price: number;
  pictureUrl: string;
}
export const ITEMS: Item[] = [
  {
    name: 'TakAway  ',
    value: 'item_1',
    price: 1.99,
  },
  {
    name: 'Relay  ',
    value: 'item_2',
    price: 2.99,
  },
  {
    name: 'Express  ',
    value: 'item_3',
    price: 3.99,
  },
  {
    name: 'Direct  ',
    value: 'item_4',
    price: 4.99,
  },
];

Angular Services

An example of when to use services would be to transfer data from one controller to another custom service.

Create Data services

This service will use Angular HTTPClient to send HTTP requests. You can see that its functions includes CRUD operations and finder method

Create these services in the service package

- CartService
- CategoryService
- CommentService
- OrderService
- ProductService
- TagService
- UserService


$  ng generate service service/cart

$  ng generate service service/category

$  ng generate service service/comment

$  ng generate service service/order

$  ng generate service service/product

$  ng generate service service/tag

$  ng generate service service/user

src/app/service/cart.service.ts



 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable }  from  '@angular/core';
 import  { Observable }  from  'rxjs';
 import  { Cart }  from  '../model/Model';

const NAME_KEY = 'NAME';

 @Injectable({
  providedIn: 'root'
})
export class CartService {

  constructor(private http: HttpClient) { }

  addCartToUser(cart: Cart, idUser: number): Observable<Cart> {
    return this.http.post<any>(`http://localhost:8080/api/addCartToUser/${idUser}`, cart); 
  }
  removeFromCart(idCart: number, idUser: number): Observable<Cart> {
     return this.http.delete<Cart>(`http://localhost:8080/api/removeFromCart/${idCart}/${idUser}`); 
   }

  findCartById(id: number): Observable<Cart> {
     return this.http.get<Cart>(`http://localhost:8080/api/findCartById/${id}`); 
   }
   
  deleteCart(id: number): Observable<Cart> {
     return this.http.delete<Cart>(`http://localhost:8080/api/deleteCart/${id}`); 
   }

   findCartsForUser(idUser: number): Observable<Cart[]> {
     return this.http.get<Cart[]>(`http://localhost:8080/api/findCartsForUser/${idUser}`); 
   }
   
  findByCartName(name: string): Observable<Cart> {
     return this.http.get<Cart>(`http://localhost:8080/api/findByCartName/${name}`); 
   }
   
 saveCartName(name: string) {
    window.sessionStorage.removeItem( NAME_KEY);
    window.sessionStorage.setItem( NAME_KEY, name);
  }

  getCartName(): string {
   return sessionStorage.getItem( NAME_KEY);
  }

}

src/app/service/category.service.ts



 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable }  from  '@angular/core';
 import  { Observable }  from  'rxjs';
 import  { Category }  from  '../model/Model';

 @Injectable({
  providedIn: 'root'
})
export class CategoryService {

  constructor(private http: HttpClient) { }

  addCategoryToUser(category: Category, idUser: number): Observable<Cart> {
    return this.http.post<any>(`http://localhost:8080/api/addCategoryToUser/${idUser}`, category); 
  }
  
  editCategory(category: Category, id: number): Observable<Category> {
    return this.http.post<Category>(`http://localhost:8080/api/editCategory/${id}`, category); 
  }

  findCategoryById(id: number): Observable<Category> {
     return this.http.get<Category>(`http://localhost:8080/api/findCategoryById/${id}`); 
   }
   
  deleteCategory(id: number): Observable<Category> {
     return this.http.delete<Category>(`http://localhost:8080/api/deleteCategory/${id}`); 
   }

   findCategoriesForUser(idUser: number): Observable<Category[]> {
     return this.http.get<Category[]>(`http://localhost:8080/api/findCategoriesForUser/${idUser}`); 
   }
   
   findAllCategories(): Observable<Category[]> {
     return this.http.get<Category[]>(`http://localhost:8080/api/findAllCategories/`); 
   }

}

src/app/service/comment.service.ts



 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable }  from  '@angular/core';
 import  { Observable }  from  'rxjs';
 import  { Comment }  from  '../model/Model';

 @Injectable({
  providedIn: 'root'
})
export class CommentService {

  constructor(private http: HttpClient) { }

  addCommentToProduct(comment: Comment, idProduct: number): Observable<Comment> {
    return this.http.post<Comment>(`http://localhost:8080/api/addCommentToProduct/${idProduct}`, comment); 
  }
  
  editComment(comment: Comment, id: number): Observable<Comment> {
    return this.http.post<Comment>(`http://localhost:8080/api/editComment/${id}`, comment); 
  }

  findCommentById(id: number): Observable<Comment> {
     return this.http.get<Comment>(`http://localhost:8080/api/findCommentById/${id}`); 
   }
   
  deleteComment(id: number): Observable<Comment> {
     return this.http.delete<Comment>(`http://localhost:8080/api/deleteComment/${id}`); 
   }

   findCommentsForProduct(idProduct: number): Observable<Comment[]> {
     return this.http.get<Comment[]>(`http://localhost:8080/api/findCommentsForProduct/${idProduct}`); 
   }
   
   findAllComments(): Observable<Comment[]> {
     return this.http.get<Comment[]>(`http://localhost:8080/api/findAllComments/`); 
   }

}

src/app/service/order.service.ts



import { HttpClient  } from '@angular/common/http' ;
import { Injectable  } from '@angular/core' ;
import { Subject  } from 'rxjs' ;
import { ProductOrder, ProductOrders  } from '../modal/Modal' ;

@Injectable({
  providedIn: 'root',
})
export class OrderService {
  private ordersUrl =  '/api/orders';
  private productOrder: ProductOrder;
  private orders: ProductOrders = new ProductOrders();

  private productOrderSubject = new Subject();
  private ordersSubject = new Subject();
  private totalSubject = new Subject();

  private total: number;

  ProductOrderChanged = this.productOrderSubject.asObservable();
  OrdersChanged = this.ordersSubject.asObservable();
  TotalChanged = this.totalSubject.asObservable();

  constructor(private http: HttpClient) {}

  saveOrder(order: ProductOrders) {
    return this.http.post(this.ordersUrl, order);
  }
  set SelectedProductOrder(value: ProductOrder) {
    this.productOrder = value;
    this.productOrderSubject.next();
  }

  get SelectedProductOrder() {
    return this.productOrder;
  }

  set ProductOrders(value: ProductOrders) {
    this.orders =  value;
    this.ordersSubject.next();
  }

  get ProductOrders() {
    return this.orders;
  }

  get Total() {
    return this.total;
  }

  set Total( value: number) {
    this.total = value;
    this.totalSubject.next();
  }
}

src/app/service/product.service.ts



 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable }  from  '@angular/core';
 import  { Observable }  from  'rxjs';
 import  { Product }  from  '../model/Model';

 @Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private http: HttpClient) { }

  addProductToCategory(product: Product, idCategory: number): Observable<Product> {
    return this.http.post<Comment>(`http://localhost:8080/api/addProductToCategory/${idCategory}`, product); 
  }
  
  editProduct(product: Product, id: number): Observable<Product> {
    return this.http.post<Product>(`http://localhost:8080/api/editProduct/${id}`, product); 
  }

  findProductById(id: number): Observable<Product> {
     return this.http.get<Product>(`http://localhost:8080/api/findProductById/${id}`); 
   }
   
  deleteProduct(id: number): Observable<Product> {
     return this.http.delete<Product>(`http://localhost:8080/api/deleteProduct/${id}`); 
   }

   findProductsForCategory(idCategory: number): Observable<Product[]> {
     return this.http.get<Product[]>(`http://localhost:8080/api/findProductsForCategory/${idCategory}`); 
   }
   
   findAllProducts(): Observable<Product[]> {
     return this.http.get<Product[]>(`http://localhost:8080/api/findAllProducts/`); 
   }
   
   findByName(name: string): Observable<Product> {
     return this.http.get<Product>(`http://localhost:8080/api/findByName/${name}`); 
   }
   
  deleteProductFromTag(idProduct: number, idTag: number): Observable<Product> {
     return this.http.delete<Product>(`http://localhost:8080/api/deleteProductFromTag/${idProduct}/${idTag}`); 
   }

}

src/app/service/tag.service.ts



 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable }  from  '@angular/core';
 import  { Observable }  from  'rxjs';
 import  { Product, Tag }  from  '../model/Model';

 @Injectable({
  providedIn: 'root'
})
export class TagService {

  constructor(private http: HttpClient) { }

  addTagToProduct(idProduct: number, idTag: number): Observable<Tag> {
    return this.http.post<Tag>(`http://localhost:8080/api/addTagToProduct/${idProduct}/${idTag}`); 
  }
  
  editTag(tag: Tag, id: number): Observable<Tag> {
    return this.http.put<Tag>(`http://localhost:8080/api/editTag/${id}`, tag); 
  }
  
 addTag(tag: Tag): Observable<Tag> {
    return this.http.post<Product>(`http://localhost:8080/api/addTag/`, tag); 
  }

  findTagById(id: number): Observable<Tag> {
     return this.http.get<Tag>(`http://localhost:8080/api/findTagById/${id}`); 
   }
   
  deleteTag(id: number): Observable<Tag> {
     return this.http.delete<Tag>(`http://localhost:8080/api/deleteTag/${id}`); 
   }

   findTagsForProduct(idProduct: number): Observable<Tag[]> {
     return this.http.get<Tag[]>(`http://localhost:8080/api/findTagsForProduct/${idProduct}`); 
   }
   
   findAllTags(): Observable<any[]> {
     return this.http.get<any[]>(`http://localhost:8080/api/findAllTags/`); 
   }
   
   findByName(name: string): Observable<Product> {
     return this.http.get<Product>(`http://localhost:8080/api/findByName/${name}`); 
   }
   
  deleteProductFromTag(idProduct: number, idTag: number): Observable<Product> {
     return this.http.delete<Product>(`http://localhost:8080/api/deleteProductFromTag/${idProduct}/${idTag}`); 
   }
   
  findAllTagByName(name: number): Observable<Tag> {
     return this.http.get<Tag>(`http://localhost:8080/api/findAllTagByName/${name}`); 
   }
   
  findProductsForTag(idTag: number): Observable<Product[]> {
     return this.http.get<Product[]>(`http://localhost:8080/api/findProductsForTag/${idTag}`); 
   }

}

src/app/service/user.service.ts



 import  { HttpClient }  from  '@angular/common/http';
 import  { Injectable }  from  '@angular/core';
 import  { Observable }  from  'rxjs';
 import  { User }  from  '../model/Model';

const USERNAME_KEY = 'USERNAME';

 @Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private http: HttpClient) { }

  addUser(user: User): Observable<User> {
    return this.http.post<User>(`http://localhost:8080/api/addUser`, user); 
  }

  editUser(user: User, idUser: number): Observable<User> {
    return this.http.post<User>(`http://localhost:8080/api/editUser/${idUser}`, user); 
  }
  
  findUserById(id: number): Observable<User> {
     return this.http.get<User>(`http://localhost:8080/api/findUserById/${id}`); 
   }
   
  deleteUser(id: number): Observable<User> {
     return this.http.delete<User>(`http://localhost:8080/api/deleteUser/${id}`); 
   }

   findAllUsers(): Observable<User[]> {
     return this.http.get<User[]>(`http://localhost:8080/api/findAllUsers/`); 
   }
   
  findByUsername(name: string): Observable<User> {
     return this.http.get<User>(`http://localhost:8080/api/findByUsername/${name}`); 
   }
   
 saveUsername(username: string) {
    window.sessionStorage.removeItem( USERNAME_KEY);
    window.sessionStorage.setItem( USERNAME_KEY, username);
  }

  getUsername(): string {
   return sessionStorage.getItem( USERNAME_KEY);
  }

}

Font Awesome

We need to add these links in index.html

src/app/index.html




  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Components

In addition to containing or pointing to the template, the @Component metadata configures, for example, how the component can be referenced in HTML and what services it requires.

- app.component.ts
- app.component.html
- app.component.css

The above files were created by default when we created new project using the angular-cli command.

src/app/app.component.ts



 import  { Component, OnInit }  from  '@angular/core';
 import  { Router }  from  '@angular/router';
 import  { User, Category }  from  '../model/Model';
 import  { CategoryService }  from  '../service/category.service';
 import  { UserService }  from  '../service/user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  categories: Category[];
  user: User = {} as User;

  constructor(public dialog: MatDialog, private userService: UserService, private categoryService: CategoryService) {
    this.userService.findByUsername(userService.getUsername()).subscribe(user => {
      this.user = user;
    })
  }
  ngOnInit(): void {
    this.categoryService.findAllCategories().subscribe(categories => {
      this.categories = categories;
    });
  }
  
  login() {
    this.dialog.open(LoginComponent);
  }
}

src/app/app-component.html




<div class="toolbar" role="banner">
  <i class="fas fa-shopping-cart"></i>
  <span [routerLink]="['/dashboard']">Welcome to your eccommerce</span>
  <button mat-button [matMenuTriggerFor]="menu">Menu <i class="fas fa-caret-down"></i></button>
  <mat-menu #menu="matMenu">
    <button *mat-menu-item ngFor="let cat of categories"
      [routerLink]="['/dsiplay-category/', cat.id]">{{cat.name}}</button>
  </mat-menu>

  <div class="spacer"></div>
  <a type="button" [routerLink]="['/dashboard']">
    Home <i class="fas fa-home"></i>
  </a>
  <a type="button" *ngIf="user" [routerLink]="['/profile/', user.id]">
    Profile <i class="fas fa-user"></i>
  </a>
  <a type="button" (click)="login()" *ngIf="!user">
    login
  </a>
</div><br

src/app/app-component.css



body {
  font-family: initial;
  font-size: 16px;
}

.spacer {
  flex: 1;
}

a {
  margin-right: 20px;
 color: aliceblue;
}

.toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #1976d2;
  color: white;
  font-weight: 600;
}

.toolbar img {
  margin: 0 16px;
}

.toolbar #twitter-logo {
  height: 40px;
  margin: 0 16px;
}

.toolbar #twitter-logo:hover {
  opacity: 0.8;
}

.fa-shopping-cart {
  font-size: 50px;
  margin: 10px;
}

We are going to create a login page to login.

- login.component.ts
- login.component.html

src/app/login-component.ts



 import  { Component, OnInit }  from  '@angular/core';
 import  { Router }  from  '@angular/router';
 import  { User }  from  '../model/Model';
 import  { UserService }  from  '../service/user.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  user: User = {} as User;
  progressBar = true;
  
  constructor(private userService: UserService) {}
  
 ngOnInit(): void { }

  addUser() {
    this.progressBar = true;
    this.userService.addUser(this.user).subscribe((user) => {
      this.user = user;
      this.userService.saveUsername(user.username);
      window.location.replace('/');
    });
  }
}

src/app/login-component.html




<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Login</h5>
    <form name="user">
      <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Username</label>
        <input type="text" class="form-control" name="username" [(ngModel)]="user.username">
      </div>
      <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <input type="password" class="form-control" name="password" [(ngModel)]="user.password">
      </div>
      <button type="submit" class="btn btn-primary" (click)="addUser()">Login</button>
    </form>
  </div>
</div>

We are going to create a profile page to display the profile information.

- profile.component.ts
- profile.component.html

src/app/profile-component.ts



 import  { Component, OnInit }  from  '@angular/core';
 import  { Router, ActivatedRoute }  from  '@angular/router';
 import  { User, Cart, Category }  from  '../model/Model';
 import  { AddTagComponent }  from  './../admin/add-tag/add-tag.component';
 import  { CategoryService }  from  './../service/category.service';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { UserService }  from  './../service/user.service';
 import  { AddCategoryComponent }  from  '../admin/add-category/add-category.component';
 import  { AddProductComponent }  from  '../admin/add-product/add-product.component';
 import  { UpdateProfileComponent }  from  '../update-profile/update-profile.component';
 import  { CartService }  from  '../service/cart.service';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class HomeComponent implements OnInit {
  categories: Category[];
  carts: Carts[];
  user: User = {} as User;
  cartLength = 0;

  constructor(
    private userService: UserService,
    private route: ActivatedRoute,
    private dialog: MatDialog,
    private categoryService: CategoryService,
    private cartService: CartService,
    private router: Router
  ) {
    this.route.params.subscribe((params) => {
      this.userService
        .findByUsername(this.userService.getUsername())
        .subscribe((user) => {
          this.user = user;
          this.cartService.findCartsForUser(this.user.id).subscribe((carts) => {
            this.carts = carts;
            this.cartLength = this.carts.length;
          });
          this.categoryService.findAllCategories().subscribe((categories) => {
            this.categories = categories;
          });
        });
    });
  }
  
ngOnInit(): void { }

  logout(id: number) {
    window.location.replace('/dashboard');
    this.userService.signOut();
  }
  
  addCategory(idUser: number) {
    this.dialog.open(AddCategoryComponent, {
      data: { idUser },
    });
  }

  addProduct(idCategory) {
    this.dialog.open(AddProductComponent, {
      data: { idCategory },
    });
  }

  addTag() {
    this.dialog.open(AddTagComponent);
  }
  
  updateProfile() {
    this.dialog.open(UpdateProfileComponent);
  }
  
  deleteCart(idPro, idUser) {
    if (confirm('Are you sure')) {
      this.cartService.removeFromCart(idPro, idUser).subscribe(() => {
        window.location.reload();
      });
    }
  }
  
  sangleProduct(name) {
    this.router.navigate(['/puy/product/', name]);
  }
}

src/app/profile-component.html




<div class="row" style="margin-top: 40px;">
  <div class="col-lg-4">
    <div class="card">
      <div class="card-body" style="background-color: #e15f41; padding: 0px; padding-left: 10px; color: wheat;">
        <h2 class="card-title">Your Profile {{user.username}}</h2>
      </div>
      <ul class="list-group list-group-flush" *ngIf="user.email || user.nameOnCard || user.cardNumber">
        <li class="list-group-item">{{user.nameOnCard}}</li>
        <li class="list-group-item">{{user.email}}</li>
        <li class="list-group-item">{{user.address}}</li>
      </ul>
      <div *ngIf="user.admin==true">
        <ul class="list-group" *ngFor="let cat of categories">
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <span style="cursor: pointer;" [ routerLink]="['/profile/' + user.id + '/categories/', cat.id]"
              routerLinkActive="router-link-active"> {{cat.name}}                    </span>
            <button type="button" class="btn btn-outline-primary btn-sm" (click)="addProduct(cat.id)">Add
              product</button>
          </li>
        </ul>
      </div>

      <div class="card-body">
        <button type="button" class="btn btn-danger" (click)="logout(user.id)">Logout</button>
        <button type="button" class="btn btn-warning" style="margin: 0 10px;"
          (click)="updateProfile(user.id)">Update</button>
        <button type="button" class="btn btn-info" ( click)="addCategory(user.id)"  *ngIf="user.admin">Add
          category</button>
        <button type="button" class="btn btn-success" (click)="addTag()" style="margin-left: 10px;"
          *ngIf="user.admin">Add tag</button>
      </div>
    </div>

  </div>
  <div class="col-lg-8">
    <div class="card" *ngIf="cartLength>=1" style="margin-top: 30px;">
      <div class="card-body">
        <mat-accordion>
          <mat-expansion-panel hideToggle>
            <mat-expansion-panel-header>
              <mat-panel-title>
                Your product
              </mat-panel-title>
              <mat-panel-description>
                This is a product saved
              </mat-panel-description>
            </mat-expansion-panel-header>
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">Product</th>
                  <th scope="col">Name</th>
                  <th scope="col">Price</th>
                  <th scope="col">Quantity</th>
                  <th scope="col">Delete</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let cart of carts">
                  <th scope="row"><img src="{{cart.pictureUrl}}" class="img-thumbnail" style="width: 100px;"></th>
                  <td>{{cart.name}}</td>
                  <td>{{cart.price}}</td>
                  <td>{{cart.quantity}}</td>
                  <td><span class="material-icons" (click)="deleteCart(cart.id, user.id)"
                      style="cursor: pointer; color: #e15f41;">delete_forever</span></td>
                </tr>
              </tbody>
            </table>
          </mat-expansion-panel>
        </mat-accordion>
      </div>
    </div>
    <router-outlet></router-outlet>
  </div>
</div>

We are going to create a update-profile page to update informaion.

- update-profile.component.ts
- update-profile.component.html

src/app/update-profile.component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { Router }  from  '@angular/router';
 import  { User }  from  '../model/Model';
 import  { UserService }  from  '../service/user.service';

@Component({
  selector: 'app-update-profile',
  templateUrl: './update-profile.component.html',
  styleUrls: ['./update-profile.component.css']
})
export class LoginComponent implements OnInit {
  user: User = {} as User;
  progressBar = true;
  
  constructor(private userService: UserService) {}
  
 ngOnInit(): void { 
     this.userService.findByUsername(this.userService.getUsername()).subscribe(user => {
      this.user = user;
    })
 }

  updateUser(idUser) {
    this.progressBar = true;
    this.userService.editUser(this.user).subscribe((user) => {
      this.user = user;
      this.userService.saveUsername(user.username);
      window.location.reload();
    });
  }
}

src/app/update-profile.component.html




<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Update profile</h5>
    <form name="user">
      <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
      
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Username</label>
        <input type="text" class="form-control" name="username" [(ngModel)]="user.username">
      </div>
      
      <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <input type="password" class="form-control" name="password" [(ngModel)]="user.password">
      </div>
      
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Card Number</label>
        <input type="number" class="form-control" name="cardNumber" [(ngModel)]="user.cardNumber">
      </div>
      
        <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Cvv</label>
        <input type="number" class="form-control" name="cvv" [(ngModel)]="user.cvv">
      </div>
      
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Name On Card</label>
        <input type="text" class="form-control" name="nameOnCard" [(ngModel)]="user.nameOnCard">
      </div>
      
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Email</label>
        <input type="text" class="form-control" name="email" [(ngModel)]="user.email">
      </div>
      
     <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Address</label>
        <input type="text" class="form-control" name="address" [(ngModel)]="user.address">
      </div>
      
      <button type="submit" class="btn btn-primary" (click)="updateUser(user.id)()">Save</button>
    </form>
  </div>
</div>

We are going to create a categories page to display informaion.

- categories.component.ts
- categories.component.html

src/app/admin/categories.component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { AddTagToProductComponent}  from  './../add-tag-to-product/add-tag-to-product.component';
 import  { Product, Category, User, Tag, Comment}  from  './../../modal/Modal';
 import  { AddProductComponent}  from  './../add-product/add-product.component';
 import  { AddCategoryComponent}  from  './../add-category/add-category.component';
 import  { UserService}  from  './../../service/user.service';
 import  { MatDialog}  from  '@angular/material/dialog';
 import  { CategoryService}  from  './../../service/category.service';
 import  { ProductService}  from  './../../service/product.service';
 import  { ActivatedRoute}  from  '@angular/router';
 import  { TagService}  from  'src/app/service/tag.service';
 import  { CommentService}  from  'src/app/service/comment.service';

@Component({
  selector: 'app-categories',
  templateUrl: './categories.component.html',
  styleUrls: ['./categories.component.css']
})
export class CategoriesComponent implements OnInit {
  products: Product[];
  user: User = {} as User;
 category: Category = {} as Category;
  idCategory: number;
  panelOpenState: boolean;
  tags: Tag[];
  comments: Comment[];

  constructor(private productService: ProductService, private categoryService: CategoryService,
    private route: ActivatedRoute, private dialog: MatDialog, private userService: UserService,
     private tagService: TagService, private commentService: CommentService) {
    this.route.params.subscribe(
      params => {
        this.idCategory = this.route.snapshot.params.idCategory;
        this.categoryService.findCategoryById(this.idCategory).subscribe(category => {
          this.category = category;
          this.productService.findProductsForCategory(this.idCategory).subscribe(products => {
            this.products = products;
          });
        })
        this.userService.findByUsername(this.userService.getUsername()).subscribe(user => {
          this.user = user;
        })
        this.commentService.findAllComments().subscribe(comments => {
          this.comments = comments;
        })
      }
    )
  }
  
  ngOnInit(): void { }
 
   addTag(idProduct) {
    this.dialog.open(AddTagToProductComponent, {
      data: { idProduct }
    })
  }
  showTags(idProduct) {
    this.tagService.findTagsForProduct(idProduct).subscribe(tags => {
      this.tags = tags;
    })
  }
  deleteCategory(idCategory, idUser) {
     if (confirm("Are you sure")) {
      this.categoryService.deleteCategory(idCategory).subscribe(() => {
      window.location.replace(`/profile/${idUser}`)
      })
    }
  }
  editCategory(idCategory) {
    this.dialog.open(AddCategoryComponent, {
    data: { idCategory }
    })
  }
  deleteProduct(idProduct, idUser) {
      if (confirm("Are you sure")) {
      this.productService.deleteProduct(idProduct).subscribe(() => {
      window.location.replace(`/profile/${idUser}`)
      })
    }
  }
  editProduct(idProduct) {
    this.dialog.open(AddProductComponent, {
    data: { idProduct }
    })
  }
  deleteComment(id) {
    this.commentService.deleteComment(id).subscribe(() => {
    window.location.reload();
    })
  }
}

src/app/admin/categories.component.html




<br>
<mat-card>
  <div class="row">
    <div class="col-md-6">
      <mat-card-header>
        <div mat-card-avatar></div>
        <mat-card-title>{{category.name}}</mat-card-title>
        <mat-card-subtitle>All products for this category</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>

        <div class="card mb-3" *ngFor="let pro of products">
          <div class="row g-0">
            <div class="col-md-4">
              <img src="{{pro.pictureUrl}}" alt="{{pro.name}}" style="width: 150px;">
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <h5 class="card-title">{{pro.name}}</h5>
                <p class="card-text" style="color: firebrick; font-weight: bold;">Price: {{pro.price}}
                </p>
                <p class="card-text"><small class="text-muted">{{pro.description}}</small></p>
                <ul class="list-group list-group-horizontal">
                  <li class="list-group-item" style="cursor: pointer;" (click)="editProduct(pro.id)">Update</li>
                  <li class="list-group-item" style="cursor: pointer;" (click)="deleteProduct(pro.id, user.id)">Delete
                  </li>
                </ul>
              </div>
            </div>
          </div><br>
          <div class="row">
            <div class="col-md-4">
              <span class="badge rounded-pill bg-dark"
                style="cursor: pointer; margin: 10px; color: aliceblue; padding: 5px 10px;" (click)="addTag(pro.id)">
                Add Tag</span>
            </div>
            <div class="col-md-8">
              <mat-accordion>
                <mat-expansion-panel hideToggle>
                  <mat-expansion-panel-header (click)="showTags(pro.id)">
                    <mat-panel-title>
                      Tags
                    </mat-panel-title>
                    <mat-panel-description>
                      for this product
                    </mat-panel-description>
                  </mat-expansion-panel-header>
                  <mat-chip-list class="example-chip" cdkDropList cdkDropListOrientation="horizontal">
                    <mat-chip class="example-box" cdkDrag *ngFor="let tag of tags">
                      {{tag.name}}
                    </mat-chip>
                  </mat-chip-list>
                </mat-expansion-panel>
              </mat-accordion><br>
            </div>
          </div>
        </div>

      </mat-card-content>
      <mat-card-actions>
        <button mat-button color="primary" (click)="editCategory(category.id)">Update category</button>
        <button mat-button color="accent" (click)="deleteCategory(category.id, user.id)">Delete
          category</button>
      </mat-card-actions>
    </div>
    <div class="col-lg-md">
      <h2 style="margin-left: 25px;">Comments</h2>
      <mat-accordion>
        <mat-expansion-panel hideToggle>
          <mat-expansion-panel-header>
            <mat-panel-title>
              Management
            </mat-panel-title>
            <mat-panel-description>
              The comments
            </mat-panel-description>
          </mat-expansion-panel-header>

          <mat-card class="example-card" *ngFor="let comment of comments" style="margin-bottom: 10px;">
            <mat-card-header>
              <div mat-card-avatar class="example-header-image"></div>
              <mat-card-title>Added By {{comment.addedBy}}</mat-card-title>
              <mat-card-subtitle>Added At {{comment.addedBy}}</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
              <strong>{{comment.title}}</strong>
              <p style="width: 350px;">{{comment.message}}</p>
            </mat-card-content>
            <mat-card-actions>
              <button mat-button color="accent" (click)="deleteComment(comment.id)">Delete</button>
            </mat-card-actions>
            <hr>
          </mat-card>

        </mat-expansion-panel>
      </mat-accordion>
    </div>
  </div>
</mat-card>

We are going to create a add-category page to add a category.

- add-category.component.ts
- add-category.component.html

src/app/admin/add-category.component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { CategoryService }  from  './../../service/category.service';
 import  { Category }  from  '../model/Model';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';

@Component({
  selector: 'app-add-category',
  templateUrl: './add-category.component.html',
  styleUrls: ['./add-category.component.css']
})
export class AddCategoryComponent implements OnInit {
  category: Category = {} as Category;
  progressBar = flase;
  
  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private categoryService: CategoryService) { }

  ngOnInit(): void {
    if (this.data.idCategory != null) {
      this.categoryService.findCategoryById(this.data.idCategory).subscribe(category => {
        this.category = category;
      })
    }
  }
  addCategory() {
    this.showProgressBar = true;
    if (this.data.idCategory != null) {
      this.categoryService.editCategory(this.category, this.data.idCategory).subscribe(category => {
        this.category = category;
        window.location.reload();
      })
     } else {
      this.categoryService.addCategoryToUser(this.category, this.data.idUser).subscribe(category => {
        this.category = category;
        window.location.reload();
      })
    }
  }
}

src/app/admin/add-category.component.html




<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Add Category</h5>
    <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
    <form name="category" (ngSubmit)="addCategory()">
      <div class="mb-3">
        <label for="name" class="form-label">Name</label>
        <input type="text" class="form-control" name="name" [(ngModel)]="category.name">
      </div>
      <button type="submit" class="btn btn-primary">Save</button>
    </form>
  </div>
</div>

We are going to create a add-product page to add a product.

- add-product.component.ts
- add-product.component.html

src/app/admin/add-product.component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { ProductService }  from  './../../service/product.service';
 import  { Product}  from  '../model/Model';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';

@Component({
  selector: 'app-add-product',
  templateUrl: './add-product.component.html',
  styleUrls: ['./add-product.component.css']
})
export class AddProductComponent implements OnInit {
  product: Product = {} as Product;
  progressBar = flase;
  
  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private productService: ProductService) { }

  ngOnInit(): void {
    if (this.data.idProduct != null) {
      this.productService.findProductById(this.data.idProduct).subscribe(product => {
        this.product = product;
      })
    }
  }
  addProduct() {
    this.showProgressBar = true;
    if (this.data.idProduct != null) {
      this.productService.editProduct(this.product, this.data.idProduct).subscribe(product => {
        this.product = product;
        window.location.reload();
      })
     } else {
      this.productService.addProductToCategory(this.product, this.data.idCategory).subscribe(product => {
        this.product = product;
        window.location.reload();
      })
    }
  }
}

src/app/admin/add-product.component.html




<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Add Product</h5>
    <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
    <form name="product" (ngSubmit)="addProduct()">
     
     <div class="mb-3">
        <label for="name" class="form-label">Name</label>
        <input type="text" class="form-control" name="name" [(ngModel)]="product.name">
      </div>
      
      <div class="mb-3">
        <label for="price" class="form-label">Price</label>
        <input type="number" class="form-control" name="price" [(ngModel)]="product.price">
      </div>
      
      <div class="mb-3">
        <label for="pictureUrl" class="form-label">Photo</label>
        <input type="text" class="form-control" name="pictureUrl" [(ngModel)]="product.pictureUrl">
      </div>
      
      <div class="mb-3">
        <label for="description" class="form-label">Description</label>
        <textarea type="text" class="form-control" name="description" [(ngModel)]="product.description"></textarea
      </div>
      
      <button type="submit" class="btn btn-primary">Save</button>
    </form>
  </div>
</div>

We are going to create a add-tag page to add a tag.

- add-tag.component.ts
- add-tag.component.html

src/app/admin/add-tag.component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { TagService }  from  './../../service/tag.service';
 import  { Tag}  from  '../model/Model';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';

@Component({
  selector: 'app-add-tag',
  templateUrl: './add-tag.component.html',
  styleUrls: ['./add-tag.component.css']
})
export class AddTagComponent implements OnInit {
  tag: Tag = {} as Tag;
  progressBar = flase;
  
  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private tagService: TagService) { }

  ngOnInit(): void {
    if (this.data.idTag != null) {
      this.tagService.findTagById(this.data.idTag).subscribe(tag => {
        this.tag = tag;
      })
    }
  }
  addTag() {
    this.showProgressBar = true;
    if (this.data.idTag != null) {
      this.tagService.editTag(this.tag, this.data.idTag).subscribe(tag => {
        this.tag = tag;
        window.location.reload();
      })
     } else {
      this.tagService.addTag(this.tag).subscribe(tag => {
        this.tag = tag;
        window.location.reload();
      })
    }
  }
}

src/app/admin/add-product.component.html




<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Add Tag</h5>
    <mat-progress-bar mode="buffer" *ngIf="progressBar"></mat-progress-bar>
    <form name="tag" (ngSubmit)="addProduct()">
     
     <div class="mb-3">
        <label for="name" class="form-label">Name</label>
        <input type="text" class="form-control" name="name" [(ngModel)]="tag.name">
      </div>
          
      <button type="submit" class="btn btn-primary">Save</button>
    </form>
  </div>
</div>

We are going to create a add-tag-to-product page to add a tag to product.

- add-tag-to-product.component.ts
- add-tag-to-product.component.html

src/app/admin/add-tag-to-product.component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { TagService }  from  './../../service/tag.service';
 import  { Tag}  from  '../model/Model';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';

@Component({
  selector: 'app-add-tag-to-product',
  templateUrl: './add-tag-to-product.component.html',
  styleUrls: ['./add-tag-to-product.component.css']
})
export class AddTagToProductComponent implements OnInit {
  tags: Tag[];
  filterTags: Tag[];
  
  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private tagService: TagService) { }

  ngOnInit(): void {
    this.tagService.findAllTags().subscribe(tags => {
      this.tags = tags;
      this.tagService.findTagsForProduct(this.data.idProduct).subscribe(filterTags => {
        this.filterTags = filterTags;
        this.filterTags.forEach(t => {
          this.tags = this.tags.filter(item => item.id !== t.id);
        })
      })
    })
  }

  selectedValue(event: any) {
    const idTag = event.value;
    this.tagService.addTagToProduct(this.data.idProduct, idTag).subscribe(() => {
      window.location.reload();
    })
  }
}

src/app/admin/add-tag-to-product.component.html




<div class="card" style="width: 18rem;">
  <div class="card-body">
    <mat-form-field appearance="fill">
      <mat-label>Choose a tags</mat-label>
      <mat-select (selectionChange)="selectedValue($event)">
        <mat-option *ngFor="let tag of tags" [value]="tag.id">
          {{tag.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

Conclusion

Now we have an overview of Angular 10 Backend, We have been building the part of Admin

In the next part we will continue to build user part.

Build an application Ecommerce with Spring boot and Angular part 3

Download This Application Ecommerce From Github

Build an application Ecommerce with Spring boot and Angular part 3

2022-01-18T03:34:00.014-08:00

In this part we will continue to build user part.

We are going to create a orders page.

- orders.component.ts
- orders.component.html
- orders.component.css

src/app/ecommerce/orders.component.ts



 import  { Component, OnInit }  from  '@angular/core';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { Subscription }  from  '.rxjs';
 import  { ProductOrders, User }  from  'src/app/modal/Modal';
 import  { OrderService }  from  'src/app/service/order.service';
 import  { UserService}  from  'src/app/service/user.service';
 import  { UpdateProfileComponent }  from  'src/app/update-profile/update-profile.component';

@Component({
  selector: 'app-orders',
  templateUrl: './orders.component.html',
  styleUrls: ['./orders.component.css']
})
export class OrdersComponent implements OnInit {
  orders: ProductOrders;
  user: User = new User();
  total: number;
  paid: false;
  sub = Subscription;
  hideUpdateMessage = true;
  id: number;
  name: string;
  username: string;
  email: string;
  password: string;
  nameOnCard: string;
  cardNumber: string;
  cvv: number;  
  address: string;
  errorMessage: string;
  hideDiv = true;
  newDate: Date;
  hideItem: boolean;
  
  constructor(private orderService: OrderService, private userService: UserService, private dialog: MatDialog) {
    this.orders = this.orderService.ProductOrders;
  }

  ngOnInit() {
    this.userService.findByUsername(this.userService.getUsername()).subscribe(user => {
      this.user = user;
      if (this.nameOnCard != null || this.cardNumber || this.cvv || this.address) {
        this.nameOnCard = this.user.nameOnCard;
        this.cardNumber = this.user.cardNumber;
        this.cvv = this.user.cvv;
        this.address = this.user.address;
      }
    })
    this.sub = this.orderService.OrdersChanged.subscribe(() => {
      this.orders = this.orderService.ProductOrders;
    });
    this.loadTotal();
    this.newDate = new Date();
  }
  
   pay() {
    this.paid = true;
    this.hideDiv = false;
    this.orderService.saveOrder(this.orders).subscribe();
  }

  loadTotal() {
    this.sub = this.orderService.TotalChanged.subscribe(() => {
      this.total = this.orderService.Total;
    });
  }

  goToHome() {
    window.location.reload();
  }

  goToUpdateProfile(idUser) {
    this.hideUpdateMessage = false;
    this.dialog.open(UpdateProfileComponent, {
      data: { idUser }
    })
  }

}

src/app/ecommerce/orders.component.html




<div *ngIf="(user | json) != '{}' || user.nameOnCard || user.address || user.cardNumber || user.email || user.cvv; else loggedOut">

  <div class="columns" *ngIf="hideDiv">
    <div id="cart-imgs" *ngIf="!paid">
      <div>
        <a> <img class="img-thumbnail"
            src="http://www.pret-pas-cher.fr/wp-content/uploads/2015/01/carte-mastercard.png">
        </a>
      </div>
      <div>
        <a><img class="img-thumbnail"
            src="https://www.techno-finance.fr/wp-content/uploads/2018/10/2000px-Visa_Electron.svg.png">
        </a>
      </div>
    </div>
    <h2 class="text-center" *ngIf="!paid" role="alert" class="alert alert-primary">ORDER</h2>
    <ul *ngIf="!paid" id="bill">
      <li *ngFor="let order of orders.productOrders">
        {{ order.product.name }} - ${{ order.product.price }} x {{ order.quantity}} pcs.
      </li>
    </ul>
    <p role="alert" class="alert alert-danger" *ngIf="!paid">Total amount: ${{ total }}</p>
    <button class="btn btn-primary btn-block" (click)="pay()" *ngIf="!paid">Pay</button>
  </div>

  <div *ngIf="paid">
    <div class="columns">
      <ul class="price">
        <li class="header" role="alert" class="alert alert-success" style="margin-bottom: 1px;">
          <strong>Congratulation!</strong> You successfully made the order. <strong>Bill is</strong>
        </li>
        <li class="grey" style="color: #c0392b">Total amount: ${{ total }} With delivry</li>
        <li> {{newDate | date: 'yyyy-MM-dd hh:mm' }} </li>
        <li class="grey" style="cursor: pointer; color: #FFF"><a (click)="goToHome()" class="button">Finished</a></li>
      </ul>
    </div>
  </div>

</div>
<ng-template #loggedOut>
  <div class="alert alert-warning" style="margin-top: 15px;" *ngIf="hideUpdateMessage">
    <strong>You must update your profile!</strong> To complete your chopping.
    <button class="btn btn-success" (click)="goToUpdateProfile(user.id)">Update</button>
  </div>
</ng-template>

src/app/ecommerce/orders.component.css




 .container {
  padding-top: 65px;
}
 #cart-imgs {
  display: flex;
  margin-top: 10px;
  padding-left: 42px;
}
 #cart-imgs img {
  height: 120px;
  width: 250px;
  margin-left: 10px;
}
* {
  box-sizing: border-box;
}
 #bill {
  border: 1px solid #f0f0f0;
  padding: 10px 24px;
  color: #2c3e50;
  margin: 0px !important;
}
 .columns {
  float: left;
  width: 100%;
  margin-left: 4px;
  background: antiquewhite;
  padding: 10px;
  margin-top: 20px;
  border-radius: 5px;
}
 .price {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
 .price:hover {
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
}
 .price .header {
  font-size: 25px;
}
 .price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}
 .price .grey {
  background-color: #ecf0f1;
  font-size: 20px;
}
 .button {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  border-radius: 5px;
}
@media  only screen and ( max-width: 600px) {
   .columns {
    width: 100%;
  }
}
 .alert-primary {
  margin: 20px 0px 0px 0px !important;
}
 .alert-danger {
  margin: 0px !important;
}

We are going to create a products page.

- products.component.ts
- products.component.html
- products.component.css

src/app/ecommerce/products.component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { Router }  from  '@angular/router';
 import  { User,ProductOrder, Product, ProductOrders }  from  '../model/Model';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { LoginComponent }  from  'src/app/login/login.component';
 import  { OrderService }  from  'src/app/service/order.service';
 import  { ProductService }  from  'src/app/service/product.service';
 import  { UserService }  from  'src/app/service/user.service';
 import  { Subscription }  from  'rxjs';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  productOrders: ProductOrder[] = [];
  products: Product[] = [];
  user: User = new User();
  selectedProductOrder: ProductOrder;
  shoppingCartOrders: ProductOrders;  
  sub: Subscription;
  productSelected = false;
  description: string;
  showMyContainerInfo = false;
  showBtn = -1;
  idCart: number;  

  constructor(private orderService: OrderService, private router: Router, private dialog: MatDialog,
    private productService: ProductService, private userService: UserService) {
      this.userService.findByUsername(this.userService.getUsername()).subscribe(user => {
        this.user = user;
      });
  }

ngOnInit(): void { 
    this.productOrders = [];
    this.loadProducts();
    this.loadOrders();
}

  addToCart(order: ProductOrder, idUser) {
    this.orderService.SelectedProductOrder = order;
    this.selectedProductOrder = this.orderService.SelectedProductOrder;
    this.productSelected = true;
  }

  removeFromCart(productOrder: ProductOrder, idUser) {
    let index = this.getProductIndex(productOrder.product);
    if (index > -1) {
      this.shoppingCartOrders.productOrders.splice(
        this.getProductIndex(productOrder.product), 1);
    }
    this.orderService.ProductOrders = this.shoppingCartOrders;
    this.shoppingCartOrders = this.orderService.ProductOrders;
    this.productSelected = false;
  }

    getProductIndex(product: Product): number {
    return this.orderService.ProductOrders.productOrders.findIndex(
      value => value.product === product);
  }

  isProductSelected(product: Product): boolean {
    return this.getProductIndex(product) > -1;
  }

  loadProducts() {
    this.productService.findAllProducts().subscribe(
      (products: any[]) => {
        this.products = products;
        this.products.forEach(product => {
          this.productOrders.push(new ProductOrder(product, 0));
        })
      }
    );
  }

src/app/ecommerce/products.component.html




<div class="row card-deck">
  <div class="col-lg-4 col-md-6 mb-4" *ngFor="let order of productOrders; let i = index">
    <div class="card text-center">
      <div class="card-header" style="background-color: #bdc3c7">
        <h4>{{ order.product.name }}</h4>
      </div>

      <div class="card-body">
        <a (click)="sngleProduct(order.product.id)"><img class="card-img-top img-thumbnail"
            style="width: 230px; height: 300px; cursor: pointer" src="{{ order.product.pictureUrl }}" alt="image" /></a>
        <h5 class="card-title" id="price">
          Price = {{ order.product.price }}<i class="fas fa-dollar-sign"></i>
          <button title="Information" id="btn" (click)="showUndoBtn(i)" (click)="productInfo(order.product.id)">
            <i class="fas fa-info-circle"></i>
          </button>
          <button title="View" id="btn" (click)="sngleProduct(order.product.id)">
            <i class="fas fa-eye-slash"></i>
          </button>
        </h5>
        <div class="modal" [attr.id]="'undoBtn' + i" *ngIf="showBtn === i && showMyContainerInfo" class="editBtn"
          md-raised-button color="primary">
          <div class="modal-content">
            <span>{{ description }}</span>
          </div>
        </div>
        <hr style="margin-top: 0px !important; margin-bottom: 10px !important"/>
        <div class="row" *ngIf="user">
          <div class="col-5 padding-0" *ngIf="!isProductSelected(order.product)" style="margin-left: 15px">
            <input type="number" min="0" max="10" class="form-control" [(ngModel)]="order.quantity"/>
          </div>
          <div class="col-5 padding-0" *ngIf="!isProductSelected(order.product)">
            <button class="btn btn-primary" (click)="addToCart(order)" [disabled]="order.quantity <= 0">
              Puy Now
            </button>
          </div>
          <div class="col-12" *ngIf="isProductSelected(order.product)">
            <button class="btn btn-danger btn-block active" (click)="removeFromCart(order)">
              Remove From Cart
            </button>
          </div>
        </div>
        <div *ngIf="!user">
              <p><strong>Please login to buy product</strong> <button type="button" class="btn btn-link"
                  (click)="login()">Login</button> </p>
        </div>
      </div>
    </div>
  </div>
</div>

We are going to create a sangle-product page.

- sangle-product.component.ts
- sangle-product.component.html
- sangle-product.component.scss

src/app/ecommerce/sangle-product.component.ts




 import  { Component, Input, OnInit, ViewChild }  from  '@angular/core';
 import  { ActivatedRoute }  from  '@angular/router';
 import  { ProductOrder, Product, ProductOrders, UpdateProduct, Tag, User, Comment, Cart  }  from  '../model/Model';
 import  { Subscription }  from  'rxjs';
 import  { LoginComponent }  from  'src/app/login/login.component';
 import  { CartService }  from  'src/app/service/cart.service';
 import  { CommentService }  from  'src/app/service/comment.service';
 import  { OrderService }  from  'src/app/service/order.service';
 import  { ProductService }  from  'src/app/service/product.service';
 import  { TagService }  from  'src/app/service/tag.service';
 import  { UserService }  from  'src/app/service/user.service';
 import  { OrdersComponent }  from  '../orders/orders.component';
 import  { ShoppingCartComponent }  from  '../shopping-cart/shopping-cart.component';

@Component({
  selector: 'app-sangle-product',
  templateUrl: './sangle-product.component.html',
  styleUrls: ['./sangle-product.component.scss']
})
export class HomeComponent implements OnInit {
  productOrders: ProductOrder[] = [];
  products: Product[] = []; 
  tags: Tag[] = []; 
  comments: Comment[] = [];  
  user: User = {} as User;
  comment: Comment = {} as Comment;  
  cartExist: Cart = {} as Cart;    
  cart: Cart = {} as Cart;    
  name: string;
  selectedProductOrder: ProductOrder;  
  shoppingCartOrders: ProductOrders;
  sub: Subscription;
  productSelected = false;  
  collapsed = true;  
  orderFinished = false;  
  showBtn = -1;
  submitted: false;  
  idProduct: number;
  product: UpdateProduct;  

  @ViewChild('shoppingCartC')
  shoppingCartC: ShoppingCartComponent;

  @ViewChild('ordersC')
  ordersC: OrdersComponent;

  description: string = '';
  showMyContainerInfo = false;

  counter: number = 1;
  @Input() url = location.href;
  
 constructor(private productService: ProductService, private tagService: TagService,
    private orderService: OrderService, private route: ActivatedRoute, private userService: UserService,
    private commentService: CommentService, private dialog: MatDialog,
    private cartService: CartService) {

  }

ngOnInit(): void { 
    this.loadOrders();
    this.sangleProduct();
    this.userService.findByUsername(this.userService.getUsername()).subscribe(user => {
      this.user = user;
    })
}

  addToCart(order: ProductOrder, idUser) {
    this.orderService.SelectedProductOrder = order;
    this.selectedProductOrder = this.orderService.SelectedProductOrder;
    this.productSelected = true;
    this.cart.name = order.product.name;
    this.cart.price = order.product.price;
    this.cart.quantity = order.quantity;
    this.cart.pictureUrl = order.product.pictureUrl;
    this.cartService.addCartToUser(this.cart, idUser).subscribe(cart => {
      this.cart = cart;
      this.cartService.saveCartName(this.cart.name);
    })
  }
  
  removeFromCart(productOrder: ProductOrder, idUser) {
  let index = this.getProductIndex(productOrder.product);
    if (index > -1) {
      this.shoppingCartOrders.productOrders.splice(
        this.getProductIndex(productOrder.product), 1);
      const name = this.cartService.getCartName();
      this.cartService.findCartsForUser(idUser).subscribe(carts => {
        this.cartExist = carts.filter(item => item.name === name)[0];
        this.cartService.removeFromCart(this.cartExist.id, idUser).subscribe(() => {
        })
      })
    }
    this.orderService.ProductOrders = this.shoppingCartOrders;
    this.shoppingCartOrders = this.orderService.ProductOrders;
    this.productSelected = false;
  }

  getProductIndex(product: Product): number {
    return this.orderService.ProductOrders.productOrders.findIndex(
      value => value.product === product);
  }

  isProductSelected(product: Product): boolean {
    return this.getProductIndex(product) > -1;
  }

  loadOrders() {
    this.sub = this.orderService.OrdersChanged.subscribe(() => {
      this.shoppingCartOrders = this.orderService.ProductOrders;
    });
  }

  toggleCollapsed(): void {
    this.collapsed = !this.collapsed;
  }

  finishOrder(orderFinished: boolean) {
    this.orderFinished = orderFinished;
  }

  reset() {
    this.productOrders = [];
    this.orderService.ProductOrders.productOrders = [];
    this.loadOrders();
    this.productSelected = false;
    this.orderFinished = false;
    this.shoppingCartC.reset();
    this.ordersC.paid = false;
  }
 
  private sangleProduct() {
    this.product = new UpdateProduct();
    this.idProduct = this.route.snapshot.params.idProduct;
    this.tagService.findTagsForProduct(this.idProduct).subscribe(tags => {
      this.tags = tags;
    });
    this.commentService.findCommentsForProduct(this.idProduct).subscribe(comments => {
      this.comments = comments;
    });
    this.productService.findProductById(this.idProduct).subscribe(data => {
      this.name = data.name;
      this.productService.findByName(this.name).subscribe((products: any[]) => {
        this.products = products;
        this.products.forEach(product => {
          this.productOrders.push(new ProductOrder(product, 0));
        });
      });
      this.submitted = true;
    });
  }
  addComment(idProduct, username) {
    this.comment.addedBy = username;
    this.commentService.addCommentToProduct(this.comment, idProduct).subscribe(comment => {
      this.comment = comment;
      window.location.reload();
    })
  }
  login() {
    this.dialog.open(LoginComponent);
  }
}

src/app/ecommerce/sangle-product.component.html




<div class="container" *ngFor="let order of productOrders let i = index;">
  <div class="row">
    <div class="col" [hidden]="orderFinished">

      <div class="pricing-table">

        <div class="pricing-item pricing-featured">
          <div class='selected'>Recomend</div>
          <div class="pricing-title">
            Product
          </div>
          <div class="pricing-value">R${{order.product.price}}.<span class="smallText">90</span>
          </div>
          <ul class="pricing-features">
            <li><span class="keywords">Name</span> {{order.product.name}}</li>
            <li>Description <br>
              <span>
                {{order.product.description}}
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi hic fugit inventore saepe
                optio quidem sunt, molestiae voluptate doloribus accusantium corporis quisquam veritatis
                tempora, similique consequuntur distinctio dicta error esse?
              </span>
            </li>
          </ul>

          <div class="button" *ngIf="user">
            <div *ngIf="!isProductSelected(order.product)">
              <button id="addToCartBtn" class="btn-block" (click)="addToCart(order,  user.id)">Add To Cart
              </button>
            </div>
            <div *ngIf="isProductSelected(order.product)">
              <button class="btn btn-danger btn-block active" (click)="removeFromCart(order,  user.id)">Remove From Cart
              </button>
            </div>
          </div>

          <div *ngIf="!user">
            <p><strong>Please login to buy product</strong> <button type="button" class="btn btn-link"
                (click)="login()">Login</button> </p>
          </div>
       </div>
     </div>
    </div>
    
    <div class="col" [hidden]="orderFinished">
      <img class="card-img-top img-thumbnail" style="width: 100%; height: 570px" src={{order.product.pictureUrl}}
        alt="image">
      <div *ngIf="!isProductSelected(order.product)">
        <input type="hidden" tabindex="0" min="1" max="1" class="form-control" [(ngModel)]="order.quantity" />
      </div>

      <ul class="list-group list-group-horizontal-sm">
        <li class="list-group-item" *ngFor="let tag of tags"
          style="margin-left: 5px; margin-left: 5px; margin-top: 10px; padding: 5px 10px;">
          <a [routerLink]="['/display-tag/', tag.id]" style="cursor: pointer; color: blue;">{{tag.name}}</a>
        </li>
      </ul>
    </div>
    <div class="col" style="padding-right: 34px;">
      <div style="margin-top: 5px;">
        <app-shopping-cart (onOrderFinished)=finishOrder($event) #shoppingCartC [hidden]="orderFinished">
        </app-shopping-cart>
      </div>

      <div>
        <app-orders #ordersC [hidden]="!orderFinished"></app-orders>
      </div>
    </div>
   <hr style="border: 1px solid #ddd;">
  </div>
</div>

<div class="container" style="margin-bottom: 50px;" [hidden]="orderFinished">
  <div class=info-comment">
    <p><strong>Comments </strong></p>
  </div>

  <div class="card col-md-8" *ngIf="user">
    <div class="card-body">
      <form>
        <div class="mb-3">
          <input type="text" class="form-control" placeholder="Title" name="title" [(ngModel)]="comment.title">
       </div>
        <div class="mb-3">
          <textarea class="form-control" rows="3" placeholder="Message" name="message"
            [(ngModel)]="comment.message"></textarea>
        </div>
        <a (click)="addComment(idProduct, user.username)" class="btn btn-primary">Add comment</a>
      </form>
    </div>
 </div>

  <div class="card col-md-8" *ngIf="!user">
    <div class="card-body">
      <div class="info-comment">
        <p><strong>Please login to add Comment </strong> <button type="button" class="btn btn-link"
            (click)="login()">Login</button> </p>
      </div>
    </div>
 </div>

  <div class="container-comment" *ngFor="let item of comments">
    <img src="https://png.pngtree.com/png-vector/20190710/ourlarge/pngtree-user-vector-avatar-png-image_1541962.jpg"
      alt="Avatar" style="width:90px">
    <p><span>{{item.addedBy}}</span> {{item.addedAt | date}}</p>
    <p><strong>{{item.title}}: </strong> {{item.message}}</p>
 </div>

</div>

src/app/ecommerce/sangle-product.component.scss




*,
*:before,
*:after  {
  -webkit-box-sizing : border-box ;
  -moz-box-sizing : border-box ;
  box-sizing : border-box ;
}

html,
body  {
  height : 100%;
  min-height : 100%;
  margin : 0;
  padding : 0;
}
body  {
  background-color : #fcfcfc ;
  font-family : "Montserrat", sans-serif ;
  text-align : center ;
}
.pricing-table  {
  text-align : center ;
  margin-top : -16px;
}

.pricing-item  {
  border-radius : 3px;
  display : inline-block ;
  width : 100%;
  height : 100%;
  background : #fff ;
  margin : 20px;
  vertical-align : top ;
  position : relative ;
  overflow : hidden ;
  box-shadow : 0 1.5px 4px rgba (0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
  -webkit-transition : all 0.2s cubic-bezier (0.3, 0.6, 0.2, 1.8);
  transition : all 0.2s cubic-bezier (0.3, 0.6, 0.2, 1.8);
  &:hove r {
    -webkit-transform : scale (1.04);
    -ms-transform : scale (1.04);
    transform : scale (1.04);
    box-shadow : 0 3px 12px rgba (0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
  }
  .pricing-title  {
    width : 100%;
    color : white ;
    display : block ;
    position : relative ;
    background : #0074d9 ;
    padding : 7px;
    font-weight : bold;
    font-size : 20px;
  }
  &.pricing-featured .pricing-title  {
    background : #ff4136 ;
  }
}

.pricing-value  {
  width : 180px;
  height : 180px;
  padding-top : 46px;
  border-radius : 50%;
  color : #fff;
  font-size : 46px;
  font-weight : 300;
  margin : 10px auto ;
}
.pricing-value .smallText  {
  font-size : 14px;
}
.pricing-value .undertext  {
  display : block ;
  font-size : 16px;
}
.pricing-item .pricing-value  {
  background : #0074d9 ;
  border : 2px solid #0074d9 ;
}
.pricing-item.pricing-featured .pricing-value  {
  background : #ff4136 ;
  border : 2px solid #ff4136 ;
}

.pricing-item .pricing-features {
  margin: 10px 0;
  padding: 0;
  list-style: none;
  & li {
    display: block;
    width: 90%;
    line-height: 40px;
    font-size: 15px;
    font-weight: 400;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    .keywords {
      font-weight: bold;
    }
  }
}

.button {
   width: 160px;
  height: 38px;
   font-weight: 300;
   font-size: 16px;
   line-height: 32px;
   margin: 0 auto;
   background: #fff;
   color: #0074d9;
   border: 2px solid #0074d9;
   cursor: pointer;
   margin-bottom: 10px;
  -webkit-transition: 0.2s ease-out;
   -moz-transition: 0.2s ease-out;
   -o-transition: 0.2s ease-out;
   -ms-transition: 0.2s ease-out;
   transition: 0.2s ease-out;
  &:hover {
     background: #0074d9;
     color: #fff;
     border: none;
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18),
      0 4px 15px 0 rgba(0, 0, 0, 0.15);
     box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18),
      0 4px 15px 0 rgba(0, 0, 0, 0.15);
  }
}

.pricing-item.pricing-featured .button {
   color: #ff4136;
   border: 2px solid #ff4136;
  &:hover {
     background: #ff4136;
     color: #fff;
  }
}
.selected {
   z-index: 10;
   width: 180px;
   height: 32px;
   padding: 0 20px;
   font-size: 12px;
   line-height: 25px;
   text-align: center;
   color: #fff;
   font-weight: bold;
   box-shadow: 0px 2px 5px #888888;
   background: gold;
   border-top: 5px solid gold;
   border-bottom: 5px solid gold;
   transform: rotate(35deg);
   position: absolute;
   right: -47px;
   top: 17px;
}

#addToCartBtn {
   background: #fff;
   border: none;
}
#addToCartBtn:hover {
   background: #0074d9;
}
.jumbotron span {
   margin-left: 5px;
}
.container {
   background: aliceblue;
   padding: 10px;
   border-radius: 10px;
   padding-bottom: 10px;
   margin-top: 50px;
}
.info-comment {
   background-color: #ffdddd;
   border-left: 16px solid #f44336;
   border-right: 16px solid #f44336;
   margin-bottom: 15px;
   padding: 4px 12px;
   border-radius: 5px;
}
.container-comment {
   border: 2px solid #eee;
   background-color: #fff;
   border-radius: 5px;
   padding: 16px;
   margin: 16px 0;
}

.container-comment::after {
   content: "";
   clear: both;
   display: table;
}

.container-comment img {
   float: left;
   margin-right: 20px;
   border-radius: 50%;
}

.container-comment span {
   font-size: 20px;
   margin-right: 15px;
}

@media ( max-width: 500px) {
  .container-comment {
     text-align: center;
  }
  .container-comment img {
     margin: auto;
     float: none;
     display: block;
  }
}

We are going to create a shopping-cart page.

- shopping-cart.component.ts
- shopping-cart.component.html
- shopping-cart.component.css

src/app/ecommerce/shopping-cart.component.ts




 import  { Component, EventEmitter, OnInit, Output }  from  '@angular/core';
 import  { Router }  from  '@angular/router';
 import  { ProductOrders, ProductOrder, Item, ITEMS }  from  '../model/Model';
 import  { OrderService }  from  '../service/order.service';
 import  { Subscription }  from  'rxjs';

@Component({
  selector: 'app-shopping-cart',
  templateUrl: './shopping-cart.component.html',
  styleUrls: ['./shopping-cart.component.css']
})
export class ShoppingCartComponent implements OnInit {
  itemsList: Item[] = ITEMS;
  orderFinished: boolean;
  orders: ProductOrders;
  total: number;
  sub: Subscription;
  radioSel: any;
  priceDelivery: number;
  radioSelected: string;
  radioSelectedString: string;

  @Output() onOrderFinished: EventEmitter<boolean>;
  
   constructor(private orderService: OrderService, private router: Router) {
    this.total = 0;
    this.orderFinished = false;
    this.onOrderFinished = new EventEmitter<boolean>();

    this.itemsList = ITEMS;
    this.radioSelected = 'item_1';
    this.getSelecteditem();
  }

  ngOnInit() {
    this.orders = new ProductOrders();
    this.loadCart();
    this.loadTotal();

    this.itemsList.forEach((item) => {
      this.onItemChange(item);
    });
    this.priceDelivery = 1.99;
  }
  
  calculateTotal(products: ProductOrder[]): number {
    let sum = 0;
    products.forEach((value) => {
      sum += value.product.price * value.quantity;
    });
    return sum + this.priceDelivery;
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

  finishOrder() {
    this.orderFinished = true;
    this.orderService.Total = this.total;
    this.onOrderFinished.emit(this.orderFinished);
  }

  loadTotal() {
    this.sub = this.orderService.OrdersChanged.subscribe(() => {
      this.total = this.calculateTotal(this.orders.productOrders);
    });
  }
 
 loadCart() {
    this. sub = this.orderService.ProductOrderChanged.subscribe(() => {
      let productOrder = this. orderService.SelectedProductOrder;
      if (productOrder) {
        this.orders.productOrders.push(
          new  ProductOrder( productOrder.product,  productOrder.quantity)
        );
      }
      this.orderService.ProductOrders = this. orders;
      this.orders = this. orderService.ProductOrders;
      this.total = this. calculateTotal(this.orders.productOrders);
    });
  }

  reset() {
    this.orderFinished = false;
    this.orders =  new ProductOrders();
    this.orders. productOrders = [];
    this.loadTotal();
    this. total = 0;
  }
  getSelecteditem() {
    this. radioSel = ITEMS.find(( Item) => Item.value === this. radioSelected);
    this. radioSelectedString = JSON.stringify(this.radioSel);
  }

  onItemChange( item: any) {
    this.getSelecteditem();
    this.priceDelivery =  item.price;
  }

}

src/app/ecommerce/shopping-cart.component.html




<div style="background: aliceblue; padding: 10px; border-radius: 5px;">
  <div class="card text-white bg-danger mb-3" style="max-width: 19rem;">
    <div class="card-header text-center">Shopping Cart</div>
    <div class="card-body">
      <h5 class="card-title">Total: ${{total}}</h5>
      <h6 class="card-title">Items bought</h6>

      <ul>
        <li *ngFor="let order of orders.productOrders">
          {{ order.product.name }} - {{ order.quantity}} pcs.
        </li>
      </ul>

      <button class="btn btn-light btn-block" (click)="finishOrder()"
        [disabled]="orders.productOrders.length == 0">Checkout
      </button>
    </div>
  </div>

  <div class="card text-white bg-warning mb-3" style="max-width: 19rem;">
    <div class="card-header text-center">Delivry</div>
    <div class="card-body" style="padding: 0px !important; margin-top: -30px;">
      <div class="text-center mt-5" style="text-align: left !important; padding: 0">
        <div>
          <ul class="list-group" style="color: black">
            <li class="list-group-item" *ngFor="let item of itemsList" style="background: #ffc107 !important;">
              <input type="radio" [(ngModel)]="radioSelected" name="list_name" value="{{item.value}}"
             (change)="onItemChange(item)"/>
              {{item.name}}{{item.price}}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>




.list-group-item {
  background: #007bff !important;
}
.list-group-item a {
 color: gold;
}
.fa-comment-dots {
  font-size: 100px;
  color: #bdc3c7;
}
.fa-comment-dots:hover {
  color: #039be6;
}
#social-media-icon {
  margin-top: 20px;
  width: 120px;
  text-align: center;
  margin-left: 20px;
  border-radius: 10px;
}
#social-media-icon .fa {
  padding: 14px;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

#social-media-icon .fa:hover {
  opacity: 0.7;
}

#social-media-icon .fa-facebook {
  background: #3b5998;
  color: white;
}

#social-media-icon .fa-twitter {
  background: #55acee;
  color: white;
}

#social-media-icon .fa-google {
  background: #dd4b39;
  color: white;
}

#social-media-icon .fa-instagram {
  background: #125688;
  color: white;
}

We are going to create a ecommerce page.

- ecommerce.component.ts
- ecommerce.component.html

src/app/ecommerce.component.ts




 import  { Component, OnInit, ViewChild }  from  '@angular/core';
 import  { Router }  from  '@angular/router';
 import  { Product }  from  '../model/Model';
 import  { ProductService }  from  '../service/product.service';
 import  { OrdersComponent }  from  './orders/orders.component';
 import  { ProductsComponent }  from  './products/products.component';
 import  { ShoppingCartComponent }  from  './shopping-cart/shopping-cart.component';

@Component({
  selector: 'app-ecommerce',
  templateUrl: './ecommerce.component.html',
  styleUrls: ['./ecommerce.component.css']
})
export class EcommerceComponent implements OnInit {
  products: Product[];
  product: Product = {} as Product;
  orderFinished = false;
  name: any;
  showSearch = false;
  showBtn = -1;
  showMyContainerInfo = false;

  @ViewChild('productsC')
  productsC: ProductsComponent;

  @ViewChild('shoppingCartC')
  shoppingCartC: ShoppingCartComponent;

  @ViewChild('ordersC')
  ordersC: OrdersComponent;
  
constructor(private productService: ProductService, private router: Router) { }

  ngOnInit(): void { }

  finishOrder(orderFinished: boolean) {
    this.orderFinished = orderFinished;
  }

  reset() {
    this.orderFinished = false;
    this.productsC.reset();
    this.shoppingCartC.reset();
    this.ordersC.paid = false;
  }
  search() {
    this.productService.findByName(this.name).subscribe((products) => {
      this.products = products;
      this.showSearch = true;
    });
  }

  showUndoBtn(index) {
    this.showBtn = index;
  }
  productInfo(id: number) {
    this.productService.findProductById(id).subscribe((product) => {
      this.product = product;
    });
    this.showMyContainerInfo = !this.showMyContainerInfo;
  }
  sngleProduct(id: number) {
    this.router.navigate(['sangle/product', id]);
  }
}

src/app/ecommerce.component.html




<div class="container" [hidden]="orderFinished">
  <div class="row">
    <div class="col-lg-4">
    < <h2 class="title-page"><i class="fab fa-dropbox"></i> Products <i class="fab fa-dropbox"></i></h2>
    </div>
    <div class="col-lg-8">
      <div class="input-group mb-3" style="margin-top: 15px;">
        <input type="text" class="form-control" placeholder="Search product" name="name" [(ngModel)]="name">
        <button class="btn btn-danger" type="button" (click)="search()"><i class="fas fa-search"></i></button>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="row" style="padding-bottom: 40px;" *ngIf="!showSearch">
  <div class="col-md-9"
    <app-products #productsC [hidden]="orderFinished"></app-products>
  </div>
  élt;div class="col-md-3">
    <app-shopping-cart (onOrderFinished)=finishOrder($event) #shoppingCartC [hidden]="orderFinished">
    </vapp-shopping-cart>
  </div>

  <div class="col-md-6 offset-3">
    <app-orders #ordersC [hidden]="!orderFinished"></app-orders>
 </div>
</div>

<div *ngIf="showSearch">
  <div class="card-deck" style="padding-bottom: 40px;">
    <div class="col-lg-4 col-md-6 mb-4" *ngFor="let product of products let i = index;">
      <div class="card text-center">
        <div class="card-header" style="background-color: #bdc3c7;">
          <h4>{{product.name}}</h4>
        </div>

        <div class="card-body">
          <a (click)="sngleProduct(product.id)"><img class="card-img-top img-thumbnail"
              style="width: 230px; height: 300px; cursor: pointer;" src={{product.pictureUrl}} alt="image"></a>
          <h5 class="card-title" id="price">Price = {{product.price}}<i class="fas fa-dollar-sign"></i>
            <button title="Information" id="btn" (click)=showUndoBtn(i) (click)="productInfo(product.id)">
              <i class="fas fa-info-circle"></i></button>
            <button title="View" id="btn" (click)="sngleProduct(product.id)"> <i class="fas fa-eye-slash"></i></button>
          </h5>
          <div class="modal" [attr.id]="'undoBtn'+i" *ngIf="showBtn===i && showMyContainerInfo" class="editBtn"
            md-raised-button color="primary">
            <div class="modal-content">
              <span>{{product.description}}</span>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

We are going to create a dashboard page.

- dashboard.component.html

src/app/dashboard.component.ts




  <app-ecommerce></app-ecommerce>

We are going to create a display-category page.

- display-category.component.ts
- display-category.component.html

src/app/display-category.component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { Router, ActivatedRoute }  from  '@angular/router';
 import  { Product }  from  '../model/Model';
 import  { ProductService }  from  '../service/product.service';

@Component({
  selector: 'app-display-category',
  templateUrl: './display-category.component.html',
  styleUrls: ['./display-category.component.css']
})
export class DisplayCategoryComponent implements OnInit {
  products: Product[];
  product: Product = {} as Product;
  idCategory: number;
  orderFinished = false;
  showBtn = -1;
  showMyContainerInfo = false;  

 constructor(private route: ActivatedRoute, private productService: ProductService,
    private router: Router) {
    this.route.params.subscribe(
      params => {
        this.idCategory = this.route.snapshot.params.idCategory;
        this.productService.findProductsForCategory(this.idCategory).subscribe(products => {
          this.products = products;
        }
        );
      }
    )
  }

  ngOnInit(): void { }

  showUndoBtn(index) {
    this.showBtn = index;
  }
  
  productInfo(id: number) {
    this.productService.findProductById(id).subscribe(product => {
      this.product = product;
    });
    this.showMyContainerInfo = !this.showMyContainerInfo;
  }
  
  sngleProduct(id: number) {
    this.router.navigate(['sangle/product', id]);
  }
}

src/app/display-category.component.html




<div class="container" [hidden]="orderFinished">
  <div class="row">
    <div class="col-lg-4">
      <h2 class="title-page"><i class="fab fa-dropbox"></i> Products <i class="fab fa-dropbox"></i></h2>
    </div>
  </div>
</div>
<hr>
<div class="card-deck" style="padding-bottom: 40px;">
  <div class="col-lg-4 col-md-6 mb-4" *ngFor="let product of products let i = index;">
    <div class="card text-center">
      <div class="card-header" style="background-color: #bdc3c7;">
        <h4>{{product.name}}</h4>
      </div>

      <div class="card-body">
        <a (click)="sngleProduct(product.id)"><img class="card-img-top img-thumbnail"
            style="width: 230px; height: 300px; cursor: pointer;" src={{product.pictureUrl}} alt="image"></a>
        <h5 class="card-title" id="price">Price = {{product.price}}<i class="fas fa-dollar-sign"></i>
          <button title="Information" id="btn" (click)=showUndoBtn(i) (click)="productInfo(product.id)">
            <i class="fas fa-info-circle"></i></button>
          <button title="View" id="btn" (click)="sngleProduct(product.id)"> <i class="fas fa-eye-slash"></i></button>
        </h5>
        <div class="modal" [attr.id]="'undoBtn'+i" *ngIf="showBtn===i && showMyContainerInfo" class="editBtn"
          md-raised-button color="primary">
          <div class="modal-content">
            <span>{{product.description}}</span>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

We are going to create a display-tag page.

- display-tag.component.ts
- display-tag.component.html

src/app/display-tag.component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { Router, ActivatedRoute }  from  '@angular/router';
 import  { Product }  from  '../model/Model';
 import  { ProductService }  from  '../service/product.service';
 import  { TagService }  from  '../service/tag.service';

@Component({
  selector: 'app-display-tag',
  templateUrl: './display-tag.component.html',
  styleUrls: ['./display-tag.component.css']
})
export class DisplayTagComponent implements OnInit {
  products: Product[];
  product: Product = {} as Product;
  idTag: number;
  orderFinished = false;
  showBtn = -1;
  showMyContainerInfo = false;  

  constructor(private route: ActivatedRoute, private productService: ProductService,
    private router: Router, private tagService: TagService) {
    this.route.params.subscribe(
      params => {
        this.idTag = this.route.snapshot.params.idTag;
        this.tagService.findProductsForTag(this.idTag).subscribe(products => {
          this.products = products;
        }
        );
      }
    )
  }

  ngOnInit(): void { }

  showUndoBtn(index) {
    this.showBtn = index;
  }

  productInfo(id: number) {
    this.productService.findProductById(id).subscribe(product => {
      this.product = product;
    });
    this.showMyContainerInfo = !this.showMyContainerInfo;
  }

  sngleProduct(id: number) {
    this.router.navigate(['sangle/product', id]);
  }
}

src/app/display-tag.component.html




<div class="container" [hidden]="orderFinished">
  <div class="row">
    <div class="col-lg-4">
      <h2 class="title-page"><i class="fab fa-dropbox"></i> Products <i class="fab fa-dropbox"></i></h2>
    </div>
  </div>
</div>
<hr>
<div class="card-deck" style="padding-bottom: 40px;">
  <div class="col-lg-4 col-md-6 mb-4" *ngFor="let product of products let i = index;">
    <div class="card text-center">
      <div class="card-header" style="background-color: #bdc3c7;">
        <h4>{{product.name}}</h4>
      </div>

      <div class="card-body">
        <a (click)="sngleProduct(product.id)"><img class="card-img-top img-thumbnail"
            style="width: 230px; height: 300px; cursor: pointer;" src={{product.pictureUrl}} alt="image"></a>
        <h5 class="card-title" id="price">Price = {{product.price}}<i class="fas fa-dollar-sign"></i>
          <button title="Information" id="btn" (click)=showUndoBtn(i) (click)="productInfo(product.id)">
            <i class="fas fa-info-circle"></i></button>
<button title="View" id="btn" (click)="sngleProduct(product.id)"> <i class="fas fa-eye-slash"></i></button>
        </h5>
        <div class="modal" [attr.id]="'undoBtn'+i" *ngIf="showBtn===i && showMyContainerInfo" class="editBtn"
          md-raised-button color="primary">
          <div class="modal-content">
            <span>{{product.description}}</span>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

Add the AppRoutingModule

In Angular, the best practice is to load and configure the router in a separate, top-level module that is dedicated to routing and imported by the root AppModule.

By convention, the module class name is AppRoutingModule and it belongs in the app-routing.module.ts in the src/app folder.

app-routing-module.ts

src/app/app-routing.module.ts




 import  { ProfileComponent }  from  './profile/profile.component';
 import  { DashboardComponent}  from  './dashboard/dashboard.component';
 import  { NgModule }  from  '@angular/core';
 import  { CommonModule }  from  '@angular/common';
 import  { Routes, RouterModule  }  from  '@angular/router';
 import  { CategoriesComponent }  from  './admin/categories/categories.component';
 import  { SangleProductComponent }  from  './ecommerce/sangle-product/sangle-product.component';
 import  { DisplayCategoryComponent }  from  './display-category/display-category.component';
 import  { DisplayTagComponent }  from  './display-tag/display-tag.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  {
    path: 'dashboard',
    component: DashboardComponent,
  },
  {
    path: 'sangle/product/:idProduct',
    component: SangleProductComponent
  },
  {
    path: 'puy/product/:name',
    component: SangleProductComponent
  },
  {
    path: 'dsiplay-category/:idCategory',
    component: DisplayCategoryComponent
  },
  {
    path: 'display-tag/:idTag',
    component: DisplayTagComponent
  },
  {
    path: 'profile/:id',
    component: ProfileComponent,
    children: [
      {
        path: 'categories/:idCategory',
        component: CategoriesComponent
      }
    ]
  }
];

@NgModule({
  declarations: [],
  imports: [CommonModule, RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

NgModules and JavaScript modules

app-module.ts

src/app/app-module.ts




 import  { BrowserModule }  from  '@angular/platform-browser';
 import  { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA }  from  '@angular/core';
 import  { HttpClientModule }  from  '@angular/common/http';
 import  { AppComponent }  from  './app.component';
 import  { LoginComponent }  from  './login/login.component';
 import  { FormsModule }  from  '@angular/forms';
 import  { NoopAnimationsModule }  from  '@angular/platform-browser/animations';
 import  { MaterialModule }  from  './material-module';
 import  { ProfileComponent }  from  './profile/profile.component';
 import  { AppRoutingModule }  from  './app-routing.module';
 import  { DashboardComponent }  from  './dashboard/dashboard.component';
 import  { CategoriesComponent }  from  './admin/categories/categories.component';
 import  { AddCategoryComponent }  from  './admin/add-category/add-category.component';
 import  { AddProductComponent }  from  './admin/add-product/add-product.component';
 import  { AddTagComponent }  from  './admin/add-tag/add-tag.component';
 import  { AddTagToProductComponent }  from  './admin/add-tag-to-product/add-tag-to-product.component';
 import  { EcommerceComponent }  from  './ecommerce/ecommerce.component';
 import  { OrdersComponent }  from  './ecommerce/orders/orders.component';
 import  { ProductsComponent }  from  './ecommerce/products/products.component';
 import  { ShoppingCartComponent }  from  './ecommerce/shopping-cart/shopping-cart.component';
 import  { DatePipe }  from  '@angular/common';
 import  { SangleProductComponent }  from  './ecommerce/sangle-product/sangle-product.component';
 import  { UpdateProfileComponent }  from  './update-profile/update-profile.component';
 import  { DisplayCategoryComponent }  from  './display-category/display-category.component';
 import  { DisplayTagComponent }  from  './display-tag/display-tag.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ProfileComponent,
    DashboardComponent,
    CategoriesComponent,
    AddCategoryComponent,
    AddProductComponent,
    AddTagComponent,
    AddTagToProductComponent,
    EcommerceComponent,
    OrdersComponent,
    ProductsComponent,
    ShoppingCartComponent,
    SangleProductComponent,
    UpdateProfileComponent,
    DisplayCategoryComponent,
    DisplayTagComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    NoopAnimationsModule,
    MaterialModule,
    AppRoutingModule
  ],
  providers: [DatePipe],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ]
})
export class AppModule { }

Conclusion

Now we have an overview of Angular 10 + Spring Boot App.

Build an application Ecommerce with Spring boot and Angular part 1

Download Ecommerce Application From Github