src/components/lists/EditList.vue

@@ -41,9 +41,8 @@
 			</div>
 		</div>
 
-		<manageusers :id="list.id" type="list" :userIsAdmin="userIsAdmin" />
-
-		<manageteams :id="list.id" type="list" :userIsAdmin="userIsAdmin" />
+		<component :is="manageUsersComponent" :id="list.id" type="list" :userIsAdmin="userIsAdmin"></component>
+		<component :is="manageTeamsComponent" :id="list.id" type="list" :userIsAdmin="userIsAdmin"></component>
 
 		<modal
 				v-if="showDeleteModal"
@@ -63,17 +62,24 @@
 	import message from '../../message'
 	import manageusers from '../sharing/user'
 	import manageteams from '../sharing/team'
+	import ListModel from '../../models/list'
+	import ListService from '../../services/list'
 
     export default {
         name: "EditList",
         data() {
             return {
-                list: {title: '', description:''},
+                list: ListModel,
+				listService: ListService,
+
                 error: '',
                 loading: false,
                 showDeleteModal: false,
 				user: auth.user,
-				userIsAdmin: false,
+				userIsAdmin: false, // FIXME: we should be able to know somehow if the user is admin, not only based on if he's the owner
+
+				manageUsersComponent: '',
+				manageTeamsComponent: '',
             }
         },
 		components: {
@@ -85,10 +91,9 @@
             if (!auth.user.authenticated) {
                 router.push({name: 'home'})
             }
-
-            this.list.id = this.$route.params.id
         },
         created() {
+			this.listService = new ListService()
             this.loadList()
         },
         watch: {
@@ -97,41 +102,38 @@
         },
         methods: {
             loadList() {
-                const cancel = message.setLoading(this)
-
-                HTTP.get(`lists/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
-                    .then(response => {
-                        this.$set(this, 'list', response.data)
-						if (response.data.owner.id === this.user.infos.id) {
+				let list = new ListModel({id: this.$route.params.id})
+				this.listService.get(list)
+					.then(r => {
+						this.$set(this, 'list', r)
+						if (r.owner.id === this.user.infos.id) {
 							this.userIsAdmin = true
 						}
-                        cancel()
-                    })
-                    .catch(e => {
-                        this.handleError(e)
-                    })
+						// This will trigger the dynamic loading of components once we actually have all the data to pass to them
+						this.manageTeamsComponent = 'manageteams'
+						this.manageUsersComponent = 'manageusers'
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
             },
             submit() {
-				const cancel = message.setLoading(this)
-
-                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.'})
-						cancel()
-                    })
-                    .catch(e => {
-                        cancel()
+				this.listService.update(this.list)
+					.then(r => {
+						// 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 === r.id) {
+									this.$set(this.$parent.namespaces[n].lists, l, r)
+								}
+							}
+						}
+						this.handleSuccess({message: 'The list was successfully updated.'})
+					})
+					.catch(e => {
 						this.handleError(e)
-                    })
+					})
             },
             deleteList() {
 				const cancel = message.setLoading(this)

src/services/list.js

@@ -1,5 +1,6 @@
 import AbstractService from './abstractService'
 import ListModel from '../models/list'
+import TaskService from './task'
 
 export default class ListService extends AbstractService {
 	constructor() {
@@ -14,4 +15,12 @@ export default class ListService extends AbstractService {
 	modelFactory(data) {
 		return new ListModel(data)
 	}
+
+	beforeUpdate(model) {
+		let taskService = new TaskService()
+		model.tasks = model.tasks.map(task => {
+			return taskService.beforeUpdate(task)
+		})
+		return model
+	}
 }