fix bookdrop metadata picker header buttons not rendering and disabled fields still showing (#3032)

Author: acx10

booklore-ui/src/app/features/bookdrop/component/bookdrop-file-metadata-picker/bookdrop-file-metadata-picker.component.html

@@ -2,41 +2,41 @@
 @if (fetchedMetadata && fetchedMetadata.title) {
   <form [formGroup]="metadataForm" class="metapicker">
     <div class="form-scroll">
-      <div class="metaheader">
-        <label class="field-label"></label>
-        <div class="header-fields-row">
-          <p class="header-column">{{ t('fileData') }}</p>
-          <div class="midbuttons">
-            <p-button
-              size="small"
-              icon="pi pi-angle-left"
-              class="btn-margin"
-              [outlined]="true"
-              [pTooltip]="t('copyMissingTooltip')"
-              tooltipPosition="bottom"
-              (onClick)="copyMissing()"
-            ></p-button>
-            <p-button
-              size="small"
-              icon="pi pi-angle-double-left"
-              class="btn-margin"
-              [outlined]="true"
-              [pTooltip]="t('overwriteAllTooltip')"
-              tooltipPosition="bottom"
-              (onClick)="copyAll()"
-            ></p-button>
-            <p-button
-              size="small"
-              severity="warn"
-              icon="pi pi-refresh"
-              class="btn-margin"
-              [outlined]="true"
-              [pTooltip]="t('resetAllTooltip')"
-              tooltipPosition="bottom"
-              (onClick)="confirmReset()"
-            ></p-button>
-          </div>
-          <p class="header-column">{{ t('fetchedData') }}</p>
+      <div class="column-headers">
+        <div class="column-label current">
+          <span>{{ t('fileData') }}</span>
+        </div>
+        <div class="column-actions">
+          <button
+            type="button"
+            class="p-button p-button-outlined p-button-sm p-button-icon-only"
+            [pTooltip]="t('copyMissingTooltip')"
+            tooltipPosition="bottom"
+            (click)="copyMissing()"
+          >
+            <span class="p-button-icon pi pi-angle-left"></span>
+          </button>
+          <button
+            type="button"
+            class="p-button p-button-outlined p-button-sm p-button-icon-only"
+            [pTooltip]="t('overwriteAllTooltip')"
+            tooltipPosition="bottom"
+            (click)="copyAll()"
+          >
+            <span class="p-button-icon pi pi-angle-double-left"></span>
+          </button>
+          <button
+            type="button"
+            class="p-button p-button-outlined p-button-sm p-button-icon-only p-button-warn"
+            [pTooltip]="t('resetAllTooltip')"
+            tooltipPosition="bottom"
+            (click)="confirmReset()"
+          >
+            <span class="p-button-icon pi pi-refresh"></span>
+          </button>
+        </div>
+        <div class="column-label fetched">
+          <span>{{ t('fetchedData') }}</span>
         </div>
       </div>
       <div class="metacontent">

booklore-ui/src/app/features/bookdrop/component/bookdrop-file-metadata-picker/bookdrop-file-metadata-picker.component.scss

@@ -93,18 +93,45 @@ textarea.changed,
   width: 8rem;
 }
 
-.header-fields-row {
+.column-headers {
   display: flex;
-  width: 100%;
   align-items: center;
-}
+  padding: 1rem;
+  border-bottom: 1px dotted var(--border-color);
 
-.header-column {
-  width: 50%;
-}
+  @media (min-width: 768px) {
+    &::before {
+      content: '';
+      min-width: 8rem;
+      flex-shrink: 0;
+    }
+  }
+
+  .column-label {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    color: var(--text-color-secondary);
+    font-size: 0.875rem;
+
+    &.current {
+      justify-content: flex-end;
+      padding-right: 1rem;
+    }
 
-.btn-margin {
-  margin: 0 0.5rem;
+    &.fetched {
+      justify-content: flex-start;
+      padding-left: 1rem;
+    }
+  }
+
+  .column-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
 }
 
 .thumbnail-row {
@@ -217,25 +244,13 @@ textarea.changed,
   }
 }
 
+
 .metaheader {
-  position: relative;
   display: flex;
   align-items: center;
   border-bottom: 1px dotted var(--border-color);
   padding: 1rem;
   justify-content: space-between;
-
-  p {
-    text-align: center;
-
-    @media (max-width: 768px) {
-      font-size: 0.875rem;
-    }
-  }
-}
-
-.metaheader .midbuttons {
-  white-space: nowrap;
 }
 
 .metacontent {
@@ -294,7 +309,6 @@ textarea.changed,
 }
 
 @media (min-width: 768px) {
-  .metaheader,
   .metapicker .metacontent,
   .metaeditor .metabody {
     padding-left: 3.25rem;

booklore-ui/src/app/features/bookdrop/component/bookdrop-file-metadata-picker/bookdrop-file-metadata-picker.component.ts

@@ -1,5 +1,7 @@
-import {Component, EventEmitter, inject, Input, Output} from '@angular/core';
+import {Component, DestroyRef, EventEmitter, inject, Input, OnInit, Output} from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {filter} from 'rxjs/operators';
 import {Button} from 'primeng/button';
 import {NgClass} from '@angular/common';
 import {Tooltip} from 'primeng/tooltip';
@@ -14,6 +16,8 @@ import {ConfirmationService} from 'primeng/api';
 import {DatePicker} from 'primeng/datepicker';
 import {ALL_METADATA_FIELDS, getArrayFields, getBottomFields, getTextareaFields, MetadataFieldConfig} from '../../../../shared/metadata';
 import {MetadataUtilsService} from '../../../../shared/metadata';
+import {MetadataProviderSpecificFields} from '../../../../shared/model/app-settings.model';
+import {AppSettingsService} from '../../../../shared/service/app-settings.service';
 import {TranslocoDirective, TranslocoService} from '@jsverse/transloco';
 
 @Component({
@@ -35,11 +39,13 @@ import {TranslocoDirective, TranslocoService} from '@jsverse/transloco';
   templateUrl: './bookdrop-file-metadata-picker.component.html',
   styleUrl: './bookdrop-file-metadata-picker.component.scss'
 })
-export class BookdropFileMetadataPickerComponent {
+export class BookdropFileMetadataPickerComponent implements OnInit {
 
   private readonly confirmationService = inject(ConfirmationService);
   private readonly metadataUtils = inject(MetadataUtilsService);
   protected readonly urlHelper = inject(UrlHelperService);
+  private readonly appSettingsService = inject(AppSettingsService);
+  private readonly destroyRef = inject(DestroyRef);
   private readonly t = inject(TranslocoService);
 
   @Input() fetchedMetadata!: BookMetadata;
@@ -51,7 +57,8 @@ export class BookdropFileMetadataPickerComponent {
 
   @Output() metadataCopied = new EventEmitter<boolean>();
 
-  // Use shared field configuration - separate publishedDate for DatePicker
+  private enabledProviderFields: MetadataProviderSpecificFields | null = null;
+
   metadataFieldsTop: MetadataFieldConfig[] = ALL_METADATA_FIELDS.filter(f =>
     ['title', 'subtitle', 'publisher'].includes(f.controlName)
   );
@@ -66,6 +73,20 @@ export class BookdropFileMetadataPickerComponent {
 
   metadataFieldsBottom: MetadataFieldConfig[] = getBottomFields();
 
+  ngOnInit(): void {
+    this.appSettingsService.appSettings$
+      .pipe(
+        filter(settings => !!settings?.metadataProviderSpecificFields),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe(settings => {
+        if (settings?.metadataProviderSpecificFields) {
+          this.enabledProviderFields = settings.metadataProviderSpecificFields;
+          this.metadataFieldsBottom = getBottomFields(this.enabledProviderFields);
+        }
+      });
+  }
+
   copyMissing(): void {
     this.metadataUtils.copyMissingFields(
       this.fetchedMetadata,