feature/DIMOC-216/drag-and-drop

.vscode/settings.json

@@ -20,4 +20,7 @@
     "[javascript]": {
         "editor.defaultFormatter": "dbaeumer.vscode-eslint"
     },
+    "[css]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
 }

css/main.css

@@ -7,10 +7,12 @@
 /* Pages */
 
 .pageHeader {
-	margin-block-start: var(--app-navigation-padding);
-    margin-inline-start: calc(var(--default-clickable-area) + var(--app-navigation-padding)* 2);
-    min-height: var(--default-clickable-area);
-    line-height: var(--default-clickable-area);
+  margin-block-start: var(--app-navigation-padding);
+  margin-inline-start: calc(
+    var(--default-clickable-area) + var(--app-navigation-padding) * 2
+  );
+  min-height: var(--default-clickable-area);
+  line-height: var(--default-clickable-area);
 }
 
 /* Lists */
@@ -30,7 +32,7 @@
   margin-block-end: 11px !important;
 }
 
-.selectedZaakIcon>svg {
+.selectedZaakIcon > svg {
   fill: white;
 }
 
@@ -88,22 +90,24 @@
   overflow: auto;
 }
 
+.tabPanelFileUpload {
+  margin-block-end: 15px !important;
+}
 
 .detailGrid {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
 }
 
-.publishedIcon>svg {
+.publishedIcon > svg {
   fill: var(--color-success);
 }
-.warningIcon>svg {
+.warningIcon > svg {
   fill: var(--color-warning);
 }
 
-
 /* Modals */
-.form-group > *  {
+.form-group > * {
   margin-block-end: 10px;
 }
 
@@ -122,34 +126,39 @@
   color: var(--color-error);
 }
 
+/* File drag and drop */
+
+.filesListDragDropNotice {
+  width: 100%;
+  min-height: 113px;
+  margin: 0;
+  user-select: none;
+  color: var(--color-text-maxcontrast);
+  background-color: var(--color-main-background);
+  border-color: #000;
+}
+
+.filesListDragDropNoticeWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: fit-content;
+  max-height: 70%;
+  padding: 0 5vw;
+  border: 2px var(--color-border-dark) dashed;
+  border-radius: var(--border-radius-large);
+}
+
+.filesListDragDropNoticeWrapperIcon {
+  display: flex;
+}
+
+.filesListDragDropNoticeTitle {
+  margin: 12px 0;
+}
 
-/* File drag and drop */ 
-
-.filesListDragDropNotice{ 
-  display: flex; 
-  align-items: center; 
-  justify-content: center; 
-  width: 100%; 
-  min-height: 113px; 
-  margin: 0; 
-  user-select: none; 
-  color: var(--color-text-maxcontrast); 
-  background-color: var(--color-main-background); 
-  border-color: #000; 
-} 
-
-.filesListDragDropNoticeWrapper{ 
-  display: flex; 
-  align-items: center; 
-  justify-content: center; 
-  height: 15vh; 
-  max-height: 70%; 
-  padding: 0 5vw; 
-  border: 2px var(--color-border-dark) dashed; 
-  border-radius: var(--border-radius-large); 
-} 
-
-.filesListDragDropNoticeTitle{ 
-  margin-left: 16px; 
-  color: inherit; 
+.filesListDragDropNoticeTitle {
+  margin-left: 16px;
+  color: inherit;
 }

docker/init-ubuntu.sh

@@ -1,5 +1,5 @@
 apt update;
-apt install npm composer -y
+apt install npm composer php-gd php-zip -y
 
 cd /home/ubuntu/app
 npm i

src/composables/UseFileSelection.js

@@ -19,29 +19,30 @@
 		allowMultiple,
 		allowedFileTypes,
 		onFileDrop,
+		onFileSelect,
 	} = options
 
 	// Data types computed ref
 	const dataTypes = computed(() => {
 		if (allowedFileTypes?.value) {
 			if (!Array.isArray(allowedFileTypes.value)) {
 				return [allowedFileTypes.value]
 			}
 			return allowedFileTypes.value
 		}
 		return null
 	})
 
 	// Accept string computed ref
 	const accept = computed(() => {
 		if (Array.isArray(dataTypes.value)) {
 			return dataTypes.value.join(',')
 		}
 		return '*'
 	})
 
 	// Handling of files drop
 	const onDrop = files => {
 		if (!files || files.length === 0) {
 			return
 		}
@@ -53,20 +54,13 @@
 		}
 		filesList.value = files
 		onFileDrop && onFileDrop()
+		onFileSelect && onFileSelect()
 	}
 
 	const reset = () => {
 		filesList.value = null
 	}
 
-	// const onLeave = () => {
-	// let timer
-	// document.addEventListener('mousemove', () => {
-	// clearTimeout(timer)
-	// timer = setTimeout(isOverDropZone.value = false, 300)
-	// })
-	// }
-
 	const setFiles = (files) => {
 		filesList.value = files
 		publicationStore.setAttachmentFile(null)

src/dialogs/attachment/DeleteAttachmentDialog.vue

@@ -97,6 +97,8 @@ export default {
 								body: JSON.stringify({
 									...publicationStore.publicationItem,
 									attachments: [...this.filterdAttachments],
+									catalogi: publicationStore.publicationItem.catalogi.id,
+									metaData: publicationStore.publicationItem.metaData.id,
 								}),
 							},
 						)

src/dialogs/attachment/DepublishAttachmentDialog.vue

@@ -79,23 +79,22 @@ export default {
 					},
 					body: JSON.stringify(publicationStore.attachmentItem),
 				},
