[MS] Added org switch

client/src/components/core/ms-dropdown/MsDropdownPopover.vue

@@ -35,7 +35,7 @@ import {
 import {
   checkmark,
 } from 'ionicons/icons';
-import { MsDropdownOption, getMsOptionByKey } from '@/components/core/ms-types';
+import { MsDropdownOption, getMsOptionByKey, MsModalResult } from '@/components/core/ms-types';
 
 const props = defineProps<{
   defaultOption?: any
@@ -50,9 +50,7 @@ function onOptionClick(option?: MsDropdownOption): void {
   if (option) {
     selectedOption.value = option;
   }
-  popoverController.dismiss({
-    option: selectedOption.value,
-  });
+  popoverController.dismiss({option: selectedOption.value}, MsModalResult.Confirm);
 }
 </script>
 

client/src/parsec/login.ts

@@ -13,7 +13,6 @@ import {
   ClientInfo,
   ClientInfoError,
   UserProfile,
-  DeviceInfo,
   ClientListUserDevicesError,
   ClientListUserDevicesErrorTag,
   OwnDeviceInfo,
@@ -133,3 +132,38 @@ export async function listOwnDevices(): Promise<Result<Array<OwnDeviceInfo>, Cli
     }]};
   }
 }
+
+export enum ConnectedDeviceErrorTag {
+  Internal = 'Internal'
+}
+
+export interface ConnectedDeviceError {
+  tag: ConnectedDeviceErrorTag.Internal
+}
+
+export interface ConnectedDevice extends AvailableDevice {
+  handle: Handle
+  isCurrent: boolean
+}
+
+// Simulate what will be a call to the bindings
+export async function listConnectedDevices(): Promise<Result<Array<ConnectedDevice>, ConnectedDeviceError>> {
+  if (!needsMocks()) {
+    return {ok: true, value: []};
+  }
+  const devices = await listAvailableDevices();
+  const deviceList: Array<ConnectedDevice> = [];
+  const currentHandle = getParsecHandle();
+
+  if (devices.length > 1) {
+    let connectedDevice = devices[0];
+    (connectedDevice as ConnectedDevice).handle = DEFAULT_HANDLE;
+    (connectedDevice as ConnectedDevice).isCurrent = (connectedDevice as ConnectedDevice).handle === currentHandle;
+    deviceList.push(connectedDevice as ConnectedDevice);
+    connectedDevice = devices[1];
+    (connectedDevice as ConnectedDevice).handle = DEFAULT_HANDLE + 1;
+    (connectedDevice as ConnectedDevice).isCurrent = false;
+    deviceList.push(connectedDevice as ConnectedDevice);
+  }
+  return {ok: true, value: deviceList};
+}

client/src/views/sidebar-menu/SidebarMenuPage.vue

@@ -19,7 +19,10 @@
             v-show="!isOrganizationManagementRoute()"
           >
             <!-- active organization -->
-            <ion-card class="organization-card">
+            <ion-card
+              class="organization-card"
+              @click="openOrganizationChoice($event)"
+            >
               <ion-card-header class="organization-card__header">
                 <div class="organization-card__container">
                   <ion-avatar class="orga-avatar">
@@ -37,7 +40,6 @@
                 <!-- Keep it hidden for now since we have no way of switching org -->
                 <div
                   class="organization-card__icon"
-                  v-show="false"
                 >
                   <!-- new icon to provide -->
                   <svg
@@ -256,6 +258,7 @@ import {
   menuController,
   GestureDetail,
   IonButton,
+  popoverController,
 } from '@ionic/vue';
 import {
   business,
@@ -276,7 +279,11 @@ import {
   ClientInfo,
   UserProfile,
   WorkspaceInfo,
+  listConnectedDevices,
+  Handle,
 } from '@/parsec';
+import MsDropdownPopover from '@/components/core/ms-dropdown/MsDropdownPopover.vue';
+import { MsDropdownOption, MsModalResult } from '@/components/core/ms-types';
 
 const workspaces: Ref<Array<WorkspaceInfo>> = ref([]);
 
@@ -304,6 +311,44 @@ function navigateToWorkspaceList(): void {
   menuController.close();
 }
 
+async function openOrganizationChoice(clickEvent: Event): Promise<void> {
+  const result = await listConnectedDevices();
+
+  if (!result.ok) {
+    // Failed to list, probably should display an error, will decide later
+    return;
+  }
+  let defaultHandle: Handle | null = null;
+  const options: MsDropdownOption[] = result.value.map((device) => {
+    if (device.isCurrent) {
+      defaultHandle = device.handle;
+    }
+    return {label: `${device.organizationId} - ${device.humanHandle.label}`, key: device.handle};
+  });
+  options.push({label: '...another organization', key: null});
+
+  const popover = await popoverController.create({
+    component: MsDropdownPopover,
+    componentProps: {
+      options: options,
+      defaultOption: defaultHandle,
+    },
+    showBackdrop: false,
+    event: clickEvent,
+  });
+  await popover.present();
+  const { data, role } = await popover.onWillDismiss();
+  await popover.dismiss();
+  if (role !== MsModalResult.Confirm || !data || data.option.key === defaultHandle) {
+    return;
+  }
+  if (data.option.key === null) {
+    console.log('Switch to login page');
+  } else {
+    console.log(`Switch to org with handle ${data.option.key}`);
+  }
+}
+
 onMounted(async () => {
   const infoResult = await parsecGetClientInfo();