Merge pull request #1114 from con2/feat/dimension-field-value-subset

feat/dimension field value subset

Author: japsu

kompassi-v2-frontend/src/components/forms/EditFieldModal.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import Modal from "react-bootstrap/Modal";
 import {
+  encodeDimensionChoice,
   fieldToValues,
+  findEditorDimensionByChoice,
   formDataToField,
   getFieldEditorFields,
   type AnnotationOption,
@@ -40,26 +42,67 @@ const EditFieldModal = ({
   formContext,
 }: EditFieldModalProps) => {
   const t = messages.FormEditor.editFieldModal;
-  const fields = getFieldEditorFields(
-    fieldToEdit.type,
-    messages.FormEditor.editFieldForm,
-    dimensions,
-    annotations,
-    formContext,
+  const values = useMemo(
+    () => fieldToValues(fieldToEdit, defaultDimensionUniverse),
+    [fieldToEdit, defaultDimensionUniverse],
+  );
+
+  // The value checkboxes follow the dimension dropdown, so its value must be known while editing.
+  // A new field has no dimension yet, and the required dropdown then shows its first choice.
+  const [dimensionChoice, setDimensionChoice] = useState<string>(
+    () =>
+      values.dimension ??
+      (dimensions.length ? encodeDimensionChoice(dimensions[0]) : ""),
+  );
+  const handleChange = useCallback((event: React.FormEvent) => {
+    const target = event.target as HTMLInputElement;
+    if (target.name === "dimension") {
+      setDimensionChoice(target.value);
+    }
+  }, []);
+
+  // The subset saved for the field's own dimension means nothing for another dimension.
+  const formValues = useMemo(
+    () =>
+      dimensionChoice === values.dimension
+        ? values
+        : { ...values, subsetValues: undefined },
+    [values, dimensionChoice],
+  );
+
+  const fields = useMemo(
+    () =>
+      getFieldEditorFields(
+        fieldToEdit.type,
+        messages.FormEditor.editFieldForm,
+        dimensions,
+        annotations,
+        formContext,
+        findEditorDimensionByChoice(dimensions, dimensionChoice),
+      ),
+    [
+      fieldToEdit.type,
+      messages.FormEditor.editFieldForm,
+      dimensions,
+      annotations,
+      formContext,
+      dimensionChoice,
+    ],
   );
 
   const handleSubmit = useCallback(
     (event: React.SyntheticEvent) => {
       event.preventDefault();
       const formData = new FormData(event.target as HTMLFormElement);
-      const field = formDataToField(fields, fieldToEdit, formData);
+      const field = formDataToField(
+        fields,
+        fieldToEdit,
+        formData,
+        defaultDimensionUniverse,
+      );
       onSubmit(field);
     },
-    [fieldToEdit, fields, onSubmit],
-  );
-  const values = useMemo(
-    () => fieldToValues(fieldToEdit, defaultDimensionUniverse),
-    [fieldToEdit, defaultDimensionUniverse],
+    [fieldToEdit, fields, onSubmit, defaultDimensionUniverse],
   );
 
   return (
@@ -69,11 +112,11 @@ const EditFieldModal = ({
           {t.title}: {messages.FormEditor.fieldTypes[fieldToEdit.type]}
         </Modal.Title>
       </Modal.Header>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} onChange={handleChange}>
         <Modal.Body>
           <SchemaForm
             fields={fields}
-            values={values}
+            values={formValues}
             messages={messages.SchemaForm}
           />
         </Modal.Body>

kompassi-v2-frontend/src/components/forms/FormEditor.tsx

@@ -56,19 +56,23 @@ function injectChoices(
     // has no choices pre-populated by the server
     (!field.choices || field.choices.length === 0)
   ) {
-    // TODO(#643) subsetValues
     const dimension = findEditorDimension(
       dimensions,
       field.dimension,
       getFieldDimensionUniverse(field, defaultDimensionUniverse),
     );
     if (dimension) {
+      const subsetValues = field.subsetValues?.length
+        ? new Set(field.subsetValues)
+        : undefined;
       return {
         ...field,
-        choices: dimension.values.map(({ slug, title }) => ({
-          slug,
-          title: title || slug,
-        })),
+        choices: dimension.values
+          .filter(({ slug }) => !subsetValues || subsetValues.has(slug))
+          .map(({ slug, title }) => ({
+            slug,
+            title: title || slug,
+          })),
       };
     }
   }

kompassi-v2-frontend/src/components/forms/SchemaFormInput.tsx

@@ -228,8 +228,9 @@ function SchemaFormInput({
       }
     case "MultiSelect":
     case "DimensionMultiSelect":
+      // the checkboxes are uncontrolled, so they must be remounted to show a new value or new choices
       return (
-        <Fragment key={JSON.stringify(value)}>
+        <Fragment key={JSON.stringify([value, field.choices])}>
           {field.choices?.map((choice) => {
             const name = `${slug}.${choice.slug}`;
             const choiceId = `${idPrefix}${idPrefix ? "-" : ""}${field.slug}-${

kompassi-v2-frontend/src/components/forms/editFieldForm.ts

@@ -40,7 +40,7 @@ export function findEditorDimension(
 
 /// The dimension dropdown of the field editor encodes the universe into the choice slug
 /// so that one dropdown can offer the dimensions of both universes.
-function encodeDimensionChoice(dimension: EditorDimension): string {
+export function encodeDimensionChoice(dimension: EditorDimension): string {
   return dimension.universe
     ? `${dimension.universe}/${dimension.slug}`
     : dimension.slug;
@@ -60,6 +60,14 @@ function decodeDimensionChoice(value: string): {
   };
 }
 
+export function findEditorDimensionByChoice(
+  dimensions: EditorDimension[],
+  choice: string,
+): EditorDimension | undefined {
+  const { dimension, dimensionUniverse } = decodeDimensionChoice(choice);
+  return findEditorDimension(dimensions, dimension, dimensionUniverse);
+}
+
 export interface AnnotationOption {
   slug: string;
   title: string;
@@ -92,6 +100,8 @@ export function getFieldEditorFields(
   dimensions: EditorDimension[],
   annotations: AnnotationOption[] = [],
   formContext: FormEditorContext = "survey",
+  /// The dimension currently chosen in the dimension dropdown, whose values are offered as subsetValues.
+  selectedDimension?: EditorDimension,
 ): Field[] {
   const t = messages;
   const slugField: Field = {
@@ -213,6 +223,21 @@ export function getFieldEditorFields(
     ...t.dimension,
   };
 
+  const subsetValuesFields: Field[] = selectedDimension?.values.length
+    ? [
+        {
+          type: "MultiSelect",
+          slug: "subsetValues",
+          required: false,
+          choices: selectedDimension.values.map(({ slug, title }) => ({
+            slug,
+            title: title || slug,
+          })),
+          ...t.subsetValues,
+        },
+      ]
+    : [];
+
   const maxLengthField: Field = {
     type: "NumberField",
     slug: "maxLength",
@@ -238,6 +263,10 @@ export function getFieldEditorFields(
         return editableFieldFields.concat([choicesField]); // , encryptTo]);
       case "DimensionSingleSelect":
       case "DimensionMultiSelect":
+        return editableFieldFields.concat([
+          dimensionField,
+          ...subsetValuesFields,
+        ]); // , encryptTo]);
       case "DimensionSingleCheckbox":
         return editableFieldFields.concat([dimensionField]); // , encryptTo]);
       case "RadioMatrix":
@@ -321,6 +350,7 @@ export function formDataToField(
   fields: Field[],
   initialValues: Field,
   formData: FormData,
+  defaultDimensionUniverse?: DimensionUniverse,
 ): Field {
   const values: Values = {
     ...processFormData(fields, formData),
@@ -355,14 +385,32 @@ export function formDataToField(
       };
     case "DimensionSingleSelect":
     case "DimensionMultiSelect":
-    case "DimensionSingleCheckbox":
-      // an unqualified choice must clear a qualifier the field had before
+    case "DimensionSingleCheckbox": {
+      // The editor offers no value checkboxes when the chosen dimension is unknown to it or has
+      // no values. A saved subset must survive such an edit unless the dimension was changed,
+      // as the subset of one dimension means nothing for another.
+      const dimensionChanged =
+        values.dimension !==
+        fieldToValues(initialValues, defaultDimensionUniverse).dimension;
+      let subsetValues: string[] | undefined;
+      if (fields.some((field) => field.slug === "subsetValues")) {
+        subsetValues = values.subsetValues as string[] | undefined;
+      } else if (
+        !dimensionChanged &&
+        initialValues.type !== "DimensionSingleCheckbox"
+      ) {
+        subsetValues = initialValues.subsetValues;
+      }
       return {
         ...initialValues,
         ...values,
+        // nothing ticked means every value is offered, which is spelled as no subsetValues at all
+        subsetValues: subsetValues?.length ? subsetValues : undefined,
+        // an unqualified choice must clear a qualifier the field had before
         dimensionUniverse: undefined,
         ...decodeDimensionChoice(String(values.dimension ?? "")),
       } as Field;
+    }
     default:
       return { ...initialValues, ...values };
   }

kompassi-v2-frontend/src/translations/en.tsx

@@ -310,6 +310,11 @@ const translations = {
         title: "Dimension",
         helpText: "Which dimension should the field get its choices from?",
       },
+      subsetValues: {
+        title: "Offered values",
+        helpText:
+          "Tick the values the respondent may choose from. Leave all unticked to offer every value of the dimension. Responses already holding a value that is left out cannot be edited or passed forward until the value is ticked again.",
+      },
       dimensionUniverse: {
         program: "Program item",
         involvement: "Program host",

kompassi-v2-frontend/src/translations/fi.tsx

@@ -313,6 +313,11 @@ const translations: Translations = {
         title: "Dimensio",
         helpText: "Mistä dimensiosta tämä kenttä saa vastausvaihtoehtonsa?",
       },
+      subsetValues: {
+        title: "Tarjottavat arvot",
+        helpText:
+          "Valitse arvot, joista vastaaja voi valita. Jätä kaikki valitsematta, jos haluat tarjota dimension kaikki arvot. Vastauksia, joissa on jo valitsematta jätetty arvo, ei voi muokata eikä viedä eteenpäin ennen kuin arvo valitaan uudelleen.",
+      },
       dimensionUniverse: {
         program: "Ohjelmanumero",
         involvement: "Ohjelmanpitäjä",

kompassi-v2-frontend/src/translations/sv.tsx

@@ -304,6 +304,11 @@ const translations: Translations = {
         title: "Dimension",
         helpText: "Vilken dimension ska fältet hämta sina val från?",
       },
+      subsetValues: {
+        title: "Erbjudna värden",
+        helpText:
+          "Kryssa för de värden som svararen kan välja mellan. Lämna alla okryssade för att erbjuda dimensionens alla värden. Svar som redan innehåller ett värde som lämnats bort kan inte redigeras eller föras vidare förrän värdet kryssas för igen.",
+      },
       dimensionUniverse: {
         program: "Programpunkt",
         involvement: "Programvärd",

kompassi/dimensions/graphql/mutations/delete_dimension_value.py

@@ -36,5 +36,6 @@ def mutate(
             raise Exception("Cannot remove dimension value")
 
         value.delete()
+        value.dimension.refresh_dependents()
 
         return DeleteDimensionValue(slug=input.value_slug)  # type: ignore

kompassi/dimensions/models/dimension.py

@@ -17,6 +17,8 @@
 from .universe import Universe
 
 if TYPE_CHECKING:
+    from collections.abc import Iterable
+
     from kompassi.forms.models.field import Choice
 
     from .dimension_value import DimensionValue
@@ -189,7 +191,10 @@ def get_values(self, language: str | None = None) -> models.QuerySet[DimensionVa
         value_order_field = self.get_value_order_field(language)
         return self.values.all().order_by(value_order_field)
 
-    def as_choices(self, language: str | None = None) -> list[Choice]:
+    def as_choices(self, language: str | None = None, value_slugs: Iterable[str] | None = None) -> list[Choice]:
+        """
+        :param value_slugs: If given, only these values are included. Slugs of nonexistent values are ignored.
+        """
         from kompassi.forms.models.field import Choice
 
         title_fields = [f"title_{lang}" for lang in SUPPORTED_LANGUAGE_CODES]
@@ -198,12 +203,16 @@ def as_choices(self, language: str | None = None) -> list[Choice]:
         if language in SUPPORTED_LANGUAGE_CODES:
             title_fields = [f"title_{language}"] + [field for field in title_fields if field != f"title_{language}"]
 
+        values = self.get_values(language)
+        if value_slugs is not None:
+            values = values.filter(slug__in=value_slugs)
+
         return [
             Choice(
                 slug=slug,
                 title=next((localized_title for localized_title in localized_titles if localized_title), slug),
             )
-            for slug, *localized_titles in self.get_values(language).values_list("slug", *title_fields)
+            for slug, *localized_titles in values.values_list("slug", *title_fields)
         ]
 
     def get_title(self, lang: str = DEFAULT_LANGUAGE) -> str:

kompassi/forms/migrations/0060_clear_subset_values.py

@@ -0,0 +1,34 @@
+from django.db import migrations
+
+
+def clear_subset_values(apps, schema_editor):
+    """
+    promote_field_to_dimension used to write subsetValues to every promoted field without it ever
+    being enforced. Now that subsetValues restricts the choices of a dimension field, it must not
+    silently restrict promoted fields.
+    """
+    Form = apps.get_model("forms", "Form")
+
+    for form in Form.objects.all():
+        changed = False
+        for field_list in (form.fields, form.cached_enriched_fields):
+            for field in field_list:
+                if "subsetValues" in field:
+                    del field["subsetValues"]
+                    changed = True
+        if changed:
+            form.save(update_fields=["fields", "cached_enriched_fields"])
+
+
+class Migration(migrations.Migration):
+    dependencies = [  # noqa: RUF012
+        ("forms", "0059_survey_followup_purpose_and_parent"),
+    ]
+
+    operations = [  # noqa: RUF012
+        migrations.RunPython(
+            code=clear_subset_values,
+            reverse_code=migrations.RunPython.noop,
+            elidable=True,
+        ),
+    ]