From 67bae3fb17a17aa1e4c0aa6e73d370b2aebdd2c4 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 16 Mar 2023 15:57:09 +0100
Subject: [PATCH] Fix document upload on project page

---
 .../components/portfolio/ProjectEntryForm.vue |  6 +-
 .../components/ui/ButtonWithIconAndText.vue   |  1 +
 .../components/ui/file-upload/FileUpload.vue  |  4 +-
 .../ui/file-upload/SimpleFileUpload.vue       | 70 ++++++++-----------
 .../SimpleFileUploadIconAndText.vue           |  9 ++-
 5 files changed, 39 insertions(+), 51 deletions(-)

diff --git a/client/src/components/portfolio/ProjectEntryForm.vue b/client/src/components/portfolio/ProjectEntryForm.vue
index dc632a76..1767c885 100644
--- a/client/src/components/portfolio/ProjectEntryForm.vue
+++ b/client/src/components/portfolio/ProjectEntryForm.vue
@@ -52,13 +52,13 @@
 </template>
 
 <script>
-import Modal from '@/components/Modal';
-import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
+import Modal from '@/components/Modal.vue';
+import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText.vue';
 
 import { PROJECT_ENTRY_TEMPLATE } from '@/consts/strings.consts';
 
 import { defineAsyncComponent } from 'vue';
-const FileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/FileUpload'));
+const FileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/FileUpload.vue'));
 
 export default {
   props: {
diff --git a/client/src/components/ui/ButtonWithIconAndText.vue b/client/src/components/ui/ButtonWithIconAndText.vue
index 1031fb3b..058f5ef6 100644
--- a/client/src/components/ui/ButtonWithIconAndText.vue
+++ b/client/src/components/ui/ButtonWithIconAndText.vue
@@ -50,6 +50,7 @@ export default {
   cursor: pointer;
   border: 0;
   width: 100%;
+  padding: 1px;
 
   &:disabled {
     background-color: transparent;
diff --git a/client/src/components/ui/file-upload/FileUpload.vue b/client/src/components/ui/file-upload/FileUpload.vue
index 620f8706..7b254e4c 100644
--- a/client/src/components/ui/file-upload/FileUpload.vue
+++ b/client/src/components/ui/file-upload/FileUpload.vue
@@ -19,9 +19,9 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const SimpleFileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUpload'));
+const SimpleFileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUpload.vue'));
 const DocumentBlock = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock')
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock.vue')
 );
 
 export default {
diff --git a/client/src/components/ui/file-upload/SimpleFileUpload.vue b/client/src/components/ui/file-upload/SimpleFileUpload.vue
index 736b4abf..158ff5f9 100644
--- a/client/src/components/ui/file-upload/SimpleFileUpload.vue
+++ b/client/src/components/ui/file-upload/SimpleFileUpload.vue
@@ -8,55 +8,43 @@
   </div>
 </template>
 
-<script>
-import { defineAsyncComponent } from 'vue';
-const SimpleFileUploadHiddenInput = defineAsyncComponent(() =>
-  import('@/components/ui/file-upload/SimpleFileUploadHiddenInput')
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from 'vue';
+export interface Props {
+  value: string;
+  withText: boolean;
+}
+const SimpleFileUploadHiddenInput = defineAsyncComponent(
+  () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput.vue')
 );
-const SimpleFileUploadIcon = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadIcon'));
-const SimpleFileUploadIconAndText = defineAsyncComponent(() =>
-  import('@/components/ui/file-upload/SimpleFileUploadIconAndText')
-);
-const DocumentIcon = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon')
+const SimpleFileUploadIcon = defineAsyncComponent(() => import('@/components/ui/file-upload/SimpleFileUploadIcon.vue'));
+const SimpleFileUploadIconAndText = defineAsyncComponent(
+  () => import('@/components/ui/file-upload/SimpleFileUploadIconAndText.vue')
 );
 
-export default {
-  props: {
-    value: {
-      type: String,
-      default: '',
-    },
-    withText: {
-      type: Boolean,
-      default: false,
-    },
-  },
+const props = withDefaults(defineProps<Props>(), {
+  value: '',
+  withText: false,
+});
 
-  components: {
-    SimpleFileUploadHiddenInput,
-    DocumentIcon,
-    SimpleFileUploadIcon,
-    SimpleFileUploadIconAndText,
-  },
+const button = computed(() => {
+  if (props.withText) {
+    return SimpleFileUploadIconAndText;
+  }
+  return SimpleFileUploadIcon;
+});
 
-  computed: {
-    button() {
-      return this.withText ? 'simple-file-upload-icon-and-text' : 'simple-file-upload-icon';
-    },
-  },
-
-  methods: {
-    clickUploadCare() {
-      // workaround for styling the uploadcare widget
-      let button = this.$el.querySelector('.uploadcare--widget__button');
-      button.click();
-    },
-  },
+const clickUploadCare = () => {
+  // workaround for styling the uploadcare widget
+  let btn: HTMLElement = document.querySelector('.uploadcare--widget__button') as HTMLElement;
+  if (btn) {
+    btn.click();
+  }
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
+// todo: re-add scoped when we're on vite
 @import '~styles/_helpers';
 
 .simple-file-upload {
diff --git a/client/src/components/ui/file-upload/SimpleFileUploadIconAndText.vue b/client/src/components/ui/file-upload/SimpleFileUploadIconAndText.vue
index a89381dc..9d28aa92 100644
--- a/client/src/components/ui/file-upload/SimpleFileUploadIconAndText.vue
+++ b/client/src/components/ui/file-upload/SimpleFileUploadIconAndText.vue
@@ -2,12 +2,11 @@
   <button-with-icon-and-text
     icon="document-icon"
     text="Dokument hochladen"
+    @click="$emit('click')"
   />
 </template>
 
-<script>
-import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
-export default {
-  components: { ButtonWithIconAndText },
-};
+<script setup lang="ts">
+import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText.vue';
+defineEmits(['click']);
 </script>