tasks frontend

matsen-tool/src/app/_views/tasks/new-task-note/new-task-note.component.html

@@ -11,12 +11,13 @@
         </div>
 
         <div class="mb-3">
-            <label for="contactType" class="form-label">{{ 'form.contactType' | translate }}:</label>
-            <select class="form-control" id="contactType" formControlName="contactType">
-                <option *ngFor="let type of contactTypes" [value]="type">
-                    {{ getTranslationKey(type) | translate }}
-                </option>
-            </select>
+            <p class="form-label">{{ 'form.contact-type' | translate }}:</p>
+            <div class="d-flex">
+                <div class="form-check me-3" *ngFor="let type of contactTypes; let i = index">
+                    <input type="radio" class="form-check-input" id="radio-{{ type }}" formControlName="contactType" [value]="type" />
+                    <label for="radio-{{ type }}" class="form-check-label">{{ getTranslationKey(type) | translate }}</label>
+                </div>
+            </div>
         </div>
 
         <button type="submit" class="btn btn-primary" [disabled]="taskNoteForm.invalid">{{ 'form.send' | translate }}

matsen-tool/src/app/_views/tasks/new-task-note/new-task-note.component.ts

@@ -1,5 +1,5 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {TaskJsonld, TaskNoteJsonld, TaskNoteService} from "@app/core/api/v1";
+import {TaskNoteJsonld, TaskNoteService} from "@app/core/api/v1";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {FormGroup} from "@angular/forms";
 import {Subscription} from "rxjs";
