Modals
10 months ago
skeletons
10 months ago
ActionButton.vue
10 months ago
ActionButtonsSection.vue
10 months ago
Banner.vue
10 months ago
FAQ.vue
10 months ago
FormItem.vue
10 months ago
FormsSection.vue
10 months ago
Hero.vue
10 months ago
PluginEntriesTable.vue
10 months ago
PluginEntry.vue
10 months ago
PluginExpansion.vue
10 months ago
Toggle.vue
10 months ago
UsageCard.vue
10 months ago
UsageCardsRow.vue
10 months ago
UsageCardsSection.vue
10 months ago
FormsSection.vue
107 lines
| 1 | <script setup lang="ts"> |
| 2 | import { computed } from 'vue'; |
| 3 | |
| 4 | import reachOverviewBannerBackground from '@/assets/images/backgrounds/overview-banner-background.png'; |
| 5 | import Banner from '@/components/Banner.vue'; |
| 6 | import PluginEntriesTable from '@/components/PluginEntriesTable.vue'; |
| 7 | import { useModal } from '@/composables/useModal'; |
| 8 | import { useIntegrationsStore } from '@/stores/integrationsStore'; |
| 9 | import { ModalName } from '@/types/enums'; |
| 10 | import type { Form } from '@/types/models'; |
| 11 | import { translate } from '@/utils/translate'; |
| 12 | |
| 13 | const emit = defineEmits<{ |
| 14 | goToPlugin: [id: string]; |
| 15 | disconnectPlugin: [id: string]; |
| 16 | toggleFormStatus: [form: Form, status: boolean]; |
| 17 | viewForm: [form: Form]; |
| 18 | editForm: [form: Form]; |
| 19 | }>(); |
| 20 | |
| 21 | const { openModal } = useModal(); |
| 22 | const integrationsStore = useIntegrationsStore(); |
| 23 | |
| 24 | const handleAddForm = () => { |
| 25 | openModal(ModalName.ADD_FORM_MODAL, {}, { hasCloseButton: true }); |
| 26 | }; |
| 27 | |
| 28 | const isBannerVisible = computed(() => !integrationsStore.isLoading && !integrationsStore.hasAnyForms); |
| 29 | const isTableVisible = computed(() => integrationsStore.isLoading || integrationsStore.hasAnyForms); |
| 30 | const isAddButtonVisible = computed(() => !integrationsStore.isLoading && integrationsStore.hasAnyForms); |
| 31 | </script> |
| 32 | |
| 33 | <template> |
| 34 | <div class="forms-section"> |
| 35 | <div class="forms-section__header"> |
| 36 | <HText as="h1" variant="heading-1"> |
| 37 | {{ translate('hostinger_reach_forms_title') }} |
| 38 | </HText> |
| 39 | <span> |
| 40 | <HButton |
| 41 | v-if="isAddButtonVisible" |
| 42 | variant="outline" |
| 43 | color="neutral" |
| 44 | size="small" |
| 45 | icon-prepend="ic-plus-16" |
| 46 | :is-loading="integrationsStore.isLoading" |
| 47 | @click="handleAddForm" |
| 48 | > |
| 49 | {{ translate('hostinger_reach_forms_add_more_button_text') }} |
| 50 | </HButton> |
| 51 | </span> |
| 52 | </div> |
| 53 | |
| 54 | <Banner |
| 55 | v-if="isBannerVisible" |
| 56 | :title="translate('hostinger_reach_forms_card_title')" |
| 57 | :description="translate('hostinger_reach_forms_card_description')" |
| 58 | :button-text="translate('hostinger_reach_forms_card_button_text')" |
| 59 | :on-button-click="handleAddForm" |
| 60 | :is-button-loading="integrationsStore.isLoading" |
| 61 | :background-image="reachOverviewBannerBackground" |
| 62 | /> |
| 63 | |
| 64 | <PluginEntriesTable |
| 65 | v-if="isTableVisible" |
| 66 | :integrations="integrationsStore.integrations" |
| 67 | :is-loading="integrationsStore.isLoading" |
| 68 | @go-to-plugin="emit('goToPlugin', $event)" |
| 69 | @disconnect-plugin="emit('disconnectPlugin', $event)" |
| 70 | @toggle-form-status="(form, status) => emit('toggleFormStatus', form, status)" |
| 71 | @view-form="emit('viewForm', $event)" |
| 72 | @edit-form="emit('editForm', $event)" |
| 73 | /> |
| 74 | </div> |
| 75 | </template> |
| 76 | |
| 77 | <style scoped lang="scss"> |
| 78 | .forms-section { |
| 79 | display: flex; |
| 80 | flex-direction: column; |
| 81 | align-self: stretch; |
| 82 | gap: 20px; |
| 83 | |
| 84 | &__header { |
| 85 | display: flex; |
| 86 | justify-content: space-between; |
| 87 | align-items: center; |
| 88 | align-self: stretch; |
| 89 | } |
| 90 | } |
| 91 | |
| 92 | @media (max-width: 1023px) { |
| 93 | .forms-section { |
| 94 | &__header { |
| 95 | flex-direction: column; |
| 96 | align-items: flex-start; |
| 97 | gap: 12px; |
| 98 | |
| 99 | > :last-child { |
| 100 | align-self: stretch; |
| 101 | justify-content: flex-end; |
| 102 | } |
| 103 | } |
| 104 | } |
| 105 | } |
| 106 | </style> |
| 107 |