@3cr/viewer-browser 0.0.162 → 0.0.194

package/src/components/modal/ViewerNavigationDrawerContent.vue

@@ -0,0 +1,126 @@
+<template>
+  <v-expansion-panels
+    :model-value="expanded"
+    class="bg-transparent text-white"
+    variant="accordion"
+    flat
+    tile
+    @update:model-value="onUpdate"
+  >
+    <template v-for="(item, index) in items" :key="item">
+      <v-expansion-panel v-if="item.visible()" :data-testid="`panel-${index}`" class="bg-transparent text-white px-0">
+        <v-expansion-panel-title :hide-actions="!drawer" class="font-weight-bold">
+          <v-icon :start="drawer" :icon="item.icon" />
+          <span v-show="drawer">{{ item.text }}</span>
+          <v-tooltip location="right" activator="parent">
+            {{ item.tooltip }}
+          </v-tooltip>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text class="px-0">
+          <Component v-bind="item.props" :is="item.component" />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </template>
+  </v-expansion-panels>
+</template>
+
+<script setup lang="ts">
+import { ComponentInstance, computed, ref, shallowRef, watch } from "vue";
+import { LoadViewerOptions } from "@/models/LoadViewerOptions";
+import { isSessionLoaded } from "@/dataLayer/scanState";
+import ViewerDisplaySettings from "@/components/modal/ViewerDisplaySettings.vue";
+import ViewerAnnotations from "@/components/modal/ViewerAnnotations.vue";
+
+interface Props {
+  drawer?: boolean;
+  options: LoadViewerOptions
+}
+
+type Emits = {
+  'update:drawer': [boolean];
+  'update:expanded': [number | undefined];
+};
+
+interface SettingsItem {
+  icon: string;
+  text: string;
+  tooltip: string;
+  component: ComponentInstance<any>;
+  visible: () => boolean;
+  props: Record<string, any>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  drawer: false
+});
+
+const emit = defineEmits<Emits>();
+
+const previous = ref<number | undefined>(0);
+const expanded = ref<number | undefined>(0);
+
+const items = shallowRef<SettingsItem[]>([
+  {
+    icon: "display_settings",
+    text: "Display Settings",
+    tooltip: "Change the range of visible anatomy in the scan by only showing areas with certain density of tissue",
+    component: ViewerDisplaySettings,
+    visible: () => true,
+    props: {}
+  },
+  {
+    icon: "draw",
+    text: "Annotations",
+    tooltip: "Display annotations on your scans",
+    component: ViewerAnnotations,
+    visible: () => !!showAnnotations.value,
+    props: {}
+  },
+]);
+
+const showAnnotations = computed(() => {
+  return props.options.OnLoadSavedSession && isSessionLoaded.value;
+});
+
+watch(() => props.drawer, (value: boolean) => {
+  if (value) {
+    expanded.value = previous.value;
+    emit('update:expanded', expanded.value);
+  } else {
+    previous.value = expanded.value;
+    expanded.value = undefined;
+    emit('update:expanded', expanded.value);
+  }
+}, { immediate: true });
+
+function onUpdate(event: unknown): void {
+  const value = event as number | undefined;
+  previous.value = value;
+  expanded.value = value;
+  emit('update:expanded', expanded.value);
+  if (!props.drawer && value !== undefined) {
+    emit('update:drawer', true)
+  }
+}
+</script>
+
+<style scoped>
+.v-expansion-panel-content__wrap {
+  padding: 0 8px 4px;
+  flex: 1 1 auto;
+  max-width: 100%;
+}
+
+.v-expansion-panel--active > .v-expansion-panel-header {
+  min-height: 48px;
+}
+
+.v-expansion-panel--active:not(:first-child),
+.v-expansion-panel--active + .v-expansion-panel {
+  margin-top: 0;
+}
+
+.v-expansion-panel-text__wrapper {
+  padding: 8px 8px 16px;
+}
+</style>

package/src/components/modal/ViewerNavigationDrawerFooter.vue

