Three Dot Menu Prototype (#3325)

* Three dot menu implementation

Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
Co-authored-by: Nikhil <nikhil.k.mandlik@nasa.gov>

src/ui/preview/Preview.vue

@@ -23,9 +23,9 @@
 <div class="l-preview-window">
     <PreviewHeader
         :current-view="currentView"
+        :action-collection="actionCollection"
         :domain-object="domainObject"
         :views="views"
-        @setView="setView"
     />
     <div class="l-preview-window__object-view">
         <div ref="objectView"></div>
@@ -51,26 +51,23 @@ export default {
 
         return {
             domainObject: domainObject,
-            viewKey: undefined
+            viewKey: undefined,
+            views: [],
+            currentView: {},
+            actionCollection: undefined
         };
     },
-    computed: {
-        views() {
-            return this
-                .openmct
-                .objectViews
-                .get(this.domainObject);
-        },
-        currentView() {
-            return this.views.filter(v => v.key === this.viewKey)[0] || {};
-        }
-    },
     mounted() {
-        let view = this.openmct.objectViews.get(this.domainObject)[0];
-        this.setView(view);
+        this.views = this.openmct.objectViews.get(this.domainObject).map((view) => {
+            view.callBack = () => {
+                return this.setView(view);
+            };
+
+            return view;
+        });
+        this.setView(this.views[0]);
     },
-    destroyed() {
-        this.view.destroy();
+    beforeDestroy() {
         if (this.stopListeningStyles) {
             this.stopListeningStyles();
         }
@@ -79,6 +76,13 @@ export default {
             this.styleRuleManager.destroy();
             delete this.styleRuleManager;
         }
+
+        if (this.actionCollection) {
+            this.actionCollection.destroy();
+        }
+    },
+    destroyed() {
+        this.view.destroy();
     },
     methods: {
         clear() {
@@ -91,17 +95,29 @@ export default {
             delete this.viewContainer;
         },
         setView(view) {
-            this.clear();
+            if (this.viewKey === view.key) {
+                return;
+            }
 
+            this.clear();
             this.viewKey = view.key;
+            this.currentView = view;
             this.viewContainer = document.createElement('div');
             this.viewContainer.classList.add('l-angular-ov-wrapper');
             this.$refs.objectView.append(this.viewContainer);
-
             this.view = this.currentView.view(this.domainObject, this.objectPath);
+
+            this.getActionsCollection();
             this.view.show(this.viewContainer, false);
             this.initObjectStyles();
         },
+        getActionsCollection() {
+            if (this.actionCollection) {
+                this.actionCollection.destroy();
+            }
+
+            this.actionCollection = this.openmct.actions._get(this.objectPath, this.view);
+        },
         initObjectStyles() {
             if (!this.styleRuleManager) {
                 this.styleRuleManager = new StyleRuleManager((this.domainObject.configuration && this.domainObject.configuration.objectStyles), this.openmct, this.updateStyle.bind(this));
@@ -124,8 +140,9 @@ export default {
             }
 
             let keys = Object.keys(styleObj);
+            let firstChild = this.$refs.objectView.querySelector(':first-child');
+
             keys.forEach(key => {
-                let firstChild = this.$refs.objectView.querySelector(':first-child');
                 if (firstChild) {
                     if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('__no_value') > -1)) {
                         if (firstChild.style[key]) {