🐛 Fix editor won't reset after posted post

This commit is contained in:
LittleSheep 2024-03-23 00:46:34 +08:00
parent 1664fa62c4
commit 2b4ffb6811
2 changed files with 43 additions and 57 deletions

View File

@ -25,37 +25,18 @@
You are editing a post with alias <b class="font-mono">{{ editor.related.edit_to?.alias }}</b>
</v-alert>
<v-textarea
required
class="mb-3"
variant="outlined"
label="Content"
hint="The content supports markdown syntax"
v-model="data.content"
@paste="pasteMedia"
/>
<v-textarea required class="mb-3" variant="outlined" label="Content"
hint="The content supports markdown syntax" v-model="data.content" @paste="pasteMedia" />
<v-expansion-panels>
<v-expansion-panel title="Brief describe">
<template #text>
<div class="mt-1">
<v-text-field
required
variant="solo-filled"
density="comfortable"
label="Title"
:loading="reverting"
v-model="data.title"
/>
<v-text-field required variant="solo-filled" density="comfortable" label="Title" :loading="reverting"
v-model="data.title" />
<v-textarea
required
auto-grow
variant="solo-filled"
density="comfortable"
label="Description"
v-model="data.description"
/>
<v-textarea required auto-grow variant="solo-filled" density="comfortable" label="Description"
v-model="data.description" />
</div>
</template>
</v-expansion-panel>
@ -66,7 +47,8 @@
<div>
<p class="text-xs">Your content will visible for public at</p>
<p class="text-lg font-medium">
{{ data.published_at ? new Date(data.published_at).toLocaleString() : new Date().toLocaleString() }}
{{ data.published_at ? new Date(data.published_at).toLocaleString() : new Date().toLocaleString()
}}
</p>
</div>
<v-btn size="small" icon="mdi-pencil" variant="text" @click="dialogs.plan = true" />
@ -149,7 +131,7 @@ const data = ref<any>({
})
const currentRealm = computed(() => {
if(data.value.realm_id) {
if (data.value.realm_id) {
return realms.available.find((e: any) => e.id === data.value.realm_id)
} else {
return null
@ -187,16 +169,29 @@ async function postArticle(evt: SubmitEvent) {
})
if (res.status === 200) {
const data = await res.json()
form.reset()
router.push({ name: "posts.details.articles", params: { alias: data.alias } })
success.value = true
editor.show.article = false
resetEditor(form)
router.push({ name: "posts.details.articles", params: { alias: data.alias } })
} else {
error.value = await res.text()
}
loading.value = false
}
function resetEditor(target: HTMLFormElement) {
target.reset()
data.value = {
title: "",
content: "",
description: "",
realm_id: null,
published_at: null,
attachments: []
}
}
const media = ref<any>(null)
function pasteMedia(evt: ClipboardEvent) {

View File

@ -6,40 +6,20 @@
You are editing a post with alias <b class="font-mono">{{ editor.related.edit_to?.alias }}</b>
</v-alert>
<v-textarea
required
persistent-counter
variant="outlined"
label="What's happened?!"
counter="1024"
v-model="data.content"
@paste="pasteMedia"
/>
<v-textarea required persistent-counter variant="outlined" label="What's happened?!" counter="1024"
v-model="data.content" @paste="pasteMedia" />
<div class="flex mt-[-18px]">
<v-tooltip text="Planned publish" location="start">
<template #activator="{ props }">
<v-btn
v-bind="props"
type="button"
variant="text"
icon="mdi-calendar"
size="small"
@click="dialogs.plan = true"
/>
<v-btn v-bind="props" type="button" variant="text" icon="mdi-calendar" size="small"
@click="dialogs.plan = true" />
</template>
</v-tooltip>
<v-tooltip text="Media" location="start">
<template #activator="{ props }">
<v-btn
v-bind="props"
icon
class="text-none"
type="button"
variant="text"
size="small"
@click="dialogs.media = true"
>
<v-btn v-bind="props" icon class="text-none" type="button" variant="text" size="small"
@click="dialogs.media = true">
<v-badge v-if="data.attachments.length > 0" :content="data.attachments.length">
<v-icon icon="mdi-camera" />
</v-badge>
@ -92,8 +72,8 @@ import { getAtk } from "@/stores/userinfo"
import { reactive, ref, watch } from "vue"
import { useRoute, useRouter } from "vue-router"
import PlannedPublish from "@/components/publish/parts/PlannedPublish.vue"
import Media from "@/components/publish/parts/Media.vue"
import PublishArea from "@/components/publish/parts/PublishArea.vue"
import Media from "@/components/publish/parts/Media.vue"
const route = useRoute()
const editor = useEditor()
@ -135,10 +115,11 @@ async function postMoment(evt: SubmitEvent) {
body: JSON.stringify(payload)
})
if (res.status === 200) {
form.reset()
const data = await res.json()
success.value = true
editor.show.moment = false
resetEditor(form)
router.push({ name: "posts.details.moments", params: { alias: data.alias } })
} else {
error.value = await res.text()
@ -146,6 +127,16 @@ async function postMoment(evt: SubmitEvent) {
loading.value = false
}
function resetEditor(target: HTMLFormElement) {
target.reset()
data.value = {
content: "",
realm_id: null,
published_at: null,
attachments: []
}
}
const media = ref<any>(null)
function pasteMedia(evt: ClipboardEvent) {