matt
/
opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Chirag Chhatrala 2025-01-03 20:39:53 +05:30 committed by GitHub
parent 1285dc18d3
commit 80b7c1e773
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 149 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/components/open/forms/components/form-logic-components/ConditionEditor.client.vue
View File

@ -12,9 +12,9 @@
> >
<template #groupOperator="props"> <template #groupOperator="props">
<div <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 Operator
</p> </p>
<select-input <select-input

175
client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
View File

@ -7,34 +7,29 @@
Select a field, add some conditions, and finally add some actions. Select a field, add some conditions, and finally add some actions.
</p> </p>
<div class="relative flex"> <div class="relative flex">
<div> <UButtonGroup size="xs">
<v-button <UButton
color="light-gray" color="gray"
size="small" icon="i-heroicons-arrow-down-on-square"
@click="showCopyFormModal = true" @click="showCopyFormModal = true"
> >
<Icon
name="lucide:copy"
class="w-4 h-4 text-blue-600 inline mr-1 -mt-1"
/>
Copy from Copy from
</v-button> </UButton>
</div> <UButton
<div> color="gray"
<v-button icon="i-heroicons-arrow-up-on-square"
color="light-gray" @click="showCopyToModal = true"
shade="light" >
size="small" Copy to
class="ml-1" </UButton>
<UButton
color="gray"
icon="i-mdi-clear-outline"
@click="clearAll" @click="clearAll"
> >
<Icon
name="mdi:clear-outline"
class="w-4 h-4 text-red-600 inline mr-1 -mt-1"
/>
Clear Clear
</v-button> </UButton>
</div> </UButtonGroup>
</div> </div>
<h5 class="font-medium text-gray-700 mt-3"> <h5 class="font-medium text-gray-700 mt-3">
@ -63,44 +58,85 @@
/> />
<modal <modal
max-width="sm"
:show="showCopyFormModal" :show="showCopyFormModal"
@close="showCopyFormModal = false" @close="showCopyFormModal = false"
> >
<div class="min-h-[450px]"> <h3 class="font-semibold block text-lg">
<h3 class="font-semibold block text-lg"> Copy logic from another field
Copy logic from another field </h3>
</h3> <p class="text-gray-400 text-xs mb-5">
<p class="text-gray-400 text-xs mb-5"> Select another field/block to copy its logic and apply it to "{{
Select another field/block to copy its logic and apply it to "{{ field.name
field.name }}".
}}". </p>
</p> <select-input
<select-input v-model="copyFrom"
v-model="copyFrom" name="copy_from"
name="copy_from" emit-key="value"
emit-key="value" label="Copy logic from"
label="Copy logic from" placeholder="Choose a field/block..."
placeholder="Choose a field/block..." :options="copyFromOptions"
:options="copyFromOptions" :searchable="copyFromOptions && copyFromOptions.options > 5"
:searchable="copyFromOptions && copyFromOptions.options > 5" />
/> <div class="flex justify-between mt-2">
<div class="flex justify-between mb-6"> <UButton
<v-button color="primary"
color="blue" icon="i-heroicons-check"
shade="light" @click="copyLogic"
@click="copyLogic" >
> Confirm & Copy
Confirm & Copy </UButton>
</v-button> <UButton
<v-button color="gray"
color="gray" icon="i-heroicons-x-mark"
shade="light" class="ml-1"
class="ml-1" @click="showCopyFormModal = false"
@click="showCopyFormModal = false" >
> Close
Close </UButton>
</v-button> </div>
</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> </div>
</modal> </modal>
</div> </div>
@ -135,6 +171,8 @@ export default {
}, },
showCopyFormModal: false, showCopyFormModal: false,
copyFrom: null, copyFrom: null,
showCopyToModal: false,
copyTo: [],
} }
}, },
@ -153,6 +191,15 @@ export default {
return { name: field.name, value: field.id } 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() { actionOptions() {
if ( if (
[ [
@ -273,6 +320,20 @@ export default {
} }
this.showCopyFormModal = false 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> </script>

10
client/components/pages/forms/show/ExtraMenu.vue
View File

@ -10,13 +10,11 @@
v-else v-else
:items="items" :items="items"
> >
<v-button <UButton
color="white" color="white"
> icon="i-heroicons-ellipsis-horizontal"
<Icon size="md"
name="heroicons:ellipsis-horizontal" />
/>
</v-button>
</UDropdown> </UDropdown>
<!-- Delete Form Modal --> <!-- Delete Form Modal -->

106
client/pages/forms/[slug]/show.vue
View File

@ -30,97 +30,41 @@
<h2 class="flex-grow text-gray-900 truncate"> <h2 class="flex-grow text-gray-900 truncate">
{{ form.title }} {{ form.title }}
</h2> </h2>
<div class="flex"> <div class="flex mt-4 gap-2 lg:mt-0">
<extra-menu <UButton
v-if="!workspace.is_readonly"
class="mr-2"
:form="form"
/>
<v-button
v-if="form.visibility === 'draft'" v-if="form.visibility === 'draft'"
color="white" color="white"
class="mr-2 text-blue-600 hidden sm:block" class="hover:no-underline"
icon="i-heroicons-eye"
@click="showDraftFormWarningNotification" @click="showDraftFormWarningNotification"
> >
<svg <span class="hidden sm:inline">View <span class="hidden md:inline">form</span></span>
class="w-6 h-6 inline -mt-1" </UButton>
viewBox="0 0 24 24" <UButton
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
v-else v-else
v-track.view_form_click="{ v-track.view_form_click="{form_id:form.id, form_slug:form.slug}"
form_id: form.id,
form_slug: form.slug,
}"
target="_blank" target="_blank"
:href="form.share_url" :to="form.share_url"
color="white" color="white"
class="mr-2 text-blue-600 hidden sm:block" class="hover:no-underline"
icon="i-heroicons-eye"
> >
<svg <span class="hidden sm:inline">View <span class="hidden md:inline">form</span></span>
class="w-6 h-6 inline -mt-1" </UButton>
viewBox="0 0 24 24" <UButton
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
v-if="!workspace.is_readonly" v-if="!workspace.is_readonly"
class="text-white" v-track.edit_form_click="{form_id: form.id, form_slug: form.slug}"
:to="{ name: 'forms-slug-edit', params: { slug: slug } }" color="primary"
icon="i-heroicons-pencil"
class="hover:no-underline"
:to="{ name: 'forms-slug-edit', params: { slug: form.slug } }"
> >
<svg Edit <span class="hidden md:inline">form</span>
class="inline mr-1 -mt-1" </UButton>
width="18" <extra-menu
height="17" v-if="!workspace.is_readonly"
viewBox="0 0 18 17" :form="form"
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>
</div> </div>
</div> </div>