Polish UX (#100)

resources/js/components/open/forms/OpenForm.vue

@@ -22,9 +22,12 @@
                    class="nf-code w-full px-2 mb-3"
                    v-html="field.content"
               />
-              <div v-if="field.type === 'nf-divider'" :id="field.id" :key="field.id" class="border-b my-4 w-full mx-2"/>
+              <div v-if="field.type === 'nf-divider'" :id="field.id" :key="field.id" 
+                  class="border-b my-4 w-full mx-2"
+              />
               <div v-if="field.type === 'nf-image' && (field.image_block || !isPublicFormPage)" :id="field.id"
-                   :key="field.id" class="my-4 w-full px-2">
+                   :key="field.id" class="my-4 w-full px-2"
+              >
                 <div v-if="!field.image_block" class="p-4 border border-dashed">
                   Open <b>{{ field.name }}'s</b> block settings to upload image.
                 </div>
@@ -381,7 +384,7 @@ export default {
             String(dateObj.getDate()).padStart(2, '0')
           if(field.with_time === true){
             currentDate += 'T' + String(dateObj.getHours()).padStart(2, '0') + ':' +
-            String(dateObj.getMinutes()).padStart(2, '0');
+            String(dateObj.getMinutes()).padStart(2, '0')
           }
           formData[field.id] = currentDate
         } else { // Default prefill if any
@@ -482,17 +485,19 @@ export default {
     },
     previousPage() {
       this.currentFieldGroupIndex -= 1
+      window.scrollTo({ top: 0, behavior: 'smooth' })
       return false
     },
     nextPage() {
       this.currentFieldGroupIndex += 1
+      window.scrollTo({ top: 0, behavior: 'smooth' })
       return false
     }
   }
 }
 </script>
 
-<style lang="scss">
+<style lang='scss'>
 .nf-text {
   ol {
     @apply list-decimal list-inside;

resources/js/components/open/forms/components/form-components/FormInformation.vue

@@ -45,7 +45,7 @@
       <template #title>
         Copy Settings from another form
       </template>
-      <div class="p-4">
+      <div class="p-4 min-h-[450px]">
         <p class="text-gray-600">
           If you already have another form that you like to use as a base for this form, you can do that here.
           Select another form, confirm, and we will copy all of the other form settings (except the form structure)

resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue

@@ -43,6 +43,7 @@
     />
 
     <modal :show="showCopyFormModal" @close="showCopyFormModal = false">
+      <div class="min-h-[450px]">
         <h3 class="font-semibold block text-lg">
           Copy logic from another field
         </h3>
@@ -61,6 +62,7 @@
             Close
           </v-button>
         </div>
+      </div>
     </modal>
   </div>
 </template>
@@ -101,7 +103,7 @@ export default {
   computed: {
     copyFromOptions() {
       return this.form.properties.filter((field) => {
-        return field.id !== this.field.id
+        return field.id !== this.field.id && field.hasOwnProperty('logic') && field.logic !== null && field.logic !== {}
       }).map((field) => {
         return {name: field.name, value: field.id}
       })

resources/js/components/open/forms/components/form-logic-components/GroupControlSlot.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-wrap px-4 py-1 -ml-1 -mt-1">
     <select-input ref="ruleSelect" v-model="selectedRule" class="flex-grow ml-1 mr-1 mt-1"
                   wrapper-class="relative" placeholder="Add condition on input field"
-                  :options="groupCtrl.rules" margin-bottom=""
+                  :options="groupCtrl.rules" margin-bottom="" :searchable="groupCtrl.rules.length > 5"
                   emit-key="identifier"
                   option-key="identifier"
                   name="group-control-slot-rule"