feat(WIP): dismissible popup, use moar compositionAPI

src/plugins/userIndicator/components/MissionStatusPopup.vue

@@ -2,7 +2,7 @@
   <div class="control-panel">
     <div class="header">
       <span>CONTROL PANEL</span>
-      <button class="close-btn">X</button>
+      <button class="close-btn" @click.stop="onDismiss">X</button>
     </div>
     <div v-for="status in missionStatuses" :key="status" class="status-item">
       <label :for="status">{{ status }}</label>
@@ -12,24 +12,6 @@
           {{ option.label }}
         </option>
       </select>
-      <!-- <div class="status-item">
-      <label for="commandingStatus">Commanding Status</label>
-      <button class="status-btn go">GO</button>
-      <select id="commandingStatus">
-        <option>- Set Status -</option>
-        <option value="status1">Status 1</option>
-        <option value="status2">Status 2</option>
-      </select>
-    </div>
-    <div class="status-item">
-      <label for="driveStatus">Drive Status</label>
-      <button class="status-btn go">GO</button>
-      <select id="driveStatus">
-        <option>- Set Status -</option>
-        <option value="status1">Status 1</option>
-        <option value="status2">Status 2</option>
-      </select>
-    </div> -->
     </div>
   </div>
 </template>
@@ -37,6 +19,7 @@
 <script>
 export default {
   inject: ['openmct'],
+  emits: ['dismiss'],
   data() {
     return {
       missionStatuses: [],
@@ -47,6 +30,10 @@ export default {
     this.missionStatuses = await this.openmct.user.status.getPossibleMissionStatuses();
     this.missionStatusOptions = await this.openmct.user.status.getPossibleMissionStatusOptions();
   },
-  methods: {}
+  methods: {
+    onDismiss() {
+      this.$emit('dismiss');
+    }
+  }
 };
 </script>

src/plugins/userIndicator/components/UserIndicator.vue

@@ -22,7 +22,7 @@
 
 <template>
   <div
-    ref="userIndicator"
+    ref="userIndicatorRef"
     class="c-indicator c-indicator--user icon-person"
     :class="canSetMissionStatus ? 'c-indicator--clickable' : ''"
     v-bind="$attrs"
@@ -36,14 +36,17 @@
     </span>
   </div>
   <Teleport to="body">
-    <div v-show="isPopupVisible" ref="popup" class="c-user-control-panel" :style="popupStyle">
-      <MissionStatusPopup v-show="canSetMissionStatus" />
+    <div v-show="isPopupVisible" ref="popupRef" class="c-user-control-panel" :style="popupStyle">
+      <MissionStatusPopup v-show="canSetMissionStatus" @dismiss="togglePopup" />
     </div>
   </Teleport>
 </template>
 
 <script>
+import { ref } from 'vue';
+
 import ActiveRoleSynchronizer from '../../../api/user/ActiveRoleSynchronizer.js';
+import { useEventListener } from '../../../ui/composables/event.js';
 import { useWindowResize } from '../../../ui/composables/resize.js';
 import MissionStatusPopup from './MissionStatusPopup.vue';
 
@@ -56,8 +59,20 @@ export default {
   inheritAttrs: false,
   setup() {
     const { windowSize } = useWindowResize();
+    const isPopupVisible = ref(false);
+    const userIndicatorRef = ref(null);
+    const popupRef = ref(null);
 
-    return { windowSize };
+    // eslint-disable-next-line func-style
+    const handleOutsideClick = (event) => {
+      if (isPopupVisible.value && popupRef.value && !popupRef.value.contains(event.target)) {
+        isPopupVisible.value = false;
+      }
+    };
+
+    useEventListener(document, 'click', handleOutsideClick);
+
+    return { windowSize, isPopupVisible, popupRef, userIndicatorRef };
   },
   data() {
     return {
@@ -67,7 +82,6 @@ export default {
       loggedIn: false,
       inputRoleSelection: undefined,
       roleSelectionDialog: undefined,
-      isPopupVisible: false,
       canSetMissionStatus: false
     };
   },
@@ -82,12 +96,12 @@ export default {
       if (!this.isPopupVisible) {
         return { top: 0, left: 0 };
       }
-      const indicator = this.$refs.userIndicator;
+      const indicator = this.userIndicatorRef;
       const indicatorRect = indicator.getBoundingClientRect();
       let top = indicatorRect.bottom;
       let left = indicatorRect.left;
 
-      const popupRect = this.$refs.popup.getBoundingClientRect();
+      const popupRect = this.popupRef.getBoundingClientRect();
       const popupWidth = popupRect.width;
       const popupHeight = popupRect.height;