From 32fcac1613926464b12dfba0551b14b3ed77fc43 Mon Sep 17 00:00:00 2001
From: Rodrigo Damazio Bovendorp <rodrigo@damazio.org>
Date: Sat, 7 Dec 2024 04:42:39 -0800
Subject: [PATCH] Some more movement to signals to fix future lint errors

---
 .../checklist-tree.component.html              |  2 +-
 .../checklist-tree/checklist-tree.component.ts |  5 ++---
 .../checklist-tree/drag.directive.ts           | 18 ++++++++++--------
 .../checklist-tree/node/node.component.ts      |  3 +--
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/checklists/checklist-tree/checklist-tree.component.html b/src/app/checklists/checklist-tree/checklist-tree.component.html
index 9eafb38..9e1a2a7 100644
--- a/src/app/checklists/checklist-tree/checklist-tree.component.html
+++ b/src/app/checklists/checklist-tree/checklist-tree.component.html
@@ -19,7 +19,7 @@
     [class.checklist-selected]="node.checklist && selectedChecklist === node.checklist"
     (click)="onNodeSelect(node)"
     checklistDrag
-    [allDropLists]="allDropLists"
+    [allDropLists]="allDropLists()"
     [checklistDragNode]="item"
     cdkDragLockAxis="y"
     [cdkDragData]="node"
diff --git a/src/app/checklists/checklist-tree/checklist-tree.component.ts b/src/app/checklists/checklist-tree/checklist-tree.component.ts
index 391cd30..b361313 100644
--- a/src/app/checklists/checklist-tree/checklist-tree.component.ts
+++ b/src/app/checklists/checklist-tree/checklist-tree.component.ts
@@ -16,9 +16,8 @@ import {
   model,
   OnInit,
   output,
-  QueryList,
   viewChild,
-  ViewChildren,
+  viewChildren,
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
@@ -66,7 +65,7 @@ export class ChecklistTreeComponent implements OnInit, AfterViewInit {
   readonly selectedChecklistGroup = model<ChecklistGroup>();
   readonly groupDropListIds = model<string[]>([]);
   readonly tree = viewChild.required(MatTree);
-  @ViewChildren(CdkDropList) allDropLists?: QueryList<CdkDropList<ChecklistTreeNode>>;
+  readonly allDropLists = viewChildren(CdkDropList<ChecklistTreeNode>);
   dataSource = new MatTreeNestedDataSource<ChecklistTreeNode>();
 
   dragging = false;
diff --git a/src/app/checklists/checklist-tree/drag.directive.ts b/src/app/checklists/checklist-tree/drag.directive.ts
index a7a61fe..e422fee 100644
--- a/src/app/checklists/checklist-tree/drag.directive.ts
+++ b/src/app/checklists/checklist-tree/drag.directive.ts
@@ -1,5 +1,5 @@
 import { CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
-import { AfterViewInit, Directive, EventEmitter, Input, OnDestroy, QueryList, input } from '@angular/core';
+import { AfterViewInit, Directive, EventEmitter, OnDestroy, computed, effect, input } from '@angular/core';
 import { takeUntil } from 'rxjs';
 import { ChecklistTreeNode } from './node/node';
 import { ChecklistTreeNodeComponent } from './node/node.component';
@@ -9,16 +9,16 @@ import { ChecklistTreeNodeComponent } from './node/node.component';
   standalone: true,
 })
 export class ChecklistDragDirective extends CdkDrag<ChecklistTreeNode> implements AfterViewInit, OnDestroy {
-  @Input() allDropLists?: QueryList<CdkDropList<ChecklistTreeNode>>;
+  readonly allDropLists = input<readonly CdkDropList<ChecklistTreeNode>[]>();
   readonly checklistDragNode = input<ChecklistTreeNodeComponent>();
 
+  private readonly _dropList = computed(() => this._findContainer());
   private readonly _destroyed2 = new EventEmitter<boolean>();
-
-  override ngAfterViewInit() {
+  private readonly _updateContainerEffect =
     // We have to dynamically detect drop lists because they're not bound at injection time,
     // due to the cdkDrag being outside of the cdkDropList on the template.
-    this.allDropLists?.changes.pipe(takeUntil(this._destroyed2)).subscribe(() => {
-      const dropList = this._findContainer();
+    effect(() => {
+      const dropList = this._dropList();
       if (dropList) {
         setTimeout(() => {
           this._updateContainer(dropList);
@@ -26,6 +26,7 @@ export class ChecklistDragDirective extends CdkDrag<ChecklistTreeNode> implement
       }
     });
 
+  override ngAfterViewInit() {
     // Also dynamically register drag handles that were passed in to us.
     // This must be done before the parent's ngAfterViewInit, which uses them.
     const handle = this.checklistDragNode()?.dragHandle();
@@ -42,12 +43,13 @@ export class ChecklistDragDirective extends CdkDrag<ChecklistTreeNode> implement
   }
 
   private _findContainer(): CdkDropList<ChecklistTreeNode> | undefined {
-    if (!this.allDropLists) return undefined;
+    const dropLists = this.allDropLists();
+    if (!dropLists) return undefined;
 
     // Finds the CdkDropList that's actually been assigned as our parent after
     // view setup, since the association doesn't exist in the template.
     const containerEl = this.element.nativeElement.closest('.cdk-drop-list');
-    for (const dropList of this.allDropLists) {
+    for (const dropList of dropLists) {
       if (dropList.element.nativeElement === containerEl) {
         return dropList;
       }
diff --git a/src/app/checklists/checklist-tree/node/node.component.ts b/src/app/checklists/checklist-tree/node/node.component.ts
index 6364540..db406aa 100644
--- a/src/app/checklists/checklist-tree/node/node.component.ts
+++ b/src/app/checklists/checklist-tree/node/node.component.ts
@@ -28,8 +28,7 @@ import { ChecklistTreeNode } from './node';
   styleUrl: './node.component.scss',
 })
 export class ChecklistTreeNodeComponent {
-  node = input.required<ChecklistTreeNode>();
-
+  readonly node = input.required<ChecklistTreeNode>();
   readonly disableButtonHover = input(false);
   readonly nodeRename = output<ChecklistTreeNode>();
   readonly nodeDelete = output<ChecklistTreeNode>();