From 49b95b19537c260926f569c687a6dded8c510070 Mon Sep 17 00:00:00 2001
From: Florian Eisenmenger <floeis@MBP-von-Florian.fritz.box>
Date: Thu, 16 May 2024 15:47:43 +0200
Subject: [PATCH] tasks: compact mode

---
 .../tasks/task-list/task-list.component.html  |  5 ++--
 .../tasks/task-list/task-list.component.ts    | 11 ++++++++
 matsen-tool/src/assets/scss/_basics.scss      | 26 +++++++++++++++++++
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html b/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html
index 5879ebb..2a9f963 100644
--- a/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html
+++ b/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html
@@ -7,8 +7,9 @@
                 [dataSource]="dataSource"
     >
         <div class="tasks-box">
+            <div class="mb-3 mt-3 taskCompactModeBox" (click)="switchTaskDisplay()" [class.taskCompactMode]="taskCompactMode">Kompaktansicht</div>
             <div class="tasks pb-1" *ngFor="let task of tasks">
-                <div class="card p-3">
+                <div class="card p-3" *ngIf="taskCompactMode">
                     <div class="row pb-1">
                         <div class="col-12">
                             <div style="display: flex;justify-content: flex-start;align-items: center;">
@@ -42,7 +43,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="card p-3">
+                <div class="card p-3" *ngIf="!taskCompactMode">
                     <div class="row">
                         <div class="col-4">
                             <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
diff --git a/matsen-tool/src/app/_views/tasks/task-list/task-list.component.ts b/matsen-tool/src/app/_views/tasks/task-list/task-list.component.ts
index 756ea6e..489ba7d 100644
--- a/matsen-tool/src/app/_views/tasks/task-list/task-list.component.ts
+++ b/matsen-tool/src/app/_views/tasks/task-list/task-list.component.ts
@@ -24,6 +24,7 @@ export class TaskListComponent implements OnInit, AfterViewInit {
     protected tasksSub: Subscription;
     protected tasks: Array<TaskJsonld>;
     protected dataSource;
+    protected taskCompactMode: boolean;
 
     protected taskNotesVisibility: Map<string, boolean>;
 
@@ -37,6 +38,11 @@ export class TaskListComponent implements OnInit, AfterViewInit {
         this.dataSource = new MatTableDataSource<TaskJsonld>(this.tasks);
         this.taskNotesVisibility = new Map<string, boolean>();
         this.currentUser = this.accountService.userValue;
+        if (localStorage.getItem('taskCompactMode') !== null) {
+            this.taskCompactMode = localStorage.getItem('taskCompactMode') === 'true';
+        } else {
+            this.taskCompactMode = false;
+        }
     }
 
     ngOnInit(): void {
@@ -93,4 +99,9 @@ export class TaskListComponent implements OnInit, AfterViewInit {
     openModalEditTaskNote(taskNote: TaskNoteJsonld) {
         this.appHelperService.openModal(NewTaskNoteComponent, { 'taskNote': taskNote }, this.getData);
     }
+
+    switchTaskDisplay() {
+        localStorage.setItem('taskCompactMode', this.taskCompactMode ? 'false' : 'true');
+        this.taskCompactMode = !this.taskCompactMode;
+    }
 }
diff --git a/matsen-tool/src/assets/scss/_basics.scss b/matsen-tool/src/assets/scss/_basics.scss
index 744a661..740f07c 100644
--- a/matsen-tool/src/assets/scss/_basics.scss
+++ b/matsen-tool/src/assets/scss/_basics.scss
@@ -384,3 +384,29 @@ img {
     }
   }
 }
+
+.taskCompactModeBox {
+  position: relative;
+  padding-left: 20px;
+  cursor: pointer;
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 3px;
+    width: 14px;
+    height: 14px;
+    border: 1px solid rgb(33, 37, 41);
+  }
+  &.taskCompactMode {
+    &:after {
+      content: "";
+      position: absolute;
+      left: 3px;
+      top: 6px;
+      width: 8px;
+      height: 8px;
+      background: rgb(33, 37, 41);
+    }
+  }
+}