feature(wysiwyg): moving function arrayMoveByIndex to helpers ang linting

Author: k-belov

apps/codelab/src/app/admin/content/presentation-editor/reducer.ts

@@ -1,5 +1,6 @@
 import { moveItemInArray } from '@angular/cdk/drag-drop';
 import { ContentPresentation } from './types';
+import { arrayMoveByIndex } from '../../../shared/helpers/helpers';
 
 export function reducer(
   presentations: ContentPresentation[],
@@ -46,30 +47,9 @@ export function reducer(
 
       const slides = getPresentation().slides;
 
-      const normalizeIndexes = (indexes, array) =>
-        indexes.filter(index => index >= 0 && index < array.length);
+      const reorderedSlides = arrayMoveByIndex(slides, selections, toIndex);
 
-      const normalizeToIndex = (toIndex, array, moveIndexes) =>
-        Math.min(Math.max(0, toIndex), array.length - moveIndexes.length);
-
-      const arrayMoveByIndex = (array, index, toIndex) => {
-        const indexes = Array.isArray(index) ? index : [index];
-        const normalizedIndexes = normalizeIndexes(indexes, array);
-        const normalizedToIndex = normalizeToIndex(toIndex, array, indexes);
-
-        const moveValues = normalizedIndexes.map(moveIndex => array[moveIndex]);
-
-        const dontMoveValues = array.filter(
-          (item, index) => normalizedIndexes.indexOf(index) === -1
-        );
-
-        dontMoveValues.splice(normalizedToIndex, 0, ...moveValues);
-        return dontMoveValues;
-      };
-
-      getPresentation().slides = [
-        ...arrayMoveByIndex(slides, selections, toIndex)
-      ];
+      getPresentation().slides = [...reorderedSlides];
 
       return presentations;
 

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.ts

@@ -18,11 +18,16 @@ import { ContentSlide } from '../types';
 import { MultiselectModel } from '../../../../multiselect/multiselect-model';
 
 function normalizeSelectionIndexes(indexes: number[]): number[] {
-    return indexes.filter((index) => index >= 0);
+  return indexes.filter(index => index >= 0);
 }
 
-function selectionModelToIndexes<T>(items: T[], model: MultiselectModel<T>): number[] {
-    return normalizeSelectionIndexes(model.selected.map((item) => items.indexOf(item)));
+function selectionModelToIndexes<T>(
+  items: T[],
+  model: MultiselectModel<T>
+): number[] {
+  return normalizeSelectionIndexes(
+    model.selected.map(item => items.indexOf(item))
+  );
 }
 
 function slideIdsMapper(slides: ContentSlide[]): string[] {
@@ -128,7 +133,10 @@ export class SidePanelComponent implements OnInit, OnChanges {
   }
 
   droppedIntoList(event: CdkDragDrop<any, any>) {
-    const selectedSlideIndexes = selectionModelToIndexes(this.slideIds, this.selectionModel);
+    const selectedSlideIndexes = selectionModelToIndexes(
+      this.slideIds,
+      this.selectionModel
+    );
 
     this.contentService.reorderSlides(
       this.presentationId,
@@ -150,5 +158,4 @@ export class SidePanelComponent implements OnInit, OnChanges {
       this.navigationService.goToSlide(this.presentationId, index);
     }
   }
-
 }

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.module.ts

@@ -10,6 +10,12 @@ import { MultiselectModule } from '../../../../multiselect/multiselect.module';
 @NgModule({
   declarations: [SidePanelComponent],
   exports: [SidePanelComponent],
-  imports: [CommonModule, RouterModule, DragDropModule, PreviewModule, MultiselectModule]
+  imports: [
+    CommonModule,
+    RouterModule,
+    DragDropModule,
+    PreviewModule,
+    MultiselectModule
+  ]
 })
 export class SidePanelModule {}

apps/codelab/src/app/multiselect/multiselect-item.directive.ts

@@ -1,18 +1,18 @@
 import { Directive, HostListener, Inject, Input } from '@angular/core';
-import { MULTISELECT_LIST, MultiselectListDirective } from './multiselect-list.directive';
+import {
+  MULTISELECT_LIST,
+  MultiselectListDirective
+} from './multiselect-list.directive';
 
 @Directive({
   selector: '[multiselectItem]'
 })
 export class MultiselectItemDirective<T> {
-
   @Input() msItem: T;
 
   constructor(
     @Inject(MULTISELECT_LIST) public parentList: MultiselectListDirective<T>
-  ) {
-
-  }
+  ) {}
 
   @HostListener('click', ['$event'])
   private handleClickEvent(event: MouseEvent) {
@@ -24,5 +24,4 @@ export class MultiselectItemDirective<T> {
       this.parentList.msModel.selectSingle(this.msItem);
     }
   }
-
 }

apps/codelab/src/app/multiselect/multiselect-list.directive.ts

@@ -1,28 +1,32 @@
-import { Directive, ElementRef, HostListener, InjectionToken, Input } from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  InjectionToken,
+  Input
+} from '@angular/core';
 
 import { MultiselectModel } from './multiselect-model';
 
-export const MULTISELECT_LIST = new InjectionToken<MultiselectListDirective<any>>('MultiselectList');
+export const MULTISELECT_LIST = new InjectionToken<
+  MultiselectListDirective<any>
+>('MultiselectList');
 
 @Directive({
   selector: '[multiselectList]',
   providers: [
     {
       provide: MULTISELECT_LIST,
       useExisting: MultiselectListDirective
-    },
+    }
   ]
 })
 export class MultiselectListDirective<T> {
   elementHasFocus = false;
 
   @Input() msModel: MultiselectModel<T>;
 
-  constructor(
-    private readonly el: ElementRef
-  ) {
-
-  }
+  constructor(private readonly el: ElementRef) {}
 
   @HostListener('document:click', ['$event'])
   private handleClickEvent(event: MouseEvent) {
@@ -41,5 +45,4 @@ export class MultiselectListDirective<T> {
       event.preventDefault();
     }
   }
-
 }

apps/codelab/src/app/multiselect/multiselect-model.ts

@@ -1,7 +1,6 @@
 import { Subject } from 'rxjs';
 
 export class MultiselectModel<T> {
-
   private selection = new Set<T>();
 
   private stack: T[] = [];
@@ -86,5 +85,4 @@ export class MultiselectModel<T> {
   emitChangeEvent(): void {
     this.changed.next(this.selected);
   }
-
 }

apps/codelab/src/app/multiselect/multiselect.module.ts

@@ -4,13 +4,7 @@ import { MultiselectItemDirective } from './multiselect-item.directive';
 import { MultiselectListDirective } from './multiselect-list.directive';
 
 @NgModule({
-  declarations: [
-    MultiselectListDirective,
-    MultiselectItemDirective
-  ],
-  exports: [
-    MultiselectListDirective,
-    MultiselectItemDirective
-  ],
+  declarations: [MultiselectListDirective, MultiselectItemDirective],
+  exports: [MultiselectListDirective, MultiselectItemDirective]
 })
-export class MultiselectModule { }
+export class MultiselectModule {}

apps/codelab/src/app/shared/helpers/helpers.ts

@@ -366,3 +366,31 @@ export function solve(exerciseConfig) {
     }))
   };
 }
+
+const normalizeIndexes = (indexes: number[], array: any[]) =>
+  indexes.filter(index => index >= 0 && index < array.length);
+
+const normalizeToIndex = (
+  toIndex: number,
+  array: any[],
+  moveIndexes: number[]
+) => Math.min(Math.max(0, toIndex), array.length - moveIndexes.length);
+
+export function arrayMoveByIndex<T>(
+  array: T[],
+  index: number[] | number,
+  toIndex: number
+): T[] {
+  const indexes = Array.isArray(index) ? index : [index];
+  const normalizedIndexes = normalizeIndexes(indexes, array);
+  const normalizedToIndex = normalizeToIndex(toIndex, array, indexes);
+
+  const moveValues = normalizedIndexes.map(moveIndex => array[moveIndex]);
+
+  const remainingValues = array.filter(
+    (item, index) => !normalizedIndexes.includes(index)
+  );
+
+  remainingValues.splice(normalizedToIndex, 0, ...moveValues);
+  return remainingValues;
+}