From aebaf6fb9a270180f1d09cf568e0699eb4671d37 Mon Sep 17 00:00:00 2001
From: pedrolgois <pedro_gois@hotmail.com>
Date: Sun, 9 Jun 2024 14:07:58 -0300
Subject: [PATCH] feat: allow pdf files to be uploaded on the card. #5

---
 src/components/Checkbox.vue        |  4 ++--
 src/components/Dropzone.vue        |  4 ++--
 src/components/card/CardDetail.vue | 20 +++++++++++++-------
 src/components/list/ListItem.vue   |  4 ++--
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue
index 531af2d..5910ba4 100644
--- a/src/components/Checkbox.vue
+++ b/src/components/Checkbox.vue
@@ -4,7 +4,7 @@
       type="checkbox"
       data-cy="card-checkbox"
       :checked="card.completed"
-      @click.stop="patchCard(card, { completed: !card.completed })"
+      @click.stop="putCard(card, { completed: !card.completed })"
     >
   </label>
 </template>
@@ -19,7 +19,7 @@ defineProps({
     type: Object as PropType<Card>,
   },
 });
-const { patchCard } = useStore();
+const { putCard } = useStore();
 </script>
 
 <style lang="postcss" scoped>
diff --git a/src/components/Dropzone.vue b/src/components/Dropzone.vue
index 47f27fa..567fb24 100644
--- a/src/components/Dropzone.vue
+++ b/src/components/Dropzone.vue
@@ -24,13 +24,13 @@
         for="dropzoneFile"
         class="self-start place-self-center py-1.5 px-3 mt-2 text-gray1 bg-gray-400 cursor-pointer"
         :class="isDragActive && 'bg-gray-800'"
-      >select image</label>
+      >select file</label>
     </div>
     <input
       id="dropzoneFile"
       type="file"
       class="hidden"
-      accept="image/png, image/jpeg"
+      accept="image/png, image/jpeg, application/pdf"
       @input="upload"
     >
   </div>
diff --git a/src/components/card/CardDetail.vue b/src/components/card/CardDetail.vue
index 0985835..97991a3 100644
--- a/src/components/card/CardDetail.vue
+++ b/src/components/card/CardDetail.vue
@@ -131,14 +131,13 @@
             </div>
             <div class="col-span-4 font-bold ">
               <span>{{ activeCard.image.split('&value=')[0].replace(`name=`, '') }}</span>
-              <a
+              <div
                 class="block font-normal underline cursor-pointer"
-                data-cy="image-delete"
-                :href="'/backend' + activeCard.image"
-                download
+                data-cy="image-download"
+                @click="downloadFile(activeCard)"
               >
                 <Download class="inline-block mb-1 w-4" />Download
-              </a>
+              </div>
               <div
                 class="block font-normal underline cursor-pointer"
                 data-cy="image-delete"
@@ -239,8 +238,15 @@ const clickAwayDate = () => {
   showDate.value = false;
 };
 
-function test(event: any){
-console.log(activeCard.value.description)
+function downloadFile(card: Card){
+  if(card.image){
+    const blobUrl = card.image.split('&value=')[1];
+    const link = document.createElement('a');
+    link.href = blobUrl;
+    link.download = card.image.split('&value=')[0].replace('name=', '');
+    link.click();
+    document.body.removeChild(link);
+  }
 }
 
 const updateDate = (data: string) => {
diff --git a/src/components/list/ListItem.vue b/src/components/list/ListItem.vue
index 706be80..eb09ba2 100644
--- a/src/components/list/ListItem.vue
+++ b/src/components/list/ListItem.vue
@@ -66,7 +66,7 @@ const inputActive = ref(false);
 const isDragging = ref(false);
 
 const { lists, loadingListCards } = storeToRefs(useStore());
-const { patchCard, patchList } = useStore();
+const { putCard, patchList } = useStore();
 
 const onClickAway = () => {
   inputActive.value = false;
@@ -79,7 +79,7 @@ const sortCards = () => {
   const listIndex = lists.value.find((l: List) => l.id === props.list.id);
   // trigget PATCH request for every car that was dragged
   lists.value[listIndex].cards.forEach((card: Card, order: Card['order']) => {
-    patchCard(card, { listId: props.list.id, order });
+    putCard(card, { listId: props.list.id, order });
   });
 };
 </script>