Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 | 1x 4x 4x 1x 3x 4x 5x 5x 5x 5x 1x 1x 5x | <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>
|