@@ -0,0 +1,111 @@
+<template>
+  <v-list>
+    <template v-for="(item, index) of footerItems" :key="item">
+      <v-tooltip location="right">
+        <template #activator="{ props }">
+          <v-list-item
+            v-if="item.visible()"
+            v-bind="props"
+            :data-testid="`footer-${index}`"
+            class="px-6"
+            target="_blank"
+            :disabled="disabled"
+            @click="item.click()"
+          >
+            <template v-slot:prepend>
+              <v-icon v-bind="item.iconProps" />
+            </template>
+            <v-list-item-title v-if="drawer" class="text-white">
+              <span>{{ item.text }}</span>
+            </v-list-item-title>
+          </v-list-item>
+        </template>
+        <span>{{ item.tooltip }}</span>
+      </v-tooltip>
+    </template>
+  </v-list>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { currentColourPreset, initialScanState } from "@/dataLayer/scanState";
+import { ViewSelectionActions } from "@3cr/types-ts";
+import { LoadViewerOptions } from "@/models/LoadViewerOptions";
+import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+
+interface Props {
+  options: LoadViewerOptions;
+  drawer?: boolean;
+  disabled?: boolean;
+}
+
+interface FooterItem {
+  text: string;
+  tooltip: string;
+  iconProps: Record<string, any>;
+  visible: () => boolean;
+  click: () => void | Promise<void>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  drawer: false,
+  disabled: false
+});
+
+const viewer3cr = useViewer3cr();
+const footerItems = ref<FooterItem[]>([
+  {
+    text: "Reset Scan",
+    tooltip: "Resets your scan to original position and settings in all views",
+    iconProps: { icon: "refresh", color: "red" },
+    visible: () => true,
+    click: async () => {
+      currentColourPreset.value = initialScanState.value.ColourPresets[0];
+      await viewer3cr.viewSelection(ViewSelectionActions.vs05);
+      await viewer3cr.viewSelection(ViewSelectionActions.vs06);
+    },
+  },
+  {
+    text: "Enable Cloud Storage",
+    tooltip: "Securely store your medical records in the cloud",
+    iconProps: { icon: "cloud", color: "blue" },
+    visible: () => !!props.options.OnEnableCloudStorage,
+    click: async () => {
+      await props.options.OnEnableCloudStorage!();
+    }
+  },
+  {
+    text: "Send to 3rd Party",
+    tooltip: "Securely share your loaded scan with 3rd parties via email with option to anonymise",
+    iconProps: { icon: "send", color: "green" },
+    visible: () => !!props.options.OnSendTo3rdParty,
+    click: async () => {
+      await props.options.OnSendTo3rdParty!();
+    }
+  },
+  {
+    text: "Share to Mobile / VR",
+    tooltip: "Share your loaded scan with the 3Dicom Mobile and VR applications to download within 7 days",
+    iconProps: { icon: "share", color: "yellow" },
+    visible: () => !!props.options.OnShareToMobile,
+    click: async () => {
+      await props.options.OnShareToMobile!();
+    }
+  },
+  {
+    text: "Screenshot View",
+    tooltip: 'Take a screenshot',
+    iconProps: { icon: "screenshot_region", color: "green" },
+    visible: () => !!props.options.OnScreenshot,
+    click: async () => {
+      await props.options.OnScreenshot!();
+    }
+  },
+]);
+</script>
+
+<style scoped>
+.v-icon {
+  opacity: 1;
+}
+</style>

