src/app/project/project.component.ts
| selector | app-project |
| styleUrls | ./project.component.css |
| templateUrl | ./project.component.html |
Properties |
Methods |
constructor(apiService: ApiService, toastr: ToastrService, spinner: NgxSpinnerService, route: ActivatedRoute, router: Router, formBuilder: FormBuilder)
|
|||||||||||||||||||||
|
Defined in src/app/project/project.component.ts:29
|
|||||||||||||||||||||
|
Parameters :
|
| addColumn |
addColumn()
|
|
Defined in src/app/project/project.component.ts:85
|
|
Returns :
void
|
| addTask |
addTask()
|
|
Defined in src/app/project/project.component.ts:160
|
|
Returns :
void
|
| dropGroup | ||||||
dropGroup(event: CdkDragDrop
|
||||||
|
Defined in src/app/project/project.component.ts:278
|
||||||
|
Parameters :
Returns :
void
|
| dropItem | ||||||
dropItem(event: CdkDragDrop
|
||||||
|
Defined in src/app/project/project.component.ts:282
|
||||||
|
Parameters :
Returns :
void
|
| getConnectedList |
getConnectedList()
|
|
Defined in src/app/project/project.component.ts:293
|
|
Returns :
any[]
|
| getValues |
getValues()
|
|
Defined in src/app/project/project.component.ts:64
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/project/project.component.ts:38
|
|
Returns :
void
|
| passID | ||||||
passID(columnID: number)
|
||||||
|
Defined in src/app/project/project.component.ts:188
|
||||||
|
Parameters :
Returns :
void
|
| ReloadPage |
ReloadPage()
|
|
Defined in src/app/project/project.component.ts:156
|
|
Returns :
void
|
| removeColumn | ||||||
removeColumn(columnID: number)
|
||||||
|
Defined in src/app/project/project.component.ts:192
|
||||||
|
Parameters :
Returns :
void
|
| removeProject |
removeProject()
|
|
Defined in src/app/project/project.component.ts:113
|
|
Returns :
void
|
| removeTask |
removeTask(columnID: number, taskID: number)
|
|
Defined in src/app/project/project.component.ts:264
|
|
Returns :
void
|
| updateColumn | ||||||
updateColumn(columnID: number)
|
||||||
|
Defined in src/app/project/project.component.ts:206
|
||||||
|
Parameters :
Returns :
void
|
| updateProject |
updateProject()
|
|
Defined in src/app/project/project.component.ts:127
|
|
Returns :
void
|
| updateTask |
updateTask(columnID: number, taskID: number)
|
|
Defined in src/app/project/project.component.ts:235
|
|
Returns :
void
|
| columnCounter |
Type : number
|
|
Defined in src/app/project/project.component.ts:23
|
| columnForm |
Type : FormGroup
|
|
Defined in src/app/project/project.component.ts:21
|
| columnName |
Type : string
|
|
Defined in src/app/project/project.component.ts:18
|
| columnNameChange |
Type : string
|
|
Defined in src/app/project/project.component.ts:27
|
| columnNameForm |
Type : FormGroup
|
|
Defined in src/app/project/project.component.ts:26
|
| project |
Type : Project
|
|
Defined in src/app/project/project.component.ts:17
|
| projectForm |
Type : FormGroup
|
|
Defined in src/app/project/project.component.ts:25
|
| projectTitle |
Type : string
|
|
Defined in src/app/project/project.component.ts:24
|
| taskForm |
Type : FormGroup
|
|
Defined in src/app/project/project.component.ts:20
|
| taskName |
Type : string
|
|
Defined in src/app/project/project.component.ts:19
|
| taskNameChange |
Type : string
|
|
Defined in src/app/project/project.component.ts:29
|
| taskNameForm |
Type : FormGroup
|
|
Defined in src/app/project/project.component.ts:28
|
| tempColumnID |
Type : number
|
|
Defined in src/app/project/project.component.ts:22
|
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../services/api.service';
import { ToastrService } from 'ngx-toastr';
import { NgxSpinnerService } from 'ngx-spinner';
import { Project } from '../models/Project';
import { ActivatedRoute, Router } from '@angular/router';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-project',
templateUrl: './project.component.html',
styleUrls: ['./project.component.css']
})
export class ProjectComponent implements OnInit {
project: Project;
columnName: string;
taskName: string;
taskForm: FormGroup;
columnForm: FormGroup;
tempColumnID: number;
columnCounter: number;
projectTitle: string;
projectForm: FormGroup;
columnNameForm: FormGroup;
columnNameChange: string;
taskNameForm: FormGroup;
taskNameChange: string;
constructor(private apiService: ApiService,
private toastr: ToastrService,
private spinner: NgxSpinnerService,
private route: ActivatedRoute,
private router: Router,
private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.route.paramMap.subscribe(() => {
this.getValues();
});
this.taskForm = this.formBuilder.group({
taskName: ['', Validators.required, Validators.maxLength(25)],
});
this.columnForm = this.formBuilder.group({
columnName: ['', Validators.required, Validators.maxLength(10)],
});
this.projectForm = this.formBuilder.group({
projectTitle: ['', Validators.required],
});
this.columnNameForm = this.formBuilder.group({
columnNameChange: ['', Validators.required, Validators.maxLength(10)],
});
this.taskNameForm = this.formBuilder.group({
taskNameChange: ['', Validators.required, Validators.maxLength(25)],
});
}
getValues(){
this.spinner.show();
const projectID: number = +this.route.snapshot.paramMap.get('projectID');
this.apiService.GetProjectByID(projectID).subscribe(
response => {
this.project = response;
this.columnCounter = this.project.columns.length;
this.projectTitle = this.project.title;
this.spinner.hide();
},
error => {
this.toastr.warning(error);
if (error === 'Unknown Error'){
this.router.navigate(['/404']);
this.spinner.hide();
}
this.spinner.hide();
}
);
}
addColumn(){
this.spinner.show();
const projectID: number = +this.route.snapshot.paramMap.get('projectID');
this.columnForm = this.formBuilder.group({
columnName: [this.columnName, Validators.required],
});
if (this.columnForm.invalid) {
this.toastr.error('Form is invalid!');
this.spinner.hide();
}
else if (this.columnForm.controls['columnName'].value === ' ') {
this.toastr.error('Nice try :)');
this.spinner.hide();
}
else {
this.apiService.CreateColumn(this.columnForm.value, projectID).subscribe(response => {
this.toastr.success('Column ' + this.columnName + ' created!');
setTimeout(this.ReloadPage, 1000);
this.spinner.hide();
}, error => {
this.toastr.warning(error);
this.spinner.hide();
});
}
}
removeProject(){
this.spinner.show();
const projectID: number = +this.route.snapshot.paramMap.get('projectID');
this.apiService.DeleteProject(projectID).subscribe(response => {
this.router.navigate(['/projects-list']);
this.toastr.success('Project ' + this.project.title + ' was removed!');
this.spinner.hide();
}, error => {
this.toastr.warning(error);
this.spinner.hide();
});
}
updateProject(){
this.spinner.show();
const projectID: number = +this.route.snapshot.paramMap.get('projectID');
this.projectForm = this.formBuilder.group({
title: [this.projectTitle, Validators.required],
});
if (this.projectForm.invalid) {
this.toastr.error('Form is invalid!');
this.spinner.hide();
}
else if (this.projectForm.controls['title'].value === ' ') {
this.toastr.error('Nice try :)');
this.spinner.hide();
}
else {
this.apiService.UpdateProject(projectID, this.projectForm.value).subscribe(response => {
// tslint:disable-next-line: no-string-literal
this.toastr.success('Your new project name: ' + this.projectForm.controls['title'].value);
setTimeout(this.ReloadPage, 1000);
this.spinner.hide();
}, error => {
this.toastr.warning(error);
this.spinner.hide();
});
}
}
ReloadPage(){
window.location.reload();
}
addTask(){
this.spinner.show();
const projectID: number = +this.route.snapshot.paramMap.get('projectID');
this.taskForm = this.formBuilder.group({
name: [this.taskName, Validators.required],
});
if (this.taskForm.invalid) {
this.toastr.error('Form is invalid!');
this.spinner.hide();
}
else if (this.taskForm.controls['name'].value === ' ') {
this.toastr.error('Nice try :)');
this.spinner.hide();
}
else {
this.apiService.CreateTask(this.taskForm.value, projectID, this.tempColumnID).subscribe(response => {
this.toastr.success('Task ' + this.taskName + ' was created!');
setTimeout(this.ReloadPage, 1000);
this.spinner.hide();
}, error => {
this.toastr.warning(error);
this.spinner.hide();
});
}
}
passID(columnID: number){
this.tempColumnID = columnID;
}
removeColumn(columnID: number) {
this.spinner.show();
const projectID: number = +this.route.snapshot.paramMap.get('projectID');
this.apiService.RemoveColumn(projectID, columnID).subscribe(response => {
this.toastr.success('Column was removed');
setTimeout(this.ReloadPage, 2000);
this.spinner.hide();
}, error => {
this.toastr.warning(error);
this.spinner.hide();
});
}
updateColumn(columnID: number){
this.spinner.show();
const projectID: number = +this.route.snapshot.paramMap.get('projectID');
this.columnNameForm = this.formBuilder.group({
columnName: [this.columnNameChange, Validators.required],
});
if (this.columnNameForm.invalid) {
this.toastr.error('Form is invalid!');
this.spinner.hide();
}
else if (this.columnNameForm.controls['columnName'].value === ' ') {
this.toastr.error('Nice try :)');
this.spinner.hide();
}
else {
this.apiService.UpdateColumn(projectID, columnID, this.columnNameForm.value).subscribe(response => {
// tslint:disable-next-line: no-string-literal
this.toastr.success('Your new column name: ' + this.columnNameForm.controls['columnName'].value);
setTimeout(this.ReloadPage, 1000);
this.spinner.hide();
}, error => {
this.toastr.warning(error);
this.spinner.hide();
});
}
}
updateTask(columnID: number, taskID: number){
this.spinner.show();
const projectID: number = +this.route.snapshot.paramMap.get('projectID');
this.taskNameForm = this.formBuilder.group({
name: [this.taskNameChange, Validators.required],
});
if (this.taskNameForm.invalid) {
this.toastr.error('Form is invalid!');
this.spinner.hide();
}
else if (this.taskNameForm.controls['name'].value === ' ') {
this.toastr.error('Nice try :)');
this.spinner.hide();
}
else {
this.apiService.UpdateTask(projectID, columnID, taskID, this.taskNameForm.value).subscribe(response => {
// tslint:disable-next-line: no-string-literal
this.toastr.success('New task name: ' + this.taskNameForm.controls['name'].value);
setTimeout(this.ReloadPage, 1000);
this.spinner.hide();
}, error => {
this.toastr.warning(error);
this.spinner.hide();
});
}
}
removeTask(columnID: number, taskID: number){
this.spinner.show();
const projectID: number = +this.route.snapshot.paramMap.get('projectID');
this.apiService.RemoveTask(projectID, columnID, taskID).subscribe(response => {
this.toastr.success('Task was removed');
setTimeout(this.ReloadPage, 1000);
this.spinner.hide();
}, error => {
this.toastr.warning(error);
this.spinner.hide();
});
}
dropGroup(event: CdkDragDrop<string[]>) {
moveItemInArray(this.project.columns, event.previousIndex, event.currentIndex);
}
dropItem(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}
getConnectedList(): any[] {
return this.project.columns.map(x => `${x.columnID}`);
}
}
<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>{{ project?.title }}</span
>
<button
class="btn btn-yellow btn-icon"
type="button"
data-toggle="modal"
data-target="#editProjectModal"
>
<i class="fas fa-pen"></i>
</button>
<!-- Modal -->
<div
class="modal fade"
id="editProjectModal"
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">
Edit your project title
</h5>
</div>
<div class="modal-body">
<form [formGroup]="projectForm" (ngSubmit)="updateProject()">
<div class="form-group">
<label for="exampleFormControlInput1">Title</label>
<input
class="form-control"
[(ngModel)]="projectTitle"
type="text"
[ngModelOptions]="{ standalone: true }"
required
/>
</div>
<div class="modal-footer">
<button
class="btn btn-secondary"
type="button"
data-dismiss="modal"
>
Close
</button>
<button class="btn btn-primary" type="submit">
Save changes
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<button
class="btn btn-red btn-icon"
type="button"
(click)="removeProject()"
>
<i class="fas fa-trash-alt"></i>
</button>
</h1>
<div class="page-header-subtitle">Your project.</div>
</div>
</div>
</div>
<div class="container-fluid mt-n10">
<div class="row">
<div
cdkDropList
[cdkDropListData]="project?.columns"
(cdkDropListDropped)="dropGroup($event)"
>
<div
class="example-container"
cdkDropListGroup
*ngFor="let item of project?.columns; let i = index"
cdkDrag
[cdkDragData]="item"
>
<div class="card-deck">
<div class="card mb-4">
<div class="card-header" style="justify-content: center;">
{{ item.columnName }}
<button
class="btn btn-yellow btn-icon rounded-0"
type="button"
data-toggle="modal"
data-target="#editColumnModal"
>
<i class="fas fa-pen"></i>
</button>
<div
class="modal fade"
id="editColumnModal"
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">
Edit your column name
</h5>
</div>
<div class="modal-body">
<form
[formGroup]="columnNameForm"
(ngSubmit)="updateColumn(item.columnID)"
>
<div class="form-group">
<label for="exampleFormControlInput1"
>Column name</label
>
<input
class="form-control"
[(ngModel)]="columnNameChange"
maxlength="10"
type="text"
[ngModelOptions]="{ standalone: true }"
required
/>
</div>
<div class="modal-footer">
<button
class="btn btn-secondary"
type="button"
data-dismiss="modal"
>
Close
</button>
<button class="btn btn-primary" type="submit">
Save changes
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<button
*ngIf="columnCounter > 1"
class="btn btn-red btn-icon rounded-0"
style="margin-top: 5px; margin-bottom: 5px; margin-left: 5px;"
type="button"
(click)="removeColumn(item.columnID)"
>
<i class="fas fa-trash-alt"></i>
</button>
</div>
<div
cdkDropList
class="example-list"
id="{{ item.columnID }}"
[cdkDropListData]="item.tasks"
(cdkDropListDropped)="dropItem($event)"
[cdkDropListConnectedTo]="getConnectedList()"
>
<div class="card-body">
<div
class="example-box"
cdkDrag
[cdkDragData]="task"
*ngFor="let task of item.tasks"
style="justify-content: center;"
>
{{ task.name }}
<button
class="btn btn-yellow btn-icon rounded-0"
type="button"
data-toggle="modal"
data-target="#editTaskModal"
>
<i class="fas fa-pen"></i>
</button>
<div
class="modal fade"
id="editTaskModal"
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">
Edit your task description
</h5>
</div>
<div class="modal-body">
<form
[formGroup]="taskNameForm"
(ngSubmit)="updateTask(item.columnID, task.taskID)"
>
<div class="form-group">
<label for="exampleFormControlInput1"
>Task description</label
>
<input
class="form-control"
[(ngModel)]="taskNameChange"
maxlength="25"
type="text"
[ngModelOptions]="{ standalone: true }"
required
/>
</div>
<div class="modal-footer">
<button
class="btn btn-secondary"
type="button"
data-dismiss="modal"
>
Close
</button>
<button class="btn btn-primary" type="submit">
Save changes
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<button
class="btn btn-red btn-icon rounded-0"
style="
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
"
type="button"
(click)="removeTask(item.columnID, task.taskID)"
>
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
<button
class="btn btn-secondary btn-icon-xl rounded-0"
style="width: 100%;"
type="button"
data-toggle="modal"
data-target="#taskModal"
(click)="passID(item.columnID)"
>
<i class="fas fa-plus-circle"></i> Add task
</button>
<!-- Modal -->
<div
class="modal fade"
id="taskModal"
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 new task
</h5>
</div>
<div class="modal-body">
<form [formGroup]="taskForm" (ngSubmit)="addTask()">
<div class="form-group">
<label for="exampleFormControlInput1"
>Task description</label
>
<input
class="form-control"
[(ngModel)]="taskName"
maxlength="25"
type="text"
[ngModelOptions]="{ standalone: true }"
required
/>
</div>
<div class="modal-footer">
<button
class="btn btn-secondary"
type="button"
data-dismiss="modal"
>
Close
</button>
<button class="btn btn-primary" type="submit">
Save changes
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button
*ngIf="columnCounter < 6"
class="btn btn-green btn-icon"
type="button"
data-toggle="modal"
data-target="#columnModal"
>
<i class="fas fa-plus-circle"></i>
</button>
<!-- Modal -->
<div
class="modal fade"
id="columnModal"
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 new column
</h5>
</div>
<div class="modal-body">
<form [formGroup]="columnForm" (ngSubmit)="addColumn()">
<div class="form-group">
<label for="exampleFormControlInput1">Column name</label>
<input
class="form-control"
[(ngModel)]="columnName"
maxlength="10"
type="text"
[ngModelOptions]="{ standalone: true }"
required
/>
</div>
<div class="modal-footer">
<button
class="btn btn-secondary"
type="button"
data-dismiss="modal"
>
Close
</button>
<button class="btn btn-primary" type="submit">
Save changes
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: relative;">
<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>
./project.component.css
.example-container {
width: auto;
max-width: 100%;
margin: 0 25px 25px 0;
display: inline-block;
vertical-align: top;
cursor: move;
}
.example-list {
min-height: auto;
background: white;
overflow: hidden;
display: block;
}
.example-box {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
cursor: move;
background: white;
font-size: 14px;
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-box:last-child {
border: none;
}
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}