local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Input length validation for new tasks, lists and namespaces (#70)

Browse source 
Fix input validation for new tasks

Better layout for input validation for new lists

Add input length validation for new namepaces

Add input length validation for new lists

Add input length validation for new tasks

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/70
This commit is contained in:
konrad 2020-03-04 19:27:27 +00:00
parent fe6c859150
commit 2104d1ea4b
3 changed files with 76 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/components/lists/NewList.vue
View file

@ -5,21 +5,29 @@
</icon>
</a>
<h3>Create a new list</h3>
<form @submit.prevent="newList" @keyup.esc="back()">
<div class="field is-grouped">
<p class="control is-expanded" :class="{ 'is-loading': listService.loading}">
<input v-focus class="input" :class="{ 'disabled': listService.loading}" v-model="list.title" type="text" placeholder="The list's name goes here...">
</p>
<p class="control">
<button type="submit" class="button is-success noshadow">
<div class="field is-grouped">
<p class="control is-expanded" :class="{ 'is-loading': listService.loading}">
<input v-focus
class="input"
:class="{ 'disabled': listService.loading}"
v-model="list.title"
type="text"
placeholder="The list's name goes here..."
@keyup.esc="back()"
@keyup.enter="newList()"/>
</p>
<p class="control">
<button class="button is-success noshadow" @click="newList()" :disabled="list.title.length < 3">
<span class="icon is-small">
<icon icon="plus"/>
</span>
Add
</button>
</p>
</div>
</form>
Add
</button>
</p>
</div>
<p class="help is-danger" v-if="showError && list.title.length < 3">
Please specify at least three characters.
</p>
</div>
</template>
@ -33,6 +41,7 @@
name: "NewList",
data() {
return {
showError: false,
list: ListModel,
listService: ListService,
}
@ -50,6 +59,12 @@
},
methods: {
newList() {
if (this.list.title.length < 3) {
this.showError = true
return
}
this.showError = false
this.list.namespaceID = this.$route.params.id
this.listService.create(this.list)
.then(response => {

42
src/components/namespaces/NewNamespace.vue
View file

@ -5,22 +5,31 @@
</icon>
</a>
<h3>Create a new namespace</h3>
<form @submit.prevent="newNamespace" @keyup.esc="back()">
<div class="field is-grouped">
<p class="control is-expanded" v-bind:class="{ 'is-loading': namespaceService.loading}">
<input v-focus class="input" v-bind:class="{ 'disabled': namespaceService.loading}" v-model="namespace.name" type="text" placeholder="The namespace's name goes here...">
</p>
<p class="control">
<button type="submit" class="button is-success noshadow">
<div class="field is-grouped">
<p class="control is-expanded" v-bind:class="{ 'is-loading': namespaceService.loading}">
<input v-focus
class="input"
v-bind:class="{ 'disabled': namespaceService.loading}"
v-model="namespace.name"
type="text"
@keyup.enter="newNamespace()"
@keyup.esc="back()"
placeholder="The namespace's name goes here..."/>
</p>
<p class="control">
<button class="button is-success noshadow" @click="newNamespace()" :disabled="namespace.name.length <= 5">
<span class="icon is-small">
<icon icon="plus"/>
</span>
Add
</button>
</p>
</div>
</form>
<p class="small" v-tooltip.bottom="'A namespace is a collection of lists you can share and use to organize your lists with.<br/>In fact, every list belongs to a namepace.'">What's a namespace?</p>
Add
</button>
</p>
</div>
<p class="help is-danger" v-if="showError && namespace.name.length <= 5">
Please specify at least five characters.
</p>
<p class="small" v-tooltip.bottom="'A namespace is a collection of lists you can share and use to organize your lists with.<br/>In fact, every list belongs to a namepace.'">
What's a namespace?</p>
</div>
</template>
@ -34,6 +43,7 @@
name: "NewNamespace",
data() {
return {
showError: false,
namespace: NamespaceModel,
namespaceService: NamespaceService,
}
@ -51,6 +61,12 @@
},
methods: {
newNamespace() {
if (this.namespace.name.length <= 4) {
this.showError = true
return
}
this.showError = false
this.namespaceService.create(this.namespace)
.then(() => {
this.$parent.loadNamespaces()

28
src/components/tasks/ShowListTasks.vue
View file

@ -31,24 +31,28 @@
</span>
</button>
</div>
<form @submit.prevent="addTask()">
<div class="field is-grouped task-add">
<div class="field task-add">
<div class="field is-grouped">
<p class="control has-icons-left is-expanded" :class="{ 'is-loading': taskService.loading}">
<input v-focus class="input" :class="{ 'disabled': taskService.loading}" v-model="newTaskText" type="text" placeholder="Add a new task...">
<input v-focus class="input" :class="{ 'disabled': taskService.loading}" v-model="newTaskText" type="text" placeholder="Add a new task..." @keyup.enter="addTask()"/>
<span class="icon is-small is-left">
<icon icon="tasks"/>
</span>
</p>
<p class="control">
<button type="submit" class="button is-success">
<span class="icon is-small">
<icon icon="plus"/>
</span>
<button class="button is-success" :disabled="newTaskText.length < 3" @click="addTask()">
<span class="icon is-small">
<icon icon="plus"/>
</span>
Add
</button>
</p>
</div>
</form>
<p class="help is-danger" v-if="showError && newTaskText.length < 3">
Please specify at least three characters.
</p>
</div>
<div class="columns">
<div class="column">
@ -154,6 +158,8 @@
taskEditTask: TaskModel,
newTaskText: '',
showError: false,
showTaskSearch: false,
searchTerm: '',
}
@ -188,6 +194,12 @@
this.loadTasks(page)
},
addTask() {
if (this.newTaskText.length < 3) {
this.showError = true
return
}
this.showError = false
let task = new TaskModel({text: this.newTaskText, listID: this.$route.params.id})
this.taskService.create(task)
.then(r => {