Added upload file visable

ConductionNL · Aug 14, 2024 · 378cfd9 · 378cfd9
1 parent c036563
commit 378cfd9
Show file tree

Hide file tree

Showing 9 changed files with 274 additions and 255 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -20,4 +20,7 @@
     "[javascript]": {
         "editor.defaultFormatter": "dbaeumer.vscode-eslint"
     },
+    "[css]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
 }
diff --git a/css/main.css b/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: 15vh;
+  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;
 }
diff --git a/src/composables/UseFileSelection.js b/src/composables/UseFileSelection.js
@@ -4,7 +4,7 @@ import { publicationStore } from './../store/store.js'
 
 /**
  * File selection composable
- * @param options
+ * @param {Array} options
  *
  * Special thanks to Github user adamreisnz for creating most of this file
  * https://github.com/adamreisnz
@@ -19,6 +19,7 @@ export function useFileSelection(options) {
 		allowMultiple,
 		allowedFileTypes,
 		onFileDrop,
+		onFileSelect,
 	} = options
 
 	// Data types computed ref
@@ -53,20 +54,13 @@ export function useFileSelection(options) {
 		}
 		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)

diff --git a/src/dialogs/attachment/DepublishAttachmentDialog.vue b/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)
-					}
+				if (publicationStore.publicationItem) {
+					publicationStore.getPublicationAttachments(publicationStore.publicationItem)
+				}
 
-					// 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

diff --git a/src/dialogs/attachment/PublishAttachmentDialog.vue b/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}`,
 				{

diff --git a/src/main.js b/src/main.js
@@ -11,4 +11,4 @@ new Vue(
 		pinia,
 		render: h => h(App),
 	},
-).$mount('#opencatalogi')
+).$mount('#content')