Merge pull request #2252 from thseiler/feature/2230-autocomplete-for-multiplechoice

UI: generalize autocompletion to work for MultipleChoice fields

Author: stanislaw

strictdoc/backend/sdoc/models/document.py

@@ -19,6 +19,8 @@
     SDocSectionIF,
 )
 from strictdoc.backend.sdoc.models.type_system import (
+    GrammarElementField,
+    GrammarElementFieldMultipleChoice,
     GrammarElementFieldSingleChoice,
 )
 from strictdoc.core.document_meta import DocumentMeta
@@ -210,20 +212,29 @@ def enumerate_custom_content_field_titles(
             0
         ].enumerate_custom_content_field_titles()
 
-    def get_options_for_singlechoice(
+    def get_grammar_element_field_for(
         self, element_type: str, field_name: str
-    ) -> List[str]:
+    ) -> GrammarElementField:
         """
-        Returns the list of valid options for a SingleChoice field in this document.
+        Returns the GrammarElementField for a field of a [element_type] in this document.
         """
-        assert self.grammar is not None
-        grammar: DocumentGrammar = self.grammar
+        grammar: DocumentGrammar = assert_cast(self.grammar, DocumentGrammar)
         element: GrammarElement = grammar.elements_by_type[element_type]
+        field: GrammarElementField = element.fields_map[field_name]
+        return field
 
-        field = element.fields_map[field_name]
-
-        choice_grammar_element_field: GrammarElementFieldSingleChoice = (
-            assert_cast(field, GrammarElementFieldSingleChoice)
+    def get_options_for_choice(
+        self, element_type: str, field_name: str
+    ) -> List[str]:
+        """
+        Returns the list of valid options for a Single/MultiChoice field in this document.
+        """
+        field: GrammarElementField = self.get_grammar_element_field_for(
+            element_type, field_name
         )
 
-        return choice_grammar_element_field.options
+        if isinstance(field, GrammarElementFieldSingleChoice) or isinstance(
+            field, GrammarElementFieldMultipleChoice
+        ):
+            return field.options
+        raise AssertionError(f"Must not reach here: {field}")

strictdoc/export/html/_static/controllers/autocompletable_field_controller.js

@@ -15,8 +15,9 @@
       ready: Boolean,
       url: String,
       minLength: Number,
-      delay: { type: Number, default: 300 },
+      delay: { type: Number, default: 10 },
       queryParam: { type: String, default: "q" },
+      multipleChoice: Boolean,
     }
     static uniqOptionId = 0
 
@@ -37,6 +38,8 @@
 
       this.onInputChange = debounce(this.onInputChange, this.delayValue)
 
+      this.autocompletable.addEventListener("input", this.onInputChange)
+
       autocompletable.addEventListener("keydown", (event) => {
         const handler = this[`on${event.key}Keydown`]
         if (handler) handler(event)
@@ -60,18 +63,6 @@
         }
       });
 
-      autocompletable.addEventListener("input", (event) => {
-        const query = autocompletable.innerText.trim()
-        if (query && query.length >= this.minLengthValue) {
-          this.fetchResults(query)
-        } else {
-          this.hideAndRemoveOptions()
-        }
-
-        const text = filterSingleLine(this.autocompletable.innerText)
-        this.hidden.value = text
-      });
-
       this.results.addEventListener("mousedown", this.onResultsMouseDown)
       this.results.addEventListener("click", this.onResultsClick)
 
@@ -177,10 +168,30 @@
       }
 
       const textValue = selected.getAttribute("data-autocompletable-label") || selected.textContent.trim()
-      const value = selected.getAttribute("data-autocompletable-value") || textValue
-      this.autocompletable.innerText = value
+      let   suggestion = selected.getAttribute("data-autocompletable-value") || textValue
+    
+      if (this.multipleChoiceValue) {
+        // Get the current text content
+        const text = this.autocompletable.innerText || "";
+        const parts = text.split(",");
+
+        // Replace the last incomplete token with the suggestion.
+        parts[parts.length - 1] = " " + suggestion;
+        suggestion = parts.map(p => p.trim()).join(", ")
+      } 
+
+      this.autocompletable.innerText = suggestion
+      this.hidden.value = suggestion
+
+      // Move the cursor to the end of the input. 
+      this.autocompletable.focus();
+      const range = document.createRange();
+      range.selectNodeContents(this.autocompletable);
+      range.collapse(false);
+      const sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
 
