diff --git a/lib/classes/ActionMenu.php b/lib/classes/ActionMenu.php index cf4fb80cd4fc5c4fe03f66fd4fe804fe1e5a2298..929c485189e61573600f5de69c7ff0a12d005af5 100644 --- a/lib/classes/ActionMenu.php +++ b/lib/classes/ActionMenu.php @@ -207,6 +207,44 @@ class ActionMenu return $this; } + /** + * Adds a checkbox to the list of actions. + * + * @param String $name Input name + * @param String $label Label displayed in the menu + * @param bool $checked Checked state of the action + * @param array $attributes Optional attributes to add to the button + * @return ActionMenu instance to allow chaining + */ + public function addCheckbox($name, $label, bool $checked, array $attributes = []) + { + return $this->addButton( + $name, + $label, + Icon::create($checked ? 'checkbox-checked' : 'checkbox-unchecked'), + $attributes + ['role' => 'checkbox', 'aria-checked' => $checked ? 'true' : 'false'] + ); + } + + /** + * Adds a radio button to the list of actions. + * + * @param String $name Input name + * @param String $label Label displayed in the menu + * @param bool $checked Checked state of the action + * @param array $attributes Optional attributes to add to the button + * @return ActionMenu instance to allow chaining + */ + public function addRadioButton($name, $label, bool $checked, array $attributes = []) + { + return $this->addButton( + $name, + $label, + Icon::create($checked ? 'radiobutton-checked' : 'radiobutton-unchecked'), + $attributes + ['role' => 'radio', 'aria-checked' => $checked ? 'true' : 'false'] + ); + } + /** * Adds a MultiPersonSearch object to the list of actions. * diff --git a/resources/vue/components/AdminCourses.vue b/resources/vue/components/AdminCourses.vue index b27e6f6c6e6bb6c681eea0191cbec0b6e49785bb..425447b03d661575183611ced64a7563efe9dddb 100644 --- a/resources/vue/components/AdminCourses.vue +++ b/resources/vue/components/AdminCourses.vue @@ -179,10 +179,11 @@ export default { }, availableFields() { return Object.keys(this.fields).map(f => { - let state = this.activatedFields.includes(f); return { + type: 'checkbox', label: this.fields[f], - icon: state ? 'checkbox-checked' : 'checkbox-unchecked', + checked: this.activatedFields.includes(f), + name: 'activatedFields', emit: 'toggleActiveField', emitArguments: f, } diff --git a/resources/vue/components/StudipActionMenu.vue b/resources/vue/components/StudipActionMenu.vue index c70d8edd55e170ebbd1af7dd08311126bfeceb85..434336fbf8a3348e91c90a057d55771e6320251b 100644 --- a/resources/vue/components/StudipActionMenu.vue +++ b/resources/vue/components/StudipActionMenu.vue @@ -17,13 +17,21 @@ <span v-else class="action-menu-no-icon"></span> {{ item.label }} </a> - <label v-else-if="item.icon" class="undecorated" v-bind="linkAttributes(item)" v-on="linkEvents(item)"> - <studip-icon :shape="item.icon.shape" :role="item.icon.role" :name="item.name" :title="item.label" v-bind="item.attributes ?? {}"></studip-icon> + <label v-else-if="item.type === 'checkbox'" class="undecorated" v-on="linkEvents(item)"> + <studip-icon :shape="item.checked ? 'checkbox-checked' : 'checkbox-unchecked'" :role="item.icon.role" :name="item.name" :title="item.label" aria-role="checkbox" :aria-checked="item.checked.toString()" v-bind="linkAttributes(item)"></studip-icon> + {{ item.label }} + </label> + <label v-else-if="item.type === 'radio'" class="undecorated" v-on="linkEvents(item)"> + <studip-icon :shape="item.checked ? 'radiobutton-checked' : 'radiobutton-unchecked'" :role="item.icon.role" :name="item.name" :title="item.label" aria-role="radio" :aria-checked="item.checked.toString()" v-bind="linkAttributes(item)"></studip-icon> + {{ item.label }} + </label> + <label v-else-if="item.icon" class="undecorated" v-on="linkEvents(item)"> + <studip-icon :shape="item.icon.shape" :role="item.icon.role" :name="item.name" :title="item.label" v-bind="linkAttributes(item)"></studip-icon> {{ item.label }} </label> <template v-else> <span class="action-menu-no-icon"></span> - <button :name="item.name" v-bind="Object.assign(item.attributes ?? {}, linkAttributes(item))" v-on="linkEvents(item)"> + <button :name="item.name" v-bind="linkAttributes(item)" v-on="linkEvents(item)"> {{ item.label }} </button> </template> @@ -114,6 +122,7 @@ export default { classes: classes.trim(), attributes: item.attributes || {}, disabled: item.disabled, + checked: item.checked, }; }); },