Andy/radio button toggle (#2378)

artisticlight · williamh890 · Copilot · web-flow · commit f3ab1832d133 · 2026-01-06T10:15:06.000-08:00
* Add ability to update a jobs project name * fix: formatting * Add ability to nuke all loaded jobs * Make Help more easily seen on Filter's panel. * DS-6336 Text modified to be translatable. * Lint space * feat: Update to use jobs patch endpoint * Update src/app/components/filters-dropdown/dataset-filters/dataset-filters.component.scss Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Round 1 of revamping the UI * Fix console error related to translation. * Bulk rename uses new dialog * npm run lint -- --fix * On Demand search reloads after bulk rename * npm run lint -- --fix * Resolving issues from merging with test * Snackbar message for renaming jobs * Adding multi-lingual support to rename dialog And a few other UI tweaks. * Edit Validation Added checks for empty project name entry or only spaces. Also validate that the jobs were successfully renamed and provided error handling. Will provide error notification with toast. * Update src/app/services/hyp3/hyp3-api.service.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update src/app/store/scenes/scenes.action.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Fix for flight direction graphics not appearing in Displacement I think this is an unreported bug resulting from the recent Angular upgrade. * Show projects that are going to be renamed with the bulk operation. * Update uniqueProjectNames filtering * Fix: update job count in dialog * Fix single job rename * Many Changes * Added list of projects and associated job counts in a sortable table * Limited project name input to 100 characters * Prevent user from changing names of projects for other users * Progress Bar I've implemented a two-phase dialog that handles the rename operation internally with a determinate progress bar. * Deterministic Progress Bar The Project Rename dialog box now is augmented with a couple more screens indicating renaming progress and completion. * UI Improvements * Auto-focus the input field * Show the new name in the confirmation message * Show specific project names if failed I've implemented the feature to show which specific project names failed to rename in the completion phase. * Show Time Estimate for Bulk Rename Completion I've implemented the estimated time remaining feature for large batch rename operations. Here's what was added: How it works: The estimated time is calculated based on the elapsed time and number of completed batches It only displays for operations with 1000+ jobs (to avoid showing for small, quick operations) The time is displayed in a user-friendly format (e.g., "< 1 min", "~1 min", "~5 min") * Project Rename Title Updated Updated the table to William's suggestions. * npm run lint -- --fix * Update src/app/store/scenes/scenes.action.ts Co-authored-by: William Horn <wbhorn@alaska.edu> * Update src/app/services/hyp3/hyp3-api.service.ts Co-authored-by: William Horn <wbhorn@alaska.edu> * Created three named interfaces at the top of hyp3-api.service.ts * RenameProgressInfo - Progress info with percent and estimated time remaining * RenameResult - Final result with success/failed counts and failed project names *RenameWithProgressResult - The composite return type containing both observables I also changed a 'sneaky' 3 into a constant * Update src/app/components/shared/project-name-dialog/project-name-dialog.component.ts Co-authored-by: William Horn <wbhorn@alaska.edu> * Tyler Suggestions Fixed - Red toast regression Fixed - Missing unnamed projects * Tyler Suggestions #2 Fixed - Empty string validation feedback Fixed - Checkbox disclaimer with empty string * Tyler Suggestions #3 Fixed - Remove dialog service abstraction Fixed - Convert getter to signal/computed * Tyler Suggestions #4 Fixed - Use SubSink pattern consistently Fixed - Moved constructor logic to ngOnInit * Tyler Suggestions #5 Fixed - Material Table with Sorting in-place Reviewing the idea of using the Material Stepper consideration, I don't think it is a good fit. The phases are not user-navigated steps, they're system-driven and there is no option for backward navigation. * npm run lint -- --fix * Conformity & Best Practices #2 - Removed stale SCSS styles: Cleaned up .sortable, .sort-indicator, .projects-table-body-container, and custom table styling that was no longer needed after switching to Material table * Made dialog injects private: Changed dialogRef and data from public to private to match codebase pattern * Added readonly to displayedColumns: Added readonly modifier since the array never changes * Fixed track function: Changed track name to track $index to handle potential duplicate project names in the failed list * Made "(unnamed)" multilingual * Tweaks Made the Project Rename table sorted by Project Name by default and eliminated the use of ::ng-deep in the Project Rename scss files. * Conformity & Best Practices * Removed stale SCSS styles: Cleaned up .sortable, .sort-indicator, .projects-table-body-container, and custom table styling that was no longer needed after switching to Material table * Made dialog injects private: Changed dialogRef and data from public to private to match codebase pattern * Added readonly to displayedColumns: Added readonly modifier since the array never changes * Fixed track function: Changed track name to track $index to handle potential duplicate project names in the failed list * Made "(unnamed)" multilingual * Tweaks Made the Project Rename table sorted by Project Name by default and eliminated the use of ::ng-deep in the Project Rename scss files. * npm run lint -- --fix * Made the table header 'sticky' * Fixed Table Header for Dark-Theme * Show estimated time for 5+ jobs It was 1000+ before but Tools wants to see it always. * Warn about Abort I added a @HostListener for the window:beforeunload event that triggers only when the dialog is in the processing phase. This will: - Show the browser's native "Leave site?" confirmation dialog when the user tries to close the tab/window or navigate away - Only trigger during the processing phase - users can freely close during input, complete, or error phases - Let the browser handle the UI (modern browsers don't allow custom messages for security reasons) * Add toggle for removing project names in update dialog * feat(project-name-dialog): replace button toggle with radio buttons - Replace mat-button-toggle-group with mat-radio-group for cleaner UX - Input field now visually nested under "Rename" radio option - Add singular/plural translation keys for radio labels (en, es, de) - Add accessible aria-label to radio group - Update styles for radio group layout and disabled state - Add docs/ to .gitignore * Update src/assets/i18n/es.json Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update src/app/components/shared/project-name-dialog/project-name-dialog.component.scss Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Bug Fix A single job rename didn't reflect the count of '1' in the dialog for renaming a job. It now does. --------- Co-authored-by: William Horn <wbhorn@alaska.edu> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
diff --git a/.gitignore b/.gitignore
@@ -46,3 +46,4 @@ local-serve.sh
 .claude/
 CLAUDE.md
 TRANSLATIONS_SCRATCH.md
+docs/
diff --git a/src/app/components/shared/project-name-dialog/project-name-dialog.component.html b/src/app/components/shared/project-name-dialog/project-name-dialog.component.html
@@ -16,25 +16,52 @@ <h2 class="dialog-title">
 
   <form (ngSubmit)="onSave()">
     <mat-dialog-content>
-      <mat-form-field class="project-name-field">
-        <mat-label>{{ 'PROJECT_NAME' | translate }}</mat-label>
-        <input
-          #projectNameInput
-          matInput
-          [ngModel]="projectName()"
-          (ngModelChange)="projectName.set($event)"
-          name="projectName"
-          maxlength="100"
-          required
-          [disabled]="isDisabledByUserFilter"
-        />
-        <mat-hint align="end">{{ projectName()?.length || 0 }}/100</mat-hint>
-        @if (!projectName()?.trim()) {
-          <mat-error>{{ 'PROJECT_NAME_REQUIRED' | translate }}</mat-error>
-        } @else if (projectName()?.length >= 100) {
-          <mat-error>{{ 'PROJECT_NAME_MAX_LENGTH' | translate }}</mat-error>
-        }
-      </mat-form-field>
+      <mat-radio-group
+        [ngModel]="projectEditType()"
+        (ngModelChange)="projectEditType.set($event)"
+        name="projectEditType"
+        class="project-edit-radio-group"
+        aria-label="Project edit action"
+      >
+        <mat-radio-button value="edit">
+          @if (jobCount <= 1) {
+            {{ 'RENAME_JOB_TO' | translate }}
+          } @else {
+            {{ 'RENAME_JOBS_TO' | translate: { count: jobCount } }}
+          }
+        </mat-radio-button>
+
+        <mat-form-field
+          class="project-name-field"
+          [class.disabled]="isRemoveMode()"
+        >
+          <mat-label>{{ 'PROJECT_NAME' | translate }}</mat-label>
+          <input
+            #projectNameInput
+            matInput
+            [ngModel]="projectName()"
+            (ngModelChange)="projectName.set($event)"
+            name="projectName"
+            maxlength="100"
+            required
+            [disabled]="isDisabledByUserFilter || isRemoveMode()"
+          />
+          <mat-hint align="end">{{ projectName()?.length || 0 }}/100</mat-hint>
+          @if (!projectName()?.trim()) {
+            <mat-error>{{ 'PROJECT_NAME_REQUIRED' | translate }}</mat-error>
+          } @else if (projectName()?.length >= 100) {
+            <mat-error>{{ 'PROJECT_NAME_MAX_LENGTH' | translate }}</mat-error>
+          }
+        </mat-form-field>
+
+        <mat-radio-button value="remove">
+          @if (projectCount <= 1) {
+            {{ 'REMOVE_PROJECT_NAME' | translate }}
+          } @else {
+            {{ 'REMOVE_PROJECT_NAMES' | translate: { count: projectCount } }}
+          }
+        </mat-radio-button>
+      </mat-radio-group>
 
       @if (dataSource.data.length > 0) {
         <p class="projects-label bold">
@@ -86,18 +113,32 @@ <h2 class="dialog-title">
             [(ngModel)]="confirmationChecked"
             name="confirmationChecked"
           >
-            {{
-              (projectCount === 1
-                ? 'CONFIRM_RENAME_SINGLE'
-                : 'CONFIRM_RENAME_MULTIPLE'
-              )
-                | translate
-                  : {
-                      projectCount: projectCount,
-                      jobCount: jobCount,
-                      newName: projectName()?.trim(),
-                    }
-            }}
+            @if (isEditMode()) {
+              {{
+                (projectCount === 1
+                  ? 'CONFIRM_RENAME_SINGLE'
+                  : 'CONFIRM_RENAME_MULTIPLE'
+                )
+                  | translate
+                    : {
+                        projectCount: projectCount,
+                        jobCount: jobCount,
+                        newName: projectName()?.trim(),
+                      }
+              }}
+            } @else {
+              {{
+                (projectCount === 1
+                  ? 'CONFIRM_REMOVE_SINGLE'
+                  : 'CONFIRM_REMOVE_MULTIPLE'
+                )
+                  | translate
+                    : {
+                        projectCount: projectCount,
+                        jobCount: jobCount,
+                      }
+              }}
+            }
           </mat-checkbox>
         }
       }
