implement output format

src/plugins/comps/CompsInspectorViewProvider.js

@@ -0,0 +1,84 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import mount from 'utils/mount';
+
+import CompsInspectorView from './components/CompsInspectorView.vue';
+
+export default class ConditionSetViewProvider {
+  constructor(openmct, compsManagerPool) {
+    this.openmct = openmct;
+    this.name = 'Config';
+    this.key = 'comps-configuration';
+    this.compsManagerPool = compsManagerPool;
+  }
+
+  canView(selection) {
+    if (selection.length !== 1 || selection[0].length === 0) {
+      return false;
+    }
+
+    let object = selection[0][0].context.item;
+    return object && object.type === 'comps';
+  }
+
+  view(selection) {
+    let _destroy = null;
+    const domainObject = selection[0][0].context.item;
+    const openmct = this.openmct;
+
+    return {
+      show: function (element) {
+        const { destroy } = mount(
+          {
+            el: element,
+            components: {
+              CompsInspectorView: CompsInspectorView
+            },
+            provide: {
+              openmct,
+              domainObject,
+              compsManagerPool: this.compsManagerPool
+            },
+            template: '<comps-inspector-view></comps-inspector-view>'
+          },
+          {
+            app: openmct.app,
+            element
+          }
+        );
+        _destroy = destroy;
+      },
+      showTab: function (isEditing) {
+        return isEditing;
+      },
+      priority: function () {
+        return 1;
+      },
+      destroy: function () {
+        if (_destroy) {
+          _destroy();
+        }
+      }
+    };
+  }
+}

src/plugins/comps/components/CompsInspectorView.vue

@@ -0,0 +1,73 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div class="c-inspect-properties">
+    <template v-if="isEditing">
+      <ul class="c-inspect-properties__section">
+        <li class="c-inspect-properties__row">
+          <div class="c-inspect-properties__label" title="Output Format">
+            <label for="OutputFormatControl">Output Format</label>
+          </div>
+          <div class="c-inspect-properties__value">
+            <input
+              id="OutputFormatControl"
+              v-model="inputFormatValue"
+              type="text"
+              class="c-input--flex"
+              @change="changeInputFormat()"
+            />
+          </div>
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { inject, onBeforeMount, onBeforeUnmount, ref } from 'vue';
+
+const isEditing = ref(false);
+const inputFormatValue = ref('');
+
+const openmct = inject('openmct');
+const domainObject = inject('domainObject');
+const compsManagerPool = inject('compsManagerPool');
+
+onBeforeMount(() => {
+  isEditing.value = openmct.editor.isEditing();
+  openmct.editor.on('isEditing', toggleEdit);
+  inputFormatValue.value = domainObject.configuration.comps.outputFormat;
+});
+
+onBeforeUnmount(() => {
+  openmct.editor.off('isEditing', toggleEdit);
+});
+
+function toggleEdit(passedIsEditing) {
+  isEditing.value = passedIsEditing;
+}
+
+function changeInputFormat() {
+  openmct.objects.mutate(domainObject, `configuration.comps.outputFormat`, inputFormatValue.value);
+  compsManagerPool.setDomainObject(domainObject);
+}
+</script>