feat(status): edit & redraft

zio/stable
三咲智子 2022-11-24 19:35:26 +08:00
parent a8bc64a0c7
commit 823f4c960a
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
4 changed files with 159 additions and 83 deletions

View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { CreateStatusParams, CreateStatusParamsWithStatus, StatusVisibility } from 'masto' import type { CreateStatusParams, StatusVisibility } from 'masto'
const { const {
draftKey, draftKey,
@ -12,22 +12,7 @@ const {
}>() }>()
let isSending = $ref(false) let isSending = $ref(false)
function getDefaultStatus(): CreateStatusParamsWithStatus { let { draft } = $(useDraft(draftKey, inReplyToId))
return {
status: '',
inReplyToId,
visibility: 'public',
}
}
const draft = $computed(() => {
if (!currentUserDrafts.value[draftKey]) {
currentUserDrafts.value[draftKey] = {
params: getDefaultStatus(),
attachments: [],
}
}
return currentUserDrafts.value[draftKey]
})
const status = $computed(() => { const status = $computed(() => {
return { return {
@ -93,9 +78,15 @@ function chooseVisibility(visibility: StatusVisibility) {
async function publish() { async function publish() {
try { try {
isSending = true isSending = true
if (!draft.editingStatus)
await masto.statuses.create(status) await masto.statuses.create(status)
draft.params = getDefaultStatus() else await masto.statuses.update(draft.editingStatus.id, status)
draft.attachments = []
draft = {
params: getDefaultStatus(inReplyToId),
attachments: [],
}
isPublishDialogOpen.value = false
} }
finally { finally {
isSending = false isSending = false
@ -112,7 +103,17 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<div v-if="currentUser" p4 flex gap-4> <div v-if="currentUser" flex="~ col">
<template v-if="draft.editingStatus">
<div flex="~ col gap-1">
<div text-gray self-center>
Editing
</div>
<StatusCard :status="draft.editingStatus" :actions="false" :hover="false" />
</div>
<div border="b dashed gray/40" />
</template>
<div p4 flex gap-4>
<AccountAvatar :account="currentUser.account" w-12 h-12 /> <AccountAvatar :account="currentUser.account" w-12 h-12 />
<div <div
flex flex-col gap-3 flex-auto flex flex-col gap-3 flex-auto
@ -172,9 +173,10 @@ onUnmounted(() => {
:disabled="isUploading || (draft.attachments.length === 0 && !draft.params.status)" :disabled="isUploading || (draft.attachments.length === 0 && !draft.params.status)"
@click="publish" @click="publish"
> >
Publish! {{ !draft.editingStatus ? 'Publish!' : 'Save changes' }}
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>

View File

@ -54,6 +54,11 @@ const toggleBookmark = () => toggleStatusAction(
'bookmarked', 'bookmarked',
masto.statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id), masto.statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id),
) )
const togglePin = async () => toggleStatusAction(
'pinned',
masto.statuses[status.pinned ? 'unpin' : 'pin'](status.id),
)
const copyLink = async () => { const copyLink = async () => {
await clipboard.copy(location.href) await clipboard.copy(location.href)
} }
@ -69,10 +74,34 @@ const deleteStatus = async () => {
// TODO when timeline, remove this item // TODO when timeline, remove this item
} }
const togglePin = async () => toggleStatusAction(
'pinned', const deleteAndRedraft = async () => {
masto.statuses[status.pinned ? 'unpin' : 'pin'](status.id), // TODO confirm to delete
)
const { text } = await masto.statuses.remove(status.id)
if (!dialogDraft.isEmpty) {
// TODO confirm to overwrite
}
dialogDraft.draft.value = {
params: { ...getParamsFromStatus(status), status: text! },
attachments: [],
}
openPublishDialog()
}
function editStatus() {
if (!dialogDraft.isEmpty) {
// TODO confirm to overwrite
}
dialogDraft.draft.value = {
editingStatus: status,
params: getParamsFromStatus(status),
attachments: [],
}
openPublishDialog()
}
</script> </script>
<template> <template>
@ -151,8 +180,7 @@ const togglePin = async () => toggleStatusAction(
{{ status.pinned ? 'Unpin on profile' : 'Pin on profile' }} {{ status.pinned ? 'Unpin on profile' : 'Pin on profile' }}
</CommonDropdownItem> </CommonDropdownItem>
<!-- TODO --> <CommonDropdownItem v-if="isAuthor" icon="i-ri:edit-line" @click="editStatus">
<CommonDropdownItem v-if="isAuthor" icon="i-ri:edit-line">
Edit Edit
</CommonDropdownItem> </CommonDropdownItem>
@ -165,6 +193,7 @@ const togglePin = async () => toggleStatusAction(
<CommonDropdownItem <CommonDropdownItem
v-if="isAuthor" icon="i-ri:eraser-line" text-red-600 v-if="isAuthor" icon="i-ri:eraser-line" text-red-600
@click="deleteAndRedraft"
> >
Delete & re-draft Delete & re-draft
</CommonDropdownItem> </CommonDropdownItem>

View File

@ -5,9 +5,11 @@ const props = withDefaults(
defineProps<{ defineProps<{
status: Status status: Status
actions?: boolean actions?: boolean
hover?: boolean
}>(), }>(),
{ {
actions: true, actions: true,
hover: true,
}, },
) )
@ -68,7 +70,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
</script> </script>
<template> <template>
<div ref="el" flex flex-col gap-2 px-4 hover:bg-active transition-100 cursor-pointer @click="onclick"> <div ref="el" flex flex-col gap-2 px-4 transition-100 cursor-pointer :class="{ 'hover:bg-active': hover }" @click="onclick">
<div v-if="rebloggedBy" pl8> <div v-if="rebloggedBy" pl8>
<div flex gap-1 items-center text-gray:75 text-sm> <div flex gap-1 items-center text-gray:75 text-sm>
<div i-ri:repeat-fill mr-1 /> <div i-ri:repeat-fill mr-1 />

View File

@ -1,9 +1,10 @@
import type { Attachment, CreateStatusParamsWithStatus } from 'masto' import type { Attachment, CreateStatusParams, CreateStatusParamsWithStatus, Status } from 'masto'
import { STORAGE_KEY_DRAFTS } from '~/constants' import { STORAGE_KEY_DRAFTS } from '~/constants'
import type { Mutable } from '~/types/utils' import type { Mutable } from '~/types/utils'
export type DraftMap = Record<string, { export type DraftMap = Record<string, {
params: Mutable<CreateStatusParamsWithStatus> editingStatus?: Status
params: Omit<Mutable<CreateStatusParams>, 'status'> & { status?: Exclude<CreateStatusParams['status'], null> }
attachments: Attachment[] attachments: Attachment[]
}> }>
@ -17,3 +18,45 @@ export const currentUserDrafts = computed(() => {
allDrafts.value[id] = {} allDrafts.value[id] = {}
return allDrafts.value[id] return allDrafts.value[id]
}) })
export function getDefaultStatus(inReplyToId?: string): CreateStatusParamsWithStatus {
return {
status: '',
inReplyToId,
visibility: 'public',
}
}
export function getParamsFromStatus(status: Status) {
return {
status: status.content,
mediaIds: status.mediaAttachments.map(att => att.id),
visibility: status.visibility,
}
}
export function useDraft(draftKey: string, inReplyToId?: string) {
const draft = computed({
get() {
if (!currentUserDrafts.value[draftKey]) {
currentUserDrafts.value[draftKey] = {
params: getDefaultStatus(inReplyToId),
attachments: [],
}
}
return currentUserDrafts.value[draftKey]
},
set(val) {
currentUserDrafts.value[draftKey] = val
},
})
const isEmpty = computed(() => {
return (draft.value.params.status ?? '').trim().length === 0
&& draft.value.attachments.length === 0
})
return { draft, isEmpty }
}
export const dialogDraft = useDraft('dialog')