[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kde-commits
Subject:    [wikitolearn-frontend] src: [WIP] edit mode for courses
From:       Demetrio Carrara <null () kde ! org>
Date:       2018-05-31 20:12:34
Message-ID: E1fOTw2-00077p-4r () code ! kde ! org
[Download RAW message or body]

Git commit 290d0562cfccc0009a767a539211f8665eb9bd41 by Demetrio Carrara.
Committed on 29/05/2018 at 08:45.
Pushed by dcarrara into branch 'master'.

[WIP] edit mode for courses

M  +2    -0    src/App.vue
M  +13   -1    src/api/Api.js
M  +4    -0    src/api/Courses.js
A  +60   -0    src/components/CourseEditor.vue
M  +7    -0    src/store/actions.js
M  +21   -2    src/views/Course.vue

https://commits.kde.org/wikitolearn-frontend/290d0562cfccc0009a767a539211f8665eb9bd41

diff --git a/src/App.vue b/src/App.vue
index c5b44a8..479d493 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,6 +41,8 @@ noscript {
 		background: #fff;
 		margin: 0 auto;
 		right: 30%;
+		border-radius: 50%;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 	}
 
 	@include media-breakpoint-up(md) {
diff --git a/src/api/Api.js b/src/api/Api.js
index 96fd616..f440155 100644
--- a/src/api/Api.js
+++ b/src/api/Api.js
@@ -26,6 +26,7 @@ class ApiClass {
 		this.baseURL = `${config.hostname}/${config.preamble}`
 	}
 
+
 	get(endpoint, options = {}) {
 		endpoint = this._cleanEndpoint(endpoint)
 
@@ -42,7 +43,18 @@ class ApiClass {
 
 		options = Object.assign(options, defaultOptions)
 
-		return Vue.axios.get(`${this.baseURL}/${endpoint}`, data, options)
+		return Vue.axios.post(`${this.baseURL}/${endpoint}`, data, options)
+			.then((response) => {
+				return Promise.resolve(response.data)
+			})
+	}
+
+	patch(endpoint, data = {}, options = {}) {
+		endpoint = this._cleanEndpoint(endpoint)
+
+		options = Object.assign(options, defaultOptions)
+
+		return Vue.axios.patch(`${this.baseURL}/${endpoint}`, data, options)
 			.then((response) => {
 				return Promise.resolve(response.data)
 			})
diff --git a/src/api/Courses.js b/src/api/Courses.js
index dd848a3..b145030 100644
--- a/src/api/Courses.js
+++ b/src/api/Courses.js
@@ -12,6 +12,10 @@ class CoursesClass {
 			return Api.get(`courses?page=${page}`)
 		}
 	}
+
+	patch(courseName, course, options) {
+		return Api.patch(`courses/${courseName}`, course, options)
+	}
 }
 
 export const Courses = new CoursesClass()
diff --git a/src/components/CourseEditor.vue b/src/components/CourseEditor.vue
new file mode 100644
index 0000000..e1ee40a
--- /dev/null
+++ b/src/components/CourseEditor.vue
@@ -0,0 +1,60 @@
+<template lang="pug">
+	.CourseEditor
+		WTLInput.CourseEditor__name(
+			v-model="newCourse.title"
+		)
+		WTLButton(
+			@click="pushChanges"
+		) Confirm changes
+</template>
+
+<style lang="scss">
+@import "~styles/declarations";
+
+.CourseEditor {
+	padding: 2rem;
+}
+</style>
+
+<script>
+import WTLButton from "components/ui/WTLButton"
+import WTLInput from "components/ui/WTLInput"
+
+export default {
+	name: "CourseEditor",
+	components: { WTLInput, WTLButton },
+	data() {
+		return {
+			newCourse: {
+				title: this.course.title
+			}
+		}
+	},
+	props: {
+		course: {
+			type: Object,
+			required: true
+		}
+	},
+	mounted() {
+
+	},
+	methods: {
+		pushChanges() {
+			this.$store.dispatch("PATCH_COURSE", {
+				courseName: this.course._id,
+				course: this.newCourse,
+				options: {
+					headers: {
+						"If-Match": this.course._etag,
+						"Authorization": `bearer ${this.$keycloak.token}`
+					}
+				}
+			}).catch((error) => {
+				console.log(error)
+				return this.$store.commit("SET_ERROR", { error: error })
+			})
+		}
+	}
+}
+</script>
diff --git a/src/store/actions.js b/src/store/actions.js
index 519b5a7..08a8129 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -95,5 +95,12 @@ export const actions = {
 
 	UPDATE_ACTIVE_REQUESTS({ commit }, { add }) {
 		commit("UPDATE_ACTIVE_REQUESTS", { addNewRequest: add })
+	},
+
+	PATCH_COURSE({ commit, dispatch }, { courseName, course, options }) {
+		return Courses.patch(courseName, course, options)
+			.then((response) => {
+				return dispatch("FETCH_COURSE", { courseName })
+			})
 	}
 }
diff --git a/src/views/Course.vue b/src/views/Course.vue
index 51f6c6d..033e0c6 100644
--- a/src/views/Course.vue
+++ b/src/views/Course.vue
@@ -1,11 +1,18 @@
 <template lang="pug">
 	.view--Course
 		h1 {{ courseName }}
+		WTLButton(
+			@click="toggleEditMode"
+		) Toggle edit mode
 		CourseRenderer(
-			v-if="!error && course",
+			v-if="!error && course && !editMode",
 			:course="course",
 			:showName="false"
 		)
+		CourseEditor(
+			v-if="editMode && course",
+			:course="course"
+		)
 		Error(:error="error")
 </template>
 
@@ -25,12 +32,19 @@
 
 <script>
 import CourseRenderer from "components/CourseRenderer"
+import CourseEditor from "components/CourseEditor"
 import ErrorHandler from "mixins/errorHandler"
+import WTLButton from "components/ui/WTLButton"
 
 export default {
 	name: "Course",
 	mixins: [ErrorHandler],
-	components: { CourseRenderer },
+	components: { CourseRenderer, CourseEditor, WTLButton },
+	data() {
+		return {
+			editMode: false
+		}
+	},
 	computed: {
 		courseName() {
 			if (this.course) {
@@ -49,6 +63,11 @@ export default {
 				return store.commit("SET_ERROR", { error: error })
 			})
 	},
+	methods: {
+		toggleEditMode() {
+			this.editMode = !this.editMode
+		}
+	},
 	meta() {
 		return {
 			title: this.courseName,

[prev in list] [next in list] [prev in thread] [next in thread]