Save and load settings

appinfo/routes.php

@@ -40,5 +40,5 @@ $application->registerRoutes($this, array('routes' => array(
 
 	// settings
 	array('name' => 'settings#get',	'url' => '/settings', 'verb' => 'GET'),
-	array('name' => 'settings#set', 'url' => '/settings/{type}/{setting}/{value}', 'verb' => 'POST'),
+	array('name' => 'settings#set', 'url' => '/settings/{setting}/{value}', 'verb' => 'POST'),
 )));

lib/Controller/SettingsController.php

@@ -49,9 +49,9 @@ class SettingsController extends Controller {
 	/**
 	 * @NoAdminRequired
 	 */
-	public function set($setting, $type, $value){
-		return $this->generateResponse(function () use ($setting, $type, $value) {
-			return $this->settingsService->set($setting, $type, $value);
+	public function set($setting, $value){
+		return $this->generateResponse(function () use ($setting, $value) {
+			return $this->settingsService->set($setting, $value);
 		});
 	}
 }

lib/Service/SettingsService.php

@@ -43,14 +43,11 @@ class SettingsService {
 	 */
 	public function get() {
 		$settings = array(
-			array(
-				'id' => 'various',
-				'showHidden' => (int)$this->settings->getUserValue($this->userId, $this->appName,'various_showHidden'),
-				'startOfWeek' => (int)$this->settings->getUserValue($this->userId, $this->appName,'various_startOfWeek'),
-				'sortOrder' => (string)$this->settings->getUserValue($this->userId, $this->appName,'various_sortOrder'),
-				'sortDirection' => (bool)$this->settings->getUserValue($this->userId, $this->appName,'various_sortDirection'),
-				'userID' => $this->userId
-			)
+			'showHidden' => (int)$this->settings->getUserValue($this->userId, $this->appName,'various_showHidden'),
+			'startOfWeek' => (int)$this->settings->getUserValue($this->userId, $this->appName,'various_startOfWeek'),
+			'sortOrder' => (string)$this->settings->getUserValue($this->userId, $this->appName,'various_sortOrder'),
+			'sortDirection' => (bool)$this->settings->getUserValue($this->userId, $this->appName,'various_sortDirection'),
+			'userID' => $this->userId
 		);
 		return $settings;
 	}
@@ -63,8 +60,8 @@ class SettingsService {
 	 * @param $value
 	 * @return bool
 	 */
-	public function set($setting, $type, $value) {
-		$this->settings->setUserValue($this->userId, $this->appName, $type.'_'.$setting, $value);
+	public function set($setting, $value) {
+		$this->settings->setUserValue($this->userId, $this->appName, 'various_'.$setting, $value);
 		return true;
 	}
 }

src/components/TheSettings.vue

@@ -30,10 +30,13 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			<ul>
 				<li>
 					<label for="startOfWeek">{{ t('tasks', 'Start of week') }}</label>
-					<select id="startOfWeek"
-						ng-change="setStartOfWeek()"
-						ng-model="settingsmodel.getById('various').startOfWeek"
-						ng-options="startOfWeekOption.id as startOfWeekOption.name for startOfWeekOption in startOfWeekOptions" />
+					<select id="startOfWeek" v-model="startOfWeek">
+						<option v-for="startOfWeekOption in startOfWeekOptions"
+							:value="startOfWeekOption.id"
+							:key="startOfWeekOption.id">
+							{{ startOfWeekOption.name }}
+						</option>
+					</select>
 				</li>
 				<li class="headline">
 					{{ t('tasks', 'Visibility of Smart Collections') }}
@@ -42,14 +45,19 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					:key="collection.id">
 					<div class="label-container">
 						<span :class="collection.icon" class="icon">
-							<text ng-show="collection.id=='today'">{{ dayOfMonth }}</text>
+							<text v-if="collection.id=='today'">{{ dayOfMonth }}</text>
 						</span>
 						<label :for="'visibilityCollection-' + collection.id" class="title">{{ collection.displayname }}</label>
 					</div>
 					<select :id="'visibilityCollection-' + collection.id"
-						ng-change="setVisibility(collection.id)"
-						ng-model="collection.show"
-						ng-options="collectionOption.id as collectionOption.name for collectionOption in collectionOptions" />
+						v-model="collection.show"
+						@change="setVisibility(collection)">
+						<option v-for="collectionOption in collectionOptions"
+							:value="collectionOption.id"
+							:key="collectionOption.id">
+							{{ collectionOption.name }}
+						</option>
+					</select>
 				</li>
 			</ul>
 		</div>
@@ -62,12 +70,73 @@ import { mapState } from 'vuex'
 export default {
 	components: {
 	},
-	computed: Object.assign({},
-		mapState({
-			collections: state => state.collections,
-			calendars: state => state.calendars,
-			dayOfMonth: state => state.dayOfMonth
-		})
-	)
+	data: function() {
+		return {
+			collectionOptions: [
+				{
+					id: 0,
+					name: t('tasks', 'Hidden')
+				},
+				{
+					id: 1,
+					name: t('tasks', 'Visible')
+				},
+				{
+					id: 2,
+					name: t('tasks', 'Automatic')
+				}
+			],
+			startOfWeekOptions: [
+				{
+					id: 0,
+					name: t('tasks', 'Sunday')
+				},
+				{
+					id: 1,
+					name: t('tasks', 'Monday')
+				},
+				{
+					id: 2,
+					name: t('tasks', 'Tuesday')
+				},
+				{
+					id: 3,
+					name: t('tasks', 'Wednesday')
+				},
+				{
+					id: 4,
+					name: t('tasks', 'Thursday')
+				},
+				{
+					id: 5,
+					name: t('tasks', 'Friday')
+				},
+				{
+					id: 6,
+					name: t('tasks', 'Saturday')
+				}
+			]
+		}
+	},
+	computed: Object.assign({
+		startOfWeek: {
+			get() {
+				return this.$store.state.settings.startOfWeek
+			},
+			set(value) {
+				this.$store.dispatch('setSetting', { type: 'startOfWeek', value: value })
+			}
+		}
+	},
+	mapState({
+		collections: state => state.collections,
+		calendars: state => state.calendars,
+		dayOfMonth: state => state.dayOfMonth
+	})
+	),
+	methods: {
+		setVisibility: function(collection) {
+		}
+	}
 }
 </script>

src/main.js

@@ -65,6 +65,7 @@ OCA.Tasks.App = new Vue({
 	},
 	beforeMount() {
 		this.$store.dispatch('loadCollections')
+		this.$store.dispatch('loadSettings')
 	},
 	methods: {
 		filter(query) {

src/services/requests.js

@@ -28,5 +28,10 @@ export default {
 		return Axios.get(url)
 			.then((response) => Promise.resolve(response))
 			.catch((error) => Promise.reject(error))
+	},
+	post(url, data) {
+		return Axios.post(url, data)
+			.then((response) => Promise.resolve(response))
+			.catch((error) => Promise.reject(error))
 	}
 }

src/store.js

@@ -51,11 +51,18 @@ export default new Vuex.Store({
 				writable: true
 			}
 		],
+		settings: {},
 		dayOfMonth: 23
 	},
 	mutations: {
 		setCollections(state, payload) {
 			state.collections = payload.collections
+		},
+		setSettings(state, payload) {
+			state.settings = payload.settings
+		},
+		setSetting(state, payload) {
+			state.settings[payload.type] = payload.value
 		}
 	},
 	actions: {
@@ -69,6 +76,23 @@ export default new Vuex.Store({
 						resolve()
 					})
 			})
+		},
+		setSetting(context, payload) {
+			context.commit('setSetting', payload)
+			return new Promise(function() {
+				Requests.post(OC.generateUrl('apps/tasks/settings/' + payload.type + '/' + payload.value), {})
+			})
+		},
+		loadSettings({ commit }) {
+			return new Promise(function(resolve) {
+				Requests.get(OC.generateUrl('apps/tasks/settings'))
+					.then(response => {
+						commit('setSettings', {
+							settings: response.data.data.settings
+						})
+						resolve()
+					})
+			})
 		}
 	}
 })