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

refactor(gui-v2): v1 form layout

pull/3030/head
Wing-Kam Wong 2 years ago
parent
7d7a715eda
commit
87e0ed413b
1 changed files with 169 additions and 155 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. 324
      packages/nc-gui-v2/components/smartsheet/Form.vue

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

@ -422,170 +422,184 @@ 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">
<a-card class="h-full"> <div class="h-[200px]">
<a-form ref="formRef" :model="formState" class="bg-[#fefefe]"> <a-card class="h-full !bg-[#dbdad7] ma-0 rounded-b-0">
<!-- Header --> <a-form ref="formRef" :model="formState">
<div class="pb-2"> <a-card class="rounded ma-10">
<a-form-item class="ma-0 gap-0 pa-0"> <!-- Header -->
<a-input <a-form-item class="ma-0 gap-0 pa-0">
v-model:value="formViewData.heading" <a-input
class="w-full text-bold text-h3" v-model:value="formViewData.heading"
size="large" class="w-full text-bold text-h3"
hide-details size="large"
placeholder="Form Title" hide-details
:bordered="false" placeholder="Form Title"
@blur="updateView" :bordered="false"
@keydown.enter="updateView" @blur="updateView"
/> @keydown.enter="updateView"
</a-form-item> />
</div> </a-form-item>
<!-- Sub Header --> <!-- Sub Header -->
<a-form-item> <a-form-item>
<a-input <a-input
v-model:value="formViewData.subheading" v-model:value="formViewData.subheading"
class="w-full" class="w-full"
size="large" size="large"
hide-details hide-details
:placeholder="$t('msg.info.formDesc')" :placeholder="$t('msg.info.formDesc')"
:bordered="false" :bordered="false"
@blur="updateView" @blur="updateView"
@click="updateView" @click="updateView"
/> />
</a-form-item> </a-form-item>
<Draggable <Draggable
ref="draggableRef" ref="draggableRef"
:list="localColumns" :list="localColumns"
item-key="fk_column_id" item-key="fk_column_id"
draggable=".item" draggable=".item"
group="form-inputs" group="form-inputs"
class="h-100" class="h-100"
filter=".disable-drag" filter=".disable-drag"
:prevent-on-filter="false" :prevent-on-filter="false"
@change="onMove($event)" @change="onMove($event)"
@start="drag = true" @start="drag = true"
@end="drag = false" @end="drag = false"
>
<template #item="{ element, index }">
<div
class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3"
:class="{ 'disable-drag': isDbRequired(element) || element.required }"
@click="activeRow = element.title"
> >
<div class="flex"> <template #item="{ element, index }">
<div class="flex flex-1"> <div
<SmartsheetHeaderVirtualCell class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3"
:class="{ 'disable-drag': isDbRequired(element) || element.required }"
@click="activeRow = element.title"
>
<div class="flex">
<div class="flex flex-1">
<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
v-if="isVirtualCol(element)" v-if="isVirtualCol(element)"
:column="{ ...element, title: element.label || element.title }" class="ma-0 gap-0 pa-0"
:required="isRequired(element, element.required)" :name="element.title"
:hide-menu="true" :rules="[{ required: element.required, message: `${element.title} is required` }]"
/> >
<SmartsheetHeaderCell <SmartsheetVirtualCell v-model="formState[element.title]" class="nc-input" :column="element" />
</a-form-item>
<a-form-item
v-else v-else
:column="{ ...element, title: element.label || element.title }" class="ma-0 gap-0 pa-0"
:required="isRequired(element, element.required)" :name="element.title"
:hide-menu="true" :rules="[{ required: element.required, message: `${element.title} is required` }]"
/>
</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
v-if="isVirtualCol(element)"
class="ma-0 gap-0 pa-0"
:name="element.title"
:rules="[{ required: element.required, message: `${element.title} is required` }]"
>
<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"
class="form-meta-input !bg-[#dbdbdb]"
:placeholder="$t('msg.info.formInput')"
@change="updateColMeta(element)"
> >
</a-input> <SmartsheetCell
</a-form-item> v-model="formState[element.title]"
<a-form-item class="mt-2 mb-0 w-1/2"> class="nc-input"
<a-input :column="element"
v-model:value="element.description" :edit-enabled="true"
class="form-meta-input !bg-[#dbdbdb]" />
:placeholder="$t('msg.info.formHelpText')" </a-form-item>
@change="updateColMeta(element)" <div v-if="activeRow === element.title">
/> <a-form-item class="my-0 w-1/2">
</a-form-item> <a-input
<div> v-model:value="element.label"
<a-switch class="form-meta-input !bg-[#dbdbdb]"
v-model:checked="element.required" :placeholder="$t('msg.info.formInput')"
class="my-2" @change="updateColMeta(element)"
:checked-children="$t('general.required')" >
un-checked-children="Not Required" </a-input>
@change="updateColMeta(element)" </a-form-item>
/> <a-form-item class="mt-2 mb-0 w-1/2">
<a-input
v-model:value="element.description"
class="form-meta-input !bg-[#dbdbdb]"
:placeholder="$t('msg.info.formHelpText')"
@change="updateColMeta(element)"
/>
</a-form-item>
<div>
<a-switch
v-model:checked="element.required"
class="my-2"
:checked-children="$t('general.required')"
un-checked-children="Not Required"
@change="updateColMeta(element)"
/>
</div>
</div>
<span class="text-gray-500">{{ element.description }}</span>
</div> </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" class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"> >
Drag and drop fields here to add Drag and drop fields here to add
</div> </div>
</template> </template>
</Draggable> </Draggable>
</a-form> </a-card>
</a-form>
<div class="justify-center flex mt-5">
<a-button class="flex items-center gap-2 !bg-primary text-white rounded" size="large" @click="submitForm"> <div class="justify-center flex mt-5">
<!-- Submit --> <a-button class="flex items-center gap-2 !bg-primary text-white rounded" size="large" @click="submitForm">
{{ $t('general.submit') }} <!-- Submit -->
</a-button> {{ $t('general.submit') }}
</div> </a-button>
<!-- After form is submitted -->
<div class="text-gray-500 mt-4 mb-2">
{{ $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`]"
@change="updateView"
/>
<span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
</div> </div>
<div class="my-4"> <!-- After form is submitted -->
<!-- Show a blank form after 5 seconds --> <div class="text-gray-500 mt-4 mb-2">
<a-switch v-model:checked="formViewData.show_blank_form" v-t="[`a:form-view:show-blank-form`]" @change="updateView" /> {{ $t('msg.info.afterFormSubmitted') }}
<span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
</div> </div>
<div class="my-4"> <!-- Show this message -->
<a-switch v-model:checked="emailMe" v-t="[`a:form-view:email-me`]" @change="onEmailChange" /> <label class="text-gray-600 text-bold"> {{ $t('msg.info.showMessage') }}: </label>
<!-- Email me at <email> --> <a-textarea v-model:value="formViewData.success_msg" rows="3" hide-details @change="updateView" />
<span class="ml-4">
{{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email }}</span> <!-- Other options -->
</span> <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`]"
@change="updateView"
/>
<span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
</div>
<div class="my-4">
<!-- Show a blank form after 5 seconds -->
<a-switch
v-model:checked="formViewData.show_blank_form"
v-t="[`a:form-view:show-blank-form`]"
@change="updateView"
/>
<span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
</div>
<div class="my-4">
<a-switch v-model:checked="emailMe" v-t="[`a:form-view:email-me`]" @change="onEmailChange" />
<!-- Email me at <email> -->
<span class="ml-4">
{{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email }}</span>
</span>
</div>
</div> </div>
</div> </a-card>
</a-card> </div>
</a-col> </a-col>
</a-row> </a-row>
</template> </template>

Write Preview
Loading…
Cancel
Save