WIP: settings view on the UI should now work for all setting types.

Author: pstaabp

conf/course_settings.yml

@@ -401,8 +401,8 @@
     student answer, e.g. 1 if student input is sin(pi/2). If this is set to false, e.g.
     to save space in the response area, the student can still see their evaluated answer
     by hovering the mouse pointer over the typeset version of their answer.
-  type: text
-  default_value: ''
+  type: boolean
+  default_value: false
 -
   setting_name: use_base_10_log
   category: problem

lib/DB/Schema/ResultSet/Course.pm

@@ -450,8 +450,6 @@ A single course setting as either a hashref or a C<DBIx::Class::ResultSet::Cours
 
 =cut
 
-use Data::Dumper;
-
 sub updateCourseSetting ($self, %args) {
 	my $course = $self->getCourse(info => getCourseInfo($args{info}), as_result_set => 1);
 
@@ -466,13 +464,13 @@ sub updateCourseSetting ($self, %args) {
 	my $params = {
 		course_id  => $course->course_id,
 		setting_id => $global_setting->{setting_id},
-		value      => { value => $args{params}->{value} }
+		value      => { value => $args{params}{value} }
 	};
 
 	# remove the following fields before checking for valid settings:
-	for (qw/setting_id course_id/) { delete $global_setting->{$_}; }
+	delete $global_setting->{$_} for (qw/setting_id course_id/);
 
-	isValidSetting($global_setting, $params->{value}->{value});
+	isValidSetting($global_setting, $params->{value}{value});
 
 	# The course_id must be deleted to ensure it is written to the database correctly.
 	delete $params->{course_id} if defined($params->{course_id});

lib/WeBWorK3.pm

@@ -217,9 +217,10 @@ sub problemRoutes ($app, $course_routes) {
 }
 
 sub settingsRoutes ($self, $course_routes) {
-	$self->routes->get('/webwork3/api/global-settings')->requires(authenticated => 1)->to('Settings#getGlobalSettings');
-	$self->routes->get('/webwork3/api/global-setting/:setting_id')->requires(authenticated => 1)
-		->to('Settings#getGlobalSetting');
+	my $global_settings = $self->routes->any('/webwork3/api/global-settings')->requires(authenticated => 1);
+	$global_settings->get('/')->to('Settings#getGlobalSettings');
+	$global_settings->get('/:setting_id')->to('Settings#getGlobalSetting');
+	$global_settings->post('/check-timezone')->to('Settings#checkTimeZone');
 	$course_routes->get('/settings')->to('Settings#getCourseSettings');
 	$course_routes->put('/settings/:setting_id')->to('Settings#updateCourseSetting');
 	$course_routes->delete('/settings/:setting_id')->to('Settings#deleteCourseSetting');

lib/WeBWorK3/Controller/Settings.pm

@@ -3,6 +3,10 @@ package WeBWorK3::Controller::Settings;
 use warnings;
 use strict;
 
+use Mojo::JSON qw/true false/;
+use DateTime::TimeZone;
+use Try::Tiny;
+
 =head1 Description
 
 These are the methods that call the database for course settings
@@ -61,4 +65,13 @@ sub deleteCourseSetting ($c) {
 	return;
 }
 
+sub checkTimeZone ($c) {
+	try {
+		DateTime::TimeZone->new(name => $c->req->json->{timezone});
+		$c->render(json => {valid_timezone => true });
+	} catch {
+		$c->render(json => {valid_timezone => false });
+	};
+}
+
 1;

lib/WeBWorK3/Utils/Settings.pm

@@ -56,7 +56,9 @@ This checks if the setting given the type, value and list of options (if needed)
 =cut
 
 sub isValidSetting ($setting, $value = undef) {
-	return 0 if !defined $setting->{type};
+	DB::Exception::ParametersNeeded->throw(
+		message => 'The field \'type\' must be defined for the setting'
+	) unless defined $setting->{type};
 
 	# If $value is not passed in, use the default_value for the setting
 	my $val = $value // $setting->{default_value};
@@ -161,11 +163,12 @@ sub validateMultilist ($setting, $value) {
 	DB::Exception::InvalidCourseFieldType->throw(
 		message => "The options field for the type multilist in $setting->{setting_name} is missing ")
 		unless defined($setting->{options});
+
 	DB::Exception::InvalidCourseFieldType->throw(
 		message => "The options field for $setting->{setting_name} is not an ARRAYREF")
 		unless ref($setting->{options}) eq 'ARRAY';
 
-	my @diff = array_minus(@{ $setting->{options} }, @$value);
+	my @diff = array_minus(@$value, @{ $setting->{options} });
 	throw DB::Exception::InvalidCourseFieldType->throw(
 		message => "The values for $setting->{setting_name} must be a subset of the options field")
 		unless scalar(@diff) == 0;

src/components/instructor/SingleSetting.vue

@@ -1,40 +1,55 @@
 <template>
 	<tr>
 		<td width="60%">{{ setting.description }}
-			<q-icon v-if="setting.doc" name="help" class="q-ml-md">
-				<q-tooltip class="text-body2">
-					{{ setting.doc }}
-				</q-tooltip>
-			</q-icon>
+			<q-icon v-if="setting.doc" name="help" size="sm" color="primary"
+				class="q-ml-md" @click="show_help = !show_help"
+			/>
 		</td>
 		<td width="40%">
 			<input-with-blur
 				outlined dense
-				v-if="setting?.type === 'text' || setting?.type === 'timezone'"
-				v-model="course_setting.value"
+				v-if="setting?.type === 'text'"
+				v-model="setting_value"
+			/>
+			<input-with-blur
+				outlined dense
+				v-if="setting?.type === 'decimal'"
+				v-model.number="setting_value"
+				type="number"
 			/>
-			<q-select v-if="setting.type === 'list'" v-model="option" :options="options" />
+			<input-with-blur
+				outlined dense
+				v-if="setting?.type === 'timezone'"
+				v-model="setting_value"
+				:error="!valid_timezone"
+				error-message="This is not a valid timezone"
+			/>
+			<q-select v-if="setting.type === 'list'" v-model="option_value" :options="options" />
+			<q-select v-if="setting.type === 'multilist'" multiple v-model="multilist_value" :options="options" />
 			<input-with-blur
 				v-if="setting.type === 'time_duration'"
-				v-model="course_setting.value"
+				v-model="setting_value"
+				lazy-rules
 				:rules="[checkTimeDuration]"
 			/>
-			<q-toggle v-if="setting.type === 'boolean'" v-model="course_setting.value" />
-			<q-input v-if="setting.type === 'integer'" v-model="course_setting.value" :rules="[checkInt]" />
+			<q-toggle v-if="setting.type === 'boolean'" v-model="setting_value" />
+			<q-input v-if="setting.type === 'int'" v-model.number="setting_value" type="number" :rules="[checkInt]" />
 		</td>
 	</tr>
+	<tr v-if="setting.doc && show_help"><td class="helptext" colspan="2"><div v-html="setting.doc" /></td></tr>
 </template>
 
 <script setup lang="ts">
 import { defineProps, ref, watch } from 'vue';
 import { useQuasar } from 'quasar';
-import { CourseSetting, OptionType } from 'src/common/models/settings';
+import { CourseSetting, OptionType, SettingValueType } from 'src/common/models/settings';
 
 import InputWithBlur from 'src/components/common/InputWithBlur.vue';
 import { logger } from 'src/boot/logger';
 
 import { useSettingsStore } from 'src/stores/settings';
 import { isTimeDuration } from 'src/common/models/parsers';
+import { api } from 'src/boot/axios';
 
 const props = defineProps<{
 	setting: CourseSetting
@@ -44,22 +59,43 @@ const $q = useQuasar();
 const settings = useSettingsStore();
 
 const course_setting = ref(props.setting.clone());
+// used for text input/toggles
+const setting_value = ref<SettingValueType>();
+if (['int', 'decimal', 'text', 'boolean', 'time_duration', 'timezone'].includes(course_setting.value.type)) {
+	setting_value.value = course_setting.value.value;
+}
+// Used for type list and multilist
+const option_value = ref<OptionType>({ value: '', label: '' });
+const multilist_value = ref<OptionType[]>([]);
+const options = ref<OptionType[]>([]);
+
+// Determine if the help in settings.doc is shown.
+const show_help = ref(false);
 
-const option = ref<OptionType>({ value: '', label: '' });
-const options = ref<Array<OptionType>>([]);
+const checkInt = (val: string) => Number.isInteger(val) || 'This must be an integer.';
+const checkTimeDuration = (val: string) => isTimeDuration(val) || 'This must be a time duration.';
 
-const checkInt = (val: string) => Number.isInteger(val) ? true : 'This must be an integer.';
-const checkTimeDuration = (val: string) => isTimeDuration(val) ? true : 'This must be a time duration.';
+const valid_timezone = ref(true);
 
+// These are for type list/multilist
 if (course_setting.value.options) {
 	options.value = course_setting.value.options.map((opt: string | OptionType) =>
 		typeof opt === 'string' ? { label: opt, value: opt } : opt
 	);
-	const v = options.value.find((opt: OptionType) => opt.value === course_setting.value.value);
-	option.value = v || { value: '', label: '' };
+}
+// Extract the option_value for type list
+if (course_setting.value.type === 'list') {
+	option_value.value = options.value.find((opt: OptionType) => opt.value === course_setting.value.value) ||
+		{ value: '', label: '' };
+}
+
+// Extract the multilist_value for type list
+if (course_setting.value.type === 'multilist') {
+	multilist_value.value = options.value
+		.filter((opt: OptionType) => (course_setting.value.value as string[]).includes(opt.value));
 }
 
-watch(() => course_setting.value.value, async () => {
+const updateCourseSetting = async () => {
 	try {
 		await settings.updateCourseSetting(course_setting.value as CourseSetting);
 		const msg = `The setting '${course_setting.value.setting_name}' was updated successfully`;
@@ -72,5 +108,42 @@ watch(() => course_setting.value.value, async () => {
 		$q.notify({ message: err as string, color: 'red' });
 		logger.error(`[CourseSettings/updateCourseSetting]: ${err as string}`);
 	}
+};
+
+watch(() => setting_value.value, async () => {
+	if (setting_value.value) {
+		if (course_setting.value.type === 'timezone') {
+			// Check for valid timezone on the server.
+			const response = await api.post('/global-settings/check-timezone',
+				{ timezone: setting_value.value });
+			valid_timezone.value = (response.data as { valid_timezone: boolean }).valid_timezone;
+			if (!valid_timezone.value) return;
+		}
+		course_setting.value.value = setting_value.value;
+		await updateCourseSetting();
+	}
+});
+
+watch(() => option_value.value, async () => {
+	if (option_value.value) {
+		course_setting.value.value = option_value.value.value;
+		await updateCourseSetting();
+	}
+});
+
+watch(() => multilist_value.value, async () => {
+	if (multilist_value.value) {
+		course_setting.value.value = multilist_value.value.map(opt => opt.value);
+		await updateCourseSetting();
+	}
 });
 </script>
+
+<style lang="scss" scoped>
+.helptext {
+	border: 1px solid black;
+	border-radius: 5px;
+	padding: 5px 0px;
+	background-color: lightyellow;
+}
+</style>

t/mojolicious/015_course_settings.t

@@ -60,7 +60,7 @@ for my $setting (@$global_settings_from_db) {
 is_deeply($global_settings_from_db, $global_settings_from_file, 'test that the global settings are correct.');
 
 # get a single global/default setting
-$t->get_ok('/webwork3/api/global-setting/1')->content_type_is('application/json;charset=UTF-8')->status_is(200)
+$t->get_ok('/webwork3/api/global-settings/1')->content_type_is('application/json;charset=UTF-8')->status_is(200)
 	->json_is('/setting_name'  => $global_settings_from_file->[0]->{setting_name})
 	->json_is('/default_value' => $global_settings_from_file->[0]->{default_value})
 	->json_is('/description'   => $global_settings_from_file->[0]->{description});
@@ -105,4 +105,14 @@ $t->put_ok(
 $t->delete_ok("/webwork3/api/courses/4/settings/$reduced_scoring->{setting_id}")
 	->content_type_is('application/json;charset=UTF-8')->status_is(200)->json_is('/value' => 0.5);
 
+# Check for valid and invalid timezones
+
+$t->post_ok('/webwork3/api/global-settings/check-timezone' => json => {timezone => 'America/Chicago'})
+	->content_type_is('application/json;charset=UTF-8')->status_is(200)
+	->json_is('/valid_timezone' => true);
+
+$t->post_ok('/webwork3/api/global-settings/check-timezone' => json => {timezone => 'Amrica/Chicago'})
+	->status_is(200)->json_is('/valid_timezone' => false);
+
+
 done_testing;