From 80b7c1e773177df7665f2748abf61c490cd4dbb5 Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com>
Date: Fri, 3 Jan 2025 20:39:53 +0530
Subject: [PATCH] Form editor logic copy to x (#656)

* Form editor logic copy to x

* Refactor form components to use UButton and UButtonGroup for improved consistency and styling
---
 .../ConditionEditor.client.vue                |   4 +-
 .../FormBlockLogicEditor.vue                  | 175 ++++++++++++------
 .../components/pages/forms/show/ExtraMenu.vue |  10 +-
 client/pages/forms/[slug]/show.vue            | 106 +++--------
 4 files changed, 149 insertions(+), 146 deletions(-)

diff --git a/client/components/open/forms/components/form-logic-components/ConditionEditor.client.vue b/client/components/open/forms/components/form-logic-components/ConditionEditor.client.vue
index 7eb24296b..44ea0b238 100644
--- a/client/components/open/forms/components/form-logic-components/ConditionEditor.client.vue
+++ b/client/components/open/forms/components/form-logic-components/ConditionEditor.client.vue
@@ -12,9 +12,9 @@
     >
       <template #groupOperator="props">
         <div
-          class="query-builder-group-slot__group-selection flex items-center px-5 border-b py-1 mb-"
+          class="query-builder-group-slot__group-selection flex items-center px-5 border-b py-1"
         >
-          <p class="mr-2 font-semibold">
+          <p class="mr-2 mt-1 font-semibold">
             Operator
           </p>
           <select-input
diff --git a/client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue b/client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
index 05d245d9e..628981591 100644
--- a/client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
+++ b/client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
@@ -7,34 +7,29 @@
       Select a field, add some conditions, and finally add some actions.
     </p>
     <div class="relative flex">
-      <div>
-        <v-button
-          color="light-gray"
-          size="small"
+      <UButtonGroup size="xs">
+        <UButton
+          color="gray"
+          icon="i-heroicons-arrow-down-on-square"
           @click="showCopyFormModal = true"
         >
-          <Icon
-            name="lucide:copy"
-            class="w-4 h-4 text-blue-600 inline mr-1 -mt-1"
-          />
           Copy from
-        </v-button>
-      </div>
-      <div>
-        <v-button
-          color="light-gray"
-          shade="light"
-          size="small"
-          class="ml-1"
+        </UButton>
+        <UButton
+          color="gray"
+          icon="i-heroicons-arrow-up-on-square"
+          @click="showCopyToModal = true"
+        >
+          Copy to
+        </UButton>
+        <UButton
+          color="gray"
+          icon="i-mdi-clear-outline"
           @click="clearAll"
         >
-          <Icon
-            name="mdi:clear-outline"
-            class="w-4 h-4 text-red-600 inline mr-1 -mt-1"
-          />
           Clear
-        </v-button>
-      </div>
+        </UButton>
+      </UButtonGroup>
     </div>
 
     <h5 class="font-medium text-gray-700 mt-3">
@@ -63,44 +58,85 @@
     />
 
     <modal
+      max-width="sm"
+      
       :show="showCopyFormModal"
       @close="showCopyFormModal = false"
     >
-      <div class="min-h-[450px]">
-        <h3 class="font-semibold block text-lg">
-          Copy logic from another field
-        </h3>
-        <p class="text-gray-400 text-xs 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>
+      <h3 class="font-semibold block text-lg">
+        Copy logic from another field
+      </h3>
+      <p class="text-gray-400 text-xs 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 mt-2">
+        <UButton
+          color="primary"
+          icon="i-heroicons-check"
+          @click="copyLogic"
+        >
+          Confirm & Copy
+        </UButton>
+        <UButton
+          color="gray"
+          icon="i-heroicons-x-mark"
+          class="ml-1"
+          @click="showCopyFormModal = false"
+        >
+          Close
+        </UButton>
+      </div>
+    </modal>
+
+
+    <modal
+      max-width="sm"
+      :show="showCopyToModal"
+      @close="showCopyToModal = false"
+    >
+      <h3 class="font-semibold block text-lg">
+        Copy logic to other fields
+      </h3>
+      <p class="text-gray-400 text-xs mb-5">
+        Select fields to copy the logic from "{{ field.name }}" to them.
+      </p>
+      <select-input
+        v-model="copyTo"
+        name="copy_to"
+        emit-key="value"
+        label="Copy logic to"
+        placeholder="Choose fields..."
+        :options="copyToOptions"
+        :multiple="true"
+        :searchable="copyToOptions && copyToOptions.length > 5"
+      />
+      <div class="flex justify-between mt-2">
+        <UButton
+          color="primary"
+          icon="i-heroicons-check"
+          @click="copyLogicToFields"
+        >
+          Confirm & Copy
+        </UButton>
+        <UButton
+          color="gray"
+          icon="i-heroicons-x-mark"
+          class="ml-1"
+          @click="showCopyToModal = false"
+        >
+          Close
+        </UButton>
       </div>
     </modal>
   </div>
@@ -135,6 +171,8 @@ export default {
       },
       showCopyFormModal: false,
       copyFrom: null,
+      showCopyToModal: false,
+      copyTo: [],
     }
   },
 
