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

fix(gui): app config form validation 

fix #199

Signed-off-by: Pranav C Balan <pranavxc@gmail.com>
pull/217/head
Pranav C Balan 3 years ago
parent
8b92d6cd7d
commit
640e6c8007
4 changed files with 127 additions and 105 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. 188
      packages/nc-gui/components/project/appStore/appInstall.vue
  2. 13
      packages/nc-gui/components/project/appStore/inputs/longTextField.vue
  3. 22
      packages/nc-gui/components/project/appStore/inputs/passwordField.vue
  4. 9
      packages/nc-gui/components/project/appStore/inputs/textField.vue

188
packages/nc-gui/components/project/appStore/appInstall.vue
Unescape View File

@ -1,77 +1,80 @@
<template> <template>
<v-container fluid class="textColor--text"> <v-container fluid class="textColor--text">
<template v-if="formDetails"> <v-form v-model="valid">
<div class="title d-flex align-center justify-center mb-4"> <template v-if="formDetails">
<div :style="{ background : plugin.title === 'SES' ? '#242f3e' : '' }" <div class="title d-flex align-center justify-center mb-4">
class="mr-1 d-flex align-center justify-center" <div :style="{ background : plugin.title === 'SES' ? '#242f3e' : '' }"
:class="{ 'pa-2' : plugin.title === 'SES'}" v-if="plugin.logo"> class="mr-1 d-flex align-center justify-center"
<img :class="{ 'pa-2' : plugin.title === 'SES'}" v-if="plugin.logo">
:src="plugin.logo" height="25"> <img
:src="plugin.logo" height="25">
</div>
<v-icon
color="#242f3e" size="30" v-else-if="plugin.icon" class="mr-1">{{ plugin.icon }}
</v-icon>
<span @dblclick="copyDefault">{{ formDetails.title }}</span>
</div> </div>
<v-icon
color="#242f3e" size="30" v-else-if="plugin.icon" class="mr-1">{{ plugin.icon }}
</v-icon>
<span @dblclick="copyDefault">{{ formDetails.title }}</span> <v-divider class="mb-7"></v-divider>
</div> <div v-if="formDetails.array">
<table class="form-table mx-auto" >
<thead>
<tr>
<th v-for="(item,i) in formDetails.items" :key="i">
<label class="caption ">{{ item.label }} <span v-if="item.required" class="red--text">*</span></label>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(set,j) in settings" :key="j">
<td v-for="(item,i) in formDetails.items" :key="i">
<form-input :input-details="item" v-model="set[item.key]"></form-input>
</td>
<td v-if="j">
<x-icon small iconClass="pointer" color="error" @click="settings.splice(j,1)">mdi-delete-outline
</x-icon>
</td>
</tr>
<tr>
<td :colspan="formDetails.items.length" class="text-center">
<x-icon iconClass="pointer" @click="settings.push({})">mdi-plus</x-icon>
</td>
</tr>
</tbody>
</table>
<v-divider class="mb-7"></v-divider>
<div v-if="formDetails.array">
<table class="form-table mx-auto"> </div>
<thead>
<tr>
<th v-for="(item,i) in formDetails.items" :key="i">
<label class="caption ">{{ item.label }} <span v-if="item.required" class="red--text">*</span></label>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(set,j) in settings" :key="j">
<td v-for="(item,i) in formDetails.items" :key="i">
<form-input :input-details="item" v-model="set[item.key]"></form-input>
</td>
<td v-if="j">
<x-icon small iconClass="pointer" color="error" @click="settings.splice(j,1)">mdi-delete-outline</x-icon>
</td>
</tr>
<tr>
<td :colspan="formDetails.items.length" class="text-center">
<x-icon iconClass="pointer" @click="settings.push({})">mdi-plus</x-icon>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-grid" v-else>
<template v-for="(item,i) in formDetails.items">
<div :key="i" class="text-right">
<label class="caption ">{{ item.label }} <span v-if="item.required" class="red--text">*</span></label>
</div>
<div :key="i">
<form-input :input-details="item" v-model="settings[item.key]"></form-input>
</div>
</template>
</div>
<div class="d-flex mb-4 mt-7 justify-center"> <div class="form-grid" v-else>
<template v-for="(item,i) in formDetails.items">
<div :key="i" class="text-right form-input-label">
<label class="caption ">{{ item.label }} <span v-if="item.required" class="red--text">*</span></label>
</div>
<div :key="i">
<form-input :input-details="item" v-model="settings[item.key]"></form-input>
</div>
</template>
</div>
<v-btn small
:outlined="action.key !== 'save'" <div class="d-flex mb-4 mt-7 justify-center">
v-for="action in formDetails.actions" @click="doAction(action)" <v-btn small
:key="action.key" :outlined="action.key !== 'save'"
:color="action.key === 'save' ? 'primary' : '' " v-for="action in formDetails.actions" @click="doAction(action)"
>{{ action.label }} :key="action.key"
</v-btn> :color="action.key === 'save' ? 'primary' : '' "
</div> :disabled="action.key === 'save' && !valid"
</template> >{{ action.label }}
</v-btn>
</div>
</template>
</v-form>
</v-container> </v-container>
</template> </template>
@ -81,13 +84,14 @@ import FormInput from "@/components/project/appStore/FormInput";
export default { export default {
name: "appInstall", name: "appInstall",
components: {FormInput}, components: {FormInput},
props: ['title','defaultConfig'], props: ['title', 'defaultConfig'],
data: () => ({ data: () => ({
plugin: null, plugin: null,
formDetails: null, formDetails: null,
settings: null, settings: null,
pluginId: null, pluginId: null,
title: null title: null,
valid: null
}), }),
methods: { methods: {
simpleAnim() { simpleAnim() {
@ -201,42 +205,48 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep { ::v-deep {
input, //input,
select, //select,
textarea { //textarea {
border: 1px solid #7f828b33; // border: 1px solid #7f828b33;
padding: 1px 5px; // padding: 1px 5px;
font-size: .8rem; // font-size: .8rem;
border-radius: 4px; // border-radius: 4px;
//
&:focus { // &:focus {
border: 1px solid var(--v-primary-base); // border: 1px solid var(--v-primary-base);
} // }
//
&:hover:not(:focus) { // &:hover:not(:focus) {
box-shadow: 0 0 2px dimgrey; // box-shadow: 0 0 2px dimgrey;
} // }
} //}
//
//
input, textarea { //input, textarea {
min-width: 300px; // min-width: 300px;
} //}
} }
.form-grid { .form-grid {
display: grid; display: grid;
grid-template-columns:auto auto; grid-template-columns:auto auto;
column-gap: 10px; column-gap: 10px;
row-gap: 20px row-gap: 20px;
align-items: center;
} }
.form-table { .form-table {
border: none; border: none;
min-width: 400px;
} }
tbody tr:nth-of-type(odd) { tbody tr:nth-of-type(odd) {
background-color: transparent; background-color: transparent;
} }
.form-input-label{
padding-bottom: 16px;
}
</style> </style>

13
packages/nc-gui/components/project/appStore/inputs/longTextField.vue
Unescape View File

@ -1,8 +1,13 @@
<template> <template>
<textarea <v-textarea
:placeholder="inputDetails.placeholder || ''" dense
v-on="parentListeners" v-model="localState" class="caption" rows="3" outlined
></textarea> :rules="[v => !!v || !inputDetails.required || 'Required']"
:name="inputDetails.key"
:placeholder="inputDetails.placeholder || ''"
v-on="parentListeners" v-model="localState" class="caption" rows="3"
:required="inputDetails.valid"
></v-textarea>
</template> </template>

22
packages/nc-gui/components/project/appStore/inputs/passwordField.vue
Unescape View File

@ -1,14 +1,16 @@
<template> <template>
<div class="wrapper"> <!--
<input todo : add toggle button
:placeholder="inputDetails.placeholder || ''" -->
:type="show ? 'text' : 'password'" <v-text-field
v-on="parentListeners" v-model="localState" class="caption"> type="password"
<v-icon small class="toggle-icon" @click="show = !show"> dense
outlined
{{ show ? 'visibility_off' : 'visibility' }} :rules="[v => !!v || !inputDetails.required || 'Required']"
</v-icon> :name="inputDetails.key"
</div> :required="inputDetails.valid"
:placeholder="inputDetails.placeholder || ''"
v-on="parentListeners" v-model="localState" class="caption"/>
</template> </template>
<script> <script>

9
packages/nc-gui/components/project/appStore/inputs/textField.vue
Unescape View File

@ -1,7 +1,12 @@
<template> <template>
<input <v-text-field
dense
outlined
:rules="[v => !!v || !inputDetails.required || 'Required']"
:name="inputDetails.key"
:required="inputDetails.valid"
:placeholder="inputDetails.placeholder || ''" :placeholder="inputDetails.placeholder || ''"
v-on="parentListeners" v-model="localState" class="caption"> v-on="parentListeners" v-model="localState" class="caption"/>
</template> </template>
<script> <script>

Write Preview
Loading…
Cancel
Save