AG Dev
5 min readJan 15, 2021

--

TypeOrmModule.forRoot({
type: "postgres",
host: "localhost",
port: 5432,
username: "postgres",
password: "root",
database: "budget-management",
entities: [ExpenseCategory],
synchronize: true
})
export class ExpenseCategoryDto {
readonly id: number;
readonly category: string;
}
@Entity()
export class ExpenseCategory {
@PrimaryGeneratedColumn()
id: number;
@Column()
category: string;
}
@Controller('expense-category')
export class ExpenseCategoryController {
constructor(private expenseCategoryService: ExpenseCategoryService){}@Get()
getExpenseCategories() {
return this.expenseCategoryService.find();
}
@Post()
create(@Body() expenseCategory: ExpenseCategoryDto) {
return this.expenseCategoryService.create(expenseCategory);
}
@Get(':id')
findOne(@Param('id') id: string) {
return this.expenseCategoryService.findOne(id);
}
@Put()
@ApiBody({ type: ExpenseCategoryDto })
update(@Body() expenseCategory: ExpenseCategoryDto) {
return this.expenseCategoryService.update(expenseCategory);
}
@Delete(':id')
remove(@Param('id') id: number) {
this.expenseCategoryService.remove(id);
}
}
@EntityRepository(ExpenseCategory)
export class ExpenseCategoryRepository extends Repository<ExpenseCategory> {
createExpenseCategory = async (expenseCategoryDto: ExpenseCategoryDto) => {
return await this.save(expenseCategoryDto);
};
}
@Injectable()
export class ExpenseCategoryService {
constructor(
@InjectRepository(ExpenseCategoryRepository) private readonly expenseCategoryRepository: ExpenseCategoryRepository){}
find() {
return this.expenseCategoryRepository.find();
}
create(expenseCategory: ExpenseCategoryDto) {
return this.expenseCategoryRepository.insert(expenseCategory);
}
findOne(id: string) {
return this.expenseCategoryRepository.findOne(id);
}
update(expenseCategory: ExpenseCategoryDto) {
return this.expenseCategoryRepository.save(expenseCategory);
}
remove(id: number) {
this.expenseCategoryRepository.delete(id);
}
}
@Module({
imports: [
TypeOrmModule.forFeature(
[ExpenseCategory, ExpenseCategoryRepository]
)],
controllers: [ExpenseCategoryController],
providers: [ExpenseCategoryService]
})
export class ExpenseCategoryModule {}
{
"/api/*": {
"target": "http://localhost:3000",
"secure": false,
"logLevel": "debug",
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
}
}
@Injectable()
export class ExpenseCategoryService {
static URL = '/api/expense-category';
constructor(public http: HttpClient){}getCategories(): Observable<ExpenseCategoryModel[]> {
return this.http.get<ExpenseCategoryModel[]>
ExpenseCategoryService.URL);
}
createCategory(category: ExpenseCategoryModel) {
return this.http.post(ExpenseCategoryService.URL, category);
}
modifyCategory(category: ExpenseCategoryModel): Observable<ExpenseCategoryModel> {
return this.http.put<ExpenseCategoryModel> ExpenseCategoryService.URL, category);
}
deleteCategory(id: number): Observable<any> {
return this.http.delete(ExpenseCategoryService.URL + `/${id}`);
}
}
<button mat-mini-fab (click)="add()">
<mat-icon>add</mat-icon>
</button>
<mat-list *ngIf="expenses$ | async as expenses">
<mat-list-item *ngFor="let expense of expenses">
<div mat-line>{{expense.id}}
<button mat-mini-fab (click)="modify(expense.id)" >
<mat-icon>edit</mat-icon>
</button>
<button mat-mini-fab (click)="delete(expense.id)">
<mat-icon>delete</mat-icon>
</button>
</div>
<div mat-line>{{expense.category}} </div>
</mat-list-item>
</mat-list>
@Component({
selector: 'app-expense-category',
templateUrl: './expense-category.component.html',
styleUrls: ['./expense-category.component.scss']
})
export class ExpenseCategoryComponent implements OnInit {

expenses$: Observable<any[]>;
constructor(private service: ExpenseCategoryService) { }ngOnInit(): void {
this.getCategories();
}
getCategories = () => {
this.expenses$ = this.service.getCategories();
}
add(): void {
const newCategory = {id: null, category: 'New Category'};
this.service.createCategory(newCategory);
}
modify(id: number) {
const updatedCategory = {id, category: 'Modified Category'};
this.service.modifyCategory(updatedCategory);
}
delete(id: number) {
this.service.deleteCategory(id).subscribe(this.getCategories);
}
}

--

--

AG Dev

Senior Front End Software Engineer focused on Angular. Passionate about learning new skills and sharing my knowledge. Blog agdev.tech in progress.

Recommended from Medium

Lists

See more recommendations