diff --git a/angular.json b/angular.json index bfc0c1b..226ed4c 100644 --- a/angular.json +++ b/angular.json @@ -26,7 +26,8 @@ ], "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", - "src/styles.css" + "src/styles.css", + "src/assets/scss/black-dashboard.scss" ], "scripts": [] }, diff --git a/package.json b/package.json index 100dd04..598596f 100644 --- a/package.json +++ b/package.json @@ -46,5 +46,13 @@ "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~3.8.3" - } + }, + "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.7.", + "main": "karma.conf.js", + "repository": { + "type": "git", + "url": "https://git.informatik.fh-nuernberg.de/scrum-taskboard/frontend.git" + }, + "author": "", + "license": "ISC" } diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 8af9687..3f2c2cc 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,20 +1,21 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; - -import { TaskListComponent } from './task-list/task-list.component'; -import { UserstoryListComponent } from './userstory-list/userstory-list.component'; import { DashboardComponent } from './dashboard/dashboard.component'; +import { UserstoryTableComponent } from './userstory-table/userstory-table.component'; +import { TaskTableComponent } from './task-table/task-table.component'; +import { SprintTableComponent } from './sprint-table/sprint-table.component'; const routes: Routes = [ - { path: 'tasks', component: TaskListComponent }, - { path: 'userstories', component: UserstoryListComponent }, + { path: 'tasks', component: TaskTableComponent }, + { path: 'userstories', component: UserstoryTableComponent }, { path: 'dashboard', component: DashboardComponent }, + { path: 'sprints', component: SprintTableComponent }, { path: '', redirectTo: '/tasks', pathMatch: 'full' }, ]; @NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] + imports: [ RouterModule.forRoot(routes) ], + exports: [ RouterModule ] }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/src/app/app.component.html b/src/app/app.component.html index 90c6b64..2e44c1d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,39 @@ - \ No newline at end of file + +
+
+ + + + +
+
\ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e9f6ffa..6efd665 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -5,4 +5,42 @@ import { Component } from '@angular/core'; templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) -export class AppComponent {} +export class AppComponent { + /* + changeSidebarColor(color){ + var sidebar = document.getElementsByClassName('sidebar')[0]; + var mainPanel = document.getElementsByClassName('main-panel')[0]; + + this.sidebarColor = color; + + if(sidebar != undefined){ + sidebar.setAttribute('data',color); + } + if(mainPanel != undefined){ + mainPanel.setAttribute('data',color); + } + } + */ + changeDashboardColor(color){ + var body = document.getElementsByTagName('body')[0]; + if (body && color === 'white-content') { + body.classList.add(color); + } + else if(body.classList.contains('white-content')) { + body.classList.remove('white-content'); + } + } + // function that adds color white/transparent to the navbar on resize (this is for the collapse) + /* + updateColor = () => { + var navbar = document.getElementsByClassName('navbar')[0]; + if (window.innerWidth < 993 && !this.isCollapsed) { + navbar.classList.add('bg-white'); + navbar.classList.remove('navbar-transparent'); + } else { + navbar.classList.remove('bg-white'); + navbar.classList.add('navbar-transparent'); + } + }; + */ +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index bbf75fb..3109692 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,21 +7,26 @@ import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BackendService } from './services/backend.service'; -import { TaskListComponent } from './task-list/task-list.component'; import { TaskFormComponent } from './task-form/task-form.component'; -import { UserstoryListComponent } from './userstory-list/userstory-list.component'; import { UserstoryFormComponent } from './userstory-form/userstory-form.component'; -import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { SprintFormComponent } from './sprint-form/sprint-form.component'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { UserstoryTableComponent } from './userstory-table/userstory-table.component'; +import { TaskTableComponent } from './task-table/task-table.component'; +import { SprintTableComponent } from './sprint-table/sprint-table.component'; import { DashboardComponent } from './dashboard/dashboard.component'; @NgModule({ declarations: [ AppComponent, - TaskListComponent, + TaskTableComponent, TaskFormComponent, - UserstoryListComponent, + UserstoryTableComponent, UserstoryFormComponent, - DashboardComponent + UserstoryTableComponent, + SprintFormComponent, + SprintTableComponent, + DashboardComponent, ], imports: [ BrowserModule, diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index e295541..470e6f3 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -11,8 +11,8 @@ export class DashboardComponent implements OnInit { /** * Returns the status that are used by at least one userstory. */ - private get usedStatus(): ScrumStatus[] { - return this.status.filter(s => this.userstories.find(us => us.status === s.id) !== undefined); + public get usedStatus(): ScrumStatus[] { + return this.status.filter(s => this.userstories.find(us => us.statusid === s.id) !== undefined); } private status: ScrumStatus[]; @@ -47,11 +47,11 @@ export class DashboardComponent implements OnInit { {id: 1, title: "Done", description:""}, ]; this.userstories = [ - {status: 0, title:""}, - {status: 0, title:""}, - {status: 0, title:""}, - {status: 1, title:""}, - {status: 1, title:""}, + {statusid: 0, title:""}, + {statusid: 0, title:""}, + {statusid: 0, title:""}, + {statusid: 1, title:""}, + {statusid: 1, title:""}, ]; this.sprints = [ {description:"", title:"", project: 0, startDate: new Date(2020, 5, 22), endDate: new Date(2020, 5, 28)}, @@ -101,7 +101,7 @@ export class DashboardComponent implements OnInit { } public getNumberOfUserstoriesByStatus(status: ScrumStatus): number { - return this.userstories.filter(us => us.status === status.id).length; + return this.userstories.filter(us => us.statusid === status.id).length; } public getRemainingDaysInSprint(): number { diff --git a/src/app/services/backend.service.ts b/src/app/services/backend.service.ts index 239f82a..ed9c838 100644 --- a/src/app/services/backend.service.ts +++ b/src/app/services/backend.service.ts @@ -9,7 +9,7 @@ export class BackendService { constructor(private httpClient: HttpClient) {} - + // Tasks public getTasks(): Observable> { const url = `${environment.apiUrl}/tasks`; @@ -117,7 +117,7 @@ export class BackendService { return this.httpClient.delete(url, { observe: 'response' }); } - + // Status public getAllStatus(): Observable> { const url = `${environment.apiUrl}/status`; @@ -143,8 +143,8 @@ export class BackendService { const url = `${environment.apiUrl}/status/${status.id}`; return this.httpClient.delete(url, { observe: 'response' }); } - - + + // Users public getUsers(): Observable> { const url = `${environment.apiUrl}/users`; @@ -171,7 +171,7 @@ export class BackendService { return this.httpClient.delete(url, { observe: 'response' }); } - + // Projects public getProjects(): Observable> { const url = `${environment.apiUrl}/projects`; @@ -209,12 +209,12 @@ export interface ScrumTask { id?: number; title: string; content?: string; - status?: number; - category?: number; - assignedto?: number; - sprint?: number; - project?: number; - userstory?: number; + statusid?: number; + categoryid?: number; + assignedtoid?: number; + sprintid?: number; + projectid?: number; + userstoryid?: number; priority?: Priority; } @@ -223,16 +223,16 @@ export interface ScrumUserstory { title: string; content?: string; priority?: Priority; - status?: number; - category?: number; - createdby?: number; - project?: number; + statusid?: number; + categoryid?: number; + createdbyid?: number; + projectid?: number; } export interface ScrumSprint{ id?: number; title: string; - description: string; + description?: string; startDate: Date; endDate: Date; project: number; @@ -262,4 +262,4 @@ export interface ScrumProject { id?: number; title: string; isprivate: boolean; -} \ No newline at end of file +} diff --git a/src/app/services/sorting.service.ts b/src/app/services/sorting.service.ts new file mode 100644 index 0000000..59b90e6 --- /dev/null +++ b/src/app/services/sorting.service.ts @@ -0,0 +1,24 @@ +import {Priority} from './backend.service'; + +export function sortByNumberAscending(items: T[], key: (T) => number) { + return items.sort((a, b) => key(a) - key(b)); +} + +export function sortByStringAscending(items: T[], key: (T) => string) { + return items.sort((a, b) => key(a).localeCompare(key(b))); +} + +export function sortByDateAscending(items: T[], key: (T) => Date) { + return items.sort((a, b) => key(b) - key(a)); +} + +export function getNumberForPriority(priority: Priority): number { + switch (priority) { + case Priority.High: + return 2; + case Priority.Medium: + return 1; + case Priority.Low: + return 0; + } +}; diff --git a/src/app/services/table-component.base.ts b/src/app/services/table-component.base.ts new file mode 100644 index 0000000..6206c42 --- /dev/null +++ b/src/app/services/table-component.base.ts @@ -0,0 +1,51 @@ +import {sortByNumberAscending, sortByStringAscending, sortByDateAscending} from './sorting.service'; +import {Priority} from './backend.service'; + +export abstract class TableComponentBase { + public sortBy: string; + public sortDescending = false; + public items: T[] = []; + + protected doNumericSort(by: string, key: (item: T) => number) { + if (this.sortBy === by) { + this.sortDescending = !this.sortDescending; + } else { + this.sortBy = by; + } + + this.items = sortByNumberAscending(this.items, key); + if (this.sortDescending) { + this.items = this.items.reverse(); + } + } + + protected doStringSort(by: string, key: (item: T) => string) { + if (this.sortBy === by) { + this.sortDescending = !this.sortDescending; + } else { + this.sortBy = by; + } + + this.items = sortByStringAscending(this.items, key); + if (this.sortDescending) { + this.items = this.items.reverse(); + } + } + + protected doDateSort(by: string, key: (item: T) => Date) { + if (this.sortBy === by) { + this.sortDescending = !this.sortDescending; + } else { + this.sortBy = by; + } + + this.items = sortByDateAscending(this.items, key); + if (this.sortDescending) { + this.items = this.items.reverse(); + } + } + + public getAllPriorities(): string[] { + return Object.values(Priority); + } +} diff --git a/src/app/sprint-form/sprint-form.component.css b/src/app/sprint-form/sprint-form.component.css new file mode 100644 index 0000000..717de4c --- /dev/null +++ b/src/app/sprint-form/sprint-form.component.css @@ -0,0 +1,4 @@ +.modal-footer { + border-top: 0px solid; + padding-top: 5%; +} \ No newline at end of file diff --git a/src/app/sprint-form/sprint-form.component.html b/src/app/sprint-form/sprint-form.component.html new file mode 100644 index 0000000..d8b7ecd --- /dev/null +++ b/src/app/sprint-form/sprint-form.component.html @@ -0,0 +1,33 @@ +
+
+

Neuen Sprint anlegen

+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+
+
+
\ No newline at end of file diff --git a/src/app/sprint-form/sprint-form.component.ts b/src/app/sprint-form/sprint-form.component.ts new file mode 100644 index 0000000..f19c1bb --- /dev/null +++ b/src/app/sprint-form/sprint-form.component.ts @@ -0,0 +1,62 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; +import { + BackendService, + ScrumTask, + Priority, + ScrumStatus, + ScrumCategory, + ScrumUser, + ScrumProject, + ScrumUserstory, + ScrumSprint +} from '../services/backend.service'; +import { Observable } from 'rxjs'; +import { HttpResponse } from '@angular/common/http'; + +@Component({ + selector: 'app-task-form', + templateUrl: './sprint-form.component.html', + styleUrls: ['./sprint-form.component.css'], +}) +export class SprintFormComponent implements OnInit { + @Input() public sprint: ScrumSprint; + public editing: Boolean; + public sprintid: string; + + constructor( + private backendService: BackendService, + private activeModalService: NgbActiveModal + ) { } + + ngOnInit(): void { + if (this.sprint === null || this.sprint === undefined) { + this.sprint = { title: '', startDate: new Date(), endDate: new Date(), project: 0 }; //project id: static counter? + this.editing = false; + } else { + this.editing = true; + } + document.getElementById('titleField').focus(); + } + + onSubmit() { + if (this.editing) { + this.backendService.putSprint(this.sprint).subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); + } + }); + } else { + this.backendService.postSprint(this.sprint).subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); + } + }); + } + this.activeModalService.close(this.sprint); + } + + onClose() { + this.activeModalService.dismiss(this.sprint); + } +} diff --git a/src/app/sprint-table/sprint-table.component.css b/src/app/sprint-table/sprint-table.component.css new file mode 100644 index 0000000..5b74f7f --- /dev/null +++ b/src/app/sprint-table/sprint-table.component.css @@ -0,0 +1,8 @@ +table { + table-layout: fixed; + } + + th.sortable:hover { + text-decoration: underline; + } + \ No newline at end of file diff --git a/src/app/sprint-table/sprint-table.component.html b/src/app/sprint-table/sprint-table.component.html new file mode 100644 index 0000000..e824be9 --- /dev/null +++ b/src/app/sprint-table/sprint-table.component.html @@ -0,0 +1,62 @@ +
+ +

+ Sprints +

+ + + + + + + + + + + + + + + + + + + + + + + +
+ ID + + + + + + Titel + + + + + + Start + + + + + + End + + + + +
{{sprint.id}}{{sprint.title}}{{sprint.startDate | date:'dd.MM.yyyy'}}{{sprint.endDate | date:'dd.MM.yyyy'}} + + +
+
+ \ No newline at end of file diff --git a/src/app/sprint-table/sprint-table.component.ts b/src/app/sprint-table/sprint-table.component.ts new file mode 100644 index 0000000..fc53bfc --- /dev/null +++ b/src/app/sprint-table/sprint-table.component.ts @@ -0,0 +1,87 @@ +import {Component} from '@angular/core'; +import {BackendService, ScrumSprint} from '../services/backend.service'; +import {TableComponentBase} from '../services/table-component.base'; +import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; +import {ActivatedRoute, ParamMap, Router} from '@angular/router'; +import { SprintFormComponent } from '../sprint-form/sprint-form.component'; + +@Component({ + selector: 'app-sprint', + templateUrl: './sprint-table.component.html', + styleUrls: ['./sprint-table.component.css'] +}) +export class SprintTableComponent extends TableComponentBase { + public filterSprintId: number | null = null; + public highlightId: number; + + public get filteredItems() { + return this.items.filter(sprint => + (this.filterSprintId === null || sprint.id === this.filterSprintId) + ); + } + + constructor( + private backendService: BackendService, private modalService: NgbModal, + private route: ActivatedRoute, private router: Router + ) { + super(); + + this.applyFilterParameters(route.snapshot.paramMap); + route.paramMap.subscribe(map => this.applyFilterParameters(map)); + + backendService.getSprints().subscribe(response => { + if (response.status > 399) { + alert('Fehler'); + } else { + this.items.push(...response.body); + } + }); + } + + private applyFilterParameters(params: ParamMap) { + if (params.has('id')) { + this.highlightId = parseInt(params.get('id')); + } + } + + public deleteSprint(sprint: ScrumSprint) { + this.backendService.deleteSprint(sprint).subscribe(response => { + if (response.status > 399) { + alert('Fehler'); + } + }); + const index = this.items.indexOf(sprint); + if (index !== -1) { + this.items.splice(index, 1); + } + } + + public openSprintForm(editSprint?: ScrumSprint) { + const modalRef = this.modalService.open(SprintFormComponent, { + backdrop: 'static', + keyboard: true, + }); + if (editSprint === null) { + modalRef.result.then(result => { + this.items.push(result); + }); + } + modalRef.componentInstance.sprint = editSprint; + } + + sortById() { + this.doNumericSort('id', sprint => sprint.id); + } + + sortByTitle() { + this.doStringSort('title', sprint => sprint.title); + } + + sortByStartDate() { + this.doDateSort('startDate', sprint => sprint.startDate); + } + + sortByEndDate() { + this.doDateSort('endDate', sprint => sprint.endDate); + } +} diff --git a/src/app/task-form/task-form.component.css b/src/app/task-form/task-form.component.css index e69de29..2b8a6fe 100644 --- a/src/app/task-form/task-form.component.css +++ b/src/app/task-form/task-form.component.css @@ -0,0 +1,13 @@ +.modal-footer { + border-top: 0px solid; + padding-top: 5%; +} +.modal-content { + width: 1040px; + right: 55%; + border: 0px; +} + +.modal { + margin: 0 auto; +} diff --git a/src/app/task-form/task-form.component.html b/src/app/task-form/task-form.component.html index b0a5f4e..5aa9229 100644 --- a/src/app/task-form/task-form.component.html +++ b/src/app/task-form/task-form.component.html @@ -1,30 +1,68 @@
-
-
-
-
- - +
+ + +
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+ + +
+
+
+ +
+ +
- -
- - -
- -
- - -
- - - - + +
\ No newline at end of file diff --git a/src/app/task-form/task-form.component.ts b/src/app/task-form/task-form.component.ts index 154e22f..4c4ca34 100644 --- a/src/app/task-form/task-form.component.ts +++ b/src/app/task-form/task-form.component.ts @@ -1,50 +1,72 @@ import { Component, OnInit, Input } from '@angular/core'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; -import { BackendService, ScrumTask, Priority, ScrumStatus, ScrumCategory, ScrumUser, ScrumProject } from '../services/backend.service'; +import { + BackendService, + ScrumTask, + Priority, + ScrumStatus, + ScrumCategory, + ScrumUser, + ScrumProject, + ScrumUserstory, +} from '../services/backend.service'; +import { Observable } from 'rxjs'; +import { HttpResponse } from '@angular/common/http'; @Component({ - selector: 'app-task-form', - templateUrl: './task-form.component.html', - styleUrls: ['./task-form.component.css'] + selector: 'app-task-form', + templateUrl: './task-form.component.html', + styleUrls: ['./task-form.component.css'], }) export class TaskFormComponent implements OnInit { + @Input() public task: ScrumTask; + public editing: Boolean; + public userstoryId: string; - @Input() - public task: ScrumTask; - public editing: Boolean; + constructor( + private backendService: BackendService, + private activeModalService: NgbActiveModal + ) {} - constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) { } - - ngOnInit(): void { - if (this.task === null || this.task === undefined) { - this.task = {title: ""}; - this.editing = false; - } - else - { - this.editing = true; - } + ngOnInit(): void { + if (this.task === null || this.task === undefined) { + this.task = { title: '' }; + this.editing = false; + } else { + this.editing = true; } + document.getElementById('titleField').focus(); + this.getRelatedStory(); + } - onSubmit() { - if (this.editing) { - this.backendService.putTask(this.task).subscribe(response => { - if (response.status > 399) { - alert('Fehler'); - } - }); + onSubmit() { + if (this.editing) { + this.backendService.putTask(this.task).subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); } - else { - this.backendService.postTask(this.task).subscribe(response => { - if (response.status > 399) { - alert('Fehler'); - } - }); + }); + } else { + this.backendService.postTask(this.task).subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); } - this.activeModalService.close(this.task); + }); } + this.activeModalService.close(this.task); + } - onClose(){ - this.activeModalService.dismiss(this.task); - } + onClose() { + this.activeModalService.dismiss(this.task); + } + + getRelatedStory() { + this.backendService.getUserstory(2).subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); + } else { + this.userstoryId = response.body.title; + } + }); + } } diff --git a/src/app/task-list/task-list.component.css b/src/app/task-list/task-list.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/task-list/task-list.component.html b/src/app/task-list/task-list.component.html deleted file mode 100644 index 1f501a3..0000000 --- a/src/app/task-list/task-list.component.html +++ /dev/null @@ -1,14 +0,0 @@ - - -
    -
  • - Titel: {{task.title}} -
    - Inhalt: {{task.content}} -
    - Priotität: {{task.priority}} -
    - - -
    • -
