|
|
|
@ -242,13 +242,13 @@ onMounted(() => { |
|
|
|
class="max-w-[max(33%,600px)] mx-auto flex flex-col justify-end" |
|
|
|
class="max-w-[max(33%,600px)] mx-auto flex flex-col justify-end" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="px-4 md:px-0 flex flex-col justify-end"> |
|
|
|
<div class="px-4 md:px-0 flex flex-col justify-end"> |
|
|
|
<h1 class="prose-2xl font-bold self-center my-4" data-testid="nc-survey-form__heading"> |
|
|
|
<h1 class="text-2xl font-bold text-gray-900 self-center my-4" data-testid="nc-survey-form__heading"> |
|
|
|
{{ sharedFormView.heading }} |
|
|
|
{{ sharedFormView.heading }} |
|
|
|
</h1> |
|
|
|
</h1> |
|
|
|
|
|
|
|
|
|
|
|
<h2 |
|
|
|
<h2 |
|
|
|
v-if="sharedFormView.subheading && sharedFormView.subheading !== ''" |
|
|
|
v-if="sharedFormView.subheading && sharedFormView.subheading !== ''" |
|
|
|
class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6" |
|
|
|
class="text-base font-bold text-gray-500 dark:text-gray-300 self-center mb-4" |
|
|
|
data-testid="nc-survey-form__sub-heading" |
|
|
|
data-testid="nc-survey-form__sub-heading" |
|
|
|
> |
|
|
|
> |
|
|
|
{{ sharedFormView?.subheading }} |
|
|
|
{{ sharedFormView?.subheading }} |
|
|
|
@ -264,24 +264,21 @@ onMounted(() => { |
|
|
|
class="color-transition h-full flex flex-col mt-6 gap-4 w-full max-w-[max(33%,600px)] m-auto" |
|
|
|
class="color-transition h-full flex flex-col mt-6 gap-4 w-full max-w-[max(33%,600px)] m-auto" |
|
|
|
> |
|
|
|
> |
|
|
|
<div v-if="field && !submitted" class="flex flex-col gap-2"> |
|
|
|
<div v-if="field && !submitted" class="flex flex-col gap-2"> |
|
|
|
<div class="flex nc-form-column-label" data-testid="nc-form-column-label"> |
|
|
|
<div class="nc-form-column-label" data-testid="nc-form-column-label"> |
|
|
|
<LazySmartsheetHeaderVirtualCell |
|
|
|
<span> |
|
|
|
v-if="isVirtualCol(field)" |
|
|
|
{{ field.label || field.title }} |
|
|
|
:column="{ ...field, title: field.label || field.title }" |
|
|
|
</span> |
|
|
|
:required="isRequired(field, field.required)" |
|
|
|
<span v-if="isRequired(field, field.required)" class="text-red-500"> *</span> |
|
|
|
:hide-menu="true" |
|
|
|
</div> |
|
|
|
/> |
|
|
|
<div |
|
|
|
|
|
|
|
v-if="field?.description" |
|
|
|
<LazySmartsheetHeaderCell |
|
|
|
class="nc-form-column-description text-gray-500 text-sm" |
|
|
|
v-else |
|
|
|
data-testid="nc-survey-form__field-description" |
|
|
|
:class="field.uidt === UITypes.Checkbox ? 'nc-form-column-label__checkbox' : ''" |
|
|
|
> |
|
|
|
:column="{ meta: {}, ...field, title: field.label || field.title }" |
|
|
|
{{ field?.description }} |
|
|
|
:required="isRequired(field, field.required)" |
|
|
|
|
|
|
|
:hide-menu="true" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<LazySmartsheetDivDataCell v-if="field.title" class="relative"> |
|
|
|
<LazySmartsheetDivDataCell v-if="field.title" class="relative nc-form-data-cell"> |
|
|
|
<LazySmartsheetVirtualCell |
|
|
|
<LazySmartsheetVirtualCell |
|
|
|
v-if="isVirtualCol(field)" |
|
|
|
v-if="isVirtualCol(field)" |
|
|
|
v-model="formState[field.title]" |
|
|
|
v-model="formState[field.title]" |
|
|
|
@ -304,13 +301,6 @@ onMounted(() => { |
|
|
|
<div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500"> |
|
|
|
<div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500"> |
|
|
|
{{ error.$message }} |
|
|
|
{{ error.$message }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
|
|
|
|
class="block text-[14px]" |
|
|
|
|
|
|
|
:class="field.uidt === UITypes.Checkbox ? 'text-center' : ''" |
|
|
|
|
|
|
|
data-testid="nc-survey-form__field-description" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{{ field.description }} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div v-if="field.uidt === UITypes.LongText" class="text-sm text-gray-500 flex flex-wrap items-center"> |
|
|
|
<div v-if="field.uidt === UITypes.LongText" class="text-sm text-gray-500 flex flex-wrap items-center"> |
|
|
|
{{ $t('general.shift') }} <MdiAppleKeyboardShift class="mx-1 text-primary" /> + {{ $t('general.enter') }} |
|
|
|
{{ $t('general.shift') }} <MdiAppleKeyboardShift class="mx-1 text-primary" /> + {{ $t('general.enter') }} |
|
|
|
@ -323,19 +313,18 @@ onMounted(() => { |
|
|
|
<div class="ml-1 mt-4 flex w-full text-lg"> |
|
|
|
<div class="ml-1 mt-4 flex w-full text-lg"> |
|
|
|
<div class="flex-1 flex justify-center"> |
|
|
|
<div class="flex-1 flex justify-center"> |
|
|
|
<div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4"> |
|
|
|
<div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4"> |
|
|
|
<button |
|
|
|
<NcButton |
|
|
|
:class=" |
|
|
|
:class=" |
|
|
|
animationTarget === AnimationTarget.SubmitButton && isAnimating |
|
|
|
animationTarget === AnimationTarget.SubmitButton && isAnimating |
|
|
|
? 'transform translate-y-[1px] translate-x-[1px] ring ring-accent ring-opacity-100' |
|
|
|
? 'transform translate-y-[1px] translate-x-[1px] ring ring-accent ring-opacity-100' |
|
|
|
: '' |
|
|
|
: '' |
|
|
|
" |
|
|
|
" |
|
|
|
type="submit" |
|
|
|
html-type="submit" |
|
|
|
class="uppercase scaling-btn prose-sm" |
|
|
|
|
|
|
|
data-testid="nc-survey-form__btn-submit" |
|
|
|
data-testid="nc-survey-form__btn-submit" |
|
|
|
@click="submit" |
|
|
|
@click="submit" |
|
|
|
> |
|
|
|
> |
|
|
|
{{ $t('general.submit') }} |
|
|
|
{{ $t('general.submit') }} |
|
|
|
</button> |
|
|
|
</NcButton> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div v-else-if="!submitted" class="flex items-center gap-3 flex-col"> |
|
|
|
<div v-else-if="!submitted" class="flex items-center gap-3 flex-col"> |
|
|
|
@ -357,18 +346,20 @@ onMounted(() => { |
|
|
|
]" |
|
|
|
]" |
|
|
|
@click="goNext()" |
|
|
|
@click="goNext()" |
|
|
|
> |
|
|
|
> |
|
|
|
<Transition name="fade"> |
|
|
|
<div class="flex items-center gap-1"> |
|
|
|
<span v-if="!v$.localState[field.title]?.$error" class="uppercase text-white">{{ $t('general.ok') }}</span> |
|
|
|
<Transition name="fade"> |
|
|
|
</Transition> |
|
|
|
<span v-if="!v$.localState[field.title]?.$error" class="uppercase text-white">Ok</span> |
|
|
|
|
|
|
|
</Transition> |
|
|
|
<Transition name="slide-right" mode="out-in"> |
|
|
|
|
|
|
|
<component |
|
|
|
<Transition name="slide-right" mode="out-in"> |
|
|
|
:is="iconMap.closeCircle" |
|
|
|
<component |
|
|
|
v-if="v$.localState[field.title]?.$error || columnValidationError" |
|
|
|
:is="iconMap.closeCircle" |
|
|
|
class="text-red-500 md:text-md" |
|
|
|
v-if="v$.localState[field.title]?.$error || columnValidationError" |
|
|
|
/> |
|
|
|
class="text-red-500 md:text-md" |
|
|
|
<component :is="iconMap.check" v-else class="text-white md:text-md" /> |
|
|
|
/> |
|
|
|
</Transition> |
|
|
|
<component :is="iconMap.check" v-else class="text-white md:text-md" /> |
|
|
|
|
|
|
|
</Transition> |
|
|
|
|
|
|
|
</div> |
|
|
|
</NcButton> |
|
|
|
</NcButton> |
|
|
|
</a-tooltip> |
|
|
|
</a-tooltip> |
|
|
|
|
|
|
|
|
|
|
|
@ -381,19 +372,14 @@ onMounted(() => { |
|
|
|
|
|
|
|
|
|
|
|
<Transition name="slide-left"> |
|
|
|
<Transition name="slide-left"> |
|
|
|
<div v-if="submitted" class="flex flex-col justify-center items-center text-center"> |
|
|
|
<div v-if="submitted" class="flex flex-col justify-center items-center text-center"> |
|
|
|
<div class="text-lg px-6 py-3 bg-green-300 text-gray-700 rounded" data-testid="nc-survey-form__success-msg"> |
|
|
|
<a-alert |
|
|
|
<template v-if="sharedFormView?.success_msg"> |
|
|
|
type="success" |
|
|
|
{{ sharedFormView?.success_msg }} |
|
|
|
class="!my-4 !py-4 text-center !rounded-lg" |
|
|
|
</template> |
|
|
|
data-testid="nc-survey-form__success-msg" |
|
|
|
|
|
|
|
outlined |
|
|
|
<template v-else> |
|
|
|
:message="sharedFormView?.success_msg || $t('msg.info.thankYou')" |
|
|
|
<div class="flex flex-col gap-1"> |
|
|
|
:description="sharedFormView?.success_msg ? undefined : $t('msg.info.submittedFormData')" |
|
|
|
<div>{{ $t('msg.info.thankYou') }}</div> |
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
<div>{{ $t('msg.info.submittedFormData') }}</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div v-if="sharedFormView" class="mt-3"> |
|
|
|
<div v-if="sharedFormView" class="mt-3"> |
|
|
|
<p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4"> |
|
|
|
<p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4"> |
|
|
|
@ -401,7 +387,7 @@ onMounted(() => { |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
|
|
|
|
|
|
|
|
<div v-if="sharedFormView?.submit_another_form" class="text-center"> |
|
|
|
<div v-if="sharedFormView?.submit_another_form" class="text-center"> |
|
|
|
<NcButton type="primary" data-testid="nc-survey-form__btn-submit-another-form" @click="resetForm"> |
|
|
|
<NcButton type="primary" size="medium" data-testid="nc-survey-form__btn-submit-another-form" @click="resetForm"> |
|
|
|
{{ $t('activity.submitAnotherForm') }} |
|
|
|
{{ $t('activity.submitAnotherForm') }} |
|
|
|
</NcButton> |
|
|
|
</NcButton> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -468,7 +454,9 @@ onMounted(() => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Transition> |
|
|
|
</Transition> |
|
|
|
|
|
|
|
|
|
|
|
<GeneralPoweredBy /> |
|
|
|
<div v-if="!parseProp(sharedFormView?.meta)?.hide_branding" class="w-full flex justify-center"> |
|
|
|
|
|
|
|
<GeneralFormBranding class="inline-flex mx-auto" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
@ -494,16 +482,37 @@ onMounted(() => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nc-input { |
|
|
|
.nc-input { |
|
|
|
@apply appearance-none w-full rounded px-2 py-2 my-2 border-solid border-1 border-primary border-opacity-50; |
|
|
|
@apply appearance-none w-full !bg-white !rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500; |
|
|
|
|
|
|
|
&.nc-cell-rating, |
|
|
|
|
|
|
|
&.nc-cell-geodata { |
|
|
|
|
|
|
|
@apply !py-1; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:deep(input) { |
|
|
|
|
|
|
|
@apply !px-1; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
&.nc-cell-longtext { |
|
|
|
|
|
|
|
@apply p-0 h-auto overflow-hidden; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
&:not(.nc-cell-longtext) { |
|
|
|
|
|
|
|
@apply px-2 py-2; |
|
|
|
|
|
|
|
:deep(textarea) { |
|
|
|
|
|
|
|
@apply !p-2; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&.nc-cell-checkbox { |
|
|
|
&.nc-cell-checkbox { |
|
|
|
> * { |
|
|
|
> * { |
|
|
|
@apply justify-center flex items-center; |
|
|
|
@apply justify-center flex items-center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nc-form-data-cell.nc-data-cell { |
|
|
|
|
|
|
|
@apply !border-none rounded-none; |
|
|
|
|
|
|
|
|
|
|
|
input { |
|
|
|
&:focus-within { |
|
|
|
@apply !py-1 !px-1; |
|
|
|
@apply !border-none; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
Ramesh Mane
8 months ago