Fix application settings dropdowns toggling each other

- Remove [(value)]="selected" binding from all dropdowns
- Each dropdown now only uses [(ngModel)] for its specific property
- Fixes issue where changing Embeddable would affect Load in Background
- Simplify save methods to avoid change detection errors
- Fix NG0100 ExpressionChangedAfterItHasBeenCheckedError

Author: sei-awelle

src/app/components/admin-app/view-applications-select/view-applications-select.component.html

@@ -65,7 +65,6 @@
         <mat-label>Embeddable</mat-label>
         <mat-select
           (selectionChange)="saveApplicationEmbeddable(app)"
-          [(value)]="selected"
           [(ngModel)]="app.embeddable"
           >
           <mat-option [value]="null">Inherit from Template</mat-option>
@@ -77,7 +76,6 @@
         <mat-label>Load in Background</mat-label>
         <mat-select
           (selectionChange)="saveApplicationLoadInBackground(app)"
-          [(value)]="selected"
           [(ngModel)]="app.loadInBackground"
           >
           <mat-option [value]="null">Inherit from Template</mat-option>
@@ -89,7 +87,6 @@
         <mat-label>Application Template</mat-label>
         <mat-select
           (selectionChange)="saveApplicationTemplateId(app)"
-          [(value)]="selected"
           [(ngModel)]="app.applicationTemplateId"
           >
           <mat-option [value]="null">None</mat-option>
@@ -142,7 +139,6 @@
           <mat-label>Template Embeddable</mat-label>
           <mat-select
             [disabled]="true"
-            [(value)]="selected"
             [(ngModel)]="template.embeddable"
             >
             <mat-option [value]="null">Inherit from Template</mat-option>
@@ -154,7 +150,6 @@
           <mat-label>Template Load in Background</mat-label>
           <mat-select
             [disabled]="true"
-            [(value)]="selected"
             [(ngModel)]="template.loadInBackground"
             >
             <mat-option [value]="null">Inherit from Template</mat-option>

src/app/components/admin-app/view-applications-select/view-applications-select.component.ts

@@ -141,41 +141,28 @@ export class ViewApplicationsSelectComponent implements OnInit {
    * @param application The changed application object
    */
   saveApplicationEmbeddable(application: Application): void {
-    this.applicationService.getApplication(application.id).subscribe((app) => {
-      app.embeddable = application.embeddable;
-      this.saveApplication(app);
-    });
+    this.saveApplication(application);
   }
 
   /**
    * Saves the application load in background flag
    * @param application The changed application object
    */
   saveApplicationLoadInBackground(application: Application): void {
-    this.applicationService.getApplication(application.id).subscribe((app) => {
-      app.loadInBackground = application.loadInBackground;
-      this.saveApplication(app);
-    });
+    this.saveApplication(application);
   }
 
   saveApplicationTemplateId(application: Application): void {
-    this.applicationService.getApplication(application.id).subscribe((app) => {
-      app.applicationTemplateId = application.applicationTemplateId;
-      this.saveApplication(app);
-    });
+    this.saveApplication(application);
   }
 
   /**
    * Generically saves the application for the view and updates the applications list
    */
   saveApplication(app: Application) {
     this.applicationService.updateApplication(app.id, app).subscribe(() => {
-      this.applicationService
-        .getViewApplications(this.view.id)
-        .subscribe((appInsts) => {
-          this.applications = appInsts;
-        });
-      console.log('Application name updated');
+      // Don't update local array - ngModel binding keeps it in sync
+      console.log('Application updated');
     });
   }
 
@@ -204,36 +191,36 @@ export class ViewApplicationsSelectComponent implements OnInit {
   getAppName(app: Application) {
     if (app.name != null) {
       return app.name;
-    } else if (app.applicationTemplateId != null) {
+    } else if (app.applicationTemplateId != null && this.applicationTemplates?.length > 0) {
       const template = this.applicationTemplates.find(
         (x) => x.id === app.applicationTemplateId
       );
 
       if (template != null) {
         return template.name;
       } else {
-        return null;
+        return 'Application';
       }
     } else {
-      return null;
+      return 'Application';
     }
   }
 
   getAppIcon(app: Application) {
     if (app.icon != null) {
       return app.icon;
-    } else if (app.applicationTemplateId != null) {
+    } else if (app.applicationTemplateId != null && this.applicationTemplates?.length > 0) {
       const template = this.applicationTemplates.find(
         (x) => x.id === app.applicationTemplateId
       );
 
       if (template != null) {
         return template.icon;
       } else {
-        return null;
+        return 'assets/img/SP_Icon_Dashboard.png';
       }
     } else {
-      return null;
+      return 'assets/img/SP_Icon_Dashboard.png';
     }
   }