no pipeline

.github/workflows/node.js.yml

@@ -1,31 +0,0 @@
-# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
-
-name: Node.js CI
-
-on:
-  push:
-    branches: [ "prod" ]
-  pull_request:
-    branches: [ "prod" ]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [20.x]
-
-    steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm install
-    - run: npm install -g @angular/cli
-    - run: npm run build
-    - run: npm test

src/app/feature/tag/create/create.component.html

@@ -0,0 +1,17 @@
+<div class="p-5 bg-zinc-700">
+  <div class="mb-5">
+    <input
+      type="text"
+      class="block p-1 w-full text-black dark:text-white bg-gray-50 dark:bg-zinc-700 rounded-lg bg-gray-100 text-base border border-gray-500 dark:border-transparent"
+      [(ngModel)]="description"
+    />
+  </div>
+
+  <button class="basis-full md:basis-auto" (click)="confirm()">
+    <div
+      class="min-w-28 px-3 py-1.5 rounded rounded-lg bg-green-700 hover:bg-green-900 font-bold text-black dark:text-white"
+    >
+      Erstellen
+    </div>
+  </button>
+</div>

src/app/feature/tag/create/create.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-create',
+  templateUrl: './create.component.html',
+  styleUrls: ['./create.component.scss'],
+})
+export class CreateComponent {
+  description: string = '';
+
+  constructor(public dialogRef: MatDialogRef<CreateComponent>) {}
+
+  confirm(): void {
+    this.dialogRef.close(this.description);
+  }
+
+  onClose(): void {
+    this.dialogRef.close(undefined);
+  }
+}

src/app/feature/tag/list/list.component.html

@@ -1,10 +1,24 @@
 <div class="p-5">
   <div class="mb-5">
-    <input
-      type="text"
-      class="block p-1 w-full text-gray-900 text-black dark:text-white bg-gray-50 dark:bg-zinc-700 rounded-lg bg-gray-100 text-base border border-gray-500 dark:border-transparent"
-      (input)="onInputChanged($event)"
-    />
+    <div class="flex flex-row gap-x-2">
+      <div class="basis-full">
+        <input
+          type="text"
+          class="block p-1 w-full text-gray-900 text-black dark:text-white bg-gray-50 dark:bg-zinc-700 rounded-lg bg-gray-100 text-base border border-gray-500 dark:border-transparent"
+          (input)="onInputChanged($event)"
+        />
+        >
+      </div>
+      <div class="basis-auto">
+        <button (click)="createTag()">
+          <div
+            class="block px-3 py-1.5 rounded rounded-lg bg-zinc-700 hover:bg-zinc-900 font-bold text-black dark:text-white"
+          >
+            +
+          </div>
+        </button>
+      </div>
+    </div>
   </div>
 
   <shared-table [items]="tags" [columns]="tagListColumns" />

src/app/feature/tag/list/list.component.ts

@@ -1,8 +1,10 @@
 import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { Subject, debounceTime } from 'rxjs';
 import { TagListEntry } from 'src/app/model/TagListEntry';
 import { RequestService } from 'src/app/request.service';
 import { ColumnDefinition } from 'src/app/shared/components/table/table.component';