diff --git a/src/app/task-list/task-list.component.ts b/src/app/task-list/task-list.component.ts deleted file mode 100644 index b8daf28..0000000 --- a/src/app/task-list/task-list.component.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; -import { BackendService, ScrumTask } from '../services/backend.service'; -import { TaskFormComponent } from '../task-form/task-form.component'; - -@Component({ - selector: 'app-task-list', - templateUrl: './task-list.component.html', - styleUrls: ['./task-list.component.css'] -}) -export class TaskListComponent implements OnInit { - - public tasks: ScrumTask[] = []; - - constructor(private backendService: BackendService, private modalService: NgbModal) { - backendService.getTasks().subscribe(response => { - if (response.status > 399) { - alert('Fehler'); - } - else { - this.tasks.push(...response.body); - } - }); - } - - ngOnInit(): void { - } - - public deleteTask(task: ScrumTask) { - this.backendService.deleteTask(task).subscribe(response => { - if (response.status > 399) { - alert('Fehler'); - } - }); - const index = this.tasks.indexOf(task); - if (index !== -1) { - this.tasks.splice(index, 1); - } - } - - public openTaskForm(editTask: ScrumTask) { - const modalRef = this.modalService.open(TaskFormComponent, { - backdrop: 'static', - keyboard: true, - }); - if (editTask === null) { - modalRef.result.then(result => { - this.tasks.push(result); - }); - } - modalRef.componentInstance.task = editTask; - } - -} diff --git a/src/app/task-table/task-table.component.css b/src/app/task-table/task-table.component.css new file mode 100644 index 0000000..a7c065c --- /dev/null +++ b/src/app/task-table/task-table.component.css @@ -0,0 +1,7 @@ +table { + table-layout: fixed; +} + +th.sortable:hover { + text-decoration: underline; +} diff --git a/src/app/task-table/task-table.component.html b/src/app/task-table/task-table.component.html new file mode 100644 index 0000000..68019f9 --- /dev/null +++ b/src/app/task-table/task-table.component.html @@ -0,0 +1,122 @@ +
+ +

