@3cr/viewer-browser 0.0.247 → 0.0.292

package/src/components/shared/MultiLoginError.vue

@@ -0,0 +1,98 @@
+<template>
+  <v-dialog width="545" max-height="90vh">
+    <template v-slot:default="{ isActive }">
+      <v-btn
+        size="56px"
+        variant="flat"
+        style="border-radius: 50px; position: absolute; top: -28px; left: 50%; transform: translateX(-50%)"
+        color="amaranth_200"
+      >
+        <v-icon color="amaranth_800" icon="front_hand" size="30px" />
+      </v-btn>
+      <v-sheet
+        style="background-color: rgba(247, 247, 248, 1); border-radius: 8px; position: relative; overflow: visible"
+      >
+        <v-btn
+          size="56px"
+          variant="flat"
+          style="border-radius: 50px; position: absolute; top: -28px; left: 50%; transform: translateX(-50%)"
+          color="amaranth_200"
+        >
+          <v-icon color="amaranth_800" icon="front_hand" size="30px" />
+        </v-btn>
+        <v-card-text class="text-center text-h4 pt-10 pb-4 pl-4 pr-4">
+          You don’t have access to this series
+        </v-card-text>
+        <v-card-text class="mb-4 ml-4 mr-4 mt-4">
+          <v-row class="text-sm-regular" justify="space-between">
+            <v-col cols="5" class="text-left">
+              <v-row>Signed in as:</v-row>
+              <v-row class="pt-4">DICOM series owner:</v-row>
+            </v-col>
+
+            <v-col cols="5" class="text-right ml-auto mr-8" style="font-weight: 500 !important; color: #1d1d20">
+              <v-row>{{ currentEmail }}</v-row>
+              <v-row class="pt-4">{{ linkedEmail }}</v-row>
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-divider class="ml-4 mr-4" />
+        <v-card-text class="text-sm-regular"
+          >To view this DICOM series, sign in with an account that has been given permissions to access this series.
+          Alternatively, you can request access to this DICOM series.</v-card-text
+        >
+        <v-divider class="mt-4" />
+        <v-card-actions class="px-4 py-3">
+          <v-btn
+            data-testid="verifyBtn"
+            class="mr-auto px-4 bg-white"
+            color="minsk_900"
+            variant="outlined"
+            text="Verify Ownership"
+            @click="verifyOwnership"
+          />
+          <v-btn class="ml-auto" color="minsk_900" text="Cancel" @click="isActive.value = false" />
+          <v-btn class="px-6 bg-minsk-900" variant="outlined" text="Request Access" @click="requestAccess" />
+        </v-card-actions>
+      </v-sheet>
+    </template>
+  </v-dialog>
+  <v-snackbar data-testid="snackBar" v-model="snackbar" class="pb-4 shark-950" timeout="120000" variant="flat">
+    <v-icon class="pr-3" color="minsk_300" icon="check_circle" size="large" />
+    <span class="text-center" style="color: white; font-weight: 500; line-height: 20px">Email Notification sent</span>
+    <template #actions>
+      <v-btn color="minsk_300" variant="flat" class="mr-2 px-4 ml-auto">Undo</v-btn>
+      <v-icon
+        data-testid="closeSnackbar"
+        class="ml-auto mr-3 shark-400"
+        icon="close"
+        size="small"
+        @click="snackbar = false"
+      />
+    </template>
+  </v-snackbar>
+  <v-snackbar data-testid="snackBarTest" v-model="snackbarTest" class="pb-4 shark-950" timeout="10" variant="flat">
+    <v-icon class="pr-3" color="minsk_300" size="large" />
+    <span class="text-center" style="color: white; font-weight: 500; line-height: 20px">Verify Ownership</span>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const currentEmail = ref('current.email@loggedinas.com.au');
+const linkedEmail = ref('email.address@linkedaccount.com');
+const snackbar = ref(false);
+const snackbarTest = ref(false);
+
+function verifyOwnership(): void {
+  //TODO: define logic of verification request - the snackbarTest is for testing purposes
+  snackbarTest.value = true;
+}
+
+function requestAccess(): void {
+  // TODO: define logic for request access
+  snackbar.value = true;
+}
+defineExpose({ requestAccess, verifyOwnership, snackbar, snackbarTest });
+</script>

