Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form editor logic copy to x #656

Merged
merged 3 commits into from
Jan 3, 2025
Merged

Form editor logic copy to x #656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d4496fb
Form editor logic copy to x
chiragchhatrala Dec 24, 2024
e046581
Merge branch 'main' into 11fa6-form-editor-logic-copy-to-x
chiragchhatrala Dec 31, 2024
893bf79
Refactor form components to use UButton and UButtonGroup for improved…
chiragchhatrala Dec 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions client/components/open/forms/components/form-logic-components/ConditionEditor.client.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
175 changes: 118 additions & 57 deletions client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -135,6 +171,8 @@ export default {
},
showCopyFormModal: false,
copyFrom: null,
showCopyToModal: false,
copyTo: [],
}
},

Expand All @@ -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 (
[
Expand Down Expand Up @@ -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>
10 changes: 4 additions & 6 deletions client/components/pages/forms/show/ExtraMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
106 changes: 25 additions & 81 deletions client/pages/forms/[slug]/show.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Loading