Update comment attachments (#1106)

Signed-off-by: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com>
This commit is contained in:
Denis Bykhov 2022-03-05 15:05:49 +06:00 committed by GitHub
parent 07ad3bba09
commit bc18881eda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 70 additions and 15 deletions

View File

@ -20,7 +20,7 @@
import attachment from '../plugin' import attachment from '../plugin'
import { setPlatformStatus, unknownError } from '@anticrm/platform' import { setPlatformStatus, unknownError } from '@anticrm/platform'
import { createEventDispatcher, onDestroy } from 'svelte' import { createEventDispatcher, onDestroy } from 'svelte'
import { Class, Doc, Ref, Space } from '@anticrm/core' import { Account, Class, Doc, generateId, Ref, Space } from '@anticrm/core'
import { Attachment } from '@anticrm/attachment' import { Attachment } from '@anticrm/attachment'
import AttachmentPresenter from './AttachmentPresenter.svelte' import AttachmentPresenter from './AttachmentPresenter.svelte'
import { IconClose } from '@anticrm/ui' import { IconClose } from '@anticrm/ui'
@ -29,6 +29,12 @@
export let objectId: Ref<Doc> export let objectId: Ref<Doc>
export let space: Ref<Space> export let space: Ref<Space>
export let _class: Ref<Class<Doc>> export let _class: Ref<Class<Doc>>
export let content: string = ''
export let showSend = true
export function submit (): void {
refInput.submit()
}
let refInput: ReferenceInput
let inputFile: HTMLInputElement let inputFile: HTMLInputElement
let saved = false let saved = false
@ -36,28 +42,49 @@
const client = getClient() const client = getClient()
const query = createQuery() const query = createQuery()
let attachments: Attachment[] = [] let attachments: Map<Ref<Attachment>, Attachment> = new Map<Ref<Attachment>, Attachment>()
let originalAttachments: Set<Ref<Attachment>> = new Set<Ref<Attachment>>()
let newAttachments: Set<Ref<Attachment>> = new Set<Ref<Attachment>>()
let removedAttachments: Set<Attachment> = new Set<Attachment>()
$: objectId && query.query(attachment.class.Attachment, { $: objectId && query.query(attachment.class.Attachment, {
attachedTo: objectId attachedTo: objectId
}, (res) => attachments = res) }, (res) => {
originalAttachments = new Set(res.map((p) => p._id))
attachments = new Map(res.map((p) => [p._id, p]))
})
async function createAttachment (file: File) { async function createAttachment (file: File) {
try { try {
const uuid = await uploadFile(file, { space, attachedTo: objectId }) const uuid = await uploadFile(file, { space, attachedTo: objectId })
console.log('uploaded file uuid', uuid) console.log('uploaded file uuid', uuid)
await client.addCollection(attachment.class.Attachment, space, objectId, _class, 'attachments', { const _id: Ref<Attachment> = generateId()
attachments.set(_id, {
_id,
_class: attachment.class.Attachment,
collection: 'attachments',
modifiedOn: 0,
modifiedBy: '' as Ref<Account>,
space,
attachedTo: objectId,
attachedToClass: _class,
name: file.name, name: file.name,
file: uuid, file: uuid,
type: file.type, type: file.type,
size: file.size, size: file.size,
lastModified: file.lastModified lastModified: file.lastModified
}) })
newAttachments.add(_id)
attachments = attachments
} catch (err: any) { } catch (err: any) {
setPlatformStatus(unknownError(err)) setPlatformStatus(unknownError(err))
} }
} }
async function saveAttachment (doc: Attachment) {
const res = await client.addCollection(attachment.class.Attachment, space, objectId, _class, 'attachments', doc, doc._id)
}
function fileSelected () { function fileSelected () {
const list = inputFile.files const list = inputFile.files
if (list === null || list.length === 0) return if (list === null || list.length === 0) return
@ -77,21 +104,44 @@
} }
async function removeAttachment (attachment: Attachment): Promise<void> { async function removeAttachment (attachment: Attachment): Promise<void> {
await client.removeCollection(attachment._class, attachment.space, attachment._id, attachment.attachedTo, attachment.attachedToClass, 'attachments') removedAttachments.add(attachment)
await deleteFile(attachment.file) attachments.delete(attachment._id)
attachments = attachments
}
async function deleteAttachment (attachment: Attachment): Promise<void> {
if (originalAttachments.has(attachment._id)) {
await client.removeCollection(attachment._class, attachment.space, attachment._id, attachment.attachedTo, attachment.attachedToClass, 'attachments')
} else {
await deleteFile(attachment.file)
}
} }
onDestroy(() => { onDestroy(() => {
if (!saved) { if (!saved) {
attachments.map((attachment) => { newAttachments.forEach(async (p) => {
removeAttachment(attachment) const attachment = attachments.get(p)
if (attachment !== undefined) {
await deleteAttachment(attachment)
}
}) })
} }
}) })
async function onMessage (event: CustomEvent) { async function onMessage (event: CustomEvent) {
saved = true saved = true
dispatch('message', { message: event.detail, attachments: attachments.length }) const promises: Promise<any>[] = []
newAttachments.forEach((p) => {
const attachment = attachments.get(p)
if (attachment !== undefined) {
promises.push(saveAttachment(attachment))
}
})
removedAttachments.forEach((p) => {
promises.push(deleteAttachment(p))
})
await Promise.all(promises)
dispatch('message', { message: event.detail, attachments: attachments.size })
} }
</script> </script>
@ -110,9 +160,9 @@
on:dragleave={() => {}} on:dragleave={() => {}}
on:drop|preventDefault|stopPropagation={fileDrop} on:drop|preventDefault|stopPropagation={fileDrop}
> >
{#if attachments.length} {#if attachments.size}
<div class='flex-row-center list'> <div class='flex-row-center list'>
{#each attachments as attachment} {#each Array.from(attachments.values()) as attachment}
<div class='item flex'> <div class='item flex'>
<AttachmentPresenter value={attachment} /> <AttachmentPresenter value={attachment} />
<div class='remove'> <div class='remove'>
@ -122,7 +172,7 @@
{/each} {/each}
</div> </div>
{/if} {/if}
<ReferenceInput on:message={onMessage} withoutTopBorder={attachments.length > 0} on:attach={() => { inputFile.click() }} /> <ReferenceInput bind:this={refInput} {content} {showSend} on:message={onMessage} withoutTopBorder={attachments.size > 0} on:attach={() => { inputFile.click() }} />
</div> </div>
<style lang="scss"> <style lang="scss">

View File

@ -23,6 +23,7 @@
import { createEventDispatcher } from 'svelte' import { createEventDispatcher } from 'svelte'
import { updateBacklinks } from '../../backlinks' import { updateBacklinks } from '../../backlinks'
import chunter from '../../plugin' import chunter from '../../plugin'
import { AttachmentRefInput } from '@anticrm/attachment-resources'
export let tx: TxCreateDoc<Comment> export let tx: TxCreateDoc<Comment>
export let value: Comment export let value: Comment
@ -34,20 +35,22 @@
const editing = false const editing = false
async function onMessage (event: CustomEvent) { async function onMessage (event: CustomEvent) {
const { message, attachments } = event.detail
await client.updateCollection(tx.objectClass, tx.objectSpace, tx.objectId, value.attachedTo, value.attachedToClass, value.collection, { await client.updateCollection(tx.objectClass, tx.objectSpace, tx.objectId, value.attachedTo, value.attachedToClass, value.collection, {
message: event.detail message,
attachments
}) })
// We need to update backlinks before and after. // We need to update backlinks before and after.
await updateBacklinks(client, value.attachedTo, value.attachedToClass, value._id, event.detail) await updateBacklinks(client, value.attachedTo, value.attachedToClass, value._id, event.detail)
dispatch('close', false) dispatch('close', false)
} }
let refInput: ReferenceInput let refInput: AttachmentRefInput
</script> </script>
<div class:editing> <div class:editing>
{#if edit} {#if edit}
<ReferenceInput bind:this={refInput} content={value.message} on:message={onMessage} showSend={false}/> <AttachmentRefInput bind:this={refInput} _class={value._class} objectId={value._id} space={value.space} content={value.message} on:message={onMessage} showSend={false} />
<div class='flex-row-reverse gap-2 reverse'> <div class='flex-row-reverse gap-2 reverse'>
<Button label={chunter.string.EditCancel} on:click={() => { <Button label={chunter.string.EditCancel} on:click={() => {
dispatch('close', false) dispatch('close', false)

View File

@ -41,6 +41,8 @@ const findCreateTx = async (id: Ref<Attachment>, findAll: TriggerControl['findAl
'tx.objectId': id 'tx.objectId': id
}))[0] }))[0]
if (colTx === undefined) return
return colTx.tx as TxCreateDoc<Attachment> return colTx.tx as TxCreateDoc<Attachment>
} }