Form Editor v2.5 (#599)

* Form Editor v2.5

* Remove log debug

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/forms/components/FormEditor.vue

@@ -4,6 +4,13 @@
     id="form-editor"
     class="relative flex w-full flex-col grow max-h-screen"
   >
+    <!-- Loading overlay -->
+    <div
+      v-if="updateFormLoading"
+      class="absolute inset-0 bg-white bg-opacity-70 z-50 flex items-center justify-center"
+    >
+      <loader class="h-6 w-6 text-blue-500" />
+    </div>
     <div
       class="border-b bg-white md:hidden fixed inset-0 w-full z-50 flex flex-col items-center justify-center"
     >
@@ -175,6 +182,7 @@ export default {
 
   mounted() {
     this.$emit("mounted")
+    this.workingFormStore.activeTab = 0
     useAmplitude().logEvent('form_editor_viewed')
     this.appStore.hideNavbar()
     if (!this.isEdit) {
@@ -292,6 +300,8 @@ export default {
               slug: this.createdFormSlug,
               new_form: response.users_first_form,
             },
+          }).then(() => {
+            this.updateFormLoading = false
           })
         })
         .catch((error) => {
@@ -304,8 +314,6 @@ export default {
             )
             captureException(error)
           }
-        })
-        .finally(() => {
           this.updateFormLoading = false
         })
     },

client/components/open/forms/components/FormEditorNavbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full border-b p-2 flex gap-x-3 items-center bg-white">
+  <div class="w-full border-b p-2 flex gap-x-2 items-center bg-white">
     <a
       v-if="backButton"
       href="#"
@@ -13,38 +13,39 @@
     </a>
 
 
-    <EditableTag
-      v-model="form.title"
-      element="h3"
-      class="font-medium py-1 text-md w-48 text-gray-500 truncate"
+    <UTabs
+      id="form-editor-navbar-tabs"
+      v-model="activeTab"
+      :items="[
+        { label: 'Build' },
+        { label: 'Design'},
+        { label: 'Settings'}
+      ]"
     />
 
-    <UBadge
-      v-if="form.visibility == 'draft'"
-      color="yellow"
-      variant="soft"
-      label="Draft"
-    />
-    <UBadge
-      v-else-if="form.visibility == 'closed'"
-      color="gray"
-      variant="soft"
-      label="Closed"
-    />
-
-    <UndoRedo />
-
     <div class="flex-grow flex justify-center">
-      <UTabs
-        v-model="activeTab"
-        :items="[
-          { label: 'Build' },
-          { label: 'Design'},
-          { label: 'Settings'}
-        ]"
+      <EditableTag
+        id="form-editor-title"
+        v-model="form.title"
+        element="h3"
+        class="font-medium py-1 text-md w-48 text-gray-500 truncate form-editor-title"
+      />
+      <UBadge
+        v-if="form.visibility == 'draft'"
+        color="yellow"
+        variant="soft"
+        label="Draft"
+      />
+      <UBadge
+        v-else-if="form.visibility == 'closed'"
+        color="gray"
+        variant="soft"
+        label="Closed"
       />
     </div>
 
+    <UndoRedo />
+
     <div
       class="flex items-stretch gap-x-2"
     >

client/components/open/forms/components/FormFieldsEditor.vue

@@ -52,7 +52,7 @@
 
               <UTooltip :text="element.hidden ? 'Show Block' : 'Hide Block'">
                 <button
-                  class="hidden cursor-pointer rounded p-1 transition-colors hover:bg-nt-blue-lighter items-center justify-center"
+                  class="hidden !cursor-pointer rounded p-1 transition-colors hover:bg-nt-blue-lighter items-center justify-center"
                   :class="{
                     'text-gray-300 hover:text-blue-500 md:group-hover:flex': !element.hidden,
                     'text-gray-300 hover:text-gray-500 md:flex': element.hidden,

client/components/open/forms/components/form-components/AddFormBlock.vue

@@ -18,7 +18,7 @@
     </div>
 
     <div class="py-2 px-4">
-      <p class="text-sm font-medium my-2">
+      <p class="text-gray-500 text-xs font-medium my-2">
         Input Blocks
       </p>
       <draggable
@@ -34,7 +34,7 @@
       >
         <template #item="{element}">
           <div
-            class="flex hover:bg-gray-50 rounded-md items-center gap-2 p-2"
+            class="flex hover:bg-gray-50 rounded-md items-center gap-2 p-2 group"
             role="button"
             @click.prevent="addBlock(element.name)"
           >

client/components/open/forms/components/form-components/FormEditorPreview.vue

@@ -22,7 +22,7 @@
         <div class="bg-red-500 rounded-full w-2.5 h-2.5" />
         <div class="bg-yellow-500 rounded-full w-2.5 h-2.5" />
         <div class="bg-green-500 rounded-full w-2.5 h-2.5" />
-        <p class="text-sm text-gray-500/70 text-sm ml-4">
+        <p class="text-sm text-gray-500/70 text-sm ml-4 select-none">
           Form Preview
         </p>
         <div class="flex-grow" />

client/components/open/forms/components/templates/QuestionsEditor.vue

@@ -99,7 +99,7 @@
     <has-error
       v-if="hasValidation"
       :form="form"
-      :field="name"
+      :field-id="name"
     />
   </div>
 </template>