@@ -153,6 +191,15 @@ export default {
           return { name: field.name, value: field.id }
         })
     },
+    copyToOptions() {
+      return this.form.properties
+        .filter((field) => {
+          return field.id !== this.field.id
+        })
+        .map((field) => {
+          return { name: field.name, value: field.id }
+        })
+    },
     actionOptions() {
       if (
         [
@@ -273,6 +320,20 @@ export default {
       }
       this.showCopyFormModal = false
     },
+    copyLogicToFields() {
+      if (this.copyTo.length) {
+        this.copyTo.forEach((fieldId) => {
+          const targetField = this.form.properties.find(
+            (property) => property.id === fieldId
+          )
+          if (targetField) {
+            targetField.logic = clonedeep(this.logic)
+          }
+        })
+      }
+      this.showCopyToModal = false
+      this.copyTo = []
+    },
   },
 }
 </script>
diff --git a/client/components/pages/forms/show/ExtraMenu.vue b/client/components/pages/forms/show/ExtraMenu.vue
index 280ff9b94..64049f87e 100644
--- a/client/components/pages/forms/show/ExtraMenu.vue
+++ b/client/components/pages/forms/show/ExtraMenu.vue
@@ -10,13 +10,11 @@
       v-else
       :items="items"
     >
-      <v-button
+      <UButton
         color="white"
-      >
-        <Icon
-          name="heroicons:ellipsis-horizontal"
-        />
-      </v-button>
+        icon="i-heroicons-ellipsis-horizontal"
+        size="md"
+      />
     </UDropdown>
 
     <!-- Delete Form Modal -->
diff --git a/client/pages/forms/[slug]/show.vue b/client/pages/forms/[slug]/show.vue
index 62cc7a332..39ba10456 100644
--- a/client/pages/forms/[slug]/show.vue
+++ b/client/pages/forms/[slug]/show.vue
@@ -30,97 +30,41 @@
               <h2 class="flex-grow text-gray-900 truncate">
                 {{ form.title }}
               </h2>
-              <div class="flex">
-                <extra-menu
-                  v-if="!workspace.is_readonly"
-                  class="mr-2"
-                  :form="form"
-                />
-
-                <v-button
+              <div class="flex mt-4 gap-2 lg:mt-0">
+                <UButton
                   v-if="form.visibility === 'draft'"
                   color="white"
-                  class="mr-2 text-blue-600 hidden sm:block"
+                  class="hover:no-underline"
+                  icon="i-heroicons-eye"
                   @click="showDraftFormWarningNotification"
                 >
-                  <svg
-                    class="w-6 h-6 inline -mt-1"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                    <path
-                      d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
-                </v-button>
-                <v-button
+                  <span class="hidden sm:inline">View <span class="hidden md:inline">form</span></span>
+                </UButton>
+                <UButton
                   v-else
-                  v-track.view_form_click="{
-                    form_id: form.id,
-                    form_slug: form.slug,
-                  }"
+                  v-track.view_form_click="{form_id:form.id, form_slug:form.slug}"
                   target="_blank"
-                  :href="form.share_url"
+                  :to="form.share_url"
                   color="white"
-                  class="mr-2 text-blue-600 hidden sm:block"
+                  class="hover:no-underline"
+                  icon="i-heroicons-eye"
                 >
-                  <svg
-                    class="w-6 h-6 inline -mt-1"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                    <path
-                      d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
-                </v-button>
-                <v-button
+                  <span class="hidden sm:inline">View <span class="hidden md:inline">form</span></span>
+                </UButton>
+                <UButton
                   v-if="!workspace.is_readonly"
-                  class="text-white"
-                  :to="{ name: 'forms-slug-edit', params: { slug: slug } }"
+                  v-track.edit_form_click="{form_id: form.id, form_slug: form.slug}"
+                  color="primary"
+                  icon="i-heroicons-pencil"
+                  class="hover:no-underline"
+                  :to="{ name: 'forms-slug-edit', params: { slug: form.slug } }"
                 >
-                  <svg
-                    class="inline mr-1 -mt-1"
-                    width="18"
-                    height="17"
-                    viewBox="0 0 18 17"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M8.99998 15.6662H16.5M1.5 15.6662H2.89545C3.3031 15.6662 3.50693 15.6662 3.69874 15.6202C3.8688 15.5793 4.03138 15.512 4.1805 15.4206C4.34869 15.3175 4.49282 15.1734 4.78107 14.8852L15.25 4.4162C15.9404 3.72585 15.9404 2.60656 15.25 1.9162C14.5597 1.22585 13.4404 1.22585 12.75 1.9162L2.28105 12.3852C1.9928 12.6734 1.84867 12.8175 1.7456 12.9857C1.65422 13.1348 1.58688 13.2974 1.54605 13.4675C1.5 13.6593 1.5 13.8631 1.5 14.2708V15.6662Z"
-                      stroke="currentColor"
-                      stroke-width="1.67"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
-                  Edit form
-                </v-button>
+                  Edit <span class="hidden md:inline">form</span>
+                </UButton>
+                <extra-menu
+                  v-if="!workspace.is_readonly"
+                  :form="form"
+                />
               </div>
             </div>