BOXIT-63: style task

deploy/localDev/boxit/apacheOIDC/apache2.conf

@@ -250,7 +250,7 @@ ServerName ${SERVER_NAME}
                                         base-uri 'self'; \
                                         form-action 'self'; \
                                         frame-ancestors 'none'; \
-                                        img-src 'self' data:; \
+                                        img-src 'self' api.mapbox.com data:; \
                                         #upgrade-insecure-requests" "expr=%{CONTENT_TYPE} =~ m#text\/(html|javascript)|application\/pdf|xml#i"
     Header always append X-Frame-Options SAMEORIGIN
     Header always set X-Content-Type-Options nosniff

frontend/src/app/app-routing.module.ts

@@ -1,13 +1,13 @@
 import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
 import {NgModule} from '@angular/core';
-import {NoteViewComponent} from './gui/note/note-view/note-view.component';
-import {NoteEditComponent} from './gui/note/note-edit/note-edit.component';
-import {FolderComponent} from './gui/folder/view/folder.component';
-import {FolderEditComponent} from './gui/folder/folder-edit/folder-edit.component';
+import {NoteViewComponent} from './gui/item/note/note-view/note-view.component';
+import {NoteEditComponent} from './gui/item/note/note-edit/note-edit.component';
+import {FolderComponent} from './gui/item/folder/view/folder.component';
+import {FolderEditComponent} from './gui/item/folder/folder-edit/folder-edit.component';
 import {NotFoundPageComponent} from './gui/page/not-found-page/not-found-page.component';
 import {NotAllowedPageComponent} from "./gui/page/not-allowed-page/not-allowed-page.component";
-import {TaskViewComponent} from './gui/task/task-view/task-view.component';
-import {TaskEditComponent} from './gui/task/task-edit/task-edit.component';
+import {TaskViewComponent} from './gui/item/task/task-view/task-view.component';
+import {TaskEditComponent} from './gui/item/task/task-edit/task-edit.component';
 
 const appRoutes: Routes = [
   {path: '', redirectTo: 'folder', pathMatch: 'full'},

frontend/src/app/app.module.ts

@@ -8,28 +8,28 @@ import {MarkdownModule} from 'ngx-markdown';
 import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from '@angular/common/http';
 import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
 import {TranslateHttpLoader} from '@ngx-translate/http-loader';
-import {MapComponent} from './gui/note/location/map/map.component';
-import {LocationViewComponent} from './gui/note/location/view/location-view.component';
-import {LocationEditComponent} from './gui/note/location/edit/location-edit.component';
-import {AttachmentComponent} from './gui/note/attachment-list/show/attachment/attachment.component';
-import {DiashowComponent} from './gui/note/attachment-list/show/diashow/diashow.component';
-import {AttachmentListComponent} from './gui/note/attachment-list/show/attachment-list.component';
-import {NoteViewComponent} from './gui/note/note-view/note-view.component';
-import {NoteEditComponent} from './gui/note/note-edit/note-edit.component';
-import {AutoGrowDirective} from './gui/note/note-edit/auto-grow.directive';
-import {AttachmentListEditComponent} from './gui/note/attachment-list/edit/attachment-list-edit.component';
-import {NoteHeaderComponent} from './gui/note/note-header/note-header.component';
+import {MapComponent} from './gui/location/map/map.component';
+import {LocationViewComponent} from './gui/location/view/location-view.component';
+import {LocationEditComponent} from './gui/location/edit/location-edit.component';
+import {AttachmentComponent} from './gui/attachment-list/show/attachment/attachment.component';
+import {DiashowComponent} from './gui/attachment-list/show/diashow/diashow.component';
+import {AttachmentListComponent} from './gui/attachment-list/show/attachment-list.component';
+import {NoteViewComponent} from './gui/item/note/note-view/note-view.component';
+import {NoteEditComponent} from './gui/item/note/note-edit/note-edit.component';
+import {AutoGrowDirective} from './gui/item/note/note-edit/auto-grow.directive';
+import {AttachmentListEditComponent} from './gui/attachment-list/edit/attachment-list-edit.component';
+import {NoteHeaderComponent} from './gui/item/note/note-header/note-header.component';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NoteService} from './gui/note/note.service';
-import {FolderComponent} from './gui/folder/view/folder.component';
-import {FolderEditComponent} from './gui/folder/folder-edit/folder-edit.component';
-import {FolderPathComponent} from './gui/folder/folder-path/folder-path.component';
-import {FolderSidebarComponent} from './gui/folder/view/folder-sidebar/folder-sidebar.component';
-import {FolderItemBoxViewComponent} from './gui/folder/view/item/boxview/folder-item-box-view/folder-item.box-view.component';
-import {NoteItemBoxViewComponent} from './gui/folder/view/item/boxview/note-item-box-view/note-item-box-view.component';
-import {NoteitemListviewComponent} from './gui/folder/view/item/listview/noteitem-listview/noteitem-listview.component';
-import {FolderitemListview} from './gui/folder/view/item/listview/folderitem-listview/folderitem-listview.component';
-import {FolderNameComponent} from './gui/folder/folder-name/folder-name.component';
+import {NoteService} from './gui/item/note/note.service';
+import {FolderComponent} from './gui/item/folder/view/folder.component';
+import {FolderEditComponent} from './gui/item/folder/folder-edit/folder-edit.component';
+import {FolderPathComponent} from './gui/item/folder/folder-path/folder-path.component';
+import {FolderSidebarComponent} from './gui/item/folder/view/folder-sidebar/folder-sidebar.component';
+import {FolderItemBoxViewComponent} from './gui/item/folder/view/item/boxview/folder-item-box-view/folder-item.box-view.component';
+import {NoteItemBoxViewComponent} from './gui/item/folder/view/item/boxview/note-item-box-view/note-item-box-view.component';
+import {NoteitemListviewComponent} from './gui/item/folder/view/item/listview/noteitem-listview/noteitem-listview.component';
+import {FolderitemListview} from './gui/item/folder/view/item/listview/folderitem-listview/folderitem-listview.component';
+import {FolderNameComponent} from './gui/item/folder/folder-name/folder-name.component';
 import {ImageCropperModule} from 'ngx-image-cropper';
 import {CommonModule} from '@angular/common';
 import {DropdownComponent} from './gui/common/dropdown/dropdown.component';