package/src/components/shared/NotificationToaster.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <notifications data-testid="notification" classes="my-notification" position="bottom" width="412px">
+      <template #body="props">
+        <div class="my-notification vue-notification new-style" v-bind="props">
+          <div class="notification-content">
+            <v-btn
+              :icon="(props.item.data as NotificationData).icon"
+              :color="getButtonColor(props.item.type)"
+              variant="text"
+              size="small"
+              class="icon-btn"
+            />
+            <div class="notification-message ml-3 pr-0">{{ props.item.text }}</div>
+            <v-btn :color="getButtonColor(props.item.type)" variant="flat" class="ml-auto">
+              <span>{{ t('labels.undo') }}</span>
+            </v-btn>
+            <v-btn class="shark-400" icon="close" variant="text" size="small" @click="props.close" />
+          </div>
+        </div>
+      </template>
+    </notifications>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Notifications, useNotification } from '@kyvg/vue3-notification';
+import { useI18n } from 'vue-i18n';
+
+interface NotificationData {
+  icon: string;
+}
+
+const { t } = useI18n();
+const { notify } = useNotification();
+
+function notifySuccess(): void {
+  notify({
+    type: 'success',
+    text: 'This is a Success message!!',
+    duration: 300000,
+    data: { icon: 'check_circle' }
+  });
+}
+
+function notifyError(): void {
+  notify({
+    type: 'error',
+    text: 'This is an Error Message!!',
+    duration: 300000,
+    data: { icon: 'error' }
+  });
+}
+
+function notifyWarning(): void {
+  notify({
+    type: 'warn',
+    text: 'This is a warning Message!!',
+    duration: 300000,
+    data: { icon: 'warning' }
+  });
+}
+
+function notifyInfo(): void {
+  notify({
+    type: 'info',
+    text: 'This is an informational message!!',
+    duration: 300000,
+    data: { icon: 'check_circle' }
+  });
+}
+
+function getButtonColor(type?: string): string {
+  switch (type) {
+    case 'success':
+      return 'rgba(29, 127, 22, 1)';
+    case 'error':
+      return 'rgba(202, 52, 74, 1)';
+    case 'warn':
+      return 'rgba(166, 103, 2, 1)';
+    case 'info':
+      return 'rgba(27, 109, 131, 1)';
+    default:
+      return '';
+  }
+}
+
+defineExpose({ notifyInfo, notifySuccess, notifyWarning, notifyError, getButtonColor });
+</script>
+
+<style lang="scss">
+.vue-notification {
+  border-radius: 12px;
+  border-left-color: transparent !important;
+  background-color: rgba(255, 255, 255, 0.9) !important;
+  color: #1d1d20 !important;
+}
+
+.notification-message {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.notification-content {
+  display: flex;
+  align-items: center;
+  padding: 0px;
+  margin: 0px;
+}
+</style>

package/src/components/shared/UpdateSnackbar.vue

@@ -1,31 +1,35 @@
 <template>
   <v-snackbar
     v-model="updateFound"
+    content-class="update"
     :timeout="-1"
-    color="transparent"
     location="bottom end"
     rounded="lg"
-    class="bg-transparent"
     min-width="240"
     elevation="0"
     variant="elevated"
   >
-    <v-alert v-model="updateFound" :color="`#303474`" prominent rounded="lg" icon="browser_updated">
-      <span class="text-subtitle-2">
-        We have detected an update for you! <br />Please click update as soon as possible.
-      </span>
+    <v-alert v-model="updateFound" color="minsk_900" prominent rounded="lg" icon="browser_updated">
+      <div class="text-subtitle-2">
+        <span>{{ t('texts.updateDetected') }}</span>
+        <br />
+        <span>{{ t('texts.pleaseUpdateAsap') }}</span>
+      </div>
       <template #append>
-        <v-btn v-if="!updateInstalled" :loading="true" disabled>Installing</v-btn>
+        <v-btn v-if="!updateInstalled" :loading="true" disabled>
+          <span>{{ t('labels.installing') }}</span>
+        </v-btn>
         <v-btn
           v-if="updateInstalled"
           data-testid="update"
-          color="#2596be"
+          color="minsk_500"
           variant="flat"
           size="large"
           :loading="updateLoading"
           @click="completeRegistration"
-          >Update</v-btn
         >
+          <span>{{ t('labels.update') }}</span>
+        </v-btn>
       </template>
     </v-alert>
   </v-snackbar>
@@ -34,9 +38,12 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { ServiceWorkerService } from '@/services/service-worker.service';
+import { useI18n } from 'vue-i18n';
 
 let registration: ServiceWorkerRegistration | undefined = undefined;
 
+const { t } = useI18n();
+
 const updateFound = ref<boolean>(false);
 const updateInstalled = ref<boolean>(false);
 const updateLoading = ref<boolean>(false);
@@ -70,3 +77,9 @@ function completeRegistration() {
   registration?.waiting?.postMessage('SKIP_WAITING');
 }
 </script>
+
+<style lang="scss">
+.update .v-snackbar__content {
+  padding: 0 !important;
+}
+</style>

package/src/components/shared/ValueSelector.vue

@@ -2,21 +2,18 @@
   <div class="single-slider-selector">
     <v-row no-gutters align="center" justify="space-between">
       <v-col>
-        <span class="text-caption">
-          {{ label }}
-        </span>
+        <span class="text-caption">{{ label }}</span>
       </v-col>
       <v-col cols="4">
         <v-text-field
-          :model-value="sliderValue"
-          @update:modelValue="sliderValue = parseInt($event)"
+          v-model="sliderValue"
           class="mt-0 pt-0"
           hide-details
           variant="outlined"
           density="compact"
           type="number"
           :append-inner-icon="prepend"
-        ></v-text-field>
+        />
       </v-col>
     </v-row>
   </div>
@@ -51,12 +48,15 @@ const emit = defineEmits<{
 }>();
 
 const sliderValue = computed({
-  get() {
+  get(): number {
     return Math.floor(props.value);
   },
-  set(value: number) {
-    const val = clamp(value, props.min, props.max);
-    emit('update:value', val);
+  set(value: string | number) {
+    if (value) {
+      const coerced = typeof value === 'number' ? value : parseInt(value);
+      const val = clamp(coerced, props.min, props.max);
+      emit('update:value', val);
+    }
   }
 });
 

package/src/components/shared/VerticalSliderSelector.vue

@@ -1,5 +1,30 @@
+<template>
+  <v-slider
+    v-model="sliderValue"
+    :thumb-label="showThumb"
+    :min="min"
+    :max="max"
+    direction="vertical"
+    :style="`--thumbBackgroundColor: ${bgColor}`"
+    thumb-color="blue"
+    :thumb-size="16"
+    hide-details
+    class="vertical-slider-selector"
+  >
+    <template #append>
+      <div class="text-white py-1 my-0 text-center">{{ max }}</div>
+    </template>
+    <template #prepend>
+      <div class="text-white py-1 my-0 text-center">{{ min }}</div>
+    </template>
+    <template v-slot:thumb-label="{ modelValue }">
+      <span>{{ Math.floor(modelValue) }}</span>
+    </template>
+  </v-slider>
+</template>
+
 <script setup lang="ts">
-import { computed, ref, unref, watch } from "vue";
+import { computed, ref, unref, watch } from 'vue';
 
 export interface Props {
   value: number;
@@ -9,23 +34,25 @@ export interface Props {
   upper?: number;
   min?: number;
   max?: number;
+  bgColor?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   value: 0,
   loading: false,
-  label: "Test",
+  label: 'Test',
   lower: 0,
   upper: 100,
   min: -99999,
   max: 99999,
+  bgColor: '#000'
 });
 
 const emit = defineEmits<{
-  "update:value": [number];
+  'update:value': [number];
 }>();
 
-const showThumb = ref<"always" | boolean>(true);
+const showThumb = ref<'always' | boolean>(true);
 const showThumbTimeout = ref<NodeJS.Timeout | undefined>(undefined);
 
 const sliderValue = computed({
@@ -33,57 +60,31 @@ const sliderValue = computed({
     return Math.floor(props.value);
   },
   set(value: number) {
-    emit("update:value", Math.floor(value));
-  },
+    emit('update:value', Math.floor(value));
+  }
 });
 
-watch(() => sliderValue.value, () => {
-  clearTimeout(unref(showThumbTimeout));
-  showThumb.value = "always";
-  showThumbTimeout.value = setTimeout(() => {
-    showThumb.value = false;
-  }, 1000);
-});
+watch(
+  () => sliderValue.value,
+  () => {
+    clearTimeout(unref(showThumbTimeout));
+    showThumb.value = 'always';
+    showThumbTimeout.value = setTimeout(() => {
+      showThumb.value = false;
+    }, 1000);
+  }
+);
 </script>
 
-<template>
-  <v-slider
-    v-model="sliderValue"
-    :thumb-label="showThumb"
-    :min="min"
-    :max="max"
-    direction="vertical"
-    thumb-color="blue"
-    :thumb-size="16"
-    hide-details
-    class="vertical-slider-selector"
-  >
-    <template #append>
-      <div class="text-white py-1 my-0 text-center">{{ max }}</div>
-    </template>
-    <template #prepend>
-      <div class="text-white py-1 my-0 text-center">{{ min }}</div>
-    </template>
-    <template v-slot:thumb-label="{ modelValue }">
-      {{ Math.floor(modelValue) }}
-    </template>
-  </v-slider>
-</template>
-
 <style lang="scss">
 .vertical-slider-selector {
   display: flex;
   flex-direction: column-reverse;
   align-items: center;
-  & .v-input__control {
-    min-height: 32px !important;
-    height: 100% !important;
-  }
 }
+
 .vertical-slider-selector .v-slider-thumb__label {
-  width: 40px !important;
-  transform: translateY(-0px) translateX(-32px) translateX(-100%)
-    rotate(-180deg) !important;
+  transform: translateY(-0px) translateX(-32px) translateX(-100%) rotate(-180deg) !important;
   & div {
     transform: rotate(180deg);
   }

package/src/components/shared/__tests__/ColourPalette.spec.ts

@@ -0,0 +1,21 @@
+import { mount } from '@vue/test-utils';
+import ColourPalette from '@/components/shared/ColourPalette.vue';
+import { VBtn } from 'vuetify/components';
+
+describe('ColourPalette', () => {
+  it('updates modelValue when colour is clicked', async () => {
+    const colours = ['#FF0000', '#00FF00', '#0000FF'];
+    const wrapper = mount(ColourPalette, {
+      props: { colours }
+    });
+    const button = wrapper.findAllComponents(VBtn)[0];
+    await button.trigger('click');
+    expect(wrapper.vm.modelValue).toBe('#FF0000');
+    const button2 = wrapper.findAllComponents(VBtn)[1];
+    await button2.trigger('click');
+    expect(wrapper.vm.modelValue).toBe('#00FF00');
+    const button3 = wrapper.findAllComponents(VBtn)[2];
+    await button3.trigger('click');
+    expect(wrapper.vm.modelValue).toBe('#0000FF');
+  });
+});

package/src/components/shared/__tests__/DoubleSliderSelector.spec.ts

@@ -1,35 +1,14 @@
-import { flushPromises, mount, VueWrapper } from '@vue/test-utils';
-import { VRangeSlider, VTextField } from 'vuetify/components';
+import { flushPromises, mount } from '@vue/test-utils';
+import { VRangeSlider } from 'vuetify/components';
 import DoubleSliderSelector from '@/components/shared/DoubleSliderSelector.vue';
 
-class DoubleSliderSelectorHarness<T> {
-  constructor(private readonly _wrapper: VueWrapper<T>) {}
-
-  get wrapper(): VueWrapper<T> {
-    return this._wrapper;
-  }
-
-  lower() {
-    return this.wrapper.findComponent<VTextField>('[data-testid="lower"]');
-  }
-
-  upper() {
-    return this.wrapper.findComponent<VTextField>('[data-testid="upper"]');
-  }
-
-  // slider() {
-  //   return this.wrapper.findComponent<VRangeSlider>('[data-testid="slider"]');
-  // }
-}
-
 describe('DoubleSliderSelector tests', () => {
   it('should timeout the thumb', async () => {
     vi.useFakeTimers();
-    const props = { min: 0, max: 100 };
+    const props = { min: 0, max: 100, label: 'test' };
     const wrapper = mount(DoubleSliderSelector, { props });
-    const harness = new DoubleSliderSelectorHarness(wrapper);
-    await harness.wrapper.setProps({ modelValue: [1, 1] });
-    const slider = harness.wrapper.findComponent(VRangeSlider);
+    await wrapper.setProps({ modelValue: [1, 1] });
+    const slider = wrapper.findComponent(VRangeSlider);
     vi.advanceTimersByTime(999);
     expect(slider.props().thumbLabel).toEqual('always');
     vi.advanceTimersByTime(1);
@@ -40,44 +19,77 @@ describe('DoubleSliderSelector tests', () => {
   it('should clamp lower only to min', async () => {
     const props = { min: 0, max: 100 };
     const wrapper = mount(DoubleSliderSelector, { props });
-    const harness = new DoubleSliderSelectorHarness(wrapper);
-    await harness.lower().setValue(-100);
-    await harness.lower().trigger('blur');
-    await harness.upper().setValue(50);
-    await harness.upper().trigger('blur');
+    await wrapper.findComponentByTestId('lower').setValue(-100);
+    await wrapper.findComponentByTestId('lower').trigger('blur');
+    await wrapper.findComponentByTestId('upper').setValue(50);
+    await wrapper.findComponentByTestId('upper').trigger('blur');
     expect(wrapper.emitted('update:modelValue')).toEqual([[[0, 0]], [[0, 50]]]);
   });
 
   it('should clamp upper only to max', async () => {
     const props = { min: 0, max: 100 };
     const wrapper = mount(DoubleSliderSelector, { props });
-    const harness = new DoubleSliderSelectorHarness(wrapper);
-    await harness.upper().setValue(200);
-    await harness.upper().trigger('blur');
-    await harness.lower().setValue(50);
-    await harness.lower().trigger('blur');
+    await wrapper.findComponentByTestId('upper').setValue(200);
+    await wrapper.findComponentByTestId('upper').trigger('blur');
+    await wrapper.findComponentByTestId('lower').setValue(50);
+    await wrapper.findComponentByTestId('lower').trigger('blur');
     expect(wrapper.emitted('update:modelValue')).toEqual([[[0, 100]], [[50, 100]]]);
   });
 
   it('should clamp lower and upper to min', async () => {
     const props = { min: 0, max: 100 };
     const wrapper = mount(DoubleSliderSelector, { props });
-    const harness = new DoubleSliderSelectorHarness(wrapper);
-    await harness.lower().setValue(-100);
-    await harness.lower().trigger('blur');
-    await harness.upper().setValue(-10);
-    await harness.upper().trigger('blur');
+    await wrapper.findComponentByTestId('lower').setValue(-100);
+    await wrapper.findComponentByTestId('lower').trigger('blur');
+    await wrapper.findComponentByTestId('upper').setValue(-10);
+    await wrapper.findComponentByTestId('upper').trigger('blur');
     expect(wrapper.emitted('update:modelValue')).toEqual([[[0, 0]], [[0, 0]]]);
   });
 
   it('should clamp lower and upper to max', async () => {
     const props = { min: 0, max: 100 };
     const wrapper = mount(DoubleSliderSelector, { props });
-    const harness = new DoubleSliderSelectorHarness(wrapper);
-    await harness.upper().setValue(9001);
-    await harness.upper().trigger('blur');
-    await harness.lower().setValue(9000);
-    await harness.lower().trigger('blur');
+    await wrapper.findComponentByTestId('upper').setValue(9001);
+    await wrapper.findComponentByTestId('upper').trigger('blur');
+    await wrapper.findComponentByTestId('lower').setValue(9000);
+    await wrapper.findComponentByTestId('lower').trigger('blur');
     expect(wrapper.emitted('update:modelValue')).toEqual([[[0, 100]], [[100, 100]]]);
   });
+
+  it('should update left label position when thumb is less than 10', async () => {
+    const props = { min: 0, max: 100 };
+    const wrapper = mount(DoubleSliderSelector, { props });
+    const slider = wrapper.findComponent(VRangeSlider);
+    slider.vm.$el.getElementsByClassName = () => [{ offsetLeft: 5 }, { offsetLeft: 150 }];
+    wrapper.vm.applyRangeSliderLabelBoundaries();
+    expect(wrapper.vm.leftOffset).toBe('translateX(-25%)');
+    expect(wrapper.vm.rightOffset).toBe('translateX(-50%)');
+  });
+  it('should update left label position when thumb is greater than 220', async () => {
+    const props = { min: 0, max: 100 };
+    const wrapper = mount(DoubleSliderSelector, { props });
+    const slider = wrapper.findComponent(VRangeSlider);
+    slider.vm.$el.getElementsByClassName = () => [{ offsetLeft: 250 }, { offsetLeft: 150 }];
+    wrapper.vm.applyRangeSliderLabelBoundaries();
+    expect(wrapper.vm.leftOffset).toBe('translateX(-100%)');
+    expect(wrapper.vm.rightOffset).toBe('translateX(-50%)');
+  });
+  it('should update right label position when right thumb is greater than 220', async () => {
+    const props = { min: 0, max: 100 };
+    const wrapper = mount(DoubleSliderSelector, { props });
+    const slider = wrapper.findComponent(VRangeSlider);
+    slider.vm.$el.getElementsByClassName = () => [{ offsetLeft: 100 }, { offsetLeft: 250 }];
+    wrapper.vm.applyRangeSliderLabelBoundaries();
+    expect(wrapper.vm.rightOffset).toBe('translateX(-100%)');
+    expect(wrapper.vm.leftOffset).toBe('translateX(-50%)');
+  });
+  it('should update left and right label position when thumbs are within bounds', async () => {
+    const props = { min: 0, max: 100 };
+    const wrapper = mount(DoubleSliderSelector, { props });
+    const slider = wrapper.findComponent(VRangeSlider);
+    slider.vm.$el.getElementsByClassName = () => [{ offsetLeft: 100 }, { offsetLeft: 150 }];
+    wrapper.vm.applyRangeSliderLabelBoundaries();
+    expect(wrapper.vm.leftOffset).toBe('translateX(-50%)');
+    expect(wrapper.vm.rightOffset).toBe('translateX(-50%)');
+  });
 });

package/src/components/shared/__tests__/HorizontalSliderSelector.spec.ts

@@ -0,0 +1,35 @@
+import HorizontalSliderSelector from '@/components/shared/HorizontalSliderSelector.vue';
+import { mount } from '@vue/test-utils';
+
+describe('HorizontalSliderSelector', () => {
+  it('renders correctly with default props', () => {
+    const wrapper = mount(HorizontalSliderSelector, {
+      props: { value: 50, min: 0, max: 100 }
+    });
+    expect(wrapper.find('[data-testid="slider"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="min-value"]').text()).toBe('0');
+    expect(wrapper.find('[data-testid="max-value"]').text()).toBe('100');
+    expect(wrapper.props('value')).toBe(50);
+  });
+  it('emits correct value when the slider changes', async () => {
+    const wrapper = mount(HorizontalSliderSelector, {
+      props: { value: 50, min: 0, max: 100 }
+    });
+    const slider = wrapper.findComponent({ name: 'VSlider' });
+    await slider.vm.$emit('update:modelValue', 75);
+    expect(wrapper.emitted('update:value')).toBeTruthy();
+    expect(wrapper.emitted('update:value')?.[0]).toEqual([75]);
+    expect(wrapper.props('value')).toBe(50);
+  });
+  it('sets showThumb to always and then false after timeout', async () => {
+    vi.useFakeTimers();
+    const wrapper = mount(HorizontalSliderSelector, {
+      props: { value: 50, min: 0, max: 100 }
+    });
+    await wrapper.setProps({ value: 75 });
+    expect(wrapper.vm.showThumb).toBe('always');
+    vi.advanceTimersByTime(1000);
+    expect(wrapper.vm.showThumb).toBe(false);
+    vi.useRealTimers();
+  });
+});