@3cr/viewer-browser 0.0.248 → 0.0.292

package/src/components/modal/modal/CloseViewerModal.vue

@@ -0,0 +1,108 @@
+<template>
+  <v-dialog v-model="modalState" data-testid="dialog" width="600" scrim="rgba(31, 31, 55, 0.90)">
+    <v-card rounded="lg" class="px-6 py-4">
+      <v-card-title class="title text-h3 pa-0">
+        <span>{{ t('labels.backToPortal') }}</span>
+      </v-card-title>
+      <v-card-text class="text text-sm-regular px-0 py-2">
+        <span>{{ t('texts.closeViewer') }}</span>
+      </v-card-text>
+      <v-card-actions class="px-0">
+        <v-spacer />
+        <sh-plain-icon-btn data-testid="cancel" :text="t('labels.cancel')" @click="modalState = false">
+        </sh-plain-icon-btn>
+        <sh-flat-icon-btn
+          data-testid="close"
+          color="amaranth_700"
+          :text="t('labels.closeWithoutSaving')"
+          @click="closeModal"
+        >
+        </sh-flat-icon-btn>
+        <sh-flat-icon-btn
+          v-if="options.onSaveSession"
+          data-testid="save"
+          color="minsk_900"
+          :text="t('labels.saveSession')"
+          @click="closeModalSave"
+        >
+        </sh-flat-icon-btn>
+        <sh-flat-icon-btn
+          v-else
+          data-testid="close"
+          color="minsk_900"
+          :text="t('labels.closeViewer')"
+          @click="closeModal"
+        >
+        </sh-flat-icon-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { scanState } from '@/models/scanState';
+import { useDataOverlayStore } from '@/stores/data-overlay.store';
+import { useMcadStore } from '@/stores/mcad.store';
+import { storeToRefs } from 'pinia';
+import { useViewerStore } from '@/stores/viewer.store';
+import ShFlatIconBtn from '@/components/ShFlatIconBtn.vue';
+import { useI18n } from 'vue-i18n';
+
+interface Props {
+  modal?: boolean;
+}
+
+type Emits = {
+  'update:modal': [boolean];
+  close: [void];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  modal: false
+});
+
+const emit = defineEmits<Emits>();
+
+const { t } = useI18n();
+const { state: dataOverlayState } = useDataOverlayStore();
+const { state: mcadState } = useMcadStore();
+const { options } = storeToRefs(useViewerStore());
+
+const modalState = computed({
+  get(): boolean {
+    return props.modal;
+  },
+  set(value: boolean): void {
+    emit('update:modal', value);
+  }
+});
+
+async function closeModal(): Promise<void> {
+  if (options.value.onExit) {
+    await options.value.onExit();
+  }
+  modalState.value = false;
+  emit('close');
+}
+
+async function closeModalSave(): Promise<void> {
+  if (options.value.onSaveSession) {
+    const scan = scanState.value;
+    const dataOverlay = dataOverlayState.DataOverlay;
+    const mcad = mcadState.Models;
+    options.value.onSaveSession(scan, dataOverlay, mcad, () => {});
+  }
+  await closeModal();
+}
+</script>
+
+<style scoped>
+.title {
+  color: #1d1d20;
+}
+
+.text {
+  color: #5e5e6b;
+}
+</style>

package/src/components/modal/modal/DataOverlayGeneralModal.vue

