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>
@@ -249,7 +252,7 @@ export default {
   mounted() {
     this.initForm()
 
-    if(window.location.href.includes('auto_submit=true')){
+    if (window.location.href.includes('auto_submit=true')) {
       this.isAutoSubmit = true
       this.submitForm()
     }
@@ -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,23 +43,25 @@
     />
 
     <modal :show="showCopyFormModal" @close="showCopyFormModal = false">
-      <h3 class="font-semibold block text-lg">
-        Copy logic from another field
-      </h3>
-      <p class="text-gray-400 mb-5">
-        Select another field/block to copy its logic and apply it to "{{ field.name }}".
-      </p>
-      <select-input v-model="copyFrom" name="copy_from" emit-key="value"
-                    label="Copy logic from" placeholder="Choose a field/block..."
-                    :options="copyFromOptions" :searchable="copyFromOptions && copyFromOptions.options > 5"
-      />
-      <div class="flex justify-between mb-6">
-        <v-button color="blue" shade="light" @click="copyLogic">
-          Confirm & Copy
-        </v-button>
-        <v-button color="gray" shade="light" class="ml-1" @click="showCopyFormModal=false">
-          Close
-        </v-button>
+      <div class="min-h-[450px]">
+        <h3 class="font-semibold block text-lg">
+          Copy logic from another field
+        </h3>
+        <p class="text-gray-400 mb-5">
+          Select another field/block to copy its logic and apply it to "{{ field.name }}".
+        </p>
+        <select-input v-model="copyFrom" name="copy_from" emit-key="value"
+                      label="Copy logic from" placeholder="Choose a field/block..."
+                      :options="copyFromOptions" :searchable="copyFromOptions && copyFromOptions.options > 5"
+        />
+        <div class="flex justify-between mb-6">
+          <v-button color="blue" shade="light" @click="copyLogic">
+            Confirm & Copy
+          </v-button>
+          <v-button color="gray" shade="light" class="ml-1" @click="showCopyFormModal=false">
+            Close
+          </v-button>
+        </div>
       </div>
     </modal>
   </div>
@@ -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"