-      this.hidden.value = value
       this.hidden.dispatchEvent(new Event("input"))
       this.hidden.dispatchEvent(new Event("change"))
 
@@ -190,7 +201,7 @@
       this.element.dispatchEvent(
         new CustomEvent("autocompletable.change", {
           bubbles: true,
-          detail: { value: value, textValue: textValue, selected: selected }
+          detail: { value: suggestion, textValue: textValue, selected: selected }
         })
       )
     }
@@ -213,6 +224,18 @@
       }, { once: true })
     }
 
+    onInputChange = ()  => {
+      const query = this.autocompletable.innerText.trim()
+      if (query && query.length >= this.minLengthValue) {
+        this.fetchResults(query)
+      } else {
+        this.hideAndRemoveOptions()
+      }
+
+      const text = filterSingleLine(this.autocompletable.innerText)
+      this.hidden.value = text
+    }
+
     identifyOptions() {
       const prefix = this.results.id || "autocompletable"
       const optionsWithoutId = this.results.querySelectorAll(`${optionSelector}:not([id])`)

strictdoc/export/html/form_objects/requirement_form_object.py

@@ -58,14 +58,14 @@ def __init__(
         field_name: str,
         field_type: RequirementFormFieldType,
         field_value: str,
-        field_is_autocompletable: bool = False,
+        field_gef_type: str = RequirementFieldType.STRING,
     ):
         assert isinstance(field_value, str)
         self.field_mid: str = field_mid
         self.field_name: str = field_name
         self.field_value: str = field_value
         self.field_type = field_type
-        self.field_is_autocompletable = field_is_autocompletable
+        self.field_gef_type: str = field_gef_type
 
     def is_singleline(self) -> bool:
         return self.field_type == RequirementFormFieldType.SINGLELINE
@@ -74,7 +74,13 @@ def is_multiline(self) -> bool:
         return self.field_type == RequirementFormFieldType.MULTILINE
 
     def is_autocompletable(self) -> bool:
-        return self.field_is_autocompletable
+        return self.field_gef_type in (
+            RequirementFieldType.SINGLE_CHOICE,
+            RequirementFieldType.MULTIPLE_CHOICE,
+        )
+
+    def is_multiplechoice(self) -> bool:
+        return self.field_gef_type == RequirementFieldType.MULTIPLE_CHOICE
 
     def get_input_field_name(self):
         return f"requirement[fields][{self.field_mid}][value]"
@@ -109,9 +115,7 @@ def create_from_grammar_field(
                     else RequirementFormFieldType.SINGLELINE
                 ),
                 field_value=value,
-                field_is_autocompletable=(
-                    grammar_field.gef_type == RequirementFieldType.SINGLE_CHOICE
-                ),
+                field_gef_type=grammar_field.gef_type,
             )
         raise NotImplementedError(grammar_field)
 
@@ -137,9 +141,7 @@ def create_existing_from_grammar_field(
                     else RequirementFormFieldType.SINGLELINE
                 ),
                 field_value=field_value,
-                field_is_autocompletable=(
-                    grammar_field.gef_type == RequirementFieldType.SINGLE_CHOICE
-                ),
+                field_gef_type=grammar_field.gef_type,
             )
         raise NotImplementedError(grammar_field)
 
@@ -150,6 +152,7 @@ def create_mid_field(mid: MID) -> "RequirementFormField":
             field_name="MID",
             field_type=RequirementFormFieldType.SINGLELINE,
             field_value=mid,
+            field_gef_type=RequirementFieldType.STRING,
         )
 
 

strictdoc/export/html/templates/components/form/field/autocompletable/index.jinja

@@ -12,6 +12,7 @@
 {%- assert testid_postfix is defined, "testid_postfix is defined" -%}
 {%- assert autocomplete_url is defined, "autocomplete_url is defined" -%}
 {%- assert autocomplete_len is defined, "autocomplete_len is defined" -%}
+{%- assert autocomplete_multiplechoice is defined, "autocomplete_multiplechoice is defined" -%}
 
 {% if field_required is not defined -%}
 {% set field_required=false -%}
@@ -49,6 +50,9 @@
     {%- if field_class_name is not none -%}
       class="{{ field_class_name }}"
     {%- endif -%}
