/
[alias].vue
95 lines (85 loc) · 2.45 KB
/
[alias].vue
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
<template>
<b-overlay :show="loading" opacity="0.5" class="col-md-9 m-auto topic">
<div v-if="!record">
<h1 class="topic-header">
{{ page.title }}
<b-button v-if="$scope('pages/get')" variant="link" class="ms-2 p-0" @click="onEdit">
<vesp-fa icon="edit" class="fa-fw" />
</b-button>
</h1>
<editor-content :content="page.content" />
</div>
<b-form v-else-if="$scope('pages/get')" class="topic-form" @submit.prevent="onSubmit" @keydown="onKeydown">
<div class="topic-buttons">
<b-button :disabled="loading" @click.prevent="onCancel">{{ $t('actions.cancel') }}</b-button>
<b-button variant="primary" type="submit" :disabled="loading">
<b-spinner v-if="loading" small />
{{ $t('actions.save') }}
</b-button>
</div>
<forms-page v-model="record" />
</b-form>
</b-overlay>
</template>
<script setup lang="ts">
const route = useRoute()
const {$settings, $socket} = useNuxtApp()
const {data, error} = await useCustomFetch('web/pages/' + route.params.alias)
if (error.value) {
showError({statusCode: error.value.statusCode || 500, statusMessage: error.value.statusMessage || 'Server Error'})
}
const page: ComputedRef<VespPage> = computed(() => data.value || {})
const loading = ref(false)
const record: Ref<undefined | VespPage> = ref()
async function onEdit() {
try {
loading.value = true
record.value = await useGet('admin/pages/' + page.value.id)
} catch (e) {
} finally {
loading.value = false
}
}
async function onSubmit() {
try {
loading.value = true
await usePatch('admin/pages/' + page.value.id, {...record.value})
onCancel()
} catch (e) {
} finally {
loading.value = false
}
}
function onCancel() {
record.value = undefined
}
function onUpdatePage(data: VespPage) {
if (data.id !== page.value.id) {
return
}
if (page.value.alias !== data.alias) {
useRouter().replace({name: 'pages-alias', params: {alias: data.alias}})
} else {
page.value.title = data.title
page.value.content = data.content
}
}
function onKeydown(e: KeyboardEvent) {
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
e.preventDefault()
onSubmit()
}
}
onMounted(() => {
$socket.on('page-update', onUpdatePage)
if (error.value) {
clearError()
}
})
onUnmounted(() => {
$socket.off('page-update', onUpdatePage)
})
useHead({
title: () => [page.value?.title, $settings.value.title].join(' / '),
})
</script>