Revert "Commit"

This reverts commit 648ee42.
PermanentOrg · Sep 28, 2023 · dc49f6d · dc49f6d
1 parent 225351f
commit dc49f6d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 144 deletions.
diff --git a/src/app/file-browser/components/edit-tags/edit-tags.component.html b/src/app/file-browser/components/edit-tags/edit-tags.component.html
@@ -1,146 +1,67 @@
-<!-- @format -->
 <ng-container *ngIf="!isDialog">
-  <pr-tags
-    (focus)="startEditing()"
-    tabindex="0"
-    [tags]="itemTags"
-    (click)="startEditing()"
-    [readOnly]="false"
-    [class.clickable]="canEdit && !isEditing"
-    [canEdit]="canEdit"
-    [animate]="isEditing"
-    [isEditing]="isEditing"
-  ></pr-tags>
-  <div
-    class="input-group"
-    *ngIf="isEditing"
-    @ngIfScaleAnimation
-    [class.has-tags]="allTags?.length"
-  >
-    <input
-      type="text"
-      class="new-tag form-control"
-      [placeholder]="placeholderText"
-      [(ngModel)]="newTagName"
-      (ngModelChange)="onTagType(newTagName)"
-      (keydown.enter)="onInputEnter(newTagName)"
-      (keydown.arrowdown)="onArrowDownOnInput($event)"
-    />
+  <pr-tags (focus)="startEditing()" tabindex="0" [tags]="itemTags" (click)="startEditing()" [readOnly]="false" [class.clickable]="canEdit && !isEditing"
+    [canEdit]="canEdit" [animate]="isEditing" [isEditing]="isEditing"></pr-tags>
+  <div class="input-group" *ngIf="isEditing" @ngIfScaleAnimation [class.has-tags]="allTags?.length">
+    <input type="text" class="new-tag form-control" [placeholder]="placeholderText" [(ngModel)]="newTagName"
+    (ngModelChange)="onTagType(newTagName)" (keydown.enter)="onInputEnter(newTagName)">
     <div *ngIf="newTagInputError" class="input-vertical-error">
-      {{
-        this.tagType === 'keyword'
-          ? "Tag cannot contain ':'"
-          : 'Format must be key:value'
-      }}
+      {{this.tagType === 'keyword' ? "Tag cannot contain ':'" : "Format must be key:value"}}
     </div>
     <div class="input-group-append">
-      <button
-        class="btn btn-primary"
-        (click)="newTagName ? onInputEnter(newTagName) : endEditing()"
-      >
-        {{ newTagName ? 'Add' : 'Done' }}
-      </button>
+      <button class="btn btn-primary" (click)="newTagName ? onInputEnter(newTagName) : endEditing()">{{ newTagName ? 'Add' : 'Done' }}</button>
     </div>
   </div>
-  <div
-    class="edit-tags"
-    *ngIf="isEditing && matchingTags?.length"
-    @ngIfScaleAnimation
-  >
-    <div
-      tabindex="0"
-      class="edit-tag"
-      *ngFor="let tag of matchingTags; let i = index"
-      [class.is-selected]="itemTagsById.has(tag.tagId)"
-      (click)="onTagClick(tag, i)"
-      (keydown)="onKeydown($event)"
-      (keydown.enter)="handleEnterOnTag(tag)"
-    >
+  <div class="edit-tags" *ngIf="isEditing && matchingTags?.length" @ngIfScaleAnimation>
+    <div class="edit-tag" *ngFor="let tag of matchingTags" [class.is-selected]="itemTagsById.has(tag.tagId)"
+    (click)="onTagClick(tag)">
       <div class="select">
         <div class="select-active"></div>
       </div>
       <div class="tag-name">
-        {{ tag.name }}
+        {{tag.name}}
       </div>
     </div>
   </div>
   <p class="manage-tags-message" *ngIf="isEditing" @ngIfScaleAnimation>
     <span class="manage-tags-link" (click)="onManageTagsClick()">
-      Manage {{ this.tagType === 'keyword' ? 'tags' : 'custom metadata' }}</span
-    >
-    in archive settings.
+      Manage {{this.tagType === 'keyword' ? "tags" : 'custom metadata'}}</span> in archive settings.
   </p>
 </ng-container>
 <ng-container *ngIf="isDialog">
   <div class="dialog-content">
     <div class="dialog-body">
-      <div class="page-title break-all">{{ item.displayName }}</div>
+      <div class="page-title break-all">{{item.displayName}}</div>
       <div class="edit-tags-dialog-body">
-        <pr-tags
-          [tags]="dialogTags"
-          (click)="startEditing()"
-          [canEdit]="true"
-          [animate]="isEditing"
-          [isEditing]="isEditing"
-        ></pr-tags>
+        <pr-tags [tags]="dialogTags" (click)="startEditing()"
+          [canEdit]="true" [animate]="isEditing" [isEditing]="isEditing"></pr-tags>
         <div class="input-group">
