@3cr/viewer-browser 0.0.248 → 0.0.292

package/src/components/demo/DemoNotificationNavigationDrawer.vue

@@ -0,0 +1,118 @@
+<template>
+  <v-navigation-drawer :class="[!modelValue && 'transform']" v-model="modelValue" location="end" temporary width="400">
+    <template #prepend>
+      <v-toolbar color="transparent">
+        <span class="ml-4 text-h6">{{ t('labels.notifications') }}</span>
+        <v-badge v-if="unread" color="red" inline :content="unread" />
+        <v-spacer />
+        <v-btn variant="text" icon="close" @click="modelValue = false" />
+      </v-toolbar>
+      <v-divider />
+    </template>
+    <v-list>
+      <template v-for="notification in notifications" :key="notification.timestamp">
+        <v-list-item :prepend-avatar="notification.avatar" lines="two">
+          <template #title>
+            <div class="d-flex">
+              <v-tooltip location="bottom" open-delay="1000">
+                <template #activator="{ props }">
+                  <span class="title" v-html="notification.title" v-bind="props"></span>
+                </template>
+                <span v-html="notification.title"></span>
+              </v-tooltip>
+              <v-badge v-if="notification.isUnread" color="red" inline dot />
+            </div>
+          </template>
+          <template #subtitle>
+            <div class="d-flex">
+              <span>{{ formatRelative(notification.timestamp, new Date()) }}</span>
+              <v-spacer />
+              <span>{{ formatDistance(notification.timestamp, new Date(), { addSuffix: true }) }}</span>
+            </div>
+          </template>
+          <div class="mt-4">
+            <template v-if="notification.type === NotificationType.Text">
+              <v-chip tile rounded>{{ notification.text }}</v-chip>
+            </template>
+            <template v-if="notification.type === NotificationType.Download">
+              <v-btn color="primary" block variant="outlined" append-icon="download" @click="notification.onDownload()">
+                <span>{{ t('labels.download') }}</span>
+              </v-btn>
+            </template>
+            <template v-if="notification.type === NotificationType.Share">
+              <v-btn density="compact" color="primary" variant="flat" @click="notification.onShare(true)">
+                <span>{{ t('labels.accept') }}</span>
+              </v-btn>
+              <v-btn
+                class="ml-2"
+                density="compact"
+                color="primary"
+                variant="outlined"
+                @click="notification.onShare(false)"
+              >
+                <span>{{ t('labels.decline') }}</span>
+              </v-btn>
+            </template>
+          </div>
+        </v-list-item>
+        <v-divider />
+      </template>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { formatDistance, formatRelative } from 'date-fns';
+import { DEMO_NOTIFICATIONS } from '@/components/demo/demo-notifications';
+import { useI18n } from 'vue-i18n';
+import { NotificationType, Notification } from '@3cr/viewer-types-ts';
+
+interface Props {
+  notifications?: Notification[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  notifications: () => DEMO_NOTIFICATIONS
+});
+
+const { t } = useI18n();
+
+const modelValue = defineModel<boolean>({ default: false });
+
+const unread = computed(() => props.notifications.filter((n) => n.isUnread).length);
+</script>
+
+<style scoped lang="scss">
+.v-navigation-drawer {
+  top: 12px !important;
+  bottom: 12px !important;
+  right: 12px !important;
+  height: auto !important;
+  border-radius: 12px;
+
+  &.transform {
+    transform: translateX(412px) !important;
+  }
+}
+
+.v-chip {
+  padding: 8px 12px;
+  height: unset !important;
+  text-wrap: wrap !important;
+  border-radius: 4px !important;
+}
+
+:deep(.v-list-item__prepend) {
+  align-self: flex-start;
+}
+
+:deep(.v-list-item__append) {
+  align-self: flex-start;
+}
+
+.title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

package/src/components/demo/DemoPurchaseCreditsModal.vue

