Fully working with the rule no explicit any

bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts

@@ -4,6 +4,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTreeNestedDataSource } from '@angular/material/tree';
 import { ActivatedRoute, Router } from '@angular/router';
+import { map } from 'rxjs/operators';
 
 import { MenuCategory } from '../../core/menu-category';
 import { ModifierCategory } from '../../core/modifier-category';
@@ -11,6 +12,7 @@ import { Product } from '../../core/product';
 import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { ModifierCategoryService } from '../modifier-category.service';
+import { NodeItem } from '../node-item';
 
 @Component({
   selector: 'app-role-detail',
@@ -21,8 +23,8 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
   item: ModifierCategory = new ModifierCategory();
-  treeControl = new NestedTreeControl<any>((node) => node.products);
-  dataSource = new MatTreeNestedDataSource<any>();
+  treeControl = new NestedTreeControl<NodeItem>((node: NodeItem) => node.children);
+  dataSource = new MatTreeNestedDataSource<NodeItem>();
   products: Map<string, Product> = new Map<string, Product>();
   productsOfMenuCategory: Map<string, Product[]> = new Map<string, Product[]>();
 
@@ -45,15 +47,26 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: ModifierCategory };
-      this.showItem(data.item);
-    });
+    this.route.data
+      .pipe(
+        map((value) => {
+          const data = value as { item: ModifierCategory };
+          const tree: NodeItem[] = data.item.menuCategories.map((x: MenuCategory) => ({
+            id: x.id as string,
+            name: x.name,
+            children: x.products.map((y: Product) => ({ id: y.id as string, name: y.name })),
+          }));
+          return { item: data.item, tree };
+        }),
+      )
+      .subscribe((data) => {
+        this.showItem(data.item, data.tree);
+      });
   }
 
-  showItem(item: ModifierCategory) {
+  showItem(item: ModifierCategory, tree: NodeItem[]) {
     this.item = item;
-    this.dataSource.data = item.menuCategories;
+    this.dataSource.data = tree;
     this.form.patchValue({
       name: this.item.name || '',
       minimum: `${this.item.minimum}`,
@@ -133,22 +146,22 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
     return this.item;
   }
 
-  hasChild = (_: number, node: any) => !!node.products && node.products.length > 0;
+  hasChild = (_: number, node: NodeItem) => !!node.children && node.children.length > 0;
 
-  isProductSelected(node: Product) {
-    return (this.products.get(node.id as string) as Product).enabled;
+  isProductSelected(node: NodeItem) {
+    return (this.products.get(node.id) as Product).enabled;
   }
 
-  isMenuCategorySelected(node: MenuCategory) {
-    return (this.productsOfMenuCategory.get(node.id as string) as Product[]).reduce(
+  isMenuCategorySelected(node: NodeItem) {
+    return (this.productsOfMenuCategory.get(node.id) as Product[]).reduce(
       (acc: boolean, current: Product) => acc && current.enabled,
       true,
     );
   }
 
-  isMenuCategoryPartiallySelected(node: MenuCategory) {
-    const total = (this.productsOfMenuCategory.get(node.id as string) as Product[]).length;
-    const ticked = (this.productsOfMenuCategory.get(node.id as string) as Product[]).reduce(
+  isMenuCategoryPartiallySelected(node: NodeItem) {
+    const total = (this.productsOfMenuCategory.get(node.id) as Product[]).length;
+    const ticked = (this.productsOfMenuCategory.get(node.id) as Product[]).reduce(
       (acc, current) => {
         if (current.enabled) {
           // eslint-disable-next-line no-param-reassign
@@ -161,12 +174,12 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
     return ticked > 0 && ticked < total;
   }
 
-  toggleProductSelection(node: Product) {
-    (this.products.get(node.id as string) as Product).enabled = !(this.products.get(node.id as string) as Product)
+  toggleProductSelection(node: NodeItem) {
+    (this.products.get(node.id) as Product).enabled = !(this.products.get(node.id) as Product)
       .enabled;
   }
 
-  toggleMenuCategorySelection(node: MenuCategory) {
+  toggleMenuCategorySelection(node: NodeItem) {
     const sel = !this.isMenuCategorySelected(node);
     (this.productsOfMenuCategory.get(node.id as string) as Product[]).forEach((p) => {
       p.enabled = sel;

bookie/src/app/modifier-categories/node-item.ts

@@ -0,0 +1,5 @@
+export interface NodeItem {
+  id: string;
+  name: string;
+  children?: NodeItem[];
+}