Browse Source

Merge pull request #3629 from nocodb/fix/3627-shared-form-view-with-password

fix(gui): shared form view with password
pull/3630/head
navi 2 years ago committed by GitHub
parent
commit
90430cf17e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 158
      packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue

158
packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue

@ -36,97 +36,99 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
<div <div
class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)" class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
> >
<general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" /> <template v-if="sharedFormView">
<general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
<h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1> <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
<h2 v-if="sharedFormView.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2> <h2 v-if="sharedFormView.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2>
<a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" /> <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
<template v-else-if="submitted"> <template v-else-if="submitted">
<div class="flex justify-center"> <div class="flex justify-center">
<div v-if="sharedFormView" class="min-w-350px mt-3"> <div v-if="sharedFormView" class="min-w-350px mt-3">
<a-alert <a-alert
type="success" type="success"
class="my-4 text-center" class="my-4 text-center"
outlined outlined
:message="sharedFormView.success_msg || 'Successfully submitted form data'" :message="sharedFormView.success_msg || 'Successfully submitted form data'"
/> />
<p v-if="sharedFormView.show_blank_form" class="text-xs text-gray-500 text-center my-4"> <p v-if="sharedFormView.show_blank_form" class="text-xs text-gray-500 text-center my-4">
New form will be loaded after {{ secondsRemain }} seconds New form will be loaded after {{ secondsRemain }} seconds
</p> </p>
<div v-if="sharedFormView.submit_another_form" class="text-center"> <div v-if="sharedFormView.submit_another_form" class="text-center">
<a-button type="primary" @click="submitted = false"> Submit Another Form</a-button> <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
</div>
</div> </div>
</div> </div>
</div> </template>
</template>
<template v-else-if="sharedFormView">
<template v-else-if="sharedFormView"> <div class="nc-form-wrapper">
<div class="nc-form-wrapper"> <div class="nc-form h-full max-w-3/4 mx-auto">
<div class="nc-form h-full max-w-3/4 mx-auto"> <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col my-6 gap-2">
<div v-for="(field, index) in formColumns" :key="index" class="flex flex-col my-6 gap-2"> <div class="flex nc-form-column-label">
<div class="flex nc-form-column-label"> <SmartsheetHeaderVirtualCell
<SmartsheetHeaderVirtualCell v-if="isVirtualCol(field)"
v-if="isVirtualCol(field)" :column="{ ...field, title: field.label || field.title }"
:column="{ ...field, title: field.label || field.title }" :required="isRequired(field, field.required)"
:required="isRequired(field, field.required)" :hide-menu="true"
:hide-menu="true" />
/>
<SmartsheetHeaderCell
<SmartsheetHeaderCell v-else
v-else :column="{ ...field, title: field.label || field.title }"
:column="{ ...field, title: field.label || field.title }" :required="isRequired(field, field.required)"
:required="isRequired(field, field.required)" :hide-menu="true"
:hide-menu="true" />
/> </div>
<div v-if="isVirtualCol(field)" class="mt-0">
<SmartsheetVirtualCell
class="mt-0 nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field"
/>
<div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
<template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
<div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
{{ error.$message }}
</div>
</template>
</div>
<div v-else class="mt-0">
<SmartsheetCell
v-model="formState[field.title]"
class="nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field"
:edit-enabled="true"
/>
<div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
<template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
<div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
{{ error.$message }}
</div>
</template>
</div>
</div> </div>
<div v-if="isVirtualCol(field)" class="mt-0"> <div class="text-center my-9">
<SmartsheetVirtualCell <button type="submit" class="submit" @click="submitForm">
class="mt-0 nc-input" {{ $t('general.submit') }}
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`" </button>
:column="field"
/>
<div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
<template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
<div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
{{ error.$message }}
</div>
</template>
</div>
<div v-else class="mt-0">
<SmartsheetCell
v-model="formState[field.title]"
class="nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field"
:edit-enabled="true"
/>
<div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
<template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
<div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
{{ error.$message }}
</div>
</template>
</div> </div>
</div> </div>
<div class="text-center my-9">
<button type="submit" class="submit" @click="submitForm">
{{ $t('general.submit') }}
</button>
</div>
</div> </div>
</div> </template>
</template> </template>
<a-modal <a-modal

Loading…
Cancel
Save