From 88d44a1fe78226c6d2ae2709e9cbd9a0653ad75b Mon Sep 17 00:00:00 2001
From: Kuchenpirat <jojow@gmx.net>
Date: Sat, 28 Jun 2025 15:50:57 +0000
Subject: [PATCH] upgade create from image visuals

---
 frontend/assets/css/main.css                  |   4 +
 frontend/components/global/ImageCropper.vue   |  94 ++++++------
 .../pages/g/[groupSlug]/r/create/image.vue    | 143 +++++++-----------
 3 files changed, 107 insertions(+), 134 deletions(-)

diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css
index b421c15eb..37221ee8d 100644
--- a/frontend/assets/css/main.css
+++ b/frontend/assets/css/main.css
@@ -64,3 +64,7 @@ a {
 .fill-height {
   min-height: 100vh;
 }
+
+.vue-simple-handler {
+  background-color: rgb(var(--v-theme-primary)) !important;
+}
diff --git a/frontend/components/global/ImageCropper.vue b/frontend/components/global/ImageCropper.vue
index 8a45a6b61..a23f54b77 100644
--- a/frontend/components/global/ImageCropper.vue
+++ b/frontend/components/global/ImageCropper.vue
@@ -1,48 +1,51 @@
 <template>
-  <v-container class="pa-0">
-    <v-row no-gutters>
-      <v-col
-        cols="8"
-        align-self="center"
-      >
-        <Cropper
-          ref="cropper"
-          class="cropper"
-          :src="img"
-          :default-size="defaultSize"
-          :style="`height: ${cropperHeight}; width: ${cropperWidth};`"
+  <v-card class="ma-0 pt-2" :elevation="4">
+    <v-card-text>
+      <!-- Controls Row (Menu) -->
+      <v-row class="mb-2 mx-1">
+        <v-btn
+          color="error"
+          :icon="$globals.icons.delete"
+          @click="$emit('delete')"
         />
-      </v-col>
-      <v-spacer />
-      <v-col
-        cols="2"
-        align-self="center"
-      >
-        <v-container class="pa-0 mx-0">
-          <v-row
-            v-for="(row, keyRow) in controls"
-            :key="keyRow"
-          >
-            <v-col
-              v-for="(control, keyControl) in row"
-              :key="keyControl"
-              :cols="12 / row.length"
-              class="py-2 mx-0"
-              style="display: flex; align-items: center; justify-content: center;"
-            >
-              <v-btn
-                icon
-                :color="control.color"
-                @click="control.callback()"
-              >
-                <v-icon> {{ control.icon }} </v-icon>
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-col>
-    </v-row>
-  </v-container>
+        <v-spacer />
+        <v-menu offset-y>
+          <template #activator="{ props }">
+            <v-btn color="info" v-bind="props" :icon="$globals.icons.edit" />
+          </template>
+          <v-list>
+            <template v-for="(row, keyRow) in controls" :key="keyRow">
+              <v-list-item-group>
+                <v-list-item
+                  v-for="(control, keyControl) in row"
+                  :key="keyControl"
+                  @click="control.callback()"
+                >
+                  <v-list-item-icon>
+                    <v-icon :color="control.color">
+                      {{ control.icon }}
+                    </v-icon>
+                  </v-list-item-icon>
+                  <v-list-item-content>
+                    <!-- Optionally, you can add a label here if you want -->
+                  </v-list-item-content>
+                </v-list-item>
+              </v-list-item-group>
+            </template>
+          </v-list>
+        </v-menu>
+      </v-row>
+
+      <!-- Image Row -->
+      <Cropper
+        ref="cropper"
+        class="cropper"
+        :src="img"
+        :default-size="defaultSize"
+        :style="`height: ${cropperHeight}; width: ${cropperWidth};`"
+      />
+    </v-card-text>
+  </v-card>
 </template>
 
 <script lang="ts">
@@ -65,9 +68,9 @@ export default defineNuxtComponent({
       default: undefined,
     },
   },
-  emits: ["save"],
+  emits: ["save", "delete"],
   setup(_, context) {
-    const cropper = ref<Cropper>();
+    const cropper = ref<any>();
     const { $globals } = useNuxtApp();
 
     interface Control {
@@ -153,7 +156,6 @@ export default defineNuxtComponent({
   },
 
   methods: {
-    // @ts-expect-error https://advanced-cropper.github.io/vue-advanced-cropper/guides/advanced-recipes.html
     defaultSize({ imageSize, visibleArea }) {
       return {
         width: (visibleArea || imageSize).width,
diff --git a/frontend/pages/g/[groupSlug]/r/create/image.vue b/frontend/pages/g/[groupSlug]/r/create/image.vue
index 2d0f287e8..5285f2867 100644
--- a/frontend/pages/g/[groupSlug]/r/create/image.vue
+++ b/frontend/pages/g/[groupSlug]/r/create/image.vue
@@ -1,86 +1,55 @@
 <template>
   <div>
-    <v-form
-      ref="domUrlForm"
-      @submit.prevent="createRecipe"
-    >
+    <v-form ref="domUrlForm" @submit.prevent="createRecipe">
       <div>
         <v-card-title class="headline">
-          {{ $t('recipe.create-recipe-from-an-image') }}
+          {{ $t("recipe.create-recipe-from-an-image") }}
         </v-card-title>
         <v-card-text>
-          <p>{{ $t('recipe.create-recipe-from-an-image-description') }}</p>
-          <v-container class="pa-0">
-            <v-row>
-              <v-col
-                cols="auto"
-                align-self="center"
-              >
-                <AppButtonUpload
-                  v-if="!uploadedImage"
-                  class="ml-auto"
-                  url="none"
-                  file-name="image"
-                  accept="image/*"
-                  :text="$t('recipe.upload-image')"
-                  :text-btn="false"
-                  :post="false"
-                  @uploaded="uploadImage"
-                />
-                <v-btn
-                  v-if="!!uploadedImage"
-                  color="error"
-                  @click="clearImage"
-                >
-                  <v-icon start>
-                    {{ $globals.icons.close }}
-                  </v-icon>
-                  {{ $t('recipe.remove-image') }}
-                </v-btn>
-              </v-col>
-              <v-spacer />
-            </v-row>
+          <p>{{ $t("recipe.create-recipe-from-an-image-description") }}</p>
+          <v-container class="px-0">
+            <AppButtonUpload
+              class="ml-auto"
+              url="none"
+              file-name="images"
+              accept="image/*"
+              :text="$t('recipe.upload-image')"
+              :text-btn="false"
+              :post="false"
+              @uploaded="uploadImage"
+            />
+
+            <div v-if="uploadedImages.length > 0" class="mt-3">
+              <p class="my-2">
+                {{ $t("recipe.crop-and-rotate-the-image") }}
+              </p>
 
-            <div
-              v-if="uploadedImage && uploadedImagePreviewUrl"
-              class="mt-3"
-            >
               <v-row>
                 <v-col
+                  v-for="(imageUrl, index) in uploadedImagesPreviewUrls"
+                  :key="index"
                   cols="12"
-                  class="pb-0"
+                  sm="6"
+                  lg="4"
+                  xl="3"
                 >
-                  <v-card-text class="pa-0">
-                    <p class="mb-0">
-                      {{ $t('recipe.crop-and-rotate-the-image') }}
-                    </p>
-                  </v-card-text>
-                </v-col>
-              </v-row>
-              <v-row style="max-width: 600px;">
-                <v-spacer />
-                <v-col cols="12">
                   <ImageCropper
-                    :img="uploadedImagePreviewUrl"
-                    cropper-height="50vh"
+                    :img="imageUrl"
+                    cropper-height="100%"
                     cropper-width="100%"
-                    @save="updateUploadedImage"
+                    class="mt-4"
+                    @save="(croppedImage) => updateUploadedImage(index, croppedImage)"
+                    @delete="clearImage(index)"
                   />
                 </v-col>
-                <v-spacer />
               </v-row>
             </div>
           </v-container>
         </v-card-text>
-        <v-card-actions v-if="uploadedImage">
-          <div>
+        <v-card-actions v-if="uploadedImages.length > 0">
+          <div class="w-100 d-flex flex-column align-center">
             <p style="width: 250px">
-              <BaseButton
-                rounded
-                block
-                type="submit"
-                :loading="loading"
-              />
+              <BaseButton rounded block type="submit" :loading="loading" />
             </p>
             <p>
               <v-checkbox
@@ -90,11 +59,8 @@
                 :disabled="loading"
               />
             </p>
-            <p
-              v-if="loading"
-              class="mb-0"
-            >
-              {{ $t('recipe.please-wait-image-procesing') }}
+            <p v-if="loading" class="mb-0">
+              {{ $t("recipe.please-wait-image-procesing") }}
             </p>
           </div>
         </v-card-actions>
@@ -121,55 +87,56 @@ export default defineNuxtComponent({
     const groupSlug = computed(() => route.params.groupSlug || "");
 
     const domUrlForm = ref<VForm | null>(null);
-    const uploadedImage = ref<Blob | File>();
-    const uploadedImageName = ref<string>("");
-    const uploadedImagePreviewUrl = ref<string>();
+    const uploadedImages = ref<(Blob | File)[]>([]);
+    const uploadedImageNames = ref<string[]>([]);
+    const uploadedImagesPreviewUrls = ref<string[]>([]);
     const shouldTranslate = ref(true);
 
     function uploadImage(fileObject: File) {
-      uploadedImage.value = fileObject;
-      uploadedImageName.value = fileObject.name;
-      uploadedImagePreviewUrl.value = URL.createObjectURL(fileObject);
+      uploadedImages.value = [...uploadedImages.value, fileObject];
+      uploadedImageNames.value = [...uploadedImageNames.value, fileObject.name];
+      uploadedImagesPreviewUrls.value = [...uploadedImagesPreviewUrls.value, URL.createObjectURL(fileObject)];
     }
 
-    function updateUploadedImage(fileObject: Blob) {
-      uploadedImage.value = fileObject;
-      uploadedImagePreviewUrl.value = URL.createObjectURL(fileObject);
-    }
+    function clearImage(index: number) {
+      URL.revokeObjectURL(uploadedImagesPreviewUrls.value[index]);
 
-    function clearImage() {
-      uploadedImage.value = undefined;
-      uploadedImageName.value = "";
-      uploadedImagePreviewUrl.value = undefined;
+      uploadedImages.value = uploadedImages.value.filter((_, i) => i !== index);
+      uploadedImageNames.value = uploadedImageNames.value.filter((_, i) => i !== index);
+      uploadedImagesPreviewUrls.value = uploadedImagesPreviewUrls.value.filter((_, i) => i !== index);
     }
 
     async function createRecipe() {
-      if (!uploadedImage.value) {
+      if (uploadedImages.value.length === 0) {
         return;
       }
 
       state.loading = true;
       const translateLanguage = shouldTranslate.value ? i18n.locale : undefined;
-      const { data, error } = await api.recipes.createOneFromImage(uploadedImage.value, uploadedImageName.value, translateLanguage?.value);
+      const { data, error } = await api.recipes.createOneFromImages(uploadedImages.value, translateLanguage?.value);
       if (error || !data) {
         alert.error(i18n.t("events.something-went-wrong"));
         state.loading = false;
       }
       else {
         router.push(`/g/${groupSlug.value}/r/${data}`);
-      };
+      }
+    }
+
+    function updateUploadedImage(index: number, croppedImage: Blob) {
+      uploadedImages.value[index] = croppedImage;
     }
 
     return {
       ...toRefs(state),
       domUrlForm,
-      uploadedImage,
-      uploadedImagePreviewUrl,
+      uploadedImages,
+      uploadedImagesPreviewUrls,
       shouldTranslate,
       uploadImage,
-      updateUploadedImage,
       clearImage,
       createRecipe,
+      updateUploadedImage,
     };
   },
 });