Add "show in legend" option to dropdown/checkbox fields (#330)

Author: cdauth

docs/src/developers/client/types.md

@@ -114,13 +114,14 @@ their `idx` property.
   different object properties
 * `colourFixed`, `sizeFixed`, `iconFixed`, `shapeFixed`, `widthFixed`, `strokeFixed`, `modeFixed` (boolean): Whether those values are fixed and
   cannot be changed for an individual object
-* `fields` ([object]): The form fields for this type. Each field has the following properties:
+* `fields` (object): The form fields for this type. Each field has the following properties:
 	* `name` (string): The name of the field. This is at the same time the key in the `data` properties of markers and lines. Note that the if the name is "Description", the FacilMap UI will translate the name to other languages even though the underlying name is in English.
 	* `oldName` (string): When renaming a field (using [`editType(data)`](./methods.md#edittype-data)), specify the former name here
 	* `type` (string): The type of field, one of `textarea`, `dropdown`, `checkbox`, `input`
-	* `controlColour`, `controlSize`, `controlIcon`, `controlShape`, `controlWidth`, `controlStroke` (boolean): If this field is a dropdown, whether the different options set a specific property on the object
+	* `controlColour`, `controlSize`, `controlIcon`, `controlShape`, `controlWidth`, `controlStroke` (boolean): If this field is a dropdown or checkbox, whether the different options set a specific property on the object
+	* `showInLegend` (boolean): If this field is a dropdown or checkbox, whether items for its options should be shown in the legend. Only has an effect if the type itself is shown in the legend. If set to undefined, it is shown in the legend only if the field controls the colour, marker icon or shape, or line width or stroke.
 	* `default` (string/boolean): The default value of this field
-	* `options` ([object]): If this field is a dropdown or a checkbox, an array of objects with the following properties. For a checkbox, the array has to have 2 items, the first representing the unchecked and the second the checked state.
+	* `options` (object): If this field is a dropdown or a checkbox, an array of objects with the following properties. For a checkbox, the array has to have 2 items, the first representing the unchecked and the second the checked state.
 		* `value` (string): The value of this option.
 		* `oldValue` (string): When renaming a dropdown option (using [`editType(data)`](./methods.md#edittype-data)), specify the former value here
 		* `colour`, `size`, `shape`, `icon`, `width`, `stroke` (string/number): The property value if this field controls that property

frontend/src/i18n/de.json

@@ -230,6 +230,7 @@
         "control-shape": "Form {{type}} kontrollieren",
         "control-width": "Dicke {{type}} kontrollieren",
         "control-stroke": "Kontur {{type}} kontrollieren",
+        "show-in-legend": "In der Legende anzeigen",
         "option": "Option",
         "label": "Bezeichnung (für Legende)",
         "colour": "Farbe",

frontend/src/i18n/en.json

@@ -232,6 +232,7 @@
         "control-shape": "Control {{type}} shape",
         "control-width": "Control {{type}} width",
         "control-stroke": "Control {{type}} stroke",
+        "show-in-legend": "Show in legend",
         "option": "Option",
         "label": "Label (for legend)",
         "colour": "Colour",

frontend/src/lib/components/edit-type-dialog/edit-type-dropdown-dialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import type { CRU, Field, FieldOptionUpdate, FieldUpdate, Type } from "facilmap-types";
-	import { canControl, formatCheckboxValue, mergeObject } from "facilmap-utils";
+	import { canControl, formatCheckboxValue, getDefaultFieldShowInLegend, mergeObject } from "facilmap-utils";
 	import { getUniqueId } from "../../utils/utils";
 	import { cloneDeep, isEqual } from "lodash-es";
 	import ColourPicker from "../ui/colour-picker.vue";
@@ -124,6 +124,23 @@
 
 	const columns = computed(() => controlNumber.value + (fieldValue.value.type === "checkbox" ? 2 : 3));
 
+	const defaultShowInLegend = computed(() => getDefaultFieldShowInLegend(props.type, fieldValue.value));
+
+	const showInLegend = computed({
+		get: () => fieldValue.value.showInLegend ?? defaultShowInLegend.value,
+		set: (v) => {
+			if (v === defaultShowInLegend.value) {
+				delete fieldValue.value.showInLegend;
+			} else {
+				fieldValue.value.showInLegend = v;
+			}
+		}
+	});
+
+	watch(defaultShowInLegend, () => {
+		delete fieldValue.value.showInLegend;
+	});
+
 	function validateOptionValue(value: string): string | undefined {
 		if (fieldValue.value.type !== "checkbox" && fieldValue.value.options!.filter((op) => op.value === value).length > 1) {
 			return i18n.t("edit-type-dropdown-dialog.unique-value-error");
@@ -257,13 +274,28 @@
 						{{i18n.t("edit-type-dropdown-dialog.control-stroke", { type: typeInterpolation })}}
 					</label>
 				</div>
+
+				<div v-if="type.showInLegend" class="form-check">
+					<input
+						:id="`${id}-showInLegend`"
+						class="form-check-input"
+						type="checkbox"
+						v-model="showInLegend"
+					/>
+					<label
+						class="form-check-label"
+						:for="`${id}-showInLegend`"
+					>
+						{{i18n.t("edit-type-dropdown-dialog.show-in-legend")}}
+					</label>
+				</div>
 			</div>
 		</div>
-		<table v-if="fieldValue.type != 'checkbox' || controlNumber > 0" class="table table-striped table-hover">
+		<table v-if="fieldValue.type != 'checkbox' || controlNumber > 0 || showInLegend" class="table table-striped table-hover">
 			<thead>
 				<tr>
 					<th>{{i18n.t("edit-type-dropdown-dialog.option")}}</th>
-					<th v-if="fieldValue.type == 'checkbox'">{{i18n.t("edit-type-dropdown-dialog.label")}}</th>
+					<th v-if="fieldValue.type == 'checkbox' && showInLegend">{{i18n.t("edit-type-dropdown-dialog.label")}}</th>
 					<th v-if="fieldValue.controlColour">{{i18n.t("edit-type-dropdown-dialog.colour")}}</th>
 					<th v-if="fieldValue.controlSize">{{i18n.t("edit-type-dropdown-dialog.size")}}</th>
 					<th v-if="fieldValue.controlIcon">{{i18n.t("edit-type-dropdown-dialog.icon")}}</th>
@@ -286,6 +318,7 @@
 							<strong>{{formatCheckboxValue(idx === 0 ? "0" : "1")}}</strong>
 						</td>
 						<ValidatedField
+							v-if="fieldValue.type !== 'checkbox' || showInLegend"
 							tag="td"
 							class="field position-relative"
 							:value="option.value"

frontend/src/lib/components/legend/legend-utils.ts

@@ -1,6 +1,6 @@
 import type { ID, Shape, Stroke, Icon, Type } from "facilmap-types";
 import { iconList } from "facilmap-leaflet";
-import { formatTypeName, getOrderedTypes, isBright } from "facilmap-utils";
+import { formatTypeName, getDefaultFieldShowInLegend, getOrderedTypes, isBright } from "facilmap-utils";
 import type { FacilMapContext } from "../facil-map-context-provider/facil-map-context";
 import { requireClientContext, requireMapContext } from "../facil-map-context-provider/facil-map-context-provider.vue";
 
@@ -80,13 +80,7 @@ export function getLegendItems(context: FacilMapContext): LegendType[] {
 		for (const field of type.fields) {
 			if (
 				(field.type != "dropdown" && field.type != "checkbox") ||
-				(
-					!field.controlColour &&
-					!(type.type === "marker" && field.controlIcon) &&
-					!(type.type === "marker" && field.controlShape) &&
-					!(type.type === "line" && field.controlWidth) &&
-					!(type.type === "line" && field.controlStroke)
-				)
+				!(field.showInLegend ?? getDefaultFieldShowInLegend(type, field))
 			)
 				continue;
 

types/src/type.ts

@@ -70,6 +70,7 @@ export const fieldValidator = cruValidator({
 	controlShape: z.boolean().optional(),
 	controlWidth: z.boolean().optional(),
 	controlStroke: z.boolean().optional(),
+	showInLegend: z.boolean().optional(),
 
 	options: {
 		read: fieldOptionsValidator.read.optional(),

utils/src/objects.ts

@@ -25,6 +25,14 @@ export function canControl<T extends Marker | Line = Marker | Line>(type: Type<C
 	}) as Array<T extends any ? keyof T : never>;
 }
 
+export function getDefaultFieldShowInLegend(type: Type<CRU.READ | CRU.CREATE_VALIDATED>, field: Field): boolean {
+	return !!(
+		field.controlColour ||
+		(type.type === "marker" && (field.controlIcon || field.controlShape)) ||
+		(type.type === "line" && (field.controlWidth || field.controlStroke))
+	);
+}
+
 export function getSelectedOption(field: Field, value: string | undefined, ignoreDefault = false): FieldOption | undefined {
 	const get = (val: string) => {
 		if (field.type === "dropdown") {