@3cr/viewer-browser 0.0.123 → 0.0.125

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3cr/viewer-browser",
-  "version": "0.0.123",
+  "version": "0.0.125",
   "main": "./dist/Viewer3CR.umd.js",
   "module": "dist/Viewer3CR.umd.js",
   "homepage": "https://docs.3cr.singular.health",

package/src/App.vue

@@ -84,4 +84,8 @@ async function loadInstance(
 .v-dialog.v-overlay--active {
   backdrop-filter: blur(4px);
 }
+.card-bg-border {
+  border-radius: 12px !important;
+  border: 2px #ffffffaa solid;
+}
 </style>

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -4,6 +4,7 @@
   <DemoLicenceInfoModal v-model:modal="m_demo" :is-modal-open="value" />
   <DemoPatientInfoModal v-model:modal="m_demoPatient" :is-modal-open="value" />
   <DemoPatientShareToMobileModal v-model:modal="m_demoPatientShareToMobile" />
+  <DemoPatientSendToPartyModal v-model:modal="m_demoPatientSendToParty" />
   <v-dialog
     data-vuetify
     id="cr-viewer"
@@ -772,6 +773,7 @@ import {
   isDemo,
   m_demo,
   m_demoPatient,
+  m_demoPatientSendToParty,
   m_demoPatientShareToMobile,
 } from "@/demo/options";
 import { handleNotification } from "@/notifications/notification";
@@ -807,6 +809,7 @@ import { ViewerAsyncCallback, ViewerCallback } from "@/models/Callbacks";
 import DemoPatientInfoModal from "@/demo/patient/DemoPatientInfoModal.vue";
 import DemoLicenceInfoModal from "@/demo/licence/DemoLicenceInfoModal.vue";
 import DemoPatientShareToMobileModal from "@/demo/patient/DemoPatientShareToMobileModal.vue";
+import DemoPatientSendToPartyModal from "@/demo/patient/DemoPatientSendToPartyModal.vue";
 
 export interface Props {
   payload?: LoadViewerPayload;

package/src/demo/licence/DemoLicenceInfoModal.vue

@@ -33,7 +33,7 @@ const modalState = computed({
 <template>
   <v-dialog v-model:model-value="modalState">
     <v-card
-      class="pa-1 ma-auto position-relative motif-background"
+      class="pa-1 ma-auto position-relative motif-background card-bg-border"
       theme="dark"
       max-width="680"
     >
@@ -56,7 +56,7 @@ const modalState = computed({
         </v-btn>
         <v-spacer />
         <v-btn
-          variant="tonal"
+          variant="flat"
           color="success"
           @click="openUrl('mailto:ecooper@singular.health')"
         >

package/src/demo/options.ts

@@ -13,6 +13,7 @@ export const isDemo = ref<boolean>(false);
 export const m_demo = ref<boolean>(false);
 export const m_demoPatient = ref<boolean>(false);
 export const m_demoPatientShareToMobile = ref<boolean>(false);
+export const m_demoPatientSendToParty = ref<boolean>(false);
 export const demoPatientTitle = ref<string>("");
 export const demoPatientSubtitles = ref<Array<string>>([]);
 export const demoLicenceTitle = ref<string>("");
@@ -115,8 +116,7 @@ export const demoPatientOptions: LoadViewerOptions = {
     m_demoPatient.value = true;
   },
   OnSendTo3rdParty: () => {
-    //TODO:
-    // m_demoPatient.value = true;
+    m_demoPatientSendToParty.value = true;
   },
   OnShareToMobile: () => {
     m_demoPatientShareToMobile.value = true;

package/src/demo/patient/DemoPatientInfoModal.vue

@@ -33,7 +33,7 @@ const modalState = computed({
 <template>
   <v-dialog v-model:model-value="modalState">
     <v-card
-      class="pa-1 ma-auto position-relative motif-background"
+      class="pa-1 ma-auto position-relative motif-background card-bg-border"
       theme="dark"
       max-width="680"
     >
@@ -56,7 +56,7 @@ const modalState = computed({
         </v-btn>
         <v-spacer />
         <v-btn
-          variant="tonal"
+          variant="flat"
           color="success"
           @click="openUrl('https://3dicomviewer.com/pricing')"
         >

package/src/demo/patient/DemoPatientSendToPartyModal.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { openUrl } from "@/demo/options";
+
+export interface Props {
+  modal: boolean;
+}
+
+const emit = defineEmits<{
+  "update:modal": [value: boolean];
+}>();
+
+const props = withDefaults(defineProps<Props>(), {
+  modal: false,
+});
+
+const step2 = ref<boolean>(false);
+const user = ref<string>("");
+const users = ref<Array<string>>([]);
+const modalState = computed({
+  get() {
+    return props.modal;
+  },
+  set(value) {
+    emit("update:modal", value);
+  },
+});
+
+function add() {
+  if (user.value && !users.value.includes(user.value) && isValid()) {
+    users.value.push(user.value);
+  }
+}
+
+function isValid() {
+  return /^(([^<>()[\]\\.,;:\s@']+(\.[^<>()\\[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+    user.value
+  );
+}
+</script>
+
+<template>
+  <v-dialog v-model:model-value="modalState">
+    <v-card
+      class="pa-1 ma-auto position-relative motif-background card-bg-border"
+      theme="dark"
+      max-width="680"
+      min-width="450"
+    >
+      <v-card-title class="text-center mb-4 mt-2">
+        Download 3Dicom Mobile
+      </v-card-title>
+      <v-card-text>
+        <v-text-field
+          class="text-justify"
+          id="share-email-field-item"
+          ref="shareEmail"
+          v-model="user"
+          label="Send to Email"
+          variant="outlined"
+          density="compact"
+          :rules="[
+            (v) =>
+              /^(([^<>()[\]\\.,;:\s@']+(\.[^<>()\\[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                v
+              ) || `Email must be valid`,
+          ]"
+          clearable
+          @keyup.enter="add"
+        >
+          <template #append-inner>
+            <v-btn
+              v-show="isValid()"
+              id="check-mark"
+              icon
+              class="check-background mt-n01 bg-transparent"
+              size="sm"
+              small
+              elevation="0"
+              :ripple="false"
+              ><v-icon color="success">check</v-icon></v-btn
+            >
+          </template>
+          <template #append>
+            <v-tooltip top>
+              <template #activator="{ props }">
+                <v-btn
+                  v-bind="props"
+                  icon
+                  class="mt-n1 bg-transparent"
+                  elevation="0"
+                  @click="add"
+                  ><v-icon color="success">add</v-icon></v-btn
+                >
+              </template>
+              Include as Pending below
+            </v-tooltip>
+          </template>
+        </v-text-field>
+      </v-card-text>
+      <v-card-text v-if="users.length > 0">
+        Pending 3rd Parties
+        <v-alert
+          v-for="userItem in users"
+          class="my-1"
+          style="font-size: 60%"
+          close-label="Close Alert"
+          color="orange-accent-4"
+          density="compact"
+          :title="userItem"
+          variant="tonal"
+          @click:close="users.splice(users.indexOf(userItem), 1)"
+          closable
+        >
+          New User
+        </v-alert>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn color="error" @click="modalState = false">
+          Continue with Demo
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          variant="flat"
+          color="success"
+          @click="
+            step2 = true;
+            modalState = false;
+          "
+          :disabled="users.length === 0"
+        >
+          Send to 3rd Parties
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+  <v-dialog v-model:model-value="step2">
+    <v-card
+      class="pa-1 ma-auto position-relative motif-background card-bg-border"
+      theme="dark"
+      max-width="680"
+    >
+      <v-card-title class="text-center mb-4 mt-2"> Scan shared </v-card-title>
+      <v-card-text class="text-justify">
+        Congratulations, you have sent your scan to a 3rd party.
+      </v-card-text>
+      <v-card-text class="text-justify">
+        Note: This is just a demonstration of how you can in the online viewer,
+        so we have not sent it to the users specified.
+      </v-card-text>
+      <v-card-text class="text-justify">
+        If you would like to view your own scan and/or send it to another party,
+        please select below
+      </v-card-text>
+      <v-card-actions>
+        <v-btn color="error" @click="step2 = false"> Continue with Demo </v-btn>
+        <v-spacer />
+        <v-btn
+          variant="flat"
+          color="success"
+          @click="openUrl('https://3dicomviewer.com/pricing')"
+        >
+          I want to view my own scan
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+.v-alert-title {
+  font-size: 80%;
+}
+</style>

package/src/demo/patient/DemoPatientShareToMobileModal.vue

@@ -28,12 +28,14 @@ const modalState = computed({
 <template>
   <v-dialog v-model:model-value="modalState">
     <v-card
-      class="pa-1 ma-auto position-relative motif-background"
+      class="pa-1 ma-auto position-relative motif-background card-bg-border"
       theme="dark"
       max-width="680"
     >
-      <v-card-title> Download 3Dicom Mobile </v-card-title>
-      <v-card-text>
+      <v-card-title class="text-center mb-4 mt-2">
+        Download 3Dicom Mobile
+      </v-card-title>
+      <v-card-text class="text-justify">
         <img
           src="../../assets/images/apple-qr.svg"
           alt="logo-home"
@@ -53,7 +55,7 @@ const modalState = computed({
         </v-btn>
         <v-spacer />
         <v-btn
-          variant="tonal"
+          variant="flat"
           color="success"
           @click="
             step2 = true;
@@ -67,12 +69,14 @@ const modalState = computed({
   </v-dialog>
   <v-dialog v-model:model-value="step2">
     <v-card
-      class="pa-1 ma-auto position-relative motif-background"
+      class="pa-1 ma-auto position-relative motif-background card-bg-border"
       theme="dark"
       max-width="680"
     >
-      <v-card-title> Load your scan </v-card-title>
-      <v-card-text>
+      <v-card-title class="text-center mb-4 mt-2">
+        Load your scan
+      </v-card-title>
+      <v-card-text class="text-justify">
         Once you have logged in and can see your dashboard, select your scan and
         open it to visualise your X-Ray (XR), Ultrasound (US), Computed
         Tomography (CT), Magnetic Resonance Imaging (MRI), and Positron Emitting
@@ -82,7 +86,7 @@ const modalState = computed({
         <v-btn color="error" @click="step2 = false"> Continue with Demo </v-btn>
         <v-spacer />
         <v-btn
-          variant="tonal"
+          variant="flat"
           color="success"
           @click="openUrl('https://3dicomviewer.com/pricing')"
         >