github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Inject Content Version in Live Preview popout (#22339)

Browse Source
This commit is contained in:
Pascal Jufer
2024-04-29 18:04:40 +02:00
committed by GitHub
parent 0d7441e7a3
commit 1d7a7cdf06
3 changed files with 30 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/shiny-avocados-eat.md Normal file
View File

@@ -0,0 +1,5 @@
---
'@directus/app': patch
---
Ensured the URL in Live Preview popout window receives the current Content Version

16
app/src/modules/content/routes/item.vue
View File

@@ -222,10 +222,10 @@ const previewTemplate = computed(() => collectionInfo.value?.meta?.preview_url ?
const { templateData: previewData, fetchTemplateValues } = useTemplateData(collectionInfo, primaryKey, previewTemplate);
const previewURL = computed(() => {
const previewUrl = computed(() => {
const enrichedPreviewData = {
...unref(previewData),
$version: currentVersion.value ? currentVersion.value.key : 'main',
...previewData.value,
$version: currentVersion.value?.key ?? 'main',
};
const { displayValue } = renderStringTemplate(previewTemplate.value, enrichedPreviewData);
@@ -250,7 +250,7 @@ const splitView = computed({
let popupWindow: Window | null = null;
watch(
[livePreviewMode, previewURL],
[livePreviewMode, previewUrl],
([mode, url]) => {
if (mode !== 'popup' || !url) {
if (popupWindow) popupWindow.close();
@@ -291,8 +291,8 @@ function toggleSplitView() {
async function refreshLivePreview() {
try {
await fetchTemplateValues();
window.refreshLivePreview(previewURL.value);
if (popupWindow) popupWindow.refreshLivePreview(previewURL.value);
window.refreshLivePreview(previewUrl.value);
if (popupWindow) popupWindow.refreshLivePreview(previewUrl.value);
} catch (error) {
// noop
}
@@ -545,7 +545,7 @@ function revert(values: Record<string, any>) {
<template #actions>
<v-button
v-if="previewURL"
v-if="previewUrl"
v-tooltip.bottom="t(livePreviewMode === null ? 'live_preview.enable' : 'live_preview.disable')"
rounded
icon
@@ -715,7 +715,7 @@ function revert(values: Record<string, any>) {
</v-dialog>
<template #splitView>
<LivePreview v-if="previewURL" :url="previewURL" @new-window="livePreviewMode = 'popup'" />
<LivePreview v-if="previewUrl" :url="previewUrl" @new-window="livePreviewMode = 'popup'" />
</template>
<template #sidebar>

28
app/src/modules/content/routes/preview.vue
View File

@@ -1,27 +1,33 @@
<script setup lang="ts">
import { useTemplateData } from '@/composables/use-template-data';
import { useVersions } from '@/composables/use-versions';
import { renderStringTemplate } from '@/utils/render-string-template';
import { useCollection } from '@directus/composables';
import { computed, toRefs } from 'vue';
import LivePreview from '../components/live-preview.vue';
import { useCollection } from '@directus/composables';
import { renderStringTemplate } from '@/utils/render-string-template';
import { useTemplateData } from '@/composables/use-template-data';
type Props = {
const props = defineProps<{
collection: string;
primaryKey: string;
};
const props = defineProps<Props>();
}>();
const { collection, primaryKey } = toRefs(props);
const { info: collectionInfo } = useCollection(collection);
const { info: collectionInfo, isSingleton } = useCollection(collection);
const { currentVersion } = useVersions(collection, isSingleton, primaryKey);
const previewTemplate = computed(() => collectionInfo.value?.meta?.preview_url ?? '');
const { templateData: previewData } = useTemplateData(collectionInfo, primaryKey, previewTemplate);
const previewURL = computed(() => {
const { displayValue } = renderStringTemplate(previewTemplate.value, previewData);
const previewUrl = computed(() => {
const enrichedPreviewData = {
...previewData.value,
$version: currentVersion.value?.key ?? 'main',
};
const { displayValue } = renderStringTemplate(previewTemplate.value, enrichedPreviewData);
return displayValue.value || null;
});
@@ -32,5 +38,5 @@ function closePopup() {
</script>
<template>
<LivePreview v-if="previewURL" :url="previewURL" in-popup @new-window="closePopup" />
<LivePreview v-if="previewUrl" :url="previewUrl" in-popup @new-window="closePopup" />
</template>