+ + Userstory #{{filterUserstoryId}} + > + + Tasks +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ID + + + + + + Titel + + + + + + Userstory + + + + + + Status + + + + + +
+
+ Priotität +
+ + +
+
+
+ + + + + +
+
+ 		+ Assigned To + + + + + + Category + + + + +
{{task.id}}{{task.title}} + + US #{{task.userstoryid}} + + + + {{getStatusTitleById(task.statusid)}} + + {{task.priority}} + + {{getUserNameById(task.assignedtoid)}} + + + + {{getCategoryTitleById(task.categoryid)}} + + + + +
+
+ diff --git a/src/app/task-table/task-table.component.ts b/src/app/task-table/task-table.component.ts new file mode 100644 index 0000000..6e850ad --- /dev/null +++ b/src/app/task-table/task-table.component.ts @@ -0,0 +1,169 @@ +import { Component } from '@angular/core'; +import { + BackendService, + ScrumTask, + ScrumStatus, + ScrumUser, + ScrumCategory, +} from '../services/backend.service'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { TaskFormComponent } from '../task-form/task-form.component'; +import { TableComponentBase } from '../services/table-component.base'; +import { ActivatedRoute, ParamMap, Router } from '@angular/router'; +import { getNumberForPriority } from '../services/sorting.service'; + +@Component({ + selector: 'app-userstory-table', + templateUrl: './task-table.component.html', + styleUrls: ['./task-table.component.css'], +}) +export class TaskTableComponent extends TableComponentBase { + public filterUserstoryId: number | null = null; + public filterPriority: string | null = null; + public highlightId: number; + public status: ScrumStatus[] = []; + public users: ScrumUser[] = []; + public categories: ScrumCategory[] = []; + + public get filteredItems() { + return this.items.filter( + (task) => + (this.filterUserstoryId === null || + task.userstoryid === this.filterUserstoryId) && + (this.filterPriority === null || task.priority === this.filterPriority) + ); + } + + constructor( + private backendService: BackendService, + private modalService: NgbModal, + private route: ActivatedRoute, + private router: Router + ) { + super(); + + this.applyFilterParameters(route.snapshot.paramMap); + route.paramMap.subscribe((map) => this.applyFilterParameters(map)); + + backendService.getTasks().subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); + } else { + this.items.push(...response.body); + } + }); + backendService.getAllStatus().subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); + } else { + this.status.push(...response.body); + } + }); + backendService.getUsers().subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); + } else { + this.users.push(...response.body); + } + }); + backendService.getCategories().subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); + } else { + this.categories.push(...response.body); + } + }); + } + + private applyFilterParameters(params: ParamMap) { + if (params.has('userstoryId')) { + this.filterUserstoryId = parseInt(params.get('userstoryId')); + } else { + this.filterUserstoryId = null; + } + if (params.has('id')) { + this.highlightId = parseInt(params.get('id')); + } + } + + public deleteTask(task: ScrumTask) { + this.backendService.deleteTask(task).subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); + } + }); + const index = this.items.indexOf(task); + if (index !== -1) { + this.items.splice(index, 1); + } + } + + public openTaskForm(editTask?: ScrumTask) { + const modalRef = this.modalService.open(TaskFormComponent, { + backdrop: 'static', + keyboard: true, + }); + if (editTask === null) { + modalRef.result.then((result) => { + this.items.push(result); + }); + } + modalRef.componentInstance.task = editTask; + } + + sortById() { + this.doNumericSort('id', (task) => task.id); + } + + sortByTitle() { + this.doStringSort('title', (task) => task.title); + } + + sortByPrio() { + this.doNumericSort('priority', (task) => + getNumberForPriority(task.priority) + ); + } + + sortByTasks() { + this.doNumericSort('userstory', (task) => task.userstoryid); + } + + sortByStatus() { + this.doNumericSort('statusid', (task) => task.statusid); + } + sortByAssigned() { + this.doNumericSort('assignedtoid', (task) => task.assignedtoid); + } + sortByCategory() { + this.doNumericSort('categoryid', (task) => task.categoryid); + } + + private findTaskById(id: number): ScrumTask { + return this.items.find((t) => t.id === id); + } + + getStatusTitleById(id) { + var status = this.status.find((x) => x.id === id); + if (!status) { + return 'N/A'; + } + return status.title; + } + + getUserNameById(id) { + var user = this.users.find((x) => x.id === id); + if (!user) { + return 'N/A'; + } + return user.name; + } + + getCategoryTitleById(id) { + var category = this.categories.find((x) => x.id === id); + if (!category) { + return 'N/A'; + } + return category.title; + } +} diff --git a/src/app/userstory-form/userstory-form.component.css b/src/app/userstory-form/userstory-form.component.css index e69de29..cc04e06 100644 --- a/src/app/userstory-form/userstory-form.component.css +++ b/src/app/userstory-form/userstory-form.component.css @@ -0,0 +1,12 @@ +.modal-footer { + border-top: 0px solid; + padding-top: 5%; +} +.modal-content { + width: 1040px; + right: 55%; +} + +.modal { + margin: 0 auto; +} diff --git a/src/app/userstory-form/userstory-form.component.html b/src/app/userstory-form/userstory-form.component.html index 70f3d0b..45aa071 100644 --- a/src/app/userstory-form/userstory-form.component.html +++ b/src/app/userstory-form/userstory-form.component.html @@ -1,30 +1,63 @@ -
-
- + +
+
+

