Fixes and improvements related to components

app/assets/javascripts/views/abstract/pure_view_ctrl.ts

@@ -7,7 +7,7 @@ export type CtrlProps = Partial<Record<string, any>>
 export class PureViewCtrl {
   $timeout: ng.ITimeoutService
   /** Passed through templates */
-  application?: WebApplication
+  application!: WebApplication
   props: CtrlProps = {}
   state: CtrlState = {}
   private unsubApp: any
@@ -33,7 +33,7 @@ export class PureViewCtrl {
     this.unsubState();
     this.unsubApp = undefined;
     this.unsubState = undefined;
-    this.application = undefined;
+    (this.application as any) = undefined;
     if (this.stateTimeout) {
       this.$timeout.cancel(this.stateTimeout);
     }

app/assets/javascripts/views/application/application_view.ts

@@ -1,4 +1,5 @@
-import { WebDirective, PermissionsModalScope, ModalComponentScope } from '@/types';
+import { ComponentModalScope } from './../../directives/views/componentModal';
+import { WebDirective, PermissionsModalScope } from '@/types';
 import { getPlatformString } from '@/utils';
 import template from './application-view.pug';
 import { AppStateEvent } from '@/services/state';
@@ -52,7 +53,7 @@ class ApplicationViewCtrl extends PureViewCtrl {
     this.$location = undefined;
     this.$rootScope = undefined;
     this.$compile = undefined;
-    this.application = undefined;
+    (this.application as any) = undefined;
     window.removeEventListener('dragover', this.onDragOver, true);
     window.removeEventListener('drop', this.onDragDrop, true);
     (this.onDragDrop as any) = undefined;
@@ -219,10 +220,12 @@ class ApplicationViewCtrl extends PureViewCtrl {
   }
 
   openModalComponent(component: SNComponent) {
-    const scope = this.$rootScope!.$new(true) as ModalComponentScope;
-    scope.component = component;
+    const scope = this.$rootScope!.$new(true) as Partial<ComponentModalScope>;
+    scope.componentUuid = component.uuid;
+    scope.application = this.application;
     const el = this.$compile!(
-      "<component-modal component='component' class='sk-modal'></component-modal>"
+      "<component-modal application='application' component-uuid='componentUuid' "
+      + "class='sk-modal'></component-modal>"
     )(scope as any);
     angular.element(document.body).append(el);
   }

app/assets/javascripts/views/editor/editor_view.ts

@@ -1111,7 +1111,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
       this.application.componentManager!.setComponentHidden(component, false);
       await this.associateComponentWithCurrentNote(component);
       if (!component.active) {
-        this.application.componentManager!.activateComponent(component);
+        this.application.componentManager!.activateComponent(component.uuid);
       }
       this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.EditorStack);
     } else {

app/assets/javascripts/views/footer/footer-view.pug

@@ -30,9 +30,9 @@
         .sk-app-bar-item-column(ng-click='ctrl.selectRoom(room)')
           .sk-label {{room.name}}
         component-modal(
-          component='room', 
+          component-uuid='room.uuid', 
           ng-if='ctrl.roomShowState[room.uuid]', 
-          on-dismiss='ctrl.onRoomDismiss()',
+          on-dismiss='ctrl.onRoomDismiss(room)',
           application='ctrl.application'
           )
     .center