@@ -42,13 +42,14 @@ import {ToastrModule} from "ngx-toastr";
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 import {ScrollingModule} from '@angular/cdk/scrolling';
 import { VirtualListComponent } from './gui/common/virtual-list/virtual-list.component';
-import {TaskItemBoxViewComponent} from './gui/folder/view/item/boxview/task-item-box-view/task-item-box-view.component';
-import {TaskItemListviewComponent} from './gui/folder/view/item/listview/taskitem-listview/task-item-listview.component';
-import { TaskViewComponent } from './gui/task/task-view/task-view.component';
-import { TaskEditComponent } from './gui/task/task-edit/task-edit.component';
-import {TaskService} from "./gui/task/task.service";
-import {FolderService} from "./business/folder/folder.service";
+import {TaskItemBoxViewComponent} from './gui/item/folder/view/item/boxview/task-item-box-view/task-item-box-view.component';
+import {TaskItemListviewComponent} from './gui/item/folder/view/item/listview/taskitem-listview/task-item-listview.component';
+import { TaskViewComponent } from './gui/item/task/task-view/task-view.component';
+import { TaskEditComponent } from './gui/item/task/task-edit/task-edit.component';
+import {TaskService} from "./gui/item/task/task.service";
+import {FolderService} from "./business/item/folder/folder.service";
 import {HeaderComponent} from './gui/header/header.component';