package/src/components/modal/ViewerNavigationDrawerHeader.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    v-if="!isDemo || demoType === 'patient'"
+    class="d-flex align-center pb-1"
+    :class="!drawer ? 'py-2' : 'pa-2'"
+  >
+    <v-img
+      v-if="drawer"
+      src="../../assets/images/dark/3dicom-logo.svg"
+      height="64"
+      alt="logo"
+      style="opacity: 0.9"
+    />
+    <v-img
+      v-else
+      src="../../assets/images/dark/3DICOM.png"
+      height="48"
+      alt="logo"
+      style="opacity: 0.9"
+    />
+  </div>
+  <div
+    v-else
+    class="d-flex align-center pb-1"
+    :class="!drawer ? 'py-2' : 'pa-2'"
+  >
+    <!-- TODO: Image probably needs to be cropped (1500 x 1500) -->
+    <v-img
+      v-if="drawer"
+      src="../../assets/images/dark/demo-logo.svg"
+      width="100%"
+      height="64"
+      :cover="true"
+      alt="logo"
+      style="opacity: 0.9"
+    />
+    <v-img
+      v-else
+      src="../../assets/images/dark/demo-icon-small.png"
+      height="48"
+      alt="logo"
+      style="opacity: 0.9"
+    />
+  </div>
+  <div
+    class="text-center mx-auto text-white sub-type"
+    :style="!drawer ? 'font-size: 100%' : 'font-size: 140%'"
+  >
+    Online Viewer
+  </div>
+</template>
+
+<script setup lang="ts">
+import { demoType, isDemo } from "@/components/demo/options";
+
+interface Props {
+  drawer?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  drawer: false
+});
+</script>

package/src/components/modal/__tests__/CloseViewerModal.spec.ts

@@ -0,0 +1,60 @@
+import { describe, expect, it, vi } from "vitest";
+import { DOMWrapper, flushPromises } from "@vue/test-utils";
+import { mountVuetify } from "~/helper";
+import { defaultLoadViewerOptions } from "@/models/LoadViewerOptions";
+import CloseViewerModal from "@/components/modal/CloseViewerModal.vue";
+
+class CloseViewerModalHarness {
+  dialog(): DOMWrapper<Element> {
+    return new DOMWrapper(document.querySelector('[data-testid="dialog"]'));
+  }
+
+  close() {
+    return this.dialog().findComponent('[data-testid="close"]');
+  }
+
+  save() {
+    return this.dialog().findComponent('[data-testid="save"]');
+  }
+}
+
+describe('CloseViewerModal tests', () => {
+  const harness = new CloseViewerModalHarness();
+
+  it("should open modal", () => {
+    const props = { modal: true, options: defaultLoadViewerOptions };
+    const wrapper = mountVuetify(CloseViewerModal, props);
+    expect(wrapper.exists()).toBeTruthy();
+  });
+
+  it('should close modal', async () => {
+    const props = { modal: true, options: defaultLoadViewerOptions };
+    const wrapper = mountVuetify(CloseViewerModal, props);
+    expect(wrapper.exists()).toBeTruthy();
+    await wrapper.setProps({ modal: false });
+    // expect(wrapper.isVisible()).toBeFalsy();
+  });
+
+  it('should close modal without saving', async () => {
+    const props = { modal: true, options: defaultLoadViewerOptions };
+    const wrapper = mountVuetify(CloseViewerModal, props);
+    const onExitViewerSpy = vi.spyOn(defaultLoadViewerOptions, 'OnExitViewer');
+    expect(wrapper.exists()).toBeTruthy();
+    await harness.close().trigger('click');
+    expect(onExitViewerSpy).toHaveBeenCalled();
+    // expect(wrapper.isVisible()).toBeFalsy();
+  });
+
+  it('should close modal and save session', async () => {
+    const props = { modal: true, options: defaultLoadViewerOptions };
+    const wrapper = mountVuetify(CloseViewerModal, props);
+    const onExitViewerSpy = vi.spyOn(defaultLoadViewerOptions, 'OnExitViewer');
+    const onSaveSessionSpy = vi.spyOn(defaultLoadViewerOptions, 'OnSaveSession');
+    expect(wrapper.exists()).toBeTruthy();
+    await harness.save().trigger('click');
+    await flushPromises();
+    expect(onExitViewerSpy).toHaveBeenCalled();
+    expect(onSaveSessionSpy).toHaveBeenCalled();
+    // expect(wrapper.isVisible()).toBeFalsy();
+  })
+});