Form draft warning (#287)

* feat: add warning to draft form preview button

* warning modal component

* feat: use notification for draft form warning

* fix: remove unused variable

* fix: remove unused variable

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Favour Olayinka 2024-01-29 21:15:16 +01:00 committed by GitHub
parent 0c88c9842a
commit 000b65d4db
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 43 additions and 3 deletions

View File

@ -24,7 +24,25 @@
</svg> </svg>
</v-button> </v-button>
</template> </template>
<a v-if="isMainPage && user" v-track.view_form_click="{form_id:form.id, form_slug:form.slug}" :href="form.share_url" <span v-if="form.visibility === 'draft'"
class="block px-4 py-2 text-md text-gray-700 cursor-pointer dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
@click="showDraftFormWarningNotification"
>
<svg class="w-4 h-4 mr-2" 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>
View form
</span>
<a v-else-if="isMainPage && user" v-track.view_form_click="{form_id:form.id, form_slug:form.slug}" :href="form.share_url"
target="_blank" target="_blank"
class="block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center" class="block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
> >
@ -133,7 +151,6 @@
</div> </div>
</div> </div>
</modal> </modal>
<form-template-modal v-if="!isMainPage && user" :form="form" :show="showFormTemplateModal" @close="showFormTemplateModal=false" /> <form-template-modal v-if="!isMainPage && user" :form="form" :show="showFormTemplateModal" @close="showFormTemplateModal=false" />
</div> </div>
</template> </template>
@ -185,4 +202,8 @@ const deleteForm = () => {
loadingDelete.value = false loadingDelete.value = false
}) })
} }
const showDraftFormWarningNotification = () => {
useAlert().warning('This form is currently in Draft mode and is not publicly accessible, You can change the form status on the edit form page.')
}
</script> </script>

View File

@ -22,7 +22,22 @@
<div class="flex"> <div class="flex">
<extra-menu class="mr-2" :form="form"/> <extra-menu class="mr-2" :form="form"/>
<v-button v-track.view_form_click="{form_id:form.id, form_slug:form.slug}" target="_blank" <v-button v-if="form.visibility === 'draft'" color="white"
class="mr-2 text-blue-600 hidden sm:block" @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 v-else v-track.view_form_click="{form_id:form.id, form_slug:form.slug}" target="_blank"
:href="form.share_url" color="white" :href="form.share_url" color="white"
class="mr-2 text-blue-600 hidden sm:block" class="mr-2 text-blue-600 hidden sm:block"
> >
@ -196,4 +211,8 @@ watch(() => form?.value?.id, (id) => {
const goBack = () => { const goBack = () => {
useRouter().push({name: 'home'}) useRouter().push({name: 'home'})
} }
const showDraftFormWarningNotification = () => {
useAlert().warning('This form is currently in Draft mode and is not publicly accessible, You can change the form status on the edit form page.')
}
</script> </script>