+import { TaskHeaderComponent } from './gui/item/task/task-header/task-header.component';
 
 @NgModule({
   declarations: [
@@ -82,7 +83,8 @@ import {HeaderComponent} from './gui/header/header.component';
     NotAllowedPageComponent,
     VirtualListComponent,
     TaskViewComponent,
-    TaskEditComponent
+    TaskEditComponent,
+    TaskHeaderComponent
   ],
   imports: [
     CommonModule,

frontend/src/app/business/item/folder/folder.mapper.ts

@@ -1,15 +1,15 @@
-import {FolderDto} from "../../api/dto/folder/folder.dto";
+import {FolderDto} from "../../../api/dto/folder/folder.dto";
 import {Folder} from "./folder.model";
 import {Accent} from "./Accent.model";
 import {Background} from "./Background.model";
-import {NoteOverviewDto} from "../../api/dto/note/noteOverview.dto";
+import {NoteOverviewDto} from "../../../api/dto/note/noteOverview.dto";
 import {NoteOverview} from "./noteOverview.model";
-import {OverviewItemDto} from "../../api/dto/note/overviewItem.dto";
+import {OverviewItemDto} from "../../../api/dto/note/overviewItem.dto";
 import {OverviewItem} from "./overviewItem.model";
-import {FolderOverviewDto} from "../../api/dto/folder/folderOverview.dto";
+import {FolderOverviewDto} from "../../../api/dto/folder/folderOverview.dto";
 import {FolderOverview} from "./FolderOverview.model";
 import {ViewMode} from "./viewMode.model";
-import {TaskOverviewDto} from '../../api/dto/task/taskOverview.dto';
+import {TaskOverviewDto} from '../../../api/dto/task/taskOverview.dto';
 import {TaskOverview} from './taskOverview.model';
 
 export class FolderMapper {

frontend/src/app/business/item/folder/folder.service.ts

@@ -1,19 +1,19 @@
 
 import {map} from 'rxjs/operators';
 import {Injectable, OnInit} from "@angular/core";
-import {BoxitApi} from "../../api/boxit.api";
+import {BoxitApi} from "../../../api/boxit.api";
 import {Observable, Subject} from "rxjs";
 import {Folder} from "./folder.model";
-import {FolderDto} from "../../api/dto/folder/folder.dto";
+import {FolderDto} from "../../../api/dto/folder/folder.dto";
 import {FolderMapper} from "./folder.mapper";
 import {OverviewItem} from "./overviewItem.model";
-import {OverviewItemDto} from "../../api/dto/note/overviewItem.dto";
+import {OverviewItemDto} from "../../../api/dto/note/overviewItem.dto";
 import {ViewCache} from "./ViewCache";
 import {ViewMode} from "./viewMode.model";
-import {Pair} from "../../common/Pair";
-import {NotificationService} from "../notification.service";
-import {Paged} from '../../api/dto/paging/paged';
-import {Pagination} from '../../api/dto/paging/pagination';
+import {Pair} from "../../../common/Pair";
+import {NotificationService} from "../../notification.service";
+import {Paged} from '../../../api/dto/paging/paged';
+import {Pagination} from '../../../api/dto/paging/pagination';
 
 @Injectable()
 export class FolderService implements OnInit {

frontend/src/app/business/item/note/note.mapper.ts

@@ -1,7 +1,7 @@
-import {NoteDto} from '../../api/dto/note/note.dto';
+import {NoteDto} from '../../../api/dto/note/note.dto';
 import {Note} from './note.model';
-import {LocationMapper} from "../location/location.mapper";
-import {AttachmentMapper} from "../attachment/attachment.mapper";
+import {LocationMapper} from "../../location/location.mapper";
+import {AttachmentMapper} from "../../attachment/attachment.mapper";
 
 export class NoteMapper {
   public static mapDto(note: NoteDto): Note {

frontend/src/app/business/item/note/note.model.ts

@@ -1,6 +1,6 @@
-import {Attachment} from "../attachment/Attachment.model";
-import {Location} from "../location/Location.model";
-import {Nullable} from "../Nullable.model";
+import {Attachment} from "../../attachment/Attachment.model";
+import {Location} from "../../location/Location.model";
+import {Nullable} from "../../Nullable.model";
 
 export class Note extends Nullable{
 

frontend/src/app/business/item/task/priority.model.ts

@@ -0,0 +1,29 @@
+export class Priority {
+  public static readonly LOWEST   = new Priority('LOWEST', '#FF0000', 'fas fa-angle-double-down');
+  public static readonly LOW      = new Priority('LOW', '#FF6200', 'fas fa-angle-down');
+  public static readonly NORMAL   = new Priority('NORMAL', '#1A9600', 'fas fa-grip-lines');
+  public static readonly HIGH     = new Priority('HIGH', '#0062FF', 'fas fa-angle-up');
+  public static readonly HIGHEST  = new Priority('HIGHEST', '#0000FF', 'fas fa-angle-double-up');
+
+  public static readonly ALL = [
+    Priority.LOWEST,
+    Priority.LOW,
+    Priority.NORMAL,
+    Priority.HIGH,
+    Priority.HIGHEST
+  ];
+
+  constructor(
+    readonly name: string,
+    readonly color: string,
+    readonly fontAwesomeClass: string
+  ) {}
+
+  public static valueOf(name: string): Priority {
+    const priority = Priority.ALL.find(p => p.name === name);
+    if (priority === undefined) {
+      throw 'No Priority named "' + name + '" found!';
+    }
+    return priority;
+  }
+}

frontend/src/app/business/item/task/task.mapper.ts

@@ -1,7 +1,8 @@
 import {Task} from "./task.model";
-import {TaskDto} from "../../api/dto/task/task.dto";
-import {LocationMapper} from "../location/location.mapper";
-import {AttachmentMapper} from "../attachment/attachment.mapper";
+import {TaskDto} from "../../../api/dto/task/task.dto";
+import {LocationMapper} from "../../location/location.mapper";
+import {AttachmentMapper} from "../../attachment/attachment.mapper";
+import {Priority} from './priority.model';
 
 export class TaskMapper {
   public static map(dto: TaskDto): Task {
@@ -17,7 +18,7 @@ export class TaskMapper {
       dto.title,
       dto.description,
       LocationMapper.map(dto.location),
-      dto.priority,
+      Priority.valueOf(dto.priority),
       dto.state,
       dto.startAt,
       dto.dueAt,
@@ -36,7 +37,7 @@ export class TaskMapper {
       task.title,
       task.description,
       LocationMapper.unmap(task.location),
-      task.priority,
+      task.priority.name,
       task.state,
       task.startAt,
       task.dueAt,

frontend/src/app/business/item/task/task.model.ts

@@ -1,6 +1,7 @@
-import {Nullable} from "../Nullable.model";
-import {Location} from "../location/Location.model";
-import {Attachment} from "../attachment/Attachment.model";
+import {Nullable} from "../../Nullable.model";
+import {Location} from "../../location/Location.model";
+import {Attachment} from "../../attachment/Attachment.model";
+import {Priority} from './priority.model';
 
 export class Task extends Nullable {
   constructor(
@@ -12,7 +13,7 @@ export class Task extends Nullable {
     public title: string,
     public description: string,
     public location: Location,
-    public priority: string,
+    public priority: Priority,
     public state: string,
     public startAt: Date,
     public dueAt: Date,
@@ -30,7 +31,7 @@ export class Task extends Nullable {
       '',
       '',
       null,
-      'NORMAL',
+      Priority.NORMAL,
       'BACKLOG',
       null,
       null,

frontend/src/app/gui/attachment-list/edit/attachment-list-edit.component.ts

@@ -1,7 +1,7 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {Attachment} from "../../../../business/attachment/Attachment.model";
-import {Folder} from "../../../../business/folder/folder.model";
-import {FolderService} from "../../../../business/folder/folder.service";
+import {Attachment} from "../../../business/attachment/Attachment.model";
+import {Folder} from "../../../business/item/folder/folder.model";
+import {FolderService} from "../../../business/item/folder/folder.service";
 
 @Component({
   selector: 'app-attachment-list-edit',

frontend/src/app/gui/attachment-list/show/attachment-list.component.ts

@@ -2,7 +2,7 @@ import {Component, Input, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren}
 import {Subscription} from "rxjs";
 import {DiashowComponent} from "./diashow/diashow.component";
 import {AttachmentComponent} from "./attachment/attachment.component";
-import {Attachment} from "../../../../business/attachment/Attachment.model";
+import {Attachment} from "../../../business/attachment/Attachment.model";
 
 @Component({
   selector: 'app-attachment-list',

frontend/src/app/gui/attachment-list/show/attachment/attachment.component.ts

@@ -1,8 +1,8 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
-import {Folder} from "../../../../../business/folder/folder.model";
-import {Attachment} from "../../../../../business/attachment/Attachment.model";
-import {FolderService} from "../../../../../business/folder/folder.service";
+import {Folder} from "../../../../business/item/folder/folder.model";
+import {Attachment} from "../../../../business/attachment/Attachment.model";
+import {FolderService} from "../../../../business/item/folder/folder.service";
 
 @Component({
   selector: 'app-attachment',

frontend/src/app/gui/attachment-list/show/diashow/diashow.component.ts

@@ -1,5 +1,5 @@
 import {Component, HostListener, Input, OnInit} from '@angular/core';
-import {Attachment} from "../../../../../business/attachment/Attachment.model";
+import {Attachment} from "../../../../business/attachment/Attachment.model";
 
 @Component({
   selector: 'app-diashow',

frontend/src/app/gui/common/dropdown/dropdown.component.ts

@@ -1,6 +1,6 @@
 import {Component, ElementRef, Input, OnInit, Renderer2, ViewChild} from '@angular/core';
 import {DropdownItem} from './data/dropdown.item';
-import {Accent} from "../../../business/folder/Accent.model";
+import {Accent} from "../../../business/item/folder/Accent.model";
 
 @Component({
   selector: 'app-dropdown',

frontend/src/app/gui/common/modal/modal.component.ts

@@ -1,6 +1,6 @@
 import {AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock';
-import {Accent} from "../../../business/folder/Accent.model";
+import {Accent} from "../../../business/item/folder/Accent.model";
 
 @Component({
   selector: 'app-modal',

frontend/src/app/gui/folder/view/item/listview/folderitem-listview/folderitem-listview.component.scss

@@ -1 +0,0 @@
-@import "src/app/gui/folder/view/item/listview/shared";

frontend/src/app/gui/folder/view/item/listview/noteitem-listview/noteitem-listview.component.scss

@@ -1 +0,0 @@
-@import "src/app/gui/folder/view/item/listview/shared";

frontend/src/app/gui/folder/view/item/listview/taskitem-listview/task-item-listview.component.scss

@@ -1 +0,0 @@
-@import "src/app/gui/folder/view/item/listview/shared";

frontend/src/app/gui/header/header.component.ts

@@ -3,7 +3,7 @@ import {AuthService} from '../../auth/auth.service';
 import {DropdownItem} from '../common/dropdown/data/dropdown.item';
 import {DropdownActionItem} from '../common/dropdown/data/dropdown.action-item';
 import {DropdownDivider} from '../common/dropdown/data/dropdown.divider';
-import {Accent} from "../../business/folder/Accent.model";
+import {Accent} from "../../business/item/folder/Accent.model";
 
 @Component({
   selector: 'app-header',

frontend/src/app/gui/item/folder/folder-edit/folder-edit.component.ts

@@ -1,13 +1,13 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Params, Router} from '@angular/router';
-import {ModalComponent} from "../../common/modal/modal.component";
-import {Folder} from "../../../business/folder/folder.model";
-import {FolderService} from "../../../business/folder/folder.service";
-import {AuthService} from "../../../auth/auth.service";
-import {User} from "../../../business/user/user.model";
-import {Accent} from "../../../business/folder/Accent.model";
-import {Background} from "../../../business/folder/Background.model";
-import {ViewMode} from "../../../business/folder/viewMode.model";
+import {ModalComponent} from "../../../common/modal/modal.component";
+import {Folder} from "../../../../business/item/folder/folder.model";
+import {FolderService} from "../../../../business/item/folder/folder.service";
+import {AuthService} from "../../../../auth/auth.service";
+import {User} from "../../../../business/user/user.model";
+import {Accent} from "../../../../business/item/folder/Accent.model";
+import {Background} from "../../../../business/item/folder/Background.model";
+import {ViewMode} from "../../../../business/item/folder/viewMode.model";
 import {ImageCroppedEvent} from "ngx-image-cropper";
 
 @Component({

frontend/src/app/gui/item/folder/folder-name/folder-name.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {Folder} from "../../../business/folder/folder.model";
+import {Folder} from "../../../../business/item/folder/folder.model";
 
 @Component({
   selector: 'app-folder-name',

frontend/src/app/gui/item/folder/folder-path/folder-path.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {FolderService} from "../../../business/folder/folder.service";
-import {Folder} from "../../../business/folder/folder.model";
+import {FolderService} from "../../../../business/item/folder/folder.service";
+import {Folder} from "../../../../business/item/folder/folder.model";
 
 @Component({
   selector: 'app-folder-path',

frontend/src/app/gui/item/folder/view/folder-sidebar/folder-sidebar.component.ts

@@ -1,11 +1,11 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {DropdownItem} from '../../../common/dropdown/data/dropdown.item';
-import {DropdownActionItem} from '../../../common/dropdown/data/dropdown.action-item';
+import {DropdownItem} from '../../../../common/dropdown/data/dropdown.item';
+import {DropdownActionItem} from '../../../../common/dropdown/data/dropdown.action-item';
 import {Router} from '@angular/router';
-import {DropdownDivider} from '../../../common/dropdown/data/dropdown.divider';
-import {Folder} from "../../../../business/folder/folder.model";
-import {FolderService} from "../../../../business/folder/folder.service";
-import {ViewMode} from "../../../../business/folder/viewMode.model";
+import {DropdownDivider} from '../../../../common/dropdown/data/dropdown.divider';
+import {Folder} from "../../../../../business/item/folder/folder.model";
+import {FolderService} from "../../../../../business/item/folder/folder.service";
+import {ViewMode} from "../../../../../business/item/folder/viewMode.model";
 
 @Component({
   selector: 'folder-sidebar',

frontend/src/app/gui/item/folder/view/folder.component.ts

@@ -1,14 +1,14 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute, Params, Router} from "@angular/router";
-import {Pair} from "../../../common/Pair";
-import {DataLoader} from '../../common/virtual-list/rest-datasource/data.loader';
-import {Pagination} from '../../../api/dto/paging/pagination';
+import {Pair} from "../../../../common/Pair";
+import {DataLoader} from '../../../common/virtual-list/rest-datasource/data.loader';
+import {Pagination} from '../../../../api/dto/paging/pagination';
 import {Observable, Subscription} from 'rxjs';
-import {Paged} from '../../../api/dto/paging/paged';
-import {Folder} from "../../../business/folder/folder.model";
-import {ViewMode} from "../../../business/folder/viewMode.model";
-import {OverviewItem} from "../../../business/folder/overviewItem.model";
-import {FolderService} from "../../../business/folder/folder.service";
+import {Paged} from '../../../../api/dto/paging/paged';
+import {Folder} from "../../../../business/item/folder/folder.model";
+import {ViewMode} from "../../../../business/item/folder/viewMode.model";
+import {OverviewItem} from "../../../../business/item/folder/overviewItem.model";
+import {FolderService} from "../../../../business/item/folder/folder.service";
 
 @Component({
   selector: 'app-box',

frontend/src/app/gui/item/folder/view/item/boxview/folder-item-box-view/folder-item.box-view.component.scss

@@ -1,4 +1,4 @@
-@import "src/app/gui/folder/view/item/boxview/shared";
+@import "src/app/gui/item/folder/view/item/boxview/shared";
 
 .accent {
   width: 10px;

frontend/src/app/gui/item/folder/view/item/boxview/folder-item-box-view/folder-item.box-view.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {FolderOverview} from "../../../../../../business/folder/FolderOverview.model";
+import {FolderOverview} from "../../../../../../../business/item/folder/FolderOverview.model";
 
 @Component({
   selector: 'folderitem-boxview',

frontend/src/app/gui/item/folder/view/item/boxview/note-item-box-view/note-item-box-view.component.scss

@@ -1,4 +1,4 @@
-@import "src/app/gui/folder/view/item/boxview/shared";
+@import "src/app/gui/item/folder/view/item/boxview/shared";
 @import "src/styles/styles";
 
 .note-box .title {

frontend/src/app/gui/item/folder/view/item/boxview/note-item-box-view/note-item-box-view.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {NoteOverview} from "../../../../../../business/folder/noteOverview.model";
+import {NoteOverview} from "../../../../../../../business/item/folder/noteOverview.model";
 
 @Component({
   selector: 'noteitem-boxview',

frontend/src/app/gui/item/folder/view/item/boxview/task-item-box-view/task-item-box-view.component.scss

@@ -1,4 +1,4 @@
-@import "src/app/gui/folder/view/item/boxview/shared";
+@import "src/app/gui/item/folder/view/item/boxview/shared";
 @import "src/styles/styles";
 
 .note-box .title {

frontend/src/app/gui/item/folder/view/item/boxview/task-item-box-view/task-item-box-view.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {TaskOverview} from "../../../../../../business/folder/taskOverview.model";
+import {TaskOverview} from "../../../../../../../business/item/folder/taskOverview.model";
 
 @Component({
   selector: 'taskitem-boxview',

frontend/src/app/gui/item/folder/view/item/listview/folderitem-listview/folderitem-listview.component.scss

@@ -0,0 +1 @@
+@import "src/app/gui/item/folder/view/item/listview/shared";

frontend/src/app/gui/item/folder/view/item/listview/folderitem-listview/folderitem-listview.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {FolderOverview} from "../../../../../../business/folder/FolderOverview.model";
+import {FolderOverview} from "../../../../../../../business/item/folder/FolderOverview.model";
 
 @Component({
   selector: 'folderitem-listview',

frontend/src/app/gui/item/folder/view/item/listview/noteitem-listview/noteitem-listview.component.scss

@@ -0,0 +1 @@
+@import "src/app/gui/item/folder/view/item/listview/shared";

frontend/src/app/gui/item/folder/view/item/listview/noteitem-listview/noteitem-listview.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {NoteOverview} from "../../../../../../business/folder/noteOverview.model";
+import {NoteOverview} from "../../../../../../../business/item/folder/noteOverview.model";
 
 @Component({
   selector: 'noteitem-listview',

frontend/src/app/gui/item/folder/view/item/listview/taskitem-listview/task-item-listview.component.scss

@@ -0,0 +1 @@
+@import "src/app/gui/item/folder/view/item/listview/shared";

frontend/src/app/gui/item/folder/view/item/listview/taskitem-listview/task-item-listview.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {TaskOverview} from "../../../../../../business/folder/taskOverview.model";
+import {TaskOverview} from "../../../../../../../business/item/folder/taskOverview.model";
 
 @Component({
   selector: 'task-item-listview',

frontend/src/app/gui/item/note/note-edit/note-edit.component.ts

@@ -2,9 +2,9 @@ import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {NoteService} from "../note.service";
 import {NoteComponent} from "../note.component";
-import {AuthService} from "../../../auth/auth.service";
-import {Note} from "../../../business/note/note.model";
-import {FolderService} from "../../../business/folder/folder.service";
+import {AuthService} from "../../../../auth/auth.service";
+import {Note} from "../../../../business/item/note/note.model";
+import {FolderService} from "../../../../business/item/folder/folder.service";
 
 @Component({
   selector: 'app-note-edit',

frontend/src/app/gui/item/note/note-header/note-header.component.ts

@@ -1,12 +1,12 @@
 import {Component, Input, OnInit, ViewChild} from '@angular/core';
-import {DropdownItem} from "../../common/dropdown/data/dropdown.item";
-import {DropdownActionItem} from "../../common/dropdown/data/dropdown.action-item";
-import {DropdownDivider} from "../../common/dropdown/data/dropdown.divider";
-import {ModalComponent} from "../../common/modal/modal.component";
+import {DropdownItem} from "../../../common/dropdown/data/dropdown.item";
+import {DropdownActionItem} from "../../../common/dropdown/data/dropdown.action-item";
+import {DropdownDivider} from "../../../common/dropdown/data/dropdown.divider";
+import {ModalComponent} from "../../../common/modal/modal.component";
 import {ActivatedRoute, Router} from "@angular/router";
 import {NoteService} from "../note.service";
-import {Note} from "../../../business/note/note.model";
-import {Folder} from "../../../business/folder/folder.model";
+import {Note} from "../../../../business/item/note/note.model";
+import {Folder} from "../../../../business/item/folder/folder.model";
 
 @Component({
   selector: 'app-note-header',
@@ -28,6 +28,9 @@ export class NoteHeaderComponent implements OnInit {
     new DropdownActionItem('fa fa-pencil', 'Edit', () => {
       this.router.navigate(['/note/' + this.note.id + '/edit']);
     }),
+    new DropdownActionItem('fas fa-times-circle', 'Close', () => {
+      this.router.navigate(['/folder/' + this.folder.id]);
+    }),
     new DropdownDivider(),
     new DropdownActionItem('fas fa-trash-alt', 'Delete this', () => {
       this.deleteDialog.show();

frontend/src/app/gui/item/note/note-view/note-view.component.ts

@@ -2,8 +2,8 @@ import {Component} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {NoteService} from "../note.service";
 import {NoteComponent} from "../note.component";
-import {AuthService} from "../../../auth/auth.service";
-import {FolderService} from "../../../business/folder/folder.service";
+import {AuthService} from "../../../../auth/auth.service";
+import {FolderService} from "../../../../business/item/folder/folder.service";
 
 @Component({
   selector: 'app-note-view',

frontend/src/app/gui/item/note/note.component.ts

@@ -1,11 +1,11 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Params, Router} from '@angular/router';
-import {AuthService} from "../../auth/auth.service";
+import {AuthService} from "../../../auth/auth.service";
 import {NoteService} from "./note.service";
-import {User} from "../../business/user/user.model";
-import {Folder} from "../../business/folder/folder.model";
-import {Note} from "../../business/note/note.model";
-import {FolderService} from "../../business/folder/folder.service";
+import {User} from "../../../business/user/user.model";
+import {Folder} from "../../../business/item/folder/folder.model";
+import {Note} from "../../../business/item/note/note.model";
+import {FolderService} from "../../../business/item/folder/folder.service";
 
 @Component({
   selector: 'app-abstract-note',

frontend/src/app/gui/item/note/note.service.ts

@@ -1,10 +1,10 @@
 import {map} from 'rxjs/operators';
 import {Injectable} from '@angular/core';
-import {BoxitApi} from '../../api/boxit.api';
-import {NoteDto} from '../../api/dto/note/note.dto';
-import {NotificationService} from "../../business/notification.service";
-import {Note} from "../../business/note/note.model";
-import {NoteMapper} from "../../business/note/note.mapper";
+import {BoxitApi} from '../../../api/boxit.api';
+import {NoteDto} from '../../../api/dto/note/note.dto';
+import {NotificationService} from "../../../business/notification.service";
+import {Note} from "../../../business/item/note/note.model";
+import {NoteMapper} from "../../../business/item/note/note.mapper";
 
 @Injectable()
 export class NoteService {

frontend/src/app/gui/item/task/task-header/task-header.component.html

@@ -0,0 +1,45 @@
+<div class="contentBoxHead {{folder.accent.color}}">
+  <img [attr.src]="avatarUrl()" class="img-thumbnail"/>
+  <a class="header-folder-name clean" routerLink="/folder/{{folder.id}}">
+    <app-folder-name [folder]="folder"></app-folder-name>
+  </a>
+  / {{task.title}}
+  <div class="spacer"></div>
+  <div class="leftSide">
+    <a class="btn-link {{folder.accent.color}}" (click)="onInfo()">
+      <i class="fas fa-info-circle"></i>
+    </a>
+    <app-dropdown [items]="hamburgerEntries" alignMenuRight="true">
+      <a class="btn-link {{folder.accent.color}}">
+        <i class="fas fa-bars hamburger"></i>
+      </a>
+    </app-dropdown>
+  </div>
+</div>
+
+<!-- InfoModal -->
+<app-modal #infoDialog [title]="'Details'" [accent]="folder.accent">
+  <div content>
+    <p>
+      <b>Id:</b> {{task.id ? task.id : 'n/a'}}<br/>
+      <b>Owner:</b> {{task.ownerId}}<br/>
+      <b>Created:</b> {{task.createdAt | date:'yyyy.MM.dd HH:mm'}}<br/>
+      <b>Edited:</b> {{task.editedLastAt | date:'yyyy.MM.dd HH:mm'}}<br/>
+    </p>
+  </div>
+</app-modal>
+
+<!-- DeleteModal -->
+<app-modal #deleteDialog [title]="'Delete'" [accent]="folder.accent">
+  <div content>
+    <p>Are you sure you want delete this note?</p>
+  </div>
+  <div footer class="formButtonBar">
+    <button (click)="deleteDialog.hide()" [ngClass]="'btn float-left ' + folder.accent.color">
+      <i class="fas fa-times-circle"></i> Cancel
+    </button>
+    <button (click)="onDelete()" class="btn btn-primary btn-danger" type="button">
+      <i class="fas fa-trash-alt"></i> delete
+    </button>
+  </div>
+</app-modal>

frontend/src/app/gui/item/task/task-header/task-header.component.scss

@@ -0,0 +1,25 @@
+@import "src/styles/styles";
+
+.img-thumbnail {
+  grid-area: avatar;
+  @extend .circle;
+  padding: 0px;
+  border: 2px solid white;
+  margin-top: -7px;
+  margin-bottom: -8px;
+}
+
+.header-folder-name {
+  grid-area: folderName;
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.leftSide {
+  .fas {
+    margin-left: $spacing-small;
+  }
+}

frontend/src/app/gui/item/task/task-header/task-header.component.ts

@@ -0,0 +1,61 @@
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {Folder} from '../../../../business/item/folder/folder.model';
+import {ModalComponent} from '../../../common/modal/modal.component';
+import {DropdownItem} from '../../../common/dropdown/data/dropdown.item';
+import {DropdownActionItem} from '../../../common/dropdown/data/dropdown.action-item';
+import {DropdownDivider} from '../../../common/dropdown/data/dropdown.divider';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Task} from '../../../../business/item/task/task.model';
+import {TaskService} from '../task.service';
+
+@Component({
+  selector: 'app-task-header',
+  templateUrl: './task-header.component.html',
+  styleUrls: ['./task-header.component.scss']
+})
+export class TaskHeaderComponent implements OnInit {
+
+  @Input() public task: Task;
+  @Input() public folder: Folder;
+
+  @ViewChild('infoDialog', {read: false})
+  private infoDialog: ModalComponent;
+
+  @ViewChild('deleteDialog', {read: false})
+  private deleteDialog: ModalComponent;
+
+  hamburgerEntries: DropdownItem[] = [
+    new DropdownActionItem('fa fa-pencil', 'Edit', () => {
+      this.router.navigate(['/task/' + this.task.id + '/edit']);
+    }),
+    new DropdownActionItem('fas fa-times-circle', 'Close', () => {
+      this.router.navigate(['/folder/' + this.folder.id]);
+    }),
+    new DropdownDivider(),
+    new DropdownActionItem('fas fa-trash-alt', 'Delete this', () => {
+      this.deleteDialog.show();
+    })
+  ];
+
+  constructor(private router: Router,
+              private route: ActivatedRoute,
+              private taskService: TaskService) {
+  }
+
+  ngOnInit() {
+  }
+
+  public avatarUrl() {
+    return `/api/user/${this.task.ownerId}/avatar`;
+  }
+
+  public onInfo() {
+    this.infoDialog.show();
+  }
+
+  public onDelete() {
+    this.taskService.delete(this.task).then((ok: any) => {
+      this.router.navigate(['/folder/' + this.task.folderId]);
+    });
+  }
+}

frontend/src/app/gui/item/task/task-view/task-view.component.html

@@ -0,0 +1,34 @@
+<app-header *ngIf="folder" [accent]="folder.accent"></app-header>
+<div *ngIf="task && folder" [ngClass]="'mainView ' + folder.backGround.image">
+
+  <div class="contentBox">
+    <app-task-header [folder]="folder" [task]="task"></app-task-header>
+    <article *ngIf="task" class="contentBoxContent">
+      <section>
+        <markdown [data]="task.description"></markdown>
+      </section>
+      <section>
+        <hr/>
+        <div class="fields">
+          <div class="label label-priority">Priority:</div>
+          <div class="value value-priority"><i [class]="task.priority.fontAwesomeClass" [style.color]="task.priority.color"></i> {{'item.task.priority.' + task.priority.name | translate}}</div>
+          <div class="label label-state">State:</div>
+          <div class="value value-state">{{'item.task.state.' + task.state | translate}}</div>
+          <div class="label label-start">Start:</div>
+          <div class="value value-start"><time [dateTime]="task.startAt | date:'yyyy-MM-dd'">{{task.startAt | date:'yyyy.MM.dd'}}</time></div>
+          <div class="label label-due">Due:</div>
+          <div class="value value-due"><time [dateTime]="task.dueAt | date:'yyyy-MM-dd'">{{task.dueAt | date:'yyyy.MM.dd'}}</time></div>
+        </div>
+      </section>
+      <section *ngIf="task.location && !task.location.isNull()">
+        <hr/>
+        <app-location-view [location]="task.location"></app-location-view>
+      </section>
+      <section *ngIf="task.attachments.length > 0">
+        <hr/>
+        <app-attachment-list [path]="'api/task/' + task.id" [attachments]="task.attachments"></app-attachment-list>
+      </section>
+    </article>
+
+  </div>
+</div>

frontend/src/app/gui/item/task/task-view/task-view.component.scss

@@ -0,0 +1,66 @@
+@import "src/styles/styles";
+
+.mainView {
+  padding: $spacing-extra-large $spacing-large;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+
+  height: calc(100vh - #{$header-high});
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+hr {
+  height: 0;
+  border: 0;
+  border-bottom: 1px solid $color-hr;
+  margin-bottom: $spacing-large;
+  margin-top: $spacing-large;
+}
+
+@include tablet-up {
+  .fields {
+    grid-template-columns: max-content auto max-content auto;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+    "LabelPriority ValuePriority LabelStart ValueStart"
+    "LabelState ValueState LabelDue ValueDue";
+  }
+}
+
+@include phablet-down {
+  .fields {
+    grid-template-columns: max-content auto;
+    grid-template-rows: auto auto auto auto;
+    grid-template-areas:
+      "LabelPriority ValuePriority"
+      "LabelState ValueState"
+      "LabelStart ValueStart"
+      "LabelDue ValueDue";
+  }
+}
+
+.fields {
+  display: grid;
+  grid-column-gap: $spacing-large;
+  grid-row-gap: $spacing-small;
+
+  .label-priority { grid-area: LabelPriority}
+  .value-priority { grid-area: ValuePriority}
+  .label-state { grid-area: LabelState }
+  .value-state { grid-area: ValueState }
+  .label-start { grid-area: LabelStart }
+  .value-start { grid-area: ValueStart }
+  .label-due { grid-area: LabelDue }
+  .value-due { grid-area: ValueDue }
+
+  .label {
+    @extend .font;
+    font-weight: bold;
+  }
+}
+
+article {
+  color: $color-font-dark;
+}

frontend/src/app/gui/item/task/task-view/task-view.component.ts

@@ -1,9 +1,9 @@
 import {Component} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
-import {AuthService} from "../../../auth/auth.service";
+import {AuthService} from "../../../../auth/auth.service";
 import {TaskService} from "../task.service";
 import {TaskComponent} from "../task.component";
-import {FolderService} from "../../../business/folder/folder.service";
+import {FolderService} from "../../../../business/item/folder/folder.service";
 
 @Component({
   selector: 'app-task-view',

frontend/src/app/gui/item/task/task.component.ts

@@ -1,11 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import {ActivatedRoute, Params, Router} from "@angular/router";
 import {TaskService} from "./task.service";
-import {AuthService} from "../../auth/auth.service";
-import {User} from "../../business/user/user.model";
-import {Task} from "../../business/task/task.model";
-import {Folder} from "../../business/folder/folder.model";
-import {FolderService} from "../../business/folder/folder.service";
+import {AuthService} from "../../../auth/auth.service";
+import {User} from "../../../business/user/user.model";
+import {Task} from "../../../business/item/task/task.model";
+import {Folder} from "../../../business/item/folder/folder.model";
+import {FolderService} from "../../../business/item/folder/folder.service";
 
 @Component({
   selector: 'app-task',

frontend/src/app/gui/item/task/task.service.ts

@@ -1,10 +1,10 @@
-import {BoxitApi} from "../../api/boxit.api";
-import {NotificationService} from "../../business/notification.service";
+import {BoxitApi} from "../../../api/boxit.api";
+import {NotificationService} from "../../../business/notification.service";
 import {Injectable} from "@angular/core";
 import {map} from "rxjs/operators";
-import {TaskDto} from "../../api/dto/task/task.dto";
-import {Task} from "../../business/task/task.model";
-import {TaskMapper} from "../../business/task/task.mapper";
+import {TaskDto} from "../../../api/dto/task/task.dto";
+import {Task} from "../../../business/item/task/task.model";
+import {TaskMapper} from "../../../business/item/task/task.mapper";
 
 @Injectable()
 export class TaskService {

frontend/src/app/gui/location/edit/location-edit.component.ts

@@ -1,7 +1,7 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {Folder} from "../../../../business/folder/folder.model";
-import {Coordinates} from "../../../../business/location/Coordinates.model";
-import {Location} from "../../../../business/location/Location.model";
+import {Folder} from "../../../business/item/folder/folder.model";
+import {Coordinates} from "../../../business/location/Coordinates.model";
+import {Location} from "../../../business/location/Location.model";
 
 @Component({
   selector: 'app-location-edit',