From a4e764c82cb4774c9ffb4a2f2b742bccd7a53e44 Mon Sep 17 00:00:00 2001
From: Mikhail Sazanov <m@sazanof.ru>
Date: Wed, 8 Jun 2022 18:44:57 +0300
Subject: [PATCH] Move attachments to details, notify if attachment exists

Signed-off-by: Mikhail Sazanov <m@sazanof.ru>
---
 .../Editor/Attachments/AttachmentsList.vue    | 144 ++++++++++--------
 src/views/EditSidebar.vue                     |  27 +---
 2 files changed, 81 insertions(+), 90 deletions(-)

diff --git a/src/components/Editor/Attachments/AttachmentsList.vue b/src/components/Editor/Attachments/AttachmentsList.vue
index e9fb80e46f..d7106a4f60 100644
--- a/src/components/Editor/Attachments/AttachmentsList.vue
+++ b/src/components/Editor/Attachments/AttachmentsList.vue
@@ -5,12 +5,42 @@
 			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>
@@ -18,12 +48,6 @@
 						{{ 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" />
@@ -33,45 +57,7 @@
 					</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>
 
@@ -79,17 +65,15 @@
 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'
 
@@ -99,13 +83,11 @@ export default {
 		ListItem,
 		Actions,
 		ActionButton,
-		ActionLink,
-		Button,
-		EmptyContent,
-		Download,
+		Upload,
 		TrashCan,
 		Folder,
-		CloudDownloadOutline,
+		Paperclip,
+		Plus,
 
 	},
 	props: {
@@ -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) {
 
 			}
@@ -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 {
diff --git a/src/views/EditSidebar.vue b/src/views/EditSidebar.vue
index 24768868d6..7eaab9f18a 100644
--- a/src/views/EditSidebar.vue
+++ b/src/views/EditSidebar.vue
@@ -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"
@@ -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"
@@ -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',
@@ -304,7 +286,6 @@ export default {
 		InformationOutline,
 		MapMarker,
 		InvitationResponseButtons,
-		Paperclip,
 		AttachmentsList,
 	},
 	mixins: [