From d73d0c833f36da1bb831bcd4d205e46b9a384246 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Sun, 21 May 2023 17:28:56 +0200
Subject: [PATCH 1/2] fix: added photo and comment functionality back

---
 web/src/components/images/PhotoMaker.vue     | 48 ++++++++++++++++++--
 web/src/components/models/Photo.ts           |  2 +-
 web/src/components/round/RoundDetailCard.vue |  9 ++--
 web/src/views/round/RoundDetail.vue          | 10 +++-
 4 files changed, 59 insertions(+), 10 deletions(-)

diff --git a/web/src/components/images/PhotoMaker.vue b/web/src/components/images/PhotoMaker.vue
index 4d413d5fc..24374c3c5 100644
--- a/web/src/components/images/PhotoMaker.vue
+++ b/web/src/components/images/PhotoMaker.vue
@@ -13,6 +13,7 @@
         v-if="isPhoto"
         single
         v-model="photo.image"
+        id="upload-progress"
         label="Selecteer afbeelding"
         accept="image/*"
         prepend-icon=""
@@ -38,7 +39,10 @@
       <div class="d-flex mb-4">
         <v-spacer></v-spacer
         ><SimpleButton
-          @click="$emit('confirm', photo, isPhoto)"
+          @click="
+            upload();
+            $emit('update', newProgress?.id);
+          "
           color="primary"
           prepend-icon="mdi-check"
           >Opslaan</SimpleButton
@@ -52,6 +56,10 @@
 import Photo from "@/components/models/Photo";
 import { ref } from "vue";
 import SimpleButton from "@/components/buttons/SimpleButton.vue";
+import { ProgressQuery, Result } from "@selab-2/groep-1-query";
+import { tryOrAlertAsync } from "@/try";
+import { PropType } from "vue";
+import { ProgressImageType } from "@selab-2/groep-1-orm";
 
 const ImageTypes = ["ARRIVAL", "DEPARTURE", "GARBAGE"];
 
@@ -64,16 +72,50 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  currentComments: String,
+  progress: Object as PropType<Result<ProgressQuery>>,
 });
 
+const newProgress = ref<Result<ProgressQuery>>();
+if (props.progress) {
+  newProgress.value = props.progress;
+}
+
 const photo = ref<Photo>({
   image: [],
   comments: "geen commentaar",
   type: "ARRIVAL",
 });
 
+async function upload() {
+  if (props.isPhoto) {
+    await uploadImage();
+  } else {
+    await report();
+  }
+}
+
+async function report() {
+  console.log(props.progress?.id);
+  tryOrAlertAsync(async () => {
+    newProgress.value = await new ProgressQuery().updateOne({
+      id: newProgress.value?.id,
+      report: photo.value.comments,
+    });
+  });
+}
+
+async function uploadImage() {
+  tryOrAlertAsync(async () => {
+    newProgress.value = await new ProgressQuery().createImage(
+      newProgress.value!,
+      "upload-progress",
+      photo.value.type as ProgressImageType,
+      photo.value.comments,
+    );
+  });
+}
+
 if (!props.isPhoto) {
-  photo.value.comments = String(props.currentComments);
+  photo.value.comments = "";
 }
 </script>
diff --git a/web/src/components/models/Photo.ts b/web/src/components/models/Photo.ts
index 131c23489..9e08e8147 100644
--- a/web/src/components/models/Photo.ts
+++ b/web/src/components/models/Photo.ts
@@ -1,6 +1,6 @@
 import { ProgressImageType } from "@selab-2/groep-1-orm";
 
-export default interface Address {
+export default interface Photo {
   image: File[];
   comments: string;
   type: ProgressImageType;
diff --git a/web/src/components/round/RoundDetailCard.vue b/web/src/components/round/RoundDetailCard.vue
index 776556ab6..ed2aaa2e6 100644
--- a/web/src/components/round/RoundDetailCard.vue
+++ b/web/src/components/round/RoundDetailCard.vue
@@ -187,10 +187,7 @@
               v-for="image in progress?.images"
               :key="image.id"
             >
-              <img
-                src="https://unsplash.com/photos/u_khkgVDmxA/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8Mnx8YmFzZW1lbnR8ZW58MHx8fHwxNjgxNzA5NzIx&force=true&w=640"
-                alt="opvolgfoto"
-              />
+              <img :src="ImgProxy.env.url(image.image)" alt="opvolgfoto" />
               <p style="font-weight: 700; font-size: 14px" class="mt-2">
                 {{ image.type }}
               </p>
@@ -225,6 +222,7 @@ import { ProgressQuery } from "@selab-2/groep-1-query";
 import { useAuthStore } from "@/stores/auth";
 import SimpleButton from "@/components/buttons/SimpleButton.vue";
 import RoundedInfoChip from "@/components/chips/RoundedInfoChip.vue";
+import { ImgProxy } from "@/imgproxy";
 
 const props = defineProps(["entry", "day", "schedule_id"]);
 const progress = ref(
@@ -233,6 +231,9 @@ const progress = ref(
     : undefined,
 );
 
+console.log(progress);
+console.log(progress.value.images);
+
 const isStudent = useAuthStore().auth?.student;
 const canEdit =
   isStudent && new Date(new Date(props.day).setHours(0, 0, 0)) <= new Date();
diff --git a/web/src/views/round/RoundDetail.vue b/web/src/views/round/RoundDetail.vue
index 874e32475..496188cc4 100644
--- a/web/src/views/round/RoundDetail.vue
+++ b/web/src/views/round/RoundDetail.vue
@@ -150,9 +150,14 @@
   <v-overlay v-model="showOverlay" class="align-center justify-center">
     <PhotoMaker
       @cancel="showOverlay = false"
-      @confirm="() => {}"
+      @update="
+        (id) => {
+          showOverlay = false;
+          progressUpdated(id);
+        }
+      "
       :is-photo="overlayIsPhoto"
-      :current-comments="currentProgress?.report"
+      :progress="currentProgress!"
     />
   </v-overlay>
 </template>
@@ -186,6 +191,7 @@ const actions: Button[] = [
     title: "Opmerking toevoegen",
     clicked: () => {
       showOverlay.value = true;
+      setCurrentProgress();
       overlayIsPhoto.value = false;
     },
   },

From 3e68e859402f59d91a56b174373cc9ef91da9103 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Sun, 21 May 2023 17:33:56 +0200
Subject: [PATCH 2/2] fix: lint-build

---
 web/src/components/images/PhotoMaker.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/web/src/components/images/PhotoMaker.vue b/web/src/components/images/PhotoMaker.vue
index 24374c3c5..6d64e69dc 100644
--- a/web/src/components/images/PhotoMaker.vue
+++ b/web/src/components/images/PhotoMaker.vue
@@ -72,13 +72,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  progress: Object as PropType<Result<ProgressQuery>>,
+  progress: { type: Object as PropType<Result<ProgressQuery>>, required: true },
 });
 
-const newProgress = ref<Result<ProgressQuery>>();
-if (props.progress) {
-  newProgress.value = props.progress;
-}
+const newProgress = ref<Result<ProgressQuery>>(props.progress);
 
 const photo = ref<Photo>({
   image: [],