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">
import type { CreateStatusParams, CreateStatusParamsWithStatus, StatusVisibility } from 'masto'
import type { CreateStatusParams, StatusVisibility } from 'masto'
const {
draftKey,
@ -12,22 +12,7 @@ const {
}>()
let isSending = $ref(false)
function getDefaultStatus(): CreateStatusParamsWithStatus {
return {
status: '',
inReplyToId,
visibility: 'public',
}
}
const draft = $computed(() => {
if (!currentUserDrafts.value[draftKey]) {
currentUserDrafts.value[draftKey] = {
params: getDefaultStatus(),
attachments: [],
}
}
return currentUserDrafts.value[draftKey]
})
let { draft } = $(useDraft(draftKey, inReplyToId))
const status = $computed(() => {
return {
@ -93,9 +78,15 @@ function chooseVisibility(visibility: StatusVisibility) {
async function publish() {
try {
isSending = true
await masto.statuses.create(status)
draft.params = getDefaultStatus()
draft.attachments = []
if (!draft.editingStatus)
await masto.statuses.create(status)
else await masto.statuses.update(draft.editingStatus.id, status)
draft = {
params: getDefaultStatus(inReplyToId),
attachments: [],
}
isPublishDialogOpen.value = false
}
finally {
isSending = false
@ -112,68 +103,79 @@ onUnmounted(() => {
</script>
<template>
<div v-if="currentUser" p4 flex gap-4>
<AccountAvatar :account="currentUser.account" w-12 h-12 />
<div
flex flex-col gap-3 flex-auto
:class="isSending ? 'pointer-events-none' : ''"
>
<textarea
v-model="draft.params.status"
:placeholder="placeholder"
p2 border-rounded w-full bg-transparent
outline-none border="~ base"
@paste="handlePaste"
/>
<div flex="~ col gap-2" max-h-50vh overflow-auto>
<PublishAttachment
v-for="(att, idx) in draft.attachments" :key="att.id"
:attachment="att"
@remove="removeAttachment(idx)"
<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 />
<div
flex flex-col gap-3 flex-auto
:class="isSending ? 'pointer-events-none' : ''"
>
<textarea
v-model="draft.params.status"
:placeholder="placeholder"
p2 border-rounded w-full bg-transparent
outline-none border="~ base"
@paste="handlePaste"
/>
</div>
<div v-if="isUploading" flex gap-2 justify-end items-center>
<div op50 i-ri:loader-2-fill animate-spin text-2xl />
Uploading...
</div>
<div flex="~ col gap-2" max-h-50vh overflow-auto>
<PublishAttachment
v-for="(att, idx) in draft.attachments" :key="att.id"
:attachment="att"
@remove="removeAttachment(idx)"
/>
</div>
<div flex="~ gap-2">
<button btn-action-icon @click="pickAttachments">
<div i-ri:upload-line />
</button>
<div v-if="isUploading" flex gap-2 justify-end items-center>
<div op50 i-ri:loader-2-fill animate-spin text-2xl />
Uploading...
</div>
<CommonDropdown>
<button btn-action-icon>
<div :class="currentVisibility.icon" />
<div flex="~ gap-2">
<button btn-action-icon @click="pickAttachments">
<div i-ri:upload-line />
</button>
<template #popper>
<CommonDropdownItem
v-for="visibility in STATUS_VISIBILITIES"
:key="visibility.value"
:icon="visibility.icon"
:checked="visibility.value === draft.params.visibility"
@click="chooseVisibility(visibility.value)"
>
{{ visibility.label }}
<template #description>
{{ visibility.description }}
</template>
</CommonDropdownItem>
</template>
</CommonDropdown>
<CommonDropdown>
<button btn-action-icon>
<div :class="currentVisibility.icon" />
</button>
<div flex-auto />
<template #popper>
<CommonDropdownItem
v-for="visibility in STATUS_VISIBILITIES"
:key="visibility.value"
:icon="visibility.icon"
:checked="visibility.value === draft.params.visibility"
@click="chooseVisibility(visibility.value)"
>
{{ visibility.label }}
<template #description>
{{ visibility.description }}
</template>
</CommonDropdownItem>
</template>
</CommonDropdown>
<button
btn-solid rounded-full
:disabled="isUploading || (draft.attachments.length === 0 && !draft.params.status)"
@click="publish"
>
Publish!
</button>
<div flex-auto />
<button
btn-solid rounded-full
:disabled="isUploading || (draft.attachments.length === 0 && !draft.params.status)"
@click="publish"
>
{{ !draft.editingStatus ? 'Publish!' : 'Save changes' }}
</button>
</div>
</div>
</div>
</div>

View File

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

View File

@ -5,9 +5,11 @@ const props = withDefaults(
defineProps<{
status: Status
actions?: boolean
hover?: boolean
}>(),
{
actions: true,
hover: true,
},
)
@ -68,7 +70,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
</script>
<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 flex gap-1 items-center text-gray:75 text-sm>
<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 type { Mutable } from '~/types/utils'
export type DraftMap = Record<string, {
params: Mutable<CreateStatusParamsWithStatus>
editingStatus?: Status
params: Omit<Mutable<CreateStatusParams>, 'status'> & { status?: Exclude<CreateStatusParams['status'], null> }
attachments: Attachment[]
}>
@ -17,3 +18,45 @@ export const currentUserDrafts = computed(() => {
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')