-			)
-				.then((response) => {
-					this.loading = false
-					this.succes = true
+			).then(() => {
+				this.loading = false
+				this.succes = true
 
 					if (publicationStore.publicationItem) {
 						publicationStore.getPublicationAttachments(publicationStore.publicationItem?.id)
 					}
 
-					// Wait for the user to read the feedback then close the model
-					const self = this
-					setTimeout(function() {
-						self.succes = false
-						publicationStore.setAttachmentItem(false)
-						navigationStore.setDialog(false)
-					}, 2000)
-				})
+				// Wait for the user to read the feedback then close the model
+				const self = this
+				setTimeout(function() {
+					self.succes = false
+					publicationStore.setAttachmentItem(false)
+					navigationStore.setDialog(false)
+				}, 2000)
+			})
 				.catch((err) => {
 					this.error = err
 					this.loading = false

src/dialogs/attachment/PublishAttachmentDialog.vue

@@ -60,15 +60,17 @@ export default {
 	},
 	data() {
 		return {
-
 			loading: false,
 			succes: false,
 			error: false,
 		}
 	},
 	methods: {
 		PublishAttachment() {
+			const now = new Date().toISOString()
 			this.loading = true
+			publicationStore.attachmentItem.published = now
+
 			fetch(
 				`/index.php/apps/opencatalogi/api/attachments/${publicationStore.attachmentItem.id}`,
 				{

src/dialogs/publication/ArchivePublicationDialog.vue

@@ -68,8 +68,6 @@ export default {
 		ArchivePublication() {
 			this.loading = true
 			publicationStore.publicationItem.status = 'archived'
-			publicationStore.publicationItem.catalogi = publicationStore.publicationItem?.catalogi?.id?.toString()
-			publicationStore.publicationItem.metaData = publicationStore.publicationItem?.metaData?.id?.toString()
 
 			fetch(
 				`/index.php/apps/opencatalogi/api/publications/${publicationStore.publicationItem.id}`,
@@ -78,7 +76,11 @@ export default {
 					headers: {
 						'Content-Type': 'application/json',
 					},
-					body: JSON.stringify(publicationStore.publicationItem),
+					body: JSON.stringify({
+						...publicationStore.publicationItem,
+						catalogi: publicationStore.publicationItem.catalogi.id,
+						metaData: publicationStore.publicationItem.metaData.id,
+					}),
 				},
 			)
 				.then((response) => {

src/dialogs/publication/DepublishPublicationDialog.vue

@@ -69,8 +69,6 @@ export default {
 			this.loading = true
 			publicationStore.publicationItem.status = 'retracted'
 			publicationStore.publicationItem.published = ''
-			publicationStore.publicationItem.catalogi = publicationStore.publicationItem?.catalogi?.id?.toString()
-			publicationStore.publicationItem.metaData = publicationStore.publicationItem?.metaData?.id?.toString()
 
 			fetch(
 				`/index.php/apps/opencatalogi/api/publications/${publicationStore.publicationItem.id}`,
@@ -79,7 +77,11 @@ export default {
 					headers: {
 						'Content-Type': 'application/json',
 					},
-					body: JSON.stringify(publicationStore.publicationItem),
+					body: JSON.stringify({
+						...publicationStore.publicationItem,
+						catalogi: publicationStore.publicationItem.catalogi.id,
+						metaData: publicationStore.publicationItem.metaData.id,
+					}),
 				},
 			)
 				.then((response) => {

src/dialogs/publication/PublishPublicationDialog.vue

@@ -68,8 +68,6 @@ export default {
 		PublishPublication() {
 			this.loading = true
 			publicationStore.publicationItem.status = 'published'
-			publicationStore.publicationItem.catalogi = publicationStore.publicationItem?.catalogi?.id?.toString()
-			publicationStore.publicationItem.metaData = publicationStore.publicationItem?.metaData?.id?.toString()
 
 			fetch(
 				`/index.php/apps/opencatalogi/api/publications/${publicationStore.publicationItem.id}`,
@@ -78,7 +76,11 @@ export default {
 					headers: {
 						'Content-Type': 'application/json',
 					},
-					body: JSON.stringify(publicationStore.publicationItem),
+					body: JSON.stringify({
+						...publicationStore.publicationItem,
+						catalogi: publicationStore.publicationItem.catalogi.id,
+						metaData: publicationStore.publicationItem.metaData.id,
+					}),
 				},
 			)
 				.then((response) => {

src/dialogs/publicationData/DeletePublicationDataDialog.vue

@@ -67,9 +67,6 @@ export default {
 	methods: {
 		DeleteProperty() {
 			const publication = publicationStore.publicationItem
-			publication.catalogi = publication.catalogi?.id?.toString()
-			publication.metaData = publication.metaData?.id?.toString()
-
 			delete publication?.data[publicationStore.publicationDataKey]
 
 			this.loading = true
@@ -80,7 +77,11 @@ export default {
 					headers: {
 						'Content-Type': 'application/json',
 					},
-					body: JSON.stringify(publication),
+					body: JSON.stringify({
+						...publicationStore.publicationItem,
+						catalogi: publicationStore.publicationItem.catalogi.id,
+						metaData: publicationStore.publicationItem.metaData.id,
+					}),
 				},
 			)
 				.then((response) => {

src/main.js

@@ -11,4 +11,4 @@ new Vue(
 		pinia,
 		render: h => h(App),
 	},
-).$mount('#opencatalogi')
+).$mount('#content')