+import { CreateComponent } from '../create/create.component';
 
 @Component({
   selector: 'app-list',
@@ -32,7 +34,7 @@ export class ListComponent {
     },
   ];
 
-  constructor(public requestService: RequestService) {
+  constructor(public requestService: RequestService, public dialog: MatDialog) {
     this.query$.pipe(debounceTime(300)).subscribe((query) => {
       this.query = query;
       this.readList();
@@ -47,6 +49,28 @@ export class ListComponent {
     this.query$.next((event.target as HTMLTextAreaElement).value);
   }
 
+  createTag(): void {
+    let dialogRef = this.dialog.open(CreateComponent, {
+      panelClass: 'bg-zinc-900',
+      maxHeight: '400px',
+      width: '600px',
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result === undefined) return;
+
+      this.requestService.post(
+        'tag/create',
+        {
+          description: result,
+        },
+        (response: any) => {
+          this.readList();
+        }
+      );
+    });
+  }
+
   readList(): void {
     this.requestService.post(
       'tag-list/read-list',

src/app/feature/tag/tag.component.html

@@ -1,17 +1,85 @@
-<div *ngIf="tagDetails !== null">
-  <h1 class="text-white text-2xl font-bold text-center">
-    {{ tagDetails.description }}
-  </h1>
+<h1
+  *ngIf="tagDetails !== null"
+  class="text-white text-2xl font-bold text-center"
+>
+  {{ tagDetails.description }}
+</h1>
 
-  <ul class="text-white">
-    <li *ngFor="let alias of tagDetails.aliases">
-      {{ alias.description }}
-    </li>
-  </ul>
+<div class="grid grid-cols-1 2xl:grid-cols-4">
+  <div class="2xl:col-span-3">
+    <shared-video-list
+      (onReadList)="readList($event)"
+      [total]="total"
+      [videos]="videos"
+    />
+  </div>
+
+  <div class="w-full 2xl:col-span-1 p-5">
+    <shared-card *ngIf="tagId !== ''" class="w-full" header="Details">
+      <div class="grid grid-cols-1 gap-2 mt-2">
+        <div id="title" class="flex flex-row gap-2">
+          <div class="basis-auto w-24">Titel:</div>
+          <div class="basis-full">
+            <input
+              *ngIf="tagDetails !== null"
+              type="text"
+              class="p-1 w-full text-gray-900 text-black dark:text-white bg-gray-50 dark:bg-zinc-700 rounded-lg bg-gray-100 text-base border border-gray-500 dark:border-transparent"
+              [(ngModel)]="tagDetails.description"
+            />
+          </div>
+        </div>
+        <div id="tags" class="flex flex-row gap-2">
+          <div class="basis-auto w-24">Alias:</div>
+          <div class="basis-full" *ngIf="tagDetails !== null">
+            <div class="flex flex-row">
+              <div class="basis-full">
+                <span
+                  *ngFor="let alias of tagDetails.aliases"
+                  class="text-sm font-medium me-2 mx-auto px-2.5 py-0.5 rounded bg-zinc-700 hover:bg-zinc-900"
+                  >{{ alias.description }}</span
+                >
+              </div>
+              <div class="basis-auto">
+                <button (click)="addAlias()">
+                  <div
+                    class="block px-3 py-1.5 rounded rounded-lg bg-zinc-700 hover:bg-zinc-900"
+                  >
+                    +
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--
+        <div id="actions">
+          <div class="flex flex-col md:flex-row gap-2">
+            <div class="basis-0 md:basis-full"></div>
+            <button class="basis-full md:basis-auto" (click)="delete()">
+              <div
+                class="min-w-28 px-3 py-1.5 rounded rounded-lg bg-red-900 hover:bg-red-950"
+              >
+                Delete
+              </div>
+            </button>
+            <button class="basis-full md:basis-auto" (click)="setThumbnail()">
+              <div
+                class="min-w-28 px-3 py-1.5 rounded rounded-lg bg-zinc-700 hover:bg-zinc-900"
+              >
+                Thumbnail
+              </div>
+            </button>
+            <button class="basis-full md:basis-auto" (click)="update()">
+              <div
+                class="min-w-28 px-3 py-1.5 rounded rounded-lg bg-green-700 hover:bg-green-900"
+              >
+                Save
+              </div>
+            </button>
+          </div>
+        </div>
+        -->
+      </div>
+    </shared-card>
+  </div>
 </div>
-
-<shared-video-list
-  (onReadList)="readList($event)"
-  [total]="total"
-  [videos]="videos"
-/>

src/app/feature/tag/tag.component.ts

@@ -4,6 +4,8 @@ import { TagDetails } from 'src/app/model/TagDetails';
 import { VideoListEntry } from 'src/app/model/VideoListEntry';
 import { RequestService } from 'src/app/request.service';
 import { OnReadListModel } from 'src/app/shared/components/video-list/video-list.component';
+import { CreateComponent } from './create/create.component';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-tag',
@@ -18,7 +20,8 @@ export class TagComponent {
 
   constructor(
     private route: ActivatedRoute,
-    public requestService: RequestService
+    public requestService: RequestService,
+    public dialog: MatDialog
   ) {
     this.route.params.subscribe((params) => this.updateTagId(params['id']));
   }
@@ -60,4 +63,27 @@ export class TagComponent {
       }
     );
   }
+
+  addAlias(): void {
+    let dialogRef = this.dialog.open(CreateComponent, {
+      panelClass: 'bg-zinc-900',
+      maxHeight: '400px',
+      width: '600px',
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result === undefined) return;
+
+      this.requestService.post(
+        'tag/add-alias',
+        {
+          tagId: this.tagId,
+          description: result,
+        },
+        (response: any) => {
+          this.readDetails();
+        }
+      );
+    });
+  }
 }

src/app/feature/tag/tag.module.ts

@@ -4,6 +4,7 @@ import { TagComponent } from './tag.component';
 import { ListComponent } from './list/list.component';
 import { SharedModule } from 'src/app/shared/shared.module';
 import { RouterModule, Routes } from '@angular/router';
+import { CreateComponent } from './create/create.component';
 
 const routes: Routes = [
   { path: 'list', component: ListComponent },
@@ -11,7 +12,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  declarations: [TagComponent, ListComponent],
+  declarations: [TagComponent, ListComponent, CreateComponent],
   imports: [CommonModule, SharedModule, RouterModule.forChild(routes)],
 })
 export class TagModule {}