feat: Handled mobile case for Form

packages/nc-gui/components/smartsheet/Form.vue

@@ -36,7 +36,7 @@ const hiddenCols = ['created_at', 'updated_at']
 
 const hiddenColTypes = [UITypes.Rollup, UITypes.Lookup, UITypes.Formula, UITypes.QrCode, UITypes.Barcode, UITypes.SpecificDBType]
 
-const state = useGlobal()
+const { isMobileMode, user } = useGlobal()
 
 const formRef = ref()
 
@@ -281,7 +281,7 @@ function setFormData() {
     data = JSON.parse(formViewData.value?.email || '') || {}
   } catch (e) {}
 
-  emailMe.value = data[state.user.value?.email as string]
+  emailMe.value = data[user.value?.email as string]
 
   localColumns.value = col
     .filter((f) => f.show && !hiddenColTypes.includes(f.uidt))
@@ -314,7 +314,7 @@ async function updateEmail() {
     if (!(await checkSMTPStatus())) return
 
     const data = formViewData.value?.email ? JSON.parse(formViewData.value?.email) : {}
-    data[state.user.value?.email as string] = emailMe.value
+    data[user.value?.email as string] = emailMe.value
     formViewData.value!.email = JSON.stringify(data)
   } catch (e) {}
 }
@@ -387,6 +387,13 @@ watch(view, (nextView) => {
 </script>
 
 <template>
+  <template v-if="isMobileMode">
+    <div class="pl-6 pr-[120px] py-6 bg-white flex-col justify-start items-start gap-2.5 inline-flex">
+      <div class="text-gray-500 text-5xl font-semibold leading-16">Available<br />in Desktop</div>
+      <div class="text-gray-500 text-base font-medium leading-normal">Form View is currently not supported on mobile.</div>
+    </div>
+  </template>
+  <template v-else>
     <a-row v-if="submitted" class="h-full" data-testid="nc-form-wrapper-submit">
       <a-col :span="24">
         <div v-if="formViewData" class="items-center justify-center text-center mt-2">
@@ -486,7 +493,11 @@ watch(view, (nextView) => {
               {{ $t('msg.info.dragDropHide') }}
             </div>
 
-          <a-dropdown v-model:visible="showColumnDropdown" :trigger="['click']" overlay-class-name="nc-dropdown-form-add-column">
+            <a-dropdown
+              v-model:visible="showColumnDropdown"
+              :trigger="['click']"
+              overlay-class-name="nc-dropdown-form-add-column"
+            >
               <button type="button" class="group w-full mt-2" @click.stop="showColumnDropdown = true">
                 <span class="flex items-center flex-wrap justify-center gap-2 prose-sm text-gray-400">
                   <component :is="iconMap.plus" class="color-transition transform group-hover:(text-accent scale-125)" />
@@ -533,7 +544,12 @@ watch(view, (nextView) => {
                   <a-textarea
                     v-model:value="formViewData.heading"
                     class="w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
-                  :style="{ 'borderRightWidth': '0px !important', 'height': '54px', 'min-height': '54px', 'resize': 'vertical' }"
+                    :style="{
+                      'borderRightWidth': '0px !important',
+                      'height': '54px',
+                      'min-height': '54px',
+                      'resize': 'vertical',
+                    }"
                     size="large"
                     hide-details
                     placeholder="Form Title"
@@ -552,7 +568,12 @@ watch(view, (nextView) => {
                   <a-textarea
                     v-model:value="formViewData.subheading"
                     class="w-full !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
-                  :style="{ 'borderRightWidth': '0px !important', 'height': '40px', 'min-height': '40px', 'resize': 'vertical' }"
+                    :style="{
+                      'borderRightWidth': '0px !important',
+                      'height': '40px',
+                      'min-height': '40px',
+                      'resize': 'vertical',
+                    }"
                     size="large"
                     hide-details
                     :placeholder="$t('msg.info.formDesc')"
@@ -831,7 +852,7 @@ watch(view, (nextView) => {
 
                 <!-- Email me at <email> -->
                 <span class="ml-4">
-                {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email }}</span>
+                  {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ user?.email }}</span>
                 </span>
               </div>
             </div>
@@ -839,6 +860,7 @@ watch(view, (nextView) => {
         </a-card>
       </a-col>
     </a-row>
+  </template>
 </template>
 
 <style scoped lang="scss">