From c31d3bb0364c31100a04ea4e9e3520c001e3dc1f Mon Sep 17 00:00:00 2001
From: Jelte van Boheemen <j.vanboheemen@uu.nl>
Date: Wed, 8 Nov 2023 15:41:01 +0100
Subject: [PATCH] Create tag interface

---
 frontend/src/app/services/api.service.ts      |  2 +-
 .../tag/tag-select/tag-select.component.html  | 23 ++++++++-
 .../tag/tag-select/tag-select.component.ts    | 49 ++++++++++++++++---
 3 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts
index b4607cd90..4acf5b75a 100644
--- a/frontend/src/app/services/api.service.ts
+++ b/frontend/src/app/services/api.service.ts
@@ -253,7 +253,7 @@ export class ApiService {
 
     public createTag(name: string, description?: string): Observable<Tag> {
         const url = this.apiRoute(this.tagApiUrl, 'tags/');
-        return this.http.put<Tag>(url, { name, description });
+        return this.http.post<Tag>(url, { name, description });
     }
 
     public documentTags(document: FoundDocument): Observable<DocumentTagsResponse> {
diff --git a/frontend/src/app/tag/tag-select/tag-select.component.html b/frontend/src/app/tag/tag-select/tag-select.component.html
index ed5fb866d..9284fa404 100644
--- a/frontend/src/app/tag/tag-select/tag-select.component.html
+++ b/frontend/src/app/tag/tag-select/tag-select.component.html
@@ -1,17 +1,36 @@
 <div class="field has-addons">
-    <div class="control">
+    <ng-container *ngIf="!createMode">
+        <div class="control" *ngIf="!createMode">
         <ng-container *ngIf="filterTags(tags$ | async, exclude) as filteredTags">
             <p-dropdown [options]="filteredTags" [(ngModel)]="selectedTag" optionLabel="name" emptyMessage="niks hier"
                 [disabled]="!filteredTags.length"
                 [placeholder]="filteredTags.length ? 'Assign a tag' : 'No more tags to assign'" styleClass="is-small">
+            <ng-template pTemplate="footer">
+                <button class="button tag" aria-label="add tag" (click)="toggleCreate()">
+                    <span class="icon"><fa-icon [icon]="faPlus"></fa-icon></span>
+                    <span>Create a new tag</span>
+                </button>
+            </ng-template>
             </p-dropdown>
         </ng-container>
     </div>
     <div class="control">
-        <button class="button tag" aria-label="add tag" (click)="confirm()" [disabled]="!selectedTag">
+        <button class="button tag" aria-label="add tag" (click)="addTag()" [disabled]="!selectedTag">
+            <span class="icon"><fa-icon [icon]="faCheck"></fa-icon></span>
+        </button>
+    </div>
+</ng-container>
+<ng-container *ngIf="createMode">
+    <div class="control">
+        <input type="text" class="input tag" placeholder="Enter tag name" [(ngModel)]="newTagName">
+    </div>
+    <div class="control">
+        <button class="button tag" aria-label="create tag" (click)="createTag()" [disabled]="!newTagName">
             <span class="icon"><fa-icon [icon]="faCheck"></fa-icon></span>
         </button>
     </div>
+</ng-container>
+
     <div class="control">
         <button class="button tag" aria-label="cancel" type="reset" (click)="cancel.emit()">
             <span class="icon"><fa-icon [icon]="faTimes"></fa-icon></span>
diff --git a/frontend/src/app/tag/tag-select/tag-select.component.ts b/frontend/src/app/tag/tag-select/tag-select.component.ts
index 7a41e3d9b..9e49370eb 100644
--- a/frontend/src/app/tag/tag-select/tag-select.component.ts
+++ b/frontend/src/app/tag/tag-select/tag-select.component.ts
@@ -1,17 +1,25 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { TagService } from '../../services/tag.service';
-import { Observable } from 'rxjs';
-import { Tag } from '../../models';
-import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
+import {
+    Component,
+    ElementRef,
+    EventEmitter,
+    Input,
+    OnDestroy,
+    Output,
+    ViewChild,
+} from '@angular/core';
+import { faCheck, faPlus, faTimes } from '@fortawesome/free-solid-svg-icons';
 import * as _ from 'lodash';
-
+import { Observable, Subject } from 'rxjs';
+import { Tag } from '../../models';
+import { TagService } from '../../services/tag.service';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'ia-tag-select',
     templateUrl: './tag-select.component.html',
     styleUrls: ['./tag-select.component.scss'],
 })
-export class TagSelectComponent {
+export class TagSelectComponent implements OnDestroy {
     @Input() exclude: Tag[];
     @Output() selection = new EventEmitter<Tag>();
     @Output() cancel = new EventEmitter<void>();
@@ -19,12 +27,17 @@ export class TagSelectComponent {
     @ViewChild('tagSelect') tagSelect: ElementRef;
 
     tags$: Observable<Tag[]>;
+    destroy$ = new Subject();
 
     faCheck = faCheck;
     faTimes = faTimes;
+    faPlus = faPlus;
 
     selectedTag: Tag;
 
+    createMode = false;
+    newTagName: string;
+
     constructor(private tagService: TagService) {
         this.tags$ = this.tagService.tags$;
     }
@@ -33,8 +46,28 @@ export class TagSelectComponent {
         return _.differenceBy(tags, exclude || [], 'name');
     }
 
-    confirm() {
+    addTag() {
         this.selection.emit(this.selectedTag);
         this.selectedTag = undefined;
     }
+
+    createTag() {
+        this.tagService
+            .makeTag(this.newTagName)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((res) => {
+                this.selection.emit(res);
+                this.createMode = false;
+            });
+    }
+
+    toggleCreate(): void {
+        this.selectedTag = undefined;
+        this.createMode = !this.createMode;
+    }
+
+    ngOnDestroy(): void {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
 }