Neue Userstory anlegen

+ +
+
+
+ +
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
-
-
- - -
- -
- - -
- -
- - -
- - - -
-
\ No newline at end of file + \ No newline at end of file diff --git a/src/app/userstory-form/userstory-form.component.ts b/src/app/userstory-form/userstory-form.component.ts index 28f605f..c3ca4c5 100644 --- a/src/app/userstory-form/userstory-form.component.ts +++ b/src/app/userstory-form/userstory-form.component.ts @@ -3,48 +3,47 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { BackendService, ScrumUserstory, Priority } from '../services/backend.service'; @Component({ - selector: 'app-userstory-form', - templateUrl: './userstory-form.component.html', - styleUrls: ['./userstory-form.component.css'] + selector: 'app-userstory-form', + templateUrl: './userstory-form.component.html', + styleUrls: [ './userstory-form.component.css' ] }) export class UserstoryFormComponent implements OnInit { + @Input() public userstory: ScrumUserstory; + private editing: boolean; + constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) {} - @Input() - public userstory: ScrumUserstory; - private editing: boolean; + ngOnInit(): void { + if (this.userstory === null || this.userstory === undefined) { + this.userstory = { title: '' }; + this.editing = false; + } else { + this.editing = true; + } + document.getElementById('titleField').focus(); + } - constructor(private backendService: BackendService, private activeModalService: NgbActiveModal) { } + onSubmit() { + if (this.editing) { + this.backendService.putUserstory(this.userstory).subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); + } + }); + } else { + this.backendService.postUserstory(this.userstory).subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); + } + }); + } + this.activeModalService.close(this.userstory); + } + onClose() { + this.activeModalService.dismiss(this.userstory); + } - ngOnInit(): void { - if (this.userstory === null || this.userstory === undefined) { - this.userstory = {title: ""}; - this.editing = false; - } - else - { - this.editing = true; - } - } - - onSubmit() { - if (this.editing) { - this.backendService.putUserstory(this.userstory).subscribe(response => { - if (response.status > 399) { - alert('Fehler'); - } - }); - } - else { - this.backendService.postUserstory(this.userstory).subscribe(response => { - if (response.status > 399) { - alert('Fehler'); - } - }); - } - this.activeModalService.close(this.userstory); - } - onClose(){ - this.activeModalService.dismiss(this.userstory); - } + //focusTitleField() { + // document.getElementById('titleField').focus(); + //} } diff --git a/src/app/userstory-list/userstory-list.component.css b/src/app/userstory-list/userstory-list.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/userstory-list/userstory-list.component.html b/src/app/userstory-list/userstory-list.component.html deleted file mode 100644 index fbee073..0000000 --- a/src/app/userstory-list/userstory-list.component.html +++ /dev/null @@ -1,14 +0,0 @@ - - -
    -
  • - Titel: {{userstory.title}} -
    - Inhalt: {{userstory.content}} -
    - Priotität: {{userstory.priority}} -
    - - -
    • -