-          <input
-            type="text"
-            class="new-tag form-control"
-            [placeholder]="placeholderText"
-            *ngIf="isEditing"
-            @ngIfScaleAnimation
-            [(ngModel)]="newTagName"
-            (keydown.enter)="onInputEnter(newTagName)"
-            (ngModelChange)="onTagType(newTagName)"
-            (keydown.arrowdown)="onArrowDownOnInput($event)"
-          />
+          <input type="text" class="new-tag form-control" [placeholder]="placeholderText" *ngIf="isEditing" @ngIfScaleAnimation
+            [(ngModel)]="newTagName" (keydown.enter)="onInputEnter(newTagName)" (ngModelChange)="onTagType(newTagName)">
           <div *ngIf="newTagInputError" class="input-vertical-error">
-            {{
-              this.tagType === 'keyword'
-                ? "Tag cannot contain ':'"
-                : 'Format must be key:value'
-            }}
+            {{this.tagType === 'keyword' ? "Tag cannot contain ':'" : "Format must be key:value"}}
           </div>
           <div class="input-group-append">
-            <button
-              class="btn btn-primary"
-              (click)="onInputEnter(newTagName)"
-              [disabled]="!newTagName"
-            >
-              Add
-            </button>
+            <button class="btn btn-primary" (click)="onInputEnter(newTagName)" [disabled]="!newTagName">Add</button>
           </div>
         </div>
         <div class="edit-tags" *ngIf="isEditing" @ngIfScaleAnimation>
-          <div
-            class="edit-tag"
-            *ngFor="let tag of matchingTags"
-            [class.is-selected]="itemTagsById.has(tag.tagId)"
-            tabindex="0"
-            (click)="onTagClick(tag)"
-            (keydown)="onKeydown($event)"
-            (keydown.enter)="handleEnterOnTag(tag)"
-          >
+          <div class="edit-tag" *ngFor="let tag of matchingTags" [class.is-selected]="itemTagsById.has(tag.tagId)"
+          (click)="onTagClick(tag)">
             <div class="select">
               <div class="select-active"></div>
             </div>
             <div class="tag-name">
-              {{ tag.name }}
+              {{tag.name}}
             </div>
           </div>
-          <div class="edit-tag" *ngIf="!matchingTags.length">
-            No existing tags found
-          </div>
+          <div class="edit-tag" *ngIf="!matchingTags.length">No existing tags found</div>
         </div>
         <p class="manage-tags-message" *ngIf="isEditing" @ngIfScaleAnimation>
           <span class="manage-tags-link" (click)="onManageTagsClick()">
-            Manage
-            {{ this.tagType === 'keyword' ? 'tags' : 'custom metadata' }}</span
-          >
-          in archive settings.
+            Manage {{this.tagType === 'keyword' ? "tags" : 'custom metadata'}}</span> in archive settings.
         </p>
-      </div>
+    </div>
+
     </div>
     <div class="dialog-footer">
       <button class="btn btn-secondary" (click)="close()">Done</button>

diff --git a/src/app/file-browser/components/edit-tags/edit-tags.component.ts b/src/app/file-browser/components/edit-tags/edit-tags.component.ts
@@ -70,8 +70,6 @@ export class EditTagsComponent
   private lastFolderLinkId: number;
   private dialogTagSubscription: Subscription;
 
-  currentIndex: number = 0;
-
   constructor(
     @Optional() @Inject(DIALOG_DATA) public dialogData: any,
     @Optional() private dialogRef: DialogRef,
@@ -271,41 +269,4 @@ export class EditTagsComponent
   close() {
     this.dialogRef.close();
   }
-
-  onKeydown(event: KeyboardEvent) {
-    let focusBackOnInput = false;
-    if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      if (this.currentIndex < this.matchingTags.length - 1) {
-        this.currentIndex++;
-      }
-    } else if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      if (this.currentIndex > 0) {
-        this.currentIndex--;
-      } else if (this.currentIndex === 0) {
-        focusBackOnInput = true;
-      }
-    }
-    this.setFocusToCurrentIndex(focusBackOnInput);
-  }
-
-  private setFocusToCurrentIndex(focusBackOnInput) {
-    if (focusBackOnInput) {
-      (document.querySelector('.new-tag') as HTMLElement).focus();
-    } else {
-      const elements = document.querySelectorAll('.edit-tag');
-      (elements[this.currentIndex] as HTMLElement).focus();
-    }
-  }
-
-  public async handleEnterOnTag(tag) {
-    await this.onTagClick(tag);
-  }
-
-  public onArrowDownOnInput(event: KeyboardEvent) {
-    event.preventDefault();
-    const element = document.querySelector('.edit-tag');
-    (element as HTMLElement).focus();
-  }
 }