@@ -0,0 +1,122 @@
+<template>
+  <v-card width="432" density="compact">
+    <v-card-title class="pt-3">{{ dataOverlay.Title }}</v-card-title>
+    <v-list class="no-hover pt-4" density="compact" :lines="false">
+      <v-list-item v-if="hasDescription" class="pr-0 pt-0">
+        <template #prepend>
+          <v-icon icon="assignment" color="white" />
+        </template>
+        <v-list-item-title>
+          <span>{{ t('labels.description') }}</span>
+        </v-list-item-title>
+        <v-list-item-subtitle class="pb-4">{{ dataOverlay.Description }}</v-list-item-subtitle>
+      </v-list-item>
+      <v-list-item v-else prepend-icon="psychology">
+        <v-list-item-title>
+          <span>{{ t('labels.smartDescription') }}</span>
+        </v-list-item-title>
+        <v-list-item-subtitle class="mt-1" v-if="hasSmartDescription">
+          {{ smartDescriptions[dataOverlay.Title].GptResponse }}
+        </v-list-item-subtitle>
+        <v-list-item-subtitle v-else>
+          <v-progress-linear class="mt-2" indeterminate />
+        </v-list-item-subtitle>
+      </v-list-item>
+      <v-list-item prepend-icon="book_2">
+        <v-list-item-title>
+          <span>{{ t('labels.resources') }}</span>
+        </v-list-item-title>
+        <v-list-item-subtitle class="pb-6" v-if="hasActions">
+          <template v-for="action in dataOverlay.CallToAction!.Actions">
+            <a @click.stop class="text-small" :href="action.ActionData.Url" target="_blank">
+              {{ action.ActionData.Description }}
+            </a>
+            <v-icon icon="arrow_outward" />
+            <br />
+          </template>
+        </v-list-item-subtitle>
+        <v-list-item-subtitle v-else class="font-italic">
+          <span>{{ t('labels.noResources') }}</span>
+        </v-list-item-subtitle>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { GptService } from '@/services/gpt.service';
+import { useI18n } from 'vue-i18n';
+import { DataOverlay, GptResponsePayload } from '@3cr/viewer-types-ts';
+
+interface Props {
+  dataOverlay: DataOverlay;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+
+const smartDescriptions = ref<Record<string, GptResponsePayload>>({});
+
+const hasDescription = computed(() => !!props.dataOverlay.Description);
+
+const hasSmartDescription = computed(() => props.dataOverlay.Title in smartDescriptions.value);
+
+const hasActions = computed(() => {
+  return props.dataOverlay.CallToAction?.Actions && props.dataOverlay.CallToAction.Actions.length > 0;
+});
+
+watch(
+  () => props.dataOverlay,
+  async (value: DataOverlay) => {
+    await generateSmartDescriptions(value);
+  },
+  { immediate: true }
+);
+
+async function generateSmartDescriptions(overlay: DataOverlay): Promise<void> {
+  const key = overlay.Title;
+  if (!(key in smartDescriptions.value)) {
+    const response = await GptService.Instantiate().GenerateAnnotations(key);
+    smartDescriptions.value[key] = response.data;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.v-card) {
+  backdrop-filter: blur(24px);
+}
+
+:deep(.v-card-title) {
+  background: rgba(31, 31, 55, 0.9);
+  font-size: 16px !important;
+  padding-bottom: 0;
+  color: white;
+}
+
+:deep(.v-list) {
+  background: rgba(31, 31, 55, 0.9);
+  color: white;
+}
+
+:deep(.v-list-item-title) {
+  font-size: 14px !important;
+}
+
+:deep(.v-list-item-subtitle) {
+  font-size: 12px;
+  color: #b9bac0;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+:deep(.v-list-item__prepend) {
+  align-self: start;
+}
+
+.text-small {
+  color: #c9d7fc !important;
+}
+</style>

package/src/components/modal/modal/DataOverlayMeasurementModal.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-card min-width="250" color="transparent" density="compact">
+    <v-card-title>
+      <v-text-field
+        v-if="isEditing"
+        v-model="title"
+        label="Title"
+        dense
+        hide-details
+        single-line
+        @blur="updateTitle"
+        @keydown.enter="updateTitle"
+        variant="outlined"
+        class="text-white text-xs-semibold"
+      />
+      <div v-else>
+        <span>{{ title }}</span>
+        <v-icon class="pl-4" icon="edit" @click="isEditing = true" />
+      </div>
+    </v-card-title>
+    <v-list class="no-hover" density="compact">
+      <v-list-item>
+        <v-list-item-subtitle>
+          <measurement-info :measurement="measurement" :is-modal="true" />
+        </v-list-item-subtitle>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { DataOverlayMeasurement } from '@3cr/viewer-types-ts';
+
+interface Props {
+  measurement: DataOverlayMeasurement;
+}
+
+const isEditing = defineModel<boolean>('isEditing', { default: false });
+
+const props = defineProps<Props>();
+const emit = defineEmits(['updateTitle']);
+const title = ref(props.measurement.Title);
+const viewer3cr = useViewer3cr();
+
+async function updateTitle(): Promise<void> {
+  emit('updateTitle', title.value, props.measurement.Id);
+  const payload = { Version: '0.0.0', Id: props.measurement.Id, Value: title.value };
+  await viewer3cr.updateAnnotationTitle({ message: payload });
+}
+
+watch(
+  () => props.measurement.Title,
+  (newTitle) => {
+    title.value = newTitle;
+  }
+);
+</script>

package/src/components/modal/modal/DataOverlayModal.vue

@@ -0,0 +1,121 @@
+<template>
+  <v-overlay v-model="show" :scrim="false" :target="currentTarget" location-strategy="connected">
+    <template v-if="selected">
+      <data-overlay-measurement-modal
+        v-if="isMeasurement"
+        :measurement="selected as DataOverlayMeasurement"
+        @update-title="handleTitleUpdate"
+      />
+      <data-overlay-general-modal v-else :data-overlay="selected" />
+    </template>
+  </v-overlay>
+</template>
+
+<script setup lang="ts">
+import { useToolStore } from '@/stores/tool.store';
+import { computed, ref, watch } from 'vue';
+import { useEventListener } from '@/composables/useEventListener';
+import { isDataOverlayAngle } from '@/functions/guards/isDataOverlayAngle';
+import { isDataOverlayPolygon } from '@/functions/guards/isDataOverlayPolygon';
+import { isDataOverlayLength } from '@/functions/guards/isDataOverlayLength';
+import { useToolGroup } from '@/composables/useToolGroup';
+import { DataOverlay, DataOverlayMeasurement } from '@3cr/viewer-types-ts';
+
+useEventListener(document, 'mousedown', onMouseDown);
+
+const {
+  annotationCreateTool,
+  annotationMoveTool,
+  dataOverlayTool,
+  measurementAngleTool,
+  measurementLengthTool,
+  measurementPolygonTool,
+  mcadMoveTool,
+  mcadRotateTool,
+  mcadScaleTool,
+  mcadSelectTool
+} = useToolStore();
+
+const { activeTool } = useToolGroup(
+  annotationCreateTool,
+  annotationMoveTool,
+  measurementAngleTool,
+  measurementLengthTool,
+  measurementPolygonTool,
+  mcadMoveTool,
+  mcadRotateTool,
+  mcadScaleTool,
+  mcadSelectTool
+);
+
+const show = ref<boolean>(false);
+const currentTarget = ref<[number, number]>([0, 0]);
+
+const selected = computed(() => dataOverlayTool.selected.value);
+
+const isMeasurement = computed(() => {
+  const val = selected.value;
+  return val && (isDataOverlayLength(val) || isDataOverlayPolygon(val) || isDataOverlayAngle(val));
+});
+
+watch(
+  activeTool,
+  async (activeTool) => {
+    dataOverlayTool.isActive.value = !activeTool;
+  },
+  { immediate: true }
+);
+
+watch(
+  selected,
+  async (value: DataOverlay | null) => {
+    if (value !== null) {
+      show.value = true;
+    }
+  },
+  { immediate: true }
+);
+
+function onMouseDown(event: MouseEvent): void {
+  if (show.value) return;
+  show.value = false;
+  currentTarget.value = [event.x, event.y];
+}
+
+function handleTitleUpdate(newTitle: string, measurementId: string) {
+  if (selected.value?.Id === measurementId) {
+    selected.value.Title = newTitle;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.v-card) {
+  background: rgba(31, 31, 55, 0.9) !important;
+  backdrop-filter: blur(24px);
+  color: white;
+}
+
+:deep(.v-card-title) {
+  background: rgba(31, 31, 55, 0.9);
+  font-size: 14px;
+  padding-bottom: 0;
+  color: white;
+}
+
+:deep(.v-list) {
+  background: rgba(31, 31, 55, 0.9);
+  color: white;
+}
+
+:deep(.v-list-item-title) {
+  font-size: 13px;
+}
+
+:deep(.v-list-item-subtitle) {
+  font-size: 12px;
+  color: #b9bac0;
+  font-weight: 400;
+  line-height: 16px;
+}
+</style>

package/src/components/modal/modal/ShareModal.vue

@@ -0,0 +1,201 @@
+<template>
+  <v-dialog v-model="modelValue" max-width="600" min-height="400" persistent>
+    <v-card min-height="400">
+      <v-card-title>
+        <div class="d-flex align-center">
+          <span>{{ t('labels.shareThisImage') }}</span>
+          <v-spacer />
+          <v-btn prepend-icon="content_copy" data-testid="copy-link" color="primary" variant="text" @click="copy">
+            <span>{{ t('labels.copyLink') }}</span>
+          </v-btn>
+          <v-btn variant="text" icon="close" data-testid="close-btn" @click="modelValue = false" />
+        </div>
+      </v-card-title>
+      <v-divider />
+      <v-card-text>
+        <v-tabs v-model="tab" color="primary" fixed-tabs>
+          <v-tab :value="0">
+            <span>{{ t('labels.email') }}</span>
+          </v-tab>
+          <v-tab :value="1">
+            <span>{{ t('labels.mobile') }}</span>
+          </v-tab>
+        </v-tabs>
+        <v-tabs-window v-model="tab">
+          <v-tabs-window-item :value="0">
+            <div class="d-flex flex-column">
+              <v-form v-model="inviteValid" @submit.prevent="invite">
+                <div class="align-start d-flex mt-4 ga-2">
+                  <v-text-field
+                    v-model="email"
+                    class="email"
+                    density="compact"
+                    placeholder="Invite by email"
+                    prepend-inner-icon="person_add"
+                    :rules="inviteRules"
+                    variant="outlined"
+                  >
+                    <!--                    <template #append-inner>-->
+                    <!--                      <share-menu v-model="permission" />-->
+                    <!--                    </template>-->
+                  </v-text-field>
+                  <v-btn
+                    :disabled="!inviteValid"
+                    data-testid="invite-btn"
+                    color="primary"
+                    variant="flat"
+                    @click="invite"
+                  >
+                    <span>{{ t('labels.invite') }}</span>
+                  </v-btn>
+                </div>
+              </v-form>
+              <div class="mt-4 mb-4">
+                <v-divider />
+              </div>
+              <v-list density="compact">
+                <v-list-subheader>
+                  <span>{{ t('labels.dicomAccess') }}</span>
+                </v-list-subheader>
+                <!--                <v-list-item density="compact" :prepend-avatar="userAvatar">-->
+                <!--                  <template #append>-->
+                <!--                    <share-menu :model-value="SharePermission.Owner" :btn-props="{ disabled: true }" />-->
+                <!--                    <v-btn disabled size="small" icon="close" variant="text" />-->
+                <!--                  </template>-->
+                <!--                  <template #title>-->
+                <!--                    <span>{{ userName }}</span>-->
+                <!--                  </template>-->
+                <!--                </v-list-item>-->
+                <template v-for="share in shares">
+                  <v-list-item density="compact" :title="share.email">
+                    <template #prepend>
+                      <v-avatar color="primary" size="32">
+                        <span style="margin-bottom: 3px">{{ share.email[0] }}</span>
+                      </v-avatar>
+                    </template>
+                    <template #append>
+                      <!--                      <share-menu v-model="share.permission" />-->
+                      <v-btn size="small" icon="close" variant="text" @click="removeShare(share)" />
+                    </template>
+                  </v-list-item>
+                </template>
+                <v-list-item v-if="shares.length === 0">
+                  <v-list-item-title>{{ t('labels.noInvites') }}</v-list-item-title>
+                </v-list-item>
+                <!--                <v-list-item density="compact" title="Anyone else">-->
+                <!--                  <template #prepend>-->
+                <!--                    <v-avatar size="32">-->
+                <!--                      <v-icon icon="language" />-->
+                <!--                    </v-avatar>-->
+                <!--                  </template>-->
+                <!--                  <template #append>-->
+                <!--                    <share-menu :model-value="SharePermission.NoAccess" :btn-props="{ disabled: true }" />-->
+                <!--                    <v-btn disabled size="small" icon="close" variant="text" />-->
+                <!--                  </template>-->
+                <!--                </v-list-item>-->
+              </v-list>
+            </div>
+          </v-tabs-window-item>
+          <v-tabs-window-item :value="1">
+            <div class="d-flex flex-column">
+              <span class="pa-4 text-center">{{ t('texts.scanToOpen') }}</span>
+              <div class="d-flex justify-space-between">
+                <img src="@/assets/images/apple-qr.svg" alt="apple" width="256" height="256" />
+                <img src="@/assets/images/android-qr.svg" alt="android" width="256" height="256" />
+              </div>
+              <div class="my-8">
+                <v-divider>{{ t('labels.or') }}</v-divider>
+              </div>
+              <span class="px-4 pb-4 text-center">{{ t('texts.enterCodeManually') }}</span>
+              <div class="d-flex align-center ga-2">
+                <v-text-field density="compact" hide-details readonly variant="outlined" :model-value="href" />
+                <v-btn color="primary" height="40" icon="content_copy" rounded tile variant="outlined" @click="copy" />
+              </div>
+            </div>
+          </v-tabs-window-item>
+        </v-tabs-window>
+      </v-card-text>
+      <v-divider />
+      <v-card-actions>
+        <v-spacer />
+        <v-btn color="primary" variant="text" data-testid="close-cancel" @click="modelValue = false">
+          <span>{{ t('labels.cancel') }}</span>
+        </v-btn>
+        <v-btn color="primary" variant="flat" data-testid="done-btn" :disabled="shares.length === 0" @click="done">
+          <span>{{ t('labels.done') }}</span>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+  <ImagesSharedSnackbar v-model="s_shared" />
+  <LinkCopiedSnackbar v-model="s_copied" />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useViewerStore } from '@/stores/viewer.store';
+import { useI18n } from 'vue-i18n';
+import { SharePermission, ShareRequest } from '@3cr/viewer-types-ts';
+
+const { t } = useI18n();
+const { options } = storeToRefs(useViewerStore());
+
+const tab = ref<number>(0);
+const email = ref<string>('');
+const permission = ref<SharePermission>(SharePermission.Viewer);
+const shares = ref<ShareRequest[]>([]);
+const inviteValid = ref<boolean>(false);
+const loading = ref<boolean>(false);
+const s_copied = ref<boolean>(false);
+const s_shared = ref<boolean>(false);
+
+const modelValue = defineModel<boolean>({ default: false });
+
+const inviteRules = computed(() => [(value: unknown) => !!value || 'Email is required']);
+
+// const userName = computed(() => {
+//   return options.value.user?.name || 'Unknown User';
+// });
+//
+// const userAvatar = computed(() => {
+//   return options.value.user?.avatarUrl || userName.value[0];
+// });
+
+const href = computed(() => window.location.href);
+
+async function copy(): Promise<void> {
+  if ('clipboard' in navigator) {
+    await navigator.clipboard.writeText(href.value);
+    s_copied.value = true;
+  }
+}
+
+async function done(): Promise<void> {
+  if (options.value.onShareScan) {
+    loading.value = true;
+    await options.value.onShareScan(shares.value);
+    loading.value = false;
+    s_shared.value = true;
+  }
+  modelValue.value = false;
+}
+
+function removeShare(share: ShareRequest): void {
+  const idx = shares.value.indexOf(share);
+  if (idx !== -1) {
+    shares.value.splice(idx, 1);
+  }
+}
+
+function invite(): void {
+  shares.value.push({ email: email.value, permission: permission.value });
+  email.value = '';
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.email .v-field) {
+  padding-right: 0;
+}
+</style>