diff --git a/src/app/userstory-list/userstory-list.component.ts b/src/app/userstory-list/userstory-list.component.ts deleted file mode 100644 index 526f825..0000000 --- a/src/app/userstory-list/userstory-list.component.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; -import { BackendService, ScrumUserstory } from '../services/backend.service'; -import { UserstoryFormComponent } from '../userstory-form/userstory-form.component'; - -@Component({ - selector: 'app-userstory-list', - templateUrl: './userstory-list.component.html', - styleUrls: ['./userstory-list.component.css'] -}) -export class UserstoryListComponent implements OnInit { - - public userstories: ScrumUserstory[] = []; - - constructor(private backendService: BackendService, private modalService: NgbModal) { - backendService.getUserstories().subscribe(response => { - if (response.status > 399) { - alert('Fehler'); - } - else { - this.userstories.push(...response.body); - } - }); - } - - ngOnInit(): void { - } - - public deleteUserstory(userstory: ScrumUserstory) { - this.backendService.deleteUserstory(userstory).subscribe(response => { - if (response.status > 399) { - alert('Fehler'); - } - }); - const index = this.userstories.indexOf(userstory); - if (index !== -1) { - this.userstories.splice(index, 1); - } - } - - public openUserstoryForm(editUserstory: ScrumUserstory) { - const modalRef = this.modalService.open(UserstoryFormComponent, { - backdrop: 'static', - keyboard: true, - }); - if (editUserstory === null) { - modalRef.result.then(result => { - this.userstories.push(result); - }); - } - modalRef.componentInstance.userstory = editUserstory; - } - -} diff --git a/src/app/userstory-table/userstory-table.component.css b/src/app/userstory-table/userstory-table.component.css new file mode 100644 index 0000000..a7c065c --- /dev/null +++ b/src/app/userstory-table/userstory-table.component.css @@ -0,0 +1,7 @@ +table { + table-layout: fixed; +} + +th.sortable:hover { + text-decoration: underline; +} diff --git a/src/app/userstory-table/userstory-table.component.html b/src/app/userstory-table/userstory-table.component.html new file mode 100644 index 0000000..d06db1c --- /dev/null +++ b/src/app/userstory-table/userstory-table.component.html @@ -0,0 +1,95 @@ +
+ +

