From 8420abaae07d22ddecb6e43d77454768ae3fda93 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 2 Mar 2024 07:32:42 +0000
Subject: [PATCH] fix(nc-gui): remove image cropeer restriction and after
 submit form message alignment

---
 packages/nc-gui/components/general/ImageCropper.vue   | 11 ++++-------
 packages/nc-gui/components/smartsheet/Form.vue        | 10 +++-------
 packages/nc-gui/lib/types.ts                          | 10 ++++++++++
 .../index/[typeOrId]/form/[viewId]/index/index.vue    |  8 ++++----
 4 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/general/ImageCropper.vue b/packages/nc-gui/components/general/ImageCropper.vue
index e80e6e238a..954134b8e7 100644
--- a/packages/nc-gui/components/general/ImageCropper.vue
+++ b/packages/nc-gui/components/general/ImageCropper.vue
@@ -5,19 +5,15 @@ import 'vue-advanced-cropper/dist/theme.classic.css'
 
 import type { AttachmentReqType } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg, useApi } from '#imports'
+import type { ImageCropperConfig } from '~/lib'
+
 interface Props {
   imageConfig: {
     src: string
     type: string
     name: string
   }
-  cropperConfig: {
-    stencilProps?: {
-      aspectRatio?: number
-    }
-    minHeight?: number
-    minWidth?: number
-  }
+  cropperConfig: ImageCropperConfig
   uploadConfig?: {
     path?: string
   }
@@ -109,6 +105,7 @@ watch(showCropper, () => {
         :stencil-props="cropperConfig?.stencilProps || {}"
         :min-height="cropperConfig?.minHeight"
         :min-width="cropperConfig?.minWidth"
+        :image-restriction="cropperConfig?.imageRestriction"
       />
       <div v-if="previewImage.src" class="result_preview">
         <img :src="previewImage.src" alt="Preview Image" />
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index dd7afc52c0..d70a9106fe 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -43,6 +43,7 @@ import {
   useViewData,
   watch,
 } from '#imports'
+import type { ImageCropperConfig } from '~/lib'
 
 provide(IsFormInj, ref(true))
 provide(IsGalleryInj, ref(false))
@@ -144,13 +145,7 @@ const imageCropperData = ref<{
     type: string
     name: string
   }
-  cropperConfig: {
-    stencilProps: {
-      aspectRatio?: number
-    }
-    minHeight: number
-    minWidth: number
-  }
+  cropperConfig: ImageCropperConfig
   uploadConfig?: {
     path?: string
   }
@@ -165,6 +160,7 @@ const imageCropperData = ref<{
     stencilProps: {},
     minHeight: 0,
     minWidth: 0,
+    imageRestriction: 'none',
   },
   uploadConfig: {
     path: '',
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index f2ef201cc2..9e898d5a5e 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -207,6 +207,15 @@ interface FormFieldsLimitOptionsType {
   show: boolean
 }
 
+interface ImageCropperConfig {
+  stencilProps?: {
+    aspectRatio?: number
+  }
+  minHeight?: number
+  minWidth?: number
+  imageRestriction?: 'fill-area' | 'fit-area' | 'stencil' | 'none'
+}
+
 export type {
   User,
   ProjectMetaInfo,
@@ -236,4 +245,5 @@ export type {
   CommandPaletteType,
   CalendarRangeType,
   FormFieldsLimitOptionsType,
+  ImageCropperConfig
 }
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
index 7d8b029718..7b527cc138 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
@@ -90,7 +90,7 @@ const onDecode = async (scannedCodeValue: string) => {
       class="transition-all duration-300 ease-in relative flex flex-col justify-center gap-2 w-full my-6 bg-white dark:bg-transparent rounded-3xl border-1 border-gray-200 px-4 py-8 lg:p-12 md:(p-8 dark:bg-slate-700)"
     >
       <template v-if="sharedFormView">
-        <div class="mb-4">
+        <div>
           <h1 class="text-2xl font-bold text-gray-900 mb-4">
             {{ sharedFormView.heading }}
           </h1>
@@ -106,12 +106,12 @@ const onDecode = async (scannedCodeValue: string) => {
           </div>
         </div>
 
-        <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
+        <a-alert v-if="notFound" type="warning" class="!mt-2 !mb-4 text-center" message="Not found" />
 
         <template v-else-if="submitted">
           <div class="flex justify-center">
             <div v-if="sharedFormView" class="w-full">
-              <a-alert class="!my-4 !py-4 text-left !rounded-lg" type="success" outlined>
+              <a-alert class="!mt-2 !mb-4 !py-4 text-left !rounded-lg" type="success" outlined>
                 <template #message>
                   <LazyCellRichText
                     v-if="sharedFormView?.success_msg?.trim()"
@@ -125,7 +125,7 @@ const onDecode = async (scannedCodeValue: string) => {
                 </template>
               </a-alert>
 
-              <p v-if="sharedFormView.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
+              <p v-if="sharedFormView.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 my-4">
                 {{ $t('msg.newFormWillBeLoaded', { seconds: secondsRemain }) }}
               </p>