@3cr/viewer-browser 0.0.248 → 0.0.293

package/src/components/modal/snackbars/__tests__/ImagesSharedSnackbar.spec.ts

@@ -0,0 +1,22 @@
+import ImagesSharedSnackbar from '@/components/modal/snackbars/ImagesSharedSnackbar.vue';
+import { mount } from '@vue/test-utils';
+import { VSnackbar } from 'vuetify/components';
+
+describe('ImagesSharedSnackbar', () => {
+  it('should open snack bar when ModelValue is set to true', async () => {
+    const wrapper = mount(ImagesSharedSnackbar);
+    const snack = wrapper.findComponent(VSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should emit update:modelValue when close button is clicked and close the snackbar', async () => {
+    const wrapper = mount(ImagesSharedSnackbar, {
+      props: { modelValue: true }
+    });
+    const closeButton = wrapper.findComponent('[data-testid="closeBtn"]');
+    await closeButton.trigger('click');
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+  });
+});

package/src/components/modal/snackbars/__tests__/LinkCopiedSnackbar.spec.ts

@@ -0,0 +1,21 @@
+import { mount } from '@vue/test-utils';
+import LinkCopiedSnackbar from '@/components/modal/snackbars/LinkCopiedSnackbar.vue';
+import { VBtn, VSnackbar } from 'vuetify/components';
+
+describe('LinkedCopiedSnackbar', () => {
+  it('should render the snackbar correctly when modelValue is set to true', async () => {
+    const wrapper = mount(LinkCopiedSnackbar);
+    const snack = wrapper.findComponent(VSnackbar);
+    await snack.setValue(true);
+    expect(snack.isVisible()).toBe(true);
+  });
+  it('should close the snackbar when the close button is clicked', async () => {
+    const wrapper = mount(LinkCopiedSnackbar);
+    await wrapper.setProps({ modelValue: true });
+    const closeButton = wrapper.findComponent(VBtn);
+    await closeButton.trigger('click');
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    const snackbar = wrapper.findComponent(VSnackbar);
+    expect(snackbar.props('modelValue')).toBe(false);
+  });
+});

package/src/components/navigation/annotation/AnnotationCreateModal.vue

@@ -0,0 +1,104 @@
+<template>
+  <v-overlay
+    v-bind="$attrs"
+    v-model="modelValue"
+    persistent
+    width="503px"
+    :scrim="false"
+    location-strategy="connected"
+    :target="target"
+  >
+    <v-card class="position-relative mx-5">
+      <v-card-title class="pt-4">
+        <span>{{ t('labels.annotationCreate') }}</span>
+        <v-btn
+          variant="text"
+          icon="close"
+          color="shark_400"
+          data-testid="close-btn"
+          @click="cancel"
+          class="position-absolute"
+          style="top: 0; right: 0"
+        />
+      </v-card-title>
+      <v-card-subtitle>
+        <span>{{ t('texts.annotationCreateHelp') }}</span>
+      </v-card-subtitle>
+      <v-card-text class="pb-1">
+        <AnnotationForm v-if="proxy" v-model="proxy" />
+      </v-card-text>
+      <v-card-actions class="px-6 pb-4">
+        <v-spacer />
+        <v-btn class="px-4 py-2" color="minsk_900" variant="plain" @click="cancel">
+          <span>{{ t('labels.cancel') }}</span>
+        </v-btn>
+        <v-btn class="px-4 py-2" color="minsk_900" variant="flat" data-testid="submit-btn" @click="create()">
+          <span>{{ t('labels.confirm') }}</span>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-overlay>
+  <AnnotationCreateSnackbar v-model="s_annotationCreate" />
+</template>
+
+<script setup lang="ts">
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToolStore } from '@/stores/tool.store';
+import { DataOverlayAnnotation } from '@3cr/viewer-types-ts';
+
+interface Props {
+  annotation?: DataOverlayAnnotation | null;
+  returnTo?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  annotation: null,
+  returnTo: ''
+});
+
+const { t } = useI18n();
+const { annotationCreateTool } = useToolStore();
+const viewer3cr = useViewer3cr();
+
+const proxy = ref<DataOverlayAnnotation>();
+const s_annotationCreate = ref<boolean>(false);
+
+const modelValue = defineModel<boolean>({ default: false });
+
+const target = computed(() => annotationCreateTool.position.value);
+
+watch(
+  () => props.annotation,
+  (value) => {
+    if (value) {
+      proxy.value = JSON.parse(JSON.stringify(value));
+    }
+  },
+  { immediate: true }
+);
+
+async function create(): Promise<void> {
+  // Nested serialization required for 3CR
+  const payload = JSON.parse(JSON.stringify(proxy.value));
+  payload.CallToAction.Actions = payload.CallToAction.Actions.map((action: any) => ({
+    ActionType: action.ActionType,
+    ActionData: JSON.stringify(action.ActionData)
+  }));
+  payload.CallToAction = JSON.stringify(payload.CallToAction);
+
+  await viewer3cr.createAnnotation2dTool({ message: undefined, returnChannel: payload, returnTo: props.returnTo });
+
+  modelValue.value = false;
+  s_annotationCreate.value = true;
+}
+
+async function cancel(): Promise<void> {
+  modelValue.value = false;
+}
+
+defineExpose({ s_annotationCreate });
+
+defineOptions({ inheritAttrs: false });
+</script>

