80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<v-list density="compact">
|
|
<v-list-item>
|
|
<template #prepend>
|
|
<v-icon>mdi-tag</v-icon>
|
|
</template>
|
|
<v-list-item-title>Código</v-list-item-title>
|
|
<v-list-item-subtitle>
|
|
<code class="order-code">{{ code }}</code>
|
|
</v-list-item-subtitle>
|
|
<template #append>
|
|
<v-btn
|
|
data-test="copy-code"
|
|
icon="mdi-content-copy"
|
|
size="small"
|
|
title="Copiar código"
|
|
variant="text"
|
|
@click="copyText(code)"
|
|
/>
|
|
</template>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<template #prepend>
|
|
<v-icon>mdi-link-variant</v-icon>
|
|
</template>
|
|
<v-list-item-title>Link de consulta</v-list-item-title>
|
|
<v-list-item-subtitle>
|
|
<code class="order-link">{{ publicLink }}</code>
|
|
</v-list-item-subtitle>
|
|
<template #append>
|
|
<v-btn
|
|
data-test="copy-link"
|
|
icon="mdi-content-copy"
|
|
size="small"
|
|
title="Copiar link"
|
|
variant="text"
|
|
@click="copyText(publicLink)"
|
|
/>
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
|
|
<v-snackbar v-model="snackbar" color="success" location="top" :timeout="2000">
|
|
Copiado
|
|
</v-snackbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
code: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const snackbar = ref(false)
|
|
|
|
const publicLink = computed(() => {
|
|
return `${window.location.origin}/pedido/${props.code}`
|
|
})
|
|
|
|
async function copyText (text) {
|
|
if (navigator.clipboard?.writeText) {
|
|
await navigator.clipboard.writeText(text)
|
|
}
|
|
snackbar.value = true
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.order-code,
|
|
.order-link {
|
|
word-break: break-all;
|
|
}
|
|
</style>
|