diff --git a/src/app/components/shared/project-name-dialog/project-name-dialog.component.scss b/src/app/components/shared/project-name-dialog/project-name-dialog.component.scss
@@ -26,12 +26,34 @@ app-project-name-dialog {
     }
   }
 
+  // Radio group layout for edit/remove toggle
+  .project-edit-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
   .project-name-field {
-    width: 100%;
+    margin-left: 32px;
+    width: calc(100% - 32px);
 
     .mat-mdc-text-field-wrapper {
       padding-top: 0;
     }
+
+    // Subtle disabled state when "Remove" is selected
+    &.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  // Radio button label sizing
+  .mat-mdc-radio-button {
+    .mdc-label {
+      font-size: 14px;
+    }
   }
 
   .projects-label {
diff --git a/src/app/components/shared/project-name-dialog/project-name-dialog.component.ts b/src/app/components/shared/project-name-dialog/project-name-dialog.component.ts
@@ -37,6 +37,7 @@ import {
   MatRowDef,
   MatRow,
 } from '@angular/material/table';
+import { MatRadioModule } from '@angular/material/radio';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { SubSink } from 'subsink';
@@ -92,6 +93,7 @@ export interface ProjectNameDialogResult {
     MatRowDef,
     MatRow,
     TranslateModule,
+    MatRadioModule,
   ],
 })
 export class ProjectNameDialogComponent