@@ -0,0 +1,141 @@
+<template>
+  <v-dialog v-model="modelValue" max-width="1000">
+    <v-card>
+      <v-row no-gutters>
+        <v-col class="pa-8">
+          <p class="text-h5 font-weight-bold">
+            <span class="text-primary font-italic">Add more credits</span> to unlock DICOM capabilities.
+          </p>
+          <!-- TODO: Replace lorem text -->
+          <p class="mt-2 text-body-2">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          <v-list v-model:selected="selected" selectable>
+            <template v-for="product in products">
+              <v-list-item class="py-4">
+                <template #title>
+                  <span class="font-weight-bold">{{ product.credits }} credits</span>
+                </template>
+                <template #subtitle>
+                  <span>{{ product.description }}</span>
+                </template>
+                <template #append="{ isSelected }">
+                  <div class="mr-4">
+                    <div class="text-right">
+                      <span class="font-weight-bold">${{ (product.amount / 100).toFixed(2) }}</span>
+                    </div>
+                    <div v-if="product.discount">
+                      <v-chip class="discount">
+                        <span class="font-weight-bold">{{ product.discount }}% off</span>
+                      </v-chip>
+                    </div>
+                  </div>
+                  <v-icon color="primary" :icon="isSelected ? 'filled:check_circle' : 'radio_button_unchecked'" />
+                </template>
+              </v-list-item>
+            </template>
+          </v-list>
+          <v-btn class="purchase" block variant="flat" append-icon="arrow_outward" @click="purchase">
+            <span>Purchase credits</span>
+          </v-btn>
+        </v-col>
+        <v-col class="pa-8 bg-background">
+          <div class="align-center d-flex flex-column h-100 justify-center">
+            <img alt="elevate" width="75%" src="@/assets/images/illustration.svg" />
+            <p class="font-weight-bold text-center text-h5">Elevate your DICOM experience</p>
+            <p class="mt-2 text-center text-body-2">
+              Upgrade your DICOM experience through our integrated AI models to elevate your health outcomes.
+            </p>
+          </div>
+        </v-col>
+      </v-row>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+interface CreditProduct {
+  credits: number;
+  description: string;
+  amount: number;
+  discount?: number;
+}
+
+const selected = ref(0);
+
+const modelValue = defineModel<boolean>({ default: false });
+
+const products = computed<CreditProduct[]>(() => [
+  {
+    credits: 10,
+    description: 'Perfect for additional annotations.',
+    amount: 1000
+  },
+  {
+    credits: 25,
+    description: 'Recommended option.',
+    amount: 1995,
+    discount: 20
+  },
+  {
+    credits: 50,
+    description: 'More supportive text for use case.',
+    amount: 3750,
+    discount: 25
+  },
+  {
+    credits: 100,
+    description: 'More supportive text for use case.',
+    amount: 6995,
+    discount: 30
+  },
+  {
+    credits: 250,
+    description: 'Final supportive text for use case.',
+    amount: 14995,
+    discount: 40
+  }
+]);
+
+function purchase(): void {
+  // TODO: implementation
+}
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/palette' as palette;
+@use '@/assets/settings' as settings;
+
+.v-btn.purchase {
+  color: rgb(var(--v-theme-surface));
+  background-color: map-get(palette.$minsk, 900);
+}
+
+.v-chip.discount {
+  color: map-get(palette.$minsk, 200);
+  border-radius: settings.$border-radius-root !important;
+  border-color: map-get(palette.$minsk, 200) !important;
+  border-width: 2px;
+  height: calc(var(--v-chip-height) - 4px);
+  padding: 0 4px;
+
+  :deep(.v-chip__content) {
+    color: map-get(palette.$minsk, 900);
+  }
+}
+
+.v-list-item {
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-width: settings.$border-width-root;
+
+  &:first-child {
+    border-top-left-radius: settings.$border-radius-root !important;
+    border-top-right-radius: settings.$border-radius-root !important;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: settings.$border-radius-root !important;
+    border-bottom-right-radius: settings.$border-radius-root !important;
+  }
+}
+</style>

package/src/components/demo/DemoUpgradeCloudStorageModal.vue

