fix missing permanent snackbars (#12)

* fix missing permanent snackbars

* rearrange timeout and button args, make timeout defaults more sensible

* convert mat snack bar -> snackbar service, update extant snackbar service calls

Author: crutan

src/@seed/api/organization/organization.service.ts

@@ -75,7 +75,7 @@ export class OrganizationService {
         this._userService.getCurrentUser().subscribe()
       }),
       map(() => {
-        this._snackBar.success('Organization Settings Updated', 'OK', true, 3000)
+        this._snackBar.success('Organization Settings Updated')
         this.getById(org.id).subscribe((o) => {
           return of(o)
         })

src/app/core/snackbar/snackbar.service.ts

@@ -5,19 +5,19 @@ import { MatSnackBar } from '@angular/material/snack-bar'
 export class SnackbarService {
   private _snackBar = inject(MatSnackBar)
 
-  alert(message: string, button = 'OK', timeout = false, timeoutLength = 3000) {
+  alert(message: string, timeout = false, button = 'OK', timeoutLength = 3000) {
     this._displaySnackBar(message, button, 'alert', timeout, timeoutLength)
   }
 
-  warning(message: string, button = 'OK', timeout = false, timeoutLength = 3000) {
+  warning(message: string, timeout = true, button = 'OK', timeoutLength = 3000) {
     this._displaySnackBar(message, button, 'warning', timeout, timeoutLength)
   }
 
-  success(message: string, button = 'OK', timeout = false, timeoutLength = 3000) {
+  success(message: string, timeout = true, button = 'OK', timeoutLength = 3000) {
     this._displaySnackBar(message, button, 'success', timeout, timeoutLength)
   }
 
-  info(message: string, button = 'OK', timeout = false, timeoutLength = 3000) {
+  info(message: string, timeout = true, button = 'OK', timeoutLength = 3000) {
     this._displaySnackBar(message, button, 'info', timeout, timeoutLength)
   }
 
@@ -26,6 +26,10 @@ export class SnackbarService {
       this._snackBar.open(message, button,
         { panelClass: `soft-${css_class}-snackbar`, duration: timeoutLength, horizontalPosition: 'center', verticalPosition: 'top' },
       )
+    } else {
+      this._snackBar.open(message, button,
+        { panelClass: `soft-${css_class}-snackbar`, horizontalPosition: 'center', verticalPosition: 'top' },
+      )
     }
   }
 }

src/app/modules/organizations/cycles/modal/delete-modal.component.ts

@@ -8,13 +8,13 @@ import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/materia
 import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatInputModule } from '@angular/material/input'
 import { MatProgressBarModule } from '@angular/material/progress-bar'
-import { MatSnackBar } from '@angular/material/snack-bar'
 import { catchError, throwError } from 'rxjs'
 import type { Cycle } from '@seed/api/cycle'
 import { CycleService } from '@seed/api/cycle/cycle.service'
 import { AlertComponent } from '@seed/components'
 import { UploaderService } from '@seed/services/uploader/uploader.service'
 import type { ProgressBarObj } from '@seed/services/uploader/uploader.types'
+import { SnackbarService } from 'app/core/snackbar/snackbar.service'
 
 @Component({
   selector: 'seed-cycles-delete-modal',
@@ -35,7 +35,7 @@ import type { ProgressBarObj } from '@seed/services/uploader/uploader.types'
 export class DeleteModalComponent {
   private _cycleService = inject(CycleService)
   private _uploaderService = inject(UploaderService)
-  private _snackBar = inject(MatSnackBar)
+  private _snackBar = inject(SnackbarService)
   private _dialogRef = inject(MatDialogRef<DeleteModalComponent>)
   errorMessage: string
   inProgress = false
@@ -90,19 +90,11 @@ export class DeleteModalComponent {
   }
 
   close(message: string) {
-    this.openSnackBar(`Deleted Cycle ${this.data.cycle.name}`)
+    this._snackBar.success(`Deleted Cycle ${this.data.cycle.name}`)
     this._dialogRef.close(message)
   }
 
   dismiss() {
     this._dialogRef.close()
   }
-
-  openSnackBar(message: string) {
-    this._snackBar.open(message, null, {
-      verticalPosition: 'top',
-      duration: 2000,
-      panelClass: 'soft-success-snackbar',
-    })
-  }
 }

src/app/modules/organizations/cycles/modal/form-modal.component.ts

@@ -8,10 +8,10 @@ import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog'
 import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatInputModule } from '@angular/material/input'
-import { MatSnackBar } from '@angular/material/snack-bar'
 import type { Cycle, CycleResponse } from '@seed/api/cycle'
 import { CycleService } from '@seed/api/cycle/cycle.service'
 import { SEEDValidators } from '@seed/validators'
+import { SnackbarService } from 'app/core/snackbar/snackbar.service'
 
 // configure the datepicker to display 01/01/2000 instead of January 1, 2000
 export const MY_DATE_FORMATS = {
@@ -44,7 +44,7 @@ export const MY_DATE_FORMATS = {
 })
 export class FormModalComponent implements OnInit {
   private _cycleService = inject(CycleService)
-  private _snackBar = inject(MatSnackBar)
+  private _snackBar = inject(SnackbarService)
   private _datePipe = inject(DatePipe)
   private _dialogRef = inject(MatDialogRef<FormModalComponent>)
 
@@ -83,7 +83,7 @@ export class FormModalComponent implements OnInit {
   close(response: CycleResponse) {
     const message = this.create ? `Created Cycle ${response.cycles.name}` : `Updated Cycle ${response.cycles.name}`
     if (response.status === 'success') {
-      this.openSnackBar(message)
+      this._snackBar.success(message)
     }
     this._dialogRef.close(response)
   }
@@ -92,14 +92,6 @@ export class FormModalComponent implements OnInit {
     this._dialogRef.close('dismiss')
   }
 
-  openSnackBar(message: string) {
-    this._snackBar.open(message, null, {
-      verticalPosition: 'top',
-      duration: 2000,
-      panelClass: 'soft-success-snackbar',
-    })
-  }
-
   private _formatDates() {
     this.form.value.start = this._datePipe.transform(this.form.value.start, 'yyyy-MM-dd')
     this.form.value.end = this._datePipe.transform(this.form.value.end, 'yyyy-MM-dd')

src/app/modules/organizations/settings/options/options.component.ts

@@ -10,7 +10,6 @@ import { Subject, takeUntil } from 'rxjs'
 import { type Organization, OrganizationService } from '@seed/api/organization'
 import { type Alert, AlertComponent } from '@seed/components'
 import { SharedImports } from '@seed/directives'
-import { SnackbarService } from 'app/core/snackbar/snackbar.service'
 
 @Component({
   selector: 'seed-organizations-settings-options',
@@ -30,7 +29,6 @@ import { SnackbarService } from 'app/core/snackbar/snackbar.service'
 export class OptionsComponent implements OnInit, OnDestroy {
   private _organizationService = inject(OrganizationService)
   private readonly _unsubscribeAll$ = new Subject<void>()
-  private _snackBar = inject(SnackbarService)
   organization: Organization
   alert: Alert
   fields: string[] = ['name', 'geocoding_enabled', 'comstock_enabled', 'public_feed_enabled']