add API for checkboxes/radio buttons in action menus, fixes #3482

Closes #3482

Merge request studip/studip!2388

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.
      *

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,
                 }

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,
                 };
             });
         },