@@ -0,0 +1,74 @@
+<template>
+  <v-dialog v-model="modelValue" max-width="1000">
+    <v-card>
+      <v-row no-gutters>
+        <v-col class="pa-8">
+          <p class="text-h5 font-weight-bold">
+            Upgrade your <span class="text-primary font-italic">storage to the cloud</span> for convenience.
+          </p>
+          <p class="mt-2 text-body-2">
+            Enable long term storage for your Medical Images from 5 credits per DICOM series.
+          </p>
+          <v-list color="primary">
+            <v-list-item>
+              <v-list-item-title>Secure and private storage.</v-list-item-title>
+              <template #prepend>
+                <v-icon color="primary" icon="check_circle" />
+              </template>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title>Access your scans on any device at any time.</v-list-item-title>
+              <template #prepend>
+                <v-icon color="primary" icon="check_circle" />
+              </template>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title>Unlock convenience of sharing your Medical Images effortlessly.</v-list-item-title>
+              <template #prepend>
+                <v-icon color="primary" icon="check_circle" />
+              </template>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title>Longer term Medial Image storage beyond your current 7 day limit.</v-list-item-title>
+              <template #prepend>
+                <v-icon color="primary" icon="check_circle" />
+              </template>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title>...and more!</v-list-item-title>
+            </v-list-item>
+          </v-list>
+          <v-btn class="purchase" block variant="flat" append-icon="arrow_outward" @click="purchase">
+            <span>Upgrade to Cloud Storage</span>
+          </v-btn>
+        </v-col>
+        <v-col class="background pa-8">
+          <div class="align-center d-flex flex-column h-100 justify-center">
+            <img alt="cloud" width="75%" src="@/assets/images/cloud-storage.svg" />
+          </div>
+        </v-col>
+      </v-row>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const modelValue = defineModel<boolean>({ default: false });
+
+function purchase(): void {
+  // TODO: implementation
+}
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/palette' as palette;
+
+.v-btn.purchase {
+  color: rgb(var(--v-theme-surface));
+  background-color: map-get(palette.$minsk, 900);
+}
+
+.v-col.background {
+  background-color: map-get(palette.$picton, 400);
+}
+</style>

package/src/components/demo/DemoUpgradePlanModal.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-dialog v-model="modelValue" width="90vw" height="90vh">
+    <v-card width="100%" height="100%">
+      <iframe :src="pricingUrl" width="100%" height="100%"></iframe>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const modelValue = defineModel<boolean>({ default: false });
+
+const pricingUrl = computed(() => {
+  return import.meta.env.PROD ? 'https://3dicomviewer.com/pricing' : 'https://test.my.3dicomviewer.com/pricing';
+});
+</script>

package/src/components/demo/UploadDicomToCloudModal.vue