Userstories

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ID + + + + + + Titel + + + + + + Tasks + + + + + + Status + + + + + + Priorität + + + + + + + Category + + + + +
{{userstory.id}}{{userstory.title}} + + {{getNumberOfTasks(userstory)}} Tasks + + + + {{getStatusTitleById(userstory.statusid)}} + + {{userstory.priority}} + + {{getCategoryTitleById(userstory.categoryid)}} + + + + +
+
diff --git a/src/app/userstory-table/userstory-table.component.ts b/src/app/userstory-table/userstory-table.component.ts new file mode 100644 index 0000000..ac42ac5 --- /dev/null +++ b/src/app/userstory-table/userstory-table.component.ts @@ -0,0 +1,150 @@ +import { Component } from '@angular/core'; +import { + BackendService, + ScrumTask, + ScrumUserstory, + ScrumStatus, + ScrumCategory, +} from '../services/backend.service'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { TableComponentBase } from '../services/table-component.base'; +import { getNumberForPriority } from '../services/sorting.service'; +import { UserstoryFormComponent } from '../userstory-form/userstory-form.component'; +import { ActivatedRoute, ParamMap, Router } from '@angular/router'; + +@Component({ + selector: 'app-userstory-table', + templateUrl: './userstory-table.component.html', + styleUrls: ['./userstory-table.component.css'], +}) +export class UserstoryTableComponent extends TableComponentBase< + ScrumUserstory +> { + public tasks: ScrumTask[] = []; + public filterPriority: string | null = null; + public highlightId: number; + public status: ScrumStatus[] = []; + public categories: ScrumCategory[] = []; + + public get filteredItems() { + return this.items.filter( + (task) => + this.filterPriority === null || task.priority === this.filterPriority + ); + } + + constructor( + private backendService: BackendService, + private modalService: NgbModal, + private route: ActivatedRoute, + private router: Router + ) { + super(); + + this.applyFilterParameters(this.route.snapshot.paramMap); + this.route.paramMap.subscribe((map) => this.applyFilterParameters(map)); + + backendService.getUserstories().subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); + } else { + this.items.push(...response.body); + } + }); + backendService.getTasks().subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); + } else { + this.tasks.push(...response.body); + } + }); + backendService.getAllStatus().subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); + } else { + this.status.push(...response.body); + } + }); + backendService.getCategories().subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); + } else { + this.categories.push(...response.body); + } + }); + } + + private applyFilterParameters(params: ParamMap) { + if (params.has('id')) { + this.highlightId = parseInt(params.get('id')); + } + } + + public deleteUserstory(userstory: ScrumUserstory) { + this.backendService.deleteUserstory(userstory).subscribe((response) => { + if (response.status > 399) { + alert('Fehler'); + } + }); + const index = this.items.indexOf(userstory); + if (index !== -1) { + this.items.splice(index, 1); + } + } + + public openUserstoryForm(editUserstory?: ScrumUserstory) { + const modalRef = this.modalService.open(UserstoryFormComponent, { + backdrop: 'static', + keyboard: true, + }); + if (editUserstory === null) { + modalRef.result.then((result) => { + this.items.push(result); + }); + } + modalRef.componentInstance.userstory = editUserstory; + } + + public getNumberOfTasks(userstory: ScrumUserstory) { + return this.tasks.filter((t) => t.userstoryid === userstory.id).length; + } + + public sortById() { + this.doNumericSort('id', (us) => us.id); + } + + public sortByTitle() { + this.doStringSort('title', (us) => us.title); + } + + public sortByPrio() { + this.doNumericSort('priority', (us) => getNumberForPriority(us.priority)); + } + + public sortByTasks() { + this.doNumericSort('tasks', (us) => this.getNumberOfTasks(us)); + } + + sortByStatus() { + this.doNumericSort('statusid', (us) => us.statusid); + } + sortByCategory() { + this.doNumericSort('categoryid', (us) => us.categoryid); + } + + getStatusTitleById(id) { + var status = this.status.find((x) => x.id === id); + if (!status) { + return 'N/A'; + } + return status.title; + } + + getCategoryTitleById(id) { + var category = this.categories.find((x) => x.id === id); + if (!category) { + return 'N/A'; + } + return category.title; + } +} diff --git a/src/assets/css/nucleo-icons.css b/src/assets/css/nucleo-icons.css new file mode 100644 index 0000000..8cc6765 --- /dev/null +++ b/src/assets/css/nucleo-icons.css @@ -0,0 +1,543 @@ +/* -------------------------------- + +Nucleo Outline Web Font - nucleoapp.com/ +License - nucleoapp.com/license/ +Created using IcoMoon - icomoon.io + +-------------------------------- */ + +@font-face { + font-family: 'Nucleo'; + src: url('../fonts/nucleo.eot'); + src: url('../fonts/nucleo.eot') format('embedded-opentype'), url('../fonts/nucleo.woff2') format('woff2'), url('../fonts/nucleo.woff') format('woff'), url('../fonts/nucleo.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +/*------------------------ + base class definition +-------------------------*/ + +.tim-icons { + display: inline-block; + font: normal normal normal 1em/1 'Nucleo'; + vertical-align: middle; + speak: none; + text-transform: none; + /* Better Font Rendering */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.font-icon-detail { + text-align: center; + padding: 45px 0 30px; + border: 1px solid #e44cc4; + border-radius: .1875rem; + margin: 15px 0; + min-height: 168px; +} + +.font-icon-detail i { + color: #FFFFFF; + font-size: 1.5em; +} + +.font-icon-detail p { + color: #e44cc4 !important; + margin-top: 30px; + padding: 0 10px; + font-size: .7142em; +} + +/*------------------------ + change icon size +-------------------------*/ + +.tim-icons-sm { + font-size: 0.8em; +} + +.tim-icons-lg { + font-size: 1.2em; +} + +/* absolute units */ + +.tim-icons-16 { + font-size: 16px; +} + +.tim-icons-32 { + font-size: 32px; +} + +/*---------------------------------- + add a square/circle background +-----------------------------------*/ + +.tim-icons-bg-square, +.tim-icons-bg-circle { + padding: 0.35em; +} + +.tim-icons-bg-circle { + border-radius: 50%; +} + +/*------------------------ + list icons +-------------------------*/ + +/*------------------------ + spinning icons +-------------------------*/ + +.tim-icons-is-spinning { + -webkit-animation: tim-icons-spin 2s infinite linear; + -moz-animation: tim-icons-spin 2s infinite linear; + animation: tim-icons-spin 2s infinite linear; +} + +@-webkit-keyframes tim-icons-spin { + 0% { + -webkit-transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + } +} + +@-moz-keyframes tim-icons-spin { + 0% { + -moz-transform: rotate(0deg); + } + 100% { + -moz-transform: rotate(360deg); + } +} + +@keyframes tim-icons-spin { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -ms-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +/*------------------------ + rotated/flipped icons +-------------------------*/ + +/*------------------------ + icons +-------------------------*/ + +.icon-alert-circle-exc::before { + content: "\ea02"; +} + +.icon-align-center::before { + content: "\ea03"; +} + +.icon-align-left-2::before { + content: "\ea04"; +} + +.icon-app::before { + content: "\ea05"; +} + +.icon-atom::before { + content: "\ea06"; +} + +.icon-attach-87::before { + content: "\ea07"; +} + +.icon-badge::before { + content: "\ea08"; +} + +.icon-bag-16::before { + content: "\ea09"; +} + +.icon-bank::before { + content: "\ea0a"; +} + +.icon-basket-simple::before { + content: "\ea0b"; +} + +.icon-bell-55::before { + content: "\ea0c"; +} + +.icon-bold::before { + content: "\ea0d"; +} + +.icon-book-bookmark::before { + content: "\ea0e"; +} + +.icon-bulb-63::before { + content: "\ea0f"; +} + +.icon-bullet-list-67::before { + content: "\ea10"; +} + +.icon-bus-front-12::before { + content: "\ea11"; +} + +.icon-button-pause::before { + content: "\ea12"; +} + +.icon-button-power::before { + content: "\ea13"; +} + +.icon-calendar-60::before { + content: "\ea14"; +} + +.icon-camera-18::before { + content: "\ea15"; +} + +.icon-caps-small::before { + content: "\ea16"; +} + +.icon-cart::before { + content: "\ea17"; +} + +.icon-chart-bar-32::before { + content: "\ea18"; +} + +.icon-chart-pie-36::before { + content: "\ea19"; +} + +.icon-chat-33::before { + content: "\ea1a"; +} + +.icon-check-2::before { + content: "\ea1b"; +} + +.icon-cloud-download-93::before { + content: "\ea1c"; +} + +.icon-cloud-upload-94::before { + content: "\ea1d"; +} + +.icon-coins::before { + content: "\ea1e"; +} + +.icon-compass-05::before { + content: "\ea1f"; +} + +.icon-controller::before { + content: "\ea20"; +} + +.icon-credit-card::before { + content: "\ea21"; +} + +.icon-delivery-fast::before { + content: "\ea22"; +} + +.icon-double-left::before { + content: "\ea23"; +} + +.icon-double-right::before { + content: "\ea24"; +} + +.icon-email-85::before { + content: "\ea25"; +} + +.icon-gift-2::before { + content: "\ea26"; +} + +.icon-globe-2::before { + content: "\ea27"; +} + +.icon-headphones::before { + content: "\ea28"; +} + +.icon-heart-2::before { + content: "\ea29"; +} + +.icon-html5::before { + content: "\ea2a"; +} + +.icon-image-02::before { + content: "\ea2b"; +} + +.icon-istanbul::before { + content: "\ea2c"; +} + +.icon-key-25::before { + content: "\ea2d"; +} + +.icon-laptop::before { + content: "\ea2e"; +} + +.icon-light-3::before { + content: "\ea2f"; +} + +.icon-link-72::before { + content: "\ea30"; +} + +.icon-lock-circle::before { + content: "\ea31"; +} + +.icon-map-big::before { + content: "\ea32"; +} + +.icon-minimal-down::before { + content: "\ea33"; +} + +.icon-minimal-left::before { + content: "\ea34"; +} + +.icon-minimal-right::before { + content: "\ea35"; +} + +.icon-minimal-up::before { + content: "\ea36"; +} + +.icon-mobile::before { + content: "\ea37"; +} + +.icon-molecule-40::before { + content: "\ea38"; +} + +.icon-money-coins::before { + content: "\ea39"; +} + +.icon-notes::before { + content: "\ea3a"; +} + +.icon-palette::before { + content: "\ea3b"; +} + +.icon-paper::before { + content: "\ea3c"; +} + +.icon-pencil::before { + content: "\ea3d"; +} + +.icon-pin::before { + content: "\ea3e"; +} + +.icon-planet::before { + content: "\ea3f"; +} + +.icon-puzzle-10::before { + content: "\ea40"; +} + +.icon-satisfied::before { + content: "\ea41"; +} + +.icon-scissors::before { + content: "\ea42"; +} + +.icon-send::before { + content: "\ea43"; +} + +.icon-settings-gear-63::before { + content: "\ea44"; +} + +.icon-settings::before { + content: "\ea45"; +} + +.icon-simple-add::before { + content: "\ea46"; +} + +.icon-simple-delete::before { + content: "\ea47"; +} + +.icon-simple-remove::before { + content: "\ea48"; +} + +.icon-single-02::before { + content: "\ea49"; +} + +.icon-single-copy-04::before { + content: "\ea4a"; +} + +.icon-sound-wave::before { + content: "\ea4b"; +} + +.icon-spaceship::before { + content: "\ea4c"; +} + +.icon-square-pin::before { + content: "\ea4d"; +} + +.icon-support-17::before { + content: "\ea4e"; +} + +.icon-tablet-2::before { + content: "\ea4f"; +} + +.icon-tag::before { + content: "\ea50"; +} + +.icon-tap-02::before { + content: "\ea51"; +} + +.icon-tie-bow::before { + content: "\ea52"; +} + +.icon-time-alarm::before { + content: "\ea53"; +} + +.icon-trash-simple::before { + content: "\ea54"; +} + +.icon-triangle-right-17::before { + content: "\ea55"; +} + +.icon-trophy::before { + content: "\ea56"; +} + +.icon-tv-2::before { + content: "\ea57"; +} + +.icon-upload::before { + content: "\ea58"; +} + +.icon-user-run::before { + content: "\ea59"; +} + +.icon-vector::before { + content: "\ea5a"; +} + +.icon-video-66::before { + content: "\ea5b"; +} + +.icon-volume-98::before { + content: "\ea5c"; +} + +.icon-wallet-43::before { + content: "\ea5d"; +} + +.icon-watch-time::before { + content: "\ea5e"; +} + +.icon-wifi::before { + content: "\ea5f"; +} + +.icon-world::before { + content: "\ea60"; +} + +.icon-zoom-split::before { + content: "\ea61"; +} + +.icon-refresh-01::before { + content: "\ea62"; +} + +.icon-refresh-02::before { + content: "\ea63"; +} + +.icon-shape-star::before { + content: "\ea64"; +} + +.icon-components::before { + content: "\ea65"; +} diff --git a/src/assets/env.js b/src/assets/env.js index 5b334ef..777214b 100644 --- a/src/assets/env.js +++ b/src/assets/env.js @@ -1,7 +1,7 @@ (function(window) { - window["env"] = window["env"] || {}; - - // Environment variables - window["env"]["apiUrl"] = "http://localhost:5001"; - window["env"]["debug"] = false; - })(this); \ No newline at end of file + window['env'] = window['env'] || {}; + + // Environment variables + window['env']['apiUrl'] = 'https://taskboard.dev.nig.gl/api'; + window['env']['debug'] = false; +})(this); diff --git a/src/assets/scss/black-dashboard.scss b/src/assets/scss/black-dashboard.scss new file mode 100644 index 0000000..7516cc3 --- /dev/null +++ b/src/assets/scss/black-dashboard.scss @@ -0,0 +1,103 @@ + +/* + ========================================================= + * Black Dashboard Angular - v1.1.0 + ========================================================= + + * Product Page: https://www.creative-tim.com/product/black-dashboard-angular + * Copyright 2019 Creative Tim (https://www.creative-tim.com) + * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md) + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +*/ + + // Core + +@import "black-dashboard/custom/functions"; +@import "black-dashboard/bootstrap/functions"; + +@import "black-dashboard/custom/variables"; +@import "black-dashboard/bootstrap/variables"; + +@import "black-dashboard/custom/mixins"; +@import "black-dashboard/bootstrap/mixins"; + + // Bootstrap components + +@import "black-dashboard/bootstrap/root"; +@import "black-dashboard/bootstrap/reboot"; +@import "black-dashboard/bootstrap/type"; +@import "black-dashboard/bootstrap/images"; +@import "black-dashboard/bootstrap/code"; +@import "black-dashboard/bootstrap/grid"; +@import "black-dashboard/bootstrap/tables"; +@import "black-dashboard/bootstrap/forms"; +@import "black-dashboard/bootstrap/buttons"; +@import "black-dashboard/bootstrap/transitions"; +@import "black-dashboard/bootstrap/dropdown"; +@import "black-dashboard/bootstrap/button-group"; +@import "black-dashboard/bootstrap/input-group"; +@import "black-dashboard/bootstrap/custom-forms"; +@import "black-dashboard/bootstrap/nav"; +@import "black-dashboard/bootstrap/navbar"; +@import "black-dashboard/bootstrap/card"; +@import "black-dashboard/bootstrap/breadcrumb"; +@import "black-dashboard/bootstrap/pagination"; +@import "black-dashboard/bootstrap/badge"; +@import "black-dashboard/bootstrap/jumbotron"; +@import "black-dashboard/bootstrap/alert"; +@import "black-dashboard/bootstrap/progress"; +@import "black-dashboard/bootstrap/media"; +@import "black-dashboard/bootstrap/list-group"; +@import "black-dashboard/bootstrap/close"; +@import "black-dashboard/bootstrap/modal"; +@import "black-dashboard/bootstrap/tooltip"; +@import "black-dashboard/bootstrap/popover"; +@import "black-dashboard/bootstrap/carousel"; +@import "black-dashboard/bootstrap/utilities"; +@import "black-dashboard/bootstrap/print"; + + // Custom components + + @import "black-dashboard/custom/alerts.scss"; + @import "black-dashboard/custom/buttons.scss"; + @import "black-dashboard/custom/dropdown.scss"; + @import "black-dashboard/custom/footer.scss"; + @import "black-dashboard/custom/forms.scss"; + @import "black-dashboard/custom/images.scss"; + @import "black-dashboard/custom/modal.scss"; + @import "black-dashboard/custom/navbar.scss"; + @import "black-dashboard/custom/type.scss"; + @import "black-dashboard/custom/tables"; + @import "black-dashboard/custom/checkboxes-radio"; + @import "black-dashboard/custom/fixed-plugin"; + @import "black-dashboard/custom/sidebar-and-main-panel.scss"; + @import "black-dashboard/custom/misc.scss"; + @import "black-dashboard/custom/rtl.scss"; + @import "black-dashboard/custom/input-group.scss"; + + + // Vendor / Plugins + +@import "black-dashboard/custom/vendor/plugin-perfect-scrollbar.scss"; +@import "black-dashboard/custom/vendor/plugin-animate-bootstrap-notify.scss"; + +// light mode + +@import "black-dashboard/custom/white-content.scss"; + +// Cards + +@import 'black-dashboard/custom/card'; +@import "black-dashboard/custom/cards/card-chart"; +@import "black-dashboard/custom/cards/card-map"; +@import "black-dashboard/custom/cards/card-user"; +@import "black-dashboard/custom/cards/card-task"; +@import "black-dashboard/custom/cards/card-plain"; + +// Angular Differences + +@import "black-dashboard/angular-differences/angular-differences" diff --git a/src/assets/scss/black-dashboard/angular-differences/_angular-differences.scss b/src/assets/scss/black-dashboard/angular-differences/_angular-differences.scss new file mode 100644 index 0000000..41c9f90 --- /dev/null +++ b/src/assets/scss/black-dashboard/angular-differences/_angular-differences.scss @@ -0,0 +1,5 @@ +@import "sidebar-and-main-panel"; +@import "charts"; +@import "rtl"; +@import "nucleo-icons"; +@import "./plugins/ngx-toastr"; diff --git a/src/assets/scss/black-dashboard/angular-differences/_card-user.scss b/src/assets/scss/black-dashboard/angular-differences/_card-user.scss new file mode 100644 index 0000000..b89d990 --- /dev/null +++ b/src/assets/scss/black-dashboard/angular-differences/_card-user.scss @@ -0,0 +1,21 @@ +.card-user { + .author { + .block { + &.block-one { + @include linear-gradient-right(rgba($danger,0.6), rgba($danger,0)); + } + + &.block-two { + @include linear-gradient-right(rgba($danger,0.6), rgba($danger,0)); + } + + &.block-three { + @include linear-gradient-right(rgba($danger,0.6), rgba($danger,0)); + } + + &.block-four { + @include linear-gradient-right(rgba($danger,0.6), rgba($danger,0)); + } + } + } +} diff --git a/src/assets/scss/black-dashboard/angular-differences/_charts.scss b/src/assets/scss/black-dashboard/angular-differences/_charts.scss new file mode 100644 index 0000000..43e8f86 --- /dev/null +++ b/src/assets/scss/black-dashboard/angular-differences/_charts.scss @@ -0,0 +1,3 @@ +.text-danger-states{ + color: #ec250d; +} diff --git a/src/assets/scss/black-dashboard/angular-differences/_nucleo-icons.scss b/src/assets/scss/black-dashboard/angular-differences/_nucleo-icons.scss new file mode 100644 index 0000000..c631caa --- /dev/null +++ b/src/assets/scss/black-dashboard/angular-differences/_nucleo-icons.scss @@ -0,0 +1,6 @@ +.font-icon-list .font-icon-detail{ + border: 1px solid #fd5d93; + p{ + color: #fd5d93 !important; + } +} diff --git a/src/assets/scss/black-dashboard/angular-differences/_rtl.scss b/src/assets/scss/black-dashboard/angular-differences/_rtl.scss new file mode 100644 index 0000000..b526e18 --- /dev/null +++ b/src/assets/scss/black-dashboard/angular-differences/_rtl.scss @@ -0,0 +1,13 @@ +.rtl .fixed-plugin { + border-radius: 0 8px 8px 0; + left: 0; + right: unset; + .dropdown-menu { + left: 80px!important; + right: auto!important; + } +} +.rtl .off-canvas-sidebar .nav li.active>a:not([data-toggle=collapse]):before, .rtl .sidebar .nav li.active>a:not([data-toggle=collapse]):before { + left: unset; + right: -4px; +} diff --git a/src/assets/scss/black-dashboard/angular-differences/_sidebar-and-main-panel.scss b/src/assets/scss/black-dashboard/angular-differences/_sidebar-and-main-panel.scss new file mode 100644 index 0000000..8b43a2e --- /dev/null +++ b/src/assets/scss/black-dashboard/angular-differences/_sidebar-and-main-panel.scss @@ -0,0 +1,45 @@ +.main-panel { + &, &[data="red"]{ + border-color: $danger; + } + + .content { + padding: 78px 30px 30px 280px; + min-height: calc(100vh - 70px); + } +} +@media screen and (max-width: 768px){ + .main-panel .content { + padding-left: 15px; + padding-right: 15px; + } +} +.logo-img{ + width: 35px; + height: 35px; + display: block; + margin-left: 2px; + position: absolute; + top: 12px; + img{ + width: 35px; + } +} +.sidebar, .off-canvas-sidebar{ + &, &[data="red"]{ + @include linear-gradient($danger-states, $danger); + } + &[data="primary"]{ + @include linear-gradient($primary-states, $primary); + } +} +@media screen and (max-width: 991px){ + .main-panel { + .content { + padding-left: 30px !important; + } + } + .fixed-plugin .dropdown-toggle:after{ + display: none; + } +} diff --git a/src/assets/scss/black-dashboard/angular-differences/plugins/_ngx-toastr.scss b/src/assets/scss/black-dashboard/angular-differences/plugins/_ngx-toastr.scss new file mode 100644 index 0000000..9275f6c --- /dev/null +++ b/src/assets/scss/black-dashboard/angular-differences/plugins/_ngx-toastr.scss @@ -0,0 +1,104 @@ + +.toast-container{ + width: 100%; + + .toast-close-button { + font-weight: 300; + text-shadow: none; + position: absolute; + right: 10px; + top: 50%; + margin-top: -14px; + width: 25px; + height: 25px; + + &:focus{ + outline: none; + } + + &:hover{ + opacity: 1; + color: $white; + } + + & > span { + display: none; + } + + &:before{ + display: block; + display: inline-block; + font: normal normal normal 1em/1 'Nucleo'; + font-size: inherit; + speak: none; + text-transform: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 20px; + content: "\ea48"; + font-weight: 300; + } + } + + .alert{ + z-index: 9999; + width: 33.3333%; + pointer-events: auto; + + .toast-message { + max-width: 89%; + } + + &.alert-with-icon{ + .tim-icons{ + position: absolute; + left: 24px; + top: 50%; + margin-top: -14px; + font-size: 24px; + } + } + } + + .toast-error{ + background-image: none; + } + + .toast-success{ + background-image: none; + } + + .toast-info{ + background-image: none; + } + + .toast-warning{ + background-image: none; + } +} +.toast-top-center, .toast-bottom-center{ + .alert{ + margin-left: auto; + margin-right: auto; + } +} +.toast-top-right, .toast-bottom-right{ + .alert{ + margin-left: auto; + margin-right: 0; + } +} + +.toast-top-center{ + top: 12px; +} + +.toast-bottom-center{ + bottom: 12px; +} + +@media screen and (max-width: 767px) { + .toast-container .alert{ + width: 91.6666%; + } +} diff --git a/src/assets/scss/black-dashboard/bootstrap/_alert.scss b/src/assets/scss/black-dashboard/bootstrap/_alert.scss new file mode 100644 index 0000000..dd43e23 --- /dev/null +++ b/src/assets/scss/black-dashboard/bootstrap/_alert.scss @@ -0,0 +1,51 @@ +// +// Base styles +// + +.alert { + position: relative; + padding: $alert-padding-y $alert-padding-x; + margin-bottom: $alert-margin-bottom; + border: $alert-border-width solid transparent; + @include border-radius($alert-border-radius); +} + +// Headings for larger alerts +.alert-heading { + // Specified to prevent conflicts of changing $headings-color + color: inherit; +} + +// Provide class for links that match alerts +.alert-link { + font-weight: $alert-link-font-weight; +} + + +// Dismissible alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissible { + padding-right: ($close-font-size + $alert-padding-x * 2); + + // Adjust close link position + .close { + position: absolute; + top: 0; + right: 0; + padding: $alert-padding-y $alert-padding-x; + color: inherit; + } +} + + +// Alternate styles +// +// Generate contextual modifier classes for colorizing the alert. + +@each $color, $value in $theme-colors { + .alert-#{$color} { + @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); + } +} diff --git a/src/assets/scss/black-dashboard/bootstrap/_badge.scss b/src/assets/scss/black-dashboard/bootstrap/_badge.scss new file mode 100644 index 0000000..b87a1b0 --- /dev/null +++ b/src/assets/scss/black-dashboard/bootstrap/_badge.scss @@ -0,0 +1,47 @@ +// Base class +// +// Requires one of the contextual, color modifier classes for `color` and +// `background-color`. + +.badge { + display: inline-block; + padding: $badge-padding-y $badge-padding-x; + font-size: $badge-font-size; + font-weight: $badge-font-weight; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + @include border-radius($badge-border-radius); + + // Empty badges collapse automatically + &:empty { + display: none; + } +} + +// Quick fix for badges in buttons +.btn .badge { + position: relative; + top: -1px; +} + +// Pill badges +// +// Make them extra rounded with a modifier to replace v3's badges. + +.badge-pill { + padding-right: $badge-pill-padding-x; + padding-left: $badge-pill-padding-x; + @include border-radius($badge-pill-border-radius); +} + +// Colors +// +// Contextual variations (linked badges get darker on :hover). + +@each $color, $value in $theme-colors { + .badge-#{$color} { + @include badge-variant($value); + } +} diff --git a/src/assets/scss/black-dashboard/bootstrap/_breadcrumb.scss b/src/assets/scss/black-dashboard/bootstrap/_breadcrumb.scss new file mode 100644 index 0000000..be30950 --- /dev/null +++ b/src/assets/scss/black-dashboard/bootstrap/_breadcrumb.scss @@ -0,0 +1,41 @@ +.breadcrumb { + display: flex; + flex-wrap: wrap; + padding: $breadcrumb-padding-y $breadcrumb-padding-x; + margin-bottom: $breadcrumb-margin-bottom; + list-style: none; + background-color: $breadcrumb-bg; + @include border-radius($breadcrumb-border-radius); +} + +.breadcrumb-item { + // The separator between breadcrumbs (by default, a forward-slash: "/") + + .breadcrumb-item { + padding-left: $breadcrumb-item-padding; + + &::before { + display: inline-block; // Suppress underlining of the separator in modern browsers + padding-right: $breadcrumb-item-padding; + color: $breadcrumb-divider-color; + content: $breadcrumb-divider; + } + } + + // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built + // without `