add admin interface menu manager

Signed-off-by: Minecraftschurli <[email protected]>

src/app/features/admin/admin-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AdminComponent } from './admin.component';
+
+const routes: Routes = [{ path: '', component: AdminComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AdminRoutingModule { }

src/app/features/admin/admin.component.html

@@ -0,0 +1,5 @@
+<main class="container">
+  <mat-tab-group mat-align-tabs="center" animationDuration="0">
+    <mat-tab label="Seiten"><app-menu-manager></app-menu-manager></mat-tab>
+  </mat-tab-group>
+</main>

src/app/features/admin/admin.component.scss

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+.container {
+  height: 100%;
+}

src/app/features/admin/admin.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminComponent } from './admin.component';
+
+describe('AdminComponent', () => {
+  let component: AdminComponent;
+  let fixture: ComponentFixture<AdminComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AdminComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdminComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/admin/admin.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-admin',
+  templateUrl: './admin.component.html',
+  styleUrls: ['./admin.component.scss']
+})
+export class AdminComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/features/admin/admin.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AdminRoutingModule } from './admin-routing.module';
+import { AdminComponent } from './admin.component';
+import { MatTabsModule } from "@angular/material/tabs";
+import { MenuManagerComponent } from './menu-manager/menu-manager.component';
+import { DragDropModule } from "@angular/cdk/drag-drop";
+import { MatCardModule } from "@angular/material/card";
+import { SharedModule } from "../../shared/shared.module";
+import { MatListModule } from "@angular/material/list";
+
+
+@NgModule({
+  declarations: [AdminComponent, MenuManagerComponent],
+  imports: [
+    CommonModule,
+    AdminRoutingModule,
+    MatTabsModule,
+    DragDropModule,
+    MatCardModule,
+    SharedModule,
+    MatListModule
+  ]
+})
+export class AdminModule { }

src/app/features/admin/menu-manager/menu-manager.component.html

@@ -0,0 +1,25 @@
+<div cdkDropListGroup class="dlg">
+  <!--fixme-->
+  <div *ngFor="let cat of categories; index as i"
+       (cdkDropListDropped)="dropCategory($event)"
+       [cdkDropListData]="categories"
+       cdkDropList
+       cdkDropListOrientation="horizontal">
+    <mat-card *cdkDragPlaceholder><mat-card-title>HI</mat-card-title></mat-card>
+    <mat-card [cdkDragData]="cat" cdkDrag>
+      <mat-card-title cdkDragHandle>{{ cat.title }}</mat-card-title>
+      <mat-card-content>
+        <mat-list (cdkDropListDropped)="dropPage($event)"
+                  [cdkDropListData]="pages[i]"
+                  cdkDropList>
+          <mat-list-item *cdkDragPlaceholder></mat-list-item>
+          <mat-list-item *ngFor="let page of pages[i]"
+                         [cdkDragData]="page"
+                         cdkDrag>
+            {{ page.title }}
+          </mat-list-item>
+        </mat-list>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>

src/app/features/admin/menu-manager/menu-manager.component.scss

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+}
+
+.dlg {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 0.5rem;
+
+  mat-card {
+    height: 100%;
+  }
+}

src/app/features/admin/menu-manager/menu-manager.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuManagerComponent } from './menu-manager.component';
+
+describe('MenuManagerComponent', () => {
+  let component: MenuManagerComponent;
+  let fixture: ComponentFixture<MenuManagerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MenuManagerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MenuManagerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/admin/menu-manager/menu-manager.component.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { Category } from '../../../data/category';
+import { ContentService } from '../../../shared/services/content.service';
+import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { Page } from '../../../data/page';
+import { map, mergeMap } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-menu-manager',
+  templateUrl: './menu-manager.component.html',
+  styleUrls: ['./menu-manager.component.scss']
+})
+export class MenuManagerComponent {
+  categories: Category[];
+  pages: Page[][];
+
+  constructor(content: ContentService) {
+    content.getCategories().pipe(mergeMap((categories) => {
+      this.categories = categories;
+      this.pages = [];
+      return categories.map<Observable<[Page[], number]>>((value, i) => value.pages$.pipe(map(pages => [pages, i])));
+    }), mergeMap(value => value)).subscribe(([pages, i]) => this.pages[i] = pages);
+  }
+
+  dropPage(event: CdkDragDrop<Page[]>): void {
+    console.log(event);
+    if (event.container === event.previousContainer) {
+      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+    } else {
+      transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+    }
+  }
+
+  dropCategory(event: CdkDragDrop<Category[]>): void {
+    console.log(event);
+    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+  }
+}