deletion settings update - html and ts (b4 viewing ability)

//html
<div class="deletion-settings-container">
    <form>
        <div class="form-group">
          <label for="deletionTime">Deletion Time:</label>
          <input type="number" id="deletionTime" [(ngModel)]="deletionTime.value" name="deletionTime" required>
        </div>
      
        <div class="form-group">
          <label for="timeUnit">Time Unit:</label>
          <select id="timeUnit" [(ngModel)]="deletionTime.unit" name="timeUnit">
            <option value="Minutes">Minutes</option>
            <option value="Hours">Hours</option>
            <option value="Days">Days</option>
            <option value="Weeks">Weeks</option>
            <option value="Months">Months</option>
            <option value="Years">Years</option>
          </select>
        </div>
      
        <button type="button" (click)="saveDeletionTime()">Save</button>
      </form>
</div>

  
//ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { UserService } from '../Services/userprofile.service';
import { DeletionSettings } from '../shared/deletionsettings';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Router } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-deletion-settings',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './deletion-settings.component.html',
  styleUrl: './deletion-settings.component.css'
})
export class DeletionSettingsComponent {
  deletionTime = {
    value: 0,
    unit: 'Minutes'
  };

  constructor(private userService: UserService, private snackBar: MatSnackBar, private router: Router, private location: Location) {}

  saveDeletionTime() {
    if (this.deletionTime.value < 0) {
      console.error('Deletion time value must be non-negative');
      this.snackBar.open('Deletion time value must be non-negative', 'Close', { duration: 5000 });
      return;
    }

    const settings: DeletionSettings = {
      deletionTimeValue: this.deletionTime.value,
      deletionTimeUnit: this.deletionTime.unit
    };
  
    this.userService.updateDeletionTime(settings).subscribe({
      next: (response) => {
        console.log('Deletion time updated successfully', response);
        // You can also add some user feedback here like a success message
        this.snackBar.open('Deletion time updated successfully', 'Close', { duration: 5000 });
        this.router.navigateByUrl(`/users`);
      },
      error: (error) => {
        console.error('Error updating deletion time', error);
        // You can add error handling logic here
        this.snackBar.open('Failed to update deletion time. Please try again', 'Close', { duration: 5000 });
      }
    });
  }
  
  goBack(): void {
    this.location.back();
  }  
}