Testing changing of tab order

src/app/editor/tabs/tabs.component.ts

@@ -1,7 +1,9 @@
-import { Component, ElementRef, ViewChild, TemplateRef, ComponentRef, ViewContainerRef } from '@angular/core';
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Subject, takeUntil } from 'rxjs';
 
-import { TabComponent } from './tab/tab.component';
+import { EditorsService } from '../../common/services/editor/editors.service';
 import { TabsService } from '../../common/services/editor/tabs/tabs.service';
 
 import { ServiceMessage } from '../../common/types/service-message.type';
@@ -12,6 +14,9 @@ import { ServiceMessage } from '../../common/types/service-message.type';
     selector: 'tabs',
     standalone: true,
     imports: [
+        CommonModule,
+        CdkDropList,
+        CdkDrag,
     ],
     templateUrl: './tabs.component.html',
     styleUrl: './tabs.component.css',
@@ -22,16 +27,17 @@ import { ServiceMessage } from '../../common/types/service-message.type';
 export class TabsComponent {
     private unsubscribe = new Subject<void>();
 
-    @ViewChild('containerRef', {read: ViewContainerRef}) containerRef!: ViewContainerRef;
-    tabs: Map<string, ComponentRef<TabComponent>>;
     activeTab!: string;
+    tabs: any[] = [];
+    newIndex: number = -1;
 
 
-    constructor(private tabsService: TabsService) {
-        this.tabs = new Map<string, ComponentRef<TabComponent>>();
+    constructor(
+        private editorsService: EditorsService,
+        private tabsService: TabsService
+    ) {
     }
 
-
     public ngAfterViewInit(): void {
         this.tabsService.getData$().pipe(
             takeUntil(this.unsubscribe)
@@ -41,20 +47,74 @@ export class TabsComponent {
         });
     }
 
-    ngOnDestroy() {
+    ngOnDestroy(): void {
         this.unsubscribe.next();
         this.unsubscribe.complete();
     }
 
-    private createTab(title: string, uuid: string, path: string) {
-        const component = this.containerRef.createComponent(TabComponent);
-        component.instance.title = title;
-        component.instance.path  = path;
-        component.instance.ref   = component;
-
-        this.tabs.set(uuid, component)
-
-        return component;
+    private createTab(title: string, uuid: string, path: string): void {
+        this.tabs.push({title: title, path: path, uuid: uuid})
     }
 
-}
+    handleAction(event: any): void {
+        let target = event.target;
+
+        if ( target.classList.contains("tab") ) {
+            this.editorsService.setTabToEditor(
+                event.srcElement.getAttribute("title")
+            );
+        } else if ( target.classList.contains("title") ) {
+            this.editorsService.setTabToEditor(
+                event.srcElement.parentElement.getAttribute("title")
+            );
+        } else if ( target.classList.contains("close-button") ) {
+            this.closeTab(
+                event.srcElement.parentElement.getAttribute("title")
+            );
+        }
+
+    }
+
+    closeTab(fpath: string): void {
+        this.editorsService.closeTab(fpath);
+
+        for (let i = 0; i < this.tabs.length; i++) {
+            if (this.tabs[i].path == fpath) {
+                this.tabs.splice(i, 1);
+            }
+        }
+
+    }
+
+
+    moved(event: any): void {
+        let target = event.event.target;
+        let fpath  = "";
+
+        if ( target.classList.contains("title") ) {
+            fpath = target.parentElement.getAttribute("title")
+        } else if ( target.classList.contains("close-button") ) {
+            fpath = target.parentElement.getAttribute("title")
+        } else (
+            fpath = target.getAttribute("title")
+        )
+
+        for (let i = 0; i < this.tabs.length; i++) {
+            if (this.tabs[i].path == fpath) {
+                this.newIndex = i;
+            }
+        }
+
+    }
+
+    dropped(event: CdkDragDrop<any>): void {
+        if (this.newIndex == -1) return;
+
+        moveItemInArray(this.tabs, event.previousIndex, this.newIndex);
+        this.newIndex = -1;
+
+        // event.currentIndex not updating for some reason...
+        // moveItemInArray(this.tabs, event.previousIndex, event.currentIndex);
+    }
+
+}