@@ -30,11 +30,17 @@ export class NewTaskNoteComponent {
 
   ngOnInit(): void {
     this.taskNoteForm = FormGroupInitializer.initFormGroup(this.taskNoteForm, this.taskNote);
+    const contactTypeControl = this.taskNoteForm.get('contactType');
+    // Set first radio checked
+    if (contactTypeControl && !contactTypeControl.value) {
+      contactTypeControl.patchValue(this.contactTypes[0]);
+    }
+    console.log(this.taskNoteForm);
   }
 
-    getTranslationKey(type: string): string {
-        return `task-note.type-${type}`;
-    }
+  getTranslationKey(type: string): string {
+      return `task-note.type-${type}`;
+  }
 
   onSubmit() {
     if (this.taskNoteForm.valid) {

matsen-tool/src/app/_views/tasks/new-task/new-task.component.ts

@@ -80,6 +80,8 @@ export class NewTaskComponent implements OnInit {
         // Set T12:00 for correct string
         let selectedItemValue = selectedItem.target.value + "T12:00";
         this.taskForm.get('dueAt')?.setValue(selectedItemValue);
+        console.log(this.taskForm);
+        console.log(this.taskForm.value);
     }
 
     protected onSubmit() {

matsen-tool/src/app/_views/tasks/task-list/task-list.component.html

@@ -9,106 +9,113 @@
                 [dataSource]="dataSource"
     >
         <div class="tasks-box">
-            <div class="mb-3 mt-3 taskCompactModeBox" (click)="switchTaskDisplay()"
-                 [class.taskCompactMode]="taskCompactMode">Kompaktansicht
+            <div class="mb-3 mt-3 d-flex">
+                <div class="taskCompactModeBox" (click)="switchTaskCompactMode()"
+                     [class.taskCompactMode]="taskCompactMode">{{ 'overview.compact-view' | translate }}
+                </div>
+                <div class="taskCompactModeBox ms-3" (click)="switchTaskHideDone()"
+                     [class.taskHideDone]="taskHideDone">{{ 'overview.show-done' | translate }}
+                </div>
             </div>
             <div class="tasks pb-1" *ngFor="let task of tasks">
-                <div class="card p-3" *ngIf="taskCompactMode">
-                    <div class="row pb-1">
-                        <div class="col-12">
-                            <div class="info-box">
-                                <span class="importance" [attr.data-importance]="task.prio"></span>
-                                <span class="due-date pe-3">{{ task.dueAt | date:'dd.MM.YYYY - HH:mm':'GMT+0000' }}
-                                    Uhr</span>
-                                <h3 class="m-0 pe-3" *ngIf="task.partner">
+                <ng-container *ngIf="taskHideDone">
+                    <div class="card ps-3 pe-3 pt-3" [ngClass]="{'task-completed': task.completed}" *ngIf="taskCompactMode">
+                        <div class="row pb-1">
+                            <div class="col-12">
+                                <div class="info-box">
+                                    <span class="importance" [attr.data-importance]="task.prio"></span>
+                                    <span class="due-date pe-3">{{ task.dueAt | date:'dd.MM.YYYY - HH:mm':'GMT+0000' }}
+                                        Uhr</span>
+                                    <h3 class="m-0 pe-3" *ngIf="task.partner">
+                                        <app-linked-label [partner]="task.partner"></app-linked-label>
+                                    </h3>
+                                    <h3 class="m-0 pe-3" *ngIf="task.product">
+                                        <app-linked-label [product]="task.product"></app-linked-label>
+                                    </h3>
+                                    <p class="m-0" *ngIf="task.assignedTo">
+                                        <app-linked-label [user]="task.assignedTo"></app-linked-label>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row spt-compact">
+                            <div class="col-12 col-md-4">
+                                <h2 class="m-0">{{ task.headline }}</h2>
+                            </div>
+                            <div class="col-12 col-md-8">
+                                <p class="m-0 mb-3 mt-2"
+                                   [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p>
+                                <span *ngIf="task.createdBy === currentUser?.id" class="position-absolute bi bi-pencil p-2"
+                                      data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
+                                <div class="spt-comments-box d-flex justify-content-end mt-1 position-absolute">
+                                    <span *ngIf="task.numTaskNotes !== undefined && task.numTaskNotes !== null && task.numTaskNotes > 0"
+                                          role="button" class="spt-btn-low badge bg-secondary p-2 me-2"
+                                          (click)="showTaskNotes(task)">
+                                        <ng-container
+                                                *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
+                                        <ng-container
+                                                *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}
+                                            ({{ task.numTaskNotes }})</ng-container>
+                                    </span>
+                                    <span role="button" class="badge bg-secondary p-2"
+                                          (click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card p-3" [ngClass]="{'task-completed': task.completed}" *ngIf="!taskCompactMode">
+                        <div class="row">
+                            <div class="col-12 col-sm-6 col-lg-4">
+                                <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY - HH:mm':'GMT+0000' }} Uhr</span>
+                                <h3 class="m-0" *ngIf="task.partner">
                                     <app-linked-label [partner]="task.partner"></app-linked-label>
                                 </h3>
-                                <h3 class="m-0 pe-3" *ngIf="task.product">
+                                <h3 class="m-0" *ngIf="task.product">
                                     <app-linked-label [product]="task.product"></app-linked-label>
                                 </h3>
-                                <p class="m-0" *ngIf="task.assignedTo">
+                                <p *ngIf="task.assignedTo">
                                     <app-linked-label [user]="task.assignedTo"></app-linked-label>
                                 </p>
                             </div>
-                        </div>
-                    </div>
-                    <div class="row spt-compact">
-                        <div class="col-12 col-md-4">
-                            <h2 class="m-0">{{ task.headline }}</h2>
-                        </div>
-                        <div class="col-12 col-md-8">
-                            <p class="m-0 mb-3 mt-2"
-                               [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p>
-                            <span *ngIf="task.createdBy === currentUser?.id" class="position-absolute bi bi-pencil p-2"
-                                  data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
-                            <div class="spt-comments-box d-flex justify-content-end mt-1 position-absolute">
-                                <span *ngIf="task.numTaskNotes !== undefined && task.numTaskNotes !== null && task.numTaskNotes > 0"
-                                      role="button" class="spt-btn-low badge bg-secondary p-2 me-2"
-                                      (click)="showTaskNotes(task)">
-                                    <ng-container
-                                            *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
-                                    <ng-container
-                                            *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}
-                                        ({{ task.numTaskNotes }})</ng-container>
-                                </span>
-                                <span role="button" class="badge bg-secondary p-2"
-                                      (click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="card p-3" *ngIf="!taskCompactMode">
-                    <div class="row">
-                        <div class="col-12 col-sm-6 col-lg-4">
-                            <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY - HH:mm':'GMT+0000' }} Uhr</span>
-                            <h3 class="m-0" *ngIf="task.partner">
-                                <app-linked-label [partner]="task.partner"></app-linked-label>
-                            </h3>
-                            <h3 class="m-0" *ngIf="task.product">
-                                <app-linked-label [product]="task.product"></app-linked-label>
-                            </h3>
-                            <p *ngIf="task.assignedTo">
-                                <app-linked-label [user]="task.assignedTo"></app-linked-label>
-                            </p>
-                        </div>
-                        <div class="spt-border col-12 col-sm-6 col-lg-8">
-                            <span class="importance" [attr.data-importance]="task.prio"></span>
-                            <h2 class="m-0">{{ task.headline }}</h2>
-                            <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p>
-                            <span *ngIf="task.createdBy === currentUser?.id" class="position-absolute bi bi-pencil p-2"
-                                  data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
-                            <div class="spt-comments-box d-flex justify-content-end mt-1 position-absolute">
-                                <span *ngIf="task.numTaskNotes !== undefined && task.numTaskNotes !== null && task.numTaskNotes > 0"
-                                      role="button" class="spt-btn-low badge bg-secondary p-2 me-2"
-                                      (click)="showTaskNotes(task)">
-                                    <ng-container
-                                            *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
-                                    <ng-container
-                                            *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}
-                                        ({{ task.numTaskNotes }})</ng-container>
-                                </span>
-                                <span role="button" class="badge bg-secondary p-2"
-                                      (click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
+                            <div class="spt-border col-12 col-sm-6 col-lg-8">
+                                <span class="importance" [attr.data-importance]="task.prio"></span>
+                                <h2 class="m-0">{{ task.headline }}</h2>
+                                <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p>
+                                <span *ngIf="task.createdBy === currentUser?.id" class="position-absolute bi bi-pencil p-2"
+                                      data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
+                                <div class="spt-comments-box d-flex justify-content-end mt-1 position-absolute">
+                                    <span *ngIf="task.numTaskNotes !== undefined && task.numTaskNotes !== null && task.numTaskNotes > 0"
+                                          role="button" class="spt-btn-low badge bg-secondary p-2 me-2"
+                                          (click)="showTaskNotes(task)">
+                                        <ng-container
+                                                *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
+                                        <ng-container
+                                                *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}
+                                            ({{ task.numTaskNotes }})</ng-container>
+                                    </span>
+                                    <span role="button" class="badge bg-secondary p-2"
+                                          (click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <div *ngIf="task.id && taskNotesVisibility.get(task.id)" class="pb-1">
-                    <div class="card spt-comments" *ngFor="let taskNote of taskNotes.get(task.id)">
-                        <div class="card-body">
-                            <div class="d-flex justify-content-between align-items-center">
-                                <p>{{ taskNote.owner?.firstName }} {{ taskNote.owner?.lastName }}</p>
-                                <p>{{ taskNote.createdAt | date:'dd.MM.YYYY - HH:mm':'GMT+0000' }} Uhr</p>
+                    <div *ngIf="task.id && taskNotesVisibility.get(task.id)" class="pb-1">
+                        <div class="card spt-comments" *ngFor="let taskNote of taskNotes.get(task.id)">
+                            <div class="card-body">
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <p>{{ taskNote.owner?.firstName }} {{ taskNote.owner?.lastName }} - {{ getTranslationKey(taskNote.contactType) | translate }}</p>
+                                    <p>{{ taskNote.createdAt | date:'dd.MM.YYYY - HH:mm':'GMT+0000' }} Uhr</p>
+                                </div>
+                                <div>
+                                    <p [innerHTML]="appHelperService.getSafeLongtext(taskNote.message)"></p>
+                                </div>
+                                <span *ngIf="taskNote.owner === currentUser?.id" class="position-absolute bi bi-pencil p-2"
+                                      data-type="user-tool" data-action="edit"
+                                      (click)="openModalEditTaskNote(taskNote)"></span>
                             </div>
-                            <div>
-                                <p [innerHTML]="appHelperService.getSafeLongtext(taskNote.message)"></p>
-                            </div>
-                            <span *ngIf="taskNote.owner === currentUser?.id" class="position-absolute bi bi-pencil p-2"
-                                  data-type="user-tool" data-action="edit"
-                                  (click)="openModalEditTaskNote(taskNote)"></span>
                         </div>
                     </div>
-                </div>
+                </ng-container>
             </div>
         </div>
     </app-paging>

matsen-tool/src/app/_views/tasks/task-list/task-list.component.ts

@@ -34,6 +34,7 @@ export class TaskListComponent implements OnInit, AfterViewInit {
     protected tasks: Array<TaskJsonld>;
     protected dataSource;
     protected taskCompactMode: boolean;
+    protected taskHideDone: boolean;
     protected taskNotes: Map<string, TaskNoteJsonld[]>;
     protected taskSub: Subscription;
 
@@ -42,8 +43,8 @@ export class TaskListComponent implements OnInit, AfterViewInit {
     constructor(
         private taskService: TaskService,
         private accountService: AccountService,
+        private taskNoteService: TaskNoteService,
         protected appHelperService: AppHelperService,
-        protected taskNotesService: TaskNoteService,
     ) {
         this.tasksSub = new Subscription();
         this.tasks = [];
@@ -58,11 +59,20 @@ export class TaskListComponent implements OnInit, AfterViewInit {
         } else {
             this.taskCompactMode = false;
         }
+        if (localStorage.getItem('taskHideDone') !== null) {
+            this.taskHideDone = localStorage.getItem('taskHideDone') === 'true';
+        } else {
+            this.taskHideDone = false;
+        }
     }
 
     ngOnInit(): void {
     }
 
+    getTranslationKey(type: string): string {
+        return `task-note.type-${type}`;
+    }
+
     ngAfterViewInit(): void {
         this.pagingComponent.getData();
     }
@@ -113,7 +123,7 @@ export class TaskListComponent implements OnInit, AfterViewInit {
 
     getTaskNotes = (taskIri: string) => {
         // TODO: Weiterblättern, 50 comments only
-        this.tasksNotesSub = this.taskNotesService.taskNotesGetCollection(
+        this.tasksNotesSub = this.taskNoteService.taskNotesGetCollection(
             1,
             50,
             taskIri
@@ -150,8 +160,13 @@ export class TaskListComponent implements OnInit, AfterViewInit {
         this.appHelperService.openModal(NewTaskNoteComponent, { 'taskNote': taskNote }, this.afterCommentCreation, taskNote.id);
     }
 
-    switchTaskDisplay() {
+    switchTaskCompactMode() {
         localStorage.setItem('taskCompactMode', this.taskCompactMode ? 'false' : 'true');
         this.taskCompactMode = !this.taskCompactMode;
     }
+
+    switchTaskHideDone() {
+        localStorage.setItem('taskHideDone', this.taskHideDone ? 'false' : 'true');
+        this.taskHideDone = !this.taskHideDone;
+    }
 }

matsen-tool/src/assets/i18n/de.json

@@ -89,7 +89,9 @@
     "firstName": "Vorname",
     "lastName": "Vorname",
     "email": "Email",
-    "unassign": "Zuweisung aufheben"
+    "unassign": "Zuweisung aufheben",
+    "compact-view": "Kompaktansicht",
+    "show-done": "Fertige Aufgaben anzeigen"
   },
   "form":
   {
@@ -128,7 +130,7 @@
     "send": "Speichern",
     "search-placeholder": "Suche",
     "no-data": "Keine Datensätze gefunden.",
-    "contactType": "Kontaktart"
+    "contact-type": "Kontaktart"
   },
   "sales":
   {
@@ -139,6 +141,6 @@
   {
     "type-personal": "Persönlich",
     "type-phone": "Telefon",
-    "type-email": "Email"
+    "type-email": "E-Mail"
   }
 }

matsen-tool/src/assets/scss/_tasks-posts.scss

@@ -8,6 +8,9 @@
 .tasks {
   .card {
     background: #fafafa;
+    &.task-completed {
+      background: #e5f9e4;
+    }
     .spt-border {
       border-left: 1px solid #c1c1c1;
     }
@@ -62,7 +65,8 @@
     height: 14px;
     border: 1px solid rgb(33, 37, 41);
   }
-  &.taskCompactMode {
+  &.taskCompactMode,
+  &.taskHideDone {
     &:after {
       content: "";
       position: absolute;