@@ -125,9 +127,14 @@ export class ProjectNameDialogComponent
   public successCount = 0;
   public failedCount = 0;
   public failedProjectNames: string[] = [];
+  public projectEditType = signal<'edit' | 'remove'>('edit');
 
   // Computed values (only recalculate when dependencies change)
-  public isValid = computed(() => this.projectName().trim().length > 0);
+  public isEditMode = computed(() => this.projectEditType() === 'edit');
+  public isRemoveMode = computed(() => this.projectEditType() === 'remove');
+  public isValid = computed(
+    () => this.projectName().trim().length > 0 || this.isRemoveMode(),
+  );
 
   public formattedTimeRemaining = computed(() => {
     // Only show estimated time for operations of 5+ jobs
@@ -157,7 +164,7 @@ export class ProjectNameDialogComponent
     }
 
     const products = this.data?.products;
-    this.jobCount = products?.length;
+    this.jobCount = products?.length ?? 1;
 
     if (products) {
       const unnamedLabel = this.translateService.instant(
@@ -204,7 +211,7 @@ export class ProjectNameDialogComponent
       return;
     }
 
-    const trimmedName = this.projectName().trim();
+    const trimmedName = this.isEditMode() ? this.projectName().trim() : null;
 
     // If no products, just return the name (single-file rename flow)
     if (!this.data.products || this.data.products.length === 0) {
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -597,6 +597,8 @@
   "REMOVE_FILE_FROM_DOWNLOADS": "Datei aus Downloads entfernen",
   "REMOVE_FILE_FROM_QUEUE": "Datei aus der Warteschlange entfernen",
   "REMOVE_JOB": "Job entfernen",
+  "REMOVE_PROJECT_NAME": "Projektname entfernen",
+  "REMOVE_PROJECT_NAMES": "{{count}} Projektnamen entfernen",
   "REMOVE_RED_EYE": "remove_red_eye",
   "REMOVE_SCENE_FILES_FROM_DOWNLOADS": "Entfernen von Szenendateien aus Downloads",
   "RESAMPLED_DEM_SRTM_OR_NED_USED_FOR_RTC_PROCESSING": "Resampled DEM (SRTM oder NED), das für die RTC-Verarbeitung verwendet wird.",
@@ -609,6 +611,8 @@
   "RENAME_ALL_FAILED": "{{count}} Auftrag/Aufträge konnten nicht umbenannt werden.",
   "RENAME_COMPLETE": "Umbenennung abgeschlossen",
   "RENAME_ERROR": "Beim Umbenennen der Aufträge ist ein Fehler aufgetreten.",
+  "RENAME_JOB_TO": "Job umbenennen zu:",
+  "RENAME_JOBS_TO": "{{count}} Jobs umbenennen zu:",
   "RENAME_PARTIAL_SUCCESS": "{{success}} Auftrag/Aufträge umbenannt. {{failed}} fehlgeschlagen.",
   "RENAME_SUCCESS": "{{count}} Auftrag/Aufträge erfolgreich umbenannt.",
   "RENAMING_JOBS": "Aufträge werden umbenannt...",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -126,6 +126,8 @@
   "CANNOT_RENAME_PROJECTS_FOR": "You cannot rename projects for",
   "CONFIRM_RENAME_MULTIPLE": "Yes! I really want to rename these {{projectCount}} projects ({{jobCount}} jobs) to \"{{newName}}\".",
   "CONFIRM_RENAME_SINGLE": "Yes! I really want to rename this 1 project ({{jobCount}} jobs) to \"{{newName}}\".",
+  "CONFIRM_REMOVE_MULTIPLE": "Yes! I really want to remove the names from these {{projectCount}} projects ({{jobCount}} jobs).",
+  "CONFIRM_REMOVE_SINGLE": "Yes! I really want to remove the project name from this project ({{jobCount}} jobs).",
   "CENTER_COLUMN_AND_FILES_COLUMN_RIGHT_WILL_POPULATE": "(center column) and Files column (right) will populate.",
   "CHARACTERS": "characters",
   "CHART": "Chart",
@@ -713,6 +715,8 @@
   "REMOVE_FILE_FROM_DOWNLOADS": "Remove file from downloads",
   "REMOVE_FILE_FROM_QUEUE": "Remove file from queue",
   "REMOVE_JOB": "Remove job",
+  "REMOVE_PROJECT_NAME": "Remove project name",
+  "REMOVE_PROJECT_NAMES": "Remove {{count}} project names",
   "REMOVE_RED_EYE": "remove_red_eye",
   "REMOVE_SCENE_FILES_FROM_DOWNLOADS": "Remove scene files from downloads",
   "REMOVE_SERIES": "Remove Series",
@@ -728,6 +732,8 @@
   "RENAME_ALL_FAILED": "Failed to rename {{count}} job(s).",
   "RENAME_COMPLETE": "Rename Complete",
   "RENAME_ERROR": "An error occurred while renaming jobs.",
+  "RENAME_JOB_TO": "Rename job to:",
+  "RENAME_JOBS_TO": "Rename {{count}} jobs to:",
   "RENAME_PARTIAL_SUCCESS": "Renamed {{success}} job(s). {{failed}} failed.",
   "RENAME_SUCCESS": "Successfully renamed {{count}} job(s).",
   "RENAMING_JOBS": "Renaming jobs...",
@@ -1050,4 +1056,4 @@
   "ZOOM_TO_FIT": "Zoom To Fit",
   "ZOOM_TO_RESULTS": "Zoom to results",
   "ZOOM_TO_SCENE": "Zoom to scene"
-}
+}
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
@@ -126,6 +126,8 @@
   "CANNOT_RENAME_PROJECTS_FOR": "No puede cambiar el nombre de los proyectos de",
   "CONFIRM_RENAME_MULTIPLE": "¡Sí! Realmente quiero renombrar estos {{projectCount}} proyectos ({{jobCount}} trabajos) a \"{{newName}}\".",
   "CONFIRM_RENAME_SINGLE": "¡Sí! Realmente quiero renombrar este 1 proyecto ({{jobCount}} trabajos) a \"{{newName}}\".",
+  "CONFIRM_REMOVE_MULTIPLE": "¡Sí! Realmente quiero eliminar estos {{projectCount}} proyectos ({{jobCount}} trabajos).",
+  "CONFIRM_REMOVE_SINGLE": "¡Sí! Realmente quiero eliminar este 1 proyecto ({{jobCount}} trabajos).",
   "CENTER_COLUMN_AND_FILES_COLUMN_RIGHT_WILL_POPULATE": "(columna central) y la columna Archivos (derecha) se completarán.",
   "CHARACTERS": "caracteres",
   "CHART": "Gráfico",
@@ -714,6 +716,8 @@
   "REMOVE_FILE_FROM_DOWNLOADS": "Eliminar archivo de las descargas",
   "REMOVE_FILE_FROM_QUEUE": "Eliminar archivo de la lista",
   "REMOVE_JOB": "Quitar trabajo",
+  "REMOVE_PROJECT_NAME": "Eliminar nombre del proyecto",
+  "REMOVE_PROJECT_NAMES": "Eliminar {{count}} nombres de proyecto",
   "REMOVE_RED_EYE": "quitar_ojo_rojo",
   "REMOVE_SCENE_FILES_FROM_DOWNLOADS": "Eliminar archivos de escena de las descargas",
   "REMOVE_SERIES": "Eliminar serie",
@@ -729,6 +733,8 @@
   "RENAME_ALL_FAILED": "Error al renombrar {{count}} trabajo(s).",
   "RENAME_COMPLETE": "Cambio de nombre completado",
   "RENAME_ERROR": "Ocurrió un error al renombrar los trabajos.",
+  "RENAME_JOB_TO": "Renombrar trabajo a:",
+  "RENAME_JOBS_TO": "Renombrar {{count}} trabajos a:",
   "RENAME_PARTIAL_SUCCESS": "Se renombraron {{success}} trabajo(s). {{failed}} fallaron.",
   "RENAME_SUCCESS": "Se renombraron {{count}} trabajo(s) exitosamente.",
   "RENAMING_JOBS": "Renombrando trabajos...",
@@ -1051,4 +1057,4 @@
   "ZOOM_TO_FIT": "Acercar para ajustar",
   "ZOOM_TO_RESULTS": "Acercar a los resultados",
   "ZOOM_TO_SCENE": "Acercar a la escena"
-}
+}
