[Imagery] Click on image to get a large view (#3770)

* [Imagery] Click on image to get a large view #3582
* Created new viewLargeAction.
* Changes in view registry to add parent element property inside view object.
* Separate class for views and added missing changes for LadTableSet.
* Renamed callBack to onItemClicked.

Co-authored-by: Andrew Henry <akhenry@gmail.com>

src/plugins/LADTable/LADTableSetViewProvider.js

@@ -19,8 +19,8 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import LadTableSet from './components/LadTableSet.vue';
-import Vue from 'vue';
+
+import LadTableSetView from './LadTableSetView';
 
 export default function LADTableSetViewProvider(openmct) {
     return {
@@ -34,32 +34,7 @@ export default function LADTableSetViewProvider(openmct) {
             return domainObject.type === 'LadTableSet';
         },
         view: function (domainObject, objectPath) {
-            let component;
-
-            return {
-                show: function (element) {
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            LadTableSet: LadTableSet
-                        },
-                        provide: {
-                            openmct,
-                            objectPath
-                        },
-                        data() {
-                            return {
-                                domainObject
-                            };
-                        },
-                        template: '<lad-table-set :domain-object="domainObject"></lad-table-set>'
-                    });
-                },
-                destroy: function (element) {
-                    component.$destroy();
-                    component = undefined;
-                }
-            };
+            return new LadTableSetView(openmct, domainObject, objectPath);
         },
         priority: function () {
             return 1;

src/plugins/LADTable/LADTableView.js

@@ -0,0 +1,45 @@
+import LadTable from './components/LADTable.vue';
+
+import Vue from 'vue';
+
+export default class LADTableView {
+    constructor(openmct, domainObject, objectPath) {
+        this.openmct = openmct;
+        this.domainObject = domainObject;
+        this.objectPath = objectPath;
+        this.component = undefined;
+    }
+
+    show(element) {
+        this.component = new Vue({
+            el: element,
+            components: {
+                LadTable
+            },
+            provide: {
+                openmct: this.openmct,
+                currentView: this
+            },
+            data: () => {
+                return {
+                    domainObject: this.domainObject,
+                    objectPath: this.objectPath
+                };
+            },
+            template: '<lad-table ref="ladTable" :domain-object="domainObject" :object-path="objectPath"></lad-table>'
+        });
+    }
+
+    getViewContext() {
+        if (!this.component) {
+            return {};
+        }
+
+        return this.component.$refs.ladTable.getViewContext();
+    }
+
+    destroy(element) {
+        this.component.$destroy();
+        this.component = undefined;
+    }
+}

src/plugins/LADTable/LADTableViewProvider.js

@@ -19,50 +19,30 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import LadTable from './components/LADTable.vue';
-import Vue from 'vue';
 
-export default function LADTableViewProvider(openmct) {
-    return {
-        key: 'LadTable',
-        name: 'LAD Table',
-        cssClass: 'icon-tabular-lad',
-        canView: function (domainObject) {
-            return domainObject.type === 'LadTable';
-        },
-        canEdit: function (domainObject) {
-            return domainObject.type === 'LadTable';
-        },
-        view: function (domainObject, objectPath) {
-            let component;
+import LADTableView from './LADTableView';
 
-            return {
-                show: function (element) {
-                    component = new Vue({
-                        el: element,
-                        components: {
-                            LadTableComponent: LadTable
-                        },
-                        provide: {
-                            openmct
-                        },
-                        data: () => {
-                            return {
-                                domainObject,
-                                objectPath
-                            };
-                        },
-                        template: '<lad-table-component :domain-object="domainObject" :object-path="objectPath"></lad-table-component>'
-                    });
-                },
-                destroy: function (element) {
-                    component.$destroy();
-                    component = undefined;
-                }
-            };
-        },
-        priority: function () {
-            return 1;
-        }
-    };
+export default class LADTableViewProvider {
+    constructor(openmct) {
+        this.openmct = openmct;
+        this.name = 'LAD Table';
+        this.key = 'LadTable';
+        this.cssClass = 'icon-tabular-lad';
+    }
+
+    canView(domainObject) {
+        return domainObject.type === 'LadTable';
+    }
+
+    canEdit(domainObject) {
+        return domainObject.type === 'LadTable';
+    }
+
+    view(domainObject, objectPath) {
+        return new LADTableView(this.openmct, domainObject, objectPath);
+    }
+
+    priority(domainObject) {
+        return 1;
+    }
 }

src/plugins/LADTable/LadTableSetView.js

@@ -0,0 +1,45 @@
+import LadTableSet from './components/LadTableSet.vue';
+
+import Vue from 'vue';
+
+export default class LadTableSetView {
+    constructor(openmct, domainObject, objectPath) {
+        this.openmct = openmct;
+        this.domainObject = domainObject;
+        this.objectPath = objectPath;
+        this.component = undefined;
+    }
+
+    show(element) {
+        this.component = new Vue({
+            el: element,
+            components: {
+                LadTableSet
+            },
+            provide: {
+                openmct: this.openmct,
+                objectPath: this.objectPath,
+                currentView: this
+            },
+            data: () => {
+                return {
+                    domainObject: this.domainObject
+                };
+            },
+            template: '<lad-table-set ref="ladTableSet" :domain-object="domainObject"></lad-table-set>'
+        });
+    }
+
+    getViewContext() {
+        if (!this.component) {
+            return {};
+        }
+
+        return this.component.$refs.ladTableSet.getViewContext();
+    }
+
+    destroy(element) {
+        this.component.$destroy();
+        this.component = undefined;
+    }
+}

src/plugins/LADTable/components/LADRow.vue

@@ -50,7 +50,7 @@ const CONTEXT_MENU_ACTIONS = [
 ];
 
 export default {
-    inject: ['openmct'],
+    inject: ['openmct', 'currentView'],
     props: {
         domainObject: {
             type: Object,
@@ -167,25 +167,23 @@ export default {
             this.resetValues();
             this.timestampKey = timeSystem.key;
         },
-        getView() {
-            return {
-                getViewContext: () => {
-                    return {
-                        viewHistoricalData: true,
-                        viewDatumAction: true,
-                        getDatum: () => {
-                            return this.datum;
-                        }
-                    };
+        updateViewContext() {
+            this.$emit('rowContextClick', {
+                viewHistoricalData: true,
+                viewDatumAction: true,
+                getDatum: () => {
+                    return this.datum;
                 }
-            };
+            });
         },
         showContextMenu(event) {
-            let actionCollection = this.openmct.actions.get(this.objectPath, this.getView());
-            let allActions = actionCollection.getActionsObject();
-            let applicableActions = CONTEXT_MENU_ACTIONS.map(key => allActions[key]);
+            this.updateViewContext();
 
-            this.openmct.menus.showMenu(event.x, event.y, applicableActions);
+            const actions = CONTEXT_MENU_ACTIONS.map(key => this.openmct.actions.getAction(key));
+            const menuItems = this.openmct.menus.actionsToMenuItems(actions, this.objectPath, this.currentView);
+            if (menuItems.length) {
+                this.openmct.menus.showMenu(event.x, event.y, menuItems);
+            }
         },
         resetValues() {
             this.value = '---';

src/plugins/LADTable/components/LADTable.vue

@@ -38,6 +38,7 @@
                 :domain-object="ladRow.domainObject"
                 :path-to-table="objectPath"
                 :has-units="hasUnits"
+                @rowContextClick="updateViewContext"
             />
         </tbody>
     </table>
@@ -51,7 +52,7 @@ export default {
     components: {
         LadRow
     },
-    inject: ['openmct'],
+    inject: ['openmct', 'currentView'],
     props: {
         domainObject: {
             type: Object,
@@ -64,7 +65,8 @@ export default {
     },
     data() {
         return {
-            items: []
+            items: [],
+            viewContext: {}
         };
     },
     computed: {
@@ -114,6 +116,12 @@ export default {
             let metadataWithUnits = valueMetadatas.filter(metadatum => metadatum.unit);
 
             return metadataWithUnits.length > 0;
+        },
+        updateViewContext(rowContext) {
+            this.viewContext.row = rowContext;
+        },
+        getViewContext() {
+            return this.viewContext;
         }
     }
 };

src/plugins/LADTable/components/LadTableSet.vue

@@ -48,6 +48,7 @@
                 :domain-object="ladRow.domainObject"
                 :path-to-table="ladTable.objectPath"
                 :has-units="hasUnits"
+                @rowContextClick="updateViewContext"
             />
         </template>
     </tbody>
@@ -61,7 +62,7 @@ export default {
     components: {
         LadRow
     },
-    inject: ['openmct', 'objectPath'],
+    inject: ['openmct', 'objectPath', 'currentView'],
     props: {
         domainObject: {
             type: Object,
@@ -72,7 +73,8 @@ export default {
         return {
             ladTableObjects: [],
             ladTelemetryObjects: {},
-            compositions: []
+            compositions: [],
+            viewContext: {}
         };
     },
     computed: {
@@ -166,6 +168,12 @@ export default {
 
                 this.$set(this.ladTelemetryObjects, ladTable.key, telemetryObjects);
             };
+        },
+        updateViewContext(rowContext) {
+            this.viewContext.row = rowContext;
+        },
+        getViewContext() {
+            return this.viewContext;
         }
     }
 };