Skip to content

Commit

Permalink
Move attachments to details, notify if attachment exists
Browse files Browse the repository at this point in the history 
Signed-off-by: Mikhail Sazanov <m@sazanof.ru>
  • Loading branch information
Mikhail Sazanov committed Jun 8, 2022
1 parent 43ff211 commit a4e764c
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 90 deletions.
144 changes: 77 additions & 67 deletions src/components/Editor/Attachments/AttachmentsList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,49 @@
multiple
style="display:none"
@change="onLocalAttachmentSelected">
<div class="attachments-summary">
<div class="attachments-summary-inner">
<Paperclip :size="20" />
<div v-if="attachments.length > 0">
{{ n('mail', '{count} attachment', '{count} attachments', attachments.length, { count: attachments.length }) }}
</div>
<div v-else>
{{ t('mail', 'No attachments') }}
</div>
</div>

<Actions>
<template #icon>
<Plus :size="20" />
</template>
<ActionButton @click="openFilesModal()">
<template #icon>
<Folder :size="20" />
</template>
{{ t('calendar', 'Add from Files') }}
</ActionButton>
<ActionButton @click="clickOnUploadButton">
<template #icon>
<Upload :size="20" />
</template>
{{ t('calendar', 'Upload from PC') }}
</ActionButton>
</Actions>
</div>
<div v-if="attachments.length > 0">
<ul>
<ul class="attachments-list-item">
<ListItem v-for="attachment in attachments"
:key="attachment.value"
:force-display-actions="true"
:title="getBaseName(attachment.fileName)">
:title="getBaseName(attachment.fileName)"
@click="openFile(attachment.value)">
<template #icon>
<img :src="getPreview(attachment.managedId,attachment.formatType)" class="attachment-icon">
</template>
<template #subtitle>
{{ attachment.formatType }}
</template>
<template #actions>
<ActionLink :href="attachment.value" target="_blank">
<template #icon>
<Download :size="20" />
</template>
{{ t('calendar', 'View file') }}
</ActionLink>
<ActionButton @click="deleteAttachmentFromEvent(attachment)">
<template #icon>
<TrashCan :size="20" />
Expand All @@ -33,63 +57,23 @@
</template>
</ListItem>
</ul>
<div class="actions-absolute">
<Actions>
<ActionButton @click="openFilesModal()">
<template #icon>
<Folder :size="20" />
</template>
{{ t('calendar', 'Choose') }}
</ActionButton>
<ActionButton @click="clickOnUploadButton">
<template #icon>
<Download :size="20" />
</template>
{{ t('calendar', 'Upload') }}
</ActionButton>
</Actions>
</div>
</div>

<EmptyContent v-else>
<CloudDownloadOutline :size="80" />
<template #desc>
<p>{{ t('calendar', 'This event has no attachments.') }}</p>
<div class="button-group">
<Button type="primary"
@click="openFilesModal()">
<template #icon>
<Folder :size="20" />
</template>
{{ t('calendar', 'Choose') }}
</Button>
<Button @click="clickOnUploadButton">
<template #icon>
<Download :size="20" />
</template>
{{ t('calendar', 'Upload') }}
</Button>
</div>
</template>
</EmptyContent>
</div>
</template>

