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 4 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
Split 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>
<v-container fluid class="textColor--text">
<template v-if="formDetails">
<div class="title d-flex align-center justify-center mb-4">
<div :style="{ background : plugin.title === 'SES' ? '#242f3e' : '' }"
class="mr-1 d-flex align-center justify-center"
:class="{ 'pa-2' : plugin.title === 'SES'}" v-if="plugin.logo">
<img
:src="plugin.logo" height="25">
<v-form v-model="valid">
<template v-if="formDetails">
<div class="title d-flex align-center justify-center mb-4">
<div :style="{ background : plugin.title === 'SES' ? '#242f3e' : '' }"
class="mr-1 d-flex align-center justify-center"
:class="{ 'pa-2' : plugin.title === 'SES'}" v-if="plugin.logo">
<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>
<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>
<v-divider class="mb-7"></v-divider>
<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">
<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>
<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'"
v-for="action in formDetails.actions" @click="doAction(action)"
:key="action.key"
:color="action.key === 'save' ? 'primary' : '' "
>{{ action.label }}
</v-btn>
</div>
</template>
<div class="d-flex mb-4 mt-7 justify-center">
<v-btn small
:outlined="action.key !== 'save'"
v-for="action in formDetails.actions" @click="doAction(action)"
:key="action.key"
:color="action.key === 'save' ? 'primary' : '' "
:disabled="action.key === 'save' && !valid"
>{{ action.label }}
</v-btn>
</div>
</template>
</v-form>
</v-container>
</template>
@ -81,13 +84,14 @@ import FormInput from "@/components/project/appStore/FormInput";
export default {
name: "appInstall",
components: {FormInput},
props: ['title','defaultConfig'],
props: ['title', 'defaultConfig'],
data: () => ({
plugin: null,
formDetails: null,
settings: null,
pluginId: null,
title: null
title: null,
valid: null
}),
methods: {
simpleAnim() {
@ -201,42 +205,48 @@ export default {
<style scoped lang="scss">
::v-deep {
input,
select,
textarea {
border: 1px solid #7f828b33;
padding: 1px 5px;
font-size: .8rem;
border-radius: 4px;
&:focus {
border: 1px solid var(--v-primary-base);
}
&:hover:not(:focus) {
box-shadow: 0 0 2px dimgrey;
}
}
input, textarea {
min-width: 300px;
}
//input,
//select,
//textarea {
// border: 1px solid #7f828b33;
// padding: 1px 5px;
// font-size: .8rem;
// border-radius: 4px;
//
// &:focus {
// border: 1px solid var(--v-primary-base);
// }
//
// &:hover:not(:focus) {
// box-shadow: 0 0 2px dimgrey;
// }
//}
//
//
//input, textarea {
// min-width: 300px;
//}
}
.form-grid {
display: grid;
grid-template-columns:auto auto;
column-gap: 10px;
row-gap: 20px
row-gap: 20px;
align-items: center;
}
.form-table {
border: none;
min-width: 400px;
}
tbody tr:nth-of-type(odd) {
background-color: transparent;
}
.form-input-label{
padding-bottom: 16px;
}
</style>

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

@ -1,8 +1,13 @@
<template>
<textarea
:placeholder="inputDetails.placeholder || ''"
v-on="parentListeners" v-model="localState" class="caption" rows="3"
></textarea>
<v-textarea
dense
outlined
: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>

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

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

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

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

Write Preview
Loading…
Cancel
Save