github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Merge pull request #3133 from nocodb/fix/gui-v2-form-layout 

fix(gui-v2): form layout
pull/3134/head
navi 2 years ago committed by GitHub
parent
67334fb7c2 bfbe095d4c
commit
ef3abe5497
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 163 additions and 167 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 330
      packages/nc-gui-v2/components/smartsheet/Form.vue

330
packages/nc-gui-v2/components/smartsheet/Form.vue
Unescape View File

@ -405,185 +405,181 @@ onMounted(async () => {
</Draggable> </Draggable>
</a-col> </a-col>
<a-col v-if="formViewData" :span="isEditable ? 16 : 24" class="h-full overflow-auto scrollbar-thin-primary"> <a-col v-if="formViewData" :span="isEditable ? 16 : 24" class="h-full overflow-auto scrollbar-thin-primary">
<div class="h-[200px]"> <div class="h-[200px] !bg-[#dbdad7]">
<a-card class="h-full !bg-[#dbdad7] ma-0 rounded-b-0 pa-8" body-style="max-width: 700px; margin: 0 auto;"> <!-- for future implementation of cover image -->
<a-form ref="formRef" :model="formState"> </div>
<a-card class="rounded ma-2 py-10 px-5"> <a-card class="h-full ma-0 rounded-b-0 pa-4" body-style="max-width: 700px; margin: 0 auto; margin-top: -200px;">
<!-- Header --> <a-form ref="formRef" :model="formState">
<a-form-item v-if="isEditable" class="ma-0 gap-0 pa-0"> <a-card class="rounded ma-2 py-10 px-5">
<a-input <!-- Header -->
v-model:value="formViewData.heading" <a-form-item v-if="isEditable" class="ma-0 gap-0 pa-0">
class="w-full text-bold text-h3" <a-input
size="large" v-model:value="formViewData.heading"
hide-details class="w-full text-bold text-h3"
placeholder="Form Title" size="large"
:bordered="false" hide-details
@blur="updateView" placeholder="Form Title"
@keydown.enter="updateView" :bordered="false"
/> @blur="updateView"
</a-form-item> @keydown.enter="updateView"
<div v-else class="ml-3 w-full text-bold text-h3">{{ formViewData.heading }}</div> />
<!-- Sub Header --> </a-form-item>
<a-form-item v-if="isEditable" class="ma-0 gap-0 pa-0"> <div v-else class="ml-3 w-full text-bold text-h3">{{ formViewData.heading }}</div>
<a-input <!-- Sub Header -->
v-model:value="formViewData.subheading" <a-form-item v-if="isEditable" class="ma-0 gap-0 pa-0">
class="w-full" <a-input
size="large" v-model:value="formViewData.subheading"
hide-details class="w-full"
:placeholder="$t('msg.info.formDesc')" size="large"
:bordered="false" hide-details
:disabled="!isEditable" :placeholder="$t('msg.info.formDesc')"
@blur="updateView" :bordered="false"
@click="updateView" :disabled="!isEditable"
/> @blur="updateView"
</a-form-item> @click="updateView"
<div v-else class="ml-3 mb-5 w-full text-bold text-h3">{{ formViewData.subheading }}</div> />
<Draggable </a-form-item>
ref="draggableRef" <div v-else class="ml-3 mb-5 w-full text-bold text-h3">{{ formViewData.subheading }}</div>
:list="localColumns" <Draggable
item-key="fk_column_id" ref="draggableRef"
draggable=".item" :list="localColumns"
group="form-inputs" item-key="fk_column_id"
class="h-100" draggable=".item"
@change="onMove($event)" group="form-inputs"
@start="drag = true" class="h-100"
@end="drag = false" @change="onMove($event)"
> @start="drag = true"
<template #item="{ element, index }"> @end="drag = false"
<div class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3" @click="activeRow = element.title"> >
<div class="flex"> <template #item="{ element, index }">
<div class="flex flex-1"> <div class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3" @click="activeRow = element.title">
<div class="flex flex-row"> <div class="flex">
<mdi-drag-vertical class="flex flex-1" /> <div class="flex flex-1">
</div> <div class="flex flex-row">
<SmartsheetHeaderVirtualCell <mdi-drag-vertical class="flex flex-1" />
v-if="isVirtualCol(element)"
:column="{ ...element, title: element.label || element.title }"
:required="isRequired(element, element.required)"
:hide-menu="true"
/>
<SmartsheetHeaderCell
v-else
:column="{ ...element, title: element.label || element.title }"
:required="isRequired(element, element.required)"
:hide-menu="true"
/>
</div>
<div v-if="isUIAllowed('editFormView') && !isRequired(element, element.required)" class="flex">
<mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
</div> </div>
<SmartsheetHeaderVirtualCell
v-if="isVirtualCol(element)"
:column="{ ...element, title: element.label || element.title }"
:required="isRequired(element, element.required)"
:hide-menu="true"
/>
<SmartsheetHeaderCell
v-else
:column="{ ...element, title: element.label || element.title }"
:required="isRequired(element, element.required)"
:hide-menu="true"
/>
</div>
<div v-if="isUIAllowed('editFormView') && !isRequired(element, element.required)" class="flex">
<mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
</div> </div>
<a-form-item </div>
v-if="isVirtualCol(element)" <a-form-item
class="ma-0 gap-0 pa-0" v-if="isVirtualCol(element)"
:name="element.title" class="ma-0 gap-0 pa-0"
:rules="[{ required: element.required, message: `${element.title} is required` }]" :name="element.title"
> :rules="[{ required: element.required, message: `${element.title} is required` }]"
<SmartsheetVirtualCell v-model="formState[element.title]" class="nc-input" :column="element" /> >
<SmartsheetVirtualCell v-model="formState[element.title]" class="nc-input" :column="element" />
</a-form-item>
<a-form-item
v-else
class="ma-0 gap-0 pa-0"
:name="element.title"
:rules="[{ required: element.required, message: `${element.title} is required` }]"
>
<SmartsheetCell v-model="formState[element.title]" class="nc-input" :column="element" :edit-enabled="true" />
</a-form-item>
<div v-if="activeRow === element.title">
<a-form-item class="my-0 w-1/2">
<a-input
v-model:value="element.label"
size="small"
class="form-meta-input !bg-[#dbdbdb]"
:placeholder="$t('msg.info.formInput')"
@change="updateColMeta(element)"
>
</a-input>
</a-form-item> </a-form-item>
<a-form-item <a-form-item class="mt-2 mb-0 w-1/2">
v-else <a-input
class="ma-0 gap-0 pa-0" v-model:value="element.description"
:name="element.title" size="small"
:rules="[{ required: element.required, message: `${element.title} is required` }]" class="form-meta-input !bg-[#dbdbdb] text-sm"
> :placeholder="$t('msg.info.formHelpText')"
<SmartsheetCell @change="updateColMeta(element)"
v-model="formState[element.title]"
class="nc-input"
:column="element"
:edit-enabled="true"
/> />
</a-form-item> </a-form-item>
<div v-if="activeRow === element.title"> <div class="items-center flex">
<a-form-item class="my-0 w-1/2"> <span class="text-sm text-gray-500 mr-2">{{ $t('general.required') }}</span>
<a-input <a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" />
v-model:value="element.label"
size="small"
class="form-meta-input !bg-[#dbdbdb]"
:placeholder="$t('msg.info.formInput')"
@change="updateColMeta(element)"
>
</a-input>
</a-form-item>
<a-form-item class="mt-2 mb-0 w-1/2">
<a-input
v-model:value="element.description"
size="small"
class="form-meta-input !bg-[#dbdbdb] text-sm"
:placeholder="$t('msg.info.formHelpText')"
@change="updateColMeta(element)"
/>
</a-form-item>
<div class="items-center flex">
<span class="text-sm text-gray-500 mr-2">{{ $t('general.required') }}</span>
<a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" />
</div>
</div> </div>
<span class="text-gray-500">{{ element.description }}</span>
</div> </div>
</template> <span class="text-gray-500">{{ element.description }}</span>
<template #footer> </div>
<div </template>
v-if="!localColumns.length" <template #footer>
class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center" <div
> v-if="!localColumns.length"
Drag and drop fields here to add class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"
</div> >
</template> Drag and drop fields here to add
</Draggable> </div>
</template>
<div class="justify-center flex mt-10"> </Draggable>
<a-button class="flex items-center gap-2 !bg-primary text-white rounded" size="large" @click="submitForm">
<!-- Submit --> <div class="justify-center flex mt-10">
{{ $t('general.submit') }} <a-button class="flex items-center gap-2 !bg-primary text-white rounded" size="large" @click="submitForm">
</a-button> <!-- Submit -->
</div> {{ $t('general.submit') }}
</a-card> </a-button>
</a-form> </div>
</a-card>
</a-form>
<div v-if="isEditable" class="mx-10 px-10"> <div v-if="isEditable" class="mx-10 px-10">
<!-- After form is submitted --> <!-- After form is submitted -->
<div class="text-gray-500 mt-4 mb-2"> <div class="text-gray-500 mt-4 mb-2">
{{ $t('msg.info.afterFormSubmitted') }} {{ $t('msg.info.afterFormSubmitted') }}
</div>
<!-- Show this message -->
<label class="text-gray-600 text-bold"> {{ $t('msg.info.showMessage') }}: </label>
<a-textarea v-model:value="formViewData.success_msg" rows="3" hide-details @change="updateView" />
<!-- Other options -->
<div class="mt-4">
<div class="my-4">
<!-- Show "Submit Another Form" button -->
<a-switch
v-model:checked="formViewData.submit_another_form"
v-t="[`a:form-view:submit-another-form`]"
size="small"
@change="updateView"
/>
<span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
</div> </div>
<!-- Show this message -->
<label class="text-gray-600 text-bold"> {{ $t('msg.info.showMessage') }}: </label>
<a-textarea v-model:value="formViewData.success_msg" rows="3" hide-details @change="updateView" />
<!-- Other options -->
<div class="mt-4">
<div class="my-4">
<!-- Show "Submit Another Form" button -->
<a-switch
v-model:checked="formViewData.submit_another_form"
v-t="[`a:form-view:submit-another-form`]"
size="small"
@change="updateView"
/>
<span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
</div>
<div class="my-4"> <div class="my-4">
<!-- Show a blank form after 5 seconds --> <!-- Show a blank form after 5 seconds -->
<a-switch <a-switch
v-model:checked="formViewData.show_blank_form" v-model:checked="formViewData.show_blank_form"
v-t="[`a:form-view:show-blank-form`]" v-t="[`a:form-view:show-blank-form`]"
size="small" size="small"
@change="updateView" @change="updateView"
/> />
<span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span> <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
</div> </div>
<div class="my-4"> <div class="my-4">
<a-switch v-model:checked="emailMe" v-t="[`a:form-view:email-me`]" size="small" @change="onEmailChange" /> <a-switch v-model:checked="emailMe" v-t="[`a:form-view:email-me`]" size="small" @change="onEmailChange" />
<!-- Email me at <email> --> <!-- Email me at <email> -->
<span class="ml-4"> <span class="ml-4">
{{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email }}</span> {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email }}</span>
</span> </span>
</div>
</div> </div>
</div> </div>
</a-card> </div>
</div> </a-card>
</a-col> </a-col>
</a-row> </a-row>
</template> </template>

Write Preview
Loading…
Cancel
Save