File
Implements
Constructor
constructor(apiService: ApiService, toastr: ToastrService, spinner: NgxSpinnerService, formBuilder: FormBuilder)
|
|
|
Parameters :
| Name |
Type |
Optional |
| apiService |
ApiService
|
No
|
| toastr |
ToastrService
|
No
|
| spinner |
NgxSpinnerService
|
No
|
| formBuilder |
FormBuilder
|
No
|
|
Methods
|
createProject
|
createProject()
|
|
|
|
|
|
projectsArray
|
Type : Project[]
|
Default value : []
|
|
|
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../services/api.service';
import { NgxSpinnerService } from 'ngx-spinner';
import { ToastrService } from 'ngx-toastr';
import { Project } from '../models/Project';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { User } from '../models/user';
import { first } from 'rxjs/operators';
@Component({
selector: 'app-projects-list',
templateUrl: './projects-list.component.html',
styleUrls: ['./projects-list.component.css']
})
export class ProjectsListComponent implements OnInit {
currentUser: User;
projectForm: FormGroup;
title: string;
defaultProject: Project;
constructor(private apiService: ApiService, private toastr: ToastrService, private spinner: NgxSpinnerService, private formBuilder: FormBuilder) { }
projectsArray: Project[] = [];
ngOnInit(): void {
this.spinner.show();
this.apiService.GetAllProjects().subscribe(
response => {
this.projectsArray = response;
this.toastr.success('Enjoy!');
this.spinner.hide();
}, error => {
this.toastr.warning(error);
this.spinner.hide();
}
);
this.projectForm = this.formBuilder.group({
title: ['', Validators.required],
});
}
createProject() {
this.spinner.show();
this.projectForm = this.formBuilder.group({
title: [this.title, Validators.required],
});
if (this.projectForm.invalid) {
this.toastr.error('Form is invalid!');
this.spinner.hide();
}
else {
this.apiService.CreateProject(this.projectForm.value)
.pipe(first())
.subscribe(
data => {
this.toastr.success('You created ' + this.title + ' Project!');
this.spinner.hide();
let closeButton = document.getElementById('closeButton');
closeButton.click();
this.ngOnInit()
},
error => {
this.toastr.warning(error);
this.spinner.hide();
});
}
}
}
<div class="page-header pb-10 page-header-dark bg-primary">
<div class="container-fluid">
<div class="page-header-content">
<h1 class="page-header-title">
<div class="page-header-icon"><i class="fas fa-tasks"></i></div>
<span>Projects</span>
<button class="btn btn-green ml-5" style="text-align: right; justify-content: right;" type="button" data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-plus-circle"></i> Add project</button>
</h1>
<div class="page-header-subtitle">All available projects.</div>
</div>
</div>
</div>
<ngx-spinner bdOpacity=0.5 bdColor="rgba(51,51,51,0.85)" size="medium" color="#fff" type="line-scale" [fullScreen]="true">
<p style="color: white"> Openning connection to our database... </p>
</ngx-spinner>
<div class="container-fluid mt-n10">
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Add your project</h5>
</div>
<div class="modal-body">
<form [formGroup]="projectForm" (ngSubmit)="createProject()">
<div class="form-group">
<label for="exampleFormControlInput1">Project name</label>
<input class="form-control" [(ngModel)]='title' type="text" [ngModelOptions]="{standalone: true}" required>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" id="closeButton" data-dismiss="modal">Close</button>
<button class="btn btn-primary" type="submit">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3" *ngFor="let project of projectsArray">
<div class="card-deck">
<div class="card mb-4" >
<div class="card-body">
<h5 class="card-title text-primary">
<!-- <a [routerLink]="['/project', project.projectID]">{{ project.title }}</a> -->
<a>{{ project.title }}</a>
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
Legend
Html element with directive