@@ -0,0 +1,225 @@
+<!--/* v8 ignore next 1 */ -->
+<template>
+  <v-dialog v-model="modalState" width="535" class="modal-dialog">
+    <v-card>
+      <v-card-title class="text-left font-weight-bold mt-3 mb-3 ml-2 mr-2">
+        <span class="text-h4">Upload DICOM to cloud</span>
+        <v-btn
+          data-testid="close"
+          variant="text"
+          size="default"
+          icon="close"
+          color="shark_400"
+          @click="modalState = false"
+          class="position-absolute"
+          style="top: 8px; right: 0"
+        />
+      </v-card-title>
+      <v-divider color="shark_400" class="mb-1" />
+      <CloudDropZone
+        class="ml-4 mr-4 mt-4 mb-4"
+        :onFilesDropped="handleFilesDropped"
+        accept=".dcm,.unity,.png,.jpg,.jpeg,.pdf"
+      />
+      <v-divider color="shark_400" class="ml-4 mr-4 mb-4" />
+
+      <div v-if="droppedFiles.length > 0" class="file-list ml-4 mr-4">
+        <div
+          v-for="(upload, index) in droppedFiles"
+          :key="index"
+          :data-testid="`file-item-${upload.id}`"
+          class="file-item mt-1 mb-1 pl-4 pr-4 position-relative"
+        >
+          <v-icon color="minsk_200" icon="draft" size="x-large" />
+          <div class="file-info">
+            <div class="file-name text-sm-semibold pl-3">
+              {{ upload.title }}
+              <v-btn
+                variant="text"
+                size="medium"
+                icon="delete"
+                color="shark_600"
+                @click="deleteFile(upload)"
+                class="position-absolute"
+                style="right: 16px; top: 12px"
+              />
+            </div>
+            <div class="file-name-sub text-xs-regular pl-3 pt-1 pb-2">{{ upload.title }}</div>
+            <div v-if="upload.status === 'uploading'" class="progress-container pl-3 pr-4 pb-3">
+              <v-progress-linear :value="getProgress(upload)" max="100" class="custom-progress" />
+              <span class="progress-percentage text-xs-medium">{{ getProgress(upload) }}%</span>
+            </div>
+            <div v-else-if="upload.status === 'failed'" class="error-message pl-3">
+              <span class="error-text">
+                Error! Failed to upload.
+                <a @click="retryUpload(upload)">Try again</a>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <v-divider class="mb-3 mt-2" />
+      <div class="ml-auto mb-3">
+        <v-btn
+          data-testid="cancel"
+          variant="text"
+          text="Cancel"
+          class="mr-2"
+          color="minsk_900"
+          @click="modalState = false"
+        />
+        <v-btn data-testid="done" text="Done" class="mr-2" color="minsk_900" @click="goToPricing" />
+      </div>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useViewerStore } from '@/stores/viewer.store';
+import CloudDropZone from './CloudDropZone.vue';
+import { Upload } from '@3cr/viewer-types-ts';
+import { openUrl } from '@/functions/openUrl';
+import { PRICING_URL } from '@/constants';
+import { v4 } from 'uuid';
+
+const { options } = storeToRefs(useViewerStore());
+
+const droppedFiles = ref<Upload[]>([]);
+
+const modalState = defineModel<boolean>('modal', { default: false });
+
+function getProgress(upload: Upload): number {
+  const value = upload.progress ?? 0;
+  return value * 100;
+}
+
+async function onComplete(files: Array<File>): Promise<void> {
+  if (options.value.onCloudStorage) {
+    const acceptedExtensions = ['.dcm', '.unity', '.png', '.jpg', '.pdf'];
+    const filteredFiles = files.filter((file) =>
+      acceptedExtensions.some((ext) => file.name.toLowerCase().endsWith(ext))
+    );
+
+    await options.value.onCloudStorage(filteredFiles);
+  }
+}
+async function goToPricing(): Promise<void> {
+  openUrl(PRICING_URL);
+  modalState.value = false;
+}
+async function handleFilesDropped(files: Array<File>): Promise<void> {
+  files.forEach((file) => {
+    const id = v4();
+    droppedFiles.value.push({ id, title: file.name, subtitle: 'Uploading', progress: 0, status: 'uploading' });
+    simulateUploadProgress(id);
+  });
+  await onComplete(files);
+}
+
+function simulateUploadProgress(id: string): void {
+  let progress = 0;
+  const interval = setInterval(() => {
+    if (progress < 100) {
+      progress += 10;
+      const fileIndex = droppedFiles.value.findIndex((f) => f.id === id);
+      if (fileIndex !== -1) {
+        droppedFiles.value[fileIndex].progress = progress;
+      }
+    } else {
+      clearInterval(interval);
+    }
+  }, 500);
+}
+
+function retryUpload(upload: Upload): void {
+  const fileIndex = droppedFiles.value.findIndex((u) => upload.id === u.id);
+  if (fileIndex !== -1) {
+    droppedFiles.value[fileIndex].progress = 0;
+    droppedFiles.value[fileIndex].status = 'uploading';
+    simulateUploadProgress(droppedFiles.value[fileIndex].id);
+  }
+}
+
+function deleteFile(upload: Upload): void {
+  const fileIndex = droppedFiles.value.findIndex((f) => f.id === upload.id);
+  if (fileIndex !== -1) {
+    droppedFiles.value.splice(fileIndex, 1);
+  }
+}
+
+defineExpose({
+  deleteFile,
+  retryUpload,
+  simulateUploadProgress,
+  handleFilesDropped,
+  getProgress,
+  droppedFiles
+});
+</script>
+
+<style scoped lang="scss">
+.file-list {
+  text-align: left;
+  margin: 0px 0px !important;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  background-color: #f7f7f8;
+  margin: 16px;
+  border-radius: 8px;
+  padding: 4px;
+}
+
+.file-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.file-name {
+  color: #1d1d20;
+}
+
+.file-name-sub {
+  color: #5e5e6b;
+}
+
+.progress-container {
+  display: flex;
+  align-items: center;
+}
+
+progress {
+  margin-right: 10px;
+}
+
+.custom-progress {
+  width: 378px;
+  height: 8px;
+  background-color: #d9d9de;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.custom-progress::-webkit-progress-bar {
+  background-color: #d9d9de;
+}
+
+.custom-progress::-webkit-progress-value {
+  background-color: #6875ec;
+}
+
+.progress-percentage {
+  color: #333;
+}
+
+.error-message a {
+  color: #721c24;
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: underline;
+}
+</style>