+    {%- if autocomplete_multiplechoice -%}
+    data-autocompletable-multiple-choice-value="true"
+    {%- endif-%}
     data-testid="form-field-{{ testid_postfix }}"
     data-autocompletable-target="input"
     data-autocompletable-url-value="{{ autocomplete_url }}"

strictdoc/export/html/templates/components/form/row/row_with_relation.jinja

@@ -57,6 +57,7 @@
     mid = relation_row_context.field.field_mid,
     autocomplete_url = "/autocomplete/uid?exclude_requirement_mid="~requirement_mid,
     autocomplete_len = "2",
+    autocomplete_multiplechoice = False,
     testid_postfix = "relation-uid"
   %}
   {%- include "components/form/field/autocompletable/index.jinja" %}

strictdoc/export/html/templates/components/form/row/row_with_text_field.jinja

@@ -47,7 +47,8 @@
       {%- with
         autocomplete_url = "/autocomplete/field?document_mid="~document_mid~"&element_type="~element_type~"&field_name="~field_label,
         result_class_name = "requirement__link",
-        autocomplete_len = "0"
+        autocomplete_len = "0",
+        autocomplete_multiplechoice = text_field_row_context.field.is_multiplechoice()
       %}
         {%- include "components/form/field/autocompletable/index.jinja" %}
       {%- endwith -%}

strictdoc/server/routers/main_router.py

@@ -34,6 +34,10 @@
     SDocNode,
 )
 from strictdoc.backend.sdoc.models.section import SDocSection
+from strictdoc.backend.sdoc.models.type_system import (
+    GrammarElementField,
+    RequirementFieldType,
+)
 from strictdoc.backend.sdoc.writer import SDWriter
 from strictdoc.core.actions.export_action import ExportAction
 from strictdoc.core.analyzers.document_stats import DocumentTreeStats
@@ -2764,7 +2768,7 @@ def get_autocomplete_field_results(
         field_name: Optional[str] = None,
     ):
         """
-        Returns matches of possible SingleChoice values of a field.
+        Returns matches of possible values of a SingleChoice or MultiChoice field.
         The field is identified by the document_mid, the element_type, and the field_name.
         """
         output = ""
@@ -2773,20 +2777,59 @@ def get_autocomplete_field_results(
             and document_mid is not None
             and element_type is not None
         ):
-            query_words = q.lower().split()
-            resulting_values = []
-
             document: SDocDocument = (
                 export_action.traceability_index.get_node_by_mid(
                     MID(document_mid)
                 )
             )
             if document:
-                all_options = document.get_options_for_singlechoice(
+                all_options = document.get_options_for_choice(
                     element_type, field_name
                 )
+                field: GrammarElementField = (
+                    document.get_grammar_element_field_for(
+                        element_type, field_name
+                    )
+                )
+
+                if field.gef_type == RequirementFieldType.MULTIPLE_CHOICE:
+                    # MultipleChoice: We split the query into its parts:
+                    #
+                    # Example User input: "Some Value, Another Value, Yet ano|".
+                    # parts = ['some value', 'another value', 'yet ano']                # noqa: ERA001
+                    parts = q.lower().split(",")
+
+                    # For the lookup, we want to use the only the last, still
+                    # incomplete part, not the full query:
+                    #
+                    # last_part = "yet ano"                                             # noqa: ERA001
+                    # query_words = ['yet', 'ano']                                      # noqa: ERA001
+                    last_part = parts[-1].strip()
+                    query_words = last_part.split()
+
+                    # We also filter the already selected choices from the
+                    # options we are going to be send to the user,
+                    # as MultipleChoices is a Set, so options shall be
+                    # selectable at most once.
+                    #
+                    # In the example, we would remove 'some value' and 'another value'.
+                    already_selected = [
+                        p.strip() for p in parts[:-1] if p.strip()
+                    ]
+                    filtered_options = [
+                        choice
+                        for choice in all_options
+                        if choice.lower() not in already_selected
+                    ]
+                else:
+                    # SingleChoice: we use the full query and all available options.
+                    query_words = q.lower().split()
+                    filtered_options = all_options
+
+                resulting_values = []
 
-                for option_ in all_options:
+                # Now filter the remaining options for those that match all words in query_words.
+                for option_ in filtered_options:
                     words_ = option_.strip().lower()
 
                     if all(word_ in words_ for word_ in query_words):