package/src/components/navigation/annotation/AnnotationCreateSnackbar.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-snackbar v-model="modelValue" class="mb-3" variant="flat">
+    <v-icon data-testid="icon" class="minsk-500 pr-3" icon="check_circle" />
+    <span class="shark-950">{{ t('texts.annotationCreateSuccess') }}</span>
+    <template #actions>
+      <v-btn class="ml-auto mr-2" color="minsk_900" variant="flat" @click="modelValue = false">
+        <span>{{ t('labels.undo') }}</span>
+      </v-btn>
+      <v-icon data-testid="closeBtn" class="ml-auto shark-400" size="small" icon="close" @click="modelValue = false" />
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const modelValue = defineModel<boolean>({ default: false });
+</script>

package/src/components/navigation/annotation/AnnotationDataTable.vue

@@ -0,0 +1,157 @@
+<template>
+  <v-card color="background" flat tile>
+    <DrawerTitle :title="t('labels.annotations')" />
+    <v-card-text class="d-flex flex-column flex-grow-1 px-2 pb-4 pt-2">
+      <div class="new-style pb-2">
+        <v-text-field
+          v-model="search"
+          density="compact"
+          variant="outlined"
+          prepend-inner-icon="search"
+          :placeholder="t('fields.search.placeholder')"
+          hide-details
+        >
+          <template #append-inner>
+            <v-btn variant="text" size="24" color="rgba(146, 147, 158, 1)" icon="close" @click="search = ''" />
+          </template>
+        </v-text-field>
+      </div>
+      <v-sheet class="overflow-auto" elevation="2">
+        <v-data-table-virtual
+          v-model:expanded="expanded"
+          :custom-filter="filter"
+          density="compact"
+          :headers="headers"
+          hide-default-header
+          :items="items"
+          item-value="Id"
+          must-sort
+          :search="search"
+          :sort-by="sortBy"
+        >
+          <template #[`item.expand`]="{ internalItem, isExpanded, toggleExpand }">
+            <v-btn
+              variant="text"
+              size="24"
+              :icon="isExpanded(internalItem) ? '$expand' : 'chevron_forward'"
+              @click="toggleExpand(internalItem)"
+              color="shark_400"
+            />
+          </template>
+          <template #[`item.title`]="{ item }">
+            <div class="d-flex align-center">
+              <annotation-icon :annotation="item" class="ml-1" />
+              <span class="ml-2 text-truncate text-caption">{{ item.Title }}</span>
+            </div>
+          </template>
+          <template #[`item.actions`]="{ item }">
+            <annotation-menu :annotation="item" />
+          </template>
+          <template #[`item.visibility`]="{ isExpanded, internalItem }">
+            <annotation-visibility-btn v-if="isExpanded(internalItem)" :annotation="internalItem.raw" />
+          </template>
+          <template #expanded-row="{ columns, item }">
+            <tr>
+              <td class="px-0" :colspan="columns.length">
+                <annotation-info :annotation="item" />
+              </td>
+            </tr>
+          </template>
+        </v-data-table-virtual>
+      </v-sheet>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { DataOverlayAnnotation } from '@3cr/viewer-types-ts';
+
+interface Props {
+  items: DataOverlayAnnotation[];
+}
+
+withDefaults(defineProps<Props>(), {
+  items: () => []
+});
+
+const { t } = useI18n();
+
+const search = ref<string>('');
+const expanded = ref<string[]>([]);
+const sortBy = ref([
+  {
+    key: 'title',
+    order: 'asc' as 'asc' | 'desc'
+  }
+]);
+
+const headers = ref([
+  {
+    key: 'expand',
+    width: '24px',
+    sortable: false,
+    cellProps: (data: any) => ({
+      class: ['px-0', 'pl-1', { 'bg-minsk_100': isExpanded(data.item.Id) }]
+    })
+  },
+  {
+    key: 'title',
+    cellProps: (data: any) => ({
+      class: ['px-1', 'overflow', { 'bg-minsk_100': isExpanded(data.item.Id) }]
+    })
+  },
+  {
+    key: 'visibility',
+    width: '24px',
+    sortable: false,
+    cellProps: (data: any) => ({
+      class: ['px-0', { 'bg-minsk_100': isExpanded(data.item.Id) }]
+    })
+  },
+  {
+    key: 'actions',
+    width: '24px',
+    sortable: false,
+    cellProps: (data: any) => ({
+      class: ['px-0', 'px-1', { 'bg-minsk_100': isExpanded(data.item.Id) }]
+    })
+  }
+]);
+
+function filter(value: string, query: string, item?: any): boolean {
+  const annotation = item.raw as DataOverlayAnnotation;
+  return annotation.Title.toLowerCase().includes(query.toLowerCase());
+}
+
+function isExpanded(id: string): boolean {
+  return expanded.value.includes(id);
+}
+defineExpose({
+  search,
+  expanded,
+  filter
+});
+</script>
+
+<style scoped lang="scss">
+.v-data-table {
+  height: 100%;
+  width: 100%;
+  .active {
+    .v-btn__content {
+      i.v-icon {
+        color: #92939e !important;
+      }
+    }
+  }
+}
+
+:deep(.overflow) {
+  max-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/components/navigation/annotation/AnnotationDeleteModal.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-dialog v-model="modal" width="535">
+    <v-card>
+      <v-card-title class="px-6 pb-2 pt-4">
+        <span>{{ t('labels.annotationDelete') }}</span>
+      </v-card-title>
+      <v-card-text class="px-6 pt-0 pb-4" style="font-size: 14px; line-height: 20px; font-weight: 400">
+        <span>{{ t('texts.annotationDeleteConfirm') }}</span>
+      </v-card-text>
+      <v-card-actions class="px-6 pt-0">
+        <v-spacer />
+        <v-btn variant="plain" @click="modal = false">
+          <span>{{ t('labels.cancel') }}</span>
+        </v-btn>
+        <v-btn color="amaranth_600" variant="flat" @click="deleteAnnotation">
+          <span>{{ t('labels.confirm') }}</span>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { useViewerStore } from '@/stores/viewer.store';
+import { DataOverlayAnnotation } from '@3cr/viewer-types-ts';
+
+interface Props {
+  annotation: DataOverlayAnnotation;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+const { s_annotationDelete } = storeToRefs(useViewerStore());
+const viewer3cr = useViewer3cr();
+
+const modal = defineModel<boolean>({ default: false });
+
+async function deleteAnnotation(): Promise<void> {
+  const message = { Version: '0.0.0', Id: props.annotation.Id };
+  await viewer3cr.removeAnnotation({ message });
+  s_annotationDelete.value = true;
+  modal.value = false;
+}
+</script>

package/src/components/navigation/annotation/AnnotationDeleteSnackbar.vue

@@ -0,0 +1,25 @@
+<template>
+  <v-snackbar v-model="modelValue" timeout="300000" variant="flat">
+    <v-icon class="pr-3 shark-400" icon="error" />
+    <span class="shark-950">{{ t('texts.annotationDeleted') }}</span>
+    <template #actions>
+      <v-btn class="ml-auto mr-3 pr-4 pl-5" color="minsk_900" variant="flat" @click="undo">
+        <span>{{ t('labels.undo') }}</span>
+      </v-btn>
+      <v-icon class="ml-auto pr-3 shark-400" icon="close" size="small" @click="modelValue = false" />
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const modelValue = defineModel<boolean>({ default: false });
+
+function undo(): void {
+  // TODO: implement
+  modelValue.value = false;
+}
+</script>

package/src/components/navigation/annotation/AnnotationForm.vue

@@ -0,0 +1,253 @@
+<template>
+  <v-form density="compact">
+    <v-container class="pa-0">
+      <v-row>
+        <v-col cols="3">
+          <v-hover #default="{ props, isHovering }">
+            <div
+              v-bind="props"
+              class="upload position-relative d-flex rounded-lg justify-center align-center w-100 h-100"
+            >
+              <AnnotationIcon v-if="modelValue!.Icon2d" :annotation="modelValue!" size="64" />
+              <v-icon v-else color="black" icon="image" size="64" style="opacity: 0.1" />
+              <v-overlay
+                :model-value="!!isHovering"
+                class="align-center justify-center rounded-lg"
+                contained
+                @click="upload"
+              >
+                <div class="d-flex flex-column justify-center align-center">
+                  <v-icon color="white" icon="upload" size="32" />
+                  <span class="text-white">.png</span>
+                </div>
+              </v-overlay>
+            </div>
+          </v-hover>
+        </v-col>
+        <v-col>
+          <sh-text-field
+            v-model="title"
+            hide-details
+            :label="t('fields.title.label')"
+            :placeholder="t('fields.title.placeholder')"
+            variant="outlined"
+          />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <ColourPalette v-model="colour" />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <sh-textarea
+            no-resize
+            v-model="description"
+            counter="400"
+            hide-details
+            :label="t('fields.description.label')"
+            :placeholder="t('fields.description.placeholder')"
+            variant="outlined"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-divider class="my-4" />
+    <v-container class="pa-0">
+      <v-row>
+        <v-col>
+          <div class="d-flex text-h5 align-center">
+            <span>{{ t('texts.callToActionHelp') }}</span>
+            <v-spacer />
+            <v-btn color="minsk_900" variant="text" @click="addAction">
+              <v-icon class="minsk-500 pr-2" icon="add" />
+              <span>{{ t('labels.addAction') }}</span>
+            </v-btn>
+          </div>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-table>
+            <thead>
+              <tr>
+                <th>
+                  <span>{{ t('fields.description.label') }}</span>
+                </th>
+                <th>
+                  <span>{{ t('fields.url.label') }}</span>
+                </th>
+                <th style="width: 64px"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="action in actions">
+                <td class="new-style">
+                  <v-text-field
+                    data-testid="actiondata-description"
+                    v-model="action.ActionData.Description"
+                    density="compact"
+                    :placeholder="t('fields.description.placeholder')"
+                    flat
+                    hide-details
+                    variant="outlined"
+                  />
+                </td>
+                <td class="new-style">
+                  <v-text-field
+                    variant="outlined"
+                    data-testid="actiondata-Url"
+                    v-model="action.ActionData.Url"
+                    density="compact"
+                    :placeholder="t('fields.url.placeholder')"
+                    flat
+                    hide-details
+                  />
+                </td>
+                <td>
+                  <v-tooltip location="bottom" open-delay="1000">
+                    <template #activator>
+                      <v-btn
+                        class="shark-400"
+                        data-testid="actiondata-remove"
+                        density="comfortable"
+                        icon="delete"
+                        variant="text"
+                        @click="removeAction(action)"
+                      />
+                    </template>
+                    <span>{{ t('labels.removeAction') }}</span>
+                  </v-tooltip>
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-form>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+import { fromColourData, toColourData } from '@/functions/colours';
+import { Buffer } from 'buffer';
+import { useI18n } from 'vue-i18n';
+import { Action, DataOverlayAnnotation } from '@3cr/viewer-types-ts';
+
+const { t } = useI18n();
+
+const modelValue = defineModel<DataOverlayAnnotation>();
+
+const title = computed({
+  get(): string {
+    return modelValue.value!.Title;
+  },
+  set(value: string): void {
+    modelValue.value!.Title = value;
+  }
+});
+
+const description = computed({
+  get(): string {
+    return modelValue.value!.Description;
+  },
+  set(value: string): void {
+    modelValue.value!.Description = value;
+  }
+});
+
+const icon = computed({
+  get(): string {
+    return modelValue.value!.Icon2d;
+  },
+  set(value: string): void {
+    modelValue.value!.Icon2d = value;
+  }
+});
+
+const colour = computed({
+  get(): string {
+    // We will use colour 2d as the source of truth
+    return fromColourData(modelValue.value!.Colour2d);
+  },
+  set(value: string): void {
+    const colourData = toColourData(value);
+    modelValue.value!.Colour2d = colourData;
+    modelValue.value!.Colour3d = colourData;
+  }
+});
+
+const actions = computed({
+  get(): Action[] {
+    return modelValue.value!.CallToAction!.Actions;
+  },
+  set(value: Action[]) {
+    modelValue.value!.CallToAction!.Actions = value;
+  }
+});
+
+watch(
+  modelValue,
+  () => {
+    if (modelValue.value!.CallToAction === null) {
+      modelValue.value!.CallToAction = { Actions: [] };
+    }
+  },
+  { immediate: true }
+);
+
+function addAction(): void {
+  actions.value.push({ ActionType: 1, ActionData: { Description: '', Url: '' } });
+}
+
+function removeAction(item: Action): void {
+  const index = actions.value.indexOf(item);
+  if (index !== -1) {
+    actions.value.splice(index, 1);
+  }
+}
+
+function upload(): void {
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = 'image/png';
+  /* v8 ignore start */
+  input.onchange = (_) => {
+    const files = Array.from(input.files!!);
+    if (files.length > 0) {
+      const file = files[0];
+      file.arrayBuffer().then((arr) => {
+        icon.value = Buffer.from(arr).toString('base64');
+      });
+    }
+  };
+  /* v8 ignore stop */
+  input.click();
+}
+
+defineExpose({ addAction, actions, icon, upload });
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/palette' as palette;
+
+thead {
+  font-weight: 600 !important;
+  user-select: none;
+  text-align: start;
+  font-size: 12px !important;
+  background-color: #f7f7f8;
+  border-color: transparent;
+
+  th {
+    font-weight: 600 !important;
+    line-height: 6px;
+  }
+}
+
+.upload {
+  border: 1px map-get(palette.$shark, 300) dashed;
+}
+</style>