Added methods to edit and delete a list
This commit is contained in:
kolaente
parent
2156edfe0b
commit
5900e2fcb8
4 changed files with 158 additions and 3 deletions
141
src/components/lists/EditList.vue
Normal file
141
src/components/lists/EditList.vue
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Edit List
|
||||
</p>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<form @submit.prevent="submit()">
|
||||
<div class="field">
|
||||
<label class="label" for="listtext">List Name</label>
|
||||
<div class="control">
|
||||
<input :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="listtext" placeholder="The list title goes here..." v-model="list.title">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="listdescription">Description</label>
|
||||
<div class="control">
|
||||
<textarea :class="{ 'disabled': loading}" :disabled="loading" class="textarea" placeholder="The lists description goes here..." id="listdescription" v-model="list.description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="columns bigbuttons">
|
||||
<div class="column">
|
||||
<button @click="submit()" class="button is-success is-fullwidth" :class="{ 'is-loading': loading}">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="column is-1">
|
||||
<button @click="showDeleteModal = true" class="button is-danger is-fullwidth" :class="{ 'is-loading': loading}">
|
||||
<span class="icon is-small">
|
||||
<icon icon="trash-alt"/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<modal
|
||||
v-if="showDeleteModal"
|
||||
@close="showDeleteModal = false"
|
||||
v-on:submit="deleteList()">
|
||||
<span slot="header">Delete the list</span>
|
||||
<p slot="text">Are you sure you want to delete this list and all of its contents?
|
||||
<br/>This includes all tasks and <b>CANNOT BE UNDONE!</b></p>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import auth from '../../auth'
|
||||
import router from '../../router'
|
||||
import {HTTP} from '../../http-common'
|
||||
import message from '../../message'
|
||||
|
||||
export default {
|
||||
name: "EditList",
|
||||
data() {
|
||||
return {
|
||||
list: {title: '', description:''},
|
||||
error: '',
|
||||
loading: false,
|
||||
showDeleteModal: false,
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// Check if the user is already logged in, if so, redirect him to the homepage
|
||||
if (!auth.user.authenticated) {
|
||||
router.push({name: 'home'})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadList()
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes
|
||||
'$route': 'loadList'
|
||||
},
|
||||
methods: {
|
||||
loadList() {
|
||||
this.loading = true
|
||||
|
||||
HTTP.get(`lists/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(response => {
|
||||
this.$set(this, 'list', response.data)
|
||||
this.loading = false
|
||||
})
|
||||
.catch(e => {
|
||||
this.handleError(e)
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
this.loading = true
|
||||
|
||||
HTTP.post(`lists/` + this.$route.params.id, this.list, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(response => {
|
||||
// Update the list in the parent
|
||||
for (const n in this.$parent.namespaces) {
|
||||
let lists = this.$parent.namespaces[n].lists
|
||||
for (const l in lists) {
|
||||
if (lists[l].id === response.data.id) {
|
||||
this.$set(this.$parent.namespaces[n].lists, l, response.data)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.handleSuccess({message: 'The list was successfully updated.'})
|
||||
})
|
||||
.catch(e => {
|
||||
this.handleError(e)
|
||||
})
|
||||
},
|
||||
deleteList() {
|
||||
HTTP.delete(`lists/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||
.then(() => {
|
||||
this.handleSuccess({message: 'The list was successfully deleted.'})
|
||||
router.push({name: 'home'})
|
||||
})
|
||||
.catch(e => {
|
||||
this.handleError(e)
|
||||
})
|
||||
},
|
||||
handleError(e) {
|
||||
this.loading = false
|
||||
message.error(e, this)
|
||||
},
|
||||
handleSuccess(e) {
|
||||
this.loading = false
|
||||
message.success(e, this)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bigbuttons{
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,6 +7,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<router-link :to="{ name: 'editList', params: { id: list.id } }" class="icon settings is-medium">
|
||||
<icon icon="cog" size="2x"/>
|
||||
</router-link>
|
||||
<h1>{{ list.title }}</h1>
|
||||
</div>
|
||||
<form @submit.prevent="addTask()">
|
||||
|
|
@ -305,4 +308,9 @@
|
|||
min-height: calc(100% - 1rem);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.settings{
|
||||
float: right;
|
||||
color: rgb(74, 74, 74);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,6 +8,7 @@ import RegisterComponent from '@/components/user/Register'
|
|||
// List Handling
|
||||
import ShowListComponent from '@/components/lists/ShowList'
|
||||
import NewListComponent from '@/components/lists/NewList'
|
||||
import EditListComponent from '@/components/lists/EditList'
|
||||
// Namespace Handling
|
||||
import NewNamespaceComponent from '@/components/namespaces/NewNamespace'
|
||||
import EditNamespaceComponent from '@/components/namespaces/EditNamespace'
|
||||
|
|
@ -36,6 +37,11 @@ export default new Router({
|
|||
name: 'showList',
|
||||
component: ShowListComponent
|
||||
},
|
||||
{
|
||||
path: '/lists/:id/edit',
|
||||
name: 'editList',
|
||||
component: EditListComponent
|
||||
},
|
||||
{
|
||||
path: '/namespaces/:id/list',
|
||||
name: 'newList',
|
||||
|
|
|
|||
6
todo.md
6
todo.md
|
|
@ -9,10 +9,10 @@
|
|||
* [x] Bei jedem Namespace sollte rechts neben dem Namen ein Zahnrad zum Bearbeiten sein, das tauscht dann den view mit der aktuellen Liste
|
||||
* [x] Über Namespaces btn zum neuen Namespace anlegen mit popup zum Namen eingeben
|
||||
* [x] Namespace löschen btn bei bearbeiten
|
||||
* [ ] Listen
|
||||
* [x] Listen
|
||||
* [x] Btn zum Liste hinzufügen
|
||||
* [ ] Zahnrad zum Liste bearbeiten
|
||||
* [ ] Btn zum Liste löschen bei bearbeiten
|
||||
* [x] Zahnrad zum Liste bearbeiten
|
||||
* [x] Btn zum Liste löschen bei bearbeiten
|
||||
* [ ] Tasks:
|
||||
* [x] Oben großes Eingabefeld zum Punkte hinzufügen
|
||||
* [x] Tasks in voller Breite drunter anzeigen
|
||||
|
|
|
|||
Loading…
Reference in a new issue