<script>
import ListItem from '@nextcloud/vue/dist/Components/ListItem'
import Actions from '@nextcloud/vue/dist/Components/Actions'
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
import Button from '@nextcloud/vue/dist/Components/Button'
import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
import Download from 'vue-material-design-icons/Download'
import Upload from 'vue-material-design-icons/Upload'
import TrashCan from 'vue-material-design-icons/TrashCan'
import CloudDownloadOutline from 'vue-material-design-icons/CloudDownloadOutline'
import Folder from 'vue-material-design-icons/Folder'
import Paperclip from 'vue-material-design-icons/Paperclip'
import Plus from 'vue-material-design-icons/Plus'
import { generateUrl } from '@nextcloud/router'
import { getFilePickerBuilder } from '@nextcloud/dialogs'
import { getFilePickerBuilder, showError } from '@nextcloud/dialogs'
import { getRequestToken } from '@nextcloud/auth'
import { shareFile, uploadLocalAttachment } from './../../../services/attachmentService'
Expand All @@ -99,13 +83,11 @@ export default {
ListItem,
Actions,
ActionButton,
ActionLink,
Button,
EmptyContent,
Download,
Upload,
TrashCan,
Folder,
CloudDownloadOutline,
Paperclip,
Plus,
},
props: {
Expand Down Expand Up @@ -154,8 +136,21 @@ export default {
const picker = getFilePickerBuilder(t('mail', 'Choose a file to add as attachment')).setMultiSelect(false).build()
try {
const path = await picker.pick(t('mail', 'Choose a file to share as a link'))
const sharedData = await shareFile(path, getRequestToken())
this.addAttachmentBySharedData(this.calendarObjectInstance, sharedData)
let err = false
this.attachments.find(attachment => {
if (attachment.fileName === path) {
err = true
}
return err
})
if (!err) {
const sharedData = await shareFile(path, getRequestToken())
this.addAttachmentBySharedData(this.calendarObjectInstance, sharedData)
} else {
showError(t('calendar', 'Attachment {name} already exist!', { name: this.getBaseName(path) }))
}
} catch (error) {
}
Expand Down Expand Up @@ -196,21 +191,36 @@ export default {
getBaseName(name) {
return name.split('/').pop()
},
openFile(url) {
window.open(url, '_blank')
},
},
}
</script>

<style lang="scss" scoped>
.actions-absolute {
position: sticky;
left: 0;
bottom: 55px;
right: 0;
z-index: 10;
display: flex;
.attachments-summary {
display:flex;
align-items: center;
justify-content: center;
justify-content: space-between;
padding-left: 6px;
.attachments-summary-inner {
display:flex;
align-items: center;
span {
width: 34px;
height: 34px;
margin-left: -10px;
margin-right: 10px;
}
}
}
.attachments-list-item {
margin: 0 -8px;
}
#attachments .empty-content {
Expand Down
27 changes: 4 additions & 23 deletions src/views/EditSidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,10 @@
:is-editing-master-item="isEditingMasterItem"
:is-recurrence-exception="isRecurrenceException"
@force-this-and-all-future="forceModifyingFuture" />

<AttachmentsList v-if="!isLoading"
:calendar-object-instance="calendarObjectInstance"
:is-read-only="isReadOnly" />
</div>
<SaveButtons v-if="showSaveButtons"
class="app-sidebar-tab__buttons"
Expand Down Expand Up @@ -197,27 +201,6 @@
@save-this-only="saveAndLeave(false)"
@save-this-and-all-future="saveAndLeave(true)" />
</AppSidebarTab>
<AppSidebarTab v-if="!isLoading && !isError"
id="app-sidebar-tab-attachements"
class="app-sidebar-tab"
:name="$t('calendar', 'Attachments')"
:order="2">
<template #icon>
<Paperclip :size="20" decorative />
</template>
<div class="app-sidebar-tab__content">
<AttachmentsList v-if="!isLoading"
:calendar-object-instance="calendarObjectInstance"
:is-read-only="isReadOnly" />
</div>
<SaveButtons v-if="showSaveButtons"
class="app-sidebar-tab__buttons"
:can-create-recurrence-exception="canCreateRecurrenceException"
:is-new="isNew"
:force-this-and-all-future="forceThisAndAllFuture"
@save-this-only="saveAndLeave(false)"
@save-this-and-all-future="saveAndLeave(true)" />
</AppSidebarTab>
<AppSidebarTab v-if="!isLoading && !isError"
id="app-sidebar-tab-resources"
class="app-sidebar-tab"
Expand Down Expand Up @@ -275,7 +258,6 @@ import Delete from 'vue-material-design-icons/Delete.vue'
import Download from 'vue-material-design-icons/Download.vue'
import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
import MapMarker from 'vue-material-design-icons/MapMarker.vue'
import Paperclip from 'vue-material-design-icons/Paperclip.vue'

export default {
name: 'EditSidebar',
Expand Down Expand Up @@ -304,7 +286,6 @@ export default {
InformationOutline,
MapMarker,
InvitationResponseButtons,
Paperclip,
AttachmentsList,
},
mixins: [
Expand Down

0 comments on commit a4e764c

Please sign in to comment.