feat(xLevelSubTasks): add very basic sub sub task mode

Author: johannesjo

src/app/features/markdown-checklist/is-markdown-checklist.spec.ts

@@ -18,6 +18,7 @@ describe('isMarkdownChecklist()', () => {
   [
     // --
     '- [ ] task',
+    '   - [ ] task',
     '- [x] task another yeah',
     '\n- [ ] task\n\n',
   ].forEach((text, i) => {
@@ -30,6 +31,8 @@ describe('isMarkdownChecklist()', () => {
     // --
     'some what - [ ] task',
     '- [x] task another yeah\nSomewhat',
+    '',
+    '\n\n',
     'Some what yeah\n- [ ] task\n\n',
   ].forEach((text, i) => {
     it(`should return false for a non valid checklist #${i}`, () => {

src/app/features/markdown-checklist/is-markdown-checklist.ts

@@ -14,10 +14,16 @@ Some text yeah
 
 export const isMarkdownChecklist = (text: string): boolean => {
   try {
-    const lines = text.split('\n');
-    return lines.every(
-      (it) => it.trim() === '' || it.startsWith('- [x] ') || it.startsWith('- [ ] '),
+    const lines = text.split('\n').filter((it) => it.trim() !== '');
+
+    if (lines.length === 0) {
+      return false;
+    }
+
+    const items = lines.filter(
+      (it) => it.trim().startsWith('- [x] ') || it.trim().startsWith('- [ ] '),
     );
+    return items.length === lines.length || items.length >= 3;
   } catch (e) {
     console.error('Checklist parsing failed');
     console.error(e);

src/app/features/tasks/task-detail-panel/task-detail-panel.component.html

@@ -179,9 +179,15 @@
     [type]="'panel'"
   >
     <ng-container panel-header>
+      @if(isMarkdownChecklist){
+      <mat-icon>checklist</mat-icon>
+      Checklist
+      <!-- -->
+      } @else {
       <mat-icon *ngIf="task.notes">chat</mat-icon>
       <mat-icon *ngIf="!task.notes">chat_bubble_outline</mat-icon>
       <span>{{T.F.TASK.ADDITIONAL_INFO.NOTES|translate}}</span>
+      }
     </ng-container>
 
     <ng-container panel-content>
@@ -192,6 +198,7 @@
         (keyboardUnToggle)="focusItem(noteWrapperElRef)"
         [isFocus]="isFocusNotes"
         [isShowControls]="true"
+        [isShowChecklistToggle]="true"
         [model]="task.notes|| defaultTaskNotes"
       ></inline-markdown>
     </ng-container>

src/app/features/tasks/task-detail-panel/task-detail-panel.component.ts

@@ -71,6 +71,7 @@ import { PlannerService } from '../../planner/planner.service';
 import { DialogScheduleTaskComponent } from '../../planner/dialog-schedule-task/dialog-schedule-task.component';
 import { Store } from '@ngrx/store';
 import { selectIssueProviderById } from '../../issue/store/issue-provider.selectors';
+import { isMarkdownChecklist } from '../../markdown-checklist/is-markdown-checklist';
 
 interface IssueAndType {
   id: string | number | null;
@@ -105,6 +106,7 @@ export class TaskDetailPanelComponent implements AfterViewInit, OnDestroy {
   selectedItemIndex: number = 0;
   isFocusNotes: boolean = false;
   isDragOver: boolean = false;
+  isMarkdownChecklist: boolean = false;
 
   T: typeof T = T;
   issueAttachments: TaskAttachment[] = [];
@@ -333,6 +335,7 @@ export class TaskDetailPanelComponent implements AfterViewInit, OnDestroy {
     this.isExpandedIssuePanel = !IS_MOBILE && !!this.issueData;
     this.isExpandedNotesPanel =
       !IS_MOBILE && (!!newVal.notes || (!newVal.issueId && !newVal.attachments?.length));
+    this.isMarkdownChecklist = isMarkdownChecklist(newVal.notes || '');
   }
 
   get progress(): number {

src/app/ui/inline-markdown/inline-markdown.component.html

@@ -34,7 +34,19 @@
   *ngIf="isShowControls"
   class="controls"
 >
+  @if(isShowChecklistToggle){
+  <!--  -->
   <button
+    [matTooltip]="'Toggle checklist mode'"
+    (click)="toggleChecklistMode($event)"
+    mat-icon-button
+  >
+    <mat-icon>checklist</mat-icon>
+  </button>
+  }
+
+  <button
+    [matTooltip]="'Open in fullscreen'"
     (click)="openFullScreen()"
     mat-icon-button
   >

src/app/ui/inline-markdown/inline-markdown.component.ts

@@ -19,6 +19,7 @@ import { map, startWith } from 'rxjs/operators';
 import { GlobalConfigService } from '../../features/config/global-config.service';
 import { MatDialog } from '@angular/material/dialog';
 import { DialogFullscreenMarkdownComponent } from '../dialog-fullscreen-markdown/dialog-fullscreen-markdown.component';
+import { isMarkdownChecklist } from '../../features/markdown-checklist/is-markdown-checklist';
 
 const HIDE_OVERFLOW_TIMEOUT_DURATION = 300;
 
@@ -32,6 +33,7 @@ const HIDE_OVERFLOW_TIMEOUT_DURATION = 300;
 export class InlineMarkdownComponent implements OnInit, OnDestroy {
   @Input() isLock: boolean = false;
   @Input() isShowControls: boolean = false;
+  @Input() isShowChecklistToggle: boolean = false;
 
   @Output() changed: EventEmitter<string> = new EventEmitter();
   @Output() focused: EventEmitter<Event> = new EventEmitter();
@@ -42,6 +44,7 @@ export class InlineMarkdownComponent implements OnInit, OnDestroy {
   @ViewChild('previewEl') previewEl: MarkdownComponent | undefined;
 
   isHideOverflow: boolean = false;
+  isChecklistMode: boolean = false;
   isShowEdit: boolean = false;
   modelCopy: string | undefined;
 
@@ -78,6 +81,9 @@ export class InlineMarkdownComponent implements OnInit, OnDestroy {
         this.resizeParsedToFit();
       });
     }
+
+    this.isChecklistMode =
+      this.isChecklistMode && this.isShowChecklistToggle && !!v && isMarkdownChecklist(v);
   }
 
   @Input() set isFocus(val: boolean) {
@@ -103,6 +109,10 @@ export class InlineMarkdownComponent implements OnInit, OnDestroy {
     }
   }
 
+  checklistToggle(): void {
+    this.isChecklistMode = !this.isChecklistMode;
+  }
+
   keypressHandler(ev: KeyboardEvent): void {
     this.resizeTextareaToFit();
 
@@ -207,6 +217,18 @@ export class InlineMarkdownComponent implements OnInit, OnDestroy {
     this.blurred.emit(ev);
   }
 
+  toggleChecklistMode(ev: Event): void {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.isChecklistMode = true;
+    this._toggleShowEdit();
+    if (this.modelCopy && isMarkdownChecklist(this.modelCopy)) {
+      this.modelCopy += '\n- [ ] ';
+    } else {
+      this.modelCopy = '- [ ] ';
+    }
+  }
+
   private _toggleShowEdit(): void {
     this.isShowEdit